Corso HTML: i collegamenti ipertestuali

Un collegamento ipertestuale consente di collegare diverse pagine web tra loro. Vediamo come si struttura in HTML.

Vi sarà capitato sicuramente innumerevoli volte di cliccare su una parola e di essere indirizzati verso un’altra pagina web. Ecco, quello è il cosiddetto collegamento ipertestuale, più comunemente noto come link. Nell’ambito del web i collegamenti ipertestuali sono diventati ormai un elemento fondamentale per l’informazione digitale, poiché mettono in relazione URL (Uniform Resource Locator) differenti, collegati tra loro attraverso un semplice link (letteralmente collegamento in inglese). E’ dunque chiaro come l’utilizzo di link risulta fondamentale per un sito web, specialmente per far sì che l’utente non abbandoni dopo poco tempo ma che sia invogliato ad approfondire un determinato argomento cliccando su un link. Questa rete di link porta al cosiddetto fenomeno del backlink, di cui abbiamo discusso in questo articolo.

Per un comune lettore, il link è facilmente individuabile da parole che sono spesso evidenziate con un colore diverso rispetto al resto del testo, proprio per catturare l’attenzione. Per chi invece è creatore di contenuti, come si crea un link? Quali proprietà può avere un link? Scopritelo in questo articolo.

Creazione di un link

In HTML, linguaggio standard per la scrittura di articoli online, per creare un articolo si fa uso del tag <a href></a>, dove la lettera sta a simboleggiare l’ancora, ovvero il nostro sito, mentre href è l’abbreviazione di hypertext reference, ossia il sito che noi linkeremo tramite quella specifica parola o frase. La sintassi corretta per linkare un URL è la seguente:

<a href="www.nomesito.it/articolo"></a>

Come potete notare la scrittura è davvero molto semplice ed intuitiva. Con WordPress, ma probabilmente anche con altri CMS, è possibile evidenziare direttamente la parola, selezionare il link da collegare e fare CTRL+V per creare un collegamento iperstestuale senza mettere mano al codice HTML. In questo modo però non potete andare a modificare le proprietà di quel link, ma solamente collegare l’URL. Andiamo quindi a vedere come personalizzare ulteriormente il collegamento.

Proprietà dei collegamenti ipertestuali

Il tag <a>è dotato di diversi attributi, che possono essere utilizzati per dare delle specifiche indicazioni al link. Vediamo insieme quelle più importanti:

  • rel: stabilisce la relazione tra il sito che linka e quello linkato. Questo attributo permette di decidere se dare affidabilità o meno al sito linkato, tramite le voci follow/nofollow.
  • target: permette di impostare l’apertura del link, se nella stessa finestra del browser o in una nuova.
  • title: assegna un’etichetta al link.
  • hreflang: specifica la lingua del documento collegato, se si tratta di file di testo.

La sintassi per inserire un attributo nel tag è la seguente:

<a href="www.nomesito.it/articolo" attributo="valore"></a>

Anche in questo caso la sintassi è davvero semplicissima da applicare. Fate attenzione però a scrivere correttamente l’attributo al di fuori del valore di href, altrimenti il collegamento potrebbe non funzionare. Ricordate inoltre di inserire le virgolette per ogni valore che date. Di seguito alcuni esempi di errori di collegamento:

<a href=www.nomesito.it/articolo attributo="valore"></a>

<a href="www.nomesito.it/articolo" attributo=valore></a>

<a href="www.nomesito.it/articolo attributo=valore"></a>

Creare collegamenti ipertestuali tramite immagini

Concludiamo questo argomento parlando di come creare un link da un’immagine. Oltre al semplice testo, è possibile anche reindirizzare un utente ad un’altro URL tramite un’immagine, che sicuramente attira maggiormente l’attenzione. In questo caso la sintassi per il tag <a>resta la stessa ma bisogna aggiungerci il tag <img src>, dove con src indichiamo la source (risorsa) dell’immagine, ossia il link di origine. La sintassi ora sarà:

<a href="www.nomesito.it/articolo"><img src="www.nomesito.it/immagine.jpg"></a>

In pratica all’interno del tag <a>andrete a posizionare l’immagine sulla quale applicare il link. Ovviamente se volete cambiare l’immagine dovrete modificare l’URL. Il risultato sarà che l’utente visitatore, non appena cliccherà sull’immagine, verrà reindirizzato ad una nuova pagina, la stessa evidenziata nel tag di riferimento.

NOTA: il tag <img>non ha la chiusura come gli altri tag ma solamente la “>” finale.

Ora sapete perfettamente come creare i collegamenti ipertestuali in linguaggio HTML. Se volete potete leggere anche l’articolo riguardante la formattazione del testo in HTML.

Corso HTML: i collegamenti ipertestuali ultima modifica: 2018-10-12T16:00:49+02:00 da Marco Nisticò
Se ti è piaciuto questo articolo, sostieni TechByte a questo link

Potrebbero interessarti anche...

Facci sapere la tua opinione!