Activité DG 1 — Coder en HTML

🌐

Activité DG 1
Coder en HTML

Classe de 3ème

Modifie ta propre page d'accueil, étape par étape

📄 page-accueil-2025.html

← → ou boutons pour naviguer

INTRO Objectifs de l'activité

objectifs.md

📌 Au programme

Comprendre le langage HTML
Modifier une partie du programme
Réaliser sa propre page d'accueil personnalisée
Améliorer sa page avec l'IA

💡 Le fichier de travail

Tu vas modifier page-accueil-2025.html et css-page-accueil.css, fournis par ton professeur, pour créer ta page d'accueil personnalisée.

apercu-final.webp

Voici à quoi peut ressembler ta page une fois terminée

INTRO Les outils utilisés

editeur.png

Pour éditer le code, on utilise Bloc-notes, WordPad ou Notepad...

navigateur.png

Pour visualiser le résultat, on utilise un navigateur internet.

ÉTAPE 01 / 11 Découvrir la structure d'une page HTML

page-accueil-2025.html

📌 Consigne

Ouvre page-accueil-2025.html avec ton éditeur de texte.

Surligne (ou note sur ta feuille) où commence et où finit la balise <head>.
Fais de même pour la balise <body>.
Compte combien de fois la balise <div> apparaît dans le fichier.

🔎 Squelette du fichier

<html>
  <head>
    <!-- informations invisibles -->
  </head>
  <body>
    <!-- tout ce qui s'affiche -->
    <div id="bloc-contenu">
      ...
    </div>
  </body>
</html>

J'ai terminé cette étape

aide.md

💡 Notion clé — Les balises

Une page HTML est construite avec des balises. Une balise s'ouvre <balise> et se ferme </balise>.

Trois grandes parties :

