HTML 3. Liste puntate ed ordinate Immagini

Transcript

1 HTML 3 Liste puntate ed ordinate Immagini

2 Creazione di elenchi Elenchi puntati (elenchi non ordinati) Elenchi numerati (elenchi ordinati) Elenchi annidati Elenchi menu Elenchi glossario Tecnologie di Sviluppo per il WEB 2

3 Elenchi puntati L elenco deve essere compreso tra i tag <UL> </UL> Un-numbered List Ciascun elemento dell elenco deve essere compreso tra i tag <LI> </LI> List Item Tecnologie di Sviluppo per il WEB 3

4 Esempio <UL> <LI> primo elemento </LI> <LI> secondo elemento <LI> terzo elemento </LI> </UL> Tecnologie di Sviluppo per il WEB 4

5 Attributi <UL> TYPE = tipo tipo= CIRCLE, SQUARE, DISC (default) <LI> TYPE = tipo tipo= CIRCLE, SQUARE, DISC (default) VALUE = numero (solo con <OL>) Valore di partenza dell elemento della lista Tecnologie di Sviluppo per il WEB 5

6 Esempio <H1>Ingredienti</H1> <UL> <LI TYPE="DISC"> Mele</LI> <LI TYPE="CIRCLE">Farina <LI TYPE="SQUARE"> Zucchero <LI> Cannella </UL> Tecnologie di Sviluppo per il WEB 6

7 Elenchi numerati L elenco deve essere compreso tra i tag <OL> </OL> Ordered List Ciascun elemento dell elenco deve essere compreso tra i tag <LI> </LI> List Item Tecnologie di Sviluppo per il WEB 7

8 Esempio <OL> <LI> primo elemento </LI> <LI> secondo elemento <LI> terzo elemento</li> </OL> Tecnologie di Sviluppo per il WEB 8

9 Attributi di <OL> TYPE = x (indica il tipo di elenco) x = a, A, I, i, 1 Lettere minuscole Lettere maiuscole Numeri romani minuscoli Numeri romani maiuscoli Numeri START = x Indica da dove deve partire l elenco x indica un numero o una lettera Tecnologie di Sviluppo per il WEB 9

10 Attributo di <OL> e <UL> COMPACT Non assume valori Specifica che la lista dovrebbe essere mostrata in maniera compatta (deve occupare meno spazio che usualmente) Non è ampiamente supportato È deprecato Tecnologie di Sviluppo per il WEB 10

11 Esempio <OL TYPE="a"> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> Tecnologie di Sviluppo per il WEB 11

12 Elenchi annidati Non sono altro che elenchi di elenchi Una voce di un elenco può a sua volta essere un elenco di qualsiasi tipo Elenchi <UL> possono contenere elenchi <OL> e viceversa Tecnologie di Sviluppo per il WEB 12

13 Esempio Example 2: <BR> <UL TYPE= DISC"> <LI>List item 1 <LI>List item 2 <UL TYPE= CIRCLE"> <LI>List item 3 <LI>List item 4 </UL> </UL> Tecnologie di Sviluppo per il WEB 13

14 Elenchi glossario <DL> DL: Definition List Permettono di includere una descrizione di ogni termine (item) della lista <DL> </DL> Attributo COMPACT Versione compatta della lista, usato quando le definizioni sono brevi Tecnologie di Sviluppo per il WEB 14

15 Esempio Tecnologie di Sviluppo per il WEB 15

16 Tag <DT> e <DD> <DT> (tag di chiusura opzionale) Definition Term Indica che l item che è incluso tra i tag è il termine da definire <DD> (tag di chiusura opzionale) Definition Data Fornisce la spiegazione di item Tecnologie di Sviluppo per il WEB 16

17 Esempio di elenco glossario <H1> tipi di liste </H1> <DL> <DT> elenco numerato </DT> <DD> gli elementi sono numerati in sequenza </DD> <DT> elenco puntato </DT> <DD> gli elementi sono preceduti da un pallino </DD> <DT> elenco glossario </DT> </DL> <DD> ciascun elemento è seguito da una descrizione </DD> Tecnologie di Sviluppo per il WEB 17

18 Risultato Tecnologie di Sviluppo per il WEB 18

19 Le immagini Elemento text-level

20 Formati di immagine I formati delle immagini riconosciuti dai browser sono GIF Graphics Interchange Format JPEG (JPG) Joint Photographic Experts Group PNG Portable Network Graphics Tecnologie di Sviluppo per il WEB 20

