Collegamento immagine in HTML: Come creare collegamenti da immagini

Ci accingiamo a prendere un principiante sguardo amichevole a come creare collegamenti immagine sul tuo sito web.

Vedremo quali tag HTML è necessario utilizzare nel codice.

Se non l’hai mai fatto prima, non preoccuparti! Ti guiderò attraverso l’intero processo.

Entro la fine di questo articolo, sarà la creazione di link di immagini in tutta la tua pagina web e Internet.,

Vedremo anche alcune tecniche più avanzate verso la fine dell’articolo se ti senti coraggioso.

Prendi un caffè, tuffiamoci!

Come si crea un collegamento ipertestuale?

Per ottenere collegamenti sulla home page è necessario creare un collegamento ipertestuale. Per fare ciò in HTML è necessario utilizzare un tag<a>. Ogni tag<a> ha due parti il tag di apertura e chiusura.,

Ecco un esempio:

<a href="..."> ...</a>

In precedenza, si può vedere che il tag di apertura:

<a href="...">

Crea l’inizio del collegamento ipertestuale. Quindi chiudiamo il tag con:

</a>

Qualsiasi testo che scriviamo tra il tag apri e chiudi è il testo del tuo link. Ad esempio:

<a href="..."> My Great Link</a>

Per trasformare questo in un link dobbiamo aggiungere un URL. Per fare ciò aggiungiamo l’URL all’attributo href., L’URL può puntare a qualsiasi punto su Internet. Per questo esempio useremo la homepage di PageDart:

<a href="https://pagedart.com"> My Great Link</a>

Assicurati di includere l’URL completo con HTTPS nella parte anteriore.

Questo è tutto quello che c’è da creare un link di solo testo in HTML. Il prossimo, diamo un’occhiata a come possiamo aggiungere un’immagine a una pagina web utilizzando HTML.

Come si crea un’immagine in HTML?

Per aggiungere un’immagine alla tua pagina web usa un tag img.,

Questo tag è un po ‘ diverso da un tag a in quanto non ha un tag di apertura e chiusura.

Per creare un tag img devi dare al tag un file sorgente. Usa l’attributosrc per fare questo:

<img src="https://pagedart.com/favicon-32x32.png">

Questo aggiungerà un’immagine allo schermo come questa:

Ora abbiamo un’immagine che dobbiamo trasformare in un link., Per fare ciò è necessario aggiungere un tag<img> all’interno dei tag<a> creando un’immagine di collegamento in HTML.

Diamo un’occhiata a un esempio successivo.

Immagine come collegamento

Per trasformare un’immagine in un collegamento è necessario aggiungere il tag<img> all’interno del tag<a>., Quindi, riprendendo il nostro esempio precedente il codice sorgente sarebbe simile a questa:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>

Che dovrebbe produrre questo codice HTML:

aggiunta di <img> tag all’interno di un <a> tag, il browser può vedere che l’immagine dovrebbe essere cliccabile. Hai trasformato l’immagine in un link!

Se si utilizza WordPress, è possibile aggiungere questo codice HTML alla pagina utilizzando la vista di testo nell’editor di pagina.

Puoi anche aggiungere testo e immagini all’interno del link, diamo un’occhiata a questo.,

Immagine e testo come collegamento

L’esempio sopra ha mostrato come aggiungere solo un’immagine come collegamento.

E se volessimo aggiungere sia un’immagine che un testo a un link.

Beh, in questo caso, abbiamo bisogno di assicurarsi che si aggiunge il testo prima di chiudere il tag <a> tag:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>

In precedenza, abbiamo aggiunto “PageDart Casa” all’interno del <a> tag insieme con il <img> tag., Quando mostrato in un browser web sulla pagina sarà simile a questo:

C’è un altro attributo sul tag <img> che non abbiamo discusso e dovresti usare.

È l’attributo alt.

I collegamenti di immagini e l’attributo Alt

Le immagini su Internet dovrebbero avere un attributoalt. Questa è una descrizione testuale dell’immagine.

Gli screen reader utilizzano il testo alt per aiutare gli utenti ipovedenti. Gli screen reader leggeranno la descrizione del testo quando trova un’immagine.,

Per fare questo dobbiamo aggiungere un alt attributo img tag come questo:

<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>

Ora, quando lo screen reader legge questa immagine si dirà “PageDart.com” ad alta voce.

È importante seguire le migliori pratiche durante la scrittura del testo alt dell’immagine.

Assicurati di pensare alla persona che sta usando lo screen reader. Scrivi la tua descrizione del testo alt per loro e descrivi l’immagine nel miglior modo possibile.

Questo è tutto ciò che serve per creare immagini di collegamento in HTML., Eppure, ci sono alcune tecniche più avanzate che è possibile utilizzare. Se ti senti coraggioso vedremo questi prossimi.

Tecnica avanzata: Immagine come collegamento usando CSS

Una tecnica più avanzata è usare CSS. CSS sta per Cascading Style Sheet e ti permette di cambiare l’aspetto di una pagina HTML.

Con i CSS puoi impostare un’immagine di sfondo su un elemento come il nostro tag<a>.,

Qui ci sarebbe HTML che assomiglia a questo:

<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>

questa volta non c’è nulla all’interno del <a> tag, ma l’immagine è impostato usando lo stile CSS. Questo mostrerebbe quanto segue nel browser:

Possiamo usare una tecnica simile con un tag<button>.

Tecnica avanzata: usando un pulsante

In questo esempio, useremo il tag<button>invece del tag<a>.,

Possiamo creare lo stesso output dell’esempio precedente usando questo HTML:

Che crea questo output:

Qui stiamo usando JavaScript per aprire una nuova scheda del browser. Invio dell’utente alla home page di PageDart.

Non ho idea del perché lo faresti mai! Ma volevo mostrarti cosa è possibile e quanto possono essere flessibili HTML, CSS e JavaScript.

L’ultimo esempio che mostrerò sta usando una mappa di immagini.

Tecnica avanzata: Mappa immagine

Le mappe immagine sono immagini singole con aree cliccabili., Hanno perso popolarità nel corso degli anni, ma sono ancora parte della specifica HTML5. Ciò significa che i browser come Internet Explorer, Chrome e Safari li supporteranno.

Grafici sono buoni esempi di Mappe di Immagine, quali organigrammi, come:

Quindi, per rendere ogni rosa zona un link cliccabile siamo in grado di creare un map come questo:

Abbiamo aggiunto l’attributo usemap per il img tag.,

Quindi all’interno del tag map abbiamo un tag area. Ciascuna di queste aree crea un’area cliccabile che funge da pulsante.

l’Utilizzo di un Collegamento Immagine in HTML

Abbiamo visto cinque modi diversi per aggiungere un’immagine come link sulla tua pagina web:

1. Un’immagine come link
2. Immagine e testo del link
3. usare i CSS per impostare un’immagine come link
4. l’Utilizzo di un pulsante come un link
5. Utilizzo di mappe immagine

Tutti questi possono trasformare le immagini in link. Ora si dovrebbe avere la fiducia per provare questo da soli.,

Abbiamo anche esaminato l’accessibilità e come impostare il testo Alt per aiutare i non vedenti.