Créer sa première page XHTML

Noter ce cours :

Liens sponsorisés :

Construire sa première page web en XHTML

Nous avons vu dans le chapitre précédent que le XHTML était un langage à balises. Détaillons maintenant un peu plus ce que sont ces balises et comment elles se présentent :

Une balise commence toujours par le caractère < et se termine par le caractère > . Entre ces deux caractères, on indique le nom de la balise et différents attributs. Voici comment se présente habituellement une balise sans attributs :

<balise>

Et voici un exemple de balise avec attributs :

<balise attribut1="valeur" attribut2="valeur">

Les balises ne sont visibles que par le navigateur, elles sont invisibles pour le visiteur. Ces balises permettent de dire au navigateur "ici, il s'agit d'un titre important" ou encore "le paragraphe suivant est une citation", etc ... On ne les utilise pas pour effectuer de la mise en forme (par exemple dire "Ce texte est bleu", ou encore "Ce paragraphe sera surligné en jaune"), ce sont les CSS qui sont utilisées pour ça.

Il faut savoir qu'il existe deux grands types de balises :

Le doctype (type de document)

Les navigateurs ne font pas que d'interpréter du XHTML. Ils peuvent aussi lire du HTML, afficher des images, des vidéos, etc ... Pour que le navigateur sache quel type de document il doit ouvrir, on utilise ce qu'on appelle des en-têtes. Vous verrez ça dans la section PHP si vous souhaitez concevoir un site web dynamique :p

En attendant, en (X)HTML, on a pas accès à ce type d'en-tête. Il faut donc spécifier dans le code quel langage (ainsi que sa version et/ou son mode) a été utilisé pour concevoir la page web. On appelle cela le doctype. Chaque code permettant de créer une page web doit commencer par ce doctype. Voici comment ça se présente :

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

Ne retenez pas ça par coeur, sachez seulement que cette ligne doit être la première de votre document XHTML. Nous apprendrons uniquement à coder dans la version "strict", mais il existe deux autres versions :

Ces deux autres versions sont à mon avis à ne pas utiliser pédagogiquement car elles permettent de réaliser plus facilement des choses dépréciées.

Base de construction d'une page XHTML

Toute page que nous allons concevoir devra commencer avec le doctype suivi de la balise d'ouverture <html> qui va être dotée des attributs obligatoire xmlns et xml:lang. Ne vous préoccupez pas de cette ligne, sachez juste qu'elle est obligatoire, inutile de l'apprendre par coeur.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

Cette balise doit être fermée. Comme vous pouvez le voir, il n'y a pas de slash à la fin du code que je vous ai montré, la balise se ferme donc en utilisant une balise </html> (les attributs ne doivent pas figurer dans la balise fermante). Si on reprend tout ce qu'on a fait depuis le début, vous devriez vous trouver avec un document comme ceci :

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



</html>

L'en-tête de page

L'en-tête de page contient des informations capitales, comme le titre de la page, ou encore des informations sur l'encodage des caractères. Il débute par une balise <head> et se termine par la fermeture de cette même balise (</head>). L'en-tête se place juste après l'ouverture de la balise <html>.  Jusque là, vous devriez avoir ce code :

<!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>

</head>
</html>

Tout ça c'est bien beau, mais où met-on le titre, que devons-nous mettre dans cet en-tête ?

Pour le titre de la page, il se met entre les balises <title> et </title>. Si vous souhaitez donner à votre page le titre Bienvenue sur ma page web, vous devrez utiliser ce code :

<!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 ma page web !</title>
<
/head>
</html>

Comme vous pouvez le voir, ce n'est pas très compliqué. Une autre information obligatoire, il s'agit de l'encodage des caractères de votre page web. Pour faire simple, il existe différents encodages de caractères, et celui que nous utiliserons est l'ISO-8859-1 (avec le bloc-notes tout du moins). Bref voici le code à rajouter :

<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />

N'apprenez pas cette ligne par coeur, elle signifie que votre page a été enregistrée en utilisant le codage ISO-8859-1. Il s'agit d'une balise <meta>. Nous verrons plus tard en annexe à quoi peut bien servir cette balise, sachez pour l'instant elle a de très nombreux usages. Votre code doit désormais ressembler à ça :

<!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 ma page web !</title>
     <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<
/head>
</html>

Le titre sera affiché dans la fenêtre du navigateur, tout le reste sera invisible pour l'internaute.

Le corps de page (body)

Le corps du document sera la seule partie (avec le titre) de visible par l'internaute, ce sera la page proprement dite. Le corps de page se situe entre les balises <body> et </body>. On place le corps de page juste après l'en-tête. Inutile de développer plus cette partie car nous verrons tout ce que l'on peut mettre dans le corps du document dans le chapitre suivant. Voici donc le modèle que vous devez avoir pour toute page web que vous allez construire après (seul le titre sera à changer) :

<!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 ma page web !</title>
     <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<
/head>
<body>

</body>
</html>

Vous pouvez enregistrer le fichier texte obtenu en y mettant bien l'extension ".html" ou encore ".htm".Une fois le fichier enregistré, ouvrez-le. Vous aurez une page blanche avec le titre Bienvenue sur ma page web !

Première page web !

Chapitre suivant

Mettre du texte

Vous avez aimé cet article intitulé Créer sa première page XHTML ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels