Html + CSS - Lezione 2
-
Upload
vincenzo-caico -
Category
Education
-
view
710 -
download
1
description
Transcript of Html + CSS - Lezione 2
![Page 1: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/1.jpg)
HTML + CSSOvvero: come strutturare e formattare come si deve le pagine web.
LEZIONE 2
1/23
![Page 2: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/2.jpg)
HTML è un linguaggio di contrassegno, o di marcatura,
che definisce la struttura di una pagina web
2/23
![Page 3: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/3.jpg)
<html><head>
<title>Prima pagina</title></head><body>
<div><h1>Benvenuti!</h1><p>La prima pagina web di Giuseppe Rossi</p>
</div></body>
</html>3/23
![Page 4: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/4.jpg)
<title>...</title>Definisce il titolo di una pagina web
<div>...</div>Rappresenta un'area della pagina web:
4/23
![Page 5: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/5.jpg)
5/23
![Page 6: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/6.jpg)
<h1>...</h1>Rappresenta una intestazione (da h1 ad h6)
<p>...</p>Rappresenta un singolo paragrafo
6/23
![Page 7: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/7.jpg)
<img src="pippo.jpg" />
Rappresenta un’immagine
Attributo src del tag img
7/23
![Page 8: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/8.jpg)
<a href="pluto.html">Clicca qui</a>
Rappresenta un link
Attributo href del tag a
8/23
![Page 9: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/9.jpg)
<div><a href="http://www.itas-dannunzio.it">
<img src="logo.jpg” /></a><p>
Clicca sul logo per visitare il sito.</p>
</div>
9/23
![Page 10: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/10.jpg)
<ul>...</ul>Rappresenta una lista non ordinata di elementi
<li>...</li>Rappresenta un singolo elemento di una lista
10/23
![Page 11: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/11.jpg)
<div><h2>Le province del FVG sono:</h2><ul>
<li>Gorizia</li><li>Pordenone</li><li>Trieste</li><li>Udine</li>
</ul></div>
11/23
![Page 12: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/12.jpg)
CSS è un linguaggio che consente di formattare le pagine
web
12/23
![Page 13: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/13.jpg)
Formattare:definire le dimensioni, il
posizionamento, il colore, i bordi, lo sfondo, i margini
esterni ed interni, etc.degli elementi
di una pagina web13/23
![Page 14: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/14.jpg)
Un CSS (Cascade Style Sheet)è un file che contiene un elenco
di regole come questa:
p { color: red; font-size: 15px; }
Selettore di tagProprietà
Valore
14/23
![Page 15: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/15.jpg)
<html><head>
<title>Prima pagina</title></head><body>
<div><h1>Benvenuti!</h1><p>La prima pagina web di Giuseppe Rossi</p>
</div></body>
</html>15/23
![Page 16: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/16.jpg)
Struttura ad albero dell’HTML:<html>
<head> <body>
<title> <div>
<h1> <p>16/23
![Page 17: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/17.jpg)
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.
17/23
![Page 18: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/18.jpg)
Esempio:body { color: red; }p { color: yellow; }
Il testo del body (e dei suoi discendenti) sarà rosso.Ma per i p sarà giallo.
18/23
![Page 19: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/19.jpg)
<head><link type="text/css" rel="stylesheet"
href="pippo.css“ /></head>
Un file CSS si associa ad una pagina web così:
19/23
![Page 20: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/20.jpg)
colorfont-family
font-sizefont-weighttext-align
Le proprietà CSS più usate:il testo
20/23
![Page 21: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/21.jpg)
background-colorbackground-image
border-widthborder-styleborder-color
Le proprietà CSS più usate:bordi e sfondi
21/23
![Page 22: Html + CSS - Lezione 2](https://reader033.fdocuments.net/reader033/viewer/2022061202/547b8c1b5806b5cc3f8b4619/html5/thumbnails/22.jpg)
float, clear height, width
margin, paddingoverflow
22/23
Le proprietà CSS più usate:allineamenti, margini e dimensioni