3. Elementi Tabelle
• L'elemento TR funge da contenitore per una riga di celle in
una tabella. Il marcatore finale può essere omesso.
• Le celle in una tabella possono contenere due tipi di
informazioni: informazioni di intestazione e dati. Questa
distinzione rende possibile ai programmi utente di riprodurre
le celle di intestazione e di dati in modo distinto, anche in
assenza di fogli di stile.
• L'elemento TH definisce una cella che contiene informazioni
di intestazione.
• L'elemento TD definisce una cella che contiene dati.
4. Tabelle Accessibili
Le righe di tabella possono essere <TABLE>
raggruppate in un'intestazione della tabella, <THEAD>
un piede della tabella ed una o più sezioni <TR> ...informazioni di intestazione...
del corpo della tabella, usando </THEAD>
rispettivamente gli elementi THEAD, TFOOT <TFOOT>
e TBODY. Questa suddivisione consente ai
<TR> ...informazioni in nota...
programmi utente di supportare lo
</TFOOT>
scorrimento dei corpi delle tabelle
indipendentemente dall'intestazione e dal <TBODY>
piede. Quando si stampano delle tabelle <TR> ...prima riga di dati del blocco uno...
lunghe, le informazioni contenute <TR> ...seconda riga di dati del blocco uno...
nell'intestazione e nel piede della tabella </TBODY>
possono essere ripetute su ogni pagina che <TBODY>
contiene dati della tabella.
<TR> ...prima riga di dati del blocco due...
<TR> ...seconda riga di dati del blocco due...
<TR> ...terza riga di dati del blocco due...
</TBODY>
</TABLE>
5. Div e Span
http://www.diodati.org/w3c/html401/struct/global.html#h-7.5.4
• Gli elementi DIV e SPAN, insieme con gli attributi id e
class, offrono un meccanismo generico per aggiungere
struttura ai documenti. Questi elementi definiscono il
contenuto o come in riga (SPAN) o come a livello di
blocco (DIV), ma non impongono alcun altro idioma di
presentazione sul contenuto. Pertanto, gli autori possono
usare questi elementi in congiunzione con i fogli di stile,
con l'attributo lang, ecc., per adattare l'HTML ai propri
bisogni ed ai propri gusti.
7. Validare il Codice
http://validator.w3.org
• Nonostante i browser siano
'intelligenti' e riescano a visualizzare
lo stesso una pagina gli errori non
ne rendono certa l'interpretazione.
• Un documento web che rispetta le
specifiche w3c è in genere più
accessibile dai vari dispositivi e dalle
varie tipologie di visitatori.
• Anche i motori di ricerca sono dei
visitatori.
9. CSS perché? Servono?
Il cliente chiede: mi cambi il colori di tutti i font del sito?
<td
background="image/bk.jpg"> </td> Web Master
<td width="249"> </td>
<td width="0"
background="image/line_bak2.jpg"> 
;</td>
<td width="451" class="indicons">
<font color="#FF0000">Questo è un
testo di colore ROSSO</font>
<font color="#0000FF">Questo è un
testo di colore BLU</font>
</td>
<td
background="image/bk.jpg"> </td>
10. Cascading Style Sheets
Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio
informatico usato per definire la formattazione di documenti
HTML, XHTML e XML ad esempio in siti web e relative pagine
web. Le regole per comporre il CSS sono contenute in un
insieme di direttive (Recommendations) emanate a partire dal
1996 dal W3C.
L'introduzione del CSS si è resa necessaria per separare i
contenuti dalla formattazione e permettere una programmazione
più chiara e facile da utilizzare, sia per gli autori delle pagine
HTML che per gli utenti. (Wikipedia)
11. Vantaggi dei Css
Eric Meyer http://meyerweb.com/
• Stile più ricco
in HTML devo usare molti più tag per definire degli sitli
complessi
• Facilità di utilizzo
I css accentrano i comandi per gli effetti visivi in un'area
facilmente raggiungibile invece di disperderli in tutto il
documento
• Uso degli stili su più pagine
Posso riutilizzare il foglio di stile su tutte le pagine del sito
12. Vantaggi dei Css (2)
• Organizzazione a Cascata
Posso utilizzare la stessa regola per più elementi scrivendola
una sola volta.
• Risparmio di banda
Avendo dei file di dimensioni più compatte posso risparmiare
banda
14. Css Incorporati
<html> • Elemento style è il metodo più
<head> facile per definire un foglio di
sitle poiché appare nel
<style type="text/css"> documento stesso.
body { • Non sfrutta il vantaggio di
background: #FFFFCC; riutilizzare il codice css su più
} documenti
</style> • Dovrebbe sempre utilizzare
l'attributo style
</head>
• Di solito si inserisce all'interno
<body> dell'elemento head
16. <link> e @import:
• Il tag link consente di collegare • Come <link> la direttiva
all'html altri documenti al @import all'interno di style
documento in cui è inserito indica al browser di caricare
• Viene usato per collegare fogli un foglio di stile esterno.
di stile esterni • È meglio collegare le direttive
• Per collegare correttamente import all'inizio del foglio di
un foglio di stile il tag link deve stile.
essere all'interno dell'elemento • Permette di avere un foglio di
head. stile che ne contiene un altro
• utilizza gli attributi rel e type
17. Commeti Css
/* Commenti multi line
Io sono un commento
Css
*/ /* segno di apertura
*/ segno di chiusura
18. Fogli di stile Alternativi
<link rel="stylesheet"
type="text/css" href="style.css"
title=”Default”>
<link rel="stylesheet"
type="text/css" href="black.css"
title=”black”>
<link rel="stylesheet"
type="text/css" href="green.css" - Se uno non ha il title
diventa persistente e viene
title=”green”> sempre usato
- con import non si possono
caricare fogli di stile
alternativi