Post on 30-Nov-2014
description
HTML + CSSOvvero: 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
<img src="pippo.jpg" />
Rappresenta un’immagine
Attributo src del tag img
7/23
<a href="pluto.html">Clicca qui</a>
Rappresenta un link
Attributo href del tag a
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 web13/23
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
<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> <body>
<title> <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
<head><link type="text/css" rel="stylesheet"
href="pippo.css“ /></head>
Un file CSS si associa ad una pagina web così:
19/23
colorfont-family
font-sizefont-weighttext-align
Le proprietà CSS più usate:il testo
20/23
background-colorbackground-image
border-widthborder-styleborder-color
Le proprietà CSS più usate:bordi e sfondi
21/23
float, clear height, width
margin, paddingoverflow
22/23
Le proprietà CSS più usate:allineamenti, margini e dimensioni
Grazie dell’attenzione ;-)
Vincenzo Caicovincenzocaico@gmail.com