aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Link ipertestuali

 

Il Web esiste grazie al concetto di ipertesto mediante il quale diversi documenti possono essere consultati in ordine libero sfruttando collegamenti reciproci. Questi ultimi prendono il nome di collegamenti ipertestuali e consentono di saltare da una posizione all'altra nella stessa pagina, da una pagina a un'altra dello stesso sito e da un sito all'altro. Basta cliccare sul link e si viene immediatamente proiettati verso la destinazione richiesta.

Esistono due modi per inserire un link ipertestuale in una pagina Web: nella forma di testo e nella forma di immagine. In entrambi i casi, si sfrutta lo stesso marcatore, denominato ancora il quale a sua volta esiste in due varianti. La più comune prende il nome di ancora sorgente perché identifica il punto di partenza del collegamento e ne fornisce la descrizione della destinazione. È il classico link che troviamo nella maggior parte delle pagine Web e sul quale clicchiamo per saltare a un'altra pagina. La seconda variante è invece l'ancora di destinazione utile per marcare il punto di arrivo di un particolare link all'interno della pagina. La si usa solitamente per creare link a porzioni interne dello stesso documento oppure per fare in modo che la pagina richiamata da un link esterno si apra in corrispondenza di un particolare paragrafo, anziché alla prima riga.

Ancore sorgente
Il testo o l'immagine che delimitano il "punto caldo" (hot spot) del collegamento sorgente, cioè il punto da cliccare, sono racchiusi tra i tag <a> e </a>. La destinazione del link è invece indicata mediante l'attributo href (hypertext reference) che può contenere un collegamento relativo (pertinente al sito in cui già ci troviamo) oppure assoluto (diretto a un sito esterno). All'interno di un sito, la gran parte dei link saranno relativi, vale a dire che indicheranno la posizione del documento di destinazione in relazione alla directory principale del sito (collegamento relativo completo) oppure in relazione al documento di partenza (collegamento relativo indiretto o diretto – vedi l'articolo "Collegamenti assoluti e relativi" nella seconda lezione).

Prendiamo ad esempio il collegamento che dalla home page del nostro corso porta alla prima pagina della quinta lezione: <a href="Lezione_5/Lezione_5.htm">quinta lezione</a> vediamo che la frase che comparirà sulla pagina è "quinta lezione" e quando ci cliccheremo sopra, si aprirà la pagina "Lezione_5.htm" che si trova nella cartelletta "Lezione_5" collocata un livello sotto alla cartelletta in cui ci troviamo al momento. Esistono vari altri attributi, ma il più importante è target che specifica dove inviare la nuova pagina che stiamo per aprire. È un attributo indispensabile nei frame, come vedremo più avanti, ma torna utile anche quando vogliamo inserire un link esterno e non vogliamo che il navigatore abbandoni il nostro sito. In tal caso basterà impostare target="_blank" per far aprire al browser una nuova finestra in aggiunta a quella da cui siamo partiti. In alternativa è anche possibile aprire una nuova finestra e assegnarle un nome di fantasia: target="pippo". In questo caso la nuova pagina verrà aperta in una nuova finestra denominata "pippo". Da notare che esiste tuttavia una differenza sostanziale tra "_blank" e "pippo". Il primo determinerà ogni volta l'apertura di una nuova finestra che si aggiungerà a quelle già presenti. Il secondo invece invierà qualsiasi altra nuova pagina nella stessa finestra, sostituendo il contenuto esistente.

Nel caso di link applicati a un'immagine la sintassi rimane la stessa salvo aggiungere il marcatore <img>. Vediamo un esempio sempre tratto dal nostro corso: <a href="Lezione_5/Lezione_5.htm"><img src="Lezione_5/immagine.gif" width="100" height="100" border="0"></a> ci dice che cliccando su "immagine" nella pagina corrente saremo trasportati nella pagina Lezione_5.htm che si trova nella cartelletta Lezione_5 subito sotto di noi. Notate che la coppia di tag <a> e </a> racchiude completamente il marcatore <img> con tutte le informazioni relative all'immagine. Tra gli attributi previsti da quest'ultimo notiamo border che serve a bordare l'immagine con una cornice blu per indicare che vi è associato un link ipertestuale (prerogativa solitamente non usata per motivi estetici).

Ancore di destinazione
Le ancore di destinazione sono usate abbastanza di rado. È infatti preferibile comporre documenti brevi che puntino ad altri documenti altrettanto brevi che non creare pagine interminabili che necessitino di riferimenti interni. In ogni caso, queste ancore possono tornare utili in alcune situazioni. La loro caratteristica essenziale consiste nell'identificare un punto del documento come destinazione di un collegamento origine. Tale punto può coincidere con un qualsiasi elemento HTML (paragrafo, titolo), con un brano di testo (anche semplicemente uno spazio bianco) oppure con un'immagine. La sintassi da usare nel caso di un elemento HTML è la seguente <h1 id="pippo">brano di testo </a>. Si sfrutta l'attributo id tipico delle versioni più recenti di HTML per identificare l'elemento a cui vogliamo puntare. Nel caso invece di un brano di testo o di un'immagine, la sintassi sarà la seguente: <a name="pippo">brano di testo o immagine</a>. In entrambi i casi il link sarà invisibile nella finestra del browser e non sarà cliccabile proprio perché si tratta di una destinazione e non di un'origine. Avrete notato che nei due esempi abbiamo inserito un nome di fantasia (pippo) che ci servirà per puntare all'ancora di destinazione dall'interno di un'ancora di origine. Supponiamo di voler creare un link in cima al documento che faccia scorrere il testo nella finestra fino a raggiungere l'ancora di destinazione. La sintassi sarebbe <a href="#pippo">testo da cliccare</a>. Notate che abbiamo usato il simbolo di cancelletto prima di "pippo" per indicare che si tratta del nome di un'ancora di destinazione. Nel caso di un link contenuto in un documento esterno la sintassi sarebbe: <a href="documento.html#pippo">testo da cliccare</a>. Il documento.html si aprirà nella finestra del browser esattamente nel punto contrassegnato dall'ancora "pippo".

La terza variante di link ipertestuale ci consente d'identificare esplicitamente che le parole che seguono corrispondono a un indirizzo di posta elettronica e che perciò, cliccandovi sopra, sarà possibile inviare un messaggio direttamente a quel destinatario. Si tratta di una funzione molto usata per facilitare il contatto con il gestore del sito o con altre persone. La sintassi è la seguente: <a href="malto:pippo@pippo.com">pippo</a> quando il navigatore cliccherà su "pippo" gli si aprirà automaticamente il programma di posta e nella casella del destinatario comparirà l'indirizzo "pippo@pippo.com".

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
1. Elemeni di Web design
  1. La ruota colore del Web
2. Grafica per il Web
  1. Eclettico GIF
  2. Trasparenza e animazione
  3. JPEG per le fotografie
  4. PNG tuttofare
3. Link ipertestuali
4. Tabelle d'immagini
5. Mappe immagini
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits