Capitolo 1: Introduzione

Transcript

1 HTML Taibi Davide Capitolo 1: Introduzione

2 Sommario La struttura di un documento HTML I tag di testo e blocco I Collegamenti Le Immagini I Colori Le Tabelle 2 Davide Taibi

3 Introduzione ad HTML (1) Il linguaggio HTML è un tipo di documenti SGML (esiste un DTD di HTML). HTML viene usato dai browser WWW per visualizzare documenti ipertestuali. Tramite HTML è possibile realizzare documenti con una semplice struttura, con aspetti grafici anche sofisticati, con testo, immagini, oggetti interattivi e connessioni ipertestuali ad altri documenti Fino ad oggi i browser si sono preoccupati poco della correttezza sintattica o strutturale dei documenti HTML. Questo significa che tra un documento HTML visualizzabile da un browser WWW ed un documento HTML corretto esistono differenze anche sensibili. 3 Davide Taibi

4 Introduzione ad HTML (2) È normale associare un significato strutturale agli elementi definiti in un DTD. HTML associa anche significati grafici agli elementi che definisce. Cioè dà istruzioni più o meno precise su come rendere graficamente gli elementi che definisce. Questo porta anche ad abusi della resa grafica che a noi interessano poco. Per noi la resa grafica finale, in assenza di linguaggi di stile appropriato, è secondaria. HTML non forza strutture gerarchiche nei suoi documenti. Inoltre in HTML i vincoli di contenimento tra elementi sono pochi e piuttosto ovvi. I browser WWW sono ancora più lassisti, a questo proposito, del linguaggio stesso. 4 Davide Taibi

5 Principali aspetti di HTML Tipi di dati: colori, lunghezze, URL ecc. Struttura dei documenti HTML Elementi per testo e liste Link, oggetti inclusi ed immagini Tabelle Fogli di stile e script Form Frame Aspetti presentazionali (font, allineamenti, HR) 5 Davide Taibi

6 6 Tipi di dati (1) Colori In molte situazioni (sfondi, caratteri, ecc.) è possibile specificare un colore. HTML fornisce due modi per farlo: Codice RGB prefissato da un carattere di hash. Si usano due caratteri esadecimali ciascuno per esprimere la quantità di Rosso, Giallo e Blu del colore (00 significa assenza, FF significa presenza massima). E possibile descrivere quindi 4096 colori diversi. Nome: sono definiti 16 nomi di colori: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua. N.B. Microsoft definisce 256 nomi di colori, che IE accetta, ma che Netscape ignora. Questo causa incompatibilità tra i browser. <font color= #FF0000 >testo in rosso</font> <body bgcolor= # > sfondo teal </body> <td bgcolor= yellow >sfondo giallo</td> Davide Taibi

7 Tipi di dati (2) Tuttavia HTML 4.01 depreca l uso esplicito di colori nel documento HTML, e suggerisce di usare invece dei fogli di stile. Lunghezze HTML usa le lunghezze per tutti gli oggetti con una presenza sulla pagina di dimensioni determinate (immagini, tabelle, frame, ecc.) Si usano tre tipi di lunghezze: Pixel: una dimensione in punti di schermo. Percentuali: una dimensione in proporzione alla dimensione dello schermo Multi-lunghezze: una sequenza, separata da virgole, di valori di lunghezza. In questo caso può essere usato il carattere *, che divide lo spazio restante in parti uguali (dopo aver tolto le lunghezze esplicite in pixel e percentuale). 7 Davide Taibi

8 Tipi di dati (3) URL assoluti e relativi Un URL individua una risorsa esterna a cui il documento fa riferimento (es. immagini, link, script, fogli di stile, oggetti multimediali, ecc.) Un URL assoluto specifica senza default tutte le parti rilevanti dell'indirizzo della risorsa: Protocollo: ( il protocollo di connessione Nome di dominio: il computer su cui risiede il server Web Nome locale: l'insieme di directory e il nome del documento Frammento: la parte interna al documento in cui voglio individuare la risorsa. 8 Davide Taibi

9 Tipi di dati (4) URL assoluti e relativi Un URL relativo, invece, non specifica alcune parti a partire da sinistra. Queste parti si assumono specificate per default sulla base del documento visualizzato (detto base) Se la base è allora /dir3/paperino.html corrisponde a minnie.html corrisponde a #nonnapapera corrisponde a 9 Davide Taibi

