Détails: Écrit par : Jeremie Bellanger; Catégorie : Tutos HTML; Mis à jour : 9 Avril 2025

Chapitre 2 : Notre première page HTML

Pour éditer notre page web, nous allons le faire "à l'ancienne" en écrivant directement les balises. Heureusement, cela fait longtemps qu'on ne fait plus comme ça, sinon ce serait très galère d'écrire des articles comme celui-ci. Je vous présenterai le web moderne plus tard. C'est plus ergonomique mais aussi terriblement plus compliqué... 😅

Pour cela, vous aurez besoin de deux choses :

votre navigateur internet préféré (Chrome, Opera, Edge, Safari, etc.),
et Notepad++ (notez qu'il est disponible dans votre centre de téléchargement si vous êtes élève de 2nde). Installez la dernière version, si ce n'est déjà fait. 😉

Nous allons ensuite créer un nouveau dossier dans votre dossier SNT (ou ailleurs 😜) qui hébergera tous nos projets HTML : Projets HTML par exemple. Là, créez un nouveau dossier Projet 1. Et dedans, créez un nouveau fichier en faisant : Clic Droit -> Nouveau -> Document texte.

Renommez ce fichier en Projet1.html et validez le changement d'extension.

Ouvrez ensuite Notepad++ et choisissez Fichier -> Ouvrir -> Puis le nom de votre fichier : Projet1.html.

Vous devriez vous retrouver comme ceci :

Notepad++ est un programme d'une aide inestimable car il permet d'ouvrir tous les types de fichiers et il gère automatiquement leur mise en forme et le surlignage des éléments de code. Vous pouvez ainsi ouvrir votre code Python avec et il apparaîtra comme sous Edupython ou VSCode. Mais vous ne pourrez pas le compiler par contre. 😉

Voilà, maintenant que c'est fait, on va pouvoir rentrer notre code dans Notepad++. Ensuite, on l'enregistrera avec la petite disquette en haut à gauche. Puis, on ira dans l'explorateur de fichier et on cliquera sur Projet1.html pour l'ouvrir dans le navigateur ou la page s'affichera comme par magie ! 😃

L'ossature d'une page web

Voici le code d’une page Web minimale en HTML :

<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Titre de la page</title>
   </head>

   <body>
      <h1>Grand titre</h1>
      <p>Texte du paragraphe</p>
   </body>
</html>

Si on l'ouvre dans Chrome, par exemple, cela va nous donner :

Etudions le code d'un peu plus près :

Comme nous l'avons déjà vu dans le chapitre précédent, le HTML est un langage à balises :

<> : balise ouvrante
</> : balise fermante

Les différents éléments constitutifs de la page sont donc insérés dans des balises permettant de structurer la page et son affichage :

<!doctype html> indique qu'il s'agit d'une page HTML.
<html> ... </html> balisent le début et la fin de notre page.
<head> ... </head> indiquent l'en-tête de la page, dans laquelle on peut notemment mettre son titre entre : <title> ... </title>.
<meta charset="utf-8" /> indique au navigateur qu'il doit utiliser l'UTF-8 qui permet d'afficher les caractères accentués. Sans lui, vos é, è, à... seront remplacés par des petits carrés !... 😱
<body> ... </body> : indiquent le corps de la page, qui contient ce qui s'affiche dans le navigateur.
<h1> ... </h1> signifient Heading et indiquent un titre de paragraphe. h1 est le plus grand, mais on peut ensuite avoir : h2, h3, h4, h5... de plus en plus petits. 😉
<p> ... </p> indiquent un paragraphe. C'est là qu'on écrit le texte principal de l'article.

TP 1

Place maintenant à un peu de pratique. 😜

Vous allez créer une page html qui parle de votre passion. Enregistrez-la bien car nous l'utiliserons par la suite dans les chapitres suivants !

Vous lui donnerez un titre (balise <title>) comme par exemple : Ma passion pour le cinéma.

Vous créerez ensuite un premier paragraphe en lui donnant un titre et en expliquant rapidement ce qu'est votre passion.

Voic un exemple :

Ma passion pour le cinéma

Le cinéma me passionne car il offre une évasion divertissante, des récits captivants et des émotions intenses. Il invite à la réflexion sur des thèmes variés, tout en étant une forme d'art et d'expression créative. Le cinéma favorise le partage et l'échange, tout en étant un reflet de la culture et de l'histoire.

P.S. : Si vous êtes à court d'idées, vous pouvez utiliser une IA pour vous aider à générer du texte. Ce n'est pas le contenu qui nous intéresse ici. 😌

<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Ma passion pour le cinéma</title>
   </head>

   <body>
      <h1>Ma passion pour le cinéma</h1>
      <p>Le cinéma me passionne car il offre une évasion divertissante, des récits captivants 
      et des émotions intenses. Il invite à la réflexion sur des thèmes variés, tout en étant 
      une forme d'art et d'expression créative. Le cinéma favorise le partage et l'échange, 
      tout en étant un reflet de la culture et de l'histoire.</p>
   </body>
</html>

Voilà pour ce chapitre,

Dans le suivant, nous mettrons un peu en forme notre page. 😋