Collegamenti Interni in Html

Un collegamento HTML non deve necessariamente aprire una pagina differente. Può essere utilizzato anche per raggiungere una sezione specifica della pagina corrente.

Questa tecnica è particolarmente utile quando una pagina contiene molti contenuti organizzati in sezioni e sottosezioni.

Un esempio tipico è un indice posto all’inizio del documento:

Indice

1. Introduzione
2. HTML
3. CSS
4. JavaScript

Se ogni voce dell’indice è un collegamento, l’utente può selezionare CSS e raggiungere direttamente la relativa sezione senza scorrere manualmente tutta la pagina.

Concetto fondamentale

Per creare un collegamento interno servono due elementi: una destinazione identificabile nella pagina e un link che faccia riferimento a quella destinazione.

Identificare la destinazione con id

Per poter raggiungere una sezione specifica è necessario assegnarle un identificatore mediante l’attributo id.

Esempio:

<h2 id="html">HTML</h2>

In questo caso:

Elemento	Significato
<h2>	Definisce il titolo della sezione.
id	Assegna un identificatore all’elemento.
html	È il valore scelto per identificare quella sezione.

Risultato

L’elemento <h2> può ora essere raggiunto direttamente attraverso un collegamento che utilizza l’identificatore html.

Attenzione

All’interno dello stesso documento ogni valore di id deve identificare in modo univoco un elemento. Non è corretto utilizzare lo stesso id per più sezioni della stessa pagina.

Il simbolo # nei collegamenti

Dopo aver assegnato un id alla destinazione, possiamo creare il collegamento utilizzando il tag <a>.

Dopo aver assegnato un id alla destinazione, possiamo creare il collegamento utilizzando il tag <a>.

Nell’attributo href si inserisce il simbolo # seguito dal valore dell’id.

<a href="#html">Vai alla sezione HTML</a>

La destinazione corrispondente è:

<h2 id="html">HTML</h2>

Collegamento tra href e id

href="#html"
       |
       |
       v
id="html"

La parte scritta dopo # deve corrispondere esattamente al valore dell’attributo id della destinazione.

Creare un indice della pagina

Una delle applicazioni più utili dei collegamenti interni è la creazione di un indice navigabile.

Una delle applicazioni più utili dei collegamenti interni è la creazione di un indice navigabile.

Supponiamo di avere tre sezioni:

<h2 id="html">HTML</h2>

<h2 id="css">CSS</h2>

<h2 id="javascript">JavaScript</h2>

Possiamo creare un indice mediante una lista:

<h2>Indice</h2>

<ul>
    <li><a href="#html">HTML</a></li>
    <li><a href="#css">CSS</a></li>
    <li><a href="#javascript">JavaScript</a></li>
</ul>

La corrispondenza sarà:

Link	Destinazione
`href="#html"`	`id="html"`
`href="#css"`	`id="css"`
`href="#javascript"`	`id="javascript"`

Comportamento

Quando viene selezionata una voce dell’indice, il browser porta la visualizzazione verso l’elemento che possiede l’id corrispondente.

Tornare all’inizio della pagina

Nelle pagine lunghe può essere utile aggiungere alla fine di ogni sezione un collegamento per tornare all’indice.

Per prima cosa assegniamo un id all’elemento che contiene il titolo dell’indice:

<h1 id="inizio">Guida allo sviluppo Web</h1>

Alla fine di ogni sezione possiamo inserire:

<a href="#inizio">Torna all’inizio</a>

Il percorso logico diventa:

INIZIO
  |
  |---- HTML
  |       |
  |       +---- Torna all’inizio
  |
  |---- CSS
  |       |
  |       +---- Torna all’inizio
  |
  +---- JavaScript
          |
          +---- Torna all’inizio

Collegare una sezione di un’altra pagina

Il simbolo # può essere utilizzato anche insieme al nome di un altro documento HTML.

Supponiamo che il file linguaggi.html contenga:

<h2 id="python">Python</h2>

<p>
Python è un linguaggio di programmazione utilizzato
in numerosi ambiti applicativi.
</p>

Da index.html possiamo collegare direttamente questa sezione:

<a href="linguaggi.html#python">Vai alla sezione Python</a>

Composizione del collegamento

linguaggi.html#python
      |          |
      |          +-- id della sezione
      |
      +-- pagina da aprire

Il browser apre prima il documento linguaggi.html e poi cerca al suo interno l’elemento identificato da id="python".

LABORATORIO

Pagina con indice navigabile

L’obiettivo dell’attività è realizzare una pagina dedicata alle tecnologie Web con un indice iniziale che permetta di raggiungere direttamente le diverse sezioni.

Software: editor di testo e browser

L’obiettivo dell’attività è realizzare una pagina dedicata alle tecnologie Web con un indice iniziale che permetta di raggiungere direttamente le diverse sezioni.

Passo 1 - Creare il documento

Creare un file denominato:

tecnologie-web.html

Passo 2 - Creare la struttura HTML

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tecnologie Web</title>
</head>

<body>

    <h1 id="inizio">Tecnologie Web</h1>

</body>

</html>

Osservazione

L’id inizio verrà utilizzato successivamente per creare i collegamenti che permettono di tornare nella parte superiore del documento.

Passo 3 - Creare l’indice

Subito dopo il titolo inserire:

<h2>Indice</h2>

<ul>
    <li><a href="#html">HTML</a></li>
    <li><a href="#css">CSS</a></li>
    <li><a href="#javascript">JavaScript</a></li>
</ul>

In questo momento i link sono stati creati, ma le relative destinazioni devono ancora essere definite.

Passo 4 - Creare la sezione HTML

<h2 id="html">HTML</h2>

<p>
HTML permette di definire la struttura e il contenuto
di una pagina web.
</p>

<p>
Attraverso i tag HTML è possibile inserire titoli,
paragrafi, immagini, liste e collegamenti.
</p>

<a href="#inizio">Torna all’inizio</a>

Passo 5 - Creare la sezione CSS

<h2 id="css">CSS</h2>

<p>
CSS permette di definire la presentazione grafica
dei documenti HTML.
</p>

<p>
Attraverso CSS è possibile controllare colori,
dimensioni, spaziature e disposizione degli elementi.
</p>

<a href="#inizio">Torna all’inizio</a>

Passo 6 - Creare la sezione JavaScript

<h2 id="javascript">JavaScript</h2>

<p>
JavaScript permette di aggiungere comportamento
e interattività alle pagine web.
</p>

<p>
Può reagire alle azioni dell’utente e modificare
dinamicamente il contenuto della pagina.
</p>

<a href="#inizio">Torna all’inizio</a>

Passo 7 - Verificare i collegamenti

Salvare il file e aprirlo nel browser.

Verificare nell’ordine:

selezionare HTML nell’indice;
verificare che il browser raggiunga la sezione HTML;
selezionare Torna all’inizio;
provare il collegamento CSS;
tornare nuovamente all’inizio;
provare il collegamento JavaScript.

Risultato atteso

Tutte le voci dell’indice devono portare alla sezione corrispondente e ogni sezione deve permettere di tornare all’inizio della pagina.

Codice completo del laboratorio

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tecnologie Web</title>
</head>

<body>

    <h1 id="inizio">Tecnologie Web</h1>

    <h2>Indice</h2>

    <ul>
        <li><a href="#html">HTML</a></li>
        <li><a href="#css">CSS</a></li>
        <li><a href="#javascript">JavaScript</a></li>
    </ul>

    <h2 id="html">HTML</h2>

    <p>
        HTML permette di definire la struttura
        e il contenuto di una pagina web.
    </p>

    <p>
        Attraverso i tag HTML è possibile inserire
        titoli, paragrafi, immagini, liste e collegamenti.
    </p>

    <a href="#inizio">Torna all’inizio</a>


    <h2 id="css">CSS</h2>

    <p>
        CSS permette di definire la presentazione
        grafica dei documenti HTML.
    </p>

    <p>
        Attraverso CSS è possibile controllare colori,
        dimensioni, spaziature e disposizione degli elementi.
    </p>

    <a href="#inizio">Torna all’inizio</a>


    <h2 id="javascript">JavaScript</h2>

    <p>
        JavaScript permette di aggiungere comportamento
        e interattività alle pagine web.
    </p>

    <p>
        Può reagire alle azioni dell’utente e modificare
        dinamicamente il contenuto della pagina.
    </p>

    <a href="#inizio">Torna all’inizio</a>

</body>

</html>

Errori comuni

Problema	Codice	Correzione
Il link non porta alla sezione	`href="#html"` ma `id="HTML"`	Utilizzare valori corrispondenti esattamente.
Manca il simbolo #	`href="html"`	Scrivere `href="#html"`.
# viene inserito nell’id	`id="#html"`	Scrivere `id="html"`.
Più elementi hanno lo stesso id	`id="sezione"` ripetuto	Assegnare identificatori distinti.
La destinazione non esiste	`href="#css"` senza un elemento con `id="css"`	Creare la destinazione o correggere href.

Errore da evitare

Questa coppia non è corretta:

<a href="#css">Vai a CSS</a>

<h2 id="stili">CSS</h2>

Il link cerca l’identificatore css, mentre la destinazione possiede l’identificatore stili.

Una possibile correzione è:

<a href="#css">Vai a CSS</a>

<h2 id="css">CSS</h2>

Esercizio autonomo

Creare una pagina HTML dedicata ai linguaggi di programmazione.

La pagina deve contenere:

un titolo principale con id inizio;
un indice iniziale;
una voce dell’indice dedicata a Python;
una voce dedicata a Java;
una voce dedicata a C++;
una sezione per ogni linguaggio;
un id differente per ogni sezione;
un collegamento Torna all’inizio alla fine di ogni sezione.

Criteri di verifica

Ogni voce dell’indice deve raggiungere la sezione corretta.
Ogni id deve essere univoco.
Il valore scritto dopo # deve corrispondere all’id della destinazione.
Da ogni sezione deve essere possibile tornare all’inizio.

Verifica rapida

Domande di controllo

A cosa serve l’attributo id?
Quale simbolo viene utilizzato in href per indicare una sezione della pagina?
Qual è la relazione tra href="#html" e id="html"?
È corretto scrivere id="#html"?
È possibile utilizzare lo stesso id per più sezioni?
Come si crea un collegamento per tornare all’inizio della pagina?
Come si collega direttamente una sezione presente in un’altra pagina?

Sviluppo Web

Collegamenti Interni

Creazione di collegamenti interni a sezioni e sottosezioni di una pagina HTML mediante identificatori id e riferimenti con hash.