Guarda qualsiasi pagina web online oggi e noterai che condividono alcune cose in comune. Uno di quei tratti condivisi sono le immagini. Le immagini giuste aggiungono molto alla presentazione di un sito web. Alcune di queste immagini, come il logo di un'azienda, aiutano a marcare il sito e a collegare quell'entità digitale alla tua azienda fisica.
Come aggiungere un'immagine a una pagina Web utilizzando HTML
Per aggiungere un'immagine, un'icona o una grafica alla tua pagina web, devi utilizzare il tag nel codice HTML di una pagina. Metti il.
IMGtag nel tuo. HTML esattamente dove vuoi che venga visualizzato il grafico. Il browser Web che esegue il rendering del codice della pagina sostituirà questo tag con l'elemento grafico appropriato una volta visualizzata la pagina. Tornando all'esempio del logo della nostra azienda, ecco come aggiungere quell'immagine al tuo sito:
L'attributo SRC
Guardando il codice HTML sopra, vedrai che l'elemento include due attributi. Ciascuno di essi è richiesto per l'immagine.
Il primo attributo è "src". Questo è letteralmente il file immagine che desideri venga visualizzato sulla pagina. Nel nostro esempio stiamo usando un file chiamato "logo.png". Questa è l'immagine che il browser web visualizzerà quando renderà il sito.
Noterai anche che prima di questo nome di file abbiamo aggiunto alcune informazioni aggiuntive, "/images/". Questo è il percorso del file. La barra iniziale indica al server di esaminare la radice della directory. Quindi cercherà una cartella chiamata "immagini" e infine il file chiamato "logo.png". L'uso di una cartella chiamata "immagini" per archiviare tutta la grafica di un sito è una pratica piuttosto comune, ma il percorso del file verrebbe modificato in qualsiasi cosa sia rilevante per il tuo sito.
L'attributo Alt
Il secondo attributo obbligatorio è il testo "alt". Questo è il "testo alternativo" che viene mostrato se l'immagine non si carica per qualche motivo. Questo testo, che nel nostro esempio recita "Logo azienda", verrebbe visualizzato se l'immagine non viene caricata. Perché dovrebbe succedere? Una serie di motivi:
- Percorso file errato
- Nome del file errato o errore di ortografia
- Errore di trasmissione
- Il file è stato eliminato dal server
Queste sono solo alcune possibilità del motivo per cui potrebbe mancare la nostra immagine specificata. In questi casi, invece, verrebbe visualizzato il nostro testo alternativo.
A cosa serve il testo alternativo?
Il testo alternativo viene utilizzato anche dal software di lettura dello schermo per "leggere" l'immagine a un visitatore con problemi di vista. Dal momento che non possono vedere l'immagine come noi, questo testo consente loro di sapere qual è l'immagine stessa. Questo è il motivo per cui è richiesto il testo alternativo e perché dovrebbe indicare chiaramente qual è l'immagine!
Un fraintendimento comune del testo alternativo è che è pensato per scopi di motore di ricerca. Questo non è vero. Mentre Google e altri motori di ricerca leggono questo testo per determinare qual è l'immagine (ricorda, non possono nemmeno "vedere" la tua immagine), non dovresti scrivere testo alternativo per fare appello esclusivamente alla ricerca motori. Crea un testo alternativo chiaro pensato per gli umani. Se puoi anche aggiungere alcune parole chiave nel tag che piacciono ai motori di ricerca, va bene, ma assicurati sempre il testo alternativo sta servendo il suo scopo principale affermando qual è l'immagine per chiunque non possa vedere la grafica file.
Altri attributi dell'immagine
Il.
IMMAGINE.
tag ha anche altri due attributi che potresti vedere in uso quando inserisci un elemento grafico nella tua pagina web: la larghezza e l'altezza. Ad esempio, se utilizzi un editor WYSIWYG come Dreamweaver, aggiunge automaticamente queste informazioni. Ecco un esempio:
Il.
LARGHEZZA.
e.
ALTEZZA.
Gli attributi indicano al browser la dimensione dell'immagine. Il browser sa esattamente quanto spazio nel layout deve allocare e può passare all'elemento successivo della pagina mentre l'immagine viene scaricata. Il problema con l'utilizzo di queste informazioni nel tuo HTML è che potresti non voler sempre che l'immagine venga visualizzata con quella dimensione esatta. Ad esempio, se hai un.
sito web reattivo
le cui dimensioni cambiano in base allo schermo dei visitatori e alle dimensioni del dispositivo, vorrai anche che le tue immagini siano flessibili. Se dichiari nel tuo HTML qual è la dimensione fissa, troverai molto difficile sovrascriverla con responsive.
Query multimediali CSS
. Per questo motivo, e per mantenere una separazione tra stile (CSS) e struttura (HTML), si consiglia di NON aggiungere attributi di larghezza e altezza al codice HTML.
Una nota: se lasci queste istruzioni di dimensionamento disattivate e non specifichi una dimensione in CSS, il browser mostrerà comunque l'immagine alla sua dimensione predefinita.
A cura di Jeremy Girard