XHTML de base pour vos CMS

Même si vous utilisez un CMS pour faire un site web il arrive qu’un peu de HTML puisse vous rendre service. Voici donc du HTML de base, à la portée de tous.

Premiers pas

Si vous ignorez tout du HTML (”HyperText Markup Language”) qui devrait céder la place au XHTML (”eXtensible HyperText Markup Language”) sur tous les sites web, lisez:

• Faire un site: pour bien commencer
• Accessibilité d’un site Web

Principes du XHTML de base

Le langage XHTML est fait de balises et d’éléments. Les éléments sont des titres, des images, des citations, une insistance sur un terme (qu’on peut mettre en gras, en couleur, en italique, etc., à l’aide des feuilles de style CSS).

Le texte qui doit apparaître sur le site est entouré de balises XHTML qui s’inscrivent ainsi:

• balise d’ouverture
• Texte visible sur le site
• balise de fermeture)

Il y a une variante pour certains éléments comme les images, comme vous le voyez plus bas dans un exemple. La balise de fermeture se fait ainsi: /> — notez l’espace qui aide certains navigateurs à bien rendre le XHTML (pas d’espace si votre site est en HTML).

Il faut être très attentif:

• Ne pas oublier un guillemet (pas de guillemet à la française)
• Bien mettre les signes où il faut, respecter les espaces ou les absences d’espaces.

Voici donc ce qui peut vous manquer lorsque vous rédigez vos articles, vos pages ou vos billets dans un CMS.

Titres et hiérarchie

Une page web doit être organisée selon une hiérarchie qui a un sens. En principe:

• le titre de votre site est un titre de niveau 1,
• le titre de votre article, brève, billet est un titre de niveau 2
• vous pouvez avoir besoin de plusieurs titre de niveau 3 à l’intérieur de votre article
• plus rarement, des titres de niveau 4

Les titres de niveau 1 et 2 sont faits par le CMS lorsque vous tapez le titre de votre site et le titre de votre texte (article, page ou billet).

Donc, vous pouvez avoir besoin d’un titre de niveau 3 pour Drupal ou WordPress par exemple et d’un titre de niveau 4 certains CMS.

Un titre XHTML est l’élément h suivi du chiffre qui désigne son niveau, par exemple:

h1

Ceci produit titre de niveau 1 si vous entourez cet élément est présenté avec ses balises.

Pour faire un titre de niveau 3, il suffit de l’écrire! Exemple d’une partie dans un article présentant Linux:

<h3>Quelques CD-Live</h3>

Le titre que vous voulez voir affiché sur votre page web est entouré d’une balise ouvrante et d’une balise fermante.

Dans cette partie sur les CD-Live vous pouvez présenter rapidement Kaella, Zenlive, Puppy-Linux, etc. — voyez Enfin Puppy-Linux sur un ordinosaure.

Il vous faut donc des titres de niveau 4 pour chaque distribution. Exemple:

<h4>Zenlive, dérivée de Slackware en zénitude</h4>

Bien entendu, si vous faites une longue page sur chaque distribution, mieux vaut créer une catégorie sur les CDs-Live et consacrer un article à Kaella, Freeduc, Zenlive et les autres.

Images

Un CMS vous donne souvent un outil pour installer vos images très facilement. Vous trouverez souvent une fonction, du style “Ajoutez une image” ou “Téléchargez une image depuis votre disque dur” ou encore un raccourci dans la barre d’outils de la fenêtre où vous composez votre texte.

Dans Drupal 6, si vous n’installez pas un module spécifique, il faut parfois télécharger l’image, depuis votre disque dur, dans le sous-répertoire (ici nommé “fluffy”) du répertoire où est installé de Drupal, avec un client Ftp, comme Gftp sous Linux . Puis dans votre texte, il faut inclure du code HTML.

Voici un exemple adapté d’un ancien billet de Libres-Ailé(e)s: “Journée internationale contre les DRM: 3 octobre 2006″:

<img title="Journée d'action internationale contre les DRM" src="/fluffy/day_against_drm.png" alt="Journée d'action contre les DRM" width="130" height="222" />

Une autre manière d’insérer une image dans une de vos pages web est d’afficher une image d’un autre site directement dans votre page. Voici un exemple, bien pratique pour Squidoo puisque ce dernier ne permet pas de télécharger autant d’images que l’on veut depuis son disque dur:

<img title="Get Firefox!" src="http://www.mozilla.org/products/firefox/buttons/takebacktheweb_large.png" alt="Get Firefox!" width="185" height="72" />

Vous pouvez voir cette image de Firefox dans la section “Firefox et Thunderbird: les deux compères”, sur la page Pleins feux sur Firefox avec une fan de Mozilla. L’image vient du site mozilla.org.

Taille de l’image

Comme vous le voyez dans ces deux exemples, il est conseillé d’ajouter la largeur (width) et la hauteur (height) de l’image en pixels. Comment connaître la taille d’une image?

La taille de l’image est indiquée quand vous regardez l’image dans un logiciel approprié, tel un visionneur d’images (GqView ou Gthumb sous Linux, par exemple).

Avec Firefox ou ses compères (SeaMonkey, Camino): Clic droit sur une image que vous voyez sur un site > choisir, dans le menu contextuel qui s’affiche, “Propriétés de l’image”: la largeur et la hauteur sont indiquées, ainsi que d’autres détails utiles.

Titre, title, et titre alternatif, alt

Il est conseillé de rajouter un titre (title) et surtout un titre alternatif (alt) pour que les navigateurs n’affichant pas les images puissent afficher une courte description de l’image. Il arrive aussi qu’une image ne s’affiche pas (erreur d’origines variées): au moins l’image sera-t-elle traduite par un titre. Si l’image n’est que décorative, le titre est superflu et même encombrant, on ne met rien pour la valeur de alt. On inclut ainsi l’attribut alt pour la validation XHTML:

alt=""

Faire des liens

Les liens sont la base du web qui est un réseau de documents reliés par des liens.

Faire un lien vers un article

Exemple un article sur Libres-Ailé(e)s:

<a href="http://librezele.wordpress.com/2008/04/17/le-libre-en-bref/">Le Libre en bref</a>

Vous voyez que la balise d’ouverture est bien remplie: elle comporte l’URL complet vers l’article. Entre la balise d’ouverture et la balise de fermeture figure le titre de l’article en question. Le tout fait un joli lien comme ceci: Le Libre en bref

Faire un lien sur une image

Il est possible d’ajouter un lien à une image. Quand vous cliquez sur l’image, vous allez sur un site ou une page. Encore un exemple (adapté) de Libres-Ailé(e)s:

<a href="http://www.noooxml.org/petition-fr"><img src="/fluff/day_against_drm.png" alt="http://www.noooxml.org/petition-fr" width="175" height="21" /></a>

Espaces insécables et guillemets à la française

Rares sont les CMS qui font pour vous des espaces insécables après les signes doubles de ponctuation. Ah, Plume CMS avait annoncé que cela serait fait, chic! NB: On dit une espace insécable (féminin), en bonne typographie.

C’est tout simple:

Elle dit&nbsp;: <q>Vive Linux&nbsp;!</q>

Pas d’espace ni avant ni après entre le mot et le double signe de ponctuation. Voici ce que ça donne: Elle dit : “Vive Linux !” — Le point d’exclamation ne sera jamais séparé du mot le précédant même en cas de passage à la ligne.

Ah, ces fichus mais élégants guillemets à la française! Là encore, il n’y a guère que SPIP qui vous offre un raccourci. Voici donc ce qu’il vous faut, avec un exemple:

« Linux ? »

Tout cela pour dire « Linux ? » — Eh oui, les guillemets à la française s’accompagnent d’espaces insécables.

Pour se souvenir des guillemets ouvrants et fermants:

• laquo;: la lettre initiale veut dire “left” (gauche = ouvrant); “quo” = quote (citer, citation)
• raquo;: la lettre initiale veut dire “right” (droit = fermant)

Pourquoi Libre-Fan sur WordPress.com n’a pas d’espaces insécables ni de guillemets à la française? Je pense que la typo française va devoir s’adapter à la publication sur le web, d’autant que les vraies espaces insécables sont moins grandes que les espaces entre les mots et que le web est incapable de produire cette différence.

Quant aux guillemets à la française j’attends de pouvoir les mettre dans une feuille de style et sur wordpress.com, à moins de payer, je ne peux pas modifier les CSS. Je vais d’abord m’exercer dans mon coin d’éditeur de texte…

Et quelle barbe de taper tout ça à chaque fois! Il y a une solution: l’extension QuickNote pour Firefox ou SeaMonkey.

Extension Quicknote pour Firefox

Tapez ou copiez tous les codes qu’il vous faut dans un onglet de Quicknote que vous réservez à cet usage (vous avez droit à quatre onglets), un par ligne, en sautant une ligne par souci de clarté et il ne vous reste plus qu’à faire du copier-coller. Vous pouvez agrandir la taille des caractères pour y voir plus clair et ne pas vous tromper de ligne.

Mon œil! caractère spécial

Eh bien, même sous SPIP (au moins jusqu’à la version 1.8.3), il va falloir taper du code HTML pour avoir un vrai caractère “œ” qui passe à la validation du W3C. Le raccourci de SPIP vous fait un truc invalide.

Voici le code pour le caractère:

œ

Voici donc le code complet pour “mon œil”:

mon œil

Copiez dans QuickNote les mots comprenant ce caractère et que vous utilisez souvent. Puis, copiez-collez (à la molette sous Linux!).

Code complet: lien, image

Voici donc ce qui a été tapé (légèrement adapté) pour faire ce petit bloc dans une colonne latérale de Libres-Ailé(e)s:

<h2>Continuer à dire "Non" au format M$ Office Open XML, ni ouvert, ni XML, ni conforme</h2>

<p><a href="http://www.noooxml.org/petition-fr"><img src="/fluff/no-ooxml.png" alt="http://www.noooxml.org/petition-fr" width="175" height="21" /></a></p>

<p>À chacun de nous de refuser cette norme grotesque. <br />
Voyez <a href="http://librezele.wordpress.com/2008/04/02/noooxml/">No OOXML</a>

Pour voir ce que tout cela donne, vous pouvez aller voir Libres-Ailé(e)s — Comment faire ce lien avec une bulle qui s’affiche quand on place la souris sur le lien?

<a href="http://librezele.wordpress.com/" title="Pour Linux et le monde du Libre">Libres-Ailé(e)s</a></p>