html57
Corso html 5, settima lezione.
Roberto Abutzu su uiciechi.it, 2013-04.

Settima parte: I link, prima parte.

`**********`

I link, prima parte.

I link, collegamenti, sono quegli elementi che forse, hanno reso questo
linguaggio tanto importante nel web. Conosciuti anche come collegamenti
ipertestuali in origine, essi permettono di collegare tra loro delle pagine
di uno stesso sito, rendendone in questo modo fluida la navigazione nei suoi
contenuti.

Sono formati da testo che ne indica la funzione, ma è possibile trovarne
anche sotto forma di immagine.

I link, quelli testuali, di default vengono sottolineati in una pagina web e
si evidenziano quando gli viene portato sopra il focus.

Quando il puntatore del mouse, la freccia, ci passa sopra, cambiano aspetto
e, se programmato, si apre un fumetto con una descrizione aggiuntiva del
link stesso. Attenzione, tutte queste impostazioni non sono una regola
fissa. Nei siti di nuova generazione, il link, di default, è scritto in Blu
e si sottolinea al passaggio del mouse. Questo, per spiegare che, in una
pagina web, è a discrezione del programmatore, utilizzando i fogli di stile,
personalizzare le caratteristiche dei link a propria discrezione. Vedremo
nella prima parte della trattazione dei Css come effettuare queste
personalizzazioni.

Ci sono varie tipologie di link o, meglio, i link possono eseguire dei
lavori differenti, pur rimanendo nella loro caratteristica principale che è
quella di spostare il focus in una posizione diversa sulla stessa pagina, in
un'altra pagina dello stesso sito o anche in una pagina di un altro sito.
Per semplificare l'apprendimento, suddividiamo per ora i link in quattro
tipologie. Esse sono:

1. Link semplice. Attivando questo tipo di link, si viene dirottati ad
un'altra pagina dello stesso sito.

2. Link esterni. Attivando questo tipo di link, si viene dirottati ad un
altro sito, esterno al sito nel quale stiamo navigando.

3. Link sulla stessa pagina. Questo tipo di link consente di spostare il
focus all'interno della stessa pagina web dove stiamo navigando. Viene
utilizzato in pagine molto lunghe o con tanti contenuti. Questi link servono
a saltare ad una parte specifica della pagina e sono conosciuti anche come
link di salto. Questi link, grazie ad un elemento chiamato "Ancora", per
capirci come l'ancora di una nave e che è un punto specifico in una pagina
web, quando vengono attivati, spostano il focus su questa ancora, quindi,
consentono spostamenti immediati da una parte all'altra della pagina. In
pratica, è come se fossero dei segnalibri o dei segnaposto posizionati in
punti specifici della pagina dal programmatore. Incontriamo frequentemente
questi link sotto forma di salti, come: "Salta il menu", "Vai ai contenuti",
"Torna al menu", "Torna ai contenuti". Questi Link che spesso abbiamo avuto
modo di incontrare, molto spesso sono nascosti ed intercettati solo dagli
screen-reader.

4. Link di invio posta. Questo link, una volta attivato, apre il programma
di posta predefinito dell'utente, aprendo direttamente un nuovo messaggio di
posta elettronica con il destinatario già scritto, in quanto contenuto nel
codice html del link stesso.

Struttura di un link.

La struttura che identifica un link è la seguente:

- Tag di apertura: ``a`` (Segno di Minore, lettera a, segno di maggiore).

- Tag di chiusura: ``/a`` (Segno di Minore, Barra (shift più 7), lettera
a, segno di maggiore).

In pratica, come per tutti i tag, per chiuderla, una barra dopo il minore.
Però, il primo tag, quello di apertura, non è esatto, perché per definire il
link occorrono altri parametri. Infatti, nella costruzione di un link,
abbiamo bisogno di due valori fondamentali che servono a renderlo operativo
e funzionale: l'indirizzo dove dovrà puntare il link e la parte di testo che
apparirà a schermo per far comprendere dove porterà il link stesso.

Facciamo subito un esempio, utilizzando un link esterno. Ipotizziamo di
essere nel nostro sito e di voler creare un link che ci apre direttamente il
sito dell'Unione Italiana dei Ciechi e degli Ipovedenti. Ecco la stringa da
utilizzare: ``a href="www.uiciechi.it"Unione Italiana 
dei Ciechi e
degli Ipovedenti/a``

Analizziamo la composizione del link, spiegandone anche gli attributi e i
loro valori:

