Inserimento di suoni, immagini e filmati
Argomenti trattati:
- Inserimento di suoni
Come gestire l'inserimento di brani musicali in un ipertesto.
- Inserimento di immagini:
Come inserire immagini gestibili come la formattazione.
- Inserimento di filmati:
Come inserire filmati con la stessa facilità delle immagini.
Premessa
Per iniziare l’argomento è necessaria una premessa: per
una buona riuscita dell’inserimento dei contenuti
multimediali in una pagina web è bene abituarsi a
posizionare gli elementi da inserire in una pagina web
nello stesso ambiente. Nel concreto, quando state
progettando di creare una pagina web con inserimento di
suoni, immagini e filmati è bene prevedere l’uso di
sottocartelle, dandogli nomi significativi, come in figura a
lato, all’interno dell’ambiente dove state creando la
pagina. Questo ci aiuterà molto a comprendere come
impostare i link ai contenuti multimediali.
Inserimento di suoni
La presenza di file audio può essere una piacevole colonna sonora alla navigazione delle
pagine web, oppure un fastidioso fardello capace solo di rallentare il caricamento ed
innervosire il visitatore.
Come spesso viene ripetuto in questa guida e' necessario considerare che sì, e'
importante la piacevolezza grafica e musicale delle pagine web, ma e' fondamentale che
la navigazione non risulti lenta e soprattutto l'utilizzo di musiche di facile ascolto per non
infastidire l'utente e impedire loro una gradevole navigazione.
Il mio consiglio e' quindi l'utilizzo di musica in tono con la tipologia di sito che si sta
creando e di evitare grossi file .wav (del peso anche di una cinquantina di Mb), anche se
le attuali tecnologie ADSL hanno portato a velocità di download tali da non preoccupare
più il carico non eccessivo di una pagina, ma optare per il famosissimo e leggero formato
mp3 (che risulta essere anche dieci volte più leggero del WAV), in quanto i pochi Mb di cui
è composto possono notevolmente accelerare la navigazione.
Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati
Sconsiglio inoltre vivamente i grossolani file MIDI (.mid) per via soprattutto della scarsa
qualità del suono emesso.
Il comando <BGSOUND>, utilizzato per inserire un suono di sottofondo nella nostra
pagina, funziona solo con Internet Explorer, e questa è la sintassi da utilizzare:
<BGSOUND SRC="brano.mp3" LOOP=INFINITE>
Come si può vedere il tag BGSOUND è seguito dall'attributo SRC= che contiene il nome,
e l'eventuale percorso, del brano utilizzato come musica di sottofondo e di un attributo
chiamato LOOP= che contiene il numero di volte che il brano deve essere ripetuto. Nel
nostro caso il valore INFINITE indica che il brano deve essere ripetuto finché non si
abbandona la pagina.
In realtà questo non è il modo migliore, né il più efficace, per inserire un file audio, perché
obsoleto e compatibile soltanto con Internet Explorer.
Un'altro modo obsoleto, ma crossbrowser prevede l'uso di <embed>.
<embed src="url del file audio" autostart="true">
Se invece vogliamo seguire le specifiche dell'HTML 4.01, utilizziamo il tag <object>:
<object data="suoni/nome del file audio.mp3" type="audio/mp3" autostart="true">
<embed src=" suoni/nome del file audio.mp3" autostart="true">
< /object>
tuttavia, affinché tutto funzioni perfettamente, spesso conviene indicare il tipo di plugin da
utilizzare grazie all'attributo classid. Vediamo il codice necessario ad aprire la barra del
lettore multimediale RealOne (se RealOne non è presente, l'utente verrà avvisato). Notare
che all'interno del tag <object> vengono espressi i parametri che indicano come devono
essere visualizzati i controlli di RealOne, e la sintassi alternativa per browser obsoleti
(indicata tramite <embed>):
<object id="sound1" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="src" value=" suoni/nome del file audio.mp3">
<param name="controls" value="All">
<param name="console" value="sound1">
<param name="autostart" value="false">
<embed src=" suoni/nome del file audio.mp3" type="audio/mp3" console="sound1"
controls="All" autostart="false" name="sound1">
< /object>
Ricordiamo anche che l'uso di suoni o musica di sottofondo se utilizzata in modo
eccessivo può compromettere l'usabilità del sito.
Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati
Inserimento di immagini.
Internet, solo negli ultimi 10 anni si è affermata come media di massa.
Per lunghi anni è stato un sistema di comunicazione ad esclusivo utilizzo di apparati
militari prima, e universitari dopo. E' agevole immaginare quanto poco inclini alla grafica ed
all'estetica fossero i vecchi navigatori della Rete.
Il nuovo modo di vedere un immagine è anche merito del tag, oggi molto comune, <IMG>.
Prima di trattare nello specifico il tag principale per l'inserimento di immagini negli ipertesti
è bene precisare alcuni concetti di HTML.
A differenza di molti editor di testo (Ms Word, per esempio) gli ipertesti non vengono "fusi"
con le immagini a corredo grafico, ma si limitano a richiamarle da un percorso specifico in
locale o su Web.
In altre parole esiste una soluzione di continuità molto chiara tra file .htm e immagini (e,
come vedremo in seguito, anche con suoni, applet ecc.).
I documenti HTML si limitano a prevedere uno spazio al proprio interno entro il quale
vanno inserite le immagini richiamate.
Il tag <IMG> rappresenta, in un certo senso, una funzione di richiamo delle immagini e per
questo motivo non necessita di chiusura. La sintassi è la seguente:
<IMG SRC="immagine.gif">
L’attributo SRC è l'abbreviativo di SOURCE (sorgente).
Questo attributo contiene il percorso dal quale il browser "preleva" l'immagine (in questo
caso "immagine.gif").
I browser (Mozilla Firefox, MS Internet Explorer, Google Chrome, Opera, ecc.)
riconoscono molti formati grafici, anche se sono tre quelli più utilizzati: GIF (Graphics
Interchange Format), JPEG (Joint Photographics Experts Group) e PNG (Portable
Network Graphics) essendo questi, a parità di risoluzione, i migliori per quanto riguarda
peso e qualità convenienti ad essere caricati velocemente dai browser in Rete.
Il tag <IMG> è corredato da diversi attributi molto utili ai fini del suo utilizzo. Vediamo
insieme quali.
Inserimento di immagini – l'attributo ALT
L'utilizzo di commenti testuali alle immagini è una fondamentale regola da osservare nella
creazione di siti Web per alcune buone ragioni:

taluni browser potrebbero essere impostati per non richiamare le immagini;

i browser testuali per non vedenti non riuscirebbero ad interpretare le immagini
senza un commento.
è possibile evitare didascalie inserendo commenti all'interno dell'immagine stessa.
In tutti i casi considerati l'uso di commenti risolve il problema e consente di
ottimizzare l'utilizzo di una pagina Web. La corretta sintassi per i commenti è la
seguente:

Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati
<IMG SRC="immagine.gif" ALT="Commento visualizzabile con il cursore">
Inserimento di immagini – gli attributi WIDTH e HEIGHT
Negli esempi finora indicati non abbiamo specificato le misure dell'immagine che il browser
ha provveduto a cercare automaticamente. E' possibile definire altezza e larghezza
dell'immagine con gli attributi WIDTH ed HEIGHT:
<IMG SRC="immagini/immagine.gif" WIDTH=178 HEIGHT=180 ALT="Commento">
dove WIDTH=178 è la dimensione orizzontale (larghezza) dell'immagine espressa in pixel,
e HEIGHT=180 la dimensione verticale (altezza).
Con questi attributi è possibile definire dimensioni differenti da quelle effettive
dell'immagine. E', comunque, consigliabile inserire immagini di dimensioni naturali
soprattutto se in formato GIF, visto che ridimensionando questo formato la qualità decade
enormemente.
Inserimento di immagini – l'attributo BORDER
Con l'attributo BORDER è possibile assegnare un bordo all'immagine. I valori sono
numerici ed espressi in pixel. Il valore BORDER impostato su 0 ha l'effetto di non
visualizzare alcun bordo. Quest'ultimo è il valore di default, ma se l'immagine è anche un
link viene automaticamente assegnato un BORDER=1.
Questa che segue è la giusta sintassi:
<IMG SRC="immagini/immagine.jpg" WIDTH=178 HEIGHT=180 BORDER=0 ALT="Commento">
Inserimento di immagini – l'attributo ALIGN
L'attributo ALIGN definisce la posizione dell'immagine rispetto al testo posto
immediatamente prima o dopo la stessa. Esistono varie opzioni per questo attributo:





ALIGN=top: allinea la prima riga di testo sulla sinistra al top dell'immagine.
ALIGN=middle: allinea la prima riga di testo sulla sinistra al centro dell'immagine.
ALIGN=bottom: allinea la prima riga di testo sulla sinistra nella parte più bassa
dell'immagine.
ALIGN=left: allinea il testo sulla sinistra dell'immagine partendo dal top.
ALIGN=right: allinea il testo sulla destra dell'immagine partendo dal top.
Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati
Inserimento di filmati
Anzitutto la scelta del formato, se il vostro sistema operativo è Windows potreste optare
per il formato wmv, vi elenco di seguito alcune motivazioni:
1. Tutti i PC Windows dispongono di Windows Media Player;
2. a partire dalla stessa origine audio/video i filmati in formato .wmv sono un po’ più
compressi ed hanno una qualità video leggermente migliore rispetto ai loro
equivalenti in formato .mov o .mp4;
Per l'inserimento di un filmato all'interno di una pagina la procedura agli albori di HTML era
quasi identica a quella di un immagine; l'unica differenza consisteva nel fatto che
un'immagine non è altro che un fotogramma che ritrae una figura statica, mentre un filmato
è una serie di fotogrammi illustrati dinamicamente tramite applicazioni apposite.
Se ne deduce che la differenza è all'origine di questi elementi multimediali: una è statica
(l'immagine) l'altra è dinamica (il filmato).
Il tag <IMG>, visto finora, supportava anche il caricamento di file video in diversi formati.
Ciò che permetteva tale inclusione in una pagina web era l'attributo DYNSRC
(abbreviativo della parola Dynamic Source), permettendo così la visione dei filmati.
Quindi la sintassi utilizzata per l'inserimento di un filmato era:
<IMG DYNSRC="filmati/nomefilmato.avi" WIDTH="250" HEIGHT="150" LOOP="infinite">
Come potete notare valgono le stesse regole dell'inserimento delle immagini.
Unica eccezione era l'attributo AUTOSTART il cui valore booleano "=true" ci permetteva
di eseguire il filmato all'apertura della pagina.
Allo stato attuale la visualizzazione di un filmato, anche in streaming, utilizza, come per
l’inserimento dei suoni, la definizione di un oggetto multimediale all’interno della pagina:
Si consiglia, sempre per gli ovvi motivi di dimensione e tempo di caricamento, di utilizzare i
formati consigliati: AVI, MPEG e WMV. Per i nostri esempi adotteremo il formato AVI.
Con l’avvento del web 2.0 e della comunicazione in tempo reale sono nati nuovi portali di
comunicazione più o meno in tempo reale, tra questi i social network che ormai sono
entrati prepotentemente nella vita di ognuno di noi.
Tra questi sicuramente il più utilizzato è quello dei contenuti multimediali YouTube.
Questo modello di social network permette anche la condivisione dei suoi contenuti
mediante codice da incorporare ed adesso vedremo com’è semplice inserire un filmato in
Rete nella nostra pagina.
Per iniziare, ci colleghiamo a YouTube.com e scegliamo il nostro video:
Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati
Subito sotto il video, dopo il titolo e le informazioni sul canale, c’è una sezione dedicata
all’interazione del video con l’”esterno”.
Cliccando nella sezione Condividi, subito in basso, si apriranno i link ai vari altri Social.
Inoltre troverete una nuova sezione chiamata Codice da incorporare, come da immagine
in basso.
Selezionando la sezione accennata si aprirà un modulo con un codice HTML già
selezionato:
Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati
A questo punto basta copiare il testo attraverso il tasto destro del mouse o premendo la
combinazione Ctrl+C della tastiera e incollare il codice nel codice HTML della vostra
pagina nel punto selezionato.
Infine, il risultato sarà il seguente:
Il linguaggio HTML – prof. Maurizio Gambino | 04. Inserimento di suoni, immagini e filmati