<< Retour au sommaire

 

Introduction et démarrage avec le XHTML

 

 

 

Table des matières

  1. Présentation et particularités par rapport au HTML ;
  2. Le squelette de base ;
  3. La balise de paragraphe <p> et le saut à la ligne <br /> ;
  4. Les commentaires.

 

 

Présentation et particularités par rapport au HTML 4

 

Le langage de description XHTML est un dérivé du langage XML.

« XHTML » signifie :

« eXtensible HyperText Markup Language ».

 

Il est très proche du langage HTML mais il nécessite une bien plus grande rigidité :

 

  1. Les balises et leurs attributs doivent toujours être écrits en minuscule.
  2. Les valeurs assignées aux attributs de balises doivent toujours être placées entre guillemets.
  3. Les balises uniques n’étant pas des balises de paires, par exemple la balise « img », doivent se terminées par un « slash » avant le signe supérieur. Par exemple :

<img src="plume.jpg" alt="Une plume" />

  1. Le squelette de base d’une page doit comporter une balise qui définit la page comme une page écrite en XHTML, et d’une autre balise spécifiant la langue utilisée.

 

Pour développer vos pages WEB en XHTML, je vous conseille d’utiliser le bloc-Notes de WINDOWS, accessible depuis le sous menu « accessoires » du menu démarrer.

Après avoir écris la page, vous pourrez renommer l’extension du fichier « txt » en « html ».

Puis, le fait de presser la touche entrée sur le fichier « XHTML » l’ouvrira dans votre navigateur.

De plus, si vous utilisez le navigateur INTERNET EXPLORER, vous pourrez accéder au code HTML par l’intermédiaire du menu déroulant :

ALT, « Affichage|Source ».

Le code du fichier sera automatiquement ouvert dans le bloc-notes…

Réalisez les modifications du HTML, puis quittez le bloc-notes en acceptant l’enregistrement des modifications. Vous reviendrez automatiquement dans le navigateur INTERNET EXPLORER, pour que les modifications réalisées soient prises en compte, actualisez le navigateur en pressant la touche de fonction « F5 ». 

 

 


Le squelette de base

 

Je vais maintenant vous présenter le squelette de base que doit contenir votre page XHTML.

Le squelette contient uniquement des balises XHTML, elles ne seront bien évidemment pas visibles depuis votre navigateur.

 

Le squelette :

 

<!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="fr" >

<head>

<title>Bienvenue sur mon site !</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

</body>

</html>

 

Analysons maintenant les différentes balises de ce squelette…

 

La première balise définit la page comme étant une page écrite en XHTML, elle est :

<!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="fr" >

Note :

<html>

 

La deuxième balise est la balise <html>.

Elle est dite balise de paire car elle est composée d’un élément de début, <html>, et d’un élément de fin, </html>.

Dans ce cas, l’élément de fin de balise porte le même nom que l’élément de fin de balise mais précédé d’une barre oblique.

Entre les deux éléments de la balise <html>, vous devez placer toutes les autres balises composant votre page.

Le contenu de la balise <html> doit néanmoins se diviser en deux parties :

  1. La balise <head>.
  2. La balise <body>.

 

Les informations du bloc contenues entre <head> et </head> peuvent être des balises générales portant sur la page, telle que, par exemple, le titre à afficher dans la barre de titre du navigateur par l’intermédiaire de la balise <title>.

Exemple :

<head>

<title>Bienvenue sur mon site</title>

</head>

 

Toujours dans le bloc <head>, vous devez placer la balise <meta> qui permet de définir la page comme étant une page écrite en français :

<head>

<title>Bienvenue sur mon site</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

 

Dans le bloc <body>, vous devez écrire le contenu de votre page, contenu qui sera cette fois visible depuis le navigateur…

Puisqu’il s’agit d’une balise de paire, vous devez écrire le contenu de la page entre <body> et </body>.

 

 


La balise de paragraphe <p> et le saut à la ligne <br />

 

Le texte contenu dans le bloc délimité par <p> et </p> sera affiché comme un paragraphe, donc avec une ligne vide avant le texte contenu dans le bloc <p>, et une ligne vide après l’élément de fin de balise </p>.

Mais dans le bloc, les retours chariots que vous réaliserez à l’intérieur de votre bloc-notes durant l’élaboration de votre texte n’auront aucun effet !

Pour exécuter un retour chariot à l’intérieur d’un bloc <p> et qui sera visible depuis le navigateur, vous devez saisir la balise <br /> à l’endroit exact où doit être inséré le saut à la ligne…

 

Les balises telles que la balise <p> sont dites des balises bloc, puisqu’elles s’emploient directement dans la composition du bloc <body>.

On verra ultérieurement qu’il existe d’autres balises bloc, tels que les balises de titres…

Cependant, il existe un certain nombre de balises qui ne peuvent s’employer que dans un bloc, ce sont les balises inline.

<br /> est donc une balise inline…

 

Voici un exemple :

 

<!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="fr" >

<head>

<title>Bienvenue sur mon site !</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<p>

Je suis heureux de vous accueillir !<br />

Le XHTML est un super langage de description pour l'élaboration de vos pages WEB !<br />

Bon, maintenant au boulot et bonne chance à vous...</p>

</body>

</html>

 

 


Les commentaires

 

Les commentaires sont des lignes de texte qui commentent votre page afin que vous puissiez mieux vous y retrouver lors de votre prochaine relecture.

Ces lignes de texte ne sont pas affichées par le navigateur, elles sont vraiment prévues pour aider le programmeur en commentant le fichier source.

 

Ces lignes de commentaires doivent être placées entre les éléments d’une balise bizarre que voici :

<!-- le commentaire -->

 

Reprenons maintenant l’exemple de tout à l’heure, mais cette fois-ci, deux commentaires ont été insérés, le premier au début du paragraphe, et bien sûr, le second à la fin.

 

<!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="fr" >

<head>

<title>Bienvenue sur mon site !</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<p>

<!-- Bon, je vais écrire un petit texte pour accueillir l'utilisateur -->

Je suis heureux de vous accueillir !<br />

Le XHTML est un super langage de description pour l'élaboration de vos pages WEB !<br />

Bon, maintenant au boulot et bonne chance à vous...

<!-- Voilà, maintenant que je l'ai bien accueilli, il a intérêt à bosser ! -->

</p>

</body>

</html>

 

Philippe BOULANGER