Immagini HTML
- Pagina precedente Link HTML
- Pagina successiva Tabelle HTML
Utilizzando HTML, è possibile visualizzare immagini nel documento.
Esempio
- Inserisci l'immagine
- Questo esempio dimostra come visualizzare un'immagine in una pagina web.
- Inserire immagini da diverse posizioni
- Questo esempio dimostra come visualizzare immagini in una pagina web provenienti da altre cartelle o server.
(Puoi trovare più esempi nella parte inferiore di questa pagina)
Tag immagine (<img>) e attributo di origine (Src)
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 nella pagina, devi utilizzare l'attributo di origine (src). src significa "source". Il valore dell'attributo di origine è l'indirizzo URL dell'immagine.
La sintassi per definire l'immagine è:
<img src="url" />
L'URL indica la posizione di archiviazione dell'immagine. Se un'immagine denominata "boat.gif" si trova nella directory "images" del sito www.codew3c.com, il suo URL è http://www.codew3c.com/images/boat.gif.
Il browser visualizza l'immagine nel luogo in cui compare il tag immagine nel documento. Se metti il tag immagine tra due paragrafi, il browser visualizzerà prima il primo paragrafo, poi l'immagine e infine il secondo paragrafo.
Sostituisci le proprietà di sostituzione (Alt)
L'attributo alt viene utilizzato per definire una stringa di testo preparata sostitutiva per l'immagine. Il valore del testo sostitutivo è definito dall'utente.
<img src="boat.gif" alt="Big Boat">
Quando il browser non può caricare un'immagine, l'attributo testo sostitutivo può informare i lettori delle informazioni perse. In questo caso, il browser visualizzerà questo testo alternativo invece dell'immagine. È una buona abitudine aggiungere l'attributo testo sostitutivo a tutte le immagini della pagina, il che aiuta a visualizzare meglio le informazioni e è molto utile per coloro che utilizzano browser a testo puro.
Considerazioni di base - suggerimenti utili:
Se un file HTML contiene dieci immagini, per visualizzare correttamente la pagina, è necessario caricare 11 file. Il caricamento delle immagini richiede tempo, quindi la nostra raccomandazione è: usare con cautela le immagini.
Altri esempi
- Immagine di sfondo
- Questo esempio dimostra come aggiungere un'immagine di sfondo a una pagina HTML.
- Posizionare l'immagine
- Questo esempio dimostra come posizionare un'immagine nel testo.
- Immagini fluttuanti
- Questo esempio dimostra come far fluttuare un'immagine sulla sinistra o destra del paragrafo.
- Regolare le dimensioni dell'immagine
- Questo esempio dimostra come regolare le dimensioni di un'immagine.
- Visualizzare il testo sostitutivo per l'immagine
- Questo esempio dimostra come visualizzare un testo sostitutivo per un'immagine. Quando l'immagine non può essere caricata dal browser, l'attributo testo sostitutivo informa i lettori delle informazioni perse. È una buona abitudine aggiungere l'attributo testo sostitutivo a tutte le immagini della pagina.
- Creare un link immagine
- Questo esempio dimostra come utilizzare un'immagine come link.
- Creare una mappa immagine
- Questo esempio mostra come creare una mappa immagine con aree cliccabili. Ogni area è un link ipertestuale.
- Convertire un'immagine in una mappa immagine
- Questo esempio mostra come convertire un'immagine comune in una mappa immagine.
Etichetta immagine
| Etichetta | Descrizione |
|---|---|
| <img> | Definire un'immagine. |
| <map> | Definire una mappa immagine. |
| <area> | Definire l'area cliccabile di una mappa immagine. |
- Pagina precedente Link HTML
- Pagina successiva Tabelle HTML
