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="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>

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">&nbsp;</td>

    <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>

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

Domande?

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

matteo@magni.me