Introduction à HTML

HTML est essentiellement un langage simple, composé d'éléments qu'on peut appliquer à des fragments de texte dans un document pour leur donner un sens différent. Est-ce que ce texte est un paragraphe ? Est-ce que c'est une liste à puces ? Est-ce qu'il fait partie d'un tableau ? Les éléments permettent aussi de fournir une structure et organisent le document en sections logiques (est-ce que le document a un en-tête ? est-il composé de trois colonnes ? possède-t-il un menu de navigation ?) et d'intégrer du contenu comme des images ou des vidéos. Ce guide vise à illustrer ces deux premiers concepts et à présenter les notions fondamentales et les éléments de syntaxe que vous devez connaître pour comprendre HTML.

Prérequis

Vous n'avez pas besoin de connaître quoi que ce soit en HTML pour parcourir ce guide. En revanche, vous devez être familier avec les ordinateurs et l'utilisation du Web. Vous devriez avoir un environnement de travail en place (les étapes nécessaires sont détaillées dans cet article) et comprendre comment créer et gérer des fichiers (ce qui est expliqué dans cet article). Ces étapes sont décrites dans le module Démarrer avec le Web qui s'adresse aux débutants.

Guides

Ce module contient les articles suivants qui vous permettront d'explorer les bases théoriques de HTML et qui vous permettront de tester vos compétences.

Débuter avec HTML

Cet article aborde les toutes premières bases en HTML pour vous permettre de démarrer. Il définit les éléments, les attributs et tous les autres termes importants du lexique HTML. Il illustre la structure d'un élément HTML, la structure d'une page HTML classique et explique les fonctionnalités de base du langage. Vous pourrez manipuler des exemples au fur et à mesure de la lecture.

Une tête bien remplie : le contenu de head et les métadonnées en HTML

La « tête » d'un document HTML, correspondant à l'élément head est la partie du document qui n'est pas affichée à l'écran du navigateur quand la page est chargée. Elle contient des informations comme le titre (<title>) de la page, fait référence aux feuilles de style CSS (qui permettent de mettre en forme le contenu HTML), permet de lier des favicons et d'indiquer des méta-données (l'auteur du document, les mots-clés qui décrivent le document, etc.).

Les concepts fondamentaux de HTML liés au texte

L'un des rôles principaux de HTML est de fournir un sens au texte (on parle aussi de sémantique) afin que le navigateur puisse l'afficher et le gérer correctement. Dans cet article, on voit comment utiliser HTML pour structurer un bloc de texte avec des titres, des paragraphes, ajouter des marques d'emphase ou d'importance sur les mots, créer des listes, etc.

Créer des hyperliens

Les hyperliens sont les liens qui permettent de former la toile qu'est le Web. Dans cet article, on voit ce qui est nécessaire pour créer un lien et on discute des meilleures pratiques autour des liens sur le Web.

La mise en forme avancée du texte

Il existe de nombreux autres éléments HTML qui permettent de mettre en forme le texte qui ne sont pas couverts dans l'article sur les concepts fondamentaux de HTML relatifs au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles. Dans cet article, nous verrons comment symboliser les citations, les listes de description, le code informatique, les indices et exposants, les informations de contact, etc.

La structure d'un document et d'un site web

HTML permet de définir les différents fragments d'une page (cet élément est un paragraphe, cet élément est une image) mais il permet également de définir la structure d'un site web (l'en-tête, le menu de navigation, le contenu principal, etc.). Dans cet article, on détaille la structure d'un site simple et on écrit le HTML correspondant.

Déboguer du code HTML

Écrire du code HTML est une première étape mais que se passe-t-il s'il y a des problèmes ou des erreurs ? Comment réparer un document HTML cassé ? Dans cet article, nous verrons différents outils qui pourront vous aider.

Évaluations

Les exercices suivants vous permettront de tester votre compréhension des bases de HTML.

Utiliser les bons éléments pour une lettre

Tôt ou tard, on apprend tous à écrire une lettre. Cet exemple sera utile pour créer un exercice et tester vos compétences en mise en forme.

Organiser la structure d'une page

Dans cette évaluation, vous devrez organiser la structure d'une page simple avec un en-tête, un pied de page, un menu de navigation, du contenu et une barre latérale.

Voir également

Web literacy basics 1

Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s'y familiariser avec la lecture, l'écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.