👾 Atelier Web ② : Ma première page HTML

mai

2021

👾 Atelier Web ② : Ma première page HTML

Ce billet fait partie d’une série d’une dizaine billets : #atelier-web.

Cet atelier n’est pas prévu pour fonctionner sur les smartphones, certain exemples peuvent s’afficher de manière inattendue sur ces appareils.

Merci de laisser un commentaire si vous avez essayé ou fini cet atelier. Le commentaire ne sera pas publié si vous en faite la demande.

Premier exercice

On va commencer par ouvrir un éditeur de texte (Style NotePad sur Windows, gedit, xed ou mousepad sous _Linux₎.

HTML est un langage utilisant des balises. Cela signifie qu’on découpe le document en zones qui commence et finisse par la même balise.

Commençons par un le plus petit document HTML que vous puissiez écrire :

Code source :

<html>
  <head>
    <title>Ma première page Web</title>
  </head>
  <body>
    Ma première page Web !
  </body>
</html>

Ce que vous devez obtenir dans votre Navigateur Web (Je vous encourage à utiliser Firefox) :

Vous noterez que le titre ne s’affiche pas dans la page, mais dans la barre de titre du navigateur, vous pouvez vérifier en utilisant ce lien (Sur tablette ou téléphone, pour faire apparaître le titre vous devrez créer un marque-page à partir du document).

Avez-vous un problème d’affichage lorsque vous avez ouvert la page depuis ce lien ? Nous y reviendrons plus loin…

🥇 Consigne 🧠⇝🎓

Recopier le texte, on dira le code ci-dessus dans votre éditeur.

Ensuite, vous sauvegarderez votre travail dans un fichier sous le nom ma-premiere-page-web.html.

Pour vous simplifier la vie, dans les noms de fichiers, je vous conseille de n’utiliser que les caractères suivant : abcdefghijklmnopqrstuvwxyz-_..

Évitez les espaces, les majuscules, les accents et tout caractère spécial dans ce nom, cela vous évitera des soucis par la suite.

Et le nom du fichier doit finir par .html.
Attention sur certain systèmes d’exploitation comme Windows, lorsqu’on renomme un fichier, l’extension n’est pas nécessairement modifiable avec la configuration par défaut (sous Windows, elle n’est même pas visible). Il vous faudra être vigilant à bien positionner cette extension à la création du fichier.

Explications

Le document commence par <html> et fini par </html>. On dit qu’on « ouvre » la balise html puis qu’on la « referme ».

La structure d’une page HTML impose un certain nombre d’éléments, en particulier, la balise html doit contenir les balises suivantes :

head: C’est l’entête du document, qui contient des informations techniques, comme le titre (title).
body: C’est le corps (le contenu) du document. Dans notre cas, un petit texte…

Fait l’exercice de recopier cette page et de la lancer dans votre navigateur (attention à l’extension du nom de fichier).

Second exercice

Techniquement, le fichier ci-dessus n’est pas valide, en tous les cas pas dans le sens du respect de la norme HTML : il manque deux choses.

Type de document

Une première ligne qui sert d’identificateur pour le type de fichier. Cette ligne ne respecte pas exactement la norme HTML et ce n’est pas un problème car techniquement, elle précède le document.

Cette ligne est la suivante :

<!DOCTYPE html>

Notez qu’il existe des variations, plus précises, qui permettent de préciser la version de la norme HTML utilisée par le document, voici quelques exemples :

Norme HTML 4.01 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Norme XHTML 1.1 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Langue utilisée

La seconde chose qui manque est l’identification de la langue utilisée dans le document. Pour cela, on ajoute un attribut à la balise html. Le nom de l’attribut est lang et la langue c’est le français, que nous noteront la forme fr.

Les valeurs d’attribut de langue sont décrites par une spécification de l’IETF appelée BCP 47.

<html lang="fr">

Une fois c’est deux éléments ajoutés, le document respecte la norme minimale, mais il reste d’autres choses à améliorer pour qu’il puisse être bien affiché dans le cas général.

D’abord, il est souhaitable de préciser l’encodage utilisé pour le fichier texte. Ce point dépend de votre éditeur et de votre système d’exploitation. Un éditeur avancé vous permettra de choisir l’encodage et dans ce cas, je vous conseille d’utiliser UTF-8.

Cet encodage devra être précisé au niveau de l’entête du document (dans la balise head) à l’aide de la balise meta. Notez que la balise meta ne se ferme pas.

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Un autre détail à améliorer est de mettre le texte dans une balise indiquant qu’il s’agit d’un paragraphe. Il s’agit de la balise p, cela permet de structurer le texte et nous le verrons plus tard, d’avoir un style d’affichage particulier pour les zones étant à l’intérieur d’un paragraphe.

Voici comment faire cela :

<p>Ma première page Web !</p>

🥇 Consigne 🧠⇝🎓

Je vous propose maintenant d’apporter ces corrections à votre document.

Correction

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Ma première page Web</title>
  </head>
  <body>
    <p>Ma première page Web !</p>
  </body>
</html>

Voir ce résultat dans votre navigateur.

Le problème d’affichage vu un peu plus haut à maintenant disparu.

Vous voici maintenant avec un document HTML valide.

Références

Le validateur de page HTML du W3C, l’organisme de normalisation.

L’atelier complet

Liste des billets de l'atelier Web.
Le billet suivant.

ᦿ

Vos commentaires

Pas encore de commentaire - ajouter le votre.
Ajouter votre commentaire

cClaude.rocks ☕ Le blog

Premier exercice

🥇 Consigne 🧠⇝🎓

Explications

Second exercice

Type de document

Langue utilisée

🥇 Consigne 🧠⇝🎓

Correction

Références

L’atelier complet