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

25. Dai un Obbiettivo a Questa Finestra

"Aggiungi un TARGET al tuo HREF"

ovvero

"Come Fare Links che Non Lasciano Indietro il Tuo Sito"

Obiettivi

Dopo questa lezione sarai in grado di:

Lezione

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

Per tutte le pagine a cui abbiamo lavorato fino ad adesso, abbiamo scritto documenti che avevano link, in modo che attraverso questi, si potessero caricare nuove pagine, sostituendo il contenuto che gia' c'era. Si, un utente puo' tornare ad una pagina usando il bottone indietro del programma oppure vai/cronologia.

Ma forse c'e' un'applicazione a cui vorresti collegarti, lasciando intatta la finestra d'origine. Una situazione come questa potrebbe essere quella in cui la prima pagina contiene una lista di link, per dire, 50 foto diverse o le definizioni in un glossario. Potrebbe essere piu' comodo se la lista rimanesse visibile cosicchÈ il navigatore possa premere su un link, vedere il contenuto e tornare semplicemente alla lista per selezionarne un'altro.

O forse la prima pagina e' parte di una lezione dove gli studenti devono visitare 5 siti diversi e rispondere a domande su ciascuno di essi-- potrebbe aiutarli a ricordare i compiti se la prima pagina rimane in vista.

In questa lezione vedremo come modificare il tag <a href=...> per specificare che il link deve essere caricato in una nuova finestra. In questo corso abbiamo creato nuove finestre con il nostro web browser -- ora possiamo vedere come fornire questa possibilita' via HTML.

Prima di cominciare, ci sono da fare alcune considerazioni. Se la tua pagina apre troppe finestre, potrebbe creare confusione. Ed in alcuni computer, la nuova finestra potrebbe oscurare completamente le altre, cosi' da non essere identificabile come una nuova browser window. Usa quindi questa caratteristica quando ha veramente senso.

L'Attributo TARGET

Il codice utile a specificare la finestra in cui visualizzare il contenuto e' tipo:
  <a href="some_url.html" target="window_name">
dove, come dalle prime lezioni href indica l'URL, sia un web address che una delle pagine del nostro sito. La parte nuova del tag e' il nome che forniamo per target=.

Possiamo dare al target qualsiasi nome; e' un identificativo internazionale per il browser. Cosa succede quando premi un link tipo:

  <a href="http://www.connect.it/procura/courseIT/likethis.html" target="tutorial">
succede che il tuo browser fa: "Hmmm. Devo prendere il codice per l'URL http://www.connect.it/procura/courseIT/tut/likethis.html, e piazzarlo in una finestra chiamata tutorial. Ahhh, non c'ho proprio nessuna altra finestra, vorra' dire che me ne creero' una nuova."

Provaci Ora.

NOTA: La prima volta che provi il link, potrebbe apparire una nuova web page in una finestra in lato. Se la chiudi e provi una seconda volta, si comportera' allo stesso modo.

Prova ancora, ma stavolta restringi solo la finestra, spostala su un lato o porta in avanti la finestra della lezione. Se fai ancora click sul link, ricarichera' la finestra, ma non la portera' in primo piano. In realta', puoi continuare a premere fino all'anno prossimo, e ti sembrera' che il link si sia rotto, mentre sta solo agendo dietro le quinte.

Il nome che metti nell'attributo target= potrebbe essere tutto. Vedremo piu' tardi che ci sono 4 nomi che hanno significati speciali:

  1. _top
  2. _self
  3. _blank
  4. _parent
Ti suggeriamo di usare nomi corti ma significativi.

Aggiungere una Finestra con Target

Useremo il nuovo codice nella nostra lezione sui vulcani. Dal nostro lavoro precedente, la pagina che descrive i Vulcani negli USA conteneva un piccolo grafico di un sismografo, che quando viene premuto, collega a una immagine piu' grande. Ora aggiusteremo il codice per fare aprire l'immagine in un'altra finestra.
  1. Apri il file usa.html.
  2. Trova entrambe le istanze in cui abbiamo collegato il file seismo.jpg:
      <a href="../pictures/seismo.jpg">
    e trasformalo in:
      <a href="../pictures/seismo.jpg" target="photo">
  3. Salva ed Aggiorna.
Ora entrambi i link dall'immagine piccola e il loro commento dovrebbero caricare l'immagine grande in una nuova finestra del browser.

