HTML e i fogli di stile Dott. Chiara Braghin [email protected] Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore)

HTML e i fogli di stileHTML e i fogli di stile

Dott. Chiara Braghin [email protected]

Dott. Chiara Braghin [email protected]

Corso IFTSInformatica, Modulo 3 – Progettazione pagine web statiche

(50 ore)

Corso IFTSInformatica, Modulo 3 – Progettazione pagine web statiche

(50 ore)

C. Braghin - XML, XHTML e fogli di stile 2

HTML e stiliHTML e stili

HTML aveva inizialmente una esplicita scala di valori: Contenuto Struttura Linking Semantica Presentazione

La parte presentazionale, dunque, era l'ultima in ordine di importanza della scala di valori.

Per quel che riguarda la presentazione, il prototipo WWW di Berners-Lee aveva un linguaggio di stile che permetteva ai lettori di definire personalmente come presentare i documenti HTML.

Analogamente, le prime versioni dei browser WWW permettevano agli utenti di definire queste caratteristiche.

HTML aveva inizialmente una esplicita scala di valori: Contenuto Struttura Linking Semantica Presentazione

La parte presentazionale, dunque, era l'ultima in ordine di importanza della scala di valori.

Per quel che riguarda la presentazione, il prototipo WWW di Berners-Lee aveva un linguaggio di stile che permetteva ai lettori di definire personalmente come presentare i documenti HTML.

Analogamente, le prime versioni dei browser WWW permettevano agli utenti di definire queste caratteristiche.


I fogli di stileI fogli di stile

Il linguaggio CSS (Cascading Style Sheets, fogli di stile “a cascata”), permette di applicare aspetti di visualizzazione a documenti HTML.

Un foglio di stile è un insieme di regole che indica il tipo di formattazione da applicare.

Può essere usato all’interno di un documento HTML, con l’attributo “style” per molti tag, oppure in un documento esterno apposito (il foglio di stile vero e proprio), con suffisso .css, utilizzabile da più documenti HTML.

Tre diverse versioni: CSS1, CSS2, e CSS3 (in corso di definizione)

Non completamente supportato da tutti i browser: da usare solo le caratteristiche principali

Il linguaggio CSS (Cascading Style Sheets, fogli di stile “a cascata”), permette di applicare aspetti di visualizzazione a documenti HTML.

Un foglio di stile è un insieme di regole che indica il tipo di formattazione da applicare.

Può essere usato all’interno di un documento HTML, con l’attributo “style” per molti tag, oppure in un documento esterno apposito (il foglio di stile vero e proprio), con suffisso .css, utilizzabile da più documenti HTML.

Tre diverse versioni: CSS1, CSS2, e CSS3 (in corso di definizione)

Non completamente supportato da tutti i browser: da usare solo le caratteristiche principali


Vantaggi dei fogli di stileVantaggi dei fogli di stile

Separazione della grafica dalla struttura dei documenti :<p> <font color=“green”> Questa riga è verde. </font></p>

<style type="text/css"> <p class=“verde”>

verde { color:green} Questa riga è verde.

</style> </p>

Vantaggi: Controllo più preciso e completo dell’aspetto grafico Manutenzione grafica del sito molto più facile (si cambia un unico

foglio di stile per cambiare l’aspetto di tutte le pagine) Dimensione dei file più ridotte Semplice da capire, rispetto a tutti gli attributi degli elementi Permettono di adattare la pagina al browser (con Javascript)

Svantaggio principale: non supportati bene da tutti i browser

Separazione della grafica dalla struttura dei documenti :<p> <font color=“green”> Questa riga è verde. </font></p>

<style type="text/css"> <p class=“verde”>

verde { color:green} Questa riga è verde.

</style> </p>

Vantaggi: Controllo più preciso e completo dell’aspetto grafico Manutenzione grafica del sito molto più facile (si cambia un unico

foglio di stile per cambiare l’aspetto di tutte le pagine) Dimensione dei file più ridotte Semplice da capire, rispetto a tutti gli attributi degli elementi Permettono di adattare la pagina al browser (con Javascript)

Svantaggio principale: non supportati bene da tutti i browser


Regole di sintassiRegole di sintassi

Un foglio di stile è un insieme di regole di formattazione.

La sintassi di una regola è:selettore {blocco di dichiarazioni}

dove blocco di dichiarazioni è un insieme di coppie:{ proprietà: valore; proprietà: valore; ... }

Ad esempio:h1 { color: red; font-family: Helvetica, sans-serif; }indica che tutte le intestazioni del documento di livello 1 (cioè le parti con tag <h1>) devono essere rosse e con il tipo di carattere specificato (se disponibile).

Un foglio di stile è un insieme di regole di formattazione.

La sintassi di una regola è:selettore {blocco di dichiarazioni}

dove blocco di dichiarazioni è un insieme di coppie:{ proprietà: valore; proprietà: valore; ... }

Ad esempio:h1 { color: red; font-family: Helvetica, sans-serif; }indica che tutte le intestazioni del documento di livello 1 (cioè le parti con tag <h1>) devono essere rosse e con il tipo di carattere specificato (se disponibile).


Applicazione dello stile ad un documentoApplicazione dello stile ad un documento

Nel preambolo di un documento:<html>

<head><style type=“text/css”></style>

</head>... testo del documento ...

</html>

Questo tipo di definizione dello stile si applica a tutto (e solo) il documento

Nel preambolo di un documento:<html>

<head><style type=“text/css”></style>

</head>... testo del documento ...

</html>

Questo tipo di definizione dello stile si applica a tutto (e solo) il documento


Applicazione dello stile ad un elemento

Applicazione dello stile ad un elemento

Ad un singolo elemento:<h1 style=“color: blue”> Esempio: una sezione con titolo di colore blu</h1><p> ... Paragrafo ... </p><h1>Altra sezione</h1><p> ... Altro paragrafo ... </p>

Si usano soprattutto per modificare temporaneamente un’impostazione di stile. Ad esempio, se c’è l’indicazione che tutti gli h1 siano rossi, questo permette una singola intestazione blu (fogli di stile inline)

I livelli inferiori prendono il sopravvento su quelli superiori (cascade)

Ad un singolo elemento:<h1 style=“color: blue”> Esempio: una sezione con titolo di colore blu</h1><p> ... Paragrafo ... </p><h1>Altra sezione</h1><p> ... Altro paragrafo ... </p>

Si usano soprattutto per modificare temporaneamente un’impostazione di stile. Ad esempio, se c’è l’indicazione che tutti gli h1 siano rossi, questo permette una singola intestazione blu (fogli di stile inline)

I livelli inferiori prendono il sopravvento su quelli superiori (cascade)


Fogli di stile esterniFogli di stile esterni

Sono fogli di stile definiti in un file separato con estensione “.css”:h1 {color: red;}

p {font-family: sans-serif;}

Bisogna collegare il documento HTML con il foglio di stile:<html>

<head>

<link rel=“stylesheet” href=“stile.css” type=“text/css”></head>

... documento ...

</html>

È possibile importare più di un foglio di stile. L’ultimo ha precedenza. I fogli importati hanno minore precedenza.

Sono fogli di stile definiti in un file separato con estensione “.css”:h1 {color: red;}

p {font-family: sans-serif;}

Bisogna collegare il documento HTML con il foglio di stile:<html>

<head>

<link rel=“stylesheet” href=“stile.css” type=“text/css”></head>

... documento ...

</html>

È possibile importare più di un foglio di stile. L’ultimo ha precedenza. I fogli importati hanno minore precedenza.


Fogli di stile per differenti dispositiviFogli di stile per differenti dispositivi

Una pagina web può essere visualizzata su dispositivi con caratteristiche molto diverse: computer, PDA, cellulari di nuova generazione stampanti, dispositivi braille, screen reader

<html><head>

