Ovvero: come strutturare e formattare come si deve le pagine web
annuncio pubblicitario
HTML + CSS
Ovvero: come strutturare e
formattare come si deve le pagine
web.
LEZIONE 2
1/23
HTML è un linguaggio di
contrassegno, o di
marcatura,
che definisce la struttura
di una pagina web
2/23
<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
<title>...</title>
Definisce il titolo di una pagina web
<div>...</div>
Rappresenta un'area della pagina web:
4/23
5/23
<h1>...</h1>
Rappresenta una intestazione (da h1 ad h6)
<p>...</p>
Rappresenta un singolo paragrafo
6/23
Attributo src del tag
img
<img
src="pippo.jpg" />
Rappresenta
un’immagine
7/23
Attributo href del tag a
<a href="pluto.html">
Clicca qui</a>
Rappresenta un link
8/23
<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
<ul>...</ul>
Rappresenta una lista non ordinata di
elementi
<li>...</li>
Rappresenta un singolo elemento di una
lista
10/23
<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
CSS è un linguaggio che
consente di formattare le
pagine web
12/23
Formattare:
definire le dimensioni, il
posizionamento, il colore, i
bordi, lo sfondo, i margini
esterni ed interni, etc.
degli elementi
di una pagina web
13/23
Un CSS (Cascade Style Sheet)
è un file che contiene un elenco di
regole come questa:
p { color: red; font-size: 15px; }
Valore
Selettore di tag
Proprietà
14/23
<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
Struttura ad albero
dell’HTML:
<html>
<head>
<title>
<body>
<div>
<h1>
<p>
16/23
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
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
Un file CSS si associa ad una
pagina web così:
<head>
<link type="text/css" rel="stylesheet"
href="pippo.css“ />
</head>
19/23
Le proprietà CSS più usate:
il testo
color
font-family
font-size
font-weight
text-align
20/23
Le proprietà CSS più usate:
bordi e sfondi
background-color
background-image
border-width
border-style
border-color
21/23
Le proprietà CSS più usate:
allineamenti, margini e dimensioni
float, clear
height, width
margin, padding
overflow
22/23
