Corso HTML base – i collegamenti ipertestuali

Condividi

Nel corso delle prime lezioni di questo corso HTML base abbiamo visto alcuni elementi base, come contenitori tipografici, i tag body ed head, le differenze tra elementi di enfasi ed estetici (em vs italic, bold vs strong ecc).

Oggi andremo un po’ più affondo ed inizieremo a vedere come funzionano i collegamenti ipertestuali in una pagina web e come vengono renderizzate le immagini grazie al tag <img>, uno dei pochi tag html che non necessita di chiusura.

I collegamenti ipertestuali

Uno degli elementi più utilizzati (e anche più discussi in termini SEO, ma in seguito vedremo perché) sono i collegamenti ipertestuali.

Un link, o collegamento, non è altro che un “tramite” tra una parola o frase ed una destinazione, che può essere una ulteriore pagina web, un documento PDF, un download etc.

Un collegamento ipertestuale può essere utilizzato, come specificato, per “linkare”, ovvero per collegare, pagine web, ma anche per effettuale Download.


La struttura di un link

I collegamenti ipertestuali vengono gestiti dal tag <a> con i relativi attributi. l’attributo href, ad esempio, serve ad inserire il collegamento. Ecco un esempio di collegamento ad una pagina web.

La <a href="https://designtegrator.com">HomePage</a> di Designtegrator.

Nell’esempio che abbiamo appena visto, dunque, la parola “HomePage” è quella che funzionerà da ponte verso l’indirizzo https://designtegrator.com .

Le ancore con id

Un anchor link è solitamente accompagnato dall’attributo, che abbiamo appena visto, href. Ovvero l’attributo che funziona da ponte da un elemento (pagina, download) ad un altro.

Esistono però anche le ancore prive di tale elemento esterno ed accompagnate da un #. Vengono spesso utilizzati per creare, ad esempio, dei collegamenti fra la pagina stessa tramite un attributo “id” che collega il link alla posizione della pagina desiderata. Facciamo un esempio pratico .

<a href="#paragrafo-1">Vai al paragrafo uno</a>
<a href="#paragrafo-2">Vai al paragrafo uno</a>

<p id="paragrafo-1">Questo è il paragrafo uno, ovvero quello linkato dal primo anchor text</p>
<p id="paragrafo-2">Questo è il paragrafo due, ovvero quello linkato dal secondo anchor text</p>

L’asterisco è l’elemento chiave utilizzato per le ancore senza attributo href esterno. Un link che ha solo un # come elemento href punterà ad inizio pagina. Un esempio può essere il seguente :

<h1>Inizio pagina</h1>

<a href="#paragrafo-1">Vai al paragrafo 1</a>
<a href="#paragrafo-2">Vai al paragrafo 2</a>

<p id="paragrafo-1">Questo è il paragrafo uno, ovvero quello linkato dal primo anchor text</p>
<a href="#">Torna all'inizio</a>

<p id="paragrafo-2">Questo è il paragrafo due, ovvero quello linkato dal secondo anchor text</p>
<a href="#">Torna all'inizio</a>

Dove le ancore testuali porteranno ai rispettivi paragrafi e l’ancora “torna all’inizio” con un attributo href con il solo # porterà ad inizio pagina.

Mailto, immagini e download

Come abbiamo visto, i collegamenti ipertestuali possono essere utilizzati per collegare non solo pagine web, o una sezione particolare di una pagina stesso. Essi possono anche fungere da elementi per l’invio di email, il download di files o la visualizzazione di immagini.

L’attributo “mailto”, ad esempio, viene utilizzato per linkare una particolare frase o parola ad un indirizzo email. Esempio.

<a href="mailto:info@designtegrator.com">Inviaci una email</a>

Con il risultato che la frase “Inviaci una email” linkerà direttamente alla tua casella di posta elettronica con l’indirizzo “info@designtegrator.com” già pre-impostato.

Attributo download

Un’ancora di testo può portare a diverse destinazioni, un collegamento ipertestuale con il solo attributo href verrà interpretato dal browser in maniera standard. Esempio, se dovessimo linkare una semplice immagine al fine di visualizzarla, basterebbe inserire l’indirizzo dell’immagine stessa all’interno dell’attributo ahref, come di seguito

<a href="http://indirizzo.com/immagine.jpg">Visualizza immagine</a>

Qualora volessimo, invece, dare la possibilità di scaricare tale immagine ci basterà inserire all’interno dell’ancora l’attributo download. Ecco un esempio pratico

<a href="http://indirizzo.com/immagine.jpg" download>Scarica immagine</a>

Possiamo anche decidere di dare un nome specifico al file (o all’immagine, come in questo caso) che desideriamo far scaricare semplicemente inserendo il nome tra due virgolette dopo l’attributo download. Ecco un esempio

<a href="http://indirizzo.com/immagine.jpg" download="Immagine Floreale">Scarica Immagine Floreale</a>

Stessa cosa vale anche se volessimo far scaricare un particolare file eseguibile, uno zip o un file in formato PDF.

Nel corso della prossima lezione andremo ad analizzare alcuni, importanti, attributi che riguardano i collegamenti ipertestuali, alcuni strettamente collegati alla SEO. Vedremo, ad esempio, l’attributo rel ed i relativi valori come nofollow, noreferrer, noopener.

Informazioni Autore

Salvatore Maniscalco

Designer, sviluppatore, creativo. Nel settore della comunicazione dal 2008, gestisce i progetti con l'entusiasmo del primo giorno. Appassionato di scrittura, lettura e musica. Contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo