html58
Corso html 5, ottava lezione.
oberto Abutzu su uiciechi.it 2013-05.
Ottava parte: I link, seconda parte.
`**********`
I link, seconda parte.
Continuiamo la parte che completerà la trattazione dei link, andando ad operare direttamente sulla
pagina index.html e creando il menu principale del nostro sito.
Partiamo dal presupposto che già sono state completate le modifiche ai 7 file che abbiamo creato
fino ad ora.
Vedremo il menu principale, nel quale inseriremo i link completi dell'indirizzo al quale puntano.
Nota bene: vorrei sottolineare che questi link verranno ulteriormente modificati successivamente,
quando inseriremo altri due attributi: title e accesskey. Solo allora potremo definirli completi.
Comunque, andiamo per ordine e impariamo prima a creare i link tradizionali, perché gli attributi
vengono aggiunti a seconda della funzione dei link e non è detto che in tutti i link debbano
esserci gli attributi.
Inseriamo il menu principale. Però, prima facciamo una parentesi. Quando si comincia a creare un
sito creando le pagine manualmente come stiamo facendo noi, questa è la prima operazione che viene
eseguita, ma non credete che se si usa un software non sarà la stessa cosa. Il layout del sito,
quindi disposizione degli elementi, menu di navigazione, immagini e colori, vanno scelti a priori,
quindi in ogni caso devono essere eseguite queste scelte prima di iniziare. Ciò premesso, facciamo
come segue:
All'interno della tag Nav, avevamo in precedenza inserito un elenco non ordinato (ul), con le voci
del menu in ogni elemento. Ora, apriamo la nostra index.html con il blocco note e cancelliamo tutte
gli elementi che ci sono all'interno di questa tag. Precisamente, cancelleremo tutto quello che
troviamo tra ``nav e /nav``, facendo attenzione a non cancellare la tag che apre e chiude la nav.
Quindi, ``nav`` e ``/nav`` devono rimanere. Per nostra comodità, tra la apertura e la chiusura
della tag nav, creiamo qualche riga vuota.
Eseguita la cancellazione come spiegato, a partire dalla riga vuota che segue l'apertura della tag
nav, cominciamo a scrivere di nuovo la lista non ordinata (ul), inserendo tutto il menu principale,
compreso gli indirizzi di ogni singolo file che rappresentano le pagine html relative.
Per una vostra comodità, vi ho già inserito qui sotto il menu completo. Questo non significa che
dovete fare un copia ed incolla del menu, cosa che significherebbe sicuramente non imparare, ma per
poter leggere con calma la composizione completa di ogni link ed imparare, andando a scriverlo
piano piano nella vostra index.html dopo averlo letto. Quando più memorizzate gli elementi di ogni
link, più imparate a crearli senza problemi e senza dover per forza fare un copia ed incolla ogni
volta.
Se mi posso permettere di consigliare, a partire dalla riga che segue quella della tag iniziale
della nav, iniziate a scorrere carattere per carattere, cercando di memorizzare di volta in volta
le varie stringhe complete dei vari elementi.
Per capirci, facciamo prima una panoramica sul da farsi, dando una spiegazione del lavoro da fare:
- Dopo l'apertura della tag nav, consiglio di mettere una intestazione uno (h1), mettendo come
testo di questa intestazione: Menu di Navigazione.
- Apriamo dopo l'intestazione la nostra lista ( ul).
- Essendo una lista, ogni elemento al suo interno viene aperto con la tag ``li`` e chiuso con
``/li``.
- All'interno di ogni elemento (li), quindi tra queste due tag, dovrete inserire un singolo link
del menu.
- Dopo aver concluso con l'ultimo link che è java script, chiudete la tag della lista non ordinata
con ``/ul``, e accertatevi che la tag nav sia correttamente chiusa.
Completato il lavoro, salvate le modifiche e provate ad aprire ogni singolo link, aprendo il file
index.html, la home page, ed usando i link. Ovviamente non potrete tornare indietro, in quanto,
nelle altre pagine, non abbiamo ancora inserito il menu principale, quindi, ogni volta, dopo aver
verificato ogni singolo link, basta chiudere e riaprire la index.html.
Quando tutto sarà funzionante e dopo aver verificato che tutte le pagine si aprono, potremo
riportare, con un copia ed incolla, tutto il menu in tutte le altre pagine. Per farlo, sarà
sufficiente fare come segue:
- Aprire il file index.html in modifica.
- Selezionare e copiare tutto il menu principale, comprese le tag di apertura e chiusura del menu
di navigazione (nav).
- Inserirlo nelle altre pagine al posto di quello presente che comprendeva il menu senza i link,
aprendo in modifica uno ad uno i file html, cioè le altre pagine del sito.
- Fatto tutto questo, aprite la index.html con Internet Explorer e provate a navigare tra le pagine
del sito.
Nota bene: in caso di errore, aprite il file con il blocco note e controllate le stringhe per
individuare e correggere l'errore.
Ecco il menu principale del nostro sito:
``nav``
``h1Menu di Navigazione/h1``
``ul``
``li``
``a href="index.html"Home Page/a``
``/li``
``li``
``a href="chi_siamo.html"Chi Siamo/a``
``/li``
``li``
``a href="lezioni.html"Lezioni/a``
``/li``
``li``
``a href="html_5.html"HTML 5/a``
``/li``
``li``
``a href="css.html"CSS/a``
``/li``
``li``
``a href="download.html"Download/a``
``/li``
``li``
``a href="java_script.html"Java Script/a``
``/li``
``/ul``
``/nav``
``br /``
``br /``
Ho inserito due ritorni a capo: ``br /``, per lasciare un po' di spazio tra la tag nav e la tag dei
contenuti. Da notare che le righe vuote lasciate in un codice html non vengono interpretate dai
browser, quindi, come se non ci fossero.
Ed ecco il Link di invio posta.
Questo tipo di link che spesso incontriamo nelle pagine web, permette l'invio di un messaggio di
posta aprendo il proprio browser di posta predefinito direttamente dalla pagina web. Con l'attuale
versione del linguaggio html 5, sono state aggiunte delle tag che identificano meglio alcuni
elementi di questo link, tra cui anche gli indirizzi di posta.
Per capire, facciamo subito un esempio pratico, creando un link al mio indirizzo di posta
elettronica. Tra l'altro, nel caso vi occorresse, potrete utilizzarlo per inviarmi una email e
chiedere ulteriori spiegazioni a chiarimento di questo scritto. Ecco la stringa:
``addressa href="roberto@evyweb.it"Roberto@evyweb.it/a/address``
Due tag caratterizzano ed identificano questo tipo di link:
1. La tag ``address``, da inserire all'inizio e alla fine, come tutte le tag, aperta e chiusa.
Naturalmente la chiusura è la medesima tag, con l'aggiunta della solita barra, shift più 7, dopo
il segno di minore.
2. La seconda è una tag di link, come quelle viste sopra. Da notare che all'interno delle
virgolette, dove normalmente risiede l'indirizzo del link, è inserito l'indirizzo email , assieme
ad un altro comando.
In sostanza, il link ed il suo attributo href vengono così composti:
- Apriamo il link ``a`` ed uno spazio, dopo l'apertura della tag address.
- Dopo lo spazio, aggiungiamo l'attributo href un segno di uguale ed un segno di virgolette,
quindi, ``href="``.
- Dopo le virgolette di apertura, inseriamo il comando mailto ed un segno di due punti, quindi,
````. Questo comando fa si che il browser identifica correttamente
l'indirizzo di posta elettronica che segue e che stiamo creando un link di invio posta.
- Sempre senza spazi, aggiungiamo l'indirizzo di posta completo.
- Chiudiamo le virgolette per chiudere l'attributo href e inseriamo il maggiore per chiudere la tag
di apertura del Link.
- Dopo la tag di apertura del link, segue il testo che viene visualizzato a schermo sulla pagina
web, quindi, possiamo scrivere quello che vogliamo. Per esempio, è possibile scrivere l'indirizzo
di posta completo,oppure le varie scritte che si usano solitamente, come Scrivimi, contattami,
mandaci una mail, eccetera. Insomma, tutto a vostra discrezione. Personalmente preferisco sempre
inserire di nuovo l'indirizzo di posta, anche se così facendo, corro il rischio che venga
intercettato dagli spammer in automatico. Inserendo come testo l'indirizzo email, se ci fossero
problemi con il programma di posta, è possibile fare un copia ed incolla direttamente dal testo a
schermo e incollare in un messaggio di posta.
- Rimane ora solo di chiudere la tag link e la tag Address, quindi, aggiungiamo ``/a/address``.
Visto la teoria, mettiamo subito in pratica, modificando il file index.html, la Home Page,
inserendoci anche questo link.
Nella parte precedente, nel footer, vi avevo fatto inserire una lista di definizione con al suo
interno due link non funzionanti. Per imparare, li renderemo funzionanti, inserendo il codice
completo dove manca. Il codice della lista di definizioni precedente era:
``dl``
``dtCreated by: /dt``
``ddwww.evyweb.it/dd``
``dtWebMaster/dt``
``ddRoberto@evyweb.it/dd``
``/dl``
Ecco il risultato di come dovrà essere dopo aver modificato il codice:
``dl``
``dtCreated by: /dt``
``dda href="www.evyweb.it"EvyWeb/a/dd``
``dtWebmaster/dt``
``ddaddressa href="roberto@evyweb.it"roberto@evyweb.it/a/address/dd``
``/dl``
In questo caso, in tutte le pagine, bisogna fare solo una modifica ai due elementi della lista che
devono essere i due link presenti in questa lista e che servono ad indicare nel footer il sito e
l'indirizzo email del Webmaster.
Detto in parole molto povere, nel primo link viene inserito l'indirizzo completo di un mio sito e
nel secondo viene inserito nel link il mio indirizzo di invio posta completo, e compreso le sue tag
address viste sopra.
Per avere sempre disponibili ed a portata di mano una lista di indirizzi di posta, come
precedentemente vi ho consigliato di crearvi un file che contiene tutti gli indirizzi Web da voi
preferiti, magari da inserire in una pendrive per averli sempre disponibili, la stessa cosa è
possibile farla per gli indirizzi di posta elettronica che volete avere sempre con voi.
Per evitare però di portarvi dietro tutta una pagina completa come la index che stiamo costruendo
poco a poco e che ora è già diventata abbastanza consistente, completa anche del menu principale
del sito, è sufficiente creare una copia della index.html e da quella ricavare una nuova pagina,
cancellando tutto quello che non ci serve, magari cancellando tutto il contenuto del body. Poi,
all'interno della tag body, possiamo inserire una lista non ordinata con tanti elementi li e tanti
link per tutti gli indirizzi di posta che vogliamo avere sempre disponibili nella pagina html che
stiamo creando. Volendo, proprio per semplificare al massimo, potete anche aprire un file di testo
con il blocco note, inserire le tag: ``html`` e ``body``, comprese le loro chiusure alla fine, e
all'interno del body creare una lista con i vostri indirizzi di posta che volete inserire. E'
sicuramente una ottima idea per esercitarsi ed apprendere il codice mentre si fa pratica con cose
utili.
Può succedere, e credetemi, accade più spesso di quanto potete pensare, che qualche link non
funzioni o che non apre la pagina corretta. Niente di anomalo, anzi, Cominciate ad abituarvi ad
entrare nell'ottica che l'errore, quando si lavora con il codice scritto manualmente, è frequente.
Però, con il tempo e la pratica, poi, si creano anche degli automatismi, ma soprattutto si diventa
così esperti da non sbagliare più, se non in rari casi, quindi, tutto diventa semplice.
L'errore può capitare non solo al dilettante, ma anche ad un professionista. Quando accade, mai
demoralizzarsi, anzi, pensare che solo sbagliando si impara a non sbagliare più. Solo all'inizio ci
vuole pazienza e cercare l'errore analizzando il codice con calma e, credetemi, anche gli errori
diventano un buon esercizio per imparare a non sbagliare più.
Dall'esperienza fatta, generalmente si tratta sempre di errori banali. Per esempio, uno spazio di
troppo, un segno di minore al posto di un segno di maggiore, e cose simili. All'inizio ci sembrerà
talmente difficile da credere di diventare matti per un errore del genere, ma vi renderete conto da
soli che con la pratica diventa tutto molto semplice.
All'inizio, non dovete mai demoralizzarvi, ci sono passato prima di voi, quindi, accettate questi
errori come effetti collaterali di chi usa scrivere del codice di programmazione a mano. Pensate
inoltre che più esercizi di scrittura di codice fate, prima ridurrete quasi a zero questi errori.
Vi rimando alla prossima parte, Nella quale inizieremo a conoscere in modo particolareggiato di
cosa è composto un link sulla stessa pagina, con le Ancore di riferimento. Inoltre, vedremo due
attributi per tutti i link: Title e accesskey. Il secondo, sarebbero i tasti rapidi che spesso
troviamo nelle pagine web per raggiungere in modo diretto i link principali della pagina e che
rendono più accessibili i siti da parte di chi usa solo la tastiera.
`***********`
Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu ``roberto@evyweb.it```_
Torna all'indice