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
