Inserire immagini all'interno di una pagina web
Una delle caratteristiche del linguaggio HTML è, come insito nel suo nome, l'essere ipertestuale. Con l'HTML, quindi, si supera il testo ed i documenti si arricchiscono di altri elementi come immagini ed elementi multimediali. In questa lezione vedremo come inserire un'immagine in un documento HTML.
Allo scopo l'HTML offre la possibilità di inserire immagini all'interno delle pagine Web, attraverso il tag img.
Vediamo subito un esempio:
<img src="nome-del-file.gif">Il tag img si dice vuoto, quindi non prevede l'omonimo tag di chiusura.
I principali e più diffusi formati immagine consentiti sul Web sino GIF (adatto a loghi, bottoni e banner, e possono essere immagini animate, quindi in movimento), JPG (adatto alle foto, dato che si tratta di un formato ad alta risoluzione) e PNG (molto portabile su tutte le piattaforme e meglio trattabile attraverso software di grafica).
I principali attributi del tag img sono i seguenti:
- alt - testo alternativo, ovvero etichetta dell'immagine;
- border - imposta o elimina il bordo all'immagine;
- width - imposta la larghezza in pixel dell'immagine (facoltativo);
- height - imposta l'altezza in pixel dell'immagine (facoltativo);
- hspace - imposta la distanza in orizzontale tra l'immagine ed altri elementi;
- vspace - imposta la distanza in verticale tra l'immagine ed altri elementi;
Vediamo una serie di esempi.
Impostazione un'etichetta all'immagine:
<img src="nome-del-file.gif" alt="Descrizione immagine...">
Impostazione del bordo all'immagine:
<img src="nome-del-file.gif" border="1">
Se non specificato, il valore è zero (0).
Definisco larghezza ed altezza:
<img src="nome-del-file.gif" width="500" height="200">
Imposta una spaziatura in orizzontale ed in verticale:
<img src="nome-del-file.gif" hspace="5" vspace="5">
Un'immagine, ovviamente, può essere usata come link, come nell'esempio che segue:
<a href="pippo.html"><img src="pippo.gif" alt="Pippo" border="0"></a>
In questo caso si consiglia di impostare il bordo a zero per evitare che il link faccia comparire un antiestetico e poco professionale bordo blu intorno all'immagine.