10 Tipi di dati (5) URL assoluti e relativi Hanno significati speciali:. : il livello gerarchico attuale.. : il livello gerarchico superiore / : la radice della struttura su questo sito Il tag BASE serve per specificare una base diversa da quella del documento. Ne riparliamo più avanti.. 10 Davide Taibi

11 La struttura di un documento HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0// EN"> <HTML> <HEAD> <TITLE>Titolo del documento</title> </HEAD> <BODY> <P>Testo di un paragrafo</p> </BODY> </HTML> 11 Davide Taibi

12 Tag di struttura HTML: La radice dell albero. HEAD: Informazioni globali sull albero Attributi: titolo pagina, descrizione pagina BODY: Il contenuto vero e proprio del documento Attributi deprecati: background: l URI di un immagine di background bgcolor: il colore dello sfondo text, link, alink, vlink: il colore del testo, del link non attraversato, del link già attraversato, e del link in corso di attraversamento. 12 Davide Taibi

13 Tag Per esempio: Grassetto: <b>informatica</b> Corsivo: <i>informatica</i>

14 Tag Per creare i paragrafi, usiamo <p> e </p>: <p>informatica.</p> <p>psicologia.</p> Combinazioni di tag: <p><b><i>informatica</i></b></p>

15 Tag In alcuni casi, l ordine dei tag non ha importanza <p><b><i>informatica</i></b></p> è equivalente a <p><i><b>informatica</b></i></p> ma è importante che i tag siano nidificati correttamente <p><b><i>informatica</b></i></p> non è corretto Spesso in HTML, le pagine che contengono errori sono comunque visualizzate in un modo corretto

16 Tag Intestazioni: Vari livelli, da <h1> e </h1>, a <h8> e </h8> Per esempio: <h1>europa</h1> <h2>italia</h2> <h3>piemonte</h3>

17 Tag Una pagina HTML: Comincia sempre con il tag <html>, finisce con </html> Contiene una sezione indicata con <head> e </head>, poi una sezione indicata con <body> e </body> Struttura complessiva: <html> <head> informazioni preliminari </head> <body> contenuto principale della pagina </body> </html>

18 Tag Spazio bianco, tabulazione, carattere di a capo: HTML considera tutti come un singolo carattere di spazio Quindi i seguenti esempio di codice HTML sono equivalente: <h1>europa</h1> <h2>italia</h2> <h3>piemonte</h3> <h1>europa</h1> <h2>italia</h2> <h3>piemonte</h3> <h1>europa</h1> <h2>italia</h2> <h3>piemonte</h3>

19 Tag Tutto l informazione tra <pre> e </pre> viene visualizzata con spazi bianchi, tabulazioni, carattere di a capo Per esempio: <pre> Informatica Italia Psicologia </pre>

20 Tag Carattere di escape &: Per esempio, per scrivere i caratteri < e > &lt è visualizzato come < &gt è visualizzato come > &amp è visualizzato come & Anche per scrivere caratteri con accenti &egrave è visualizzato come è &eacute è visualizzato come è &Agrave è visualizzato come À Ecc.

21 Tag Commenti: Testo che potrebbe essere incluso nel sorgente, ma che non è visualizzato nel browser Inizio commento:  Per esempio:

22 Attributi dei tag Diversi tag hanno diversi attributi, che possono essere aggiunti nelle parentesi angoli del tag di apertura Alcuni tag come <p> e <h1> <h8> hanno l attributo align, che potrebbe essere left, center o right Per esempio: <p align= center >Informatica</p> Alcuni tag come <hr> (riga orizzontale) hanno l attributo width, che viene espresso come un percentuale dell ampiezza della pagina web Per esempio: <hr width= 75% > Il tag <hr> ance ha l attributo size, che indica l altezza della riga orizzontale, e viene espresso n termini di numeri di pixel Per esempio: <hr width= 25% size=5>

23 Attributi dei tag Per esempio: <h1 align="center">informatica</h1> <p>la lezione del 21/03/07 si terr&agrave in aula 8 anzich&eacute in aula 9.</p> <p align="right">jeremy Sproston</p> <hr width="50%" size=3>

24 I tag HTML principali Apertura Chiusura Significato <html> </html> Il primo e l ultimo tag in una pagina HTML <title> </title> Testo sulla barra del titolo <head> </head> Informazione introduttive (incl. il titolo) <body> </body> La parte principale della pagina <p> </p> Paragrafo (usa l attributo align) <hr> Riga orizzontale (usa gli attributi width e size) <h1> <h8> </h1> </h8> Intestazioni (usano l attributo align) <b> </b> Grassetto <i> </i> Corsivo <a href= percorso > </a> Àncora (percorso a un file HTML) <img src= percorso > Immagine (percorso a un file immagine) <br> Forza a capo

