Html + CSS - Lezione 2

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

<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 [email protected]

Html + CSS - Lezione 2

Education

Transcript of Html + CSS - Lezione 2