Introduction au XHTML
Loutre que tu es, tu aimerais savoir les bases du XHTML (Extensible HyperText Markup Language) qui est en fait du HTML, mais avec le X. Cet article a pour but d’aider les plus débutants d’entre nous à comprendre la logique du CSS et du HTML d’une façon conviviale. On va y voir les balises HTML les plus courantes ainsi que leur fonctionnement. Dans un deuxième temps, on va voir comment fonctionne le CSS avec le XHTML, mais cela sera sujet à un futur article.
Le XHTML
Les bases de HTML et de XHTML sont les mêmes, mais une page écrite en XHTML doit être bien écrite, c’est-à-dire que la syntaxe est différente.
Premièrement, les balises. C’est ce qui permet de définir le langage XML (le XHTML a une syntaxe XML). En gros, c’est des <qqch> avec certaines options, suivis de contenu, suivis de </qqch> sans options.
Voici un exemple de balise, la plus courante vu qu’elle est sur toutes les pages web XHTML, qu’ils aient du contenu ou pas.
<html> *contenu* </html>
Ce sont simplement les balises qui définissent la page. À l’intérieur de ces balisent, on y met les balises <head></head>, et les balises <body></body>. Ce sont les balises de premier niveau.
Dans les balises <head>, on y met des balises d’entête comme <title></title>, qui définissent le titre de la page, les balises <meta /> qui est en fait une balise unique qui ne prend pas de contenu, mais que des options. On n’a donc pas de deuxième balise, mais une balise qui se ferme toute seule comme une grande. (Comme la balise image <img /> qu’on verra par la suite)
On a aussi une balise <style></style>. A l’intérieur, on y place des éléments CSS pour définir les styles et la mise en page.
D’autres balises sont également utilisées, comme la balise link (pour la gestion du favicon, d’une feuille CSS externe, ou des flux RSS)
Voici une page XHTML vide, ce sur quoi je me base pour créer une nouvelle page :
<!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="en" lang="en"> <head> <title>Nouvelle page d'exemple XHTML</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style> </style> </head> <body> </body> </html>
Petite parenthèse sur le Doctype à la première ligne. On remarque qu’il s’agit d’un document XHTML 1.0 Strict. On est donc obligés de mettre du contenu formatté en XHTML 1.0 Strict, ce qui veut dire (en gros) que s’il y a une erreur de syntaxe dans le document, la page ne va premièrement pas passer les tests de validation W3 – qui servent à voir si une page est valide, si si – ce qui entraîne le point suivant : il y a des chances pour que certains navigateurs n’affichent pas correctement ta page, et c’est pas ce que tu veux, si ?
Premier essai de page
Bon, on va commence simplement. Tout ce qu’il te faut, c’est un logiciel de traitement de texte du style Gedit, même le bloc-note sous windows ira très bien.
Recopie le contenu de la page ci-dessus dans le bloc note, et enregistre le fichir sous mapage.html. Maintenant, si tu ouvres la page avec ton navigateur, il ne va rien afficher du tout, c’est tout à fait normal, il n’y a rien dedans. On va donc y mettre du contenu, contenu qui se met entres les balises <body> et </body>.
Les titres
Il y a différents titres possible en XHTML. Du plus gros titres, entres les balises <h1> </h1> au plus petit <h6>. Il faut donc bien choisir son titres en fonction de son utilité à l’intérieur de sa page.
On va donc rajouter un titre, en les balises body.
<h1>Ma première page</h1>
Bon, OK, le titre est pourri. Mets-y ce que tu veux à la place. Enregistre et rouvre la avec ton navigateur. Surprise ! Enfin, c’est normal en même temps. Si t’as le temps et l’envie, mais c’est pas nécessaire, tu peux tester les différents niveaux de titres (h1 à h6) pour voir les différences.
C’est bien joli d’avoir un ou des titres dans sa page, mais nous, ce qu’on veut c’est du contenu ! Pour avoir du contenu, on va rajouter des paragraphes.
Les paragraphes
Les paragraphes se mettent dans les balises p, tout simplement
<p>Je suis un paragraphe très court</p>
Quelque chose qu’il faut comprendre dès à présent, c’est qu’on ne met jamais de texte directement dans <body>, mais on va toujours utiliser des balises de type block. du style p, li (pour les listes), span, etc. Plus simplement : le texte va se mettre à la ligne. Pour du texte simple non mis-en forme, on fera donc simplement un paragraphe.
La mise en forme
Généralement, on utilise le CSS pour mettre en forme du texte ou du contenu. Mais on utilise parfois aussi quelques balises pour par exemple mettre en gras juste un mot. La balise utilisée ici est la balise <strong>, qui se met toujours dans une balise de type inline. Une autre balise c’est em pour emphasis, ça permet, par défaut sans modification dans le CSS, de mettre du texte en italique.
Il est possible de transformer des block en inline et vice-versa, c’est très pratique dans la mise en page. Tout cela se fait avec le CSS. Tu peux dès à présent tester ces quelques trucs sur ta première page.
Les autres choses pratiques en XHML
Voici une liste de balises qu’il est bon de savoir pour mettre en place une page conventionnelle.
Les listes
Les balises <ul> et <li>. <ul> marque le début d’une liste, <li> marque le début d’un point de la liste, </li> marque la fin du point de la liste, et </ul> marque le point de la liste. Ce qui est pratique avec ce système, c’est qu’on peut mettre des <ul> à l’intérieur d’un <li>, pour faire une liste à plusieurs niveaux du genre :
- Point 1, premier niveau
- Point 2, premier niveau
-
- Point 1, Deuxième niveau
- Point 2, Deuxième niveau
- Point 3, premier niveau
Voici le code utilisé :
<ul> <li>Point 1, premier niveau</li> <li>Point 2, premier niveau</li> <li> <ul> <li>Point 1, Deuxième niveau</li> <li>Point 2, Deuxième niveau</li> </ul> </li> <li>Point 3, premier niveau</li> </ul>
Avec une mise en page CSS, il est possible, avec ces listes, de créer des menus déroulants, verticaux ou horizontaux.
Les images
Un site web sans image, c’est comme … un site web sans images. Ça attrire pas l’oeil. D’ailleurs, j’vais ajouter une image pour attirer l’oeil.
Avec une image, on va introduire le concept des options à l’intérieur des balises. Dans la balise de l’image <img> on a deux options obligatoires : src et alt
src sert à mettre la SouRCe de l’image, comme son nom l’indique. On va donc y mettre une URL de type http://www.site.com/dossier_farfelu/mon_image.png. Tu peux également y mettre un lien du style mon_image.png, mais ceci est possible qu’à condition que l’image soit dans le même dossier que la page.
Voici un exemple de code d’image :
<img src="http://www.loutre.ch/loutre.jpg" alt="Loutre" />
La balise img est de type inline, elle doit donc obligatoirement être dans une balise de type block tel que p.
Ce qui donne :
L’option « alt » indique un texte alternatif à l’image. Obligatoire dans le doctype XHTML 1.0 Strict, elle permet aux navigateurs sans images d’afficher ce texte à la place. C’est également utilisé pour l’accessibilité aux aveugles qui ont des navigateurs dits « parlants ».
D’autres options sont possibles, tels que l’option title qui affiche un titre à l’image (en l’occurence quand on passe le curseur sur l’image).
Les liens
Un lien permet de lier (ouah) une page à une autre page ou à un autre site web.
La balise se forme de la façon suivante :
<a href="lien">Ce qui est affiché</a>
Par exemple
<a href="http://www.perdu.com">Tu est perdu ?</a>
Donne : Tu est perdu ?
Comme avant, une balise de type block est obligatoire pour mettre un lien. Le lien peut, comme l’image, n’être qu’une page au lieu de l’url complète, à condition que la page se situe sur le même serveur.
Il y a la possibilité d’afficher une « image-lien » : il suffit de placer la balise image à l’intérieur de la balise lien, comme cela :
<a href="mapage.html"><img src="loutre.jpg" alt="Une loutre" /></a>
Ce lien va ouvrir la page « mapage.html » (donc www.loutre.ch/mapage.html », si elle existait) avec l’image « image.jpg » (donc www.loutre.ch/loutre.jpg). Il y a possibilité de mettre un chemin à la place de seulement le lien ou l’image, par exemple
<a href="mes_pages/mapage.html"><img src="mes_images/loutre.jpg" alt="Une loutre" /></a>
La page ne serait donc plus à la racine du site, mais dans le dossier mes_pages, et l’image serait dans un dossier mes_images.
Généralement, on utilise les URLs abrégées pour les pages en local, et les urls complètes pour afficher des images ou pour lier des pages d’autres sites web. Te voilà à présent prêt à être introduit au CSS, le truc le plus puissant depuis l’ère révolu des tableaux.
