HTML - Le immagini

Le immagini sono molto importanti all'interno di una pagina web. Per questo è ancora più importante saperle utilizzare nella maniera corretta. Per inserire un'immagine si utilizza l'etichetta <img/>.

html<img alt="html image example" src="/assets_tutorials/img/image.jpg"  />

Demo

HTML - L'attributo src

"src" è un'abbreviazione di "source"(sorgente). Questo attributo indica la collocazione dell'immagine. Come spiegato nel tutorial sui link puoi utilizzare qualsiasi URL che rimandi all'immagine.

Si può inoltre inserire l'intero URl. Ad esempio:

htmlscr="http://www.tutorialehtml.com/assets_tutorials/img/image.jpg"

Il modello URL non è consigliato perché nel caso in cui cambiate il dominio dovrete cambiare anche gli indirizzi di tutti i file immagine. Se l'immagine è salvata all'interno di un altro domani basta utilizzare scr="http://www.domain.com/image.jpg".

Il fatto di poter accedere a immagini salvate su un altro dominio presenta grandi vantaggi se lo spazio disponibile sul proprio dominio è limitato.

HTML - l'attributo "alternative"

L'attributo "alt" è utilizzato per visualizzare un testo nel caso in cui il browser non riuscisse per qualche motivo a visualizzare l'immagine o nel caso l'utente abbia l'opzione "ShowImage" deselezionata.

html<img alt="html image example" src="/assets_tutorials/img/image.jpg" />

Demo

HTML - Altezza e larghezza dell'immagine

Per determinare l'altezza e la larghezza di un'immagine si utilizzano gli attributi "height" e "width".

html<img alt="html image example" src="/assets_tutorials/img/image.jpg"  width="120" height="75" />

Demo

HTML - Allineamento orizzontale e verticale dell'immagine

Per allineare l'immagine si utilizzano gli attributi "align" e "valign". Le opzioni fornite da questi due attributi sono:

1. Align (orizzontale)

• right(destra)
• left(sinistra)
• center(centrale)

2. Valign (verticale)

• top (in cima)
• bottom(in fondo)
• center (in mezzo)

html<img alt="" align="right" src="/assets_tutorials/img/image.jpg" /> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML - Utilizzare l'immagine come link

Questa è solo un'introduzione, ne parleremo più dettagliatamente nel prossimo tutorial. Le immagini sono molto utili da usare come link e vengono definite nella seguente maniera:

html<a href="http://www.tutorialehtml.com/" title="HTML link image example">
	<img alt="html image example" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

Questa immagine rimanda alla pagina iniziale. Per prendere confidenza con questi nuovi comandi modifica il link di destinazione in modo che rimandi alla tua pagina iniziale.

HTML - Miniature

Le miniature (Thumbnails) sono versioni "alleggerite" di un'immagine. Per creare una miniatura basta salvare l'immagine originale con una qualità inferiore e creare un link che rimandi all'immagine originale a qualità completa.

html<a href="/assets_tutorials/img/image.jpg"  title="Esempio di miniatura dell'immagine link HTML">
	<img alt="esempio di immagine HTML" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo