Bien construire vos pages web

1. XHTML : les bases

2. Boîte à outils

3. La composition d’une page XHTML

1. XHTML : les bases

a. Définitions

Une page web en XHTML, tout comme en HTML, repose sur la succession de balises. Ces balises sont à leur état brut des éléments. Insérées dans une page web, les balises peuvent adopter des attributs.

Qu’est-ce qu’un élément, une balise ou un attribut ?

On peut citer comme exemple l’élément <title> qui permet d’ajouter un titre dans la page web. La balise de l’élément >title> se présente entourées d’un signe inférieurs et supérieur comme ceci : <title>. La balise d’ouverture <title> se place au début de la ligne du titre et la balise de fermeture </title> se place à la fin de la ligne du titre et comporte un signe « / » après le signe supérieur. Les balises se présentent généralement sur le modèle qui vient d’être décrit, sauf exception.

Un des attributs possibles (mais facultatif) de la balise <title> est lang pour indiquer la langue du titre et se présente comme ceci : <title lang="fr"> pour le français. Notre titre pourrait se présenter de la manière suivante dans le codage d’une page web :

<title lang="fr">Bien construire vos pages web</title>

Pour résumer, un élément est ainsi une notion du langage HTML. Une balise est marqueur invisible à l’internaute utilisé en langage informatique. Elle indique au navigateur lisant les balises quelle est la mise en page du document web, comment présenter et structurer les informations contenues dans le document. Un attribut complète une balise pour indiquer une propriété, une information supplémentaire sur la balise.

 

b. Différence entre le HTML et le XHTML

Le langage XHTML s’inspire du XML et du HTML pour la rigueur dans le codage et pour définir la structure des informations dans les pages Web à l’aide de marqueurs, appelés balises, ayant chacun un sens (marqueurs sémantiques). Par rapport au langage HTML, le langage XHTML répond aux normes de codage suivantes :

  • Les balises et leurs attributs sont toutes écrits en caractères minuscules.
  • Lorsqu’une balise d’ouverture est utilisée, elle doit être complétée par une balise de fermeture.
  • Le fond, écrit en XHTML, est séparé la forme codée dans un fichier de description de la mise en forme appelé feuille de style CSS (Cascading Style Sheet).
  • Les pages web doivent comporter les déclarations de type DOCTYPE, DOM etc.
  • Les valeurs des attributs sont placées être entre guillemets doubles.

 

c. Extension

Les documents écrits en XHTML portent l’extension de fichier *.html ou *.htm. Les deux extensions sont lues par les navigateurs, sans aucune exception. Par exemple, la page comprenant vos coordonnées sur votre site internet au format XHTML pourra être nommée contact.html ou contact.htm.

 

2. Boîte à outils

a. Les outils pour écrire du code XHTML

La création de pages *.html ou *.htm ne requiert par l’installation de logiciels coûteux ou compliqués. Votre ordinateur aura toujours un éditeur d’installé par défaut. Il existe bien sûr des logiciels gratuits et des logiciels plus ou moins chers pour se mettre à l’écriture de pages Web. Voici une présentation rapide des différents types de logiciels.

  • Editeur WYSIWYG

pour créer des documents Web à la manière d’un document Word. Le code XHTML et la feuille se style CSS sont générés automatiquement. Les plus répandus sont Nvu (Windows et Apple, gratuit) et Dreamweaver (payant).

  • Editeur de texte

Ce type de logiciel permet d’écrire le codage en brut sans pourvoir visualiser le résultat directement au fur et à mesure qu’on tape le code. Pour voir l’apparence du code tapé, il faut ouvrir le document dans un navigateur web. Ce type de logiciels est plus ou moins intuitif. Les plus répandus sont Notepad++ (Windows, gratuits) et Dreamweaver (payant) ou Fraise (Apple, gratuit).

 

3. La composition d’une page XHTML

a. Informations obligatoires

  • !DOCTYPE

Comme déjà mentionné ci-dessus, les pages web doivent comprendre la déclaration DOCTYPE. Ces quelques lignes de codes permettent d’indiquer au navigateur web quelle version du XHTML utiliser pour la lecture du codage de la page web. Ces informations sont standards et souvent afficher automatiquement dans les éditeurs WYSIWYG.

La déclaration DOCTYPE se présente de la manières suivante et est à insérer en premier :

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

  • La balise <html> et ses deux attributs

Il faut ensuite ajouter la balise d’ouverture <html>. Pour ne pas oublier de refermer cette balise, autant rajouter la balise de fermeture </html> tout de suite. Tout le reste du codage de la page web devra être placé entre ces deux balises.

Parmi les attributs à ajouter, il y a d’abord xmlns pour indiquer l’adresse où trouver la liste des balises XHTML, puis xml:lang pour préciser la langue utilisée dans la page web. Cette ligne se présente donc de la manière suivante :

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

La balise <head>

Cette balise permet d’insérer informations d’en-tête. Ces renseignements sont complémentaires et ne sont dans la plupart des cas pas visibles au lecteur de la page (exception par exemple avec la balise <title>). Ces renseignements seront utiles pour les moteurs de recherche et le navigateur.

Placez la balise d’ouverture <head>, puis la balise de fermeture </head>. Entre ces deux balises, placez les balises <title> </title> pour indiquer le titre de la page au navigateur. Ce titre n’apparaîtra pas à l’intérieur de la page du document web mais sur le bord en-haut à gauche de la fenêtre du navigateur.

Ce morceau de code se présente de la manière suivante :

<head>
<title>Ma première page web</title>
</head>

 

b. Structure de la page

  • La balise <body>

Toutes les informations qui s’affichent sur votre écran se trouvent entre les balises <body></body> qu’il faut penser à refermer, comme c’est le cas pour toute balise.

  • La balise <p>

Pour afficher un paragraphe de texte dans la page web, ajoutez les balises de paragraphe <p></p> à l’intérieur des balises <body> </body>.

  • La balise <h1>

Vous allez à présent ajouter un premier niveau de titre au dessus de ce premier paragraphe. Pour ajouter un titre dans une page web, il faut utiliser les balises <h1></h1>. Les balises de titre vont de <h1> à <h6>. Le niveau est dégressif et permet d’indiquer l’ordre d’importance des titres présents à l’intérieur de la page. Cette hiérarchie influe sur l’apparence des titres, du plus gros en<h1> pour un titre principal, aux sous-titres de plus en plus petits jusqu’au <h6> en passant par<h2>, <h3> etc. Il faut faire attention de pas confondre le titre générique de la page <title> qui s’affiche en-haut du navigateur avec les titres qui sont visibles à l’intérieur de la page (<h1> etc.).

Votre code devrait maintenant se présenter comme suit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ma première page web</title>
</head>
<body>
<h1>Le titre de mon premier paragraphe</h1>
<p>Mon premier paragraphe publié en ligne. L’écriture de ce paragraphe est rendue possible grâce au langage XHTML.</p>
</body>
</html>

Enregistrez ce document sur votre bureau avec le titre accueil.html. Ouvrez le document dans votre navigateur web et la fenêtre devrait afficher le texte que vous avez tapé.

Félicitations, vous venez de créer votre première page web !