Les trois langages essentiels du Web

Cet article explique le rôle de chacun des trois langages essentiels du Web : HTML, CSS et JavaScript.

HTML : un langage facile à apprendre!

Le HTML (Hypertext Markup Language) est le langage de balisage utilisé pour créer des pages Web. Beaucoup plus facile à apprendre qu'un langage de programmation, un langage de balisage sert simplement à enrichir et à structurer le contenu d'un texte par des balises ouvrantes et fermantes.

Par exemple, sur cette page, le titre principal au haut de la page est « HTML : structurer le contenu ». Pour identifier ce titre en HTML, il suffit d'écrire dans un fichier texte :

<h1>HTML : structurer le contenu</h1>

La balise ouvrante <h1> indique que le texte qui suit est un titre de niveau 1 (comme un Titre 1 dans Word) et la balise fermante </h1> (remarquez la barre oblique) indique que le titre de niveau 1 est terminé. C'est aussi simple que ça : on marque le texte d'un fichier avec des balises (markup) afin de structurer son contenu pour indiquer au navigateur comment le représenter à l'écran.

Exemple de page Web

Voici un exemple de page Web simple, mais complète et conforme à la dernière version d'HTML, HTML5 :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<h1>Ma première page Web</h1>
<p>Ceci est ma première <strong>page Web</strong>, écrite en utilisant le langage HTML.</p>
</body>
</html>

Plaçons-nous pour un instant dans la peau de notre navigateur préféré, qui recevrait ce fichier texte après avoir demandé une page Web nommée page.html :

D'abord, la première ligne <!DOCTYPE html> indique au navigateur « Hey, le fichier ci-dessous est une page écrite en HTML5 ». Cette balise, contrairement à la plupart des autres balises HTML, n'a pas de balise fermante. On ne fait qu'avertir le navigateur du type de contenu qui s'en vient. Comme nous allons créer des pages Web, toutes nos pages HTML débuteront par cette balise, sans exception. Facile!

Ensuite vient l'entête du document, compris entre les balises <head> et </head>. Un peu comme une page de présentation lors de l'envoi d'une télécopie, l'entête contient des informations à propos de la page HTML qui s'en vient. Ces informations n'apparaitront jamais à l'écran, mais elles sont quand même très importantes. Ici, la balise <meta charset='utf-8'> indique au navigateur que le fichier est encodé au format UTF-8 pour permettre la représentation des caractères accentués. Cette balise devrait être la première de tous les entêtes de vos pages HTML. La seconde balise de l'entête, comprise entre <title> et </title> indique le titre de la page. Le navigateur place ce titre dans les onglets des pages Web, et les moteurs de recherche comme Google et Bing s'en servent pour identifier les résultats de recherche. Il est donc très important d'inscrire des titres de page très descriptifs quant au contenu de la page.

Après l'entête vient le corps ou le contenu de la page, entre les balises <body> et </body>. Le contenu publié à cet endroit apparaitra à l'écran ou sera lu par un lecteur d'écran pour les personnes ayant des difficultés de lecture (aveugles, malvoyants, troubles de lecture, etc.) Il existe plusieurs balises pouvant être incluses dans le corps d'une page Web, dont les titres <h1> à <h6>, les paragraphes <p>, les images <img>, les liens hypertextes <a> (pour ancre), les listes numérotées <ol> (ordered lists), les listes à puces <ul> (unordered lists), les formulaires <form> et plusieurs marqueurs sémantiques servant à structurer le contenu d'une page, tels que <nav>, <main>, <header>, <footer>, <section>, <article>, <aside>, <figure>, <figcaption>, etc.

Exercice – Créez votre première page Web
Lancez l'application Bloc-notes et tapez le code ci-dessus au complet. Évitez de le copier-coller. Ce serait pratique et rapide, mais vous apprendrez mieux si vous le tapez ligne par ligne. Courage, ce n'est pas très long!

Enregistrez-le ensuite en cliquant sur Fichier> Enregistrer sous. Naviguez à votre fichier d'exercices et nommez-le page.html dans la case Nom du fichier. Au bas de la fenêtre, changez le format d'encodage pour UTF-8, puis cliquez sur Enregistrer. Si vous oubliez cette étape, vous verrez des caractères étranges sur votre page Web!

Dans votre navigateur Firefox, ouvrez ensuite un nouvel onglet avec le raccourci clavier Ctrl+T, puis ouvrez le fichier page.html avec le raccourci clavier Ctrl+O et en naviguant vers votre dossier d'exercices. Vous voyez maintenant votre première page Web dans votre navigateur! Ajoutez du contenu de votre choix, expérimentez avec quelques balises, sauvegardez et rafraichissez chaque fois votre page avec Ctrl+R ou la touche F5.

Outils requis