Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne. I tag necessari per creare una tabella sono: <table>

Transcript

1 LE TABELLE IN HTML Le tabelle sono una delle parti più importanti di tutto il codice HTML: nate sin dagli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile per gestire i lavori. Questo concetto che per anni ha aiutato i webmaster nella costruzione delle pagine HTML è stato ribaltato completamente con l'uscita ed il sempre più numeroso utilizzo del linguaggio XHTML, dove in pratica le tabelle sono utilizzate SOLO per mostrare dati matematici, liste ecc. ma non sono mai utilizzate per l'impaginazione, che è lasciata ad un complesso e misto uso di css e tag DIV. Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne. I tag necessari per creare una tabella sono: <table> <td> apre la tabella table row : indica l apertura di una riga table data : indica una cella all interno di una riga L attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle. Ad esempio: <table border= 2 > Ecco un primo esempio di tabella: <table border="1"> <td>prima cella</td> <td></td> <td>terza cella</td> <td>quarta cella</td> prima cella terza cella quarta cella Possiamo specificare la larghezza e l'altezza delle tabelle tramite gli attributiwidth e height che possono essere riferiti a tutti e tre i tag (<table>,, <td>). Il valore di questi attributi può essere specificato con una larghezza fissa (in pixel: in questo caso basta indicare un numero intero), oppure in percentuale (il numero deve essere allora seguito dal simbolo % ): in questo caso la tabella si adatta secondo lo spazio a disposizione. <table width="300" height="200" border="1"> <td>prima cella</td> <td></td> <td>terza cella</td> 1

2 <td>quarta cella</td> prima cella terza cella quarta cella oppure <table width="75%" border="1"> <td width="25%">prima cella</td> <td width="75%"></td> <td width="25%">terza cella</td> <td width="75%">quarta cella</td> prima cella terza cella quarta cella <table border="2" bgcolor="red" width="250" height="80" > <td> </td> <td bgcolor="green" align="center" valign="top" width="75%"> </td> BORDI E SPAZI: Molti attributi possono variare la grandezza, il colore o la visuale dei bordi. Vediamo con degli esempi alcuni di questi: border=" " Può variare partendo da zero (senza bordo). <table border="10" > <td> 2

3 </td> <table border="2" bordercolor="red"> <td> </td> cellpadding=" " La quantità di spazio fra i bordi e l'oggetto della tabella <table border="2" cellpadding="15"> <td> </td> cellspacing=" " La quantità di spazio vuoto fra le celle, da non confondere con border. <table border="2" cellspacing="15"> <td> </td> 3

4 Se si ha la necessità di creare dei siti web, occorrono programmi adatti per costruire l'html. Alcuni programmi richiedono la conoscenza del codice mentre altri, che possiedono un editor WYSIWYG (What-you-see-is-what you get, dall'acronimo inglese "quello che vedi è quello che ottieni") permettono di modificare le pagine graficamente, un po' come avviene quando si sta lavorando ad un documento di Word. Questa tipologia di programmi permette di creare un sito in maniera più facile senza aver bisogno di grandi conoscenze tecniche. Vediamo ora come utilizzare alcuni di questi programmi. - Adobe Dreamweaver - Microsoft expression web - NVU 1.0 (free) - Fresh HTML(free) I primi due programmi utilizzati sono a pagamento, sono ben fatti ed utilizzati per siti di produzione. Tuttavia anche alcuni programmi free riescono a svolgere egregiamente il loro compito, per cui non è assolutamente necessario sostenere costi elevati per acquistare i software commerciali. Noi utilizzeremo NVU 1.0 per la costruzione dei siti web è estremamente intuitivo e quindi facile da utilizzare. Potete scaricarlo da: Attraverso il programma si possono inserire tutte le istruzioni precedentemente elencate: immagini, testo, collegamenti ipertestuali, tabelle, modificare lo sfondo delle pagine, tutto in maniera semplice ed immediata. Penserà il programma a tradurre tutto in HTML. 4

5 Seguendo le indicazioni del W3C (consorzio internazionale che si occupa di armonizzare l'utilizzo dell'html) Doctype deve essere il primo elemento ad aprire il documento. Questo vuol dire che andrebbe posto prima di <HTML>. Si tratta di un tag che non ha bisogno di chiusura e che ha il compito di fornire informazioni al server Web che ospita la pagina. Le informazioni fornite da DOCTYPE riguardano il tipo di documento visualizzato oltre ad essere necessaria alla comunicazione tra browser e server. DOCTYPE deve essere scritto in una forma standard: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"> Secondo gli standard di XHTML e HTML, un DOCTYPE (abbreviazione di "dichiarazione del tipo di documento") informa il validatore quale versione di (X)HTML state usando e deve comparire in cima ad ogni pagina Web. I DOCTYPE sono dei componenti chiave nelle pagine Web standard: i vostri codici e i CSS non funzioneranno senza di essi. W3C regole internazionali per rendere omogeneo il linguaggio HTML e per dargli questa caratteristica di universalità prende il nome di XHTML. Tutti i browser (compresi quelli dei moderni smartphone devono rispettare queste regole per cui i siti devono essere costruiti rispettando il più possibile queste regole al fine di essere accessibili da qualunque tipo di terminale PC, Smatphone, Tablet, etc Non è facile rendere un sito web valido secondo le regole del W3C esiste un validatore online a tale scopo. (Esempio Altri elementi sonoi META TAGS 5