I siti web sono diversi da qualsiasi mezzo di comunicazione che li ha preceduti. Una delle cose principali che imposta i siti web da quelli precedenti come la stampa, la radio e persino la televisione è il concetto di "hyperlink".
I collegamenti ipertestuali, anche comunemente noti come "collegamenti", sono ciò che rende il Web così dinamico. A differenza di una pubblicazione stampata che può fare riferimento a un altro articolo o altra risorsa, i siti Web possono utilizzare questi collegamenti per inviare effettivamente visitatori a tali altre pagine e risorse. Nessun altro mezzo di trasmissione può farlo. È possibile ascoltare un annuncio alla radio o visualizzare in TV, ma non ci sono collegamenti ipertestuali che possono portarti alle aziende in quegli annunci come il sito Web può facilmente fare. I collegamenti sono davvero uno straordinario strumento di comunicazione e interazione!
Spesso, i collegamenti che si trovano su un sito Web sono contenuti di testo che indirizzano i visitatori ad altre pagine dello stesso sito. La navigazione di un sito Web è un esempio di collegamenti testuali, ma i collegamenti non devono necessariamente essere basati sul testo. Puoi anche collegare facilmente le immagini sul tuo sito web. Diamo un'occhiata a come è fatto, seguito da alcuni casi in cui vorresti utilizzare i collegamenti ipertestuali basati su immagini.
Come collegare un'immagine
La prima cosa che devi fare è posizionare l'immagine stessa nel tuo documento HTML. Un uso comune di un collegamento basato su immagini è la grafica del logo del sito che viene quindi collegata alla home page del sito. Nel nostro codice di esempio qui sotto, il file che stiamo usando è un SVG per il nostro logo. Questa è una buona scelta dal momento che consentirà alla nostra immagine di adattarsi a risoluzioni diverse, mantenendo nel contempo la qualità dell'immagine e una piccola dimensione complessiva del file.
Ecco come inseriresti la tua immagine nel documento HTML:
Intorno al tag immagine, ora si aggiunge il collegamento di ancoraggio, si apre l'elemento di ancoraggio prima dell'immagine e si chiude l'ancora dopo l'immagine. Questo è simile a come si collegherebbe il testo, solo invece di avvolgere le parole che si desidera siano un collegamento con i tag di ancoraggio, si avvolge l'immagine. Nel nostro esempio qui sotto, stiamo collegando alla home page del nostro sito, che è "index.html".
Quando aggiungi questo HTML alla tua pagina, non inserire spazi tra il tag di ancoraggio e il tag immagine. Se lo fai, alcuni browser aggiungeranno piccoli segni di spunta accanto all'immagine, che apparirà strana.
L'immagine del logo ora fungerà anche da pulsante della home page, che è praticamente uno standard web in questi giorni. Si noti 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 la struttura HTML e gli stili CSS.
Una volta raggiunto il CSS, gli stili che scrivi per scegliere come target questo logo grafico potrebbero includere il ridimensionamento dell'immagine, compresi gli stili di risposta per immagini multi-dispositivo e qualsiasi immagine che desideri aggiungere all'immagine / link, come bordi o CSS ombre Puoi anche dare la tua immagine o collegare un attributo di classe se hai bisogno di ulteriori "ganci" da usare con i tuoi stili CSS.
Usa casi per collegamenti immagine
Quindi aggiungere un collegamento immagine è abbastanza semplice. Come abbiamo appena visto, tutto ciò che devi fare è avvolgere l'immagine con i tag di ancoraggio appropriati. La tua prossima domanda potrebbe essere "quando lo faresti in pratica, oltre al già citato esempio di link del logo / homepage?"
Ecco alcuni pensieri:
- Immagini in miniatura in una galleria che collegano a versioni più grandi di quelle immagini.
- Immagini utilizzate da sole per rappresentare contenuti, ad esempio foto di prodotti per un sito di e-commerce.
- Immagini teaser che fanno parte di altri contenuti, come un articolo di blog o un comunicato stampa, che invogliano le persone a notare che i contenuti danno loro un'area target da toccare o fare clic per leggere l'intero articolo.
- Immagini di icone che vengono utilizzate come pulsanti per connettersi a specifiche funzionalità o pagine all'interno del sito.
- Collegamenti ai social media che utilizzano i loghi riconoscibili dei vari siti di social media che sono importanti per quel sito o azienda.
- Le immagini utilizzate come pulsanti per determinate funzionalità, come le invii di moduli (nota sulle migliori pratiche - dal punto di vista delle prestazioni di un sito Web, i pulsanti con uno stile puramente CSS) sono una scelta migliore dei pulsanti immagine).
Un promemoria quando si usano le immagini
Le immagini possono svolgere un ruolo importante nel successo di un sito Web. Uno degli esempi sopra citati usa le immagini insieme ad altri contenuti per attirare l'attenzione su quel contenuto e convincere la gente a leggerlo.
Quando si utilizzano le immagini, è necessario prestare attenzione a selezionare l'immagine giusta per le proprie esigenze, inclusi l'oggetto dell'immagine corretta, il formato e anche assicurarsi che tutte le immagini che si utilizzano sul sito Web siano ottimizzate correttamente per la consegna del sito Web. Questo può sembrare un sacco di lavoro solo per aggiungere immagini, ma il guadagno è valsa la pena! Le immagini possono davvero aggiungere molto al successo di un sito.
Non esitare a utilizzare le immagini appropriate sul tuo sito e collegare quelle immagini quando necessario per aggiungere un po 'di contenuti interattivi ai tuoi contenuti, ma anche prestare attenzione alle migliori pratiche illustrate e utilizzare questi grafici / collegamenti in modo corretto e responsabile nel lavoro di progettazione web.
