TP : XHTML et les feuilles de style CSS
Quelques liens utiles
- Normes du W3C
- CSS1 [en français] et CSS2
[en français].
La norme HTML 4.01 du W3C (version en français).
La norme XHTML 1.0 du W3C (version en français). - Tutoriels CSS
- Alsa Créations, W3schools ou CSS Zen Garden.
XHTML
Le langage XHTML est la forme XML des anciennes pages HTML. L'objet de cette séance est de comprendre ce format afin de pouvoir facilement produire des documents qui respectent la norme XHTML :
>>> La norme XHTML 1.0 du W3C (version en français).
Validation XHTML
Commencez par écrire un petit document HTML :
<html> <body> <p>Éclipse</p> </body> </html>
En fait, ce document ne respecte ni la norme XHTML, ni la norme HTML. Corrigez le avec la commande tidy (le validateur HTML/XHTML du W3C) pour obtenir un document qui respecte la norme HTML du W3C (version en français) :
tidy -im votre-fichier.html
Produisez ensuite sa version XHTML 1.0 (version en français) avec la même commande :
tidy -im -asxhtml -indent votre-fichier.html
On peut, sommairement, définir le langage XHTML par les points suivants :
- un document XHTML
est un document XML 1.0,
- les éléments sont correctement fermés,
- les valeurs des attributs sont quotés,
- un document XHTML est un seul arbre,
- un document XHTML
valide respecte l'un de ces DTD :
-
Strict (pour les pages basées sur
les CSS et débarrassées des éléments de présentation)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
Transitional (pour les pages
intégrants des éléments de présentation
font, etc.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
Frameset (pour la définition des
frames)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
-
Strict (pour les pages basées sur
les CSS et débarrassées des éléments de présentation)
- les éléments
XHTML sont inspirés des éléments HTML, mais
- les éléments sont en minuscules (<h1>hello</h1>),
- les attributs sont en minuscules (<img src="..." />),
- les attributs ont toujours une valeur (<input readonly="readonly" />),
- l'attribut name est remplacé par l'attribut id,
Retrouvez une description plus détaillée sur le site W3 Schools.
La DTD XHTML en version stricte
♦ Essayez de modifier ce petit document en ajoutant des élements (liste ul non numérotée, tableaux, paragraphes). A partir de maintenant nous utiliserons le XHTML (de préférence en version stricte) pour coder nos documents HTML. Vous pouvez récupérer la DTD du XHTML 1.0 pour l'étudier. Étudiez notamment les éléments que l'on peut placer comme fils de l'élément body. A chaque modification vous devez valider le document à l'aide de tidy et le visualiser dans un navigateur. Vous pouvez également ajouter à firefox un plugin de validation.
♦ Dans un deuxième temps, utilisez l'attribut id pour placer un identifiant et faites y référence dans un lien (en utilisant la syntaxe ci-dessous).
<a href="nom-de-page.html#identifiant">Lien à suivre</a>
♦ Dans un troisième temps, essayez d'utiliser une section littérale dans votre document XHTML.
♦ Dans un quatrième temps, utilisez tidy pour modifier l'encodage de votre document. Prenez soin de placer des caractères accentués dans votre document pour que le test soit intéressant.
♦ Dans un cinquième temps, faites en sorte que votre document soit accessible via le serveur WEB du département :
mkdir -p "$HOME/public_html/tp-xml" cp votre-fichier.html "$HOME/public_html/tp-xml/index.html" chmod -R u=rwx,go=rX "$HOME/public_html/tp-xml" chmod u=rwx,go=rx "$HOME/public_html" "$HOME"
avec l'adresse:
XHTML & CSS
Nous allons maintenant améliorer l'aspect des pages XHTML produites en utilisant une feuille de style CSS. Pour ce faire, chaque page XHTML doit impérativement contenir dans son entête une référence vers la feuille de style CSS :
<?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-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Bienvenue au Département d'Informatique</title>
<link rel="stylesheet" type="text/css" href="orange.css"/>
</head>
<body>
... contenu de la page ..
</body>
</html>
Le principe des CSS
Pour améliorer l'aspect de vos pages, nous allons utiliser les articles qui présentent les CSS sur le site de Alsa Créations. Partons du code XHTML suivant :
<p class="centrer">paragraphe centré</p> <div class="boite"><p>Dans une boite</p></div>
A l'aide d'une feuille CSS nous pouvons associer un ensemble d'attributs graphiques à une famille d'éléments XML (ou HTML). Une règle CSS est composée d'un sélecteur et d'un ensemble d'attributs. Le sélecteur permet de spécifier les éléments XML dont l'affichage va être modifié. Je vous encourage à lire la spécification CSS des sélecteurs de la norme CSS2. Vous trouverez sur le site w3schools une liste exhaustive des propriétés.
/* propriétés des balises p, ul, ol et li */
p,ul,ol,li {
font-family: Arial;
font-size: medium;
}
/* propriétés de la classe "centrer" */
.centrer {
text-align: center;
}
div.centrer {
text-align: center;
border: solid 1px blue;
padding: 5px;
margin: 5px;
}
Pour compléter cette (rapide) présentation vous pouvez lire cette petite introduction sur CSS2 avec notamment un tutoriel pour XML.
Mise en page en CSS
Vous pouvez suivre le cours ci-dessous pour construire un exemple complet :
>>>> Réaliser un design complet XHTML/CSS en 5 étapes
Vous pourrez ensuite choisir un modèle de mise en page (aussi appelé gabarit) avec au moins une entête, un menu et une zone centrale en lisant le cours ci-dessous :
>>>> Les modèles de mise en page en CSS
Terminez votre travail en changeant ou en améliorant le menu mis en place à l'étape précédente avec le cours ci-dessous :