- Apriamo il link, con il segno minore e la lettera a.

- Mettiamo uno spazio ed inseriamo l'attributo href. Questo attributo deve
contenere l'indirizzo dove dovrà puntare il link, quindi, l'indirizzo del
sito dell'Unione.

- L'attributo href è seguito da un Uguale, le virgolette, l'indirizzo web e
altre virgolette, quindi, tutto l'indirizzo tra le virgolette e senza spazi.

- Se non dobbiamo aggiungere altri attributi al link, inseriamo, dopo le
virgolette, un maggiore per chiudere il tag di apertura del link.

Per il momento, visto che siamo all'inizio, non aggiungeremo altri
attributi, quindi, per ricapitolare, l'attributo href è così composto:

- Dopo href, uguale e le virgolette, senza spazi.

- Attaccato alle virgolette,la URL del sito dell'Unione.

- Chiudiamo le virgolette.

L'indirizzo da inserire deve essere sempre completo di , quindi
www.uiciechi.it

Se volete rendervi conto, questo è l'indirizzo completo che compare anche
nella barra degli indirizzi del nostro browser se, con la home page del sito
dell'unione aperta, premiamo alt più I.

Rivediamo la prima parte completa del tag di apertura del link, quella
riguardante l'indirizzo a cui punta il link: ``a
href="www.uiciechi.it"``

In sostanza, abbiamo aperto la tag del link, con un segno di minore e la
lettera a, abbiamo aggiunto uno spazio, abbiamo inserito l'attributo href,
completo della URL di destinazione, e abbiamo concluso con un segno di
maggiore per chiudere la tag di apertura del link.

Dopo il segno di maggiore che chiude la tag di apertura, possiamo inserire
il testo descrittivo del link, quello che verrà visualizzato a schermo
dall'utente durante la navigazione.

Come visto sopra, abbiamo inserito: Unione Italiana dei Ciechi e degli
Ipovedenti. Per questo testo, possiamo scrivere utilizzando gli spazi e la
punteggiatura all'occorrenza e come vogliamo. Si raccomanda di inserire il
testo strettamente necessario e sufficiente a far capire dove porta il link.
Questo testo è quello che apparirà a schermo e non ha nessuna funzione html,
ma è solo l'etichetta del link.

Dopo il testo, il link viene chiuso con la tag di chiusura del Link con
``/a``

In ultima analisi, come riportato anche sopra, il risultato del link
completo sarà: ``a href="www.uiciechi.it"Unione 
Italiana dei Ciechi
e degli Ipovedenti/a``

Per provare questo link, potete selezionare e copiare la stringa completa ed
incollarla all'interno della vostra index.html.

Mi raccomando, quando eseguite queste modifiche alla vostra index.html, per
provare del codice che man mano dobbiamo verificare come in questo caso,
cancellate il codice che provate, quando è certo che non vi serve per il
vostro sito.

La pagina index.html del vostro sito sarà aggiornata man mano che questa
trattazione procederà nel tempo, quindi, consiglio, se non volete avere
problemi a ricordare quale codice mantenere, di crearvi una copia della
vostra cartella del sito, in modo che, avendo disponibile un'altra
index.html, potete fare tutti i vostri esperimenti.

Nota bene: come tutte le tag html, ogni minimo errore nella scrittura del
codice, porterà al non funzionamento del link.

Gli errori più frequenti nel digitare il codice di un link sono:

- Non inserire lo spazio tra la lettera a e l'attributo href.

- Non inserire il segno di uguale dopo href.

- Inserire degli spazi all'interno delle virgolette che racchiudono la URL
della pagina da aprire con il link.

- Dimenticare, cosa molto frequente,di chiudere la tag a di apertura del
link con il segno di maggiore dopo le virgolette.

- Dimenticare la barra, shift più 7, nella tag di chiusura del link.

Per evitare tutti questi errori, consiglio di controllare dopo la
digitazione, navigando tutta la stringa per carattere, in modo da
controllare accuratamente tutto il codice, prima di salvare le modifiche. Se
dovessimo fare in modo che il nostro link punti non alla home di un sito, ma
ad una sua sottopagina, nell'indirizzo dobbiamo inserire la URL completa
della sottopagina.