<html> : contient toute la page
<head> : les informations invisibles (titre de l'onglet, style...)
<body> : tout ce qui s'affiche à l'écran

🔧 Astuce

Une balise <div> ouvrante compte pour 1, sa fermeture </div> ne compte pas dans le total demandé.

ÉTAPE 02 / 11 Personnaliser le titre de sa page

page-accueil-2025.html

📌 Consigne

Remplace Ma page d'accueil (dans <title>) par un titre de ton choix.
Remplace XXXXXXXXXXXXX (dans le <h1>) par ton prénom.
Enregistre le fichier puis actualise-le dans le navigateur pour vérifier.

🔎 À trouver dans le fichier

<title>Ma page d'accueil</title>

<h1>Bienvenue sur ta page d'accueil XXXXXXXXXXXXX</h1>

J'ai terminé cette étape

aide.md

💡 Notion clé — title vs h1

<title> → le titre affiché dans l'onglet du navigateur (invisible sur la page)

<h1> → le grand titre affiché sur la page

⚠️ Important

N'oublie pas d'enregistrer (Ctrl+S) avant d'actualiser le navigateur, sinon tu ne verras pas tes changements !

ÉTAPE 03 / 11 Les liens hypertextes <a>

page-accueil-2025.html

📌 Consigne

Dans zone1, repère le lien Pronote.

Remplace adresse vers le site de pronote par la vraie adresse de Pronote de ton établissement.
Vérifie que le lien s'ouvre bien dans un nouvel onglet.

🔎 À trouver dans zone1

<a href="adresse vers le site de pronote (moncollege-valdoise.fr)" target="_blank">
  Pronote
</a>

J'ai terminé cette étape

aide.md

💡 Notion clé — la balise <a>

Un lien se crée avec <a href="adresse">texte du lien</a>.

target="_blank" permet d'ouvrir le lien dans un nouvel onglet.

🔧 Astuce

L'adresse de Pronote de ton collège est visible dans la barre du navigateur quand tu es connecté à Pronote.

ÉTAPE 04 / 11 Les images <img>

page-accueil-2025.html

📌 Consigne

Cherche le logo Pronote sur internet, clic droit dessus puis « Copier l'adresse de l'image ».
Colle cette adresse à la place de adresse de ton image logo protnote.
Vérifie que le logo s'affiche.

🔎 À trouver dans zone1

<img src="adresse de ton image logo protnote"
     title="Pronote" height="60px">

J'ai terminé cette étape

aide.md

💡 Notion clé — la balise <img>

<img src="..." title="..." height="60px">

src → indique où trouver l'image
title → s'affiche au survol de la souris
height → fixe la hauteur de l'image

⚠️ Important

<img> ne se ferme jamais avec </img> !

ÉTAPE 05 / 11 Les commentaires HTML

page-accueil-2025.html

📌 Consigne

Repère 3 commentaires différents dans le fichier.
Ajoute, tout en haut du fichier, un commentaire avec ton nom et la date.

🔎 Exemples présents dans le fichier

<!-- début de l'entête -->
<!-- fin de l'entête -->
<!-- début bloc contenu -->

J'ai terminé cette étape

aide.md

💡 Notion clé — commentaire

 ne s'affiche jamais dans le navigateur.

Cela sert à laisser des notes pour soi ou pour d'autres personnes qui liront le code.

🔧 Syntaxe

Un commentaire commence toujours par .

ÉTAPE 06 / 11 Dupliquer un bloc <li>

page-accueil-2025.html

📌 Consigne

Dans zone1 (Éducation Nationale), duplique le bloc <li> de Pronote deux fois pour créer deux nouveaux raccourcis :

Pix (adresse, logo, texte à adapter)
Educonnect (adresse, logo, texte à adapter)

🔎 Bloc à copier-coller

<li>
  <a href="..." target="_blank">
    <img src="..." title="Pronote" height="60px">
    Pronote
  </a>
</li>

J'ai terminé cette étape

aide.md

💡 Notion clé — répéter un bloc

Chaque raccourci de la zone 1 est un bloc <li>...</li> qui se répète.

Pour ajouter un raccourci, on peut copier-coller un bloc existant puis modifier son contenu (adresse, logo, texte).

⚠️ Piège

Vérifie bien que chaque <li> se referme par un </li>, et chaque <a> par un </a>.

ÉTAPE 07 / 11 Renommer une catégorie et ajouter des liens

page-accueil-2025.html

📌 Consigne

Dans zone2 :

Remplace Raccourcis personnels par Outils informatiques.
Ajoute un <li> avec un lien vers YouTube.
Ajoute un <li> avec un lien vers une IA de ton choix.

🔎 À trouver — zone2

<div id="zone2">
  <p class="categorie">Raccourcis personnels</p>
  <nav class="nav">
    <ul></ul>
  </nav>
</div>

J'ai terminé cette étape

aide.md

💡 Notion clé — class="categorie"

Le texte entre <p class="categorie"> et </p> est le titre affiché au-dessus de chaque zone de liens.

🔧 Astuce

Réutilise le bloc <li> de l'étape précédente comme modèle pour YouTube et ton IA préférée.

ÉTAPE 08 / 11 Ta zone personnelle

page-accueil-2025.html

📌 Consigne

C'est maintenant à toi de choisir ! Dans zone3 :

Remplace Titre de la catégorie de lien par un titre de ton choix.
Ajoute 2 à 3 <li> avec des liens vers des sites que tu utilises souvent.

🔎 À trouver — zone3

<div id="zone3">
  <p class="categorie">Titre de la catégorie de lien</p>
  <nav class="nav"></nav>
</div>

J'ai terminé cette étape

aide.md

💡 C'est ta zone !

Aucune bonne ou mauvaise réponse ici : choisis des sites que tu utilises réellement (jeu, réseau social, site scolaire...).

🔧 Astuce

Copie-colle un bloc <li> déjà utilisé pour gagner du temps, puis adapte l'adresse et le texte.

ÉTAPE 09 / 11 Ajouter un widget météo

page-accueil-2025.html

📌 Consigne

Va sur un site de widget météo gratuit et récupère le code <iframe> fourni pour ta ville.
Colle ce code à la place du commentaire .
Vérifie que la météo s'affiche bien dans le navigateur.

🔎 À trouver dans le fichier

<p class="titre-flux">Météo</p>

<!-- ajouter un script météo ici -->

J'ai terminé cette étape

aide.md

💡 Notion clé — <iframe>

La balise <iframe src="adresse"></iframe> permet d'afficher le contenu d'un autre site directement dans ta page (ici, un widget météo gratuit).

🔧 Astuce

Les sites de widgets météo proposent en général un bouton « Copier le code » qui génère directement le <iframe>.

ÉTAPE 10 / 11 Vérifier et corriger ses erreurs

verification.md

📌 Consigne

Teste ta page dans le navigateur.
Note sur ta feuille 2 erreurs que tu pourrais faire par accident, et comment les repérer dans le code.

J'ai terminé cette étape

aide.md

💡 Erreurs fréquentes en HTML

Guillemets " oubliés ou mal fermés
Balise ouverte mais jamais fermée (<div> sans </div>)
Faute de frappe dans le nom d'une balise

🔧 Astuce

Si ta page s'affiche « bizarrement » (tout décalé, du texte en trop), c'est presque toujours une balise mal fermée.

ÉTAPE 11 / 11 Améliorer sa page avec l'IA

amelioration-ia.md

📌 Consigne

Demande à une IA un petit texte de bienvenue original pour ta page (2-3 phrases).
Intègre ce texte à l'endroit de ton choix sur ta page.

J'ai terminé cette étape

aide.md

💡 L'IA comme assistant

Une IA peut t'aider à rédiger un texte, proposer des couleurs ou des idées de présentation.

C'est un outil : c'est toi qui décides ce que tu gardes !

🔧 Exemple de demande

« Écris un texte de bienvenue court et sympa pour ma page d'accueil personnelle, sur le thème de [tes passions]. »

BILAN 📋 Auto-évaluation

J'ai modifié le titre de ma page

J'ai ajouté Pix et Educonnect dans la zone Éducation Nationale

J'ai renommé la zone 2 en « Outils informatiques » et ajouté YouTube + une IA

J'ai créé ma propre zone de liens personnels

J'ai ajouté un widget météo

J'ai amélioré ma page grâce à l'IA