Html e Css - 3 | WebMaster & WebDesigner

388 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
388
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
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. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×