XHTML e CSS

Moreno Marzolla

INFN Sezione di Padova

moreno.marzolla@pd.infn.it

http://www.dsi.unive.it/~marzolla

Ringraziamenti

Corso di Tecnologie Web, prof. Fabio Vitali, Università di Bologna

Cos'è (X)HTML?

HTML è un tipo di documento SGML (esiste un DTD di HTML), che viene usato dai browser WWW per visualizzare documenti ipertestuali.

Tramite HTML è possibile realizzare documenti con una semplice struttura, con aspetti grafici anche sofisticati, con testo, immagini, oggetti interattivi e connessioni ipertestuali ad altri documenti

Fino ad oggi i browser si sono preoccupati poco della correttezza sintattica o strutturale dei documenti HTML.

Questo significa che tra un documento HTML visualizzabile da un browser WWW ed un documento HTML corretto esistono differenze anche sensibili.

Usare XHTML

Separazione di struttura e presentazione

Molti degli aspetti presentazionali di HTML vengono sostituiti o affiancati da altri meccanismi. Questo porta in particolare a "deprecare" gli aspetti più presentazionali di HTML (ad esempio, l’elemento FONT), e a proporre meccanismi alternativi, più indipendenti e sofisticati (ad esempio, i CSS).

Accessibilità universale

Via via che si considera il supporto di un numero maggiore di utenti, maggiori sono le differenze tra di essi: esigenze linguistiche, minorazioni fisiche, architetture diverse, modalità diverse di fruizione delle pagina richiedono gli autori di considerare appropriatamente le specifiche esigenze di tutti.

XHTML

Versione di HTML in notazione XML

Sostanzialmente simile a HTML 4.01, con alcune differenze importanti

I documenti XHTML dovrebbero iniziare con l'intestazione standard <?xml version=”1.0”?>

Tutti i tag aperti devono essere chiusi

Tutti i valori degli attributi vanno racchiusi tra virgolette

I documenti XHTML devono importare un DTD esterno (il DTD corrispondente al livello di conformità)

XHTML

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">

<head>

<title>Virtual Library</title>

</head>

<body>

<p>This is a test page.</p>

</body>

</html>

XHTML: Livelli di conformità

Strict XHTML

Presenta notevoli differenze con HTML, e rimuove molti elementi HTML utilizzati ai soli scopi di presentazione. E' necessario usare CSS per dare alle pagine l'aspetto voluto

Transitional XHTML

Per coloro che desiderano che le proprie pagine siano compatibili con browser datati che non supportano stylesheet

Frameset XHTML

Come strict XHTML, con in più la possibilità di utilizzare i frames

XHTML: Livelli di conformità

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Strict

Transitional

Frameset

Differenze principali tra
XHTML e HTML / 1

I documenti XHTML devono essere ben formati

I nomi dei tag e degli attributi devono essere in minuscolo

Per tutti gli elementi è indispensabile indicare il tag di chiusura

Anche per quelli vuoti: <br/> al posto di <br>

I valori degli attributi devono sempre essere racchiusi tra virgolette

<table columns=”1”> anziché <table columns=1>

Differenze principali tra
XHTML e HTML / 2

Attenzione ad includere gli script: i caratteri < e & hanno un significato speciale in XML

<script type="text/javascript">

<![CDATA[

... unescaped script content ...

]]>

</script>

Come faccio a sapere se la mia pagina è XHTML valido?

W3C Validation Service: http://validator.w3.org

Entità predefinite

XHTML definisce una serie di entità che devono essere usate:

Per rappresentare caratteri riservati (es. < e & )

Per lettere accentate e altri simboli

Esempi

amp	&	quot	“

lt (less than)	<	gt (greater than)	>

reg	®	nbsp (non-breaking space)

Aelig	Æ	Aacute	Á

Agrave	À	Auml	Ä

aelig	æ	aacute	á

agrave	à	auml	ä

ccedil	ç	ntilde	ñ

Attributi globali: coreattrs

Sono attributi globali quelli definiti su tutti gli elementi del linguaggio XHTML.

I coreattrs costituiscono attributi di qualificazione e associazione globale degli elementi. Per lo più per CSS e link ipertestuali.

id: un identificativo unico (su tutto il documento)

style: un breve stile CSS associato al singolo elemento

class: una lista (separata da spazi) di nomi di classe (per attribuzione semantica e di stile CSS)

title: un testo secondario associato all’elemento (per accessibilità e informazioni aggiuntive)

Attributi globali: i18n ed eventi

Gli attributi i18n garantiscono l’internazionalizzazione del linguaggio e la coesistenza di script diversi

lang: una codifica dei linguaggi umani (stringa a due caratteri: it, en, fr, etc. da RFC1766)

dir: uno dei due valori ltr (left-to-right) o rtl (right-to-left) per indicare la direzione di flusso secondario del testo.

Gli attributi di evento permettono di associare script a particolari azioni sul documento e sui suoi elementi:

onclick, ondoubleclick, onmouseover, onkeypress, ecc.

Formato generale di una pagina

<!DOCTYPE html ... >

<html xmlns=... >

<head>

<title>Mia Home Page</title>

</head>

<body>

<p>Benvenuti nella mia pagina WEB</p>

</body>

</html>

Formato generale di una pagina

<!DOCTYPE html ... >

<html xmlns=... >

<head>

<title>Titolo della pagina</title>

</head>

<body>

<h1>Titolo del capitolo</h1>

<h2>Titolo della sezione</h2>

<p>Primo Paragrafo</p>

<p>Secondo Paragrafo</p>

</body>

</html>

Elementi inline / 1

Gli elementi inline (o di carattere) non spezzano il blocco (non vanno a capo)

Si dividono in elementi fontstyle e elementi phrase.

I tag fontstyle specificano informazioni specifiche di rendering. Molti sono deprecati, e si suggerisce comunque sempre di usare gli stili CSS.

tt (TeleType, font monospaziato, ad es. Courier),

i (corsivo),

b grassetto,

u (sottolineato - deprecato),

s e strike (testo barrato - deprecato),

big, small (testo più grande e più piccolo)

Elementi inline / 2

I tag phrase (di fraseazione o idiomatici) aggiungono significato a parti di un paragrafo.

em (enfasi),	strong (enfasi maggiore),

dfn (definizione),	code (frammento di programma),

samp (output d’esempio),	kbd (testo inserito dall’utente),

var (variabile di programma),	cite (breve citazione),

q (citazione lunga),	abbr (abbreviazione)

acronym (acronimo),	sup e sub (apice e pedice),

bdo (bidirectional override),	span (generico elemento inline)

Tag di blocco

I tag di blocco definiscono l’esistenza di blocchi di testo che contengono elementi inline.

Elementi base:

p (paragrafo),

div (generico blocco),

pre (blocco preformattato),

address (indicazioni sull’autore della pagina),

blockquote (citazione lunga)

Blocchi con ruolo strutturale

h1, h2, h3, h4, h5, h6 (intestazione di blocco)

<div> e <span>

Sono i cosiddetti elementi generici: privi di caratteristiche semantiche o presentazionali predefinite, assumono quelle desiderate con l’aiuto dei loro attributi (style, class, lang).

<div> mantiene la natura di elemento blocco, e <span> la natura di elemento inline, ma ogni altra caratteristica è neutra.

Link

Un URI individua una risorsa esterna a cui il documento fa riferimento (es. immagini, link, script, fogli di stile, oggetti multimediali, ecc.)

Un URI assoluto specifica tutte le parti rilevanti dell'indirizzo della risorsa:

http://www.sito.com/dir1/dir2/pippo.html#pluto

Un URI relativo, invece, non specifica alcune parti a partire da sinistra.

Se la base è http://www.sito.com/dir1/dir2/pippo.html#pluto

… allora…

/dir3/paperino.html corrisponde a http://www.sito.com/dir3/paperino.html,

minnie.html corrisponde a http://www.sito.com/dir1/dir2/minnie.html

#nonnapapera corrisponde a http://www.sito.com/dir1/dir2/pippo.html#nonnapapera

Link interni

<p>

<a href=”#prima”>Prima sezione</a> oppure <a href=”#seconda”>Seconda sezione</a>

</p>

<h1><a name=”prima”>Prima sezione</a></h1>

<p>Questa &egrave; la prima sezione</p>

<h1><a name=”seconda”>Seconda sezione</a></h1>

<p>Questa &egrave; la seconda sezione</p>

Liste

<ul>

<li>Primo elemento</li>

<li>Secondo elemento</li>

<li>Terzo elemento</li>

</ul>

<ol>

<li>Primo elemento</li>

<li>Secondo elemento</li>

<li>Terzo elemento</li>

</ol>

Immagini

<img src=”map.png” alt=”Mappa per raggiungere casa mia”/>

Alcuni attributi:

src (obbligatorio): l'URI del file contenente l'immagine.

alt: testo alternativo in caso di mancata visualizzazione dell’immagine

name: un nome usabile per riferirsi all’immagine

usemap: indica che l'immagine è una mappa client-side

ismap: indica che l’immagine è una mappa server-side

width: forza una larghezza dell'immagine.

height: forza una altezza dell'immagine.

align, border, vspace, hspace: deprecati, specificano il rendering.

Tabelle

<table border=”1”>

<tr>

<td>Uno</td>

<td>Due</td>

<td>Tre</td>

</tr>

<tr>

<td>Quattro</td>

<td colspan=”2”>Cinque</td>

</tr>

</table>

Tabelle / 1

<table>

Introduce una tabella, ed è composto di una etichetta, una descrizione di colonne, una intestazione, una conclusione ed un corpo.

Attributi:

summary: una descrizione testuale del contenuto della tabella per browser non grafici

align, width: allineamento e larghezza della tabella rispetto alla pagina. Deprecati

cellpadding, cellspacing: spazio tra cella e testo e tra cella e cella, espresso in pixel.

frame, rules, border: tipo di bordo associato alla tabella o alle singole celle.

Tabelle / 2

<caption>

Introduce una etichetta per la tabella.

<thead>, <tfoot>, <tbody>

La testa, la coda e il corpo della tabella. Tutti e tre contengono righe di tabella (elementi <tr>)

<colgroup>, <col>

Permettono di descrivere l’aspetto di colonne e gruppi di colonne della tabella. Attributi:

span: il numero di colonne a cui assegnare le proprietà

width: la larghezza in pixel della colonna

align, valign: allineamento orizzontale e verticale del contenuto della colonna

Tabelle / 3

<tr>

Introduce una riga di una tabella. Attributi:

align, valign: allineamento orizzontale e verticale del contenuto della tabella

<td>, <th>

Una cella di dati o di intestazione. Attributi:

width, height (deprecati): larghezza ed altezza della cella

nowrap (deprecato): esclude la formattazione in paragrafo del contenuto

align, valign: allineamento orizzontale e verticale del contenuto della colonna

colspan, rowspan: estende la cella a coprire più colonne o più righe della tabella.

Esempio

<table border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar.">

<caption>Cups of coffee consumed by each senator</caption>

<tr>

<th>Name</th>

<th>Cups</th>

<th>Type of Coffee</th>

<th>Sugar?</th>

</tr>

<tr>

<td>T. Sexton</td>

<td>10</td>

<td>Espresso</td>

<td>No</td>

</tr>

<tr>

<td>J. Dinnen</td>

<td>5</td>

<td>Decaf</td>

<td>Yes</td>

</tr>

</table>

CSS

Cos'è uno stylesheet?

Pagine XHTML e CSS sono complementari

XHTML definisce il contenuto di un documento

CSS ne definisce l'aspetto, o la presentazione

Lo stesso documento XHTML può essere presentato in modi diversi, in base allo stile applicato

CSS

CSS level 1 (W3C Rec. dic. 1996)

E' un linguaggio di formattazione visiva

Permette di specificare caratteristiche tipografiche e di presentazione per gli elementi di un documento HTML destinato ad essere visualizzato.

CSS level 2 (W3C Rec. Mag. 1998)

introduce il supporto per media multipli (es. aurali), e un linguaggio di layout sofisticato e complesso.

Il supporto dei vari browser a CSS è complesso

tutti hanno supportato aspetti diversi ed incompatibili delle caratteristiche di CSS.

Ancora oggi non tutti i browser supportano per intero level 2, e d'altra parte nessuno ha mai supportato soltanto level 1

CSS e HTML / 1

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">

<head>

<title>Moreno Marzolla Teaching Activities</title>

<link rel="stylesheet" type="text/css"
href="css-main.css" media="screen"/>

<link rel="stylesheet" type="text/css"
href="css-print.css" media="print"/>

</head>

<body>

....

CSS e HTML / 2

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">

<head>

<title>Moreno Marzolla Teaching Activities</title>

<style type=”text/css”>

h1 { color: #00ff00 };

</style>

</head>

<body>

....

CSS e HTML / 3

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">

<head>

<title>Moreno Marzolla Teaching Activities</title>

<style type=”text/css”>

@import url(/css/stile.css)

</style>

</head>

<body>

....

Tipi di media / 1

screen

Intended for non-paged computer screens.

tty

dispositivi con font a spaziatura fissa

tv

dispositivi con bassa risoluzione, basso numero di colori, limitata possibilità di scroll (es. televisori)

projection

videoproiettori

Tipi di media / 2

handheld

dispositivi portatili (schermo piccolo, spesso b/n, grafica bitmap, banda limitata)

print

stampanti

braille

dispositivi con feedback braille

aural

sintetizzatori vocali

all

tutti i dispositivi

Sintassi generale dei CSS

I CSS si compongono di una serie di regole

Per ogni elemento HTML si controlla se ad esso si applica una regola

In caso affermativo, a quell'elemento (ed eventualmente al suo contenuto) si applicano le formattazioni indicate nel corpo della regola

selettore {

proprietà: valore;

proprietà: valore;

...

}

Esempio

p {

font-weight: bold;	/* carattere grassetto */

color: #0000ff;	/* colore bianco */

margin-left: 2em;	/* margine sinistro */

}

Tutti i paragrafi (tag 'p') vengono visualizzati in grassetto, testo in bianco e margine sinistro pari alla larghezza di due lettere 'm'

Esempio

h1 {

/* top	right bottom	left */

margin: 10pt	0pt	10pt	0pt;

display: block;

padding: 6pt;

background-color: #00ffff; /* aqua */

color: #000000;

text-align: center;

border: thin solid #00bec1;

}

Questa è una intestazione di primo livello

10pt

Selettori / 1

h1 { ... }

Tutti i tag 'h1'

h1, h2, h3 { ... }

(Raggruppamento) Tutti i tag 'h1', oppure 'h2', oppure 'h3'

p.citazione

Tutti i tag 'p' con attributo 'class' settato a “citazione”

<p class=”citazione”>blah blah blah</p>

.citazione

Tutti i tag con attributo 'class' settato a “citazione”

<div class=”citazione”>...</div>

<p class=”citazione”>...</p>

Selettori / 2

#navbar

Tutti i tag con attributi 'id' settato a “navbar”

<div id=”navbar”>...</div>

p#autore

Tutti i tag 'p' con attributo 'id' settato a “autore”

<p id=”autore”>Moreno Marzolla</p>

div p { ... }

Tutti i tag 'p' che sono discendenti di un tag 'div'

<div>...<p>blah</p>...</div>

Selettori / 3

.navbar a { ... }

Tutti i tag 'a' che sono discendenti di un tag qualsiasi con attributo 'class' settato a “navbar”

<div class=”navbar”>...<a href=”...”>...</a>...</div>

a[href] { ... }

Tutti i tag 'a' che hanno un attributo “href” settato ad un qualche valore

Direttamente all'interno dei tag, utilizzanto l'attributo “style”

<p style=”color: #ffffff”>blah</p>

Selettori / 4

div > p

Tutti i tag 'p' che sono figli diretti di 'div'

h1+p

I tag 'p' che sono immediatamente preceduti da un tag 'h1'

Selettori pseudo-classe (E:first-child, E:link, E:visited, E:hover, ...)

first-child: vero se l'elemento E è il primo figlio del proprio genitore.

link, visited: vero se l'elemento E è, rispettivamente, un link non ancora visitato o un link già visitato.

hover, active, focus: vero se, rispettivamente, sull'elemento E passa sopra il mouse, il mouse è premuto, o il controllo è selezionato per accettare input.

lang(c): vero se l'elemento ha selezionata la lingua c.

Valori ereditati

Se non viene specificata una proprietà, CSS assume un valore di default.

A parte pochi casi, questo è sempre "inherit". Questo significa che la proprietà assume lo stesso valore che ha nella scatola contenitore dell'elemento in questione. Ad esempio l'elemento em qui avrà il colore rosso.

Tra i valori non ereditati:

display (per HTML è sempre il valore naturale dell'elemento, block per p o h1, inline per em, strong, span)

background (sempre transparent)

<p style="color: red;">

Qui &egrave; <em>in corsivo</em> e qui no.

</p>

La cascata

E' possibile definire regole multiple per gli stessi elementi, e adottare un meccanismo a cascata per la loro applicazione:

User Agent: il browser definisce (o esplicitamente o implicitamente codificandole nel software) le regole di default per gli elementi dei documenti.

User: l'utente può fornire un ulteriore foglio di stile per indicare regole di proprio piacimento. Tipicamente è una funzione del browser

Author: l'autore delle pagine fornisce, nei modi visti in precedenza, i fogli di stile del documento specifico.

Regole !important : Quando una regola utente (tipicamente) è seguita dalla keyword !important, essa sovrascrive una analoga regola di senso diverso dell'autore.

p { font-size: 18pt !important }

Modello di formattazione

Esempio

p.quote {

margin: 2ex 6ex 2ex 6ex;

border: 2pt solid black;

padding: 1ex;

font-style: italic;

background-color: #00ffff;

text-align: right;

}

Unità di misura

Assolute

h1 { margin: 0.5in } /* inches, 1in = 2.54cm */

h2 { line-height: 3cm } /* centimeters */

h3 { word-spacing: 4mm } /* millimeters */

h4 { font-size: 12pt } /* points, 1pt = 1/72 in */

h5 { font-size: 1pc } /* picas, 1pc = 12pt */

h6 { font-size: 12px } /* 12 pixel */

Unità di misura

Relative

Usare le unità di misura relative, quando possibile

In questo modo, le misure verranno automaticamente scalate se la finestra viene ridimensionata.

h1 { margin: 0.5em }

/* ems, the height of the element's font */

h1 { margin: 1ex }

/* x-height, ~ the height of the letter 'x' */

h1 { font-size: 120% }

/* 120% la dimensione del font standard */

Colori

em { color: #f00 } /* #rgb */

em { color: #ff0000 } /* #rrggbb */

em { color: rgb(255,0,0) } /* integer range 0 - 255 */

em { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

Accessibilità

Cos'è l'accessibilità

“Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web”

Perché l'accessibilità del Web è importante?

“The Web offers the possibility of unprecedented access to information and interaction for many people with disabilities. That is, the accessibility barriers to print, audio, and visual media can be much more easily overcome through Web technologies.”

http://www.w3.org/WAI/

Linee guida per componenti diverse

http://www.w3.org/WAI/intro/components.php

Web Content Accessibility Guidelines (WCAG) 1.0

Provide equivalent alternatives to auditory and visual content.

Don't rely on color alone.

Use markup and style sheets and do so properly.

Clarify natural language usage

Create tables that transform gracefully.

Ensure that pages featuring new technologies transform gracefully.

Ensure user control of time-sensitive content changes.

Ensure direct accessibility of embedded user interfaces.

Design for device-independence.

Use interim solutions.

Use W3C technologies and guidelines.

Provide context and orientation information.

Provide clear navigation mechanisms.

Ensure that documents are clear and simple.

Fornire supporto per la navigazione

Usare il tag link nell'header della pagina HTML

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">

<head>

<link rel="Next" href="chapter3">

<link rel="Prev" href="chapter1">

<link rel="Start" href="cover">

<link rel="Glossary" href="glossary">

<title>Chapter 2</title>

</head>

<body>

<p>This is Chapter 2 of the book.</p>

</body>

</html>

Fornire supporto per la navigazione

Individuare chiaramente l'area del documento contenente informazioni di navigazione

Fornire un meccanismo per saltare le informazioni di navigazione

<body>

<map title="Navigation Bar">

<p>

[<a href="#how">Bypass navigation bar</a>]

[<a href="home.html">Home</a>]

[<a href="search.html">Search</a>]

[<a href="new.html">New and highlighted</a>]

[<a href="sitemap.html">Site map</a>]

</p>

</map>

<h1><a name="how">How to use our site</a></h1>

<!-- content of page -->

</body>

Fornire supporto per la navigazione

In HTML è possibile definire degli shortcut da tastiera per invocare immediatamente ad esempio dei link

Identificare cambiamenti nella lingua

<a accesskey="C" href="doc.html" hreflang="en" title="XYZ company home page">XYZ company home page</a>

<p>And with a certain <span lang="fr">je ne sais quoi</span>, she entered both the room, and his life, forever. <q>My name is Natasha,</q> she said. <q lang="it">Piacere,</q> he replied in impeccable Italian, locking the door.</p>

Descrivere i link

<a href="my-doc.html">My document is available in HTML</a>,

<a href="my-doc.pdf" title="My document in PDF">PDF</a>,

<a href="my-doc.txt" title="My document in text">plain text</a>

Identificare informazioni su righe e colonne delle tabelle

<table border="1"

summary="This table charts the number of

cups of coffee consumed by each senator,

the type of coffee (decaf or regular),

and whether taken with sugar.">

<caption>Cups of coffee consumed by each senator</caption>

<tr>

<th id="header1">Name</th>

<th id="header2">Cups</th>

<th id="header3" abbr="Type">Type of Coffee</th>

<th id="header4">Sugar?</th></tr>

<tr>

<td headers="header1">T. Sexton</td>

<td headers="header2">10</td>

<td headers="header3">Espresso</td>

<td headers="header4">No</td></tr>

<tr>

<td headers="header1">J. Dinnen</td>

<td headers="header2">5</td>

<td headers="header3">Decaf</td>

<td headers="header4">Yes</td></tr>

</table>

2006-01-08T16:17:55