Html e Css - 3 | WebMaster & WebDesigner
0 likes621 views
Terza lezione modulo HTML e CSS del corso per WebMaster & WebDesigner
![HTML e CSS [3]
Synergia Matteo Magni](https://image.slidesharecdn.com/03htmlcss-120614085315-phpapp02/85/Html-e-Css-3-WebMaster-WebDesigner-1-320.jpg)
Html e Css - 3 | WebMaster & WebDesigner
- 1. HTML e CSS [3] Synergia Matteo Magni
- 3. 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.
- 4. Tabelle Accessibili Le righe di tabella possono essere <TABLE> raggruppate in un'intestazione della tabella, <THEAD> un piede della tabella ed una o pi湛 sezioni <TR>...informazionidiintestazione... del corpo della tabella, usando </THEAD> rispettivamente gli elementi THEAD, TFOOT <TFOOT> e TBODY. Questa suddivisione consente ai <TR>...informazioniinnota... programmi utente di supportare lo </TFOOT> scorrimento dei corpi delle tabelle indipendentemente dall'intestazione e dal <TBODY> piede. Quando si stampano delle tabelle <TR>...primarigadidatidelbloccouno... lunghe, le informazioni contenute <TR>...secondarigadidatidelbloccouno... nell'intestazione e nel piede della tabella </TBODY> possono essere ripetute su ogni pagina che <TBODY> contiene dati della tabella. <TR>...primarigadidatidelbloccodue... <TR>...secondarigadidatidelbloccodue... <TR>...terzarigadidatidelbloccodue... </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 l'attributo lang, ecc., per adattare l'HTML ai propri bisogni ed ai propri gusti.
- 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 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.
- 8. HTML only? Abbiamo l'HTML, 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"> </td> Web Master <tdwidth="249"> </td> <tdwidth="0" background="image/line_bak2.jpg">  ;</td> <tdwidth="451"class="indicons"> <fontcolor="#FF0000">Questo竪un testodicoloreROSSO</font> <fontcolor="#0000FF">Questo竪un testodicoloreBLU</font> </td> <td background="image/bk.jpg"> </td>
- 10. 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)
- 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 un'area 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 <h1style="color:red;background: black;">...</h1> Non ho tutti i vantaggi di riuso del codice, ma posso usare la ricchezza degli stili Css.
- 14. Css Incorporati <html> Elemento style 竪 il metodo pi湛 <head> facile per definire un foglio di sitle poich辿 appare nel <styletype="text/css"> documento stesso. body{ Non sfrutta il vantaggio di background:#FFFFCC; riutilizzare il codice css su pi湛 } documenti </style> Dovrebbe sempre utilizzare l'attributo style </head> Di solito si inserisce all'interno <body> dell'elemento head
- 15. Css esterni <html> <style> <head> @import <linkrel="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 all'html altri documenti al @import all'interno 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 all'inizio del foglio di un foglio di stile il tag link deve stile. essere all'interno dell'elemento Permette di avere un foglio di head. stile che ne contiene un altro utilizza gli attributi rel e type
- 17. Commeti Css /* Commenti multi line Iosonouncommento Css */ /* segno di apertura */ segno di chiusura
- 18. Fogli di stile Alternativi <linkrel="stylesheet" type="text/css"href="style.css" title=Default> <linkrel="stylesheet" type="text/css"href="black.css" title=black> <linkrel="stylesheet" type="text/css"href="green.css" - Se uno non ha il title diventa persistente e viene title=green> sempre usato - con import non si possono caricare fogli di stile alternativi
- 19. Domande? 際際滷: http://www.slideshare.net/ilbonzo Code: https://github.com/ilbonzo/Cypher mail: matteo@magni.me