Aggiunta di Immagini in HTML
Le immagini rendono le pagine web più coinvolgenti. È possibile inserire un'immagine utilizzando il tag <img>.
index.html
Attributi principali:
src: obbligatorio. Percorso del file immagine (assoluto o relativo);alt: obbligatorio. Testo visualizzato se l'immagine non può essere caricata, utilizzato anche dai lettori di schermo;width/height: dimensione in pixel. Senza questi attributi, l'immagine viene visualizzata nella sua dimensione originale.
Attributo alt
Il testo alt dovrebbe descrivere chiaramente l'immagine e fornire un contesto utile.
Immaginiamo il seguente esempio. Hai una fonte riguardante le corse di cavalli. Vuoi mostrare come i concorrenti si preparano alla gara.
Esempio di testo alt poco efficace:
index.html
Testo alt migliorato:
index.html
La versione migliorata fornisce un contesto reale e aiuta gli utenti ipovedenti a comprendere cosa mostra l'immagine.
Attributo src
L'attributo src può utilizzare sia percorsi assoluti che relativi per specificare la posizione del file immagine.
Percorso assoluto
Un URL completo che punta a un'immagine online.
index.html
Chiunque può accedere all'immagine tramite questo link completo.
Si prega di esaminare il seguente esempio reale nel code sandbox qui sotto.
Per esaminare la struttura delle cartelle dei file, trascina il cursore sul lato sinistro dell'interfaccia del code sandbox. Nell'angolo in alto a sinistra troverai un pulsante a burger rappresentato da tre linee. Facendo clic su questo pulsante accederai all'organizzazione delle cartelle dei file.
Percorso relativo
Indica un'immagine all'interno della cartella del tuo progetto.
index.html
Questo significa che image.jpg è memorizzato nella directory images vicino al tuo file HTML.
Esamina l'esempio reale fornito nel code sandbox qui sotto. Troverai la cartella images, che contiene il file sun.png.
Percorsi assoluti: URL completi che funzionano da qualsiasi punto di internet.
Percorsi relativi: percorsi locali del progetto utilizzati all'interno della propria struttura di cartelle.
1. Quale tag può essere utilizzato per inserire un'immagine in un sito web?
2. Quale attributo è necessario specificare per un tag <img/>?
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you explain the difference between absolute and relative paths in more detail?
What are some tips for writing effective alt text for images?
Can you show more examples of using the img tag with different attributes?
Fantastico!
Completion tasso migliorato a 2.38Aggiunta di Immagini in HTML
Scorri per mostrare il menu
Le immagini rendono le pagine web più coinvolgenti. È possibile inserire un'immagine utilizzando il tag <img>.
index.html
Attributi principali:
src: obbligatorio. Percorso del file immagine (assoluto o relativo);alt: obbligatorio. Testo visualizzato se l'immagine non può essere caricata, utilizzato anche dai lettori di schermo;width/height: dimensione in pixel. Senza questi attributi, l'immagine viene visualizzata nella sua dimensione originale.
Attributo alt
Il testo alt dovrebbe descrivere chiaramente l'immagine e fornire un contesto utile.
Immaginiamo il seguente esempio. Hai una fonte riguardante le corse di cavalli. Vuoi mostrare come i concorrenti si preparano alla gara.
Esempio di testo alt poco efficace:
index.html
Testo alt migliorato:
index.html
La versione migliorata fornisce un contesto reale e aiuta gli utenti ipovedenti a comprendere cosa mostra l'immagine.
Attributo src
L'attributo src può utilizzare sia percorsi assoluti che relativi per specificare la posizione del file immagine.
Percorso assoluto
Un URL completo che punta a un'immagine online.
index.html
Chiunque può accedere all'immagine tramite questo link completo.
Si prega di esaminare il seguente esempio reale nel code sandbox qui sotto.
Per esaminare la struttura delle cartelle dei file, trascina il cursore sul lato sinistro dell'interfaccia del code sandbox. Nell'angolo in alto a sinistra troverai un pulsante a burger rappresentato da tre linee. Facendo clic su questo pulsante accederai all'organizzazione delle cartelle dei file.
Percorso relativo
Indica un'immagine all'interno della cartella del tuo progetto.
index.html
Questo significa che image.jpg è memorizzato nella directory images vicino al tuo file HTML.
Esamina l'esempio reale fornito nel code sandbox qui sotto. Troverai la cartella images, che contiene il file sun.png.
Percorsi assoluti: URL completi che funzionano da qualsiasi punto di internet.
Percorsi relativi: percorsi locali del progetto utilizzati all'interno della propria struttura di cartelle.
1. Quale tag può essere utilizzato per inserire un'immagine in un sito web?
2. Quale attributo è necessario specificare per un tag <img/>?
Grazie per i tuoi commenti!
