HTML e CSS [3]Synergia – Matteo Magni
Tabelle http://www.diodati.org/w3c/html401/struct/tables.html<table border="1" summary="Questa tabella...">        <captio...
Elementi Tabelle• Lelemento TR funge da contenitore per una riga di celle in  una tabella. Il marcatore finale può essere ...
Tabelle AccessibiliLe righe di tabella possono essere              <TABLE>raggruppate in unintestazione della tabella,   <...
Div e Span     http://www.diodati.org/w3c/html401/struct/global.html#h-7.5.4• Gli elementi DIV e SPAN, insieme con gli att...
Div e Span    <div id="cliente­borghi" class="cliente">    <p><span class="cliente­titolo">Informazioni sul cliente:</span...
Validare il Codice http://validator.w3.org              •   Nonostante i browser siano                  intelligenti e rie...
HTML only?     • Abbiamo lHTML,       ci serve altro?
CSS perché? Servono?Il cliente chiede: mi cambi il colori di tutti i font del sito?     <td  background="image/bk.jpg">&nb...
Cascading Style SheetsIl CSS (Cascading Style Sheets o Fogli di stile) è un linguaggioinformatico usato per definire la fo...
Vantaggi dei Css                Eric Meyer http://meyerweb.com/• Stile più ricco  in HTML devo usare molti più tag per def...
Vantaggi dei Css (2)• Organizzazione a Cascata  Posso utilizzare la stessa regola per più elementi scrivendola  una sola v...
Css - inline<h1 style="color: red; background: black;">...</h1>Non ho tutti i vantaggi di riuso del codice, ma posso usare...
Css Incorporati<html>                     •   Elemento style è il metodo più<head>                         facile per defi...
Css esterni<html>                    <style><head>                    @import <link rel="stylesheet"    url(style.css);typ...
<link> e @import:• Il tag link consente di collegare     •   Come <link> la direttiva  allhtml altri documenti al         ...
Commeti Css/*                     Commenti multi lineIo sono un commento Css*/                     /* segno di apertura   ...
Fogli di stile Alternativi<link rel="stylesheet" type="text/css" href="style.css" title=”Default”> <link rel="stylesheet" ...
CssStruttura delle regole            • Selettore               – Indica su quale                 elemento del documento   ...
Selettori• Come selettori di base ho gli elementi del  documento (i tag)<p> → p {color:white;background­color:green;}<span...
Raggruppare i selettorih1 {color: purple }h2 {color: purple }h3 {color: purple }   h1,h2,h3,h4,h5,h6 h4 {color: purple }  ...
Selettore Universale          * {color:red}          Introdotto dai css2          È lequivalente di un          selettore ...
Selettore id - Attributo id• Consente di attribuire gli   #pippo {color:   stili con modalità           purple }  indipend...
Selettore class - Attributo class• Funziona come lid ma      .pippo {color: purple }  consente di selezionare    <div clas...
Pseudoclassi• Le pseudoclassi        a:link {…}  identificano           a:hover {…}  elementi in base       a:visited {…} ...
Giochiamo un po con le                 proprietà•   background. Definisce lo sfondo       •   font. Definisce le proprietà...
Giochiamo un po con i valoriColori:                       Font:#ff6600                       font­family : "Arial", #f60  ...
Elementi Float• Questa proprietà definisce un blocco  flottante, ovvero che permette la  disposizione di altri elementi ai...
Liste – Menu                                   [dejavu]<div id="navigation_1">                 <div id="navigation_2"><ul>...
Menu liste e floatdiv#navigation_1{text­   div#navigation_2{text­align: center}           align: center}li{display: inline...
Layout with Table<table width="500">        <tr><td id="header" colspan="2">         <h1>Main Title of Web Page</h1></td><...
Layout Table Less         <div id="container">                 <div id="header">                     <h1>Main Title of    ...
Esempihttp://blog.html.it/layoutgala/indexIta.html
CssZenGardenhttp://www.csszengarden.com/               •   È evidente la necessità che gli                   artisti delle...
CssZenGarden        http://www.csszengarden.com/tr/italiano/CSS consentono un controllo totale ecompleto sullo stile di un...
Validare il codice             http://jigsaw.w3.org/css-validator/Il w3c ci osserva
Bibliografia  Anche in italiano
Domande?                  Slide:     http://cypher.informazione.me/                  Code:https://github.com/inFormazione/...
Upcoming SlideShare
Loading in...5
×

Html e Css - 3 | WebMaster & WebDesigner

357

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
357
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html e Css - 3 | WebMaster & WebDesigner

  1. 1. HTML e CSS [3]Synergia – Matteo Magni
  2. 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. 3. Elementi Tabelle• Lelemento 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.• Lelemento TH definisce una cella che contiene informazioni di intestazione.• Lelemento TD definisce una cella che contiene dati.
  4. 4. Tabelle AccessibiliLe righe di tabella possono essere <TABLE>raggruppate in unintestazione 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 tabelleindipendentemente dallintestazione 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...nellintestazione 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. 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 lattributo lang, ecc., per adattare lHTML ai propri bisogni ed ai propri gusti.
  6. 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. 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 linterpretazione. • 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. 8. HTML only? • Abbiamo lHTML, ci serve altro?
  9. 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. 10. Cascading Style SheetsIl CSS (Cascading Style Sheets o Fogli di stile) è un linguaggioinformatico usato per definire la formattazione di documentiHTML, XHTML e XML ad esempio in siti web e relative pagineweb. Le regole per comporre il CSS sono contenute in uninsieme di direttive (Recommendations) emanate a partire dal1996 dal W3C.Lintroduzione del CSS si è resa necessaria per separare icontenuti dalla formattazione e permettere una programmazionepiù chiara e facile da utilizzare, sia per gli autori delle pagineHTML che per gli utenti. (Wikipedia)
  11. 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 unarea 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. 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. 13. Css - inline<h1 style="color: red; background: black;">...</h1>Non ho tutti i vantaggi di riuso del codice, ma posso usarela ricchezza degli stili Css.
  14. 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 lattributo style</head> • Di solito si inserisce allinterno<body> dellelemento head
  15. 15. Css esterni<html> <style><head> @import <link rel="stylesheet"  url(style.css);type="text/css"  </style>href="style.css"></head><body>
  16. 16. <link> e @import:• Il tag link consente di collegare • Come <link> la direttiva allhtml altri documenti al @import allinterno 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 allinizio del foglio di un foglio di stile il tag link deve stile. essere allinterno dellelemento • Permette di avere un foglio di head. stile che ne contiene un altro• utilizza gli attributi rel e type
  17. 17. Commeti Css/* Commenti multi lineIo sono un commento Css*/ /* segno di apertura */ segno di chiusura
  18. 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 vienetitle=”green”> sempre usato - con import non si possono caricare fogli di stile alternativi
  19. 19. CssStruttura delle regole • Selettore – Indica su quale elemento del documento vogliamo agire. • Blocco delle dichiarazioni – Proprietà – Valore
  20. 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. 21. Raggruppare i selettorih1 {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. 22. Selettore Universale * {color:red} Introdotto dai css2 È lequivalente di un selettore raggruppato con tutti gli elementi del documento
  23. 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. 24. Selettore class - Attributo class• Funziona come lid 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. 25. Pseudoclassi• Le pseudoclassi a:link {…} identificano a:hover {…} elementi in base a:visited {…} alle loro proprietà.
  26. 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- lallineamento 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. 27. Giochiamo un po con i valoriColori: 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. 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:bothclear:right clear:left
  29. 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. 30. Menu liste e floatdiv#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. 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. 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. 33. Esempihttp://blog.html.it/layoutgala/indexIta.html
  34. 34. CssZenGardenhttp://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, lunica cosa che viene modificata è il file .css esterno. Si, e proprio così!
  35. 35. CssZenGarden http://www.csszengarden.com/tr/italiano/CSS consentono un controllo totale ecompleto sullo stile di un documentoipertestuale. Lunico modo per spiegarlo,in modo da stimolare linteresse nellepersone, è mostrare cosa tutto questopuò effettivamente implicare, una voltache le redini sono messe nelle mani dicoloro i quali sono in grado di crearebellezza dalla struttura. Fino ad oggi,gran parte degli esempi dei trucchi ehacks più interessanti sono stati illustratida specialisti di struttura e codice. Idesigner devono ancora fare la loroparte. Questo stato di cose devecambiare.
  36. 36. Validare il codice http://jigsaw.w3.org/css-validator/Il w3c ci osserva
  37. 37. Bibliografia Anche in italiano
  38. 38. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×