Plan de la séance
But : comprendre ce qu'est une page HTML, écrire une page de A à Z, puis la modifier avec quelques règles CSS simples.
Comprendre
Page web, navigateur, fichier HTML, balise.
Apprendre
Squelette HTML, titres, paragraphes, listes.
Créer
Réaliser une petite page web dans un fichier
index.html.Modifier et rendre
Ajouter du style CSS et télécharger la fiche PDF.
Matériel nécessaire
- Un ordinateur.
- Un navigateur : Firefox, Chrome ou Edge.
- Un éditeur de texte : Notepad++, Bloc-notes, Visual Studio Code, etc.
- Un dossier de travail nommé par exemple
page_web_3e_prenom.
Fichiers de secours à télécharger
Le travail principal consiste à créer la page de A à Z. Ces boutons servent seulement si le professeur demande un fichier de départ ou si un élève est bloqué.
Les boutons créent de vrais fichiers avec le navigateur. Aucun accès internet n'est nécessaire.
Cours 1 - Une page web, c'est quoi ?
Quand on ouvre un site internet, le navigateur reçoit des fichiers et les affiche. Pour commencer, on utilise surtout deux langages :
Il sert à écrire le contenu et la structure : titres, paragraphes, images, liens, listes.
Il sert à modifier l'apparence : couleurs, tailles, marges, fond, positionnement.
Dans cette séance, on commence par le HTML, puis on ajoute quelques lignes de CSS.
À retenir
- Un fichier de page web peut s'appeler
index.html. - Le navigateur sert à afficher le résultat.
- L'éditeur de texte sert à écrire le code.
- Après une modification du fichier, il faut enregistrer, puis actualiser dans le navigateur.
Questions très simples
Cours 2 - Le squelette d'une page HTML
Une page HTML a une organisation. On appelle cela le squelette de la page. Il faut le respecter pour que le navigateur comprenne le fichier.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ma première page web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Écris ton contenu ici -->
</body>
</html>
Explication ligne par ligne
| Partie | Rôle |
|---|---|
<!doctype html> | Indique au navigateur que le document est une page HTML. |
<html> ... </html> | Contient toute la page. |
<head> ... </head> | Contient des informations sur la page. Cette partie n'est pas le contenu principal affiché. |
<meta charset="utf-8"> | Permet d'afficher correctement les accents. |
<title> ... </title> | Définit le texte de l'onglet du navigateur. |
<body> ... </body> | Contient ce qui est visible dans la page. |
Questions à compléter
Cours 3 - Les premières balises utiles
Le HTML fonctionne avec des balises. Une balise indique au navigateur le rôle d'un texte ou d'un élément.
<p>Bonjour</p> signifie : « Bonjour est un paragraphe ».Balise ouvrante et balise fermante
La plupart des balises vont par deux :
<p>est la balise ouvrante.</p>est la balise fermante.- Le texte se place entre les deux.
Les balises à utiliser aujourd'hui
| Balise | Utilisation | Exemple |
|---|---|---|
<h1> | Grand titre principal | <h1>Ma page</h1> |
<h2> | Sous-titre | <h2>Mes loisirs</h2> |
<p> | Paragraphe | <p>J'aime le sport.</p> |
<strong> | Mot important en gras | <strong>important</strong> |
<ul> et <li> | Liste à puces | <li>Item</li> |
<img> | Image | <img src="images/image.svg" alt="description"> |
<a> | Lien cliquable | <a href="https://...">Clique ici</a> |
Questions d'entraînement
Atelier guidé - Créer une page web de A à Z
Thème conseillé : Ma page de présentation. Tu peux parler d'un loisir, d'un sport, d'un animal, d'un jeu, d'un métier, d'un livre ou d'un sujet qui t'intéresse.
Étape 1Créer le dossier de travail
- Crée un dossier nommé
page_web_3e_prenom. - Dans ce dossier, crée un fichier nommé exactement
index.html. - Ouvre ce fichier avec ton éditeur de texte.
Étape 2Écrire le squelette HTML
Recopie ce code dans index.html. Attention aux chevrons < et >.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ma première page web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Écris ton contenu ici -->
</body>
</html>
Étape 3Ouvrir la page dans le navigateur
- Va dans ton dossier.
- Double-clique sur
index.html. - Le navigateur s'ouvre. Pour l'instant la page peut être presque vide : c'est normal.
Méthode de travail : éditeur à gauche, navigateur à droite. Après chaque modification : enregistrer puis actualiser.
Étape 4Ajouter le titre principal
Dans la partie <body>, ajoute un grand titre avec <h1>.
<body>
<h1>Bienvenue sur ma page</h1>
</body>
Enregistre puis actualise le navigateur.
Étape 5Ajouter un premier paragraphe
Ajoute un paragraphe sous le titre. Exemple :
<p>Bonjour, je m'appelle ... Cette page présente ...</p>
Ton paragraphe doit contenir au moins deux phrases.
Étape 6Ajouter un sous-titre et une liste
Ajoute un sous-titre <h2>, puis une liste à puces.
<h2>Mes centres d'intérêt</h2>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
Étape 7Ajouter une image
- Dans ton dossier, crée un sous-dossier nommé
images. - Place une image dans ce dossier. Tu peux utiliser
image_exemple.svgfourni par le professeur. - Ajoute cette ligne dans ton HTML :
<img src="images/image_exemple.svg" alt="Image d'exemple de page web">
Le texte alt décrit l'image. Il est utile si l'image ne s'affiche pas ou pour l'accessibilité.
Étape 8Ajouter un lien
Un lien se crée avec la balise <a>. L'adresse se place dans href.
<p>Voici un site utile : <a href="https://www.lumni.fr/college/troisieme">Lumni Troisième</a>.</p>
Étape 9Vérification HTML
Avant de passer au CSS, vérifie :
Modifier l'apparence avec CSS
Le HTML décrit le contenu. Le CSS change l'apparence. On sépare les deux pour que le code soit plus propre.
Étape 10Créer le fichier CSS
- Dans le même dossier que
index.html, crée un fichier nomméstyle.css. - Dans
index.html, vérifie que cette ligne se trouve dans<head>:
<link rel="stylesheet" href="style.css">
Étape 11Écrire les premières règles CSS
Recopie ce code dans style.css, puis modifie au moins une couleur.
/* Feuille de style CSS de ma première page web */
body {
font-family: Arial, sans-serif;
background: #f7f7f7;
margin: 30px;
}
h1 {
color: #1f4e79;
}
p {
font-size: 18px;
line-height: 1.5;
}
img {
width: 250px;
border-radius: 12px;
}
a {
color: #0a66c2;
}
a:hover {
color: red;
}
En CSS, une règle se présente souvent ainsi : sélecteur { propriété: valeur; }.
Étape 12Défi de modification
Choisis au moins trois modifications :
Erreurs fréquentes à corriger
| Problème | Solution |
|---|---|
| La page ne change pas | Enregistrer le fichier puis actualiser le navigateur. |
| L'image ne s'affiche pas | Vérifier le dossier images et le nom exact du fichier. |
| Le CSS ne s'applique pas | Vérifier que style.css est dans le même dossier que index.html et que la ligne <link> est correcte. |
| Une balise apparaît comme du texte | Vérifier les signes < et >. |
Fiche à rendre - PDF pour l'ENT
Complète cette fiche. Ensuite, clique sur Télécharger ma fiche PDF et envoie le fichier PDF sur l'ENT.
Important : le PDF généré reprend automatiquement les réponses saisies plus haut dans le cours et dans l'atelier. Il n'est donc pas nécessaire de tout recopier.
Réponses à rendre
Le bouton PDF fonctionne sans internet. Le PDF contient la fiche finale ET toutes les réponses saisies dans les questions du cours et de l'atelier.
Espace professeur
Les réponses ne sont pas visibles pour les élèves. Pour afficher les indications de correction, entre le code professeur.
Corrigé rapide des questions
Code possible pour le rendu attendu
Ce n'est pas le seul corrigé possible : le thème et les textes des élèves peuvent varier.
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La page de Lina</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bienvenue sur ma page</h1>
<p>Bonjour, je m'appelle Lina. Cette page présente quelques informations sur moi.</p>
<h2>Mes centres d'intérêt</h2>
<ul>
<li>Le basket</li>
<li>La musique</li>
<li>Les jeux vidéo</li>
</ul>
<h2>Une image</h2>
<img src="images/image_exemple.svg" alt="Image d'exemple de page web">
<h2>Un lien utile</h2>
<p>Je peux visiter <a href="https://www.lumni.fr/college/troisieme">Lumni Troisième</a>.</p>
</body>
</html>
style.css
body {
font-family: Arial, sans-serif;
background: #f7f7f7;
margin: 30px;
}
h1 {
color: #1f4e79;
text-align: center;
}
h2 {
color: #4b7f52;
}
p, li {
font-size: 18px;
line-height: 1.5;
}
img {
width: 300px;
border-radius: 12px;
border: 3px solid #1f4e79;
}
a {
color: #0a66c2;
}
a:hover {
color: red;
}