Terza lezione modulo HTML e CSS del corso per WebMaster & WebDesigner

1. HTML e CSS [3]
Synergia – Matteo Magni

2. Tabelle
http://www.diodati.org/w3c/html401/struct/tables.html
<table border="1" summary="Questa tabella...">
<caption><em>Una tabella esemplificativa con celle
unificate</em></caption>
<tr><th rowspan="2"></th><th colspan="2">Media</th><th
rowspan="2">Occhi<BR>rossi</th></tr>
<tr><th>altezza</th><th>peso</th></tr>
<tr><th>Maschi</th><td>1.9</td><td>0.003</td><td>40%</td> </tr>
<tr><th>Femmine</th><td>1.7</td><td>0.002</td><td>43%</td></tr>
</table>

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.

6. Div e Span
<div id="cliente­borghi" class="cliente">
<p><span class="cliente­titolo">Informazioni sul cliente:</span>
<table class="cliente­dati">
<tr><th>Cognome:</th><td>Borghi</td></tr>
<tr><th>Nome:</th><td>Stefano</td></tr>
<tr><th>Tel:</th><td>(06)5551212</td></tr>
<tr><th>E­mail:</th><td>sb@foo.org</td></tr>
</table> </div>
<div id="cliente­borghi" class="cliente">
<p><span class="cliente­titolo">Informazioni sul cliente:</span>
<table class="cliente­dati">
<tr><th>Cognome:</th><td>Borghi</td></tr>
<tr><th>Nome:</th><td>Stefano</td></tr>
<tr><th>Tel:</th><td>(06)5551212</td></tr>
<tr><th>E­mail:</th><td>sb@foo.org</td></tr>
</table> </div>

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.

8. HTML only?
• Abbiamo l'HTML,
ci serve altro?

9. CSS perché? Servono?
Il cliente chiede: mi cambi il colori di tutti i font del sito?
<td
background="image/bk.jpg">&nbsp;</td> Web Master
<td width="249">&nbsp;</td>
<td width="0"
background="image/line_bak2.jpg">&nbsp
;</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">&nbsp;</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

13. Css - inline
<h1 style="color: red; background:
black;">...</h1>
Non ho tutti i vantaggi di riuso del codice, ma posso usare
la ricchezza degli stili Css.

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

15. Css esterni
<html> <style>
<head> @import
<link rel="stylesheet" url(style.css);
type="text/css" </style>
href="style.css">
</head>
<body>

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

19. Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me