Html + CSS - Lezione 2

821 views

Published on

La seconda lezione su HTML e CSS

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
821
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html + CSS - Lezione 2

  1. 1. HTML + CSS<br />Ovvero: come strutturare e formattare come si deve le pagine web.<br />LEZIONE 2<br />1/23<br />
  2. 2. HTML è un linguaggio di contrassegno, o di marcatura,che definisce la struttura di una pagina web<br />2/23<br />
  3. 3. <html> <head> <title>Prima pagina</title> </head> <body> <div> <h1>Benvenuti!</h1> <p>La prima pagina web di Giuseppe Rossi</p> </div> </body></html><br />3/23<br />
  4. 4. <title>...</title>Definisce il titolo di una pagina web <div>...</div>Rappresenta un'area della pagina web:<br />4/23<br />
  5. 5. 5/23<br />
  6. 6. <h1>...</h1>Rappresenta una intestazione (da h1 ad h6) <p>...</p>Rappresenta un singolo paragrafo<br />6/23<br />
  7. 7. Attributo src del tagimg<br /><imgsrc="pippo.jpg" />Rappresenta un’immagine<br />7/23<br />
  8. 8. Attributo href del taga<br /><a href="pluto.html">Clicca qui</a>Rappresenta un link<br />8/23<br />
  9. 9. <div> <a href="http://www.itas-dannunzio.it"> <imgsrc="logo.jpg” /> </a> <p> Clicca sul logo per visitare il sito. </p></div><br />9/23<br />
  10. 10. <ul>...</ul>Rappresenta una lista non ordinata di elementi <li>...</li>Rappresenta un singolo elemento di una lista <br />10/23<br />
  11. 11. <div> <h2>Le province del FVG sono:</h2> <ul> <li>Gorizia</li> <li>Pordenone</li> <li>Trieste</li> <li>Udine</li> </ul></div><br />11/23<br />
  12. 12. CSS è un linguaggio che consente di formattare le pagine web<br />12/23<br />
  13. 13. Formattare:definire le dimensioni, il posizionamento, il colore, i bordi, lo sfondo, i margini esterni ed interni, etc.degli elementi di una pagina web<br />13/23<br />
  14. 14. Un CSS (Cascade Style Sheet)è un file che contiene un elenco di regole come questa:<br />p { color: red; font-size: 15px; }<br />Valore<br />Proprietà<br />Selettore di tag<br />14/23<br />
  15. 15. <html> <head> <title>Prima pagina</title> </head> <body> <div> <h1>Benvenuti!</h1> <p>La prima pagina web di Giuseppe Rossi</p> </div> </body></html><br />15/23<br />
  16. 16. Struttura ad albero dell’HTML:<br /><html><head> <body><title> <div> <h1> <p><br />16/23<br />
  17. 17. CSS = fogli di stile a cascata:assegnata una regola a un selettore, la regola si propaga a tutti i tag discendenti.A meno che non definiamo altre regole per essi.<br />17/23<br />
  18. 18. Esempio:body { color: red; }p { color: yellow; }Il testo del body (e dei suoi discendenti) sarà rosso.Ma per i psarà giallo.<br />18/23<br />
  19. 19. Un file CSS si associa ad una pagina web così:<br /><head> <link type="text/css" rel="stylesheet" href="pippo.css“ /></head><br />19/23<br />
  20. 20. Le proprietà CSS più usate:<br />il testo<br />colorfont-familyfont-sizefont-weighttext-align<br />20/23<br />
  21. 21. Le proprietà CSS più usate:<br />bordi e sfondi<br />background-colorbackground-imageborder-widthborder-styleborder-color<br />21/23<br />
  22. 22. Le proprietà CSS più usate:<br />allineamenti, margini e dimensioni<br />float,clearheight,widthmargin,paddingoverflow<br />22/23<br />
  23. 23. Grazie dell’attenzione ;-)<br />Vincenzo Caico<br />vincenzocaico@gmail.com<br />

×