In questo caso, una barra, shift più 7, dopo il link del sito e poi la
pagina prescelta. Vi consiglio, quando non si è sicuri dell'indirizzo
corretto della pagina, di aprire la pagina alla quale si vuole far puntare
il link ed una volta che abbiamo la pagina a schermo, con uno dei comandi
per aprire la barra degli indirizzi, F4, alt più I, eccetera, e copiare
l'indirizzo. Una volta copiato il percorso della pagina, incollarlo
all'interno delle virgolette dell'attributo href.

Facciamo un esempio pratico. Ipotizziamo di voler fare un link diretto
all'Osservatorio Siti Internet del sito dell'Unione, conosciuto come Osi. Il
link sarà: ``a href="www.uiciechi.it/osi/"Osservatorio Siti
Internet - OSI/a``

Notare la barra dopo l'indirizzo dell'Unione, e la scritta Osi che è la
pagina dove vogliamo che punti il link. Dopo la scritta Osi, notate un'altra
barra. Mettere una barra alla fine non è una regola, ma aiuta comunque i
browser. Consiglio di metterla in ogni caso. E' stata inserita la parte di
testo dopo il maggiore che chiude la tag di apertura del link e poi infine
la tag di chiusura del link.

Per esercitarvi, provate a costruire ed inserire nella vostra index.html di
prova vari link, indirizzandoli a siti di vostra conoscenza, più che altro
per fare un po' di pratica. Volendo, potete anche crearvi un vostro file
html, utilizzando la vostra index.html di prova, creando nei contenuti una
lista con i link ai vostri siti preferiti. Create magari anche degli
elenchi, suddividendo i vostri siti per categoria.

Potete utilizzare gli elenchi spiegati nella parte precedente di questa
trattazione e inserire ogni singolo link che punta ad un sito tra i due
elementi della tag "li" e cioè: ``li struttura del link/li``

Prendendo ad esempio il link alla pagina del sito OSI, la struttura
dell'elemento della lista sarà: ``lia
href="www.uiciechi.it/osi/"Osservatorio Siti 
Internet -
OSI/a/li``

Se costruite una pagina html con tutti i link che vi interessano, salvate il
file in una chiavetta ed avrete sempre a disposizione i link ai vostri siti
preferiti.

Link interni al sito.

Un sito web, prevalentemente è una serie di documenti Html collegati tra
loro. Questi documenti non sono altri che dei file e possono essere
collocati all'interno della cartella principale, o all'interno di
sottocartelle, che, a discrezione del programmatore, saranno ordinate
secondo la disposizione più congeniale per costruire il sito secondo le
richieste del committente o, comunque, secondo le idee di chi ha pensato il
sito.

Per far si che si possa aprire questi documenti html con i link appositi,
dovremo sempre specificare con esattezza il corretto percorso nell'indirizzo
all'interno delle virgolette dell'attributo href del link.

Operando all'interno della nostra cartella principale del sito, non servirà
inserire l'intero indirizzo web, ma solo il nome del file a cui dovrà
puntare il nostro link. La ricerca viene limitata esclusivamente al nostro
sito.

Quando creiamo un sito, possiamo avere tutte le pagine html nella cartella
principale del sito, assieme alla pagina index.html, oppure, possiamo avere
alcune pagine nella cartella principale ed altre in altre cartelle che si
trovano sempre nella cartella principale, quelle che saranno sottocartelle
del sito .

In questo caso, dalla index.html e tramite i link, passiamo ad altre pagine,
comunque contenute nella stessa cartella principale, inserendo non
l'indirizzo completo della pagina, ma è sufficiente inserire solo il nome
completo del file di destinazione, all'interno delle virgolette
dell'attributo href, ricordandosi di non metter spazi.

Nel sito che stiamo creando, dopo la home page, la index.html per capirci,
inseriremo man mano che lo completiamo, varie pagine con i relativi link.
Per il momento, prepariamone due che chiameremo: "Chi siamo" e "Lezioni".

Per creare i link, facendo tesoro di quanto sopra descritto, scriveremo in
questo modo:

- Per il link "Chi siamo": ``a href="chi_siamo.html"Chi siamo/a``

- Per il link "Lezioni": ``a href="lezioni.html"Lezioni/a``

Se analizziamo la stringa dei due link, essa non risulta molto diversa da
quella per i siti esterni, la differenza sta nell'indirizzo indicato tra le
virgolette dell'attributo href. Infatti, tra le virgolette abbiamo inserito
solo il nome del file html che sarà la nostra pagina. Il nome del file,
oltre ad essere corretto ed uguale al nome del file che poi dobbiamo creare,
se si vuole essere oculati e consentire a tutti di accedere alla pagina,
deve essere scritto in minuscolo e senza spazi. Insomma, nel caso il nome
fosse formato da più parole, bisogna unire con un sottolineato o con un
trattino le parole. Inoltre, è obbligatorio aggiungere anche l'estensione
del file che rappresenta la pagina html.

Quando il file di riferimento è all'interno di una sottocartella, dobbiamo
inserire, tra le virgolette dell'attributo href, il nome della cartella, una
barra (shift più 7), e il nome del file.

Per esempio, ipotizziamo di avere una cartella chiamata lezioni con al suo
interno proprio le nostre lezioni. Avremo:

- Per il link alla lezione 1: ``a href="lezioni/01.html"Prima
lezione/a``

- Per il link alla lezione 2: `a href="lezioni/02.html"Seconda
lezione/a``

- Per il link alla lezione 3: ``a href="lezioni/03.html"Terza
lezione/a``- E così via.

I file 01.html, 02.html, 03.html, eccetera, sono i file delle lezioni. I
nomi dei file sono riferiti alle varie lezioni, in modo da avere anche un
ordine nell'elenco dei file. Questo esempio per far capire che all'interno
della cartella lezioni, bisogna inserire in ordine numerico i file di ogni
lezione. Fatto questo esempio scritto, successivamente lo metteremo in
pratica, continuando a lavorare sul nostro sito.

Ipotizziamo ancora di trovarci all'interno di una di queste lezioni e sulla
pagina html dobbiamo inserire un link per tornare alla home page, index.html
che sta nella cartella principale. Quando inseriamo in questa pagina o in
altre pagine contenute in una sottocartella del sito dei link per tornare
indietro di un livello, per esempio, tornare alla home page o a qualche
altro file contenuto nella cartella principale del sito, le indicazioni da
inserire tra le virgolette dell'attributo href sono diverse.

Costruiamo un link ipotizzando che dalla pagina html della lezione 01.html
dobbiamo tornare alla home page. Apriamo il file 01.html con il blocco note
e nei contenuti, tanto per fare delle prove, inseriamo una stringa di codice
come segue: ``a href="../index.html"Torna alla home page/a``

Ho inserito prima del nome del file due volte il punto fermo e la barra
(shift più 7), cioè ``"../"`` senza le virgolette.

I caratteri punto punto e barra, scritti senza spazi prima del nome del file
html, indicano al browser di andare a cercare il file nella cartella
precedente a quella nella quale si trova il file che contiene il link. In
pratica, il browser torna indietro di un livello, quindi, dalla cartella
lezioni torna alla cartella principale del sito e poi apre il file, il cui
nome è quello indicato.

Dopo tutte le indicazioni teoriche fornite, vediamo di mettere in pratica
queste nuove nozioni, andando ad operare sul file index.html e creando gli
elementi, file e cartelle, che servono.

Useremo una serie di procedure, le stesse che solitamente uso per snellire
di molto il lavoro, che comunque risulta essere molto lungo quando si
costruisce un sito scrivendo il codice a mano con il blocco note. In
pratica, si tratta di organizzare bene il lavoro, soprattutto facendo
selezione, copia e incolla, in modo da creare pagine nuove senza dover per
forza riscrivere tutto il codice della pagina, ma solo aggiornando i
contenuti o facendo le modifiche che servono.

Cosa che sicuramente già sapete, di solito tutti i siti hanno il menù di
navigazione, una testata e un footer ripetuti in tutte le pagine. Quindi, in
pratica, creeremo, per esempio, il menù di navigazione nella index.html e
poi lo copieremo in ogni pagina del sito. Andiamo con ordine e, come
spiegato nella prima lezione, andiamo a creare all'interno della cartella
principale del sito, i seguenti file:

- chi_siamo.html

- css.html

- download.html

- html_5.html

- java_script.html

- lezioni.html

Ovviamente, notate che ho scritto tutto in minuscolo e con il sottolineato
dove ci sono più parole nel nome del file.

Inoltre, sempre nella cartella principale del sito, creiamo una cartella
chiamandola lezioni.

Tenendo presente che ogni file html sarà una pagina del nostro sito, a parte
il file chi siamo, ovvio per il contenuto che avrà, gli altri file li ho
creati per i seguenti scopi:

- Il file css.html, conterrà tutte le parti che trattano esclusivamente le
spiegazioni sui file CSS e le impostazioni in essi contenute.

- Il file html_5.html, conterrà solo le parti di questa trattazione che
spiegano il linguaggio html 5.

- Il file download.html, tramite dei link appositi, consentirà di scaricare
dal sito quei software specifici e le utility per i webmaster.

- Il file java_script.html, oltre a parlare di cosa sono e come si usano i
javascript, consentirà il download di javascript specifici già pronti, da
inserire successivamente nei vostri siti.

- Il file lezioni.html, conterrà tutta la trattazione dell'HTML 5, quindi,
in ordine cronologico, tutte le lezioni, considerando entrambi i linguaggi
css e html, rispecchiando l'ordine di pubblicazione delle lezioni.

Creati i file, faremo come segue:

- Apriamo la nostra index.html con il blocco note, selezioniamo tutto il suo
contenuto e lo copiamo negli appunti con control più C.

- Apriamo singolarmente i nostri file appena creati, sempre con il blocco
note, e incolliamo all'interno il contenuto copiato nel file index.html, con
control più V.

Per ogni file, salviamo le modifiche e poi chiudiamo il blocco note.

Nota bene: consiglio di verificare sempre ogni file html, aprendolo nel
browser, procedura da effettuare subito dopo ogni salvataggio, in modo da
verificare se ci sono eventuali errori, perché, ricordate che anche il
mancato inserimento di uno spazio o la dimenticanza di un simbolo di
maggiore o minore, o altro carattere, potrebbe farvi apparire sulla pagina
web cose incomprensibili. Insomma, è buona norma prendere l'abitudine di
verificare sempre tutto all'origine, perché, la correzione fatta a
posteriori, diventa un lavoro molto oneroso.

Ricapitolando, nella cartella principale del sito abbiamo 7 file html,
compresa il file index.html, con nomi diversi ma tutti hanno lo stesso
contenuto della home page.

Prima di continuare, apriamo uno ad uno questi file e andiamo a modificare
quanto segue:

- Sostituire manualmente il contenuto della tag title, inserendo il titolo
appropriato.

- Sostituire le intestazioni di livello due nelle intestazioni iniziali
(hgroup).

- Sostituire le intestazioni di livello due all'inizio dei contenuti.

Sia la tag title, il nome della pagina che appare nella barra degli
indirizzi, sia le intestazioni di livello due, li possiamo mettere con il
testo identico. Non è una regola obbligatoria, per il momento operiamo in
questo modo, ma nei vostri siti sarete voi a decidere i contenuti delle
vostre intestazioni. Di seguito, riporto come operare in una pagina,
utilizzando il file "chi_siamo.html", poi voi ripeterete per tutte le nuove
pagine create.

``titleSito di prova in html 5/title`` Se non l'avete cambiata, questa è
la tag Title che abbiamo nel file index.html e dovete sostituire il
contenuto in questo modo: ``titleChi siamo/title``

Scendiamo e troveremo la tag hgroup che sarà: ``hgrouph1Sito html
5/h1h2Corso html per non vedenti e non solo/h2h3Il sito scritto
tutto in codice html 5/h3/hgroup``

Sostituiamo l'intestazione h2 inserendo sempre Chi siamo, quindi, il
risultato sarà:

``hgrouph1Sito html 5/h1h2Chi siamo/h2h3Il sito scritto tutto in
codice html 5/h3/hgroup``

L'ultima sostituzione bisogna apportarla nell'intestazione h2, all'interno
dei contenuti. Scendiamo nella pagina e subito dopo la tag div, troviamo
l'intestazione h2 dei contenuti. Riconoscerete la tag div da un commento a
suo tempo inserito. Sostituiamola con il nome della pagina che stiamo
modificando. In sostanza, abbiamo: ``div id="content"!-- inizio
contenuti --h2Html 5 presentazione del corso/h2``

Sostituiamo la tag h2 con il nome della pagina,quindi, avremo: ``div
id="content"!-- inizio contenuti --h2Chi siamo/h2``

Come dicevo sopra, questo è un esempio, utilizzando la pagina Chi siamo, e
tali modifiche vanno eseguite su tutti i file html che abbiamo creato,
inserendo il nome della pagina stessa. In questo modo, avremo le 7 pagine
praticamente identiche, tranne che per il loro nome, inserito nella tag
title e nelle tag h2 sopra indicate .

Vi rimando alla prossima parte, Nella quale inseriremo il menu principale,
con tutti i link corretti a queste 7 pagine.

`***********`

Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu roberto@evyweb.it`_