Html e Css - 3 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Html e Css - 3 | WebMaster & WebDesigner

  • 503 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
503
On Slideshare
465
From Embeds
38
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 38

http://cypher.informazione.me 38

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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• 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. 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. 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. 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 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. HTML only? • Abbiamo lHTML, 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 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. 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. 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 usarela 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 lattributo style</head> • Di solito si inserisce allinterno<body> dellelemento 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 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. Commeti Css/* Commenti multi lineIo 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 vienetitle=”green”> sempre usato - con import non si possono caricare fogli di stile alternativi
  • 19. CssStruttura 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 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. Selettore Universale * {color:red} Introdotto dai css2 È lequivalente 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 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. 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- 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. 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. 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. 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 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. 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. Esempihttp://blog.html.it/layoutgala/indexIta.html
  • 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. 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. 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