Immagini HTML
Le immagini possono migliorare il design e l'aspetto di una pagina web.
Esempio
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Esempio
<img src="img_girl.jpg"
alt="Girl in a jacket">
Esempio
<img src="img_chania.jpg"
alt="Flowers in Chania">
Sintassi delle immagini HTML
Il <img>tag HTML viene utilizzato per incorporare un'immagine in una pagina web.
Le immagini non sono tecnicamente inserite in una pagina web; le immagini sono collegate a pagine web. Il <img>tag crea uno spazio di attesa per l'immagine di riferimento.
Il <img>tag è vuoto, contiene solo attributi e non ha un tag di chiusura.
Il <img>tag ha due attributi obbligatori:
- src - Specifica il percorso dell'immagine
- alt - Specifica un testo alternativo per l'immagine
Sintassi
<img src="url" alt="alternatetext">
L'attributo src
L' srcattributo obbligatorio specifica il percorso (URL) dell'immagine.
Nota: quando una pagina web viene caricata, è il browser, in quel momento, che ottiene l'immagine da un server web e la inserisce nella pagina. Pertanto, assicurati che l'immagine rimanga effettivamente nello stesso punto rispetto alla pagina web, altrimenti i tuoi visitatori riceveranno un'icona di collegamento interrotto. L'icona del collegamento interrotto e il alttesto vengono visualizzati se il browser non riesce a trovare l'immagine.
Esempio
<img src="img_chania.jpg" alt="Flowers
in Chania">
L'attributo alt
L' altattributo richiesto fornisce un testo alternativo per un'immagine, se l'utente per qualche motivo non è in grado di visualizzarla (a causa di una connessione lenta, un errore nell'attributo src o se l'utente utilizza un'utilità per la lettura dello schermo).
Il valore altdell'attributo dovrebbe descrivere l'immagine:
Esempio
<img src="img_chania.jpg" alt="Flowers
in Chania">
Se un browser non riesce a trovare un'immagine, visualizzerà il valore alt
dell'attributo:
Esempio
<img src="wrongname.gif" alt="Flowers
in Chania">
Suggerimento: uno screen reader è un programma software che legge il codice HTML e consente all'utente di "ascoltare" il contenuto. Le utilità per la lettura dello schermo sono utili per le persone ipovedenti o con difficoltà di apprendimento.
Dimensione immagine: larghezza e altezza
È possibile utilizzare l' styleattributo per specificare la larghezza e l'altezza di un'immagine.
Esempio
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
In alternativa, puoi utilizzare gli attributi widthe :height
Esempio
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Gli attributi widthe heightdefiniscono sempre la larghezza e l'altezza dell'immagine in pixel.
Nota: specificare sempre la larghezza e l'altezza di un'immagine. Se la larghezza e l'altezza non sono specificate, la pagina Web potrebbe presentare uno sfarfallio durante il caricamento dell'immagine.
Larghezza e altezza o stile?
Gli attributi , e sono tutti validi in widthHTML height.style
Tuttavia, suggeriamo di utilizzare l' styleattributo. Impedisce ai fogli di stile di modificare le dimensioni delle immagini:
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Immagini in un'altra cartella
Se hai le tue immagini in una sottocartella, devi includere il nome della cartella srcnell'attributo:
Esempio
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Immagini su un altro server/sito web
Alcuni siti Web puntano a un'immagine su un altro server.
Per puntare a un'immagine su un altro server, devi specificare un URL assoluto (completo) srcnell'attributo:
Esempio
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Note sulle immagini esterne: le immagini esterne potrebbero essere protette da copyright. Se non ottieni il permesso per usarlo, potresti violare le leggi sul copyright. Inoltre, non puoi controllare le immagini esterne; può essere improvvisamente rimosso o modificato.
Immagini animate
HTML consente GIF animate:
Esempio
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Immagine come collegamento
Per utilizzare un'immagine come collegamento, inserisci il <img>tag all'interno del <a>
tag:
Esempio
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Immagine fluttuante
Usa la floatproprietà CSS per far fluttuare l'immagine a destra o a 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>
Suggerimento: per saperne di più su CSS Float, leggi il nostro tutorial CSS Float .
Formati di immagine comuni
Di seguito sono riportati i tipi di file immagine più comuni, supportati in tutti i browser (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Riassunto capitolo
- Utilizzare l'
<img>elemento HTML per definire un'immagine - Utilizzare l'
srcattributo HTML per definire l'URL dell'immagine - Utilizzare l'attributo HTML
altper definire un testo alternativo per un'immagine, se non può essere visualizzata - Utilizzare l'HTML
widtheheightgli attributi o il CSSwidthe leheightproprietà per definire la dimensione dell'immagine - Usa la proprietà CSS
floatper far fluttuare l'immagine a sinistra oa destra
Nota: il caricamento di immagini di grandi dimensioni richiede tempo e può rallentare la tua pagina web. Usa le immagini con attenzione.
Esercizi HTML
Tag immagine HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .