Writing HTML | Riguardo A | FAQ | Riferimenti | Tag | Lezioni | indietro | avanti |

8d. Link A Sezioni Di Pagina

Abbiamo visto come collegarci ad altre pagine web, sia che esse siano state create da noi o che siano state trovate in un posto qualunque su Internet. Cosa succede se invece hai voglia di connetterti ad una specifica sezione in un documento? Beh... PUOI!!

Obiettivi

Dopo questa lezione sarai in grado di:

Creare un evidenziatore di riferimento nascosto per una sezione particolare di un file HTML.
Costruire un link ipertestuale che connetta ad una sezione particolare di un file HTML.
Costruire un link ipertestuale che connetta ad una sezione particolare di un altro file HTML.
Creare una tabella ipertestuale di contenuti per una web page.

Lezione

Nota: Se non hai i documenti di lavoro dalla lezione precedente scaricane una copia ora.

La Named Anchor

La named anchor o ancora nominale e' un evidenziatore di riferimento nascosto per una sezione particolare del tuo file HTML. Questo puo' essere usato per collegare a diverse sezioni della pagina se questa e' molto lunga, o ad una sezione contrassegnata di un'altra pagina. Per esempio, nella pagina che stai leggendo adesso, io potrei creare un riferimento nascosto e chiamarlo "check" [controllo] che marchi l'intestazione successiva "Controlla il Tuo Lavoro". Quindi posso scrivere un link ad ancora che connetta a questa sezione del documento. Una volta che si faccia click su un link all'ancora con questo nome, il tuo web browser saltera' a questa linea in modo che questa sia nella parte alta dello schermo.

Ecco un esempio che puoi provare subito. Vai a Controlla il Tuo Lavoro.. Quando ci sei cerca un link che ti faccia tornare esattamente in questo punto.

Il codice HTML per creare le named anchor e':


     <a name="NAME">Testo per collegare</a>

o per il link che hai appena verificato:


     <a name="check">Controlla il Tuo Lavoro</a>

Nota come questo si differenzi in modo sottile dagli anchor link <a href=... che abbiamo studiato nella lezione 8a.

Scrivere un Link ad una Named Anchor

Quando vuoi creare un link ipertestuale (detto "anchor link", vedi la lezione 8a) ad una named anchor, usa il seguente codice HTML:


     <a href="#xxxxx">Testo che funge da ipertesto</a>

o per il link che hai appena provato e che rimanda alla sezione del documento:


    Vai a <a href="#check">Controlla il Tuo Lavoro</a>

Il simbolo "#" impartisce al tuo web browser l'obbligo di cercare lungo il documento HTML una named anchor chiamata "xxxxxx" o nel nostro esempio "check". Quando selezioni o fai click sull'ipertesto, il programma porta la parte che contiene la named anchor nella parte alta dello schermo.

Aggiungere Named Anchor alla Lezione Volcano Web

Ora costruiremo una tabella sui contenuti della nostra lezione che apparira' all'inizio della nostra pagina Volcano Web. Gli elementi per questo saranno le intestazioni che abbiamo gia' creato. Ciascuna di queste fungera' da link ipertestuale per una particolare sezione della nostra lezione.

Il primo passo e' quello di creare una named anchor per ognuna delle sezioni d'intestazione nella tua lezione Volcano Web:

Apri il tuo file index.html nel text editor
Trova l'intestazione per l'Introduzione. Cambia da cosi':
```
<h2>Introduzione</h2>
```
a cosi':
```
<h2><a name="intro">Introduzione</a></h2>
```
NOTA: Hai appena contrassegnato la riga che contiene l'intestazione "Introduzione" con un evidenziatore di riferimento nascosto, la named anchor "intro".

In modo simile, cambia tutti i tag delle intestazioni <h2> per le altre sezioni:


  <h2><A NAME="term">Glossario</A></h2>
  
  <h2><A NAME="usa">Luoghi Vulcanici negli USA</A></h2>
  
  <h2><A NAME="mars">Luoghi Vulcanici su Marte</A></h2>
  
  <h2><A NAME="project">Progetti di Ricerca</A></h2>

Se ora tu schiacciassi Aggiorna sul tuo web browser, non noteresti alcun cambiamento evidente. I tag per le ancore che abbiamo appena aggiunto sono nascoste dalla visione dell'utente.

Aggiungere Link ad una Named Anchor nello Stesso Documento

Ora costruire una tabella dei contenuti che apparira' nella parte superiore dello schermo. Useremo una lista non ordinata (vedi lezione 6 per maggiori informazioni sulle liste) per creare questo elenco:

Se non e' gia' aperto, apri il tuo file index.html nel text editor.
Sotto la prima frase dopo l'intestazione Volcano Web digita il seguente testo:
```
<hr>
<B>In questa lezione...</B>
<ul><i>
<li>Introduzione
<li>Glossario
<li>Luoghi Vulcanici negli USA
<li>Luoghi Vulcanici su Marte
<li>Progetti di Ricerca</i>
</ul>
```
NOTA: Questo indice e' contraddistinto sopra e sotto da una linea continua costruita usando il tag <hr>. Lo stile Corsivo e' usato per gli elementi del testo. Fino a questo punto abbiamo digitato solo il testo per gli elementi dell'indice. Piu' avanti aggiungeremo il codice HTML per rendere attivi questi link.
Salva ed Aggiorna nel tuo web browser.