21 Immagini: il tag <IMG> Bisogna specificare il percorso dove si trova l immagine da inserire <IMG SRC= Barca.gif WIDTH= 82 HEIGHT= 68 > Tecnologie di Sviluppo per il WEB 21

22 Attributi SRC= uri Indica il percorso dell'immagine da inserire. ALT= testo visualizza testo al posto dell'immagine se questa non è visualizzabile/visualizzata BORDER= numero Indicare la dimensione dell'eventuale bordo che si vuole visualizzare intorno all immagine. Tecnologie di Sviluppo per il WEB 22

23 Attributo ALIGN= pos Attributo deprecato. Specifica la posizione dell'immagine rispetto alla linea del testo dove compare LEFT: l immagine è allineata alla sinistra del testo RIGHT: l immagine è allineata alla destra del testo TOP: il testo è allineato con il margine superiore destro dell immagine MIDDLE: il testo è allineato con il centro dell immagine (leggera differenza tra IE e FF) BOTTOM: il testo è allineato con il margine inferiore destro dell immagine Tecnologie di Sviluppo per il WEB 23

24 Esempio Ci sono due paragrafi, ognuno contiene un immagine. Le immagini fanno parte del flusso normale del testo ed interagiscono con esso attraverso l attributo ALIGN Tecnologie di Sviluppo per il WEB 24

25 Attributi WIDTH specifica una larghezza predefinita per l'immagine, valore dato in punti. HEIGHT analogamente al precedente imposta un'altezza predefinita. VSPACE indica uno spazio da lasciare libero sopra e sotto l'immagine. HSPACE indica uno spazio da lasciare libero a destra e a sinistra dell'immagine. Tecnologie di Sviluppo per il WEB 25

26 Suggerimento Il browser conosce la dimensione dell immagine una volta che è stata scaricata Gli attributi WIDTH e HEIGHT servono per scalare l immagine Anche se l'immagine è più piccola o più grande In ogni caso conviene sempre indicarli il browser può calcolare il layout della pagina senza dover aspettare di scaricare tutte le immagini in essa contenute Se non si conoscono le dimensioni dell immagine, allora è sufficiente aprirla con Netscape, nella barra del titolo compaiono le sue dimensioni Tecnologie di Sviluppo per il WEB 26

27 Suggerimenti Non inserire grandi immagini all inizio della pagina Usare immagini più piccole di 40Kbyte Utilizzare GIF trasparenti Utilizzare GIF interlacciate oppure JPG progressive Usare il trucco delle immagini 1x1 con parsimonia (v. dopo) Tecnologie di Sviluppo per il WEB 27

28 Immagini e spazio Per aggiungere dello spazio tra elementi in una pagina si può Creare un immagine GIF trasparente di 1x1 pixel Inserirla nel documento e tramite gli attributi WIDTH ed HEIGHT si può lasciare uno spazio orizzontale o verticale <IMG SRC= space.gif" WIDTH=25 HEIGHT=1> <IMG SRC= space.gif" WIDTH=1 HEIGHT=38> Tecnologie di Sviluppo per il WEB 28

29 Esempio d uso di BORDER <BODY > <IMG SRC= Barca.gif" BORDER=10 WIDTH=82 HEIGHT=68> </BODY> Tecnologie di Sviluppo per il WEB 29

30 Deformazione immagini <BODY > <IMG SRC= Barca.gif" WIDTH=250 HEIGHT=38> </BODY> Tecnologie di Sviluppo per il WEB 30

31 Esempio Quando non si vuole far comparire il testo vicino l immagine, si usa <BR CLEAR= ALL"> <IMG SRC= logo.jpg" ALIGN="RIGHT"> <IMG SRC= donut.gif" ALIGN="LEFT"> <BR CLEAR="ALL"> <CENTER>Questo è del testo che segue le due immagini</center> Tecnologie di Sviluppo per il WEB 31

32 Risultato Tecnologie di Sviluppo per il WEB 32

33 Attributo CLEAR di BR <BR CLEAR="RIGHT"> e <BR CLEAR="LEFT"> subito prima del testo fanno si che tutto ciò che segue è inserito FUORI dello spazio tra le due immagini. Sono equivalenti a <BR CLEAR= ALL"> Provate a scrivere del codice in cui allineate le due immagini a destra e a sinistra ma non usate il comando <BR CLEAR="..."> per vedere cosa succede Tecnologie di Sviluppo per il WEB 33