25 Un primo esempio di HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Titolo del documento</title> </HEAD> <BODY> <H1>Intestazione maggiore</h1> <P>Questo é un paragrafo completo di un documento. Scrivo e scrivo finchè non riempio varie righe, perchè voglio vedere come va a capo automaticamente. Certo non é un documento molto eccitante.</p> <P>Forse che vi aspettavate <B>poesia</B>? </P> <HR> <P>Una lista di cose importanti da ricordare:</p> <UL> <LI>Spazi, tabulatori e ritorni a capo</li> <LI>Dichiarazione di tipo del documento</li> <LI>Struttura del documento</li> <LI>Annidamento e chiusura dei tag</li> </UL> </BODY> </HTML> 25 Davide Taibi

26 Il risultato su Netscape 26 Davide Taibi

27 Tag di carattere (inline) I tag fontstyle specificano informazioni di rendering. Non tutti sono deprecati, ma si suggerisce di usare gli stili. TT (TeleType, font monospaziato, ad es. Courier), I (corsivo), B grassetto, U (sottolineato - deprecato), S e STRIKE (testo barrato - deprecato), BIG, SMALL (testo più grande e più piccolo) I tag phrase (di fraseazione o idiomatici) aggiungono significato a parti di un paragrafo. EM (enfasi), STRONG (enfasi maggiore), DFN (definizione), CODE (frammento di programma), SAMP (output d esempio), KBD (testo inserito dall utente), VAR (variabile di programma), CITE (breve citazione), Q (citazione lunga), ABBR e ACRONYM (abbreviazioni ed acronimi), SUP e SUB (testo in apice e in pedice), BDO (bidirectional override), SPAN (generico elemento inline) 27 Davide Taibi

28 Tag di blocco I tag di blocco definiscono l esistenza di blocchi di testo che contengono elementi inline. P (paragrafo), DIV (generico blocco), PRE (blocco preformattato), ADDRESS (indicazioni sull autore della pagina), BLOCKQUOTE (citazione lunga) Alcuni blocchi hanno ruolo strutturale H1, H2, H3, H4, H5, H6 (intestazione di blocco) Alcuni blocchi hanno ruolo di lista: UL, OL, DIR, MENU, DL LI (list item per UL, OL, DIR e MENU), DT e DD (definition term e definition data per DL) 28 Davide Taibi

29 Collegamenti Per creare un hyperlink a un altra pagina web: usiamo i tag <a href= percorso > e </a> Per esempio: <a href= >Informatica</a> Riferimento ipertestuale L àncora è tipicamente visualizzato colorato e sottolineato: Àncora

30 Collegamenti Il percorso potrebbe essere assoluto (come sulla diapositiva precedente) o relativo alla posizione nel file system della pagina corrente Per esempio, vorremmo creare un link alla pagina della Patente Europea del Computer direttamente nella pagina del corso di Informatica Consideriamo il caso in cui il file della pagina del corso di Informatica (informatica.html) e la pagina della Patente Europea del Computer (patente_europea.html) risiedono nella stessa cartella nel file system Per la parte percorso, basta scrivere il nome del file: <a href= patente_europea.html >la Patente Europea del Computer</a>

31 Collegamenti Adesso consideriamo il caso in cui: La pagina informatica.html e la cartella Altri_corsi risiedono nella stessa cartella La pagina patente_europea.html risiede nella cartella Altri_corsi Per creare un link alla pagina patente_europea.html dalla pagina informatica.html, mettiamo il path relativo della pagina patente_europea.html nella parte percorso : <a href= Altri_corsi/patente_europea.html >la Patente Europea del Computer</a>

32 Collegamenti Terzo caso: La pagina informatica.html risiede nella cartella Corsi_principali La pagina patente_europea.html risiede nella cartella Altri_corsi Le cartelle Corsi_principali e Altri_corsi risiedono nella stessa cartella Per creare un link alla pagina patente_europea.html dalla pagina informatica.html: <a href=../altri_corsi/patente_europea.html >la Patente.. Europea significa del cambiare Computer</a> posizione alla cartella direttamente più alto nella gerarchia del file system Altro esempio: <a href=../../universita/biografia/arte/magritte_bio.html >

