Corso html 5. Di Roberto Abutzu. `***********` Ottava parte: I link, seconda parte. `**********` I link, seconda parte.

Transcript

1 Corso html 5. Di Roberto Abutzu. `***********` 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

2 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 e chiuso con. - 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.

3 - 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>`` ``<h1>menu di Navigazione</h1>`` ``<ul>`` ``<a href="index.html">home Page</a>`` ``<a href="chi_siamo.html">chi Siamo</a>`` ``<a href="lezioni.html">lezioni</a>`` ``<a href="html_5.html">html 5</a>``

4 ``<a href="css.html">css</a>`` ``<a href="download.html">download</a>`` ``<a href="java_script.html">java Script</a>`` ``</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 e chiedere ulteriori spiegazioni a chiarimento di questo scritto. Ecco la stringa: ``<address><a href="mailto:roberto@...">roberto@...</a></address>``

5 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 , 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, ``mailto:``. 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 , 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>``

6 ``<dt>created by: </dt>`` ``<dd> ``<dt>webmaster</dt>`` ``</dl>`` Ecco il risultato di come dovrà essere dopo aver modificato il codice: ``<dl>`` ``<dt>created by: </dt>`` ``<dd><a href=" ``<dt>webmaster</dt>`` ``<dd><address><a ``</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 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,

7 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. `***********`

8 Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu