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 ancor (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:

<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:

  • 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:

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:

Nella prossima lezione vi parlerò dell’attributo target del tag a href per realizzare collegamenti ipertestuali.

Alcuni link utili:

Tag semantici

Form in html

Tag strong ed em

Collegamenti interni ad una pagina web

Inserire immagini in una pagina web

Paragrafi in html

Tabelle in html

Elenchi in html

Tag dei titoli

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Autore dell'articolo: cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *