Olga Scotti. Esercizi. Create nella vostra directory HTML un albero di directory come quello della prossima slide (arancio = directory verde = file)

Transcript

1 Esercizi Create nella vostra directory HTML un albero di directory come quello della prossima slide (arancio = directory verde = file)

2 Esercizi 12biz htdocs img Index.html Canzoni.html Galleria.htm guestbook velasquez motore beachmoon Messaggi.html Batteria.jpg Chitarra.jpg Basso.jpg mdb-database mailinglist guestbook scalette news

3 Esercizi 1. Alla pagina Index.html mettete uno sfondo arancio chiaro, testo blu, inserite come titolo della pagina 12biz, digitate come H1 Gruppo rock blues, e poi in un paragrafo giustificato la storia del gruppo mettendo una parola in grassetto, una in corsivo e una sottolineata 2. Alla pagina Canzoni.html mettete un immagine di sfondo, come titolo della pagina Le nostre canzoni, inserite un elenco puntato con i quadratini e elencate almeno 5 canzoni, aggiungete una linea orizzontale larga il 70% dello schermo

4 Esercizi 3. La pagina Galleria.html ha titolo Le nostre foto, scriveteci dentro che le foto arriveranno prestissimo mettendo la scritta allineata al centro con un div, come font impostate l Arial rosso di dimensione 4 4. Impostate per tutte le pagine html il linguaggio italiano 5. Nella pagina Messaggi.html mettete come titolo I nostri fans e poi un H2 rosso Lasciateci un messaggio!

5 Link: testi o ipertesti? I link sono il ponte che consente di passare da un testo all altro. I link sono formati da due componenti: 1. La parte visibile del link, da cliccare 2. La risorsa verso cui il collegamento punta

6 Sintassi Il sito delluniversità <a href= >di Crema</a>

7 Link a documenti La documentazione <a href= relazione1.doc >sul progetto</a> 1. Il file deve essere nella stessa directory del file html o bisogna specificare il percorso 2. Il file verrà aperto se c è un programma in grado di farlo

8 Link per download Tutto <a href= prgsistemi.zip >il progetto</a> per un link a un file che non sia un documento (.zip.exe) viene proposto di fare il download

9 Albero di un sito Man mano che il nostro sito web cresce sarà opportuno dividere il sito in varie sezioni, in modo da avere tutti i documenti dello stesso tipo all interno di un contesto omogeneo. In pratica ogni sezione sarà una directory

10 Esempio 12biz htdocs img Index.html Canzoni.html Galleria.htm guestbook velasquez motore beachmoon Messaggi.html Batteria.jpg Chitarra.jpg Basso.jpg mdb-database mailinglist guestbook scalette news

11 Percorsi relativi Si usano per fare riferimento a documenti situati nel vostro stesso sito I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento

12 File nella stessa directory Se i file si trovano nella stessa directory, basta scrivere il nome del file (come abbiamo visto prima) Supponiamo di fare un collegamento da Index.html a Canzoni.html ascolta qui le nostre <a href= canzoni.html >canzoni</a>

13 Directory di livello inferiore Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, basta nominare la cartella seguita dallo slash (eventualmente anche più livelli), e poi il nome del file. Per esempio per fare un link da Index.html a Messaggi.html Per lasciarci un <a href= guestbook/messaggi.html > messaggio</a>

14 Livello superiore Per tornare su di un livello, è sufficiente utilizzare la notazione:../nomefile.html Per esempio per tornare da Messaggi.html a Index.html Torna all <a href=../index.html > home page</a>

15 Navigazione in ogni senso Grazie a questi accorgimenti potete agevolmente navigare all interno delle directory del vostro sito: se ce ne fosse bisogno potrete per esempio tornare su di un livello rispetto alla posizione del file, scegliere un altra cartella, e poi scegliere un altro file:../altracartella/nuovofile.html

16 Percorsi assoluti Scopri le risorse <a href= > dell acquario di Genova</a> Per creare un collegamento assoluto è sufficiente copiare l url che vedete scritto nella barra degli indirizzi. I percorsi assoluti si usano per lo più, quando si ha la necessità di fare riferimento a file situati in siti esterni.

17 Percorsi assoluti Si usano percorsi assoluti anche per utilizzare i database Il percorso sarà del tipo d:\inetpub\webs\12bizit\mdb-database\gb.mdb

18 Link a una mail <a href= mailto:oscotti@dti.unimi.it > Mandami un </a>.

19 Link: normali, visitati, attivi I link secondo le impostazioni predefinite sono blu, per cambiare colore: <body link="red"> Per cambiare colore ai link visitati (di default viola): <body vlink="green"> Per cambiare colore ai link attivi: <body alink="yellow"> La sintassi completa per impostare i link è quindi: <body link="red" alink="yellow" vlink="green">

20 Nomi dei file è consigliabile non lasciare spazi vuoti nei nomi dei file maiuscole e minuscole possono fare la differenza (in ambiente Unix LA fanno), quindi controllate il modo in cui avete scritto i nomi dei file quando create un collegamento state attenti a non avere una notazione simile a questa: <a href="file:///c percorso\nomefile.html">testo</a> significa che state facendo un riferimento (assoluto) al vostro computer: chiaro che quando metterete i file nel vostro spazio web, le cose non funzioneranno più.

21 Link interni È possibile anche creare un indice interno al documento, utilizzando le àncore. Per esempio fare un indice in cui ogni voce porta all inizio del capitolo.

22 Destinazione del link Per ognuno dei punti in cui vogliamo vada a finire un link interno dobbiamo posizionare un segnalibro. <a name= cap1 > inizio </a> N.B. Non c è la sottolinatura come nei link! L utente non si accorge che lì c è un segnalibro.

23 Partenza del link <a href= #cap1 >Capitolo primo</a> il cancelletto indica che il collegamento deve cercare un àncora chiamata cap1 all interno della pagina stessa.

24 Link fasulli Se non si specifica il nome dell àncora a cui si vuol puntare, viene comunque creato un link che punta ad inizio pagina. Ad esempio: <a href= # >link vuoto</a>

25 Esercizio Cercare la favola di Pinocchio ( Mettere i segnalibri sulle parole 1. C era una volta inizio 2. La casa di Geppetto casa 3. La storia di Pinocchio col grillo parlante grillo 4. Pinocchio vende l'abbecedario abbecedario Aggiungere l indice con i link interni all inizio del file Olga Scotti

26 Attributi dei link: target Di default la pagina viene aperta all interno della stessa finestra è possibile specificare che la pagina sia aperta in una nuova finestra: <a target= _blank href= >visita il sito dei libri gratuiti</a>

27 Attributi dei link: title L attributo title serve a dare una spiegazione su dove porterà il link. Questa spiegazione addizionale favorisce l accessibilità del sito anche ai disabili, alle persone per esempio che hanno disturbi alla vista. Se lasciate il cursore del mouse per qualche secondo su un collegamento dotato di title, vedrete comparire una specie di etichetta con il testo specificato nel title: <a title= libri gratuiti in formato elettronico target= _blank href= >visita il sito dei libri gratuiti</a> cioè: L'attributo "title" è anche utilissimo per migliorare la propria presenza nei motori di ricerca, che ne vanno a leggere il contenuto.

28 Attributi dei link: hreflang Con hreflang si indica la lingua del documento: si tratta di un attributo che migliora l accessibilità del sito, oltre ad essere potenzialmente utile per i motori di ricerca : Nel sito del <a href= hreflang= eng target= _blank >Word Wide Web Consortium</a> puoi trovare le specifiche dell HTML in lingua inglese

29 Link di base I percorsi relativi fanno di norma riferimento alla directory in cui si trova il file HTML che stiamo scrivendo. Se vogliamo far riferimento a un differente percorso per tutti i percorsi relativi, dobbiamo specificare nella head del documento: <base href= >

30 Colorare i link Per colorare solo alcuni link della pagina in modo diverso annidare il tag <font> all interno del link: <a target= _blank href= > <font color= red size= 2 face= Verdana, Arial, Helvetica, sans-serif > visita il sito dei libri gratuiti</font></a>