Finalmente, adesso andiamo a far funzionare ogni oggetto della lista come link ipertestuali ad un'altra sezione del documento. Per poterlo fare, useremo una variazione della formula di base degli anchor link alla lezione 8a. Invece di collegarci ad un altro file, noi ci connetteremo ad una delle named anchor (i marcatori nascosti che abbiamo creato sopra) dello stesso file. Indichiamo una named anchor facendo precedere i nomi dei marcatori di riferimento dal simbolo "#";

Apri il file index.html nel text editor.

Vai al primo elemento della lista nella tua sezione d'indice. Cambialo da:


    <li>Introduzione


    <li><A HREF="#intro">Introduzione</A>

Ora dovresti essere in grado di aggiustare anche gli altri link alle named anchor in modo che questa sezione risulti circa cosi':


<hr>
<B>In questa Lezione...</B>
<ul><i>
<li><A HREF="#intro">Introduzione</A>
<li><A HREF="#term">Glossario</A>
<li><A HREF="#usa">Luoghi Vulcanici negli USA</A>
<li><A HREF="#mars">Luoghi Vulcanici su Marte</A>
<li><A HREF="#project">Progetti di Ricerca</A></i>
</ul>

Salva ed Aggiorna nel tuo web browser. Quando fai click su un elemento del tuo indice, il browser dovrebbe visualizzare nella parte superiore dello schermo la relativa sezione.

Aggiungere Link ad una Named Anchor in un altro Documento

Possiamo creare un link che salti alla sezione di un altro documento HTML che sia marcato con una named anchor. Il codice HTML per costruire un come questo verso un documento locale e':


     <a href="file.html#NAME">Testo per attivare il link</a>

e se il documento risiede in un altro web site:

    <a href="http://www.cheese.org/pub/recipe.html#colby">Colby Cheese</a>

Nella lezione 8a abbiamo creato un link ipertestuale che fa saltare da una sezione della nostra lezione su Mount St. Helens a msh.html, un file HTML separato. Ora aggiungeremo un link a questo secondo documento che ci permettera' di ritornare alla sezione originale della pagina principale di Volcano.

Apri il tuo file msh.html nel text editor
Vicino al fondo del codice HTML (ma prima del tag </body>) digita il seguente testo:
```
<hr>
<a href="index.html#usa">Ritorna a <i>Volcano Web</i></a>
```
NOTA: Abbiamo incluso il tag per lo stile Corsivo <i>...</i> nel testo marcato dalla named anchor "usa".
Salva ed Aggiorna nel tuo web browser. Quando fai click su uno dei link ipertestuali alla fine della pagina msh.html, dovresti poter saltare indietro fino alla sezione "Luoghi Vulcanici negli USA" della lezione Volcano Web.

In questo caso il link e' solo il nome di un altro file HTML, msh.html, nella stessa directory del file index.html. D'altra parte, puoi usare un URL completo (vedi la lezione 7) per collegarti ad una named anchor in un file HTML conservato in un computer remoto. Per esempio, per creare un link alla sezione "Introduzione" di un file HTML presente sul server WWW di MCLI, la sintassi dovrebbe essere:


   <a href="http://www.mcli.dist.maricopa.edu/tut/final/index.html#intro">
      Introduzione a Volcano Web</a>

Il marcatore "#anchor_name" e' appiccicato alla fine dell'URL.

Controlla il Tuo Lavoro

Confronta la tua web page con un esempio di come questo documento dovrebbe apparire. Se la tua web page fosse diversa da quella dell'esempio o se il link alla named anchor non dovesse funzionare correttamente, rivedi il testo che hai digitato nel text editor.

Esempio dell'utilizzo del link per tornare alla sezione che descrive le named anchor...

Verifica

Da che cosa identifichi una named anchor?
Quali sono i passaggi necessari alla creazione di un link a diverse sezioni in un documento?
Come puoi modificare un anchor link in modo che si connetta ad una named anchor in un altro documento HTML?
Come puoi creare una tabella di contenuti per una web page?
Qual'e' la differenza di funzionamento tra i tag <a href="...> e <a name="...> ?

Pratica Indipendente

Crea named anchor per le intestazioni della tua web page personale e costruisci un indice che colleghi queste sotto-sezioni.

Prossimamente....

Nella prossima lezione apprenderai come fare in modo che le figure fungano da link ipertestuale.

VAI A.... | Indice Delle Lezioni | indietro: "Link A Internet" | avanti: "IperGrafici" |

Writing HTML: Lezione 8d: Link a Sezioni di Pagina
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The Internet Connection at MCLI is Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing HTML