Fino ad ora, la definizione della vostra immagine dovrebbe apparire approssimativamente come segue:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Tuttavia, all'elemento img possono (e dovrebbero) essere assegnati alcuni attributi. In primo luogo c'è alt. Il testo definito qui viene mostrato dal browser quando l'immagine - per qualsiasi motivo - non può essere caricata.
Purtroppo, in relazione all'attributo alt si verificano spesso fraintendimenti. L'attributo alt è effettivamente destinato esclusivamente al caso in cui l'immagine non venga visualizzata. Alcuni browser mostrano il valore dell'attributo alt in una finestra di suggerimenti quando ci si sofferma sull'immagine con il cursore del mouse.
Questo comportamento è sbagliato. Per tali suggerimenti è invece presente l'attributo title. Una definizione simile sarebbe la seguente:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Il logo di PSD-Tutorials.de" />
In questo caso il valore di title sovrascrive quello di alt.
Dimensioni
Attualmente gran parte delle specifiche di dimensioni in HTML vengono gestite tramite CSS. Tuttavia, la definizione delle dimensioni non rientra in questo caso. L'altezza e la larghezza vengono definite invariabilmente tramite i due attributi width e height. Ecco un esempio:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Il logo di PSD-Tutorials.de" width="200" height="150" />
Se non si specifica un'unità di misura per width o height, i valori numerici vengono interpretati dal browser come misure in pixel. Nell'esempio precedente, l'immagine è quindi larga 200 pixel e alta 150 pixel. Sarebbe anche possibile utilizzare una percentuale.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Il logo di PSD-Tutorials.de" width="20%" height="15%" />
Le percentuali si riferiscono allo spazio disponibile per la visualizzazione. Se non vengono specificate le dimensioni, i browser mostrano le immagini nelle loro dimensioni originali.
Immagini e paragrafi di testo
Se collocate le immagini in combinazione con testo in flusso, fate attenzione.
<p><img src="logo.png" alt="" width="180" height="150" /> Questo testo viene visualizzato accanto all'immagine.</p>
L'elemento img è un cosiddetto elemento inline. Le immagini possono quindi essere posizionate direttamente nel testo. Se l'immagine è più alta dell'altezza della riga, il testo verrà allineato all'interno della riga dal browser. Per impostazione predefinita, il testo viene allineato in basso rispetto all'immagine.
L'allineamento poteva essere influenzato nelle versioni più vecchie di HTML tramite l'attributo align. Vi preghiamo di non utilizzarlo più, poiché è stato rimosso dalle specifiche HTML5. Utilizzate invece le possibilità offerte dal CSS. Grazie a ciò, ad esempio, potete far fluttuare l'immagine attorno al testo.
Una descrizione lunga
HTML vi offre la possibilità di fornire una descrizione dettagliata per un'immagine. È pratico quando un'immagine richiede effettivamente spiegazioni aggiuntive. Potete memorizzare le informazioni aggiuntive in vari punti e fare riferimenti ad esse.
Le informazioni aggiuntive possono essere posizionate in punti diversi.
<img src="bild1.png" alt="Diagramma 1" title="Diagramma 1" longdesc="#diagramm" />
In questo caso si presume che all'interno della pagina ci sia una sezione con l'ID diagramm.
Sicuramente la variante più comune è quella in cui le informazioni vengono memorizzate in un file esterno.
<img src="bild1.png" alt="Diagramma 1" longdesc="diagramma1.htm" />
Tuttavia, manca ancora il supporto dei browser in questo caso. Inoltre, sembra che questo attributo ponga i produttori dei browser di fronte alla domanda su come possano implementarlo facilmente.
Poiché, ad esempio, in Firefox non è davvero ben risolto. Se un'immagine ha un attributo longdesc, i visitatori normali del sito inizialmente non lo riconoscono. Devono invece fare clic con il pulsante destro del mouse sull'immagine.
Nel menu contestuale compare quindi la voce Mostra descrizione. Cliccando su di essa, viene visualizzata l'informazione aggiuntiva fornita da longdesc. Come detto, questo funziona così in Firefox, ma non è certamente elegante.
Opera ha risolto la situazione in modo molto simile. Se si fa clic sull'immagine con il tasto destro del mouse in questo browser, viene visualizzata la voce Lange Beschreibung.
Questa porta quindi alle informazioni aggiuntive indicate.
Anche il WC3 propone di specificare la descrizione lunga sotto forma di un URL dati.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
Se non avete ancora esperienza con questi URL dati, troverete informazioni dettagliate su http://de.wikipedia.org/wiki/Data-URL.
Definire le descrizioni delle immagini
Fino ad ora in HTML non c'erano modi per definire didascalie e raggruppamenti di immagini. Questo aspetto è stato modificato con HTML5. Sono stati introdotti infatti i due nuovi elementi figure e figcaption.
Per anticipare: figure non è destinato esclusivamente all'uso in combinazione con le immagini. Infatti, l'elemento può essere utilizzato per tutti gli elementi che integrano un documento. Questi possono essere immagini, ad esempio, ma anche grafici, esempi di codice e video.
Oltre a figure c'è anche figcaption. Attraverso questo è possibile dotare i contenuti, che non sono leggibili per determinati gruppi di utenti, di una descrizione alternativa.
Ecco un esempio dell'uso dei due elementi figure e figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Questo è il nostro nuovo logo.</figcaption> </figure>
Guardando il risultato nel browser si ottiene il seguente risultato:
Come i browser gestiscono questi due elementi rimane alla loro discrezione. In generale è possibile naturalmente influenzare di nuovo la visualizzazione tramite CSS.
All'interno di un elemento figure è possibile inserire un numero qualsiasi di immagini o altri elementi. Tuttavia, in un elemento figure può esserci solo un elemento figcaption. Anche qui un esempio:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>Questo è il nostro nuovo logo.</figcaption> </figure>
In questo modo è possibile includere più immagini in un elemento figure.
Specialmente per quanto riguarda il reperimento logico dei siti web o dei contenuti, HTML5 presenta numerose novità. Queste le apprenderete ovviamente nel corso di questa serie in modo dettagliato.
