Il linguaggio HTML - Parte 4

Transcript

1 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 4 Dott. Chiara Braghin braghin@dti.unimi.it HTML - I Riferimenti Ipertestuali Il piatto forte di tutto il WWW sono i riferimenti ipertestuali (link) in una pagina WEB c'è sempre qualcosa che si può cliccare con il mouse, normalmente riconoscibile dal colore diverso e dalla sottolineatura, e che: ci fa apparire un altro documento ci fa aprire una finestra di composizione di un messaggio all'indirizzo specificato ci fa apparire un suono o un video, ecc.. Il riferimento può essere anche all'interno del nostro documento Il riferimento può essere inoltre l'indirizzo di una persona C. Braghin - HTML, Part 4 2 1

2 Riferimenti ipertestuali - <A> Un'anchor è una parte di testo o un qualsiasi altro oggetto (ad esempio un immagine) che segna l'inizio e/o la fine di un link ipertestuale <A> è usato per definire questa parte di testo (o immagine), e assegnargli una relazione ipertestuale con un altro documento richiede sempre anche il tag di chiusura il testo contenuto tra i due tag, <A> testo </A>, puo' essere la partenza o la destinazione (o entrambe) di un link C. Braghin - HTML, Part 4 3 Riferimento ad un altro file In questo caso <A> indica la partenza di un link Necessita dell attributo HREF= indirizzo_riferimento HREF definisce l'anchor <A> come l'inizio di un link ad un altro documento o risorsa (potrebbe puntare, ad esempio, ad un immagine), o ad un particolare punto dello stesso documento Puo avere anche l attributo TARGET=_blank che indica al browser di aprire la pagina web richiesta in una nuova finestra link ad immagine Foto aerea di <A HREF=http// Prego, tornare alla <A HREF=../index.html>Pagina principale</a>. Tornare alla <A HREF=index.html#sez2>Sezione 2</A> del capitolo. link ad un punto di un documento link ad un altro documento C. Braghin - HTML, Part 4 4 2

3 Nota sugli indirizzi per HREF L'indirizzo del documento a cui si riferisce il link puo' essere un URL assoluto o relativo gli indirizzi relativi possono essere usati per accedere a risorse che si trovano sullo stesso server del documento corrente -- cioe', quello che stiamo visualizzando. In questo caso dovete solo specificare dove si trova il documento da accedere relativamente a quello corrente Un indirizzo assoluto ha in seguente formato: protocollo porta Nome del file <a href= Sorgente del link </a> HREF puo' usare il protocollo http per accedere ad altri documenti HTML, immagini, etc. oppure il protocollo ftp o gopher. Puo' anche indicare una connessione telnet. C. Braghin - HTML, Part 4 5 Esempi di indirizzi assoluti per HREF <A HREF=" di Genova</A> protocollo Indirizzo internet del server <A HREF=" Generale</A> protocollo indirizzo Internet del server Percorso assoluto C. Braghin - HTML, Part 4 6 3

4 Link destinazione In questo caso <A> indica la destinazione di un link Necessita dell attributo NAME= nome NAME definisce l'anchor <A> come la possibile destinazione per un link che si trova in un altro documento o in qualche punto del documento corrente il valore assegnato a NAME si chiama etichetta l'etichetta puo' essere una stringa arbitraria, ma deve essere unica all'interno del documento Come accedere ad anchor etichettate? usando HREF: se si tratta di un riferimento all interno della stessa pagina, basta assegnare ad HREF il nome dell'etichetta, preceduto da '#' se si tratta del un riferimento ad un etichetta di un altro documento, basta aggiungere il nome dell etichetta all URL del documento dove si trova, separati da '#' C. Braghin - HTML, Part 4 7 Riassunto sui riferimenti ipertestuali Punti precisi all'interno di un documento HTML possono essere marcati come destinazioni per link ipertestuali attraverso l'attributo NAME: <A NAME=sez2> Sezione 2 </A> Se vogliamo puntare a questa zona da un altro documento nella stessa directory: <A HREF="doc.html#sez2">(vedi Sezione 2)</A> Se vogliamo invece puntare a questa zona da un altro documento in un altro server: <A HREF= http//altroserver.it/docs/doc.html#sez2">(vedi Sezione 2)</A> Esempio1: link1.html C. Braghin - HTML, Part 4 8 4

5 Link interni al documento - <A NAME=..> Link interni allo stesso documento: si usa l attributo NAME del tag <A> Articolo 1 <A HREF="#art1">Articolo1</A> Articolo 2 <A HREF="#art2">Articolo2</A> Articolo 3 <A HREF="#art3">Articolo3</A> Articolo 20 Articolo 1 <A NAME="art1"></A> Articolo 2 <A NAME="art2"></A>. C. Braghin - HTML, Part 4 9 Riferimento ad un indirizzo di posta In questo caso <A> indica la partenza di un link un po particolare cliccando il quale si apre una finestra che consente di spedire un messaggio di posta elettronica L attributo HREF viene assegnato ad un valore particolare: <A HREF="mailto:braghin@dti.unimi.it"> braghin@dti.unimi.it </A> C. Braghin - HTML, Part

6 Immagine come riferimento Se vogliamo, possiamo usare un immagine come link <A HREF=" <IMG SRC= logo.gif" WIDTH=82> </A> In automatico viene messo un bordo azzurro attorno all immagine per specificare che si tratta di un link per eliminare il bordo basta impostare BORDER=0 Esempio2: link2.html C. Braghin - HTML, Part 4 11 Attributi del tag <BODY> - Link LINK indica il colore di tutti i link della pagina. Per default questo colore è blu (blue) #0000ff. <BODY LINK="green"> <BODY LINK="#006600"> VLINK indica il colore di tutti i link, dopo che questi sono stati visitati. Per default questo colore è porpora (purple) # <BODY VLINK="green"> <BODY VLINK="#006600"> ALINK indica il colore di tutti i link attivi, il colore al momento del click su di esso. Per default questo colore è rosso (red) #ff0000. <BODY ALINK="green"> <BODY ALINK="#006600"> C. Braghin - HTML, Part

7 Esercizi (1) Scrivete una pagina HTML con due link. Uno esterno, verso un sito a scelta, l'altro interno, verso una seconda pagina HTML. La seconda pagina HTML deve contenere una tabella con 4 celle: ogni cella deve avere uno sfondo di colore diverso ogni cella deve contenere un elemento di tipo diverso 1. un elenco puntato 2. un'immagine 3. un link ad una nuova pagina C. Braghin - HTML, Part 4 13 Esercizio (2) Scrivere un documento HTML con un immagine come sfondo Modificare il colore del testo e dei link in modo da renderli piu visibili all interno della pagina C. Braghin - HTML, Part

8 Esercizi (3) Per questo esercizio è necessario reperire le risorse nel proprio computer o in Internet, copiarle nella propria cartella: creare 2 documenti HTML chiamati page1.html e page2.html creare all'interno della cartella del vostro sito: una cartella doc contenente un file word chiamato file.doc una catella immagini contenente diversi file.gif o.jpg nel primo documento (page1.html) deve essere presente una lista puntata contenente i link a 5 sezioni etichettate di page2.html in page2.html: 1. deve essere presente una tavola dei contenuti (indice iniziale) che rimanda alle varie sezioni (paragrafi) all interno del documento stesso e una serie di link che rimandano all'inizio della pagina alla fine di ogni sezione 2. all interno dei paragrafi di ogni sezione deve essere presente un'immagine: nella sezione 1 l'immagine deve avere un link a file.doc nella sezione 2 l'immagine deve avere un link a un sito web nella sezione 3 l'immagine deve avere un link a un inidirizzo nella sezione 4 l'immagine deve avere un link a page1.html C. Braghin - HTML, nella Part 4sezione 5 l'immagine deve avere un link ad un immagine15 della cartella immagini Esercizi (4) Fare una pagina che assomigli il più possibile (immagini a parte) alla seguente: C. Braghin - HTML, Part

9 Esercizi (5) Create un documento HTML chiamato index.html che contenga la descrizione del sistema solare in index.html deve essere presente una tavola dei contenuti (indice iniziale) costruita come lista che rimanda alle varie sezioni (paragrafi) (tramite i riferimenti interni) e una serie di ancore (link interni) che rimandano all'inizio della pagina alla fine di ogni sezione. Le sezioni devono essere separate da una linea orizzontale (tag HR) All'interno dei paragrafi di ogni sezione deve essere presente un'immagine Il testo di ciascun paragrafo deve essere di colore e font diverso Ad ogni immagine si deve associare un link (cioe' cliccando sull'immagine si seguira' il link corrispondente) Nell ultima sezione deve apparire una tabella contenente tutte le immagini che compaiono nel documento. A ciascuna immgine si deve associare un link all immagine corrispondente all interno del documento C. Braghin - HTML, Part