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

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. Css
Struttura delle regole
• Selettore
– Indica su quale
elemento del documento
vogliamo agire.
• Blocco delle
dichiarazioni
– Proprietà
– Valore

20. Selettori
• Come selettori di base ho gli elementi del
documento (i tag)
<p> → p {color:white;background­color:green;}
<span> → span {color: blue;background­color: black;}
<strong> → strong {color: blue;background­color: red;}

21. Raggruppare i selettori
h1 {color: purple }
h2 {color: purple }
h3 {color: purple } h1,h2,h3,h4,h5,h6
h4 {color: purple } {color: purple }
h5 {color: purple }
h6 {color: purple }

22. Selettore Universale
* {color:red}
Introdotto dai css2
È l'equivalente di un
selettore
raggruppato con tutti
gli elementi del
documento

23. Selettore id - Attributo id
• Consente di attribuire gli #pippo {color:
stili con modalità purple }
indipendente dagli <div id=”pippo”>
elementi oppure in pippo
combinazione con i
</div>
selettori di elemento.
oppure
• Nel documento ci deve
div#pippo
essere un solo elemento
{color:yellow}
per ogni id

24. Selettore class - Attributo class
• Funziona come l'id ma .pippo {color: purple }
consente di selezionare <div class=”pippo”>
più elementi. pippo
• Possono esserci n </div>
elementi con la stessa
<p
classe class=”pippo”>pluto</p>
• Possono esserci elementi oppure
con più classi
div.pippo {color:yellow}
<p class=”pippo pluto”>

25. Pseudoclassi
• Le pseudoclassi a:link {…}
identificano a:hover {…}
elementi in base a:visited {…}
alle loro proprietà.

26. Giochiamo un po' con le
proprietà
• background. Definisce lo sfondo • font. Definisce le proprietà del
di un elemento. È una scorciatoia carattere. È una scorciatoia
(shorthand properties) per (shorthand properties) per font-
background-attachment, family, font-size e font-weight.
background-color, background- • margin e padding. Definiscono lo
image, background-position e spazio circostante gli elementi. La
background-repeat. prima lo spazio esterno ai bordi, la
• border. Definisce il bordo di un seconda quello interno.
elemento. È una scorciatoia • text-align. Definisce
(shorthand properties) per 'border- l'allineamento degli elementi, tra
color, border-style e border-width. cui il testo.
• color. Definisce il colore del testo
(wikipedia) di un elemento. Per definire lo
sfondo si utilizza la proprietà
background.

27. Giochiamo un po' con i valori
Colori: Font:
#ff6600 font­family : "Arial",
#f60 "Verdana", serif;
rgb(255,102,0)
Rgb(100%,40%,0%)
Url:
url(http://esempio.it/file.
html)
url("http://esempio.it/file
.html")

28. Elementi Float
• Questa proprietà definisce un blocco
flottante, ovvero che permette la
disposizione di altri elementi ai suoi lati.
float:left
float:right
clear:both
clear:right
clear:left

29. Liste – Menu
[dejavu]
<div id="navigation_1"> <div id="navigation_2">
<ul> <ul>
<li id="home"><a href="#" <li id="home"><a href="#"
title="Home ">Home</a></li> title="Home ">Home</a></li>
<li id="contatti"><a href="#" <li id="contatti"><a href="#"
title="Contatti">Contatti</a></li> title="Contatti">Contatti</a></li>
<li id="azienda"><a href="#" <li id="azienda"><a href="#"
title="azienda">azienda</a></li> title="azienda">azienda</a></li>
</ul> </ul>
</div> </div>
Lo formatteremo
tramite i css

30. Menu liste e float
div#navigation_1{text­ div#navigation_2{text­
align: center} align: center}
li{display: inline} div#navigation_2
/*rendo gli elementi ul{width: 375px;
li inline*/ margin: 0 auto; list­
style­type:none;}
div#navigation_2
li{float: left;width:
75px} /*Rendo gli
elemnti li float*/

31. Layout with Table
<table width="500">
<tr><td id="header"
colspan="2">
<h1>Main Title of Web
Page</h1></td></tr>
<tr valign="top">
<td id="menu">
</td>
<td id="content">Content
goes here</td></tr><tr>
<td colspan="2">Copyright
© W3Schools.com</td></tr>
</table>

32. Layout Table Less
<div id="container">
<div id="header">
<h1>Main Title of
Web Page</h1>
</div>
<div id="menu">
</div>
<div id="content">
Content goes here
</div>
<div id="footer">
Copyright ©W3Schools.com
</div>

33. Esempi
http://blog.html.it/layoutgala/indexIta.html

34. CssZenGarden
http://www.csszengarden.com/
• È evidente la necessità che gli
artisti delle grafica prendano in
seria considerazione i CSS. Il
Giardino Zen si prefigge di
stimolare, ispirare ed incoraggiare
la partecipazione. Come punto di
partenza, si osservino alcuni dei
progetti in elenco. Cliccando su
ciascuno di essi il relativo foglio di
stile verrà caricato in questa
stessa pagina. Il codice è
esattamente identico, l'unica cosa
che viene modificata è il file .css
esterno. Si, e proprio così!

35. CssZenGarden
http://www.csszengarden.com/tr/italiano/
CSS consentono un controllo totale e
completo sullo stile di un documento
ipertestuale. L'unico modo per spiegarlo,
in modo da stimolare l'interesse nelle
persone, è mostrare cosa tutto questo
può effettivamente implicare, una volta
che le redini sono messe nelle mani di
coloro i quali sono in grado di creare
bellezza dalla struttura. Fino ad oggi,
gran parte degli esempi dei trucchi e
hacks più interessanti sono stati illustrati
da specialisti di struttura e codice. I
designer devono ancora fare la loro
parte. Questo stato di cose deve
cambiare.

36. Validare il codice
http://jigsaw.w3.org/css-validator/
Il w3c ci osserva

37. Bibliografia
Anche in italiano

38. Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me