English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le nostre pagine web ricche e variate di oggi sono grazie all'uso delle immagini. In passato, su Internet c'erano solo pagine web di testo puro, molto monotone, quindi possiamo capire l'importanza delle immagini nel design delle pagine web. È possibile inserire immagini nelle pagine HTML, e i formati di immagine più comuni nelle pagine web sono jpg, png, gif e così via
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Manuale di base (oldtoolbag.com)</title> </head> <body> <h2>immagine predefinita</h2> <img border="0" src="/run/html/default.jpg" alt="default" width="304" height="228"> </body> </html>Prova a vedere ‹/›
Inserire immagine
Questo esempio dimostra come visualizzare immagini in una pagina web.
Inserire immagini da diverse posizioni
Questo esempio dimostra come visualizzare immagini da altre cartelle o server web.
(Puoi trovare più esempi nella parte inferiore di questa pagina.)
In HTML, l'immagine è definita dal tag <img>.
<img> è un tag vuoto, il che significa che contiene solo attributi e non ha etichetta di chiusura.
Per visualizzare un'immagine sulla pagina, devi utilizzare l'attributo di origine (src). src indica "source". Il valore dell'attributo di origine è l'indirizzo URL dell'immagine.
La sintassi per definire l'immagine è:
<img src="url" alt="some_text">
L'URL indica la posizione di archiviazione dell'immagine. Se l'immagine con nome "default.jpg" si trova nella directory "images" di it.oldtoolbag.com, il suo URL è https://it.oldtoolbag.com/run/html/default.jpg.
Il browser mostra l'immagine nel punto in cui l'etichetta immagine appare nel documento. Se l'etichetta immagine viene posta tra due paragrafi, il browser mostrerà prima il primo paragrafo, quindi l'immagine e infine il secondo paragrafo.
L'attributo alt viene utilizzato per definire una serie di testi sostitutivi preparati per l'immagine.
Il valore dell'attributo di testo sostitutivo è definito dall'utente.
<img src="boat.gif" alt="Big Boat">
Quando il browser non può caricare l'immagine, l'attributo di testo sostitutivo informa il lettore delle informazioni perse. In questo caso, il browser mostrerà questo testo sostitutivo invece dell'immagine. È una buona abitudine aggiungere l'attributo di testo sostitutivo a tutte le immagini della pagina, il che aiuta a visualizzare meglio le informazioni e è molto utile per coloro che utilizzano browser di testo.
Le proprietà height (altezza) e width (larghezza) vengono utilizzate per impostare l'altezza e la larghezza dell'immagine.
Il valore predefinito dell'unità degli attributi è in pixel:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
Suggerimento: Specificare l'altezza e la larghezza dell'immagine è un'abitudine buona. Se l'altezza e la larghezza dell'immagine sono specificate, la pagina viene caricata mantenendo le dimensioni specificate. Se non vengono specificate le dimensioni dell'immagine, potrebbe verificarsi un distruzione della disposizione complessiva della pagina HTML durante il caricamento della pagina.
Attenzione: Se un file HTML contiene dieci immagini, per visualizzare correttamente la pagina, è necessario caricare 11 file. Il caricamento delle immagini richiede tempo, quindi consigliamo di: usare le immagini con cautela.
Attenzione: Durante il caricamento della pagina, assicurati che il percorso dell'immagine inserita sia corretto. Se non viene impostata correttamente la posizione dell'immagine, il browser non può caricare l'immagine e l'etichetta immagine mostrerà un'immagine spezzata.
Allineamento dell'immagine
Questo esempio dimostra come allineare un'immagine nel testo.
Immagine fluttuante
Questo esempio dimostra come far fluttuare un'immagine sulla sinistra o destra del paragrafo.
Impostazione di un link immagine
Questo esempio dimostra come utilizzare un'immagine come link.
Creazione di una mappa immagine
Questo esempio mostra come creare una mappa immagine con aree cliccabili. Ogni area è un link ipertestuale.
| Tag | Descrizione |
| <img> | Definire un'immagine |
| <map> | Definire una mappa di immagini |
| <area> | Definire l'area cliccabile di una mappa di immagini |