Loutre que tu es, tu aimerais connaître 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 avec certaines options, suivis de contenu, suivis de 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.

*contenu*

Ce sont simplement les balises qui définissent la page. À l'intérieur de ces balisent, on y met les balises , et les balises . Ce sont les balises de premier niveau.

Dans les balises , on y met des balises d'entête comme , qui définissent le titre de la page, les balises 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 qu'on verra par la suite)

On a aussi une balise . 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 :

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 et .

Les titres

Il y a différents titres possible en XHTML. Du plus gros titres, entres les balises

au plus petit

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

Ma première page

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

Je suis un paragraphe très court

Quelque chose qu'il faut comprendre dès à présent, c'est qu'on ne met jamais de texte directement dans , 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 , 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

et
• .
  marque le début d'une liste,
  • marque le début d'un point de la liste,
  marque la fin du point de la liste, et
  marque le point de la liste. Ce qui est pratique avec ce système, c'est qu'on peut mettre des
  à l'intérieur d'un
  • , 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é :

    
    Point 1, premier niveau
    Point 2, premier niveau
    
    
    Point 1, Deuxième niveau
    Point 2, Deuxième niveau
    
    
    Point 3, premier niveau
    
    

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

    La balise img est de type inline, elle doit donc obligatoirement être dans une balise de type block tel que p.

    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 personnes malvoyantes 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 :

    Ce qui est affiché
    

    Par exemple

    Tu est perdu ?
    

    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 :

    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

    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. C'est ce qu'on appelle un chemin relatif.

    Généralement, on utilise les chemins relatifs pour les pages en local, et les urls complètes (ou chemins absolus) pour afficher des images ou pour lier des pages d'autres sites web.

    Et maintenant au tour du CSS de se trouver une place dans le XHTML !