HTML 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"), lisez :

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

Principes de base du HTML

Le langage HTML 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 HTML 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 alors ainsi : < /> — notez l'espace qui aide certains navigateurs à bien rendre le 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 et qui lui donne sa structure. 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
• et parfois, des titres de niveau 4

Les titres de niveau 1 et parfois de niveau 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 2 et 3 pour Drupal ou WordPress par exemple et parfois d'un titre de niveau 4.

Un titre HTML 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 avec ses balises.

Pour faire un titre de niveau 2, il suffit de l'écrire ! Exemple d'une partie dans un article présentant GNU/Linux :

<h2>Quelques CD-Live</h2>

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

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 :

<img title="Libè vos documents  !" src="https://download.tuxfamily.org/libergnu/igzz/2015/03/kolom-dfd.png" alt="Logo Document Freedom Day" width="150" height="133" />

Ce qui affiche :

L'image vient du site Liberté GNU/Linux.

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, Gthumb, etc., sous GNU/Linux).

Avec Firefox : 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 la courte description de l'image que vous indiquerez. Il arrive aussi qu'une image ne s'affiche pas (erreur d'origines variées) mais au moins l'image sera 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 HTML : 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 d'un article publié sur Liberté GNU/Linux :

<a> href="https://vive-gnulinux.fr.cr/glossaire/internet-et-web/">L'internet et le web;</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 : L'internet et le web.

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 de Liberté GNU/Linux :

<a href="https://vive-gnulinux.fr.cr/logiciel-libre/extensions-du-logiciel-libre/formats-ouverts/"><img title="Libèrez vos documents  !" src="https://download.tuxfamily.org/libergnu/igzz/2015/03/kolom-dfd.png" alt="Logo DFD!" width="150" height="133" /></a>

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

Pour voir ce que tout cela donne, vous pouvez aller voir page d'accueil de Libre-Fan
— Comment faire ce lien avec une bulle qui s'affiche quand on place la souris sur le lien ? Voici comment :

<a href="https://librefan.eu.org" title="Mozilla, GNU/Linux, le Libre (et les femmes ?)"><cite>Libre-Fan</cite></a>