Le HTML (eXtensible Hyper Text Markup Language) est un langage qui vous permet d’écrire le contenu de votre page, c’est-à dire vos textes, vos liens, vos images. On parle également de code HTML.

Ce langage est composé de 2 éléments : les balises et les attributs. Un attribut contient un nom et une valeur.

Une balise sert à mettre en forme votre texte. Il existe 2 types de balises :

• celles qui vont par paire, il y a donc une balise de début et une balise de fin. Prenons comme exemple la balise de titre
• et celles qui sont seules, il n’y a qu’une seule balise. Prenons comme exemple la balise d’image

Les attributs permettent d'apporter certaines précisions à des balises. Elles sont dans les balises.

Reprenons la balise d’image. Les noms des attributs sont src et alt. La valeur de l’attribut src est "/images/bateau.jpg" et la valeur de l’attribut alt est "un bateau".

L’attribut alt permet de donner une brève description de l’image et l’attribut src permet de définir dans quel dossier se trouve l’image, de définir le chemin qui y mène, on parle également de l’adresse de l’image.

L’attribut alt est particulièrement important si pour une raison quelconque l'image ne peut pas être téléchargée. Le texte alternatif sert, en particulier, pour les non-voyants qui disposent de logiciels pour lire du texte à haute voix, mais n'ont rien pour décrire des images. Ce texte doit être court et informatif.

Si la balise est une balise qui va par paire, les attributs sont toujours dans la balise de début.

Le contenu d’une page HTML que l’on verra à l’écran, est contenu entre 2 balises body. Mais ce contenu est plus complexe et contient d’autres informations utiles, notamment au navigateur et aux moteurs de recherches.

Votre document doit déclarer son Document Type Definition (DTD) qui précise au navigateur quelle version de HTML vous utilisez.

Ensuite vous devez déclarer l’espace de noms XML (en abrégé, XMLNS).

Les en-têtes regroupent les informations nécessaires aux moteurs de recherche, les scripts qui doivent démarrer avec la page. Voici les balises les plus courantes.

Les balises meta dans lesquelles vous pouvez indiquer le nom de l’auteur de la page, les mots-clés et la description qui correspondent à votre page. Vous n’êtes pas obligés de mettre toutes ces informations.

La balise Title permet d’afficher le titre qui apparaitra dans la fenêtre du navigateur.

Note 1 : lorsque vous écrivez votre texte dans l’éditeur de Joomla, vous n’avez pas à écrire les balises meta, Joomla s’en charge pour vous. En ce qui concerne les mots-clés et la description, il existe une option lors de la création d'un article, qui vous permet de les ajouter facilement.

Note 2 : vous pouvez voir que le titre de la page contient des caractères bizarres en lieu et place du è. En effet, les navigateurs n’interprètent pas les accents. Il existe des codes qui remplacent les accents.

---

Le corps de la page est ce que les utilisateurs peuvent voir via leur navigateur. Elle est contenue entre les balises body.

C’est le corps de la page qui sera composé de différentes balises qui permettent de faire une mise en forme. Il est très important de réfléchir à la mise en forme globale de votre site Web. Chaque page doit posséder une mise en forme uniforme et hiérarchisée.

Il arrive que nous utilisions la balise br (retour à la ligne) plutôt que la balise p (paragraphe). L’équivalent d'une balise p sera 2 balises br.

Voici l’ensemble des balises dont vous aurez sûrement besoin pour effectuer une belle mise en page complète de vos textes.

strong : est utilisé pour mettre un bout de texte en gras
em : utilisé pour mettre en relief une phrase. Il donne un rendu italique.

Il y a 3 types de listes possibles en HTML :

• Les listes numérotées, dites listes à puces
• Les listes non numérotées : la numérotation se fera par défaut en chiffres arabes (1, 2, 3...). Vous pouvez le modifier en ajoutant l'attribut type à la balise ol
• Les listes de définitions (lexiques)

Nous avons déjà vu la balise image dans le début de ce guide.

Nous pouvons ajouter que le chemin qui indique où est situé l’image peut être écrit en relatif : le chemin n’est pas indiqué au complet, ou en absolu, le chemin est indiqué au complet. En général, on utilise un chemin absolu quand l’image n’est pas sur son compte.

Les formats des images les plus couramment utilisés pour le Web sont le JPEG (extension .jpg) et le GIF (extension .gif ). Utilisez de préférence le format PNG, GIF n'étant pas libre, et moins bon techniquement.

JPEG est un format qui est plus adapté aux photos, GIF ou PNG sont plus adaptés aux logos et de manière générale aux images ayant peu de couleurs.

Les tableaux sont décrits par l'élément table. C'est l'un des chapitres les plus complexes du HTML : les possibilités sont très nombreuses.

La balise table définit l'ensemble du tableau. À l'intérieur, il faut décrire les lignes du tableau et ses cellules. La balise tr décrit les lignes, et td les cellules. On déclare dans l'ordre table, puis tr et enfin td.

On peut déjà commencer par donner un titre à ce tableau, grâce à la balise caption. Le titre du tableau se place au début du tableau, avant la première ligne (avant le premier tr) mais dans le tableau tout de même (donc après la déclaration de table).

On veut également différencier les méta-cellules, balise th, qui donnent des informations sur le contenu des cellules de données, des cellules de données à proprement parler, balise td.

On peut aussi, pour rendre le tableau un peu plus esthétique, et plus lisible (6 cellules ça va, mais quand vous en aurez 42...), lui donner une bordure. On utilise pour cela l'attribut border à qui on spécifie une épaisseur en nombre de pixels. Généralement, border=1 suffit amplement à ce que vous voulez faire (mieux délimiter les cellules).

Note importante concernant les tableaux : Selon les nouveaux standards, il faut à tout pris éviter de faire des tableaux pour la mise en page globale d’une page. Les tableaux ne doivent servir qu’à présenter des données présentées dans un tableau.

C’est ce qui fait d'une page Web une vraie page hypertexte (le HT de HTML) et pas un bête document. Les liens se construisent avec la balise a, suivi d'attributs.

Le lien de base utilise l'attribut href.

On peut utiliser des liens absolus, qui donne l'ensemble de l'URL, mais aussi des liens relatifs, qui se rapportent à l'arborescence de votre site. Admettons que vous ayez dans votre arborescence un répertoire nommé stages qui contient, entre autres, le fichier rapport.pdf. Pour y faire lien, l’attribut href ressemblera à ceci : href= "stages/rapport.pdf ".

Note : Si vous voulez que votre lien s’ouvre dans un nouvel onglet, il faut que que vous ajoutiez l’attribut target="_blank".

Vous pouvez créer un lien de telle sorte que, lorsqu'on suit ce lien, on puisse vous envoyer un courrier électronique. On utilise toujours la balise a et son attribut href. Mais la valeur de href change. Quand un lecteur suivra ce lien, son navigateur lui proposera de vous envoyer un mail.

IMPORTANT : Donner une adresse « en clair » sur son site est une excellente manière de recevoir du spam. Pour maitriser les robots collecteurs d'adresses, il n’est pas rare d’avoir recours à des caractères spéciaux pour remplacer certains caractères : on appelle cela la programmation par entités.

Les entités dont vous avez besoin sont

• @ pour une arobase (@)
• . pour un point (.)

L'adresse en devient complètement illisible, on est bien d'accord ? C'est ce que verra le robot collecteur d'adresses. En revanche, un lecteur normal passant par un navigateur verra une adresse tout à fait normale.

Apprendre le HTML est relativement simple. Il suffit de mettre le temps et l’effort pour apprendre la base. Une fois quel celle-ci est maîtrisée, vous comprendrez mieux comment résoudre des problèmes d’affichages.

Nous n’avons exposé que les grandes lignes du HTML. Chacune des parties expliquée ici peut faire l’objet d’un chapitre entier. Pour compléter vos connaissances, n’hésitez pas à faire des recherches sur Internet.