Il tag <img> e i collegamenti
Per inserire un'immagine in una pagina HTML è necessario usare il tag <IMG>. Il tag <img>, al contrario dei normali tag di formattazione, è un tag che non ha chiusura (</img>). Per questo motivo, nella versione di (X)HTML il tag deve presentare chiusura implicita. La chiusura implicita si effettua inserendo uno slash alla fine del tag, prima di chiudere la parentesi triangolare (ad esempio <img />).
Il tag <img /> ha quattro attributi obbligatori.
| attributo | valore | significato |
|---|---|---|
| width="" | misura | Specifica la larghezza dell'immagine |
| height="" | misura | Specifica l'altezza dell'immagine |
| alt="" | descrizione | Specifica la descrizione sostitutiva dell'immagine |
| src="" | link | Specifica il percorso assoluto o relativo dell'immagine |
Di seguito è riportata un'immagine e, sotto, il codice utilizzato per inserirla.
 |
| <img src="files/tagimg.jpg" alt="L'immagine mostra una scultura che rappresenta una faccia" width="300" height="209" /> |
Come si vede, l'ordine degli attributi è indifferente. L'immagine riportata più sopra è salvata in JPG, con fattore di compressione 40%.
L'attributo src
L'attributo src ha come valore il collegamento, assoluto o relativo, all'immagine (in formato fig, jpg o png). In ogni pagina web, le immagini visualizzate sono solamente collegata e non propriamente inserite nella pagina. Pertanto, quando si mette la pagina on line, anche le eventuali immagini inserite nella pagina devono trovarsi su Internet, altrimenti non si visualizzano.
L'attributo src consente di inserire, nel tag img, il collegamento all'immagine.
Di regola, se l'immagine si trova nello stesso sito in cui verrà caricata la pagina on line, si usa il collegamento relativo a quell'immagine. Se invece l'immagine si trova in un altro sito, è obbligatorio usare il collegamento assoluto.
Un collegamento assoluto è nella seguente forma:
src="http://www.nomesito.it/cartella/cartella/file.gif"
Vediamo di analizzare in dettaglio ogni singolo pezzo del collegamento assoluto:
| componente | significato |
|---|---|
| http:// | Protocollo di trasmissione. |
| www.nomesito.it | Dominio (di secondo livello) di un sito web. |
| cartella/ | Percorso che va dalla cartella principale locale alla o alle sottocartelle. |
| file.gif | Nome del file, comprensivo di estensione. |
Pertanto, data la seguente struttura, il collegamento assoluto all'immagine la_repubblica_logo.gif sarà il seguente:
 |
| src="http://www.repubblica.it/sharedfiles/ images/la_repubblica_logo.gif" |
Nel collegamento relativo, invece, va sempre considerata la posizione, rispetto alla struttura delle cartelle del sito, del file HTML in cui si sta inserendo l'immagine. A partire dalla sua posizione sul server si utilizzano le seguenti notazioni:
| componente | significato |
|---|---|
| ../ | Serve per salire di una cartella, dalla cartella in cui ci si trova. |
| cartella/ | Percorso che va dall'attuale posizione ad una sottocartella. |
| file.gif | Nome del file, comprensivo di estensione. |
Di seguito alcuni esempi di collegamenti relativi.
 |
| Da index.html a la_repubblica_logo.gif
src="sharedfiles/images/la_repubblica_logo.gif"
|
| Da index.html a foto.jpg
src="foto.jpg"
|
| Da cronaca.html a foto.jpg
src="../foto.jpg"
|
| Da cronaca.html a la_repubblica_logo.gif
src="images/la_repubblica_logo.gif"
|