Ora ti mostreremo un modo per settare l'attributo TARGET in modo che il link sia forzato ad aprire una nuova finestra ed a metterla in primo piano... usando un nome speciale "_blank". Lo svantaggio di questo approccio e' che se hai 20 link con questa caratteristica, e' possibile che poi una singola pagina sparga 20 diverse finestre. Poiche' ulteriori finestre occupano ulteriore memoria, questo potrebbe essere un viatico per un bel crash di sistema!

Ma guardiamo ora ad un caso in cui usare questa possibilita'. Nel nostro sito, la pagina per il glossario contiene l'immagine di diversi tipi di vulcano, ciascuno con un link ad un web site esterno. Sebbene il links href siano scritti diversamente perche' sono implementati nel codice che abbiamo creato per fare la mappa (lezione 23), possiamo modificarli cosi':

<map name="volcmap">
  <area shape="rect"    
     href="http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html" 
     target="_blank" coords="48,46,204,153">
  <area shape="rect" href="explode.html" 
     target="_blank" coords="0,66,26,227">
  <area shape="rect" href="height.html" 
     target="_blank" coords="95,283,378,309">
  <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/"  
     target="_blank" coords="321,154,468,261">
  <area shape="rect" href="http://stromboli.net/" 
     target="_blank" coords="172,155,318,274">
  <area shape="rect" href="http://hvo.wr.usgs.gov/volcanowatch/" 
     target="_blank" coords="36,155,168,276">
  <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/" 
     target="_blank" coords="90,3,343,123">
  </map>
Se scriviamo in questo modo, ogni link carichera' il sito in una nuova finestra. Ma visto che abbiamo una serie di collegamenti tutti con lo stesso target, possiamo usare un tag diverso per scrivere HTML con lo stesso risultato:
  <base target="window_name">
che vuol dire che tutti i link dopo questo tag saranno aperti nella finestra specificata. Ora aggiorna in questo modo il nostro file.

  1. Apri il file term.html.
  2. Dopo la linea:
      <font size=+2>Indagate su ogni tipo di vulcano premendo sulle immagini</font><br>
    aggiungi:
      <font size=-1>ogni link aprira' la sua finestra</font><br>
    Questo creera' un messaggio per l'utente perche' capisca cosa succede seguendo i link.

  3. Ora specifichiamo la finestra. Sulla linea sopra questo codice:
    <map name="volcmap">
    inserisci questo HTML:
      <base target="_blank">
  4. Salva ed Aggiorna.
    NOTA: se fai click su un qualsiasi link della mappa, la nuova finestra si apre di fronte a te. Nota cosa succede se fai click sulla parte chiamata SURTSEYAN, lascia aperta la nuova finestra e ripeti il click-- ora hai due finestre con lo stesso URL!
Ma c'e' un altro sottile problema; sotto la nostra mappa ci sono piu' link che noi non vogliamo aprano nuove finestre! Possiamo risolvere la situazione usando un altro nome speciale, "_self" che carica il nuovo URL nella stessa pagina del browser.
  1. Apri il file term.html nel tuo text editor.
  2. Dopo la fine del codice per la mappa:
      </map>
    aggiungi questa riga:
      <base target="_self">
  3. Salva ed Aggiorna.
    NOTA: Questo sovrasta il tag <base target=...">, e tutti i links seguenti si caricheranno nella finestra corrente.

Controlla il Tuo Lavoro

Confronta la tua pagina web con un esempio di come il documento dovrebbe apparire. Se la tua pagina web fosse diversa dall'esempio, o se i link non dovessero funzionare correttamente, controlla il testo che hai digitato nell'editor di testo.

Verifica

Argomenti di verifica per questa lezione:
  1. Come puoi forzare dei link ad aprire un URL in una finestra diversa?
  2. Quali sono i problemi nell'apertura di nuove finestre? Qual e' l'approccio giusto per diminuire la confusione del surfer?
  3. Come puoi agire per far aprire in una nuova finestra tutti i link dopo un certo punto? Come fai a fermare questo effetto?

Pratica Indipendente

Nella tua pagina personale, cerca posti dove avrebbe senso aprire una nuova finestra. Acquisisci esperienza nell'aggiungere il tag TARGET=.... Pensi che gli utenti capiscano cosa succede e il suo senso?

Prossimamente....

Come creare un'utile cornice per le web page... spezzettando una pagina singola in tanti utili pezzettini.
VAI A.... | Indice Delle Lezioni | indietro: "META tag" | avanti: "Framed Web Site" |

Writing HTML: Lezione 25: Dai un Obbiettivo a Questa Finestra
©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