Lezione 11 - Corso Base Html

Collegamenti Interni - Il Selettore ID in Html


Collegamenti Interni

Oggi parliamo di collegamenti interni, cioè di collegamenti nello stesso documento o nella stessa pagina.

Per poter raggiungere, e quindi collegare, un punto specifico della pagina abbiamo bisogno di identificare quel punto, e uno dei modi è quello di selezionare un elemento mediante un ID.

Vediamolo subito in pratica.
Creiamo un documento html e mettiamoci dentro 5 paragrafi abbastanza grandi da riempire abbondantemente una pagina in maniera che almeno l'ultimo paragrafo non si veda. 
<html>                          
 <head>			    
  <title>Collegamenti Interni</title>      
 </head>
 <body>			    
    <h1>Il selettore id</h1>  
    <h2>Paragrafo 1</h2>
    <p>Testo molto lungo....voi fatelo almeno di 5-6 righe</p>
    <h2>Paragrafo 2</h2>
    <p>Testo molto lungo....voi fatelo almeno di 5-6 righe</p>
    <h2>Paragrafo 3</h2>
    <p>Testo molto lungo....voi fatelo almeno di 5-6 righe</p>
    <h2>Paragrafo 4</h2>
    <p>Testo molto lungo....voi fatelo almeno di 5-6 righe</p>
    <h2>Paragrafo 5</h2>
    <p>Testo molto lungo....voi fatelo almeno di 5-6 righe</p>
 </body>               
</html>
Adesso fate conto che l'articolo sia proprio molto molto lungo e che l'ultimo paragrafo, quello più in fondo sia raggiungibile con difficoltà. Capiamo subito che nel punto più comodo della pagina dobbiamo mettere un collegamento che ci porti immediatamente, e quindi immediatamente visibile, al punto del documento desiderato.

Il Selettore ID

Per poter fare questo ci avvaliamo del Selettore id
Quindi nel punto più in alto (quando parleremo del Flusso della Pagina vi spiego perché va messo in alto alla pagina) del nostro documento scriviamo: 
<a href="#p5">Paragrafo 5</a>
Io faccio un solo collegamento per brevità ma voi per esercizio fatene di più, ed è chiaro che si possono fare quanti collegamenti si vuole.

Bene, a questo punto abbiamo creato la base del collegamento rendendo attivo il testo Paragrafo 5 che sul video appare colorato e sottolineato e quando ci passiamo sopra con il mouse la freccetta diventa una manina, e sappiamo anche che nel momento in cui ci clicchiamo sopra, il browser capisce che ci deve portare all'indirizzo che gli ho indicato con href, e cioè (#p5) p5 è arbitrario, potete scrivere ciò che volete, l'importante che quello che scrivete vi faccia capire dove si trova il punto che voi volete indentificare, io ho messo p5 per individuare il Paragrafo 5, mentre # (cancelletto) è il segno che identifica il selettore id.

Ora fissiamo il punto in cui vogliamo portare il documento.
Andiamo al tag <h2> del paragrafo 5 e scriviamo: 
<h2 id="p5">Paragrafo 5</h2>

Notare le " " (le virgolette che vanno aperte e chiuse)
Adesso il collegamte è completo. Ed il codice è: 
<html>                          
 <head>			    
  <title>Collegamenti Interni</title>      
 </head>
 <body>			    
    <h1>Il selettore id</h1>
    <a href="#p5">Paragrafo 5</a>
    <h2>Paragrafo 1</h2>
    <p>Testo molto lungo....voi fatelo almeno di 5-6 righe</p>
    <h2>Paragrafo 2</h2>
    <p>Testo molto lungo....voi fatelo almeno di 5-6 righe</p>
    <h2>Paragrafo 3</h2>
    <p>Testo molto lungo....voi fatelo almeno di 5-6 righe</p>
    <h2>Paragrafo 4</h2>
    <p>Testo molto lungo....voi fatelo almeno di 5-6 righe</p>
    <h2 id="p5">Paragrafo 5</h2>
    <p>Testo molto lungo....voi fatelo almeno di 5-6 righe</p>
 </body>               
</html>
C'è da dire che il selettore id crea un collegamento univoco, cioè un elemento può avere un solo id e non ci possono essere degli elementi diversi con lo stesso id.

Html Corso Base


Html Corso Intermedio


Html Corso Avanzato