Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di <BODY> Un elenco è una sequenza di paragrafi, ognuno dei quali puo' essere preceduto da un carattere speciale Elenco non ordinato da un numero crescente Elenco ordinato oppure anche da nulla Elenco di definizioni Come vengono descritti gli elenchi in HTML? C. Braghin - HTML, Part 2 2 1
Elenchi non ordinati - <UL> Elenchi puntati da utilizzare quando vogliamo dei punti per il nostro elenco, senza un ordine ben preciso. <UL> - (Unordered List) tag per la definizione della lista, necessita anche del tag di chiusura </UL> <LI> - (List Item) ogni elemento di lista è compreso all'interno di un elemento <LI>, il tag di chiusura non è obbligatorio CODICE: Oggi devo comprare: <UL> <LI>Mele</LI> <LI>Pere</LI> <LI>Angurie</LI> <LI>Limoni</LI> </UL> RISULTATO: Oggi devo comprare: Mele Pere Angurie Limoni C. Braghin - HTML, Part 2 3 Elenchi ordinati - <OL> Elenchi numerati da utilizzare quando vogliamo dei punti che abbiano una gerarchia o un ordine ben preciso <OL> - ordered list, anche in questo caso <OL> richiede il tag di chiusura e ogni elemento di lista è compreso all'interno di un elemento <LI> (List Item) CODICE: Per piantare un chiodo devo: <OL> <LI>Prendere martello e chiodo</li> <LI>Sollevare il martello</li> <LI>Colpire ripetutamente il chiodo col martello finché questo non è piantato</li> </OL> RISULTATO: Per piantare un chiodo devo: 1. Prendere martello e chiodo 2. Sollevare il martello 3. Colpire ripetutamente il chiodo col martello finché questo non è piantato C. Braghin - HTML, Part 2 4 2
Elenchi di definizioni - <DL> Elenchi in cui non si utilizza alcun tipo di punto, utili soprattutto per definire dei termini <DL> - definition list, tag principale che richiede il tag di chiusura; tutti gli altri tag sono inclusi al suo interno <DT> indica il termine da definire <DD> indica la definizione CODICE: <DL> <DT>Uomo</DT> <DD>Essere vivente, bipede. </DD> </DL> RISULTATO: Uomo Essere vivente, bipede. Esempio1: elenchi.html C. Braghin - HTML, Part 2 5 Esercizi (1) 1) Aggiungere alla pagina web contenente il vostro cv almeno due liste che indichino: i moduli del corso IFTS seguiti fino ad ora (nell ordine in cui li avete seguiti) i vostri hobbies 2) Creare un documento HTML all interno del quale: creare un paragrafo allineato a sinistra creare una lista di definizioni che contenga i nomi di alcune regioni italiane come elemento <DT> ogni elemento <DD> dovrà contenere una lista numerata con un elenco di città e località della regione da visitare creare un paragrafo allineato al centro che contenga un elenco numerato in cui, per ogni punto <LI> è contenuto un elenco puntato C. Braghin - HTML, Part 2 6 3
Tabelle (1) - Tag Principali Le tabelle servono per tabulare colonne di dati ma anche come contenitori per testi ed immagini per migliorarne la disposizione nella pagina (in questo caso la tabella deve essere resa invisibile) I tag principali (ed essenziali!) per creare una tabella sono: <TABLE> - tag principale che racchiude l intera tabella, opzionalemente specifica le dimensioni della tabella e ne definisce le proprietà; richiede il tag di chiusura <TR> - table raw, tag che definisce e racchiude l intera riga <TD> - table data, tag che definisce e racchiude una singola cella Nota: </TR> e </TD> sono facoltativi Intere tabelle possono poi essere a loro volta contenute in celle di altre tabelle, quindi annidate come scatole cinesi Si possono formattare le tabelle con un gran numero di attributi (bordo, larghezza, spaziatura, allineamento, ecc.) che riguardano la tabella nel suo insieme oppure le singole righe <TR> o le singole celle <TD> C. Braghin - HTML, Part 2 7 Tabelle (2) - Primo esempio tag principale <TABLE> <TR> <TD> Qui viene messo il contenuto della tabella </TD> </TR> </TABLE> tag di chiusura non obbligatori ma utili Esempio2: tabella1.html C. Braghin - HTML, Part 2 8 4
Tabelle (3) - Altri tag opzionali <CAPTION> contenuto in <TABLE> definisce il titolo della tabella puo' avere un attributo -- ALIGN -- che specifica dove va posizionato, i valori possibili sono: "top" (sopra) "bottom"(sotto) "left" (a sinistra) "right" (a destra) <TH> (table header) Contenuto in <TR> al posto di <TD> <TABLE BORDER="BORDER"> <CAPTION> titolo della tabella (facoltativo) </CAPTION> <TR> <TH> intestazione della colonna </TH> <TH> intestazione della colonna </TH> </TR> Esempio3: tabella2.html C. Braghin - HTML, Part 2 9 Tabelle (4) - Attributi Principali BORDER= n permette di impostare lo spessore del bordo perimetrale (esterno) che contorna tutte le celle facenti parte della tabella, di default il valore è 0, quindi le linee divisorie della tabella non vengono mostrate. I bordi interni hanno sempre spessore 1 quando viene definito BORDER, uguale a 0 di default la specifica HTML 4.0 definisce due attributi del tag <TABLE>, FRAME e RULES, che permettono di utilizzare delle combinazioni predefinite di bordi. Non tutti i browser riconoscono questi attributi. FRAME ha 8 possibili valori (BOX, VOID, HSIDES, VSIDES, ABOVE, BELOW, LHS, RHS) che che impostano delle combinazioni per il bordo esterno RULES ha quattro possibili valori (ALL, NONE, COLS, ROWS) che impostano delle combinazioni per le linee interne della tabella Esempio4: tabella3.html C. Braghin - HTML, Part 2 10 5
Tabelle (5) - Attributi Principali WIDTH= n permette di definire la larghezza di una tabella puo venire utilizzato anche come attributo di <TR>, <TD> e <TH> (in questo caso esiste anche l attributo HEIGHT) diverse unità di misura: valore assoluto in termini di pixel in termini percentuali BACKGROUNG e BGCOLOR permettono rispettivamente di inserire un'immagine o un colore come sfondo della tabella o del singolo elemento della tabella per assegnare uno stesso colore di sfondo a tutta la tabella l attributo BGCOLOR va specificato nel tag <TABLE> per assegnare un colore di sfondo solo ad una cella l attributo BGCOLOR va specificato nel tag <TD> o <TH> della cella in questione NOTA: tanti attributi di <TABLE> sono stati deprecati dalla versione HTML 4.0 perché l effetto è ottenibile con fogli di stile Esempio5: tabella4.html C. Braghin - HTML, Part 2 11 Tabelle (6) - Altri Attributi CELLPADDING= n specifica la quantità di spazio vuoto lasciato tra i bordi delle celle di una tabella e il dato vero e proprio in esse contenuto. Il valore viene espresso in numero di pixel, per default è 1 CELLSPACING= m specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati di una tabella (ossia fra le cornici interne delle diverse celle), e fra le celle e la cornice esterna. Il valore viene espresso in numero di pixel, per default è 2 Esempio6: tabella5.html C. Braghin - HTML, Part 2 12 6
Tabelle (7) - Attributi di <TR> L'elemento <TR> definisce una riga della tabella. Puo' prendere gli attributi ALIGN e VALIGN, che definiscono le proprietà di allineamento per le celle contenute in quella riga: ALIGN controlla l allineamento orizzontale, i possibili valori sono left, right e center (sinistra, destra, centro) VALIGN controlla l allineamento verticale, i possibili valori sono top, bottom e middle (alto, basso, centro) I valori di default sono ALIGN="left" e VALIGN="middle" Le caselle della tabella, <TD> e <TH>, possono esse stesse prendere attributi per specificare l'allineamento dei dati al loro interno. Questo sovrascrive gli eventuali attributi associati all'elemento <TR> Esempio7: tabella6.html C. Braghin - HTML, Part 2 13 Tabelle (8) - Attributi di <TD> e <TH> ROWSPAN= n e COLSPAN= m permettono di creare celle di più righe e/o colonne. di default, una casella è un intersezione tra una riga e una colonna. A volte potreste volere una casella che occupa anche la riga sottostante oppure la colonna a destra di essa. ROWSPAN indica quante righe (contando verso il basso) sono occupate dalla cella COLSPAN indica quante colonne (verso destra) occupa la cella Quando si usano questi attributi bisogna fare attenzione che in ogni riga il numero di colonne occupate corrisponda al numero effettivo di colonne della tabella, viceversa per le righe Esempio8: tabella7.html C. Braghin - HTML, Part 2 14 7
Tabelle (9) - Note Le tabelle possono essere annidate tra loro a piacere Internet Explorer accetta 3 ulteriori attributi permettono di selezionare il colore del bordo : BORDERCOLOR BORDERCOLORDARK BORDERCOLORLIGHT Gli elementi <TD> e <TH> di solito non richiedono tag di chiusura. E consigliabile farlo -- il meccanismo che gestisce la formattazione delle tabelle di solito è confuso se mancano i tag di chiusura In particolare dovreste sempre usare i tag di chiusura se usate tabelle all'interno di tabelle -- in questa situazione infatti, il browser senza tag di chiusura non riuscirà a visualizzare propriamente il vostro lavoro. Di default le tabelle non hanno bordi visibili e sono allineate a sinistra nello schermo (usare <CENTER> per centrarle) Esempio9: tabella8.html C. Braghin - HTML, Part 2 15 Immagini in <BODY> (1) <IMG> Per inserire un immagine si utilizza il tag <IMG> e il suo attributo SRC per identificare quale immagine si vuole visualizzare Non aggiunge nessuna interruzione di riga nè prima nè dopo l immagine, pertanto essa risulta visualizzata in linea con il testo (altrimenti usare <P> o <BR>, e <CENTER> se si vuole che l immagine sia centrata) Il comando completo è <IMG SRC="xxx.yyy">, dove: xxx è il nome dell immagine yyy la sua estensione. Le immagini consentite dal linguaggio html sono.gif,.jpg e.png Il nome del file deve essere relativo al file da cui viene chiamato, oppure viene dato l indirizzo assoluto nel caso in cui l immagine si trovi su di un altro server SRC="images/copper.gif" significa che l'immagine si trova in una cartella posizionata sotto quella in cui si trova il documento html che la richiama. Ovviamente, si può scendere (o salire) di tanti livelli quanto sono necessari SRC= http://www.altrosito.it/immagini/foto.jpg significa che l immagine si trova nella cartella immagini del server www.altrosito.it Esempio10: immagine1.html C. Braghin - HTML, Part 2 16 8
Immagini in <BODY> (2) - Attributi Agli attributi possibili del tag <IMG>, a parte SRC che è obbligatorio, sono: WIDTH stabilisce la larghezza dell immagine HEIGHT stabilisce l altezza dell immagine BORDER definisce l altezza del bordo intorno all immagine ALT permette di specificare un testo alternativo che viene visualizzato al posto dell immagine qualora essa non possa essere mostrata ALIGN= bottom middle top left right permette di disporre in diversi modi il testo attorno all immagine. Di default il valore è BOTTOM Esempio11: immagine2.html C. Braghin - HTML, Part 2 17 Esercizi (2) 3) Provare a scrivere una tabella con un aspetto simile alla seguente: Giorno Lunedì Martedì Mercoledì Orario 9-13 10-15 8-12 Corso Inglese Matematica Latino C. Braghin - HTML, Part 2 18 9
Esercizi (3) 4) Realizzare una tabella di 4 righe e 3 colonne, in cui: ogni riga abbia un colore di sfondo diverso la seconda riga sia costituita da una singola cella la seconda cella della terza riga abbia come sfondo un immagine a piacere la terza cella della terza riga contenga un elenco non ordinato il testo all interno delle celle della prima riga sia allineato al centro il testo all interno delle celle dell ultima riga sia allineato a sinistra C. Braghin - HTML, Part 2 19 Esercizi (4) 5) Attraverso un motore di ricerca (ad es. Google) recuperate un'immagine di alcuni pianeti del sistema solare (oppure utilizzate quelle nella cartella pianeti): creare una pagina HTML avente come sfondo una foto del cielo profondo nel corpo del testo inserire le immagini dei pianeti allineandole al centro, a destra e sinistra provare ad allineare il testo alle immagini in vario modi utilizzando gli attributi del tag IMG ciascuna immagine e il corrispondente testo deve essere separato dalla successiva tramite una linea orizzontale 6) Fare esercizio descritto in file eserciziotabella.html in cartella esercizio_tabelle. C. Braghin - HTML, Part 2 20 10