33 Collegamenti Per creare un link interno in una pagina: Per esempio, per mettere un link interno all inizio della pagina Aggiungere il tag <a name= inizio"> </a> al punto del codice HTML che corrisponde all inizio della pagina (per esempio, subito dopo il tag <body>) Attenzione! Deve esserci qualcosa tra <a name= inizio"> e </a> (per esempio, almeno uno spazio bianco) Per creare il link (in un altra parte della pagina), scrivere, per esempio: <a href="#inizio">link all inizio</a> In generale, I link interni possono essere usati per saltare a un altra sezione di una pagina

34 Collegamenti Si può anche creare i link a una sezione di un altra pagina: Per esempio: <a href=../altri_corsi/patente_europea.html#esami">link all informazioni sugli esami</a>

35 I tag immagine I tag immagine: per includere un immagine direttamente in una pagina web Formato: <img src= nome_file > Nome_file potrebbe includere un percorso nel file system, per esempio <img src=../altri_corsi/ecdl.jpg > Posizione di un immagine: L immagine viene posizionata in esattamente il punto in cui si trova il tag <img src= nome_file > La corrispondente riga di testo si allinea al suo margine inferiore

36 I tag immagine Per esempio: <p> <img src="basilica.jpg"> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del </p>

37 I tag immagine Per esempio: <p> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del <img src="basilica.jpg"> </p>

38 I tag immagine Per esempio: <p> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, <img src="basilica.jpg"> (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del </p>

39 I tag immagine Per esempio: <p> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: <img src="basilica.jpg"> gli originali sono nel museo di San Marco) ricordano la quarta Crociata del </p>

40 I tag immagine Attributo align con top, middle o bottom: per spostare l allineamento della riga align= top : spostare l allineamento al margine superiore dell immagine align= middle : spostare l allineamento al punto centrale dell immagine align = bottom : spostare l allineamento al margine inferiore dell immagine (il default) Attributo align con left o right : per inserire l immagine in modo tale che il testo il testo scorra intorno alla figura

41 I tag immagine Per esempio: <p> <img src="basilica.jpg align= top > Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del </p>

42 I tag immagine Per esempio: <p> <img src="basilica.jpg align= middle > Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del </p>

43 I tag immagine Per esempio: <p> <img src="basilica.jpg align= left > Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del </p>

44 I tag immagine Per esempio: <p> <img src="basilica.jpg align= right > Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del </p>

45 I tag immagine Per inserire un immagine da sola (senza testo): racchiudere il tag del immagine tra quelli del paragrafo Per esempio: <p> <img src="basilica.jpg > </p> <p> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del </p>

46 I tag immagine Attributo height (altezza) e width (larghezza) Per specificare precisamente le dimensioni dell immagine Le dimensioni sono specificati in numeri di pixel Se la dimensione originale della figura è diversa dalla dimensione specificata in height/width, il browser la adatterà Per ottenere la dimensione (in pixel) di un immagine: ottenere la finestra Proprietà dell immagine (per esempio, cliccando con il tasto destro del mouse sopra l icona dell immagine, poi scegliendo la voce Proprietà, poi cliccando sulla linguetta Riepilogo)

47 I tag immagine Per esempio: <p> <img src="basilica.jpg align= right height= 225 width= 300 > Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del </p>

50 I tag immagine Tassellamento (tiling): usare un immagine per lo sfondo di una pagina web L immagine viene copiata più volte, per coprire la zona principale dello browser Attributo del tab body: <body background= nome_file > Attenzione ai colori dell immagine: la pagina può diventare illegibile

51 Gestire i colori Per cambiare il colore dello sfondo di una pagina: Usare l attributo bgcolor del body tag: <body bgcolor= silver > Per cambiare il colore del testo e il colore dei link: Usare gli attributi text e link/vlink/alink del body tag: <body text= blue link= red vlink= green alink= yellow > vlink sta per link visitati, alink sta per link attivati Per cambiare il colore del testo solo in alcuni punti: Usare il tag font con l attributo color <font color= navy >Ciao</font>

52 Gestire i colori I colori predefiniti (da Web_colors): Per definire più colori, usiamo i codici numerici

53 Gestire i colori Solitamente nei computer, i colori sono espressi come combinazione di rosso, verde e blu Rappresentiamo l intensità di uno di questi tre colori come un numero compreso tra 0 e 255 Rappresentiamo i colori in generale come tre numeri (in ordine rosso, verde e blue) Per esempio: (0, 0, 0) nero (255, 255, 255) bianco (255, 0, 0) rosso intenso (0, 255, 0) verde intenso (0, 0, 255) blu intenso (255, 142, 42) arancione carota

