Formattazione di liste

Transcript

1 Formattazione di liste Con HTML si possono costruire liste puntate o numerate: Occorre definire l inizio e la fine della lista e poi definire ogni singolo elemento della lista. Le liste numerate si costruiscono con il comando <ol> </ol> Le liste non numerate col comando <ul></ul> Ogni elemento della lista e delimitato dai tag <li> </li> 446 Formattazione di liste Ora faccio una lista numerata: <ol> <li> questo è il primo elemento </li> <li> e questo è il secondo... </LI> </ol> Ora faccio una lista numerata: <ol> <li> questo è il primo elemento, diviso in due punti </li> <ul> <li> questo è uno </li> <li> questo è l altro </li> </ul> <li> e questo è il secondo... </LI> </ol> 447 1

2 Tag di testo logici e fisici Un tag fisico ha il compito di formattare visivamente un documento, cioè di renderlo grassetto, corsivo, sottolineato ecc. La funzione di questi tag non è quella di dare un aspetto al documento, ma di marcare determinati punti per definirne una struttura. Un tag logico, al contrario ha la funzione di definire una struttura indipendentemente dal suo aspetto. Ovvero, indipendentemente dal modo in cui il browser interpreterà visivamente il contrassegno. 448 Tag logici e fisici <ADDRESS> Contrassegna informazioni di indirizzo (mail, telefono ecc.) <BLOCKQUOTE> Usato per citazioni più lunghe di due o tre righe <CITE> Usato per indicare la fonte della citazione <DFN> Indica che il testo compreso è una definizione. <EM> Enfatizza il testo compreso all'interno del tag <STRONG> Enfatizza il testo 449 2

3 Inserire immagini Il comando per inserire immagini e <img> A differenza di molti editor di testo gli ipertesti non vengono "fusi" con le immagini. I documenti HTML si limitano a prevedere uno spazio al proprio interno entro il quale vanno inserite le immagini richiamate. Il tag <IMG> non ha bisogno di chiusura e la sua corretta sintassi è la seguente: <IMG SRC="immagine.gif"> Tra virgolette occorre specificare il nome dell immagine corredata dal cammino che occorre seguire per trovarla. 450 Inserire immagini: attributi aggiuntivi <img src= cammino del file align= top middle bottom left center right border= numero di pixel height= numero di pixel width= numero di pixel hspace= numero di pixel vspace= numero di pixel alt= testo alternativo > 451 3

4 Inserire immagini: attributi aggiuntivi Gli attributi WIDTH e HEIGHT permettono di definire in modo esplicito le dimensioni delle immagini Gli attributi HSPACE e VSPACE permettono di stabilire la distanza in pixel dell'immagine dagli oggetti che si trovano ai quattro lati della stessa L'attributo ALIGN definisce la posizione dell'immagine rispetto al testo posto immediatamente prima o dopo la stessa 452 Inserire immagini: formati di immagini I browser riconoscono molti (MA NON TUTTI) formati di immagini. I piu usati sono GIF e JPEG. Un altro formato diffuso e PNG (Portable Network Graphics)

5 Inserire link <a></a> a sta per anchor Ha un attributo obbligatorio, HREF,che permette di specificare a cosa punta il link: <a HREF= unime.it/>uni Messina </a> <a HREF= immagine.gif >clicca qui</a> <a HREF= ><img src= logo.gif ></a> <a HREF=mailto:mvillari@ingegneria.unime.it> scrivetemi!</a> 454 Inserire link interni al documento Inserisci il tag <A NAME="ancora"> nel punto del documento da raggiungere. ancora è il nome identificativo del punto in cui il browser dovrà visualizzare la pagina. Nel collegamento dal quale vuoi raggiungere il punto del nuovo documento inserisci la seguente sintassi: <A HREF="#ancora">Punta ad un altra parte del documento </A> Il cancelletto (#) indica che si tratta di un link interno

6 Inserire link <A HREF=" TITLE= Universita di Messina">Universita di Messina </A> questo comando permette di inserire un titolo che compare quando si passa con il mouse sulla scritta del link. 456 Inserire tabelle Definisco la tabella:<table></table> Definisco una riga : </tr> Definisco una cella: <td></td> 457 6

7 Tabelle servono moltissimo, oltre che nei casi ovvi anche quando vogliamo allineare bene il testo (i browser tendono a fare di testa propria!) <table> contenuto </table> decidete il numero di righe e colonne; ogni riga è delimitata dai tag e </tr> per ogni riga gli elementi delle colonne (celle) si delimitano con <td> e </td> 458 Tabelle: attributi <TABLE border= numero align=left center right cellspacing= numero cellpadding= numero width= numero o % > spessore della linea di bordo; mettere 0 se non vogliamo linee spazio in pixel tra celle spazio tra bordo e contenuto celle larghezza della tabella in pixel o %tuale di pagina 459 7

8 Tabelle: attributi <TR valign=top middle bottom align=left center right bgcolor= colore > allineamento orizzontale allineamento verticale colore di sfondo per la riga <TH></TH> permette di aggiungere titoli (in grassetto e centrati) <CAPTION></CAPTION> aggiunge didascalie 460 Tabelle: attributi Gli attributi di TD, TH e CAPTION sono analoghi a quelli di TR. Qui di seguito vediamo alcuni attributi aggiuntivi di TD (che vanno bene anche per TH) <TD width= numero o % colspan= numero rowspan= numero > larghezza della cella in pixel o in % di pixel numero di colonne su cui si distribuisce la cella numero di righe su cui si distribuisce la cella 461 8

9 Tabelle: esempio 1 codice <table ALIGN=CENTER BORDER=1> <CAPTION align="bottom"> Questa e' la didascalia </CAPTION> <th> Titolo della colonna1 </th> <th> Titolo della colonna2 </th> <th> Titolo della colonna3 </th> </tr> <td ALIGN=LEFT> 1 </td> <td ALIGN=LEFT> 2 </td> <td ALIGN=LEFT> 3</td> </tr> <td ALIGN=LEFT> 4 </td><td ALIGN=LEFT> 5 </td> <td ALIGN=LEFT> 6</td> </tr> <td ALIGN=LEFT> 7 </td><td ALIGN=LEFT> 8 </td><td ALIGN=LEFT> 9</td> </tr> </table> 462 Tabelle: esempio 1 effetto finale 463 9

10 Tabelle: esempio 2 codice Le tabelle sono anche molto utili per centrare le immagini, quando il browser non vuole collaborare provate la differenza fra questi due modi (su una vostra immagine a scelta ): <img align="center" src=immagine a scelta> <table align=center> <TD ALIGN=center><img align="center" src=immagine a scelta></td> </TR> </TABLE> 464 Tabelle: esempio 3 tabelle per centrare immagini e testo <table align=center border=1> <caption align=top> esempio di uso di tabelle per allineare immagini e testo </caption> <td align=center> <img align="center" src=immagine></td> <td align=center> <img align="center" src=immagine></td> </TR> <td align=center> immagine originale</td> <td align=center> immagine negativo</td> </TR> </table>

11 Tabelle: esempio 3 tabelle per centrare immagini e testo 466 Tabelle: esempio 4 <table width=100% border=1 align=center> <caption> Celle di dimensione variabile </caption> <td colspan=2 align=center> <b>mammiferi</b></td> </tr> <td align=center> <b>cani</b> </td> <td align=center> <b>gatti</b> </td> </tr> <td align=center> fido </td> <td align=center> fuffi </td></tr> <td align=center> pluto </td> <td align=center> minu' </td></tr>

12 Tabelle: esempio 5 codice <table width=80% border=1 align=center> <caption align=bottom> Tabella complessa </caption> <td rowspan=2 colspan=2></td> <td colspan=2 align=center> <b>valori</b> </td> </tr> <td align=center> <b>temperatura</b> </td> <td align=center> <b>umidita'</b> </td></tr> <td rowspan=2> <b>citta'</b></td> <td align=left> Milano </td> <td align=center> 18 </td> <td align=center> 60% </td></tr> <td align=left> Genova </td> <td align=center> 24 </td> <td align=center> 80% </td></tr> </table> 468 Tabelle: esempio