[PDF] Documentation de cours pour apprendre XHTML | Cours informatique

(1)

Introduction

XHTML est donc du HTML conforme à XML. L'"évolution" de HTML 4.0 en XHTML 1.0 est à ce point réussie qu'existent en XHTML les mêmes éléments, attributs et règles d'imbrication qu'en HTML. Il y a toutefois quelques différences de détail imposées par la syntaxe de XML et qu'il vous faut connaître si vous voulez écrire vos pages en XHTML plutôt qu'en HTML.

Différence: mentions de type de document

XHTML 1.0 et HTML 4.0 ont des mentions de type de document différentes. La mention de type de fichier se réfère à la DTD et à la langue que vous employez dans le fichier et auxquelles vous voulez vous tenir. Un analyseur syntaxique rigoureux peut empêcher l'affichage du fichier par exemple dans le navigateur, quand le fichier contient des erreurs de syntaxe. Une erreur de syntaxe typique ici est la DTD à laquelle vous vous référez dans la mention du type de document.

Exemple pour le html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">

Exemple correspondant pour XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Explication:

Les exemples montrent comment sont notés les types de document pour HTML 4.01 et XHTML 1.0 pour la variante HTML "Strict". Même en XHTML 1.0 existent les trois variantes "Strict", "Transitional" et "Frameset", exactement comme en HTML 4.0.

Différence: élément HTML racine avec mention de l'espace de nommage Le repère d'introduction en HTML n'a en principe aucun attribut. En XHTML pourtant, vous devez mentionner explicitement le nom d'espace de nommage pour XHTML.

Exemple pour HTML 4.01: <html>

(2)

</html>

Exemple correspondant pour XHTML 1.0:ml> <html xmlns="http://www.w3.org/1999/xhtml">

</html>

Explication: En XHTML notez toujours dans le repère d'ouverture l'attribut xmlns= qui désigne un espace de nommage XML et affectez lui la valeur http://www.w3.org/1999/xhtml. C'est une URI spéciale qui n'est pas conçue comme la mention d'une adresse Web à appeler mais qui se sert en fin de compte du schéma de l'adressage Web, pour affecter un nom sans ambiguïté à l'échelle du monde pour l'espace de nommage. L'adresse Web existe certes, parce que le consortium W3 a été assez gentil pour éviter l'accumulation d'appels erronés sur leur serveur - pourtant l'adresse ne signifie rien d'autre que si l'on avait fixé comme nom: "Specification-XHTML-Superdupe".

Différence: respect strict de l'ossature HTML Quand en HTML vous omettez les éléments head et body et que sinon entre et vous notez du code HTML valide, il s'agit alors du point de vue de HTML d'un document sans faute. Cette licence n'existe pas en XHTML. Là un fichier HTML doit impérativement respecter l'ossature habituelle et contenir un repère head et un repère body. Par ailleurs l'élément title dans l'élément head est impérativement nécessaire et doit être noté comme premier élément du repère head.

Exemple pour HTML 4.01: <html>

<h1>Texte</h1> </html>

Exemple correspondant pour XHTML 1.0: <html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Texte</title>

</head>

<body>

(3)

</body> </html>

Explication: La forme indiquée pour noter un document HTML 4.0 est certes loin d'être

recommandée pour la pratique mais au moins elle n'est pas fausse. Pour un document XHTML par contre l'ossature complète, y compris l'élément title doit toujours être notée.

Différence: minuscules

Pour XHTML il a été fixé que tous les noms d'éléments et d'attributs sont écrits en minuscules. Exemple pour HTML 4.01:

<OBJECT DATA="Video.mpg" TYPE="video/mpeg" ALIGN="LEFT"></OBJECT> Exemple correspondant pour XHTML 1.0:

Explication:

En XHTML, écrivez toujours tous les noms d'éléments comme object ou d'attribut comme data ou bien type en minuscules. En cas de doute, écrivez de la même manière les affectations de valeurs toujours en minuscules, donc par exemple pour align="left". Il n'y a que là où, dans une affectation de valeur, certaines majuscules sont nécessaires comme par exemple pour le nom de fichier Paris.mpg, que vous pouvez écrire la valeur comme il est correct de le faire.

Différence: éléments vides

En HTML 4.0 existent différents éléments vides. Ce sont les éléments sans repère de fermeture. Le repère de fermeture est interdit parce que les éléments sont définis comme étant vides. Exemples:

Dans les langages basés sur XML, donc également en XHTML, ces éléments vides doivent être marqués spécialement

Exemple pour HTML 4.01:

<p>Texte avec<br>passage à la ligne</p> <p><img src="image.gif" alt="une image"></p>

(4)

<p>Texte avec<br />passage à la ligne</p> <p><img src="image.gif" alt="une image" /></p>

Différence: éléments avec repère de fermeture facultatif

En HTML 4.0 existent différents éléments avec repère de fermeture facultatif. exemples: <body>,<option>

Notez toujours ces éléments en XHTML avec repères d'ouverture et de fermeture Exemple pour HTML 4.01:

<select name="choix" size="1"> <option>1er enregistrement <option>2ème enregistrement <option>3ème enregistrement </select>

Exemple correspondant pour XHTML 1.0: <select name="choix" size="1">

<option>1er enregistrement</option> <option>2ème enregistrement</option> <option>3ème enregistrement</option> </select>

Explication:

Tous les éléments qui peuvent avoir un contenu doivent en XHTML être marqués par un repère d'ouverture et un repère de fermeture

(5)

Exercices

