Html e Css - 3 | WebMaster & WebDesigner

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>[email protected]</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>[email protected]</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

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;background­color:green;}→

<span>    span {color: blue;background­color: black;}→

<strong>   strong {color: blue;background­color: 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:

font­family : "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{text­align: center}

li{display: inline} /*rendo gli elementi li inline*/

div#navigation_2{text­align: center}

div#navigation_2 ul{width: 375px; margin: 0 auto; list­style­type: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>

Esempihttp://blog.html.it/layoutgala/indexIta.html

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:

[email protected]