Immagini JPG
Immagini GIF
immagini PNG
Esempio
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> Prova tu stesso " Specificare sempre la larghezza e l'altezza di un'immagine. Se larghezza e l'altezza non sono specificati, la pagina lampeggia durante il caricamento di immagini.
Immagini HTML Sintassi
In HTML, le immagini vengono definite con il <img> tag.
Il <img> tag è vuota, contiene solo gli attributi, e non ha un tag di chiusura.
Lo src attributo specifica l'URL (web address) dell'immagine:
<img src=" url " alt=" some_text ">L' alt attributo
L' alt attributo specifica un testo alternativo per un'immagine, se l'immagine non può essere visualizzata.
alt attributo fornisce informazioni alternativa a un'immagine se un utente per qualche motivo non può visualizzarlo (a causa della connessione lenta, un errore nel src attributo, o se l'utente utilizza un lettore di schermo).
Se un browser non riesce a trovare l'immagine, verrà visualizzato il testo alternativo:
Esempio
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Prova tu stesso " L' alt è richiesto attributo. Una pagina web non convaliderà correttamente senza di essa.
Screen Reader HTML
Un lettore di schermo è un programma software in grado di leggere ciò che viene visualizzato sullo schermo.
I lettori di schermo sono utili per le persone non vedenti, ipovedenti, o di apprendimento disabilitato.
I lettori di schermo possono leggere alt attributo.
Ingrandimento - Larghezza e Altezza
È possibile utilizzare l' style di attributo per specificare la larghezza e l'altezza di un'immagine.
I valori sono specificati in pixel (use px after the value) :
In alternativa, è possibile utilizzare width e height attributi. Qui, i valori sono specificati in pixel per impostazione predefinita:
Larghezza e altezza o lo stile?
Sia la larghezza, l'altezza e attributi di stile sono validi nella più recente standard HTML5.
Si consiglia di utilizzare l' style attributo. Previene stili fogli di modificare le dimensioni originali delle immagini:
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html> Prova tu stesso " Immagini in un'altra cartella
Se non specificato, il browser si aspetta di trovare l'immagine nella stessa cartella della pagina web.
Tuttavia, è comune per memorizzare le immagini in una sottocartella. È necessario quindi includere il nome della cartella nella src attributi:
Esempio
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Prova tu stesso " Immagini su un altro server
Alcuni siti web conservano le loro immagini sui server di immagini.
In realtà, è possibile accedere a immagini da qualsiasi indirizzo web in tutto il mondo:
immagini animate
Lo standard GIF permette immagini animate:
Esempio
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> Prova tu stesso " Si noti che la sintassi di inserimento di immagini animate non è diverso dalle immagini non animate.
L'utilizzo di un immagine come link
Per usare un'immagine come collegamento, è sufficiente nido <img> tag all'interno del <a> tag:
Esempio
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> Prova tu stesso " Aggiungere "border:0;" per evitare che IE9 (and earlier) di visualizzare un bordo intorno all'immagine.
immagine Floating
Utilizzare la proprietà float CSS per lasciar fluttuare immagine.
L'immagine può galleggiare a destra oa sinistra di un testo:
Esempio
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p> Prova tu stesso " mappe immagine
Utilizzare il <map> tag per definire un'immagine-map. Un'immagine-mappa è un'immagine con aree cliccabili.
Il name attributo del <map> tag è associato con il <img> attributo usemap 's e crea una relazione tra l'immagine e la mappa.
Il <map> tag contiene un certo numero di <area> tag, che definisce le aree cliccabili nell'immagine-map:
Esempio
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map> Prova tu stesso " Riassunto capitolo
- Utilizzare il codice HTML <img> elemento per definire un'immagine
- Utilizzare il codice HTML src attributo per definire l'URL dell'immagine
- Utilizzare il codice HTML alt attributo per definire un testo alternativo per le immagini, se non può essere visualizzato
- Utilizzare il codice HTML width e height attributi per definire la dimensione dell'immagine
- Utilizzare i CSS width e height proprietà per definire la dimensione dell'immagine (alternatively)
- Utilizzare la CSS float di proprietà di lasciare che il galleggiante immagine
- Utilizzare il codice HTML <map> elemento per definire un'immagine-map
- Utilizzare l'HTML <area> elemento per definire le aree cliccabili nell'immagine-map
- Utilizzare il codice HTML <img> elemento s' usemap attribuire a puntare ad un'immagine-map
Caricamento delle immagini richiede tempo. Immagini di grandi dimensioni possono rallentare la tua pagina. Usare con attenzione le immagini.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6»
HTML tag immagine
| Etichetta | Descrizione |
|---|---|
| <img> | Definisce un'immagine |
| <map> | Definisce un'immagine-map |
| <area> | Definisce una zona cliccabile all'interno di un'immagine-map |