HTML - Immagini

Le immagini sono molto importanti per abbellire o per descrivere alcuni concetti complessi in modo semplice all'interno di una pagina web. Questo tutorial vi mostrerà, attraverso semplici passi, come utilizzare le immagini nelle vostre pagine web.

Inserire un Immagine

Per inserire un immagine si può utilizzare il tag <img>. A seguire la semplice sintassi per utilizzare questo tag.

<img src="Image URL" ... attributes-list/>

Il tag <img> è un tag vuoto, cioè può contentere solo alcuni attributi e non ha un tag di chiusura.

Esempio

Per provare il seguente esempio inserisci il file test.htm ed un file immagine test.png in una stessa cartella:

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="/html/images/test.png" alt="Test Image" />
</body>
</html>

Produrrà il seguente risultato:

Inserimento Immagine

Si può utilizzare un formato immagine a piacimento, come PNG, JPEG o GIF, l' importante è che sia indicato correttamente il nome del file nell' attributo src. Il nome dell' immagine è sempre case sensitive.

L' attributo alt fornisce un testo alternativo nel caso in cui l' immagine non si visualizzi.

Impostare Percorso Immagine

Generalmente si inseriscono tutte le immagini in una cartella separata. Perciò lasciamo il file test.htm nella cartella principale e creiamo una sottocartella images al suo interno, in cui inseriremo l'immagine test.png.

Esempio

Supponiamo che adesso la nostra immagine sia in "/html/image/test.png", proviamo il seguente esempio:

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="/html/images/test.png" alt="Test Image" />
</body>
</html>

Produrrà il seguente risultato:

Simple Image Insert

Impostare Larghezza/Altezza

Si può impostare la larghezza e l'altezza di un immagine utilizzando gli attributi width e height. Possono essere indicate sia in pixel che in percentuale.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="/html/images/test.png" alt="Test Image" width="150" height="100"/>
</body>
</html>

Produrrà il seguente risultato:

Setting image width and height

Impostare Bordo

Di default un immagine sarà contornata da un bordo, si può specificare lo spessore del bordo in pixel utilizzando l' attributo border. Se impostato su 0, non verrà mostrato nessun bordo.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="/html/images/test.png" alt="Test Image" border="3"/>
</body>
</html>

Produrrà il seguente risultato:

Setting image Border

Impostare Allineamento

Di default un immagine viene allinata a sinistra, ma tramite l' attributo align è possibile allinearla centralmente o a destra.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="/html/images/test.png" alt="Test Image" border="3" align="right"/>
</body>
</html>

Produrrà il seguente risultato:

Setting image Alignment

Grafiche Web Gratuite

Per delle Grafiche Web Gratuite, inclusi pattern, puoi fare riferimento a Free Web Graphics