Cette semaine, nous allons étudier la structure générale d’une page web. Dans ce but, nous allons supposer que nous sommes en train de créer un site de cabinet médical.
Entête technique de notre page
Nous commençons donc par les lignes d’initialisation vues la semaine dernière, celles-ci s’appellent aussi le prologue :
<?xml version="1.0" encoding="iso-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Nous avons sélectionné dans le cas présent un encodage "iso-8859-15", car cet encodage va nous permettre de taper directement la quasi-totalité des caractères accentués français sans nécessiter comme dans les versions précédentes de HTML d’utiliser les entités (par exemple, é pour avoir un "é" à l’affichage), rébarbatives à taper.
Pour le type de document (DOCTYPE), nous avons pris la version de stricte du standard xhtml. La raison en est que tant qu’à apprendre quelque chose autant ne avoir à le désapprendre dans quelques mois...
Il existe 3 types de standard xhtml :
strict la plus strict pour l’état actuel du parc des navigateurs,
transitional plus adapté car autorisant l’utilisation du gras, de l’italique etc... Parfait lorsqu’on a pas encore réussi à se séparer de certaines mauvaises habitudes...
frameset version autorisant la scission de fenêtre en de multiples pages. Sachez cependant que l’utilisation de certaines balises intrinsèques (<div>) à xhtml-strict ou transitional rendent déjà obsolètes l’utilisation des frames.
La balise <html>...</html>
Après ces initialisations nous pouvons commencer la page web proprement dite. Celle-ci est entourée de balises ouvrante : <html> et fermante : </html>
Cet élément sera l’élément racine qui englobera tous les autres éléments de la page.
En tant qu’élément racine, il doit posséder des attributs spécifiques :
xmlns (xml namespace) dont le contenu est un pointeur internet (URI : Universal Ressource Identifier) vers l’emplacement de la détermination officielle du format utilisé (dans le cas présent le xhtml). Ce namespace précise les balises autorisées qui pourront être contenues dans ce document.
lang et xml:lang dans lequel on annonce la langue utilisée (en respectant le code ISO639). Ces attributs ne font pas partie de la définition de xhtml mais de xml.
<html> doit obligatoirement contenir 2 sous-éléments : <head> contenant des entêtes mais cette fois de la page web elle-même et <body> englobant le contenu de la page.
Pour débuter, nous allons nous limiter aux éléments et attributs obligatoires de chacune de ces parties.
L’entête de la page web : la balise <head> et ses sous éléments
<title>
La tête du document contient obligatoirement un élément <title> dans lequel vous indiquez le titre du document (uniquement du texte sans aucune autre balise). Cet élément ne fait pas parti du texte affiché de la page. Il est généralement utilisé dans la barre de titre de la fenêtre. Cependant, cela n’est pas du tout obligatoire. Il est conseillé pour des raisons ergonomiques que le texte que vous indiquez dans cet élément soit répété dans le corps de la page (la partie visible de la page web).
C’est là le seul sous-élément obligatoire de <head> ... </head>.
Cependant nous allons repréciser ici pour des raisons de compatibilité l’encodage de la page (iso-8859-15) grace à une balise <meta> :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>
Le corps de la page : la balise <body>
Le contenu du corps de page est bien sur le plus complexe vu qu’il doit pouvoir décrire la hiérarchisation du contenu du texte (chapitres, sous-chapitres, paragraphes et sauts de ligne, listes multiples, tableaux complexes de présentation de résultats, images) que du contenu fonctionnel de la page (présence d’un menu de navigation, liens hypertextes au sein de la page, vers d’autres pages ou sites et autres éléments éventuellement interactifs)
Pour débuter nous allons nous limiter à un titre, un ou deux petits paragraphes contenant un lien vers une autre page et pour la beauté de la nouveauté l’utilisation d’un acronyme.
Le détail de toutes les autres balises sera pour les articles suivants.
Fausse bonne idée n°1 : commencer à taper tout de go
Et non, on ne peut pas taper directement du texte immédiatement sous la balise <body>. La norme xhtml demande à ce que le texte soit muni d’une balise déterminant sa fonction : titre, paragraphe...
Les titres de chapitres "headings" <h...>
Pour définir un titre, le xhtml définit les headings qui sont une structure hiérarchique définissant le niveau de titrage. ces éléments sont nommés de h1 (le plus haut niveau) à h6 (le plus bas niveau). Ainsi on peut par exemple faire correspondre :
h1 : titre de l’ouvrage
h2 : titre du livre
h3 : titre de la section
h4 : titre du chapitre
h5 : titre du sous-chapitre
h6 : titre du 2ème niveau de sous-chapitrage
mais si le document n’a pas de nom d’ouvrage, de livre, section, vous pouvez bien sur débuter par :
h1 : titre du chapitre
h2 : titre du sous-chapitre
h3 : titre du 2ème niveau de sous-chapitrage
et continuer plus profondément si le besoin s’en fait sentir. Cependant sur le web comme pour le reste du domaine de la publication, éviter de trop segmenter votre texte.
L’aspect du texte contenu entre ces balises varie de par la structuration hiérarchique. Ainsi le rendu en suivant les styles graphiques de cette présente page donnent :
titre de l'ouvrage
titre du livre
titre de la section
titre du chapitre
titre du sous-chapitre
titre du 2ème niveau de sous-chapitrage
MAIS ce rendu peut être tout à fait différent. Il ne faut donc surtout pas utiliser ces headings pour faire des effets de styles graphiques mais ne les réserver strictement que pour la structuration de votre document.
Dans notre cas, nous n’utiliserons que h1 en tant que chapitre et h2 pour les sous-chapitres.
Les paragraphes <p>
Chaque paragraphe doit être enchassé entre des balises <p>.
Au sein d’une telle balise tout type d’élément textuel ou graphique peut être inséré.
Notez que les sauts à la ligne sont différent d’un changement de paragraphe :
Un saut à la ligne se note <br/> (notez la balise vide auto-fermée)
Un changement de paragraphe se fait tout simplement en fermant le paragraphe courant par </p> et en ouvrant un nouveau paragraphe par <p>
N’oubliez pas de fermer vos paragraphes. La norme HTML précédente ne l’imposait pas mais xhtml, oui.
Les liens hypertextes <a>
Pour introduire un lien hypertexte, on utilise une balise <a> (abbréviation de "Anchor"). Le prototype minimal d’une telle balise sortante est :
<a href="protocole://adresse">contenu servant de lien</a>
par exemple pour insérer un lien vers le site des médecins maîtres-toile, on utiliserait :
<a href="http://www.mmt-fr.org/">Le site des médecins maîtres-toile</a>
Ce qui donne à l’affichage avec le style du présent document :
Le site des médecins maîtres-toile
A nouveau, nous verrons plus en détail cette balise dans un prochain article.
Un acronyme expliqué : la balise <acronym>
Un acronyme est un mot composé des lettres initiales d’une locution. Par exemple : MMT pour Médecins Maîtres Toile.
Le prototype est cette fois-ci :
<acronym title="l'explicitation de l'acronyme">ACRONYME</acronym>.
Si votre navigateur le supporte, vous pourrez par exemple voir une petite bulle d’information contenant "Médecins Maîtres-Toile" en passant votre souris sur MMT. S’il ne le supporte pas vous ne verrez rien...
Réalisons maintenant notre première page
Nous avons vu tout ce qu’il fallait. A titre d’exercice, voici la page que vous devez réaliser (tout ce qui est dans le rectangle jaune) :
Titre de la page : Cabinet médical du Dr Duchemol
Contenu :
Cabinet médical du Dr Duchemol
Bienvenue, je suis le Dr Duchemol.
Sur cette page vous trouverez des renseignements sur mon cabinet médical.
Horaires d'ouverture
Le cabinet est ouvert tous les jours du Lundi au Samedi matin de 9h à 12h et de 14h à 17h
En cas d'urgence
Pendant les heures d'ouverture, appelez le numéro du cabinet (01.XX.XX.XX.XX)
Si vous ne pouvez pas me joindre, appelez le 15 (SAMU)
En dehors des heures d'ouverture, le répondeur du cabinet vous donnera les coordonnées du médecin de garde
Me joindre par internet
Si vous désirez me joindre, vous pouvez utiliser le formulaire de contact suivant
Je suis par ailleurs membre de démonstration des MMT
L’encodage sera iso-8859-15.
Vous utiliserez 2 niveaux hiérarchiques pour les titres.
Il y a un saut de ligne après le numéro de téléphone (01.XX.XX.XX.XX).
Vous insérerez un lien sur "le formulaire de contact suivant" pointant vers http://www.mmt-fr.org/contact.php et expliciterez l’acronyme MMT sur la dernière ligne.
N’oubliez pas le prologue.
Vous trouverez la solution en fin d’article
Conclusion
Nous avons vu cette semaine comment créer notre première page fonctionnelle. Bien sur nous sommes loin du rendu de certains sites professionnels mais il faut savoir avancer prudemment des bases jusqu’aux petites finesses. Le respect de la norme xhtml ne supporte pas que l’on grille des étapes...
Solution
Voici l’implémentation de la page demandée dans l’exercice. Vérifiez que vous ayez pensé à tout.
<?xml version="1.0" encoding="iso-8859-15"?>
<!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" lang="fr">
<head>
<title>Cabinet médical du Dr Duchemol</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>
</head>
<body>
<h1>Cabinet médical du Dr Duchemol</h1>
<p>Bienvenue, je suis le Dr Duchemol.</p>
<p>Sur cette page vous trouverez des renseignements sur mon cabinet médical.</p>
<h2>Horaires d'ouverture</h2>
<p>Le cabinet est ouvert tous les jours du Lundi au Samedi matin de 9h à 12h et de 14h à 17h</p>
<h2>En cas d'urgence</h2>
<p>Pendant les heures d'ouverture, appelez le numéro du cabinet (01.XX.XX.XX.XX)<br />
Si vous ne pouvez pas me joindre, appelez le 15 (SAMU)</p>
<p>En dehors des heures d'ouverture, le répondeur du cabinet vous donnera les coordonnées du médecin de garde</p>
<h2>Me joindre par internet</h2>
<p>Si vous désirez me joindre, vous pouvez utiliser <a href="/article258.html">le formulaire de contact suivant</a>
</p>
<p>Je suis par ailleurs membre de démonstration des <acronym title="Médecins Maîtres-Toile">MMT</acronym></p>
</body>
</html>
Imprimer cet article 
