C'è una differenza tra l'inserimento di un'immagine su a pagina web e rendere quell'immagine un link cliccabile. sebbene il HTML è simile, un collegamento si basa su an ancora elemento mentre un'immagine usa il img elemento. Tuttavia, un'immagine può nidificare all'interno di un'ancora, rendendo l'immagine cliccabile come collegamento.
Inserimento di immagini negli elementi di ancoraggio
Un uso comune di un collegamento basato su immagini è la grafica del logo del sito, che viene quindi collegata alla home page del sito.
Ecco come inseriresti un'immagine non cliccabile nel documento HTML:
Per trasformare l'immagine in un collegamento, aggiungi il collegamento di ancoraggio, aprendo l'elemento di ancoraggio prima dell'immagine e chiudendo l'ancora dopo l'immagine. Questa tecnica è simile a come colleghi il testo, tranne per il fatto che invece di avvolgere le parole, avvolgi l'immagine:
Quando aggiungi questo tipo di HTML alla tua pagina, non inserire spazi tra il tag anchor e il tag immagine. Se lo fai, alcuni browser aggiungeranno piccoli segni di spunta accanto all'immagine, il che sembrerà strano.
Il logo ora funge anche da pulsante della home page, che è praticamente uno standard web in questi giorni.
Nota che non includiamo alcuno stile visivo, come la larghezza e l'altezza dell'immagine, nel nostro markup HTML. Lasceremo questi stili visivi ai CSS e manterremo una netta separazione tra struttura HTML e stili CSS.