HTML - Immagini
Le immagini sono molto importanti per abbellire e per rappresentare molti concetti complessi in modo semplice sulla tua pagina web. Questo tutorial ti guiderà attraverso semplici passaggi per utilizzare le immagini nelle tue pagine web.
Inserisci immagine
Puoi inserire qualsiasi immagine nella tua pagina web usando <img>etichetta. Di seguito è riportata la semplice sintassi per utilizzare questo tag.
<img src = "Image URL" ... attributes-list/>Il tag <img> è un tag vuoto, il che significa che può contenere solo un elenco di attributi e non ha tag di chiusura.
Esempio
Per provare il seguente esempio, manteniamo il nostro file HTML test.htm e il file immagine test.png nella stessa directory -
<!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>Questo produrrà il seguente risultato:
Puoi utilizzare file di immagine PNG, JPEG o GIF in base alle tue comodità, ma assicurati di specificare il nome del file immagine corretto in srcattributo. Il nome dell'immagine fa sempre distinzione tra maiuscole e minuscole.
Il alt attributo è un attributo obbligatorio che specifica un testo alternativo per un'immagine, se l'immagine non può essere visualizzata.
Imposta posizione immagine
Di solito manteniamo tutte le immagini in una directory separata. Quindi teniamo il file HTML test.htm nella nostra home directory e creiamo una sottodirectoryimages all'interno della home directory dove manterremo la nostra immagine test.png.
Esempio
Supponendo che la posizione dell'immagine sia "image / test.png", prova 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>Questo produrrà il seguente risultato:
Imposta larghezza / altezza immagine
È possibile impostare la larghezza e l'altezza dell'immagine in base alle proprie esigenze utilizzando width e heightattributi. È possibile specificare larghezza e altezza dell'immagine in termini di pixel o percentuale della sua dimensione effettiva.
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>Questo produrrà il seguente risultato:
Imposta bordo immagine
Per impostazione predefinita, l'immagine avrà un bordo attorno ad essa, è possibile specificare lo spessore del bordo in termini di pixel utilizzando l'attributo bordo. Uno spessore di 0 significa, nessun bordo intorno all'immagine.
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>Questo produrrà il seguente risultato:
Imposta allineamento immagine
Per impostazione predefinita, l'immagine verrà allineata sul lato sinistro della pagina, ma puoi usare align attributo per impostarlo al centro oa 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>Questo produrrà il seguente risultato:
Grafica Web gratuita
Per la grafica web gratuita, inclusi i modelli, puoi esaminare la grafica web gratuita