HTML

1. HTML Lezione 8 I collegamenti ipertestuali (link)

2. Collegare le risorse web • I collegamenti ipertestuali (hyperlink o link) sono l'essenza del Web. • Il comportamento associato predefinito con un collegamento è il recupero di un'altra risorsa Web. • Per risorsa Web si intende un file (esempio: una immagine, un video clip, un suono, un programma, un documento HTML, un elemento in un documento HTML, ecc.) che il link fa richiedere al browser, comunemente tramite la selezione del collegamento con un click del mouse su di esso.

3. Meccanismo di collegamento • Senza i collegamenti, l'utente dovrebbe digitare l'URL della pagina che vuole visitare nella casella degli indirizzi del browser. • Data la natura e la lunghezza di molti URL, ciò diventerebbe estremamente complicato e soggetto ad errori di battitura. • Un link ha due estremi, detti ancore (anchor) ed una direzione. • Il link inizia in un ancora “sorgente”, che solitamente è un testo o un’immagine della pagina che vengono resi dal browser attivi al click del mouse • un'ancora di "destinazione", che può essere una qualunque risorsa Web, individuata dal collegamento mediante il suo URL (indirizzo).

4. L’elemento A • Il principale elemento HTML che definisce un link è l'elemento A (iniziale di anchor). • Il contenuto dell'elemento A può essere del testo, un'immagine o più elementi. • Il contenuto dell'elemento è quello che l'interprete HTML (browser) traccia sulla pagina rendendolo sensibile al passaggio del mouse su di esso (il puntatore diventa una mano) e al clic del mouse (il clic attiva il collegamento). • Il tag finale </A> (obbligatorio) chiude l'elemento • Esempio<A >testo o immagine</A>

5. Attributi dell'elemento A • Nel tag iniziale dell’elemento A possono essere definiti alcuni attributi, tra i quali i due più usati sono: • HREF (valore un URL) L'attributo HREF (acronimo di Hypertext REFerence - riferimento ipertestuale) specifica l'URL (indirizzo) di una risorsa Web che diventa l'àncora di destinazioneNota Per gli indirizzi del file linkato, valgono le stesse regole viste per l'inclusione di file immagini (vedi) • TITLE (valore una stringa)questo attributo ha come valore la frase che si desidera far vedere come tip quando il mouse si sposta sul collegamento • Esempio:<A HREF="www.google.it" TITLE="Collegati al motore di ricerca"> Google</A>

6. Tipo di risorsa collegata • I browser reagiscono diversamente a seconda del tipo di risorsa collegata • Se la risorsa collegata è un file HTML, cioè una pagina web, questa viene caricata nella stessa finestra del documento che contiene il link (a meno che non venga diversamente specificato nel target). • Se la risorsa è un file immagine, questa viene visualizzato dal browser stesso, che possiede, ovviamente, i filtri grafici per visualizzarla (viene messo in una pagina con sfondo bianco). • Se la risorsa collegata è un file multimediale (audio, video), il browser vede se nella macchina c'è un player che può riprodurre il file e, in tal caso, lo riproduce. In caso contrario, il comportamento può essere diverso; ad esempio può iniziare il download della risorsa. • Un collegamento ad un file applicativo (doc, xls, pdf, ecc) apre nella finestra del client file il programma apposito per visualizzarlo (se c'è sulla macchina del client). • Un collegamento ad un file zip o exe visualizzano, di norma, la finestra che chiede all'utente se intendono scaricare il file collegato nel disco locale.

7. Il target di un collegamento • Se non viene specificato diversamente, l'elemento A carica la risorsa collegata nella stessa finestra dove è contenuto il link. • L'HTML dà la possibilità di visualizzare la risorsa collegata (destinazione) in finestre diverse da quella in cui vi è l'ancora sorgente. • Questo viene realizzato con l'attributo TARGET, che viene inserito nel tag iniziale dell'elemento A assegnandogli come valore una stringa speciale. • Questo attributo specifica il nome di un frame (finestra) in cui un documento deve essere aperto. • Tra i vari nomi di destinazione riservati al target del collegamento il più usato è: _blank : il browser HTML carica il documento indicato in una nuova finestra senza nome. • Esempio:<A HREF="prova.htm" TARGET="_blank">si apre in una nuova finestra del browser</A>

8. Stili CSS per l’elemento A • A differenza degli altri elementi HTML, l'elemento A (link) fa in modo che informazioni esterne influenzino il processo di formattazione: ad esempio, il testo viene tracciato in colore diverso e sottolineato; quando il mouse va sopra il contenuto dell'elemento, il puntatore cambia forma; quando il collegamento è già stato visitato una volta, il browser gli cambia colore. • Gli stili CSS permettono di cambiare le caratteristiche di formattazione dell'elemento A. • Si usano delle istruzioni particolari (pseudo-classi), che si definiscono nello stile della pagina, facendo seguire al nome dell'elemento A due punti (:) e le parole chiave che indicano lo stato del link. A:link { proprietà CSS } /* link non ancora visitati*/ A:visited {proprietà CSS } /* link visitati*/ A:active {proprietà CSS} /* link attivati, cioè l'utente ha fatto click su di esso con il mouse */ A:hover {proprietà CSS } /* link sorvolati, cioè l'utente ci sta passando sopra con il mouse */

9. Un esempio di stile • Utilizzando i vari CSS per il testo ed i contenitori si possono ottenere effetti molto gradevoli per i link. Un esempio • Vedere l’HTML per capire lo stile.