032.3 Lezione 1

Le immagini sono Il tipo più comune di contenuto incorporato ad accompagnare il testo. Le immagini sono conservate separatamente e sono referenziate all’interno del file HTML con il tag <img>:

Il tag <img> non richiede un tag di chiusura. La proprietà src indica la posizione di origine del file immagine. In questo esempio, il file immagine logo.png deve trovarsi nella stessa directory del file HTML, altrimenti il browser non sarà in grado di visualizzarlo. La proprietà source location accetta percorsi relativi, quindi la notazione puntata può essere usata per indicare il percorso dell’immagine:

I due punti indicano che l’immagine si trova all’interno della directory contenitore relativa alla directory dove si trova il file HTML. Se il nome del file ../logo.png è usato dentro un file HTML il cui URL è http://example.com/library/periodicals/index.html, il browser richiederà il file immagine all’indirizzo http://example.com/library/logo.png.

La notazione puntata si applica anche se il file HTML non è un file reale nel filesystem; il browser HTML interpreta l’URL come se fosse un percorso a un file, ma è compito del server HTTP decidere se quel percorso si riferisce a un file o a un contenuto generato dinamicamente. Il dominio e il percorso corretto vengono aggiunti automaticamente a tutte le richieste al server, nel caso in cui il file HTML provenga da una richiesta HTTP. Allo stesso modo, il browser aprirà l’immagine corretta se il file HTML è stato aperto direttamente dal filesystem locale.

I percorsi di origine che iniziano con uno slash / sono trattati come percorsi assoluti. I percorsi assoluti hanno informazioni complete per le posizioni dell’immagine, quindi funzionano indipendentemente dalla posizione del documento HTML. Se il file dell’immagine si trova su un altro server, che sarà il caso quando viene usata un Content Delivery Network (CDN), deve essere incluso anche il nome del dominio.

Se l’immagine non può essere caricata, il browser HTML mostrerà il testo fornito dall’attributo alt invece dell’immagine. Per esempio:

L’attributo alt è anche importante per l’accessibilità. I browser “di solo testo” e gli screen reader lo usano come descrizione dell’immagine corrispondente.

I contenuti audio e video possono essere aggiunti a un documento HTML più o meno allo stesso modo delle immagini. Non sorprende che il tag per aggiungere audio sia <audio> e quello per aggiungere video sia <video>. Ovviamente, i browser di solo testo non sono in grado di riprodurre contenuti multimediali, quindi i tag <audio> e <video> impiegano il tag di chiusura per contenere il testo usato come fallback per l’elemento che non può essere mostrato. Per esempio:

Se il browser non supporta il tag <audio>, verrà invece mostrata la riga “Unable to play recording.mp3”. L’uso dei tag di chiusura </audio> o </video> permette a una pagina web di includere contenuti alternativi più elaborati rispetto alla semplice linea di testo permessa dall’attributo alt del tag <img>.

L’attributo src per i tag <audio> e <video> funziona allo stesso modo del tag <img>, ma accetta anche URL che puntano a un flusso live. Il browser si occupa di bufferizzare, decodificare e visualizzare il contenuto come viene ricevuto. L’attributo controls visualizza i controlli di riproduzione. Senza di esso, il visitatore non sarà in grado di mettere in pausa, riavvolgere o controllare in altro modo la riproduzione.

Un documento HTML può essere annidato in un altro documento HTML, in modo simile all’inserimento di un’immagine in un documento HTML, ma usando il tag <iframe>:

I browser più semplici di solo testo non supportano il tag <iframe> e visualizzeranno invece il testo racchiuso. Come per i tag multimediali, l’attributo src imposta la posizione sorgente del documento annidato. Gli attributi width e height possono essere aggiunti per cambiare le dimensioni predefinite dell’elemento iframe.

L’attributo name permette di fare riferimento all’iframe e di cambiare il documento annidato. Senza questo attributo, il documento annidato non può essere cambiato. Un elemento anchor può essere usato per caricare un documento da un’altra posizione all’interno di un iframe invece che dalla finestra corrente del browser.

L’indirizzo di un documento HTML può opzionalmente contenere un frammento che può essere usato per identificare una risorsa all’interno del documento. Questo frammento, noto anche come URL anchor, è una stringa che segue un carattere di hash # alla fine dell’URL. Per esempio, la parola History è una anchor nella URL https://en.wikipedia.org/wiki/Internet#History.

Quando l’URL ha un frammento, il browser scorrerà fino all’elemento corrispondente nel documento: cioè l’elemento il cui attributo id è uguale alla URL anchor. Nel caso dell’URL dato, https://en.wikipedia.org/wiki/Internet#History, il browser salterà direttamente alla sezione “History”. Esaminando il codice HTML della pagina, scopriamo che il titolo della sezione ha l’attributo id corrispondente:

Le URL anchor possono essere usate nell’attributo href del tag <a>, sia quando puntano a pagine esterne sia quando puntano a posizioni all’interno della pagina corrente. In quest’ultimo caso, è sufficiente iniziare con il solo segno di hash con il frammento di URL, come in <a href="#History">History</a>.

Ci sono modi per personalizzare il modo in cui il browser reagisce ai frammenti di URL. È possibile, per esempio, scrivere una funzione JavaScript che recepisca l’evento hashchange della finestra e inneschi un’azione personalizzata, come un’animazione o una richiesta HTTP. Vale la pena notare, tuttavia, che il frammento di URL non viene mai inviato al server con l’URL, quindi non può essere utilizzato come identificatore dal server HTTP.