Finora abbiamo visto come inserire e formattare il testo all’interno delle nostre pagine Web. Naturalmente possiamo inserire anche delle immagini: diagrammi e grafici, fotografie, e in genere immagini create con un programma di elaborazione grafica (come The GIMP, Photoshop o Paint Shop Pro).

I formati ammessi nel Web sono sostanzialmente tre:

• GIF (Graphic Interchange Format): le GIF sono immagini con non più di 256 colori (dunque con colori piatti e senza sfumature), come grafici o icone
• JPG: è l’acronimo del gruppo di ricerca che ha ideato questo formato (il Joint Photographic Experts Group), idoneo per le immagini di qualità fotografica
• PNG (Portable Network Graphic). Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è appunto proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno (come il supporto al canale alfa, caratteristica questa non ancora perfettamente supportata da ogni browser).

Non provate dunque a inserire un file “.psd” (è il formato nativo di Photoshop) all’interno della vostra pagina HTML: con grande probabilità il browser non vi caricherà il file che vorreste includere (dovete infatti prima convertire il file in uno dei formati sopra-indicati).

Inoltre è importante ricordare che il codice HTML fornisce delle indicazioni al browser su come visualizzare il testo e le immagini - ed eventualmente i video e i suoni - all’interno della pagina: il testo (come abbiamo visto) è scritto direttamente nel file HTML, le immagini invece sono caricate insieme alla pagina.

Attenzione dunque a non inserire immagini troppo pesanti (ricordatevi di ottimizzare sempre i file); bisogna evitare inoltre di sovraccaricare la pagina con troppe immagini. Allo stato attuale dell’arte infatti molti utenti (e non soltanto quelli italiani) navigano ancora con un modem analogico da 56 Kbs: inserire troppe immagini significa dunque creare pagine lente da caricare.

Per ottenere un sito web dalla grafica accattivante, spesso è sufficiente giocare con i colori dello sfondo e delle scritte.

La sintassi per inserire una immagine è:

<img src="http://html.it/guide/img/guida_html/miaImmagine.gif">

dove:

• img significa image, cioè immagine
• src significa source, cioè origine

Il tag <img> è un tag “vuoto”, che non ha la necessità di essere chiuso.

Ecco ad esempio come inserire il logo di HTML.it in una pagina dallo sfondo blu (si presuppone che il logo si trovi nella stessa cartella del file HTML):

<img src="logo.gif">

Resta valido il discorso sui percorsi relativi ed assoluti visto in precedenza. Avremo ad esempio:

<img src="../img/logo.gif">
<img src=" http://www.html.it/img/logo.gif ">

Dal momento che il browser normalmente non sa quali siano le dimensioni dell’immagine, finché questa non sia caricata completamente, è un’ottima abitudine quella di indicare già nel codice la larghezza (width) e l’altezza (height) dell’immagine: in questo modo si evita di vedere la pagina costruirsi man mano che viene caricata, poiché stiamo dando al browser un’idea dell’ingombro. Ad esempio:

<img src="logo.gif" width="224" height="69">

L’attributo alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non viene caricata o nel caso in cui non lo sia affatto:

<img src="logo.gif" alt="HTML.it" width="224" height="69">

L’attributo alt è di estrema utilità per rendere il sito accessibile a tutti gli utenti: i disabili che non sono in grado di vedere nitidamente le immagini sullo schermo potrebbero avere delle difficoltà, nel caso in cui l’attributo alt non sia specificato.

Gli ipo-vedenti e i non-vedenti sono infatti in grado di comprendere il contenuto delle immagini grazie a dei software appositi (gli screen reader) che “leggono” lo schermo tramite un programma di sintesi vocale. Non specificare il testo alternativo significa rendere impossibile la navigazione.

Nel caso in cui la spiegazione dell’immagine sia particolarmente lunga, è possibile espandere la descrizione sintetica - fornita tramite l’attributo "alt" - grazie ad un altro attributo: si tratta di longdesc (long description), che permette di specificare un file con una spiegazione estesa dell’immagine. Ecco la sintassi:

<img src="logo.gif" alt="HTML.it" longdesc=“descrizione.html“ width="224" height="69">

Nell’esempio allegato è possibile visualizzare il codice di una pagina con la descrizione estesa dell’immagine. Nel caso in cui si utilizzi questo attributo è anche buona norma utilizzare un link esplicito alla pagina della descrizione.

longdesc dovrebbe essere utilizzato soprattutto nel caso in cui si usino delle immagini mappate (argomento che analizzeremo in seguito), in modo da fornirne una spiegazione esauriente in ogni contesto.

In realtà l'attributo alt non serve, come molti credono, a visualizzare un etichetta esplicativa dell’immagine nel caso in cui il cursore del mouse si soffermi sopra essa: questo semmai è un effetto collaterale che si verifica con Internet Explorer. L’attributo corretto per far visualizzare un testo che commenti l’immagine è infatti title:

<img src="logo.gif" title="HTML.it" alt="HTML.it" width="224" height="69">

È inoltre possibile specificare la grandezza (in pixel) del bordo attorno all’immagine:

<img src="logo.gif" border="3" width="224" height="69">

Si noti che i link lasciano sempre di default un bordo di un pixel attorno all’immagine (il colore sarà quello espresso nel body dall’attributo link, oppure quello default – quindi blu – se non specificato altrimenti):

<a href="http://www.html.it" target="_blank"> <img src="logo.gif" width="224" height="69"> </a>

Dunque, nel caso dei link se non si desidera avere i bordi, sarà necessario impostarli a “0”:

<a href="http://www.html.it" target="_blank"> <img src="logo.gif" border="0" width="224" height="69"> </a>

TARGET

È anche possibile specificare in quale finestra la pagina linkata deve essere aperta: di default infatti la pagina viene aperta all'interno del documento stesso, ma è possibile specificare che la pagina sia aperta in una nuova finestra:

<a target="_blank" href="http://www.html.it">visita HTML.IT</a>

cioè:

visita HTML.IT

vedremo questo attributo più in dettaglio quando parleremo dei frames.

title

L'attributo title è molto importante, e serve per specificare un testo esplicativo per l'elemento a cui l'attributo è riferito (il title si può infatti utilizzare anche per elementi differenti dalle ancore). Questa spiegazione addizionale favorisce l'accessibilità del sito anche ai disabili, alle persone per esempio che hanno disturbi alla vista. Se lasciate il cursore del mouse per qualche secondo su un collegamento dotato di title, vedrete comparire una specie di etichetta con il testo specificato nel title:

<a title="in HTML.it puoi trovare risorse per webmaster" 

    href="http://www.html.it/" target="_blank" >

    Visita HTML.it

</a>

cioè:

Visita HTML.it

L'attributo title è anche utilissimo per migliorare la propria presenza nei motori di ricerca, che ne vanno a leggere il contenuto.

hreflang

Con "hreflang" si indica la lingua del documento: si tratta di un attributo che migliora l'accessibilità del sito, oltre ad essere potenzialmente utile per i motori di ricerca (l'attributo può essere utilizzato ad esempio per specificare la presenza di una sezione del proprio sito in lingua inglese):

Nel sito del <a href="http://www.w3c.org/" hreflang="eng" target="_blank">World Wide Web Consortium</a> puoi trovare le specifiche dell'HTML in lingua inglese

cioè:

Nel sito del World Wide Web Consortium puoi trovare le specifiche dell'HTML in lingua inglese

accesskey

Le accesskey sono delle scorciatoie "da tastiera" che potete utilizzare nel vostro sito. Si tratta di scegliere delle lettere della tastiera che - quando vengano digitate dall'utente - permettono di andare direttamente a determinate pagine. Per esempio potreste specificare che:

<a href="http://www.html.it/" accesskey="h" target="_blank" >Torna all'home page di HTML.it</a>

cioè:

Torna all'home page di HTML.it

In questa pagina digitando "ALT + h + invio" con Internet Explorer, oppure direttamente "h + invio" con Mozilla si accede direttamente all'home page di HTML.it. Si tratta di un'altra tecnica per migliorare l'accessibilità, ma un uso improprio e indiscriminato di questa tecnica può risultare davvero deleterio per la navigazione. Diciamo che le accesskey dovrebbero essere riservate per la navigazione dei menu che portano alle parti principali del sito.

Colorare i link

Abbiamo già visto come colorare i link in tutta la pagina. Possiamo però aver bisogno di colorare alcuni link della pagina in modo diverso. Per farlo è sufficiente annidare il tag <font> all'interno del link:

<a href="http://www.html.it/" target="_blank" ><font color="red" size="2" face="Verdana, Arial, Helvetica, sans-serif">Torna all'home page di HTML.it</font></a>

cioè:

Torna all'home page di HTML.it

ovviamente il modo giusto per colorare i link non è quello di utilizzare il tag font, ma quello di utilizzare i fogli di stile, come spiegato nella Guida CSS.

Il tag <base>

I percorsi relativi fanno di norma riferimento alla directory in cui si trova il file HTML che stiamo scrivendo. Se tuttavia vogliamo far riferimento a un differente percorso per tutti i percorsi relativi, possiamo farlo specificandolo grazie al tag <base>, che va incluso nella head del documento. Ad esempio con:

<base href="http://www.mioSitoWeb.com/miaCartella">

specifico che d'ora in poi tutti i percorsi relativi faranno riferimento al percorso indicato. E poi nel documento potrò scrivere:

<a href="mioFile.html">collegamento al mio file</a>

sicuro che farà riferimento a:

http://www.mioSitoWeb.com/miaCartella/mioFile.html

Si tratta di una caratteristica particolarmente utile quando bisogna mandare ad esempio delle mailing list in formato HTML: possiamo infatti utilizzare i percorsi relativi per sviluppare la pagina della mailing list in locale, e mantenerli inalterati grazie all'utilizzo di questo tag. Grazie ad esso siamo infatti sicuri che anche l'utente che riceverà la mail potrà visualizzare le immagini e i link con un percorso corretto.