Utilisation de VS Code et structure minimale d’une page HTML5
Objectifs du chapitre
- Reconstituer les bases apprises sur CodePen dans un environnement local (VS Code).
- Comprendre la structure minimale d’un fichier HTML5.
- Découvrir la relation entre les sections
<head>et<body>. - Introduire la déclaration de styles CSS dans
<head>.
Configuration de VS Code
Installer et ouvrir VS Code
Si ce n’est pas déjà fait, téléchargez et installez Visual Studio Code (VS Code) à partir du site officiel.
Créer un nouveau fichier HTML
- Cliquez sur
File > New Fileou utilisez le raccourciCtrl + N(Windows) ouCmd + N(Mac).Enregistrez ce fichier en lui donnant une extension.html(exemple :index.html).
Astuce : Pour enregistrer, utilisezCtrl + S(Windows) ouCmd + S(Mac).
Pourquoi c’est important ?
Enregistrer le fichier avec l’extension .html permet à VS Code d’activer les couleurs et la reconnaissance automatique du code HTML.
I
Premier test
Utiliser le raccourci pour générer une structure HTML5 minimale
- Dans le fichier HTML préalablement enregistré, tapez
!(point d’exclamation), puis appuyez surEntrée.
- Vous verrez une structure de base comme celle-ci :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Ceci est la déclaration minimale OBLIGATOIRE d’une page web.
Veuillez passer le code de la langue en FR si votre site web est Français. C’est ce qui permet au navigateur de proposer les bonnes traductions.
<!DOCTYPE html>
<html lang="fr">
Comprendre les sections <head> et <body>
Le <head>
- Contient les informations techniques de la page, comme son titre et ses styles.
- Ces éléments ne sont pas visibles directement sur la page, mais ils sont indispensables pour son bon fonctionnement.
Le <body>
- Contient tout le contenu visible par l’utilisateur : texte, images, vidéos, etc.
Attention : <head> et <header>
- En HTML, il existe également une balise
<header>qui est utilisée pour structurer le contenu (exemple : titre de la page, logo). Ce n’est pas la même chose que<head>. - Ici, nous nous concentrons uniquement sur la balise
<head>.
Ajouter du contenu dans <body>
Créer du texte simple
Ajoutez une balise <p> dans la section <body> <p>Ceci est un paragraphe simple.</p> puis fermer le body si ce n'est pas déjà fait. </body>
Rappel :
La balise <p> sert à créer des paragraphes de texte. Vous avez déjà vu cela dans CodePen.
<body>
<p>Ceci est un paragraphe simple.</p>
</body>Ajouter du CSS dans <head>
Déclarer les styles directement dans le fichier HTML
- Vous allez ajouter une section
<style>dans la balise<head>pour y écrire du CSS - Vous allez ajouter la déclaration de style et dans le body un paragraphe.
<style>
body {
background-color: lightgray;
}
p {
color: blue;
font-size: 18px;
}
</style>Explication des styles ajoutés :
body { background-color: lightgray; }: Change la couleur de fond de la page en gris clair.p { color: blue; font-size: 18px; }: Rend le texte des paragraphes bleu avec une taille de 18 pixels.
Voici le résultat attendu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Ceci est un paragraphe simple.</p>
</body>
</html>
Pour visualiser le résultat
Méthode 1 : vous enregistrez le fichier (chapitre4.html), dans votre Finder ou votre Explorateur de fichier, vous double cliquez sur le ficher (chapitre4.html), le fichier s’ouvre dans le navigateur par défaut.
Méthode 2 : clic droit sous vscode et « Show Preview »
Rappel : mise en garde
- Ne confondez pas
<head>et<header>:<head>: Contient les métadonnées et les styles.<header>: Sert à structurer le contenu visible (exemple : titre de la page).
- Propreté du code : Toujours fermer les balises correctement pour éviter les erreurs d’affichage. veuillez noter la présence du slash / pour fermer la balise paire.
