Post on 28-Nov-2014
description
HTML e CSS [3]Synergia – Matteo Magni
Tabelle
<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>
http://www.diodati.org/w3c/html401/struct/tables.html
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.
Tabelle Accessibili
Le righe di tabella possono essere raggruppate in un'intestazione della tabella, un piede della tabella ed una o più sezioni del corpo della tabella, usando rispettivamente gli elementi THEAD, TFOOT e TBODY. Questa suddivisione consente ai programmi utente di supportare lo scorrimento dei corpi delle tabelle indipendentemente dall'intestazione e dal piede. Quando si stampano delle tabelle lunghe, le informazioni contenute nell'intestazione e nel piede della tabella possono essere ripetute su ogni pagina che contiene dati della tabella.
<TABLE>
<THEAD>
<TR> ...informazioni di intestazione...
</THEAD>
<TFOOT>
<TR> ...informazioni in nota...
</TFOOT>
<TBODY>
<TR> ...prima riga di dati del blocco uno...
<TR> ...seconda riga di dati del blocco uno...
</TBODY>
<TBODY>
<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>
Div e Span
• 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.
http://www.diodati.org/w3c/html401/struct/global.html#h-7.5.4
Div e Span <div id="clienteborghi" class="cliente">
<p><span class="clientetitolo">Informazioni sul cliente:</span>
<table class="clientedati">
<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>Email:</th><td>sb@foo.org</td></tr>
</table> </div>
<div id="clienteborghi" class="cliente">
<p><span class="clientetitolo">Informazioni sul cliente:</span>
<table class="clientedati">
<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>Email:</th><td>sb@foo.org</td></tr>
</table> </div>
Validare il Codice
• 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.
http://validator.w3.org
HTML only?
• Abbiamo l'HTML, ci serve altro?
CSS perché? Servono?
<td background="image/bk.jpg"> </td>
<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>
Il cliente chiede: mi cambi il colori di tutti i font del sito?
Web Master
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)
Vantaggi dei Css
• Stile più riccoin HTML devo usare molti più tag per definire degli sitli complessi
• Facilità di utilizzoI 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ù paginePosso riutilizzare il foglio di stile su tutte le pagine del sito
Eric Meyer http://meyerweb.com/
Vantaggi dei Css (2)
• Organizzazione a CascataPosso utilizzare la stessa regola per più elementi scrivendola una sola volta.
• Risparmio di bandaAvendo dei file di dimensioni più compatte posso risparmiare banda
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.
Css Incorporati
<html>
<head>
<style type="text/css">
body {
background: #FFFFCC;
}
</style>
</head>
<body>
• Elemento style è il metodo più facile per definire un foglio di sitle poiché appare nel documento stesso.
• Non sfrutta il vantaggio di riutilizzare il codice css su più documenti
• Dovrebbe sempre utilizzare l'attributo style
• Di solito si inserisce all'interno dell'elemento head
Css esterni
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<style>
@import url(style.css);
</style>
<link> e @import:
• Il tag link consente di collegare all'html altri documenti al documento in cui è inserito
• Viene usato per collegare fogli di stile esterni
• Per collegare correttamente un foglio di stile il tag link deve essere all'interno dell'elemento head.
• utilizza gli attributi rel e type
• Come <link> la direttiva @import all'interno di style indica al browser di caricare un foglio di stile esterno.
• È meglio collegare le direttive import all'inizio del foglio di stile.
• Permette di avere un foglio di stile che ne contiene un altro
Commeti Css
/*
Io sono un commento Css
*/
Commenti multi line
/* segno di apertura
*/ segno di chiusura
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" title=”green”>
- Se uno non ha il title diventa persistente e viene sempre usato- con import non si possono caricare fogli di stile alternativi
Css
• Selettore– Indica su quale
elemento del documento vogliamo agire.
• Blocco delle dichiarazioni– Proprietà
– Valore
Struttura delle regole
Selettori
• Come selettori di base ho gli elementi del documento (i tag)
<p> p {color:white;backgroundcolor:green;}→
<span> span {color: blue;backgroundcolor: black;}→
<strong> strong {color: blue;backgroundcolor: red;}→
Raggruppare i selettori
h1 {color: purple }
h2 {color: purple }
h3 {color: purple }
h4 {color: purple }
h5 {color: purple }
h6 {color: purple }
h1,h2,h3,h4,h5,h6 {color: purple }
Selettore Universale
* {color:red}
Introdotto dai css2
È l'equivalente di un selettore raggruppato con tutti gli elementi del documento
Selettore id - Attributo id
• Consente di attribuire gli stili con modalità indipendente dagli elementi oppure in combinazione con i selettori di elemento.
• Nel documento ci deve essere un solo elemento per ogni id
#pippo {color: purple }
<div id=”pippo”>
pippo
</div>
oppure
div#pippo {color:yellow}
Selettore class - Attributo class
• Funziona come l'id ma consente di selezionare più elementi.
• Possono esserci n elementi con la stessa classe
• Possono esserci elementi con più classi
<p class=”pippo pluto”>
.pippo {color: purple }
<div class=”pippo”>
pippo
</div>
<p class=”pippo”>pluto</p>
oppure
div.pippo {color:yellow}
Pseudoclassi
• Le pseudoclassi identificano elementi in base alle loro proprietà.
a:link {…}
a:hover {…}
a:visited {…}
Giochiamo un po' con le proprietà
• background. Definisce lo sfondo di un elemento. È una scorciatoia (shorthand properties) per background-attachment, background-color, background-image, background-position e background-repeat.
• border. Definisce il bordo di un elemento. È una scorciatoia (shorthand properties) per 'border-color, border-style e border-width.
(wikipedia)
• font. Definisce le proprietà del carattere. È una scorciatoia (shorthand properties) per font-family, font-size e font-weight.
• margin e padding. Definiscono lo spazio circostante gli elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
• text-align. Definisce l'allineamento degli elementi, tra cui il testo.
• color. Definisce il colore del testo di un elemento. Per definire lo sfondo si utilizza la proprietà background.
Giochiamo un po' con i valori
Colori:
#ff6600
#f60
rgb(255,102,0)
Rgb(100%,40%,0%)
Url:
url(http://esempio.it/file.html)
url("http://esempio.it/file.html")
Font:
fontfamily : "Arial", "Verdana", serif;
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
Liste – Menu [dejavu]
<div id="navigation_1">
<ul>
<li id="home"><a href="#" title="Home ">Home</a></li>
<li id="contatti"><a href="#" title="Contatti">Contatti</a></li>
<li id="azienda"><a href="#" title="azienda">azienda</a></li>
</ul>
</div>
<div id="navigation_2">
<ul>
<li id="home"><a href="#" title="Home ">Home</a></li>
<li id="contatti"><a href="#" title="Contatti">Contatti</a></li>
<li id="azienda"><a href="#" title="azienda">azienda</a></li>
</ul>
</div>
Lo formatteremo tramite i css
Menu liste e float
div#navigation_1{textalign: center}
li{display: inline} /*rendo gli elementi li inline*/
div#navigation_2{textalign: center}
div#navigation_2 ul{width: 375px; margin: 0 auto; liststyletype:none;}
div#navigation_2 li{float: left;width: 75px} /*Rendo gli elemnti li float*/
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>
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>
CssZenGarden
• È 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ì!
http://www.csszengarden.com/
CssZenGarden
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.
http://www.csszengarden.com/tr/italiano/
Validare il codicehttp://jigsaw.w3.org/css-validator/
Il w3c ci osserva
Bibliografia
Anche in italiano
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me