Writing HTML | Riguardo A | FAQ | Riferimenti | Tag | Lezioni | indietro | avanti |

14. Unire vs. Dividere

Obiettivi

• Trasformare una pagina web singola in una serie di pagine web connesse
• Creare un modello per pagine web multiple
• Costruire un elemento di navigazione per la connessione di pagine web multiple

Lezione

Sei uno che unisce o che divide? Nessuno dei due? Entrambi?

Per l'organizzazione delle informazioni, certe volte e' meglio "unire" insieme le cose; altre volte e' meglio dividerle in piu' parti. Scorrere lungo pagine lunghe e larghe e' spesso tedioso. Pagine uniche ed estese prendono piu' tempo per essere caricate dai network rispetto ad una serie di pagine brevi.

In molti casi, puoi identificare i punti logici in cui "tagliare" le informazioni in pagine web multiple. D'altra parte, non c'e' nessuna formula magica, e le opinioni sono varie. Poi tirare un bilancio tra le pagine con interruzioni che creano parallelismi tra i contenuti evitando ancora al lettore di dover schiacciare su troppe schermate od opzioni e subopzioni per arrivare alle informazioni che desiderava. Diventa anche importante costruirci link ipertestuali che aiutino il lettore nel navigare attraverso la tua rete di informazioni e che forniscano al tempo stesso indicazioni visive sulla sua posizione nel web.

Fino ad ora abbiamo costruito una pagina web con un collegamento ad una breve pagina. Nella lezione 8d abbiamo creato una lista di link che funziona come una tabella di contenuti connettendoli a named anchor per le diverse sezioni della lezione Volcano Web. Le stesse divisioni potrebbero essere punti di rottura sensibili per dividere la nostra lunga pagina in sotto-pagine.

Per adesso abbiamo creato una directory chiamata volc che contiene i nostri due file HTML (index.html, la lezione, e msh.html, una seconda web page). Abbiamo anche una seconda directory chiamata pictures che contiene i nostri file grafici.

Ora andiamo a suddividere il nostro file Volcano Web singolo in una serie di web pages, unite tra loro come indicato nel diagramma. Il punto d'entrata e' una pagina principale che fa da copertina/indice, index.html che dispone di links che puntano a tutte le altre parti della nostra lezione:

• Introduzione
  [intro.html]
• Glossario
  [term.html]
• Luoghi vulcanici negli USA
  [usa.html]
• Luoghi vulcanici su Marte
  [mars.html]
• Progetti di Ricerca
  [proj.html]

O se preferisci una struttura di elenco di directory piu' classica:

struttura di file esistente	nuova struttura di file
workarea pictures lava.gif left.gif msh.gif seismo.jpg stamp.gif volcano volc.html msh.html	work area pictures lava.gif left.gif msh.gif seismo.jpg stamp.gif volc index.html intro.html mars.html msh.html proj.html term.html usa.html

NOTA: Per completare questa lezione, dovremo creare un po' di file nuovi e fare un sacco di copia&incolla dai file su cui abbiamo lavorato. Assicurati di poter saltare agevolmente da una applicazione all'altra e la finestra con il documento.

In piu', abbiamo cambiato il nome della directory/folder "volcano" nel piu' breve "volc". (Ci piace evitare che i nostri URL diventino troppo lunghi, ma se li tiriamo troppo corti poi sono criptici)

La prima cosa che faremo sara' creare un nuovo file index.html, che sara' la pagina di copertina per la nostra lezione Volcano Web:

1. Per prima cosa fai una copia del file index.html su cui hai lavorato e rinominala old.html o qualche cosa di simile. E' una buona abitudine questa nei casi in cui devi apportare grosse modifiche alle tue pagine web!
2. Ora apri la versione originale del file nel tuo text editor. E' la lezione su cui abbiamo lavorato fin qui.
3. Useremo delle figure, l'apertura di testi/quotazioni e la tabella di contenuti come soggetto del titolo della nostra pagina. Per fare questo, rimuoveremo la sezione che vogliamo dividere in altre pagine web.

   Cancella la sezione che va da Introduzione a Riferimenti, che e' tutto quello tra

     <hr>
     <h2><A NAME="intro">Introduzione</A></h2>
     Un <b>vulcano</b> e' un posto dove il magma o roccia fusa bollente
   proveniente da dentro il pianeta,
   raggiunge la superficie 
      :

   e

      :
     <dt>Lipman, P.W. and Mullineaux (eds). (1981)
     <dd><I>The 1980 Eruptions of Mount St. Helens, Washington.</I>
     U.S. Geological Survey Professional Paper 1250.
     </dl>
   

   Se vuoi, puoi confrontare il tuo file HTML con un esempio di come dovrebbe risultare a questo punto.

4. Ora guarda alla sezione intitolata "In questa Lezione..." Nel nostro lavoro precedente, abbiamo usato link ipertestuali per saltare a una sezione (per esempio <a name="term">..</a>) nello stesso documento (vedi la lezione 8a). Ora modificheremo questi anchor link in modo che ognuno salti ad un'altra pagina web (che creeremo piu' tardi).

   Trova la porzione che dice:

   <B>In questa Lezione...</B>
     <ul><i>
     <li><A HREF="#intro">Introduzione</A>
     <li><A HREF="#term">Glossario</A>
     <li><A HREF="#usa">Luoghi vulcanici negli USA</A>
     <li><A HREF="#mars">Luoghi vulcanici su Marte</A>
     <li><A HREF="#project">Progetti di Ricerca</A></i>
     </ul>

   e digita quanto segue:

   <B>In questa Lezione...</B>
     <ul><i>
     <li><A HREF="intro.html">Introduzione</A>
     <li><A HREF="term.html">Glossario</A>
     <li><A HREF="usa.html">Luoghi vulcanici negli USA</A>
     <li><A HREF="mars.html">Luoghi vulcanici su Marte</A>
     <li><A HREF="proj.html">Progetti di Ricerca</A></i>
     </ul>

   Se vuoi, puoi confrontare il tuo file HTML con un esempio di come dovrebbe risultare a questo punto.

   NOTA: assicurati di comprendere per bene la differenza tra un link scritto:

     <a href="#quest">vai alle domande</a>

   ed un altro scritto:

     <a href="quest.html">vai alle domande</a>

1. Nel tuo editor, crea un nuovo file chiamato temp.html
2. In questo file, inserisci il seguente codice HTML (se vuoi, puoi copiare un modello d'esempio):

   HTML	Appunti
   <html> <head> <title>XXXXXXXX</title> </head> <body>	TESTA: nella porzione di testa di ogni documento, XXXXXXXX e' il nome della sezione
   <H5>Volcano Web / <A HREF="index.html">Indice</A> / <A HREF="xxxx.html">indietro</A> / <A HREF="xxxx.html">avanti</A></H5>	NAVIGAZIONE: nella parte superiore di ogni pagina useremo una piccola intestazione (h=5) per creare i link per la navigazione. L'Indice punta indietro alla pagina principale, quella che fa da copertina. I link avanti ed indietro sono per la pagina precedente e quella successiva. Devi completare con i nomi giusti dei file dove c'e' xxxx.html. Nota come questo fornisca una semplice indicazione visiva per raggiungere ciascuna delle nostre pagine web.
   <h2>XXXXXXXX</h2> : : :	HEADER: Usa un header=2 per mettere il titolo alla pagina.
   <hr> <ADDRESS> <b><A HREF="index.html"> Writing HTML</A> : XXXXXXXX </b><p> creato da Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A> <br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>ultima modifica: 1 Agosto, 1999</TT> </ADDRESS> <p>	ADDRESS FOOTER: Nota che viene ora creato il fondo pagina per indicare il nome della principale pagina web (a cui si connette) e una riga di testo che indica il nome della sezione corrente XXXXXXXX. Posizionare qui il nome della pagina aggiunge un altro importante aiuto per l'orientamento all'interno della struttura che andiamo creando.
   <tt>URL: http://www.bigu.edu/web/xxxxxxxx.html </tt> <p <body> </html>	URL: Assicurati di modificare la riga che indica l'URL del documento in modo che rifletta il suo nome xxxxxxxx.html

3. Ora dovresti fare 5 copie del file modello ed apportare le modifiche appropriate al modello:

   Nome File	Sezione	Appunti
   intro.html	Introduzione	Dato che e' questa e' la prima sezione, rimuovi la riga dalla sezione di navigazione: <A HREF="xxxx.html">indietro</A>
   term.html	Glossario
   usa.html	Luoghi vulcanici negli USA
   mars.html	Luoghi vulcanici su Marte
   proj.html	Progetti di Ricerca	Dato che questa e' l'ultima parte, rimuovi questa riga dalla sezione di navigazione: <A HREF="xxxx.html">avanti</A>

4. Ora apri il vecchio file index.html (che abbiamo rinominato old.html) nel tuo text editor. Per ciascuno dei nuovi file, dovrai copiare il codice HTML che e' era subito sotto l'intestazione di questa sezione <h2>...</h2> ed incollarlo nei nuovi file che hai creato nella fase precedente. Nota che Luoghi vulcanici negli USA e Progetti di Ricerca includono entrambi sottosezioni che hanno intestazioni <h3>...</h3>.
5. In fine, dovrai modificare il link nel file msh.html. In precedenza, esso ritornava ad una named anchor nella lezione che lo precedeva (la sezione per Luoghi vulcanici negli USA), ora dovrebbe collegare al file usa.html. Apri il file msh.html nel tuo text editor e digita la seguente riga:

     <a href="usa.html"> 
     <img src="../pictures/left.gif" alt="** "> 
     Ritorna a 
     <i>Volcano Web</i></a>

   Solo per essere coerenti, dovresti creare un footer simile a questo:

   <HR>
   <ADDRESS>
   <B><A HREF="index.html">
   Volcano Web</A> : <A HREF="usa.html">
   Luoghi vulcanici negli USA</A> : 
   Mount St. Helens</B> <p>
   
   creato da Lorrie Lava, 
   <A HREF="mailto:lava@pele.bigu.edu">
   lava@pele.bigu.edu</A><br>
   Volcanic Studies, 
   <A HREF="http://www.bigu.edu/">
   Big University</A><p>
   <TT>ultima modifica:  1 Agosto, 1999</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/msh.html</tt>
   
   </body>
   </html>

Controlla il Tuo Lavoro

Verifica

1. Quali sono alcuni dei vantaggi del creare pagine multiple e corte rispetto a una sola pagina molto lunga?
2. Cosa sarebbe successo se non avessimo modificato il link nel file msh.html?
3. Quali sono state gli elementi per la navigazione che abbiamo aggiunto alla nostra lezione?

Informazioni Aggiuntive

links "fai click qui"
Nella primavera del 1980, molte delle persone che abitavano nelle vicinanze del Monte St. Helens presero con molta attenzione gli avvertimenti degli scienziati su un'imminente eruzione vulcanica. (Fai click qui per vedere un'immagine di Monte St. Helens). D'altra parte, molti insistevano per rimanere nelle loro abitazioni e furono tristemente uccisi nell'evento del 18 Maggio. In quello stesso anno, concreti aumenti nei dispositivi di rilevazione sismica portarono gli esperti a valutare la possibilita' di un evento simile a Long Valley, California, e ad ordinare un'ampia evacuazione della localita' di soggiorno del Mammoth. (Fai click qui per vedere un sismometro). D'altra parte, dato che non era accaduto nessun disastro, i residenti si risentirono aspramente per quello che percepivano come un falso avvertimento che era costato una grave perdita dal lato economico.
link integrati
Nella primavera del 1980, molte delle persone che abitavano nelle vicinanze del Monte St. Helens presero con molta attenzione gli avvertimenti degli scienziati su un'imminente eruzione vulcanica. D'altra parte, molti insistevano per rimanere nelle loro abitazioni e furono tristemente uccisi nell'evento del 18 Maggio. In quello stesso anno, concreti aumenti nei dispositivi di rilevazione sismica portarono gli esperti a valutare la possibilita' di un evento simile a Long Valley, California, e ad ordinare un'ampia evacuazione della localita' di soggiorno del Mammoth. D'altra parte, dato che non era accaduto nessun disastro, i residenti si risentirono aspramente per quello che percepivano come un falso avvertimento che era costato una grave perdita dal lato economico.

Pratica Indipendente

Ora chiedi ad alcuni amici/colleghi di vedere le tue pagine. Preferiscono le pagine "divise" o quelle "unite"? Possono raggiungere facilmente un compromesso sull'argomento?

Prossimamente....

VAI A.... | Indice Delle Lezioni | indietro: "Blockquote" | avanti: "HTML Standard e Migliorato" |