Partie 1 XHTML Exercice 1 :

Ecrire une page web de titre ”Première page en XHTML strict” contenant simplement le texte ”Bonjour tout le monde !” . Il faut maintenant s’assurer que votre première page est un document XHTML strict valide.

Utiliser le "squelttor" de site alsacréation afin de générer le squelette de code XHTML strict Le w3c, qui est l’organisme chargé de développer les standards pour le web et qui a crée le langage XHTML, fournit un validateur que l’on trouve à l’adresse http://validator.w3.org/. Vérifiez si votre page est valide. Si ce n’est pas le cas, rendez-la valide.

Lorsque votre page est valide, le w3c vous propose d’ajouter un petit logo à votre page pour signifier aux futurs visiteurs de votre page que vous prenez soin de respecter les standards. Rajoutez ce logo à votre page.

Exercice2

Question d'encodages

Vous avez peut-être remarqué au TPs précédentes combien il est fastidieux de taper les entités pour les accents (&eacute, &ecirc, ...). Quand vous enregistrez un document, l'éditeur de texte l'encode habituellement en ISO-8859-1 (vous pouvez changer l'encodage dans les options de votre éditeur de texte).

Le navigateur n'a pas de moyen simple de trouver l'encodage, c'est pour ça qu'il faut utiliser les entités pour les accents. La ligne de code <meta http-equiv="Content-Type" content="text/html" ;

charset="ISO-8859-1" /> permet d'indiquer au navigateur quel code il doit utiliser pour lire le document.

Vous n'avez donc plus à utiliser les entités pour écrire les caractères accentués. Par contre, les caractères spéciaux doivent toujours être décrits par des entités car ils ont une signification spécifique en XHTML.

Travail demandé Voici une recette : Le gâteau au chocolat :

Pour faire un gâteau au chocolat on a besoin de plu sieurs ingrédients : 5 oeufs, 125 grammes de farine, 250 grammes de beurre, 250 grammes de sucre et 250 grammes de chocolat. Les

(6)

ingrédients se mélangent de la façon suivante : d'a bord, on sépare les blancs des jaunes d'œufs, puis on bat le sucre avec les jaunes d'œufs jusqu'à ce que le mélange soit blanchâtre et crémeux. Ensuite, on fait fondre le beurre et le chocolat da ns un bol (au bain-marie ou au micro-onde) que l'on incorpore au mélange de jaunes d'oeufs et de s ucre. Enfin, après avoir fait monter les blancs en neige, on les ajoute au mélange. Il ne reste plu s qu'à mettre le tout dans un moule à gâteau, et à faire cuire une demi-heure à thermostat 6.

1. Commencer une nouvelle page XHTML dont le titre est gâteau au chocolat. Ne pas utiliser les entités pour les caractères accentués.

2. Détailler la liste des ingrédients à l'aide d'une liste à puces. 3. Détailler la recette sous forme de liste numérotée.

4. Observer le résultat avec votre navigateur préféré.

5. Dans les options de votre éditeur de texte préféré, modifier l'encodage à l’enregistrement. 6. Que se passe-t-il quand vous ouvrez la page avec un navigateur.

7. Puis dans le navigateur web, modifier le « codage de lecture » (dans affichage-> codage du texte) pour le faire correspondre à celui du fichier. Que se passe-t-il ?

8. Enfin, faire correspondre « l'encodage d'enregistrement » du fichier et « l'encodage décrit dans l'entête » du document (en utf8 par exemple)

9. A chaque étape observer les effets sur le rendu de la page. 10. Vérifier la validité de votre page sur le site w3c.

Exercice 3

Répondre aux questions suivantes

1. Comment insérer des commentaires dans une page xhtml ? 2. Quel élément est obligatoire dans l’élément <head> ? 3. Le code suivant est-il valide ? Corrigé sinon

<body>

Bienvenue sur l’intranet de notre association <h1> Les formations </h1>

<p> bureautique <p> serveur web </body>

(7)

Exercice 4 : Document XHTML valide Soit le code XHTML suivant:

<head>

<h2>2eme & 3eme exemple</h2> <ol> <li>1</li><ul> <li>2</li></ul> <vi>3</vi> <ol> <br/> <body/> </html> Question 1 :

Ce code ne respecte aucune norme XHTML connue. découvrez et analysez les erreurs présentes dans ce code.

Question 2 :

(8)

EXERCICE1

En utilisant les balises XHTML et les attributs adaptes écrire le code XHTML permettant de : 1.1 Texte en couleur :

Ecrivez le mot rouge (#ff0000), vert (#008000), dans leur couleur puis tout le texte de body en gras.

1.2 Indenter un texte :

Ecrivez un paragraphe de texte avec un retrait de 1 cm par rapport à la marge normale 1.3 Transformation de texte :

Présenter en majuscule un texte écrit en minuscule. Puis à la ligne suivante afficher ce même texte avec une majuscule à la première lettre de chaque mot.

1.4 Espace entre les lettres:

Sur une ligne, resserrez les caractères d’un texte de 1 pixel par rapport à la normal et sur la ligne suivante, étirez les caractères de même texte de 5 pixels

1.5 Espace entre les mots :

Resserrez les mots d’un texte de 2 pixel par rapport à la normal et sur la ligne suivante, espacer les mots de même texte de 10 pixels

(9)

En utilisant les balises XHTML et les attributs adaptes écrire le code XHTML permettant de définir ces tableaux:

• en utilisant librement les balises <table> • en utilisant une seule balise <table>