Minicorso per alunni - 8
LINK
[D]
I link servono a collegare le pagine di un sito, ma anche a collegare altri
siti esterni al nostro oppure ad inserire un indirizzo di posta
elettronica. I link sono gli elementi che permettono la
“navigazione”.
I link tracciano la rotta, sono loro a dirmi (a permettermi) dove posso andare, cosa posso vedere.
Siamo noi, che creiamo la pagine, a determinare questi collegamenti.
I link sono visibili ed evidenziati dal fatto che passandoci sopra il mouse l’icona cambia aspetto, diventa una mano.
Per creare il link si utilizza il tag <a> </a> (significa àncora, aggancio) e deve essere usato insieme all’attributo: href
<a href=”nomepagina.html”>testo che verrà evidenziato</a>
<a href=”seconda.html”>vado nella seconda pagina</a>
Fra virgolette dell’attributo HREF oltre al nome e posizione di una pagina è possibile specificare anche:
<a href=”http://..”> mi apre un sito - es. <a href=”http://www.ic-manzoni-ubolo.it”>
<a href=”mailto:..”> mi permette di scrivere una e-mail - es. <a href=”mailto: federico@libero.it”>
<a href=”nomefile.zip”> mi apre un file
<a href=”nomefile.doc”>mi apre un file
Per prima cosa creiamo una seconda pagina:
Selezioniamo il testo interno a <body> ad esclusione dell’immagine e cancelliamolo.
[D]
<html>
<head>
<title>Seconda pagina</title>
</head>
<body>
<h1> Questa è la mia seconda pagina</h1>
<img src="mulino.jpg" title="Foto di un mulino" alt="questa foto mostra un mulino spagnolo" width="272" heigt="310">
</body>
</html>
Questo è il risultato:
[D]
Apriamo nuovamente la pagina “index.html” ed inseriamo il tag di collegamento:
<a href=”seconda.html”> vado nella seconda pagina</a>
sotto il tag della foto e poi salviamo ed eseguiamo.
[D]
Notiamo che il collegamento è stato fatto su tutta la frase, è sottolineato (di norma il colore è blu) e compare la manina. Se clicchiamo si aprirà la seconda pagina.
Se voglio collegare solo una parola non devo far altro che inserire il tag <a href…>prima della parola e chiuderlo dopo la parola:
<p>vado nella <a href=”seconda.html”>seconda </a> pagina </p>
[D]
Notato la differenza?!
Apriamo il file "secoda.html" ed inseriamo la seguente istruzione che ci permetterà di "NAVIGARE"
<p>Tortno nella <a href=”index.html”>prima </a> pagina </p>
Occorre inserire anche nei link come abbiamo fatto nelle immagini l'attributo “title”:
<p>Tortno nella <a href=”index.html” title=“Ritorno in index”>prima </a> pagina </p>
<title> contiene tra virgolette il commento che chiarisce l'operazione che stai per compiere.
Àncora
Sono possibili dei collegamenti all’interno dello stesso documento o ad una determinata posizione interna ad un altro documento, in questo modo possiamo spostarci velocemente tra sezioni/parti.
[D]
Occorre per prima cosa definire il il punto di ancoraggio cioè il punto di arrivo la sezione a cui vogliamo fare riferimento utilizzando il parametro “id”
<a id=”inizio”></a>qui inizia il paragrafo.....
ES: ....le <a id=”scarpe”></a> scarpe sono di .....
Il punto dove viene inserito il tag “id” si chiama àncora
Per richiamare la sezione bisogna inserire il tag <a herf=”#scarpe”>scarpe</a>
Proviamo ad inserire un nuovo capitolo nella nostra prima pagina:
<h1>Il Basilico </h1>
<h2>Erba Regale</h2>
<p>
E' una delle piante aromatiche più preziose in cucina, considerata insostituibile dai
gourmet. Il gusto è dolce, fragrante e sembra ancora più forte quando, in estate, il sole
ne aumenta l'intensità.
Le foglie più profumate sono quelle che si raccolgono poco prima la fioritura, poiché
contengono una maggiore quantità di sostanza oleosa che ne determina l'aroma;
le foglie più vecchie tendono ad avere un sapore più piccante.
</p>
Avremo in questo modo due capitoli uno sullo zenzero ed uno sul basilico. Salvando e visualizzando questo documento ci accorgiamo che il paragrafo sul basilico non viene visualizzato e per farlo devo scorrere con la barra di scorrimento verticale.
Se voglio fare un “salto” e visualizzare subito il basilico devo creare un’àncora sulla parola BASILICO in questo modo :
<a name="basilico"></a> <h1>Il Basilico</h1>
In questo modo siamo in grado di definire una sezione, un punto di arrivo, un'àncora.
Ora inseriamo come prima riga:
<body>
<p>
Di spezie ne esistono di vari tipi le mie preferite sono <a href="#basilico">basilico</a> e lo zenzero
</p>
<a href="#basilico">basilico</a>
Nella nostra pagina avremo quindi la possibilità si saltare subito sul paragrafo basilico.
[D]