Accessibilité au Web : HTML et feuilles de style

Présentation générale : l'évolution du HTML
Le protocole HTTP
Structure d'un document HTML
Les feuilles de style
Techniques de fabrication des pages
Références

Plan de la conférence donnée dans le cadre de l'École Ouverte de l'Internet à l'Espace Espace Mendès France à Poitiers le 7 novembre 2000 (références remises à jour)

Présentation générale : l'évolution du HTML

Petite chronologie

The WWW Project Proposal	mars 1989	L'idée de base
Premiers travaux HTML	novembre 1992	Quelques essais
HTML 1.0 draft	juin 1993	Le premier brouillon
HTML 1.0	août 1994	Version définitive
HTML 2.0 draft	juillet 1994	Un nouveau brouillon pour une clarification nécessaire ; le HTML vu comme un arbre
HTML 2.0 (RFC 1866)	novembre 1995	P, H1..H6, formulaires, listes, une DTD mais pas de TABLE ni de FONT
HTML 3.2	09/09/1996	Toutes les extensions de tous les éditeurs : le grand mélange du fond et de la forme
CSS 1	17/12/1996	Première tentative de séparation du fond et de la forme : sélecteurs, héritage, surcharge ; mise en forme de texte caractères et blocs)
HTML 4.0	18/12/1997	Les trois variantes : strict, transitional, frameset
CSS 2	24/03/1998	Les médias non textuels (auditif etc.), extensions de sélections, numérotation
HTML 4.01	24/08/1999	corrections diverses et adaptations pour CSS2
XHTML Draft	Fin 1999	XHTML : HTML conforme avec XML
XHTML modularization	05/01/2000	XHTML comme langage extensible
XHTML 1.0	26/01/2000	La norme avec ses trois variantes : strict, transitional, frameset
XHTML Basic (Proposed recommandation)	19/12/2000	Un XHTML minimal pour les systèmes portables
XHTML 1.1 (Proposed recommandation)	06/04/2001	La norme actuelle : "Ce type de documents est essentiellement une version allègée de XHTML 1.0 Strict utilisant les modules XHTML"
Modularization of XHTML (Recommendation)	10/04/2001	version définitive des modules

Les tendances

Séparation de la forme et du fond
Supports multiples
Vers le XML
Les navigateurs sont toujours en retard
Les nouveaux outils
...

Le protocole HTTP

Client-serveur


        +---------+        +---------+
        | serveur |        | serveur |
        +---------+        +---------+
            / \                 |
             |                  |
             | 1                | 2
             |                 \ /
        +---------+        +---------+
        | client  |        | client  |
        +---------+        +---------+

Le client fait une demande, le serveur répond et renvoie un document qui sera interprété par le navigateur. Si le document inclut d'autres documents (images par ex.), le navigateur fait les nouvelles requètes nécessaires.

Un exemple

vouvant:~$ telnet mervent http
Trying 192.168.1.1...
Connected to mervent.geoffroy.melusine.eu.org.
Escape character is '^]'.
GET /gulp-86.htm HTTP1.1

HTTP/1.1 200 OK
Date: Sun, 05 Nov 2000 20:24:23 GMT
Server: Apache/1.3.14 (Unix) PHP/4.0.3
Last-Modified: Sat, 03 Jun 2000 07:12:12 GMT
ETag: "35fc6-bfd-3938afcc"
Accept-Ranges: bytes
Content-Length: 3069
Connection: close
Content-Type: text/html
X-Pad: avoid browser bug

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">
<html>

[...]

Structure d'un document HTML

SGML, HTML, XML et XHTML

SGML (Standard Generalized Markup Language) : SGML permet de décrire des langages à balises
les différentes variantes de HTML sont des langages à balises conformes à SGML avec un certain type de syntaxe ; les DTD (descritions des langages) sont prédéfinies
XML est une famille de langages conformes à SGML ; les utilisateurs peuvent créer leurs DTD
XHTML est une famille de langages qui réalisent une liaison entre HTML et XML : il s'agit de HTML reformulé avec une syntaxe XML

Pourquoi suivre les DTD ?

L'on devrait (doit) toujours produire des documents conformes à une DTD... Pourquoi ?

Pour que le navigateur puisse interpréter correctement le document
Pour favoriser le (futur) (re)traitement automatique
...

L'arborescence


+- déclarations
|
+- document +- en-tête +- champs meta
            |          +- link
            |          +- title
            |  
            +- corps   +- h1..h6, p, table...

Le logiciel Amaya permet de visualiser l'arborescence d'un document.

un exemple en HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
<title>titre de la fenêtre</title>
<link rel="stylesheet" type="text/css" href="monstyle.css" title="Mon style">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Mon titre</h1>
<p>Mon texte<br>
et la suite</p>
<hr>
</body>
<.html>

un exemple en XHTML 1.0

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">
<html lang="fr-FR" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>titre de la fenêtre</title>
<link rel="stylesheet" type="text/css" href="monstyle.css" title="Mon style">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Mon titre</h1>
<p>Mon texte<br />
et la suite</p>
<hr />
</body>
<.html>

Les éléments du corps du document

h1..h6
p
table, tr, td
dl, dt, dd
ul, ol, li
form
...

Les extensions

Côté serveur

SSI (Apache)
ASP (MS)
PHP

Côté client

ECMA Script (ex JavaScript)

Les feuilles de style

Principes

Un document doit être structuré :
- Il faut un titre H1 et un seul.
- H2 ne peut suivre que H1, H3 ne peut suivre que H2 etc. (cf. ISO-HTML)
L'aspect doit être adapté au support (écran, tablette Braille, carte sonore etc.)
Le contenu et la présentation sont disjoints (plus de FONT dans la page comme en HTML 3.2 ou 4.01 transitional)
Les mises en forme sont réutilisables.
On utilisera une mise en forme logique plutôt que physique (class="sommaire" plutôt que class="centre-italique")
On distingue les éléments en ligne (caractères, images) et les blocs (titres, paragraphes)
On peut regrouper les éléments en ligne (balise SPAN) et les blocs (balise DIV)
Les élements peuvent récupérer les propriétés des paragraphes ou titres qui les contiennent, ceux-ci récupérant eux mêmes les propriétés de <body> c'est le concept d'héritage. Si l'on force la propriété on a une surcharge.
On peut définir des styles à l'interieur d'un document et/ou dans un (des) fichier(s) externe(s). La notion de cascade définit les priorités
On peut définir des règles de sélection pour appliquer des propriétés a des éléments ppécis (par ex. des listes dans des listes).

Comment débuter

On crée (avec un éditeur de textes ou avec un logiciel specialisé) deux fichiers :
- un fichier pour le HTML (xxxxxxxx.HTM)
- un fichier pour les styles = une feuille de styles (yyyyyyyy.CSS)

La page HTML doit comporter certaines indications :
- type de HTML
- utilisation de la feuille de style

Exemple de déclaration de feuille de style

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>
<link rel="stylesheet" type="text/css" href="monstyle.css" title="Il est beau mon style !">
<title>Mon titre de fenêtre</title>
</head>

<body>
<h1>Mon titre</h1>
</body>

</html>

Dans la feuille de styles on définit des classes, et on indique les propriétés et les valeurs de ces propriétés. Dans le code HTML on utilise ces classes.

Exemple

Feuille de style

/* ma feuille de style du 15/11/1999 */
body { background-color : white ; color : black }
h1 { background-color : white ; color : red }
h2 { color : blue }
h2.vert { color : green }
.turquoise { color : #00FFFF }

Page HTML

<h1>Titre en rouge sur blanc</h1>
<h2>Sous-titre bleu (par défaut : héritage)>/h2>
<h2 class="vert">Sous-titre vert (surcharge)</h2>
<p>paragraphe noir</p>
<p class="turquoise">paragraphe turquoise</p>
<p>texte normal <span class="turquoise">texte turquoise</span>texte normal</p2>

Quelques propriétés

On ne donnera ici que quelques exemples.
La syntaxe est de la forme :
{ propriété : valeur [ ; propriété : valeur ] }

color : #aabbcc color : yellow	couleur du texte
background-color : red	couleur du fond
background-image : url(truc.jpg) background-image : url("http://www.gloups.com/par/ici/truc.png")	image de fond
text-align : justify	texte justifié, centré etc.
text-indent : 3em	retrait de première ligne
text-decoration : underline	souligné
font-family : arial,"times new roman"	police
font-style : italic	italique
font-variant : small-caps	petites capitales
font-weight : bold	gras
font-size : 32pt	taille de caractères en points typographiques
margin-top : 20pt margin-bottom : 15pt	marge avant / après bloc

Les amateurs de lettrines seront ravis de savoir qu'il existe des pseudo-éléments first-line et first-letter qui leur permettront de satisfaire leur passion. Les propriétés typographiques des liens sont également modifiables.

Nous ne ferons que mentionner ici les possibilités de comptage, la gestion du son, les images en fond, les styles de listes, les insertions avant et après un élément...
Voir directement la documentation CSS2 pour les détails.

Techniques de fabrication des pages

Les outils de composition

éditeurs de texte simples
éditeurs avec macros
composeurs spécialisés
"usines à gaz" : Zope, Cocoon

Les outils de validation

tidy
validator.w3.org

Pages statiques ou pages dynamiques ?

site qui évolue peu : pages statiques composées individuellment
pages statiques composées automatiquement
formulaires / scripts CGI
génération temps réel de toutes les pages

Quelques conseils

structurer les documents
séparer le fond de la forme
faire simple et "lisible" ; penser à l'accessiblité pour les non-voyants / mal-voyants (voir l'initiative WAI du W3C)
considérer un site comme une base de données

Références

Documentation

Sur le site du W3C www.w3c.org : les normes HTML, XHTML, CSS..., l'initiative WAI, etc.

Navigateurs, composeurs, validateurs, outillage en gros et au détail

Apache (serveur http) www.apache.org
Netscape (navigateur/composeur)www.netscape.com
Mozilla (navigateur/composeur) www.mozilla.org
Amaya (navigateur/composeur) et tidy (validateur) : sur le site du W3C www.w3c.org
PHP (langage de scripts) www.php.net
Cocoon : chez Apache sur le serveur dédié à XML xml.apache.org
Zope www.zope.org

Retour à la page d'accueil

Dernière mise à jour le dimanche 13 mai 2001