<title> Esempio con differenti dispositivi </title><link rel=“stylesheet” media=“screen” href=“screen.css” type=“text/css”> <link rel=“stylesheet” media=“print” href=“print.css” type=“text/css”> <link rel=“stylesheet” media=“aural” href=“screenreader.css” type=“text/css”>

</head>... documento ...

</html>

Una pagina web può essere visualizzata su dispositivi con caratteristiche molto diverse: computer, PDA, cellulari di nuova generazione stampanti, dispositivi braille, screen reader

<html><head>

<title> Esempio con differenti dispositivi </title><link rel=“stylesheet” media=“screen” href=“screen.css” type=“text/css”> <link rel=“stylesheet” media=“print” href=“print.css” type=“text/css”> <link rel=“stylesheet” media=“aural” href=“screenreader.css” type=“text/css”>


</html>


Regole di applicazioneRegole di applicazione

Uno stile applicato ad un elemento viene applicato automaticamente anche a tutti i suoi sottoelementi

<body style=“color: blue”>... testo ...<div style=“color: green”>

... testo ...</div><div> ... testo ... </div>

</body>

Cambia il colore del testo interno

Uno stile applicato ad un elemento viene applicato automaticamente anche a tutti i suoi sottoelementi

<body style=“color: blue”>... testo ...<div style=“color: green”>

... testo ...</div><div> ... testo ... </div>

</body>

Cambia il colore del testo interno


SelettoriSelettori

Selettori di tipo: si riferiscono all’elemento da formattare p { font-size : 8pt}

Selettori di attributo: valori degli attributi class e id <style type=“text/css”>

.grassetto { font-weight:bold } nuova classe#pblue { color:blue } attributo id

</style> <p id=“pblue” class=“grassetto”> Entrambi gli stili </p>

<p class=“grassetto”> Un solo stile </p> Selettore universale

* { font_weight : bold } Raggruppamento di selettori

h1, h2 { color:blue; font-size:10pt; font-weight:bold; } Figli e discendenti

selettore di figli: h1 > p { ...} selettore di discendenza: h1 p { ...}

Selettori di adiacenza p + div { ...}

Selettori di tipo: si riferiscono all’elemento da formattare p { font-size : 8pt}

Selettori di attributo: valori degli attributi class e id <style type=“text/css”>

.grassetto { font-weight:bold } nuova classe#pblue { color:blue } attributo id

</style> <p id=“pblue” class=“grassetto”> Entrambi gli stili </p>

<p class=“grassetto”> Un solo stile </p> Selettore universale

* { font_weight : bold } Raggruppamento di selettori

h1, h2 { color:blue; font-size:10pt; font-weight:bold; } Figli e discendenti

selettore di figli: h1 > p { ...} selettore di discendenza: h1 p { ...}

Selettori di adiacenza p + div { ...}


Procedimento a cascata ed ereditarietà

Procedimento a cascata ed ereditarietà

Impostazioni di stile inline definite dall’autore della pagina

Fogli di stile esterni definiti dall’autore Impostazioni personali dell’utente Impostazioni di stile predefinite del browser

impostazioni utilizzate quando qualcosa non è definito o se il browser non supporta i CSS

Se vengono definite più regole con la stessa importanza per uno stesso elemento, l’ultima definita è quella che verrà applicata

Ereditarietà: ogni figlio eredita le impostazioni del padre

Impostazioni di stile inline definite dall’autore della pagina

Fogli di stile esterni definiti dall’autore Impostazioni personali dell’utente Impostazioni di stile predefinite del browser

impostazioni utilizzate quando qualcosa non è definito o se il browser non supporta i CSS

Se vengono definite più regole con la stessa importanza per uno stesso elemento, l’ultima definita è quella che verrà applicata

Ereditarietà: ogni figlio eredita le impostazioni del padre


PseudoclassiPseudoclassi

Non definisce un elemento ma un suo particolare stato Es. a:link:hover {font-size: 3 cm}

selettore:pseudoclasse { dichiarazioni }

Non definisce un elemento ma un suo particolare stato Es. a:link:hover {font-size: 3 cm}

selettore:pseudoclasse { dichiarazioni }

PSEUDOCLASSE

:link

:visited

:active

:hover

:focus

RISULTATO

link non visitato

link visitato

link attivo

vi si trova sopra il mouse

elemento attivo (tab)


PseudoelementiPseudoelementi

Consentono un controllo approfondito sui formati tipografici degli elementi dei blocchi Es. p:first-letter { color:red }

Non sempre sono supportati dai browser (IE4 e NS4)

Consentono un controllo approfondito sui formati tipografici degli elementi dei blocchi Es. p:first-letter { color:red }

Non sempre sono supportati dai browser (IE4 e NS4)

PSEUDOELEMENTO

:first-letter

:first-line

:before

:after

RISULTATO

prima lettera di un blocco

prima riga di un blocco

testo da aggiungere prima o dopo un elemento


Sistemi di misuraSistemi di misura

Esistono diverse unità di misura; si dividono in: relative: ex, em, percentuale assolute: cm, mm, in, pt, px, pc

Esistono diverse unità di misura; si dividono in: relative: ex, em, percentuale assolute: cm, mm, in, pt, px, pc

Unitàem

ex

px

in

cm

mm

pt

pc

%

DefinizioneAltezza media del font utilizzato

Altezza della x nel font utilizzato

Numero di pixel nello schermo

Inch, pollici (1 in = 2,54 cm)

Centimetri

Millimetri

Punti (1 pt = 1/72 pollici)

Pica (1 pc = 12 punti)

Valore in percentuale relativo a quello dell’elemento principale

Esempioh1 { margin:0.5em }

h2 { margin: 1ex }

p { font-size:12px }

p { font-size: 0.5in }

p { font-size: 0.3cm }

p { font-size: 3mm }

p { font-size:12pt }

p { font-size: 1pc }

p { line-height:120% }


Definizione dei coloriDefinizione dei colori

Colori predefiniti white, red, green

Espressi con il formato RGB (Red, Green, Blue) #RRGGBB

#FFFFFF rappresenta il bianco rgb(y,y,y) oppure rgb(y%, y%, y%)

rgb(255,0,0) o rgb(100%,0%,0%) rappresentano il rosso brillante

Colori che funzionano su tutti i browser

Colori predefiniti white, red, green

Espressi con il formato RGB (Red, Green, Blue) #RRGGBB

#FFFFFF rappresenta il bianco rgb(y,y,y) oppure rgb(y%, y%, y%)

rgb(255,0,0) o rgb(100%,0%,0%) rappresentano il rosso brillante

Colori che funzionano su tutti i browser maroon navy olive purple red silver teal yellow

aqua black blue fuchsia gray green lime white


Definizione degli URLDefinizione degli URL

Gli URL vengono definiti in questo modo: url(protocollo://server/percorso)

Esempio:<html>

<head><style type=“text/css”></style>


</html>

Gli URL vengono definiti in questo modo: url(protocollo://server/percorso)

Esempio:<html>

<head><style type=“text/css”></style>


</html>


Il testoIl testo

La proprietà font-family permette di specificare il tipo di carattere: font-family: Arial, Helvetica, sans-serif font-family: Time New Roman, Symbol

Si deve tener conto che non sempre il carattere scelto è supportato Stile

Corsivo: font-style Dimensione: font-size Livelli di grassetto: font-weight (bold, normal, bolder,lighter) Variante maiuscoletto: font-variant Condensare il testo: font-stretch

Testo Distanza tra le lettere: letter-spacing Distanza tra le parole: word-spacing Allineamento: text-align

La proprietà font-family permette di specificare il tipo di carattere: font-family: Arial, Helvetica, sans-serif font-family: Time New Roman, Symbol

Si deve tener conto che non sempre il carattere scelto è supportato Stile

Corsivo: font-style Dimensione: font-size Livelli di grassetto: font-weight (bold, normal, bolder,lighter) Variante maiuscoletto: font-variant Condensare il testo: font-stretch

Testo Distanza tra le lettere: letter-spacing Distanza tra le parole: word-spacing Allineamento: text-align


ElenchiElenchi

La proprietà list-style-type permette di modificare i punti elenco

<ul style=“list-style-type:disc”>

<li> primo punto </li>

<li style=“list-style-type:square”> secondo punto </li>

</ul>

primo punto secondo punto

Si possono modificare anche gli stili dei punti numerati

La proprietà list-style-type permette di modificare i punti elenco

<ul style=“list-style-type:disc”>

<li> primo punto </li>

<li style=“list-style-type:square”> secondo punto </li>

</ul>

primo punto secondo punto

Si possono modificare anche gli stili dei punti numerati


Allineamento e marginiAllineamento e margini

Allineamento: text-align left right center justify

Margini: margin-right margin-left margin-top margin-bottom

Allineamento: text-align left right center justify

Margini: margin-right margin-left margin-top margin-bottom


Box ModelBox Model

Rettangolo in cui viene visualizzato un elemento: Rettangolo in cui viene visualizzato un elemento:

Contenuto

padding

border-top

border-bottom

bord

er-

left

bord

er-rig

ht

margin-top

margin-bottom

top

bottom

left

righ

t


Box ModelBox Model

<html> <head>

<title>Esempio Box Model</title>

</head> <body>

<h1>Titolo</h1><p> Testo normale. </p>

</body> </html>

<html> <head>

<title>Esempio Box Model</title>

</head> <body>

<h1>Titolo</h1><p> Testo normale. </p>

</body> </html>

h1 { background-color: teal;

padding: 10px;

margin: 5px;

border-width: 5px;

border-color: silver;

border-style: inset;

font-family: Verdana, Helvetica, sans-serif;

font-size: 50px;

font-style: italic;

font-variant: small-caps;

font-weight: bold;

color: silver }

h1 { background-color: teal;

padding: 10px;

margin: 5px;

border-width: 5px;

border-color: silver;

border-style: inset;

font-family: Verdana, Helvetica, sans-serif;

font-size: 50px;

font-style: italic;

font-variant: small-caps;

font-weight: bold;

color: silver }


PosizionamentoPosizionamento

Le tabelle vengono spesso usate con il solo scopo di posizionare gli elementi nello schermo

La versione CSS2 dei fogli di stile permette di agire sulla disposizione degli elementi nella pagina interagendo solo con gli elementi <div>

Tre modalità principali tramite la proprietà position: posizionamento relativo posizionamento assoluto

Proprietà float

Le tabelle vengono spesso usate con il solo scopo di posizionare gli elementi nello schermo

La versione CSS2 dei fogli di stile permette di agire sulla disposizione degli elementi nella pagina interagendo solo con gli elementi <div>

Tre modalità principali tramite la proprietà position: posizionamento relativo posizionamento assoluto

Proprietà float


PosizionamentoPosizionamento

<html> <head>

<title>Esempio Posizionamento</title>

</head> <body>

<h1 class=“ditta”> ACME s.r.l.</h1><p class=“indirizzo”> Grand Canyon, 17</p><p class=“state”>

Arizona</p></body>

</html>

<html> <head>

<title>Esempio Posizionamento</title>

</head> <body>

<h1 class=“ditta”> ACME s.r.l.</h1><p class=“indirizzo”> Grand Canyon, 17</p><p class=“state”>

Arizona</p></body>

</html>

.ditta {display: block; width:10 cm;

background-color: teal; color:silver;

border: thick silver inset;

margin: 5mm; }

.indirizzo { display: block;

font-size: 20pt;margin-left: 5pt; }

.state { display: block;

font-family: monospace;

margin-left: 20pt;}

.ditta {display: block; width:10 cm;

background-color: teal; color:silver;

border: thick silver inset;

margin: 5mm; }

.indirizzo { display: block;

font-size: 20pt;margin-left: 5pt; }

.state { display: block;

font-family: monospace;

margin-left: 20pt;}


Un esempio più complicato - 1Un esempio più complicato - 1

html,body{margin: 0;padding: 0;height: 100%;}

body{background: url(images/linea_gialla.gif)

repeat-y 0%;font-family: Verdana, Helvetica, sans-serif;font-size: 0.9em;}

.titolo_pagina{font-size: 2em;font-weight: bold;font-variant: small-caps;}

.titolo{font-size: 1.5em;font-variant: small-caps;}

html,body{margin: 0;padding: 0;height: 100%;}

body{background: url(images/linea_gialla.gif)

repeat-y 0%;font-family: Verdana, Helvetica, sans-serif;font-size: 0.9em;}

.titolo_pagina{font-size: 2em;font-weight: bold;font-variant: small-caps;}

.titolo{font-size: 1.5em;font-variant: small-caps;}

#banner{height: 100px;background-color: #FFCC00;}

#logo{background-image:

url(images/logo_unive.gif);background-position:right;background-repeat:no-repeat;height: 80px;float: left;width: 120px; padding: 10px 5px 5px 5px;}

#corso{margin-top:0px;text-align: left;padding: 0px 0px 0px 50px;}

#banner{height: 100px;background-color: #FFCC00;}

#logo{background-image:

url(images/logo_unive.gif);background-position:right;background-repeat:no-repeat;height: 80px;float: left;width: 120px; padding: 10px 5px 5px 5px;}

#corso{margin-top:0px;text-align: left;padding: 0px 0px 0px 50px;}


Un esempio più complicato - 2Un esempio più complicato - 2

#path{height: 20px;background-color: #000000;font-size: 14px;font-weight:bold;color: #FFCC00;}

#sidebar{float: left;width: 130px; padding: 10px 5px 0px 5px;

color: #FFF;}

#sidebar a{padding: 2px 0px;text-decoration: underline;}

.attenzione{color: #FF7700;}

#path{height: 20px;background-color: #000000;font-size: 14px;font-weight:bold;color: #FFCC00;}

#sidebar{float: left;width: 130px; padding: 10px 5px 0px 5px;

color: #FFF;}

#sidebar a{padding: 2px 0px;text-decoration: underline;}

.attenzione{color: #FF7700;}

.piccolo{font-size: .5em;}

#content{margin-left: 140px;padding: 0px 0px 0px 30px;background-color: #FFFFFF;}

#form_registrazione{padding: 10px;border: 1px solid #000;background-color: #FFE88A;width:650px;}

#form_registrazione span{float: left;width: 130px;line-height: 23px;margin-right: 3px;text-align: right;}

.piccolo{font-size: .5em;}

#content{margin-left: 140px;padding: 0px 0px 0px 30px;background-color: #FFFFFF;}

#form_registrazione{padding: 10px;border: 1px solid #000;background-color: #FFE88A;width:650px;}

#form_registrazione span{float: left;width: 130px;line-height: 23px;margin-right: 3px;text-align: right;}


BibliografiaBibliografia

Specifiche W3C http://www.w3.org/Style/CSS/

Validatore http://jigsaw.w3.org/css-validator/

Tutorial in Italiano http://www.html.it/css/

Manuale HTML e CSS AA. VV. HTML 4.01. Apogeo 2001

Libro on-line http://www.chongluo.com/books/webdesign/index.htm

Specifiche W3C http://www.w3.org/Style/CSS/

Validatore http://jigsaw.w3.org/css-validator/

Tutorial in Italiano http://www.html.it/css/

Manuale HTML e CSS AA. VV. HTML 4.01. Apogeo 2001

Libro on-line http://www.chongluo.com/books/webdesign/index.htm

http://www.w3.org/TR/xhtml1/

http://www.w3.org/TR/xhtml1/

Documents

HTML e i fogli di stile Dott. Chiara Braghin [email protected] Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore)