HTML + CSS - Lezione 1

1,069 views

Published on

Prima lezione su HTML + CSS per gli studenti del D'Annunzio di Gorizia

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

No Downloads
Views
Total views
1,069
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
64
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

HTML + CSS - Lezione 1

  1. 1. HTML + CSS<br />Ovvero: come strutturare e formattare come si deve le pagine web.<br />LEZIONE 1<br />1/24<br />
  2. 2. RIPASSINO:<br />Ciascuna risorsa su Internet viene identificata da un URL:http://www.sito.com/cartella/file.jpg<br />Il World Wide Web si basa su una architettura Client-Server<br />Un sito web è un ipertesto fatto di pagine web linkate tra loro<br />2/24<br />
  3. 3. Le pagine web sono documenti di testo scritti in linguaggio HTML(HyperText Markup Language)che contengono le indicazioni sugli elementi che le compongono<br />3/24<br />
  4. 4. La home page di solito si chiamaindex.html(.htm .php .asp ...)<br />4/24<br />
  5. 5. HTML non è un linguaggio di programmazione,ma un linguaggio di contrassegno, o di marcatura,che definisce la struttura di una pagina web<br />5/24<br />
  6. 6. I marcatori html sono i tag:<br /><p>Esempio di testo</p><br /><br /><br />Ciascun tag ha un significato particolare e può contenere altri tag<br />I tag vanno chiusi nell'ordine inverso in cui sono stati aperti:<br />6/24<br />
  7. 7. <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 />7/24<br />
  8. 8. <title>...</title>Definisce il titolo di una pagina web<br />8/24<br />
  9. 9. <div>...</div>Rappresenta un'area della pagina web:<br />9/24<br />
  10. 10. 10/24<br />
  11. 11. <h1>...</h1>Rappresenta una intestazione(abbiamo da h1 ad h6)<br />11/24<br />
  12. 12. <p>...</p>Rappresenta un singolo paragrafo<br />12/24<br />
  13. 13. Attributo src del tagimg<br /><imgsrc="pippo.jpg" />Rappresenta un’immagine<br />13/24<br />
  14. 14. Attributo href del taga<br /><a href="pluto.html">Clicca qui</a>Rappresenta un link<br />14/24<br />
  15. 15. <div> <a href="http://www.itas-dannunzio.it"> <imgsrc="logo.jpg” /> </a> <p> Clicca sul logo per visitare il sito. </p></div><br />15/24<br />
  16. 16. <ul>...</ul>Rappresenta una lista non ordinatadi elementi<br />16/24<br />
  17. 17. <li>...</li>Rappresenta un singoloelemento di una lista<br />17/24<br />
  18. 18. <div> <h2>Le province del FVG sono:</h2> <ul> <li>Gorizia</li> <li>Pordenone</li> <li>Trieste</li> <li>Udine</li> </ul></div><br />18/24<br />
  19. 19. + CSS<br />19/24<br />
  20. 20. Anche CSS non è un linguaggio di programmazione,ma è un linguaggio che consente di formattare le pagine web<br />20/24<br />
  21. 21. Formattare?!Definire le dimensioni, il posizionamento, il colore, i bordi, lo sfondo, i margini esterni ed interni, etc.di una pagina web e dei suoi singoli elementi<br />21/24<br />
  22. 22. 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<br />22/24<br />
  23. 23. Ma come si associa un file css ad una pagina web? Così:<br /><head> <link type="text/css" rel="stylesheet" href="pippo.css“ /></head><br />23/24<br />
  24. 24. Grazie dell’attenzione ;-)<br />Vincenzo Caico<br />vincenzocaico@gmail.com<br />

×