Quando si crea una pagina Web utilizzando HTML, il tag immagine viene utilizzato per inserire una foto o un elemento grafico in un punto particolare della pagina. Esistono molti modi in cui le immagini possono essere utilizzate nelle pagine Web, dall’aggiunta di interesse all’utilizzo come strumento di navigazione o per fornire informazioni. Ci sono anche diversi formati di immagini che possono essere utilizzati. Non importa come o quale immagine viene aggiunta alla pagina web, il tag immagine è sempre necessario.
Per aggiungere un’immagine, il tag dell’immagine è incluso nel punto in cui desideri che l’immagine appaia all’interno della tua pagina. Ad esempio, se un’immagine dovesse essere inserita dopo questo paragrafo, il tag immagine, o, , verrebbe aggiunto al documento HTML dopo questo paragrafo. il tag definisce tutte le immagini in HTML. Viene indicato come tag vuoto, poiché contiene attributi e non ha tag di chiusura. Gli attributi sono opzioni disponibili per un tag HTML specifico.
Se solo sono stati aggiunti a un documento HTML, non viene mostrato nulla poiché gli attributi del tag non sono stati inclusi. L’attributo più importante per è “src”, che sta per source. L’attributo src indica dove si trova effettivamente il file immagine o è l’indirizzo del file immagine. Poiché l’immagine viene utilizzata su una pagina Web, la posizione dell’immagine verrà fornita come URL. All’interno del documento HTML, l’immagine avrà il seguente aspetto: .
In particolare, l’URL punta a dove è archiviata l’immagine. Ad esempio, se l’immagine di un computer con il nome file computer.jpg fosse archiviata nella cartella delle immagini su www.wisegeek.com, l’URL verrebbe sostituito con: . Quando il browser apre la pagina Web, visualizza l’immagine in cui è incluso il tag dell’immagine.
Il tag immagine ha una serie di altri attributi diversi. Consentono all’utente di regolare l’aspetto dell’immagine sulla pagina. I seguenti attributi sono comunemente usati per questo tag: alt, border, size e align.
L’attributo alt sta per testo alternativo e viene mostrato se un browser non è in grado di visualizzare un’immagine. Inoltre, il testo alternativo viene letto per quegli utenti con problemi di vista e che scelgono di visualizzare il testo sulle immagini. Per l’esempio sopra, il testo alternativo potrebbe essere indicato come alt=”immagine di un computer”.
L’attributo border aggiunge un bordo all’immagine con lo spessore che dipende dal numero di pixel indicato. Ciò può essere particolarmente utile quando lo sfondo dell’immagine e lo sfondo del sito Web sono simili e si desidera una chiara distinzione. Ad esempio, border=”10″ posizionerà un bordo spesso 10 pixel attorno a un’immagine.
Anche gli attributi di dimensione sono importanti, poiché la larghezza e l’altezza possono essere utilizzate per specificare la dimensione esatta di un’immagine. Questi attributi devono essere utilizzati con molta attenzione, poiché la loro modifica può influire sulle proporzioni o sulla qualità dell’immagine visualizzata. Gli attributi di dimensione non modificano il file effettivo, ma solo il modo in cui il browser lo visualizza.
L’attributo align specifica come l’immagine è allineata rispetto al testo sulla pagina. Ci sono diverse scelte per questo attributo, tra cui alto, basso, centro, sinistra, destra, absmiddle, absbottom, baseline e texttop. Questi tag aiutano anche a determinare come il testo sulla pagina si allinea con l’immagine.