Collegamenti ipertestuali, tag a href per i collegamenti ipertestuali

Oggi vedremo come creare i collegamenti ipertestuali, che sono alla base delle pagine web.
I collegamenti ipertestuali non sono altro che i link che ci consentono di andare da una pagina web all’altra.

Definizione di documenti ipertestuali e collegamenti ipertestuali

Con il termine di documenti ipertestuali si intendono quei documenti che possono essere visionati in maniera non sequenziale, ma secondo collegamenti di tipo logico, che consentono di passare da una pagina all’altra dello stesso sito web o anche verso altri siti web esterni.

I link si possono attivare non solo su parole o frasi, ma anche su immagini, elementi multimediali, ecc…

Quando si crea un collegamento il cursore del mouse, che vi passa sopra, assume la forma di una piccola mano con il dito indice sollevato.

Tag per creare un collegamento ipertestuale

Il tag per creare un collegamento ipertestuale è <a></a> dove a sta per anchor (ancora). Questo tag è seguito dall’attributo href (hypertest reference ovvero riferimento ipertestuale), il cui valore è l’indirizzo della pagina di destinazione del link.

Per spiegare l’inserimento dei collegamenti ipertestuali, riprendiamo l’esempio già visto sui paragrafi, dove avevamo inserito questo codice per generare una semplice pagina web:

Banner Pubblicitario

<h1>Coding Creativo<h1>
<h2>Scratch</h2>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L'interfaccia grafica è molto intuitiva e semplice da usare.
<br>Sul sito Coding Creativo troverete tanti esempi ed esercizi su scratch.</p>
<br><br>
<p>Alcuni esempi di giochi realizzati con scratch:
<ul>
<li>Tabellina con scratch;</li>
<li>Morra cinese.</li>
</ul>
</p>

Dunque ipotizziamo di voler creare un collegamento ipertestuale al sito web https://www.codingcreativo.it, esattamente quando clicchiamo sulla parola Coding Creativo.

Per farlo dobbiamo inserire un collegamento ipertestuale del tipo:

<a href=” https://www.codingcreativo.it “> Coding Creativo</a>

<h2>Coding Creativo<h2>
<h3>Scratch</h3>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L'interfaccia grafica è molto intuitiva e semplice da usare.
<br>Sul sito <a href="https://www.codingcreativo.it">Coding Creativo</a> troverete tanti esempi ed esercizi su scratch.</p>
<br><br>
<p>Alcuni esempi di giochi realizzati con scratch:
<ul>
<li>Tabellina con scratch;</li>
<li>Morra cinese.</li>
</ul>
</p>

I link di default sono evidenziati di colore blu quando la pagina non è mai stata visitata, invece sono di colore viola quando la pagina è stata già visitata.

Ecco dunque l’esempio sotto:

Coding Creativo

Scratch

Scratch è un ambiente di programmazione gratuito ed è ideale soprattutto per imparare il coding. L’interfaccia grafica è infatti molto intuitiva e semplice da usare.
Sul sito Coding Creativo troverete tanti esempi ed esercizi su Scratch.

Ecco dunque alcuni esempi di giochi realizzati con Scratch:

Banner pubblicitario

Tabellina con Scratch;
Morra cinese.

Ma potremmo inserire anche altri collegamenti ipertestuali alle varie pagine.

Ad esempio quando selezioniamo tabellina con Scratch dovremmo poter visualizzare la pagina relativa alla tabellina che in questo caso è:
https://www.codingcreativo.it/gioco-della-tabellina-con-scratch/

Per visualizzare invece la pagina inerente la morra cinese dobbiamo aggiungere questo link:
https://www.codingcreativo.it/morra-cinese-con-scratch/

Quindi modifichiamo nuovamente il codice in questo modo:

<h2>Coding Creativo<h2>
<h3>Scratch</h3>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L'interfaccia grafica infatti è molto intuitiva e semplice da usare.
<br>Sul sito <a href="https://www.codingcreativo.it">Coding Creativo</a> troverete tanti esempi ed esercizi su scratch.</p>
<br><br>
<p>Ecco dunque alcuni esempi di giochi realizzati con scratch:
<ul>
<li><a href="https://www.codingcreativo.it/gioco-della-tabellina-con-scratch/">Tabellina con scratch</a>;</li>
<li><a href="https://www.codingcreativo.it/morra-cinese-con-scratch/">Morra cinese</a>.</li>
</ul>
</p>

Otterremo questo risultato: