:: Enseignements :: ESIPE :: E5INFO :: 2007-2008 :: eXtended Markup Language ::
![[LOGO]](http://igm.univ-mlv.fr/ens/resources/mlv.png) | Validation XML/CSS |
Le but de ce TP est de se familiariser avec les notions d'élément, d'attribut, de DTD et de
validation à travers un exemple simple : le système de balisage XHTML. On va créer une page Web écrite en XHTML, et on va la valider en utilisant le validateur officiel du consortium W3C. En même temps, on se propose de soigner la présentation de cette page en utilisant une feuille de style CSS, que l'on validera également par le biais d'un autre validateur W3C.
Cahier des charges
Il s'agit d'écrire une page Web qui contienne:
- des paragraphes de texte avec une présentation particulière,
- des images,
- un tableau,
- et un formulaire.
La page Web devra être valide par rapport à la DTD "XHTML 1.0 strict". Vous êtes invités à regarder les documents suivant avant de poursuivre le TP :
Exercice 1 - Ecrire et valider
Commencez à écrire votre page XHTML. Le préambule qui convient à un document XHTML strict est:
<?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">
Pour tester le processus de validation de la page, poursuivez avec un document minimal :
<html>
<p>document minimal</p>
</html>
Ensuite visitez la page
http://validator.w3.org et suivez les instructions :
- Cliquer sur Parcourir
- Sélectionner le fichier sur le disque
- Cliquer sur Check
Modifiez votre document en fonction des erreurs signalées et recommencez la procédure jusqu'à ce que votre page soit un document XHTML strict valide.
Exercice 2 - Ajouter des paragraphes de texte
Le fichier
tp1-ressources.html contient quelques paragraphes de texte. Il faut les inclure dans des paragraphes XHTML et les présenter de la manière suivante à l'aide d'une feuille de style CSS :
- le texte doit être en jaune sur fond noir. Taille des caractères : 12 points, la composition doit être justifiée des deux cotés avec un retrait de 12 points;
- Sauf pour le premier paragraphe, qui doit être rouge avec une police monospace et tous les caractères en majuscules;
- La première lettre de chaque paragraphe doit être d'une taille deux fois superieure à celle des autres lettres qui composent le paragraphe.
Testez d'abord votre feuille de style dans un élément
style inclus dans la page HTML, ensuite dans un fichier exterieur
monstyle.css. Valider la feuille de style en utilisant le
validateur officiel CSS
Exercice 3 - Ajouter des images
Incluez les images
elephant.jpg,
lion.png,
mouseani.gif et
sylvester.jpg dans votre document dans un nouveau
paragraphe sur fond blanc. Alignez les images en les ordonnant de gauche à droite de l'animal le plus petit jusqu'à l'animal le plus grand et redimensionner ces images afin d'obtenir des proportions plus réalistes. Validez sous XHTML strict.
Exercice 4 - Ajouter un tableau
Le fichier
tp1-ressources.html contient quelques informations utiles dans un tableau écrit en très mauvais HTML.
Copiez ce tableau et corrigez le pour qu'il soit valide sous XHTML strict. Ensuite, écrivez les règles CSS pour que :
- toutes les cellules soient sur fond bleu;
- sauf les cellules de la première colonne, qui sont sur fond jaune;
- et celles de la première ligne, qui sont sur fond gris.
Validez également la feuille de style.
Exercice 5 - Ajouter un formulaire
Ajouter un formulaire qui permet de lancer une recherche sur Google. Le formulaire devra au moins contenir un champ texte pour recevoir la requette, un bouton pour soumettre le formulaire et deux boutons radio qui permettent de cibler la recherche sur l'ensemble des pages internet ou sur les pages francophones uniquement. On pourra consulter les sources HTML de la page d'accueil de Google. Valider par rapport à la DTD XHTML strict
Références
© Université de Marne-la-Vallée