Che cosa sono i tag immagine HTML?
Il seguente articolo fornirà una descrizione dei tag immagine HTML. Conosco il suo cliché, ma vorrei iniziare dicendo che un'immagine vale più di mille parole. Nel caso delle pagine Web, è particolarmente vero. Un'immagine può vendere il visitatore con la tua idea, impressionare qualcuno per acquistare il tuo prodotto e può aiutare una pagina Web ad apparire molto meglio. In questa guida, daremo uno sguardo a come possiamo aggiungere IMG alle pagine Web e allinearle correttamente insieme all'aggiunta di collegamenti ad esse.
Aggiunta di immagini alle pagine Web
È possibile aggiungere IMG a una pagina HTML utilizzando il tag nel documento HTML, ecco la sintassi:
Qui, IMG dice al browser che il tag riguarda l'aggiunta di un IMG al documento e "src =" specifica da dove scaricare l'immagine.
Esempio di una pagina con un'immagine
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Ecco l'output del codice:
Un fatto interessante di queste pagine HTML è che quando si utilizza il tag IMG, l'immagine non viene inserita in detta pagina Web, ma crea uno spazio di contenimento in cui l'immagine viene inserita una volta scaricata.
Supporto del browser e compatibilità con gli attributi
Come ci si può aspettare, tutti i browser moderni supportano le immagini e l'uso dei tag IMG. A volte, i browser mobili ridimensioneranno l'immagine per adattarla allo schermo se l'immagine non è impostata come reattiva.
Quando si tratta di compatibilità degli attributi con HTML 4.01 e HTML5 più recenti, la maggior parte dei tag funzionerà, ad eccezione di allineamento, bordo, hspace e vspace che semplicemente non sono supportati in quest'ultimo.
Immagini come link:
Ci saranno momenti in cui vorrai che un'immagine funzioni come collegamento a un'altra pagina. Puoi farlo aggiungendo il tag IMG all'interno del tag.
Impostazione di un'immagine come sfondo di una pagina Web
È possibile assegnare un'immagine come immagine di sfondo di una pagina Web utilizzando la proprietà CSS dell'immagine di sfondo nell'elemento Corpo della pagina.
Immagine di sfondo
Impostazione di un'immagine su Float nel browser
Possiamo usare la proprietà CSS "float" per impostare un'immagine affinché fluttui all'interno in qualsiasi punto della finestra del browser. Diamo un'occhiata a un esempio che ti aiuterà a capire.
Qui, l'immagine dell'auto fluttuerà sul lato destro del testo.
Qui, l'immagine dell'auto fluttuerà sul lato sinistro del testo.
Attributi del tag immagine
Di seguito sono riportati gli attributi di un tag immagine.
1) Align
Valori possibili: superiore, inferiore, centrale, sinistro o destro.
L'attributo alight viene utilizzato per specificare l'allineamento di un'immagine sulla pagina Web.
2) Alt
Tipo di valore: testo
Alt viene utilizzato per specificare il testo alternativo di un'immagine di una pagina Web. Nei casi in cui non è possibile visualizzare un IMG, il browser visualizza questo testo all'utente. I motori di ricerca come Google e Bing utilizzano questo testo alternativo per mostrare i risultati nella Ricerca immagini.
3) Border
Tipo di valore: Pixel
Viene utilizzato per creare un bordo di spessore definito dall'utente attorno all'immagine. Non funziona in HTML5.
4) Cross-Origin
Tipo valore: Uso anonimo-Credenziali
Questo attributo viene utilizzato quando vogliamo specificare come devono essere gestite le foto di origine incrociata. Viene utilizzato principalmente nei casi in cui vengono utilizzati elementi canvas delle app Web JavaScript.
5) Altezza
Tipo di valore: percentuali o pixel
Ovviamente, questo viene usato per indicare l'altezza dell'immagine nella pagina web HTML.
6) hspace
Tipo di valore: Pixel
Non supportato in HTML5, l'attributo hspace viene utilizzato per specificare in pixel la quantità di spazio bianco da aggiungere a sinistra e a destra dell'immagine inserita.
7) ismap
Tipo di valore: URL di una pagina
ismap che abbiamo usato per definire detta immagine come una mappa immagine lato server. Quando l'utente fa clic (o tocca) all'interno dell'immagine, i browser inviano le coordinate del clic (o toccano) al server Web come URL.
8) Longdesc
Tipo di valore: URL
Longdesc è usato per dare una descrizione dettagliata di un'immagine usando un URL. L'URL utilizzato nell'attributo viene utilizzato come descrizione dell'immagine.
9) src
Tipo di valore: URL
src sta per sorgente e viene utilizzato per specificare l'indirizzo da cui il browser recupererà l'immagine, questo URL può essere applicato a un'immagine all'interno di una directory nello stesso server e può anche memorizzare un'immagine in un server di terze parti con un nome di dominio diverso.
10) usemap
Tipo valore: #mapname
L'attributo usemap viene utilizzato per definire l'immagine per una mappa immagine lato client. Una mappa utente viene sempre utilizzata con tag HTML di mappe e aree.
11) vspace
Tipo di valore: Pixel
Non supportato in HTML5, l'attributo Vspace viene utilizzato per impostare il numero di pixel da utilizzare come spazi bianchi nella parte superiore e inferiore dell'immagine nella pagina Web.
12) Larghezza
Tipo di valore: Pixel
Proprio come suggerisce il nome, l'attributo width viene utilizzato per specificare la larghezza di un'immagine all'interno della pagina Web HTML.
Conclusione - Tag immagine HTML
Ora che abbiamo dato un'occhiata a come le immagini vengono aggiunte nelle pagine HTML e come impostarne gli attributi, possiamo creare pagine Web dall'aspetto accattivante in un progetto web.
Oltre ad aggiungere un tocco visivo a una pagina Web, le immagini sono utili perché aiutano anche nell'ottimizzazione dei motori di ricerca. L'aggiunta di tag e descrizioni alt appropriati alle immagini consente ai motori di ricerca di comprendere meglio il contenuto di una pagina Web e migliorare il posizionamento di una pagina Web in molti casi.
Articoli consigliati
Questa è una guida ai tag immagine HTML. Qui discutiamo gli attributi del tag immagine insieme al supporto del browser e alla compatibilità con gli attributi. Puoi anche dare un'occhiata ai seguenti articoli per saperne di più -
- Una semplice guida ai comandi HTML
- Introduzione a cos'è XHTML?
- Tutorial sugli attributi HTML
- Applicazioni e principali usi dell'HTML
- Stili di elenco diversi in HTML
- Frame HTML
- Blocchi HTML
