html e css - 3 | webmaster & webdesigner

of 38/38
HTML e CSS [3] Synergia – Matteo Magni

Post on 28-Nov-2014

514 views

Category:

Documents

4 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1. HTML e CSS [3]Synergia Matteo Magni
  • 2. Tabelle http://www.diodati.org/w3c/html401/struct/tables.htmlUnatabellaesemplificativaconcelleunificateMediaOcchi
    rossialtezzapesoMaschi1.90.00340%Femmine1.70.00243%
  • 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 raggruppate in unintestazione della tabella, un piede della tabella ed una o pi sezioni ...informazionidiintestazione...del corpo della tabella, usando rispettivamente gli elementi THEAD, TFOOT e TBODY. Questa suddivisione consente ai ...informazioniinnota...programmi utente di supportare lo scorrimento dei corpi delle tabelleindipendentemente dallintestazione e dal piede. Quando si stampano delle tabelle ...primarigadidatidelbloccouno...lunghe, le informazioni contenute ...secondarigadidatidelbloccouno...nellintestazione e nel piede della tabella possono essere ripetute su ogni pagina che contiene dati della tabella. ...primarigadidatidelbloccodue... ...secondarigadidatidelbloccodue... ...terzarigadidatidelbloccodue...
  • 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

    Informazionisulcliente:

    Cognome:BorghiNome:StefanoTel:(06)5551212Email:[email protected]

    Informazionisulcliente:

    Cognome:BorghiNome:StefanoTel:(06)5551212Email:[email protected]
  • 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? Web Master &nbsp ; Questoun testodicoloreROSSO Questoun testodicoloreBLU
  • 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...Non ho tutti i vantaggi di riuso del codice, ma posso usarela ricchezza degli stili Css.
  • 14. Css Incorporati Elemento style il metodo pi facile per definire un foglio di sitle poich appare nel Dovrebbe sempre utilizzare lattributo style Di solito si inserisce allinterno dellelemento head
  • 15. Css esterni href="style.css">
  • 16. e @import: Il tag link consente di collegare Come 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 lineIosonouncommentoCss*/ /* segno di apertura */ segno di chiusura
  • 18. Fogli di stile Alternativi 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{color:white;backgroundcolor:green;}span{color:blue;backgroundcolor:black;}strong{color:blue;backgroundcolor:red;}

  • 21. Raggruppare i selettorih1{color:purple}h2{color:purple}h3{color:purple} h1,h2,h3,h4,h5,h6h4{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
    elementi oppure in pippo combinazione con i
    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
    pi elementi. pippo Possono esserci n
    elementi con la stessa

    pluto

    Possono esserci elementi oppure con pi classi div.pippo{color:yellow}
  • 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 fontfamily:"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]
      • Home title="Home">Home
      • Contatti title="Contatti">Contatti
      • azienda title="azienda">azienda
    Lo formatteremo tramite i css
  • 30. Menu liste e floatdiv#navigation_1{text div#navigation_2{textalign:center} align:center}li{display:inline} div#navigation_2/*rendoglielementi ul{width:375px;liinline*/ margin:0auto;list styletype:none;} div#navigation_2 li{float:left;width: 75px}/*Rendogli elemntilifloat*/
  • 31. Layout with TableMainTitleofWebPageContentgoeshereCopyrightW3Schools.com
  • 32. Layout Table Less
    MainTitleof WebPage
    Contentgoeshere
    CopyrightW3Schools.com
  • 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: [email protected]