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

8a. Collegare a File Locali

Puo' un mio documento parlare ad un altro dei miei? Beh, al massimo possono essere collegati tra loro!

Obiettivi

Dopo questa lezione sarai in grado di:

Creare un link ad un altro documento HTML nella stessa directory/folder del tuo documento principale.
Creare un link per visualizzare un'immagine grafica.
Creare un link ad un file in una diversa directory/folder rispetto al tuo documento principale.
Riorganizzare la struttura del tuo web.

Lezione

Ora, faremo il primo passo nel tuo percorso di apprendimento dell'"anchoring", della creazione di ancore, creando un link ipertestuale ad una seconda web page. Questi collegamenti sono detti "locali" perche' essi risiedono nello stesso computer del documento in uso (non devono avventurarsi fuori, nella Rete). Ci insinueremo anche nelle varie parte del tuo sito web nascente (vedi come diventa subito piu' di una "home page"?).

Nota: Se non hai i documenti di lavoro dalla lezione precedente scaricane una copia ora.

Collegare a File Locali

L'ancora piu' semplice e' quella che apre un altro file HTML nella stessa directory di quella attualmente visualizzata sulla pagina web. Il codice HTML per fare questo e':


     <a href="filename.html">testo che corrisponde al link</a>

Pensa a questa formattazione come se al posto della "a" ci fosse ancora e al posto di "href" "hypertext reference" (riferimento ipertestuale).

Il filename deve essere un altro file HTML. Qualsiasi sia il testo dopo il primo simbolo > e dopo il simbolo di chiusura </a> sara' l'ipertesto che appare sottolineato ed "iper."

Ora segui queste indicazioni per costruire un collegamento ad ancora ad un file locale nel tuo documento HTML:

Apri il tuo documento, volc.html, nel text editor.
Primo, sotto il titolo Luoghi Vulcanici negli USA, digita il seguente testo che introduce i due vulcani di cui si parla nella sezione successiva.
```
     Elencati sotto i due luoghi negli Stati Uniti 
     che sono considerati zone vulcaniche "attive".
```

Sotto il titolo "Mount St. Helens", digita:


     Il 18 Maggio 1980, dopo un lungo periodo di riposo,
     questa tranquilla montagna nella provincia di Washington, 
     forni' <a href="msh.html">
     osservazioni</a> dettagliate sul meccanismo 
     delle eruzioni altamente esplosive.

Il testo "osservazioni" colleghera' il visitatore al secondo documento HTML chiamato msh.html. Questo secondo file non esiste ancora; lo costruiremo ai punti (5) e (6).

Salva e chiudi il tuo documento HTML
Ora, col tuo text editor, apri una finestra per un Nuovo documento.

Digita il seguente testo nella nuova finestra:


     <html>
     <head>
     <title>Mount St Helens</title>
     </head>
     <body>
     <h1>Mount St Helens</h1>
     I torreggianti pini di questa tranquilla 
     montagna furono sradicati come giocattoli
     </body>
     </html>

Salva questo file come msh.html nella stessa directory/folder del tuo file HTML operativo (Volc.html).
Aggiorna Volc.html nel tuo web browser.
Testa il link ipertestuale per le parole "osservazioni". Quando selezionata, dovrebbe connetterti alla nuova pagina su Mount St. Helens.

Collegamento a Grafici

Nella lezione 7a, abbiamo imparato come visualizzare immagini inlinea nella nostra web page. Con Il tag anchor, puoi anche creare un collegamento per visualizzare un file grafico. Quando il link viene selezionato, il browser scarichera' il file dell'immagine e lo visualizzera' automaticamente in una pagina vuota o lancera' un'applicazione esterna "helper" di sostegno che possa visualizzare l'immagine.

Il link ad ancora piu' semplice che ci sia e' quello verso un file della stessa directory/folder del documento che lo richiama. Il codice per creare un link ipertestuale e' uguale a quello che abbiamo imparato sopra, per collegarsi ad un altro documento HTML:


  <a href="filename.gif">testo che corrisponde al link</a>

dove filename.gif e' il nome del file dell'immagine GIF.

Ora segui queste indicazioni per aggiungere un link ad un file grafico nel tuo documento HTML:

Primo, avrai bisogno di scaricare una copia di un'immagine GIF dal Centro Per Il Download delle Immagini Lezione 8a.
Apri il file msh.html nel text editor.

Modifica il testo per includere un link all'immagine di Mount St. Helens.


     I torreggianti pini di questa tranquilla montagna 
     furono <a href="msh.gif">sradicati 
     come giocattoli</a>.

Salva il documento HTML ed Aggiorna il tuo web browser.
Ora premi sul link che abbiamo appena creato al passaggio (3).
Un'immagine di alberi abbattuti dovrebbe apparire.

Link ad altre directory

I tag anchor posso collegare anche a file HTML o grafici che sono in un'altra directory/folder rispetto al documento che contiene il link. Per esempio, nella nostra lezione, potremmo voler tenere tutti i grafici in una directory/folder separata chiamata pictures. Man mano che crei sempre piu' file HTML, conservare i file d'immagine nella loro area dedicata rendera' le cose un po' meno caotiche. Facciamolo adesso:

Dal tuo computer system, crea una sub-directory/folder chiamata pictures nella stessa posizione dove e' conservato il file Volc.html.
Sposta il file msh.gif in questa nuova sub-directory/folder.
Apri il file msh.html nel tuo text editor.
Digita il tag anchor per i grafici in modo che sia:
```
     I torreggianti pini di questa tranquilla montagna 
     furono <a href="pictures/msh.gif">sradicati 
     come giocattoli;/a>.
```
NOTA: Con HTML puoi fare in modo che il tuo browser apra qualsiasi documento/grafico in una directory di livello inferiore (per esempio, una sub-directory o folder interna alla directory/folder che contiene il file HTML operativo) usando il carattere "/" che indica il cambio ad una sub-directory chiamata "pictures."

Se tutto va per il verso giusto, il link nella frase che descrive gli alberi abbattuti dovrebbe richiamare il file grafico conservato nella sub-directory/folder pictures.

Link ad Una Directory di Livello Superiore

I tipi di link che abbiamo costruito fino a questo momento sono conosciuti come link "relativi", con il significato che un web browser puo' costruire l'URL completo partendo dalla corrente allocazione della pagina HTML e le informazioni contenute nei tag <a href=...>. Questo e' molto utile perche' si puo' costruire tutte le tue pagine su di un computer, provarle, e spostarle tutte su un altro computer -- con tutti i relativi link rimasti intatti.

In questa lezione abbiamo visto come costruire un hyperlink verso un documento che e' conservato in una directory inferiore a quella dove e' posto la pagina HTML che stiamo usando. Nota che puoi anche costruire un link che connetta a una directory di livello superiore usando lo stesso codice HTML:

  <a href="../../home.html">ritorna a casa</a>

Ad ogni istanza di "../" l'URL di un link ad ancora suggerisce al web browser di andare ad una directory/folder di livello superiore rispetto a quella della pagina corrente; in questo caso di andare su di due livelli di directory/folder e di cercare un file chiamato home.html.

Nel nostro esempio, diciamo che la nostra sub directory pictures non era nella stessa directory/folder del file volc.html ma che era attualmente ad un livello superiore.

diagramma directory Nella sezione precedente abbiamo costruito un link dal file volc.html al file msh.gif in una subdirectory:

  <img src="pictures/msh.gif">

Ora, noi vogliamo riorganizzare la struttura del nostro web in modo che la folder/directory pictures sia al livello piu' alto. Il link e' ora scritto:

  <img src="../pictures/msh.gif">

cosi' il web browser crea una cartellina chiamata "pictures" che e' contenuta un livello piu' su del nostro file volc.html.

Un vantaggio di questa struttura che dovrebbe essere piu' semplice conservare una grande quantita' di grafici nella folder/directory superiore, che puo' essere condivisa da altre web page. Noi dovremmo fare un'altra lezione sulle formazioni terrose che fa uso delle immagini conservate in questa folder/directory.

Allora, adesso e' ora di dare una piccola riorganizzatina ai nostri file HTML. Questo richiede che tu abbia familiarita' con lo spostamento di file e di directory in giro per il tuo computer. Leggilo attentamente! Sembrera' che tutto si complichi da un momento all'altro, ma si mettera' tutto a posto subito!

Primo, crea una nuova folder/directory e chiamala volcano (ci raccomandiamo ancora di tenere tutti i nomi dei file in minuscolo).
Ora, muovi i due file HTML volc.html e msh.html nella nuova folder/directory.
Sposta la folder/directory pictures (con ancora il file msh.gif dentro) cosi' che sia allo stesso livello della nuova volcano folder/directory. Poi, sposta il file lava.gif che abbiamo aggiunto nella lezione 7a nella cartellina pictures.
Cosi' facendo l'intera tua directory workarea dovrebbe contenere ora due subdirectory -- una che contiene i tuoi file HTML (volcano) e l'altra che contiene i grafici (pictures):
Abbiamo spostato alcune cose da una parte all'altra cosi' adesso dobbiamo aggiornare i collegamenti nei nostri file HTML. Primo, guarda al primo link locale che abbiamo costruito nel file volc.html file:
```
  <h3>Mount St Helens</h3>
  Il 18 Maggio 1980, dopo un lungo periodo di riposo,
  questa tranquilla montagna nella provincia di 
  Washington, forni'<a href="msh.html">
  osservazioni</a> dettagliate sul meccanismo 
  delle eruzioni altamente esplosive.
```
NOTE: Dal momento che il file msh.html e' ancora nella stessa directory relativa di volc.html, non dobbiamo cambiare una sola virgola del codice HTML! Ora ti rendi conto di come la connessione relativa dei file sia una degli aspetti piu' potenti dell'HTML?
Ma guardiamo ora il link alla figura di Mt. St Helens che abbiamo creato nel file msh.html:
```
  I torreggianti pini di questa tranquilla montagna furono
  <a href="pictures/msh.gif">sradicati come giocattoli</a>.
```
Apri questo file nel tuo text editor e digita il link come segue:
```
  I torreggianti pini di questa tranquilla montagna furono 
   <a href="../pictures/msh.gif">sradicati come giocattoli</a>.
```
I link relativi informano il browser che deve salire di un livello rispetto alla folder/directory corrente (volcano) e qui cercare un'altra folder/directory chiamata pictures che contiene un'immagine GIF chiamata msh.gif
Dovrai aggiornare il tag <img... che visualizza il titolo del grafico. Apri il file volc.html nel tuo text editor e modifica la riga appena sotto il tag <body> in questo modo:
```
  <img alt="Una Lezione Su:" src="../pictures/lava.gif" width=300 height=259>
```
Salva il tuo file. Ora dovresti Aprire il file volc.html nel tuo web browser e verificare il link a msh.html e quindi provare il link alla figura di Mount St Helens.

Una Piccola Modifica

Quest'ultimo passettino potrebbe non essere ovvio, ma ci spiegheremo in poche parole. L'ultima cosa che dovresti fare in questa lezione e' quella di cambiare il nome del file che stai usando adesso: da volc.html a index.html. Dovresti farlo usando il modo normale con cui si inserisce il nome di un nome dal computer desktop (su Macintosh fai click sul nome del file; su Windows fai click con il tasto destro del mouse sull'icona e seleziona l'opzione Rinomina). Un'ulteriore nota per gli utenti Windows e' che se si usa un programma di editor speciale per creare file HTML, non si vedranno le estensioni ".html" nel nome del file sul desktop, e cosi', in questo caso, dovrai cambiare il nome del file da volc a index perche', nonostante non sia visibile, il computer sa che c'e' un ".html" alla fine.

Perche' lo stiamo facendo? Diciamo che hai finito la lezione e che sei pronto per caricare i tuoi lavori su un server web e permettere al mondo di vederli. E assumiamo che l'indirizzo Internet per questo server presso la Big University sia:

    http://www.bigu.edu/

E che il tuo file sia conservato in una serie di director:


--= livello piu' alto del server: www.bigu.edu
   /courses
        /science
            /geology
                /volc.html

in questo modo l'URL di Volcano Web potrebbe essere:

    http://www.bigu.edu/courses/science/geology/volcano/volc.html

Abbastanza lungo, eh? Ecco qui la spiegazione promessa -- sulla maggior parte dei server WWW si puo' designare un nome standard alla pagina web di "default" per questa directory, quella predefinita, e su molti sistemi questo nome e'.... index.html. Questo significa che l'indirizzo Internet e':

    http://www.bigu.edu/courses/science/geology/volcano/

equivale a

    http://www.bigu.edu/courses/science/geology/volcano/index.html

Questo ti potrebbe portare a pensare che tagliare via 20 lettere sia costato un sacco di fatica! Ma questo accorgimento rende il tuo URL un po' piu' professionale -- Se tu stessi creando l'home page di Longhorn Cheese,

    http://www.cheese.com/longhorn/

sembra meno ridondante di

    http://www.cheese.com/longhorn/longhorn.html

che viene tirato in ballo quando la gente e' incuriosita dal tuo sito, legge qualche cosa a proposito del tuo URL e cerca di connettersi digitandolo direttamente nel loro web browser.

Nota anche che questo nome di file speciale index.html e' usato nella maggior parte dei server ma potrebbe anche essere default.htm -- controlla con le persone che usano il tuo stesso web server.

Controlla il tuo Lavoro

Paragona la tua web page con un esempio di come il documento dovrebbe apparire. Se vuoi, puoi vedere prima la tua pagina Volcano Web. Quando fai click sull'ipertesto osservazioni, il tuo web browser visualizzera' una nuova pagina. Finalmente, quando fai click su sradicati come giocattoli, il tuo web browser visualizzera' in una finestra esterna un file grafico che e' conservato in una sub folder/directory.

Use il bottone indietro del due volte per tornare a questa pagina. Se la tua pagina fosse diversa da quella dell'esempio, ricontrolla il testo che hai digitato nel text editor.

Verifica

Quali passi hai compiuto per creare nel tuo documento un link ad un file locale?
Quali passi hai compiuto per creare un link che visualizzi un grafico in una finestra web esterna?
Come hai creato un link ad un file che e' in una directory/folder inferiore rispetto al tuo documento principale? o in una directory superiore?
Qual e' il significato di un file chiamato index.html su un WWWW server?

Pratica Indipendente

Crea un secondo documento HTML che usi il codice con cui ti sai familiarizzato proprio adesso. Ritorna al primo che hai creato e disponi un'ancora che li colleghi tra loro.

Prossimamente....

Wow! Abbiamo fatto un sacco di cose! Nella prossima lezione imparerai come usare il codice HTML per collegarsi a risorse "fuori da qui", su Internet.

VAI A.... | Indice Delle Lezioni | indietro: "Ancore" | avanti: "URL" |

Writing HTML: Lezione 8b: Collegare a file Locali
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The Internet Connection at MCLI is Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing HTML