Un fichier .html est un fichier texte dont les informations décrivent et organisent le contenu des pages. Les balises du fichier sont interprétées (ceci est un titre, ceci est un paragraphe, ceci est une image, etc...) puis la page est affichée par le navigateur internet.

Balises de type bloc

Il faut que le fichier contienne au minimum la balise bloc <html>.
Les éléments de blocs sont, par défaut, affichés les uns en-dessous des autres. Ils peuvent contenir d'autres blocs, des éléments en-ligne et/ou des marqueurs.

Balises de type en-ligne

Les balises de type en-ligne doivent être à l'intérieur d'un bloc.
Les éléments en-ligne sont, par défaut, affichés les uns à côté des autres. Ils peuvent contenir d'autres éléments en-ligne.

Balises de type marqueur

Ces balises se suffisent à elles-mêmes, elles n'ont ni contenu, ni balise fermante. Elles indiquent, par exemple, un saut à la ligne ou l'affichage d'une image. Pour en savoir plus sur les images, vous pourrez consulter nos pages Arborescence.

Balise `<head>`

Cette balise «bloc» contient de nombreuses informations (métadonnées) qui ne sont pas affichées à l'écran mais qui permettent de préciser, entre autres, le nom de l'auteur, le titre à afficher dans l'onglet du navigateur et/ou le lien vers le fichier .css qui indiquera la mise en page/mise en forme générale de la page.

Voici un exemple correct d'en-tête pour un fichier .html :

Balise `<body>`

Ce bloc se place sous le bloc <head>, il contient les éléments affichés par le navigateur internet.

Utiliser ce site

Les exercices de ce site permettent d'entrer du code Html dans un formulaire et d'avoir en-dessous une prévisualisation directe de ce qu'affichera un navigateur. Ces formulaires ne permettent pas de créer directement un fichier .html.
Pour créer un fichier indépendant, il suffit d'ouvrir un éditeur de texte, de copier/coller le texte entré dans le formulaire, de sauvegarder sous un nom ayant pour extension .html puis de double-cliquer sur le fichier ainsi créé afin de voir le résultat dans son navigateur préféré (comme indiqué ici).

Compléter le code nécessaire entre les deux balises <body> et </body> afin d'avoir une prévisualisation qui ressemble à l'image ci-dessous (le copier/coller ne fonctionnera pas sur l'image, vous pouvez remplacer les pointillés par votre nom).

une piste
affichage à obtenir
un code possible

Un paragraphe s'écrit entre les balises  et  ;
Un passage à la ligne est spécifié par la balise marqueur  .

Attention, il vaut mieux distinguer plusieurs paragraphes plutôt que multiplier les retours à la ligne...

Enfin, plusieurs parties du texte sont mises en valeurs grâce à des balises en-ligne :

... ; ... ; <code>...</code> ; ....

Problèmes d'encodage

Lancer un éditeur de texte (comme Notepad++) puis créer un [Nouveau] fichier à [Enregistrer sous...] le nom favoris.html dans son répertoire personnel. Bien vérifier que le type de ce fichier est [Hyper Text Markup Language].
Aller dans le répertoire de sauvegarde puis double-cliquer sur favoris.html. Normalement le navigateur internet doit s'ouvrir… sur une page blanche. Si oui, fermer cette page, sinon, recommencer le 1°/.
Ouvrir à nouveau favoris.html avec l'éditeur de texte (clic droit puis [Ouvrir avec…]). Saisir les lignes suivantes :
<!DOCTYPE html> <html lang="fr"> <head> <title>Ma page à moi</title> </head> <body> Ma première page écrite à partir d'un éditeur. </body> </html>
Enregistrer ce fichier puis double-cliquer dessus pour l'ouvrir avec le navigateur internet. Le texte s'affiche-t-il comme ci-dessous ?
Ce mauvais affichage des caractères accentués provient de l'encodage. Pour résoudre ce problème, ouvrir à nouveau favoris.html avec l'éditeur de texte. Ajouter une ligne supplémentaire entre les balises <head> :
<head> <meta charset="utf-8" /> <title>Ma page à moi</title> </head>
Vérifier aussi l'encodage des caractères du fichier par l'éditeur de texte (Avec Notepad++ : [Encodage] → [Encoder en UTF-8 (sans BOM)]). Il faudra peut-être réécrire le texte du paragraphe...
Ouvrir enfin le fichier à l'aide du navigateur : c'est terminé !

Repérer et corriger toutes les erreurs de syntaxe dans le code ci-dessous. Cet exemple montre qu'un éditeur avec coloration syntaxique permet de repérer quelques-unes des erreurs que peut contenir un fichier .html.
Pour être encore plus rigoureux, prenez le réflèxe d'utiliser le site de validation du W3C...

Affichage à obtenir ?
Une solution ?