54 Gestire i colori In HTML, rappresentiamo i codici per i numeri usando le cifre esadecimali tra 00 e FF Il cancelletto (#) indica che quello che segue è un numero esadecimale Per esempio: #FF0000 rosso intenso #00FF00 verde intenso #0000FF blu intenso #FF8E2A arancione carota Esempio dell uso: <font color= FF8E2A >Ciao</font>

55 Liste Elenco puntato: Per definire un elenco puntato: <ul> e </ul> (unordered list) Ogni elemento del elenco è racchiuso nelle coppie di tag <li> e </li> (list item) Per esempio: <ul> <li>martin Scorsese</li> <li>sofia Coppola</li> <li>george Lucas</li> </ul>

56 Liste Elenco numerato: Per definire un elenco numerato: <ol> e </ol> (ordered list) Usiamo <li> e </li> come per un elenco puntato Per esempio: <ol> <li>martin Scorsese</li> <li>sofia Coppola</li> <li>george Lucas</li> </ol>

57 Liste Elenco di definizioni: Per definire un elenco di definizioni: <dl> e </dl> (definitional list) Elementi da definire: tra <dt> e </dt> Le definizioni degli elementi: tra <dd> e </dd> Per esempio: <dl> <dt>martin Scorsese</dt> <dd>un regista, sceneggiatore, attore e produttore cinematografico statunitense di origini italiane.</dd> <dt>sofia Coppola</dt> <dd>una regista, sceneggiatrice ed attrice cinematografica statunitense.</dd> </dl>

58 Liste Elenco di definizioni: Includere l attributo compact per ottenere una forma più compatta di un elenco di definizioni L elemento da definire e la sua definizione vengono visualizzati sulla stessa riga Per esempio: <dl compact> <dt>to</dt><dd>torino</dd> <dt>al</dt><dd>alessandria</dd> <dt>bi</dt><dd>biella</dd> </dl>

59 Liste È possibile nidificare gli elenchi: Per esempio: <ul> <li>piemonte</li> <ul> <li>torino</li> <li>alessandria</li> </ul> <li>lombardia</li> <li>liguria</li> </ul>

60 Tabelle Per creare una tabella: <table> e </table> (con attributo border per aggiungere un bordo) Lo spessore del bordo è 1 Per cambiare lo spessore del border, scriviamo border=n, dove n è un numero Per creare una riga della tabella: <tr> e </tr> Per creare una cella di una riga: <td> e </td> (table data) Definizione degli elementi della tabella: come un elenco (elenco di righe) dei elenchi (elenchi di celle)

61 Tabelle Per esempio: <table border> <tr> </tr> <tr> </tr> </table> <td>piemonte</td> <td>torino</td> <td> </td> <td>lombardia</td> <td>milano</td> <td> </td>

62 Tabelle Per esempio: <table border= 5 > <tr> </tr> <tr> </tr> </table> <td>piemonte</td> <td>torino</td> <td> </td> <td>lombardia</td> <td>milano</td> <td> </td>

63 Tabelle Per creare un intestazione per l intera tabella: <caption> e </ caption> Inseriti all interno dei tag <table> e <table> della tabella Per creare le intestazioni delle singole colonne: <th> e <th> (table heading) Inseriti all interno dei tag <tr> e </tr> della prima riga della tabella

64 Tabelle Per esempio: <table border> <caption>regioni d Italia</caption> <tr> </tr> <tr> </tr> <tr> </tr> </table> <th>regione</th> <th>capoluogo</th> <th>num. abitanti</th> <td>piemonte</td> <td>torino</td> <td> </td> <td>lombardia</td> <td>milano</td> <td> </td>

65 Tabelle Possiamo specificare il colore dello sfondo della tabella, di una riga, e di una cella <body bgcolor="silver"> <table border bgcolor="white"> <tr bgcolor="gray"> <th>regione</th> <th>capoluogo</th> </tr> <tr> </tr> <tr> </tr> </table> </body> <th>num. abitanti</th> <td bgcolor="blue">piemonte</td> <td>torino</td> <td> </td> <td bgcolor="red">lombardia</td> <td>milano</td> <td> </td>

66 Tabelle bordercolor: attributo del tag table; per cambiare il colore del bordo <table border bordercolor="green">

67 Tabelle Possiamo usare l attributo align (per l intera tabella, per righe, e per celle) <table border align= center > <tr> <th>regione</th> <th>capoluogo</th> <th>num. abitanti</th> </tr> <tr align= right > <td>piemonte</td> <td>torino</td> </tr> <tr> </tr> </table> <td> </td> <td>lombardia</td> <td align= right >Milano</td> <td> </td>

68 Tabelle cellpadding: attributo per cambiare lo spazio intorno agli elementi delle celle (valore di default è 2) <table border cellpadding= 0 > <table border cellpadding= 5 >

69 Tabelle cellspacing: attributo per cambiare lo spazio tra le celle (valore di default è 2) <table border cellspacing= 0 > <table border cellspacing= 5 >

70 Tabelle width: espresso in pixel, oppure in un percentuale Può essere applicato all intera tabella, oppure alle celle <table border width= 75% > <table border width= 450 >

71 Tabelle <table border> <tr> </tr> <tr> </tr> </table> <td>piemonte</td> <td width= 50% >Torino</td> <td> </td> <td>lombardia</td> <td>milano</td> <td width= 100 > </td>

72 Tabelle height: come width, può essere espresso in pixel o come un percentuale, e può essere applicata all intera tabelle o a righe <table border height= 75% >

73 Tabelle <table border> <tr height= 60 > </tr> <td>piemonte</td> <td>torino</td> <td> </td> <tr height= 75% > </tr> </table> <td>lombardia</td> <td>milano</td> <td> </td>

74 Tabelle valign: come align, ma per l allineamento verticale (usa i valori top, middle e bottom, con middle come default) Può essere applicato all intera tabella, alle righe, alle celle <table border height= 75% valign= middle > <tr> </tr> <td valign="top">piemonte</td> <td>torino</td> <td> </td> <tr valign="bottom"> <td>lombardia</td> <td>milano</td> <td> </td> </tr> </table>

75 Tabelle colspan e rowspan: per creare l unione di più celle Per esempio: <table border> <tr> </tr> <tr> </tr> </table> <td colspan="3" align="center">corsi</td> <td>informatica</td> <td>psicologia</td> <td>biologia</td>

76 Tabelle colspan secondo esempio: <table border> <tr> </tr> <tr> </tr> </table> <td colspan="2" align="center">scienze MFN</td> <td>psicologia</td> <td>informatica</td> <td>fisica</td> <td>psicologia</td>

77 Tabelle rowspan esempio: <table border> <tr> </tr> <tr> </tr> </table> <td rowspan="2">scienze MFN</td> <td>informatica</td> <td>fisica</td>

78 Tabelle Si può nidificare la tabelle: <table border> <tr> <td>prima cella nella prima tabella</td> <td> <table border> <tr><td>tabella nidificata</td></tr> <tr><td>tabella nidificata</td></tr> </table> </td> </tr> </table>

79 Tabelle Le tabelle (spesso senza l attributo border) sono utile anche per controllare l organizzazione della pagina Per esempio: una sequenza di link a pagine sulle città Italiane <a href= pie.html >Piemonte</a> <a href= lom.html >Lombardia</a> <a href= lig.html >Liguria</a> <a href= abr.html >Abruzzo</a> oppure <table> <tr> <td><a href= pie.html >Piemonte</a></td> <td><a href= lom.html >Lombardia</a></td> <td><a href= lig.html >Liguria</a></td> <td><a href= abr.html >Abruzzo</a></td> </tr> </table>

80 Tabelle <a href= pie.html >Piemonte</a> <a href= lom.html >Lombardia</a> <a href= lig.html >Liguria</a> <a href= abr.html >Abruzzo</a> oppure <table> <tr> <td><a href= pie.html >Piemonte</a></td> <td><a href= lom.html >Lombardia</a></td> <td><a href= lig.html >Liguria</a></td> <td><a href= abr.html >Abruzzo</a></td> </tr> </table>

81 Tabelle <a href= pie.html >Piemonte</a> <a href= lom.html >Lombardia</a> <a href= lig.html >Liguria</a> <a href= abr.html >Abruzzo</a> oppure <table> <tr> <td><a href= pie.html >Piemonte</a></td> <td><a href= lom.html >Lombardia</a></td> <td><a href= lig.html >Liguria</a></td> <td><a href= abr.html >Abruzzo</a></td> </tr> </table> Cambiato la larghezza della finestra: diversi effetti