In HTML, che cos'è un tag immagine?

Quando si crea una pagina Web tramite HTML, il tag immagine viene utilizzato per inserire una foto o un'immagine in un determinato punto della pagina. Esistono molti modi in cui le immagini possono essere utilizzate sulle pagine Web, dall'interesse all'utilizzo come strumento di navigazione o per fornire informazioni. Esistono anche diversi formati di immagini che possono essere utilizzati. Indipendentemente da come o quale immagine viene aggiunta alla pagina Web, il tag immagine è sempre richiesto.

Per aggiungere un'immagine, il tag immagine è incluso nel punto in cui desideri che l'immagine appaia nella tua pagina. Ad esempio, se un'immagine dovesse essere inserita dopo questo paragrafo, il tag immagine, o <img>, verrebbe aggiunto al documento HTML dopo questo paragrafo. Il tag <img> definisce tutte le immagini in HTML. Viene definito tag vuoto, poiché contiene attributi e non ha tag di chiusura. Gli attributi sono opzioni disponibili per un tag HTML specifico.

Se solo <img> fosse aggiunto a un documento HTML, nulla verrebbe mostrato poiché gli attributi del tag non sono stati inclusi. L'attributo più importante per <img> è "src", che sta per source. L'attributo src indica dove si trova effettivamente il file immagine o è l'indirizzo per il file immagine. Mentre l'immagine viene utilizzata su una pagina Web, la posizione dell'immagine verrà fornita come URL. All'interno del documento HTML, l'immagine sarebbe simile a: <img src = "URL" />.

In particolare, l'URL punta al punto in cui è memorizzata l'immagine. Ad esempio, se un'immagine di un computer con il nome file computer.jpg fosse memorizzata nella cartella images su www.wisegeek.com, l'URL verrebbe sostituito con: <img src = "www.wisegeek.com/images/computer. jpg "/>. Quando il browser apre la pagina Web, visualizza l'immagine in cui è incluso il tag immagine.

Il tag immagine ha un numero 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, viene letto un testo alternativo per quegli utenti con problemi visivi 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 in base al numero di pixel indicati. 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é larghezza e altezza possono essere utilizzate per specificare la dimensione esatta di un'immagine. Questi attributi devono essere usati con molta attenzione, poiché modificarli può influire sulle proporzioni o sulla qualità dell'immagine visualizzata. Gli attributi di dimensione non cambiano il file reale, ma solo come lo visualizza il browser.

L'attributo align specifica come l'immagine è allineata rispetto al testo sulla pagina. Esistono diverse opzioni per questo attributo, tra cui top, bottom, middle, left, right, absmiddle, absbottom, baseline e texttop. Questi tag aiutano anche a determinare come il testo sulla pagina si allinea all'immagine.