Aller au contenu

-- title: Le Web - Exercices --

Le Web - Exercices

Exercice 1 - Définitions

Répondre en une phrase à chaque question.

a. Qu'est-ce que le HTML ? À quoi sert-il ?

Correction

HTML (HyperText Markup Language) est le langage de balisage utilisé pour définir la structure et le contenu d'une page Web. Il utilise des balises pour organiser les éléments (titres, paragraphes, images, liens...).

b. Qu'est-ce que le CSS ? À quoi sert-il ?

Correction

CSS (Cascading Style Sheets) est le langage qui définit la présentation visuelle d'une page Web : couleurs, polices, tailles, dispositions, marges. Il est séparé du HTML pour distinguer le contenu de sa mise en forme.

c. Qu'est-ce qu'une URL ? À quoi sert-elle ?

Correction

Une URL (Uniform Resource Locator) est l'adresse unique d'une ressource sur le Web. Elle permet au navigateur de localiser et d'accéder à une page, une image ou tout autre fichier hébergé sur un serveur.

d. Qu'est-ce qu'un lien hypertexte ?

Correction

Un lien hypertexte est un élément cliquable (texte ou image) dans une page Web qui permet de naviguer vers une autre page ou une autre partie de la même page. Il est codé avec la balise <a> en HTML.

e. Qu'est-ce qu'un moteur de recherche ? Décrire ses trois étapes de fonctionnement.

Correction

Un moteur de recherche est une application Web qui permet de trouver des ressources à partir de mots clés. Il fonctionne en trois étapes : (1) exploration - des robots parcourent le Web en suivant les liens ; (2) indexation - les pages découvertes sont analysées et stockées dans une base de données ; (3) classement et diffusion - les résultats sont triés par pertinence et affichés à l'utilisateur.

f. Qu'est-ce qu'un cookie ? À quoi sert-il ?

Correction

Un cookie est un petit fichier texte déposé sur l'ordinateur de l'utilisateur par un site Web. Il sert à mémoriser des informations : préférences de l'utilisateur, contenu d'un panier d'achat, identifiant de connexion, ou encore à suivre la navigation pour la publicité ciblée (cookies tiers).

g. Citer trois réglages du navigateur permettant de protéger ses informations personnelles.

Correction

(1) La gestion des cookies : on peut choisir d'accepter, refuser ou supprimer les cookies, en particulier les cookies tiers. (2) La suppression de l'historique de navigation. (3) La navigation privée qui ne conserve ni historique, ni cookies à la fin de la session.

Exercice 2 - Structure d'une page HTML

Voici le squelette d'une page HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    ...
</head>
<body>
    ...
</body>
</html>

1. Quel est le rôle de la partie <head> ? Donner deux balises que l'on peut y placer.

2. Quel est le rôle de la partie <body> ? Donner trois balises que l'on peut y placer.

3. Que signifie <!DOCTYPE html> ?

Correction

1. La partie <head> contient les informations sur la page qui ne sont pas directement visibles : le titre de l'onglet (<title>), l'encodage des caractères (<meta charset="utf-8">), le lien vers la feuille de style (<link rel="stylesheet" href="style.css">).

2. La partie <body> contient le contenu visible de la page. On peut y placer : <h1> (titre), <p> (paragraphe), <img> (image), <a> (lien), <ul> (liste à puces), <table> (tableau)...

3. <!DOCTYPE html> indique au navigateur que le document utilise le langage HTML5. C'est une instruction obligatoire placée en tout début de fichier.

Exercice 3 - Écrire une page HTML

Écrire le code HTML d'une page qui affiche :

  • un titre principal « Mon animal préféré »
  • un paragraphe de description
  • une image (avec un attribut alt)
  • un lien vers la page Wikipedia de l'animal choisi
Correction 
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Mon animal préféré</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Mon animal préféré</h1>
    <p>Le chat est un petit félin domestique apprécié
    pour sa grâce et son indépendance.</p>
    <img src="chat.jpg" alt="Photo d'un chat roux" />
    <a href="https://fr.wikipedia.org/wiki/Chat">
        En savoir plus sur Wikipedia
    </a>
</body>
</html>

Exercice 4 - Décomposer une URL

Décomposer chacune des URL suivantes en identifiant : le protocole, le nom de domaine, le chemin et la ressource.

a. https://www.lycée-exemple.fr/cours/maths/chapitre1.html

b. http://info.univ-paris.fr/etudiants/inscription.php

c. https://docs.python.org/3/library/random.html

Correction

a.

Élément Valeur
Protocole https
Nom de domaine www.lycée-exemple.fr
Chemin /cours/maths/
Ressource chapitre1.html

b.

Élément Valeur
Protocole http
Nom de domaine info.univ-paris.fr
Chemin /etudiants/
Ressource inscription.php

c.

Élément Valeur
Protocole https
Nom de domaine docs.python.org
Chemin /3/library/
Ressource random.html

Exercice 5 - URL relative et URL absolue

On considère l'arborescence suivante d'un site Web :

mon-site/
    index.html
    pages/
        top10.html
        reportage.html
    styles/
        style.css
    images/
        logo.png
        photo1.jpg

1. Expliquer la différence entre une URL relative et une URL absolue.

2. Depuis la page index.html, écrire l'URL relative pour accéder à top10.html.

3. Depuis la page top10.html, écrire l'URL relative pour afficher l'image logo.png.

4. Écrire le code HTML d'un lien dans top10.html qui renvoie vers index.html.

Correction

1. Une URL absolue donne l'adresse complète d'une ressource depuis le protocole (ex : https://mon-site.fr/images/logo.png). Une URL relative indique le chemin par rapport à la page courante (ex : ../images/logo.png). L'URL relative est plus pratique pour les liens internes d'un même site.

2. Depuis index.html (à la racine) : pages/top10.html

3. Depuis top10.html (dans pages/), il faut remonter d'un niveau : ../images/logo.png

4. <a href="../index.html">Retour à l'accueil</a>

Exercice 6 - HTML et CSS : rôle de chacun

On donne le code HTML suivant :

<h1>Bienvenue</h1>
<p>Voici mon site sur la cuisine.</p>

Et la règle CSS :

h1 { color: red; text-align: center; }
p { font-size: 18px; font-family: Arial; }

1. Que se passe-t-il si l'on supprime le fichier CSS ? La page est-elle encore lisible ?

2. Que se passe-t-il si l'on modifie color: red en color: green ?

3. Pourquoi sépare-t-on le HTML et le CSS dans des fichiers différents ?

Correction

1. Si l'on supprime le CSS, la page reste lisible : le navigateur affiche le contenu avec ses styles par défaut (titre en gros et gras, texte en noir sur fond blanc). Le contenu HTML ne change pas, seule la présentation revient aux valeurs par défaut.

2. Le titre « Bienvenue » s'affichera en vert au lieu de rouge. Le reste de la page ne change pas.

3. La séparation permet de :

  • Modifier l'apparence du site sans toucher au contenu.
  • Appliquer le même style à toutes les pages du site avec un seul fichier CSS.
  • Faciliter la maintenance : un designer peut travailler sur le CSS pendant qu'un rédacteur travaille sur le HTML.

Exercice 7 - Moteur de recherche

1. Remettre dans l'ordre les étapes du fonctionnement d'un moteur de recherche :

  • A. Les résultats sont classés par pertinence et affichés à l'utilisateur.
  • B. Des robots explorent le Web en suivant les liens hypertextes.
  • C. Les pages découvertes sont analysées et stockées dans un index.
  • D. L'utilisateur saisit une requête avec des mots clés.

2. Pourquoi le premier résultat affiché par un moteur de recherche n'est-il pas forcément le plus fiable ?

3. Citer deux critères utilisés par Google pour classer ses résultats.

Correction

1. L'ordre correct est : B (exploration) → C (indexation) → D (requête de l'utilisateur) → A (classement et affichage).

2. Le premier résultat peut être une publicité payante (annonce). Même pour les résultats naturels, les algorithmes favorisent la popularité (nombre de liens pointant vers la page) plutôt que la véracité de l'information. Un site populaire n'est pas forcément fiable. Il faut toujours croiser les sources.

3. Deux critères parmi : la pertinence des mots clés, la popularité de la page (nombre de liens entrants - PageRank), la qualité technique (vitesse, HTTPS, compatibilité mobile), la fraîcheur du contenu, le taux de clics.

Exercice 8 - Cookies et vie privée

1. Quelle est la différence entre un cookie de session et un cookie permanent ?

2. Qu'est-ce qu'un cookie tiers ? Pourquoi est-il particulièrement problématique pour la vie privée ?

3. Un site de commerce en ligne vous propose de « rester connecté » entre vos visites. Quel type de cookie utilise-t-il ?

4. Votre ami affirme : « En navigation privée, je suis complètement anonyme sur Internet. » A-t-il raison ? Justifier.

Correction

1. Un cookie de session est temporaire : il est supprimé à la fermeture du navigateur (ex : panier d'achat). Un cookie permanent reste stocké sur l'ordinateur entre les visites (ex : identifiant de connexion, langue préférée).

2. Un cookie tiers est déposé par un site différent de celui que l'on visite (souvent une régie publicitaire). Il est problématique car il permet de suivre l'utilisateur d'un site à l'autre, de dresser un profil de ses habitudes de navigation et d'afficher de la publicité ciblée.

3. Il utilise un cookie permanent qui stocke l'identifiant de connexion et persiste entre les visites.

4. Non, il a tort. La navigation privée empêche le navigateur de conserver l'historique et les cookies localement (sur l'ordinateur) après la session. Mais le fournisseur d'accès à Internet, les serveurs des sites visités et les administrateurs du réseau peuvent toujours voir les pages consultées. La navigation privée ne rend pas anonyme sur Internet.

Exercice 9 - QCM

Pour chaque question, indiquer la ou les bonnes réponses.

1. Le contenu d'une page Web (textes, images...) est écrit dans un fichier :

  • a) .jpg
  • b) .html
  • c) .css
  • d) .exe

2. Le style d'une page Web (couleurs, polices...) est défini dans un fichier :

  • a) .jpg
  • b) .html
  • c) .css
  • d) .exe

3. La balise HTML qui permet de créer un lien hypertexte est :

  • a) <p>
  • b) <a>
  • c) <link>
  • d) <li>

4. Un moteur de recherche classe généralement ses résultats :

  • a) par taille de fichier
  • b) par date de création
  • c) par ordre de popularité et de pertinence
  • d) par ordre alphabétique

5. Peut-on recevoir un cookie d'un site que l'on n'a jamais visité ?

  • a) Oui
  • b) Non
Correction

1. b) .html

2. c) .css

3. b) <a>

4. c) par ordre de popularité et de pertinence

5. a) Oui, c'est le principe des cookies tiers : un élément d'une page (publicité, bouton de partage d'un réseau social) peut déposer un cookie provenant d'un site que l'on n'a jamais directement visité.

Exercice 10 - Simuler un surfeur aléatoire (Python)

On considère quatre pages Web A, B, C et D reliées par des liens hypertextes :

  • A pointe vers B et D
  • B pointe vers C
  • C pointe vers A et D
  • D pointe vers A, B et C

Un « surfeur aléatoire » visite ces pages en suivant un lien choisi au hasard à chaque étape.

1. Représenter ce réseau sous forme d'un dictionnaire Python où chaque clé est une page et chaque valeur est la liste des pages accessibles.

2. Écrire une fonction etape_suivante(page, liens) qui, étant donné la page actuelle et le dictionnaire des liens, renvoie une page choisie au hasard parmi les pages accessibles.

3. Écrire un programme qui simule 1000 étapes d'exploration à partir de la page A, puis affiche le nombre de visites de chaque page.

Correction 
import random

# 1. Dictionnaire des liens
liens = {
    "A": ["B", "D"],
    "B": ["C"],
    "C": ["A", "D"],
    "D": ["A", "B", "C"]
}

# 2. Fonction étape suivante
def etape_suivante(page, liens):
    destinations = liens[page]
    return random.choice(destinations)

# 3. Simulation de 1000 étapes
page_actuelle = "A"
visites = {"A": 0, "B": 0, "C": 0, "D": 0}

for _ in range(1000):
    visites[page_actuelle] += 1
    page_actuelle = etape_suivante(page_actuelle, liens)

# Affichage des résultats
print("Nombre de visites après 1000 étapes :")
for page, nb in visites.items():
    print(f"  Page {page} : {nb} visites")

On observe que les pages ayant le plus de liens entrants (comme A et D, pointées par plusieurs pages) sont visitées plus souvent. C'est le principe simplifié du PageRank de Google : une page est d'autant plus « importante » que de nombreuses pages pointent vers elle.

🧪 Activités en classe

Activité 1 - Le surfeur aléatoire (avec un dé)

Objectif

Comprendre le principe du PageRank en simulant manuellement le comportement d'un surfeur aléatoire sur un petit réseau de pages Web.

Matériel

  • Un dé à 6 faces par groupe.
  • La feuille de comptage ci-dessous.
  • Un crayon.

Le réseau de pages

On considère 5 pages Web (A, B, C, D, E) reliées par les liens suivants :

A → B, C          (2 liens sortants)
B → C              (1 lien sortant)
C → A, D, E        (3 liens sortants)
D → A              (1 lien sortant)
E → B, D           (2 liens sortants)

Représentation en graphe

Dessinez ce réseau sur votre feuille : chaque page est un cercle, chaque lien est une flèche orientée.

Règle du jeu

  1. Départ : le surfeur commence sur la page A.
  2. À chaque tour, lancez le dé :
    • Si la page actuelle a 1 lien sortant : le surfeur suit ce lien quel que soit le résultat du dé.
    • Si la page actuelle a 2 liens sortants : résultat 1-3 → premier lien ; résultat 4-6 → deuxième lien.
    • Si la page actuelle a 3 liens sortants : résultat 1-2 → premier lien ; 3-4 → deuxième lien ; 5-6 → troisième lien.
  3. Notez la page visitée à chaque tour en faisant un bâton dans la feuille de comptage.
  4. Répétez pendant 50 tours (ou 100 si le temps le permet).

Feuille de comptage

Page Bâtons Total
A
B
C
D
E

Questions

1. Quelle page a été la plus visitée dans votre groupe ? Et la moins visitée ?

2. Comparez vos résultats avec ceux des autres groupes. Les classements sont-ils identiques ? Les proportions sont-elles similaires ?

3. Comptez le nombre de liens entrants de chaque page (combien de flèches arrivent sur chaque page). Comparez avec le classement obtenu.

4. La page B a peu de liens entrants. Peut-elle quand même être bien classée ? Pourquoi ?

5. Imaginez qu'une page F soit ajoutée, avec un seul lien vers elle-même (F → F). Que se passerait-il si le surfeur arrivait sur cette page ?

6. En quoi cette activité illustre-t-elle les notions de puits et de poche Web vues en cours ?

Correction

1. En théorie, la page A devrait être la plus visitée car elle reçoit des liens depuis C et D (deux pages qui sont elles-mêmes accessibles depuis de nombreuses autres pages). La page B est souvent parmi les moins visitées car un seul lien pointe directement vers elle depuis le réseau principal (depuis E).

2. Les classements entre groupes ne seront pas identiques à cause du hasard, mais les proportions devraient converger : les pages les plus « populaires » (beaucoup de liens entrants) auront des pourcentages proches d'un groupe à l'autre. Plus le nombre de tours est élevé, plus les résultats convergent.

3. Liens entrants : A reçoit des liens de C et D (2 liens entrants) ; B reçoit des liens de A et E (2) ; C reçoit des liens de A et B (2) ; D reçoit des liens de C et E (2) ; E reçoit un lien de C (1). Le nombre de liens entrants est un premier indicateur, mais la qualité des pages qui envoient ces liens compte aussi (c'est la récursivité du PageRank).

4. La page B peut être bien classée si les pages qui pointent vers elle (A et E) sont elles-mêmes bien classées. C'est le principe récursif du PageRank : ce n'est pas seulement le nombre de liens entrants qui compte, mais aussi l'importance des pages qui envoient ces liens.

5. La page F serait un puits (ou plus précisément une boucle fermée) : le surfeur qui y arrive ne peut plus en sortir et tourne indéfiniment sur F. C'est exactement le problème que le facteur d'amortissement (15 % de téléportation aléatoire) résout dans l'algorithme PageRank réel.

6. La page F (qui boucle sur elle-même) est un exemple de poche Web. Une page sans aucun lien sortant serait un puits. Dans les deux cas, le surfeur est piégé. Le facteur d'amortissement de 85 %/15 % introduit dans PageRank garantit qu'en moyenne, le surfeur se « téléporte » régulièrement vers une page aléatoire, évitant ces pièges.

Activité 2 - Frise chronologique du Web

Objectif

Situer les grandes étapes du Web dans le contexte de l'histoire mondiale pour mieux comprendre l'évolution rapide de cette technologie.

Partie A - Construction de la frise (travail en groupe)

Par groupes de 3-4 élèves, construire une frise chronologique de 1965 à aujourd'hui qui mêle :

  • les événements du Web (en haut de la frise) ;
  • les événements historiques mondiaux (en bas de la frise).

Événements du Web à placer obligatoirement :

Date Événement
1965 Ted Nelson invente le concept d'hypertexte
1989 Tim Berners-Lee invente le Web au CERN
1990 Premier site Web et premier navigateur
1993 Navigateur Mosaic (premier navigateur grand public)
1995 Création de JavaScript et de PHP
1998 Création de Google et du PageRank
2001 Standardisation du DOM ; lancement de Wikipédia
2005 Web 2.0 (blogs, réseaux sociaux)
2010 HTML5 et explosion du Web mobile

Événements mondiaux à placer obligatoirement :

Date Événement
1969 Premier pas sur la Lune
1989 Chute du mur de Berlin
1991 Dissolution de l'URSS
1993 Création de l'Union européenne
2001 Attentats du 11 septembre
2008 Crise financière mondiale
2010 Printemps arabe

Conseil

Utilisez une grande feuille A3 en format paysage. Tracez un axe horizontal avec des graduations régulières pour les années. Placez les événements Web au-dessus de l'axe et les événements mondiaux en dessous.

Partie B - QCM croisé (travail en groupe)

Chaque groupe rédige un QCM de 5 questions portant sur les liens entre les événements du Web et le contexte mondial. Exemples de questions possibles :

  • « Quel événement mondial majeur s'est produit la même année que l'invention du Web ? »
  • « Le navigateur Mosaic est apparu avant ou après la création de l'Union européenne ? »

Les groupes échangent ensuite leurs QCM et y répondent.

Partie C - Mini-exposé

Chaque groupe prépare un exposé de 3 minutes sur l'un des événements du Web suivants (tiré au sort) :

  • L'invention de l'hypertexte par Ted Nelson
  • L'invention du Web par Tim Berners-Lee
  • Le navigateur Mosaic et la démocratisation du Web
  • La création de Google et du PageRank
  • Le Web 2.0 et les réseaux sociaux
Correction - Éléments de réponse pour le QCM
  • L'invention du Web (1989) coïncide avec la chute du mur de Berlin.
  • Mosaic (1993) est apparu la même année que la création de l'Union européenne (traité de Maastricht entré en vigueur).
  • Google (1998) a été créé environ 7 ans après la dissolution de l'URSS (1991).
  • Le Web 2.0 (2005) s'est développé dans un contexte de démocratisation mondiale d'Internet, avec YouTube lancé la même année.
  • HTML5 et le Web mobile (2010) ont joué un rôle clé dans le Printemps arabe, permettant la diffusion rapide d'informations via les réseaux sociaux.

Activité 3 - Ma première page HTML/CSS

Objectif

Prendre en main les langages HTML et CSS en modifiant une page Web existante.

Préparation

Votre professeur vous fournit deux fichiers de départ. Créez un dossier mon-site sur votre bureau et placez-y ces deux fichiers :

Fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Ma page</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h1>Bienvenue sur ma page</h1>

    <p class="intro">Ceci est une page de test pour apprendre
    le HTML et le CSS.</p>

    <h2>Mes centres d'intérêt</h2>

    <ul>
        <li>La musique</li>
        <li>Le sport</li>
        <li>Les jeux vidéo</li>
    </ul>

    <img src="https://placecats.com/300/200" alt="Un chat mignon" />

    <p>Voici un lien utile :
        <a href="https://fr.wikipedia.org">Wikipédia</a>
    </p>
</body>
</html>

Fichier style.css :

body {
    background-color: white;
    font-family: Arial, sans-serif;
    margin: 40px;
    color: #333;
}

h1 {
    color: darkblue;
    text-align: center;
}

h2 {
    color: darkblue;
}

.intro {
    font-style: italic;
    color: #666;
}

img {
    display: block;
    margin: 20px auto;
    border: 2px solid #ccc;
    border-radius: 8px;
}

a {
    color: royalblue;
}

Étape 1 - Observer et comprendre

Ouvrez index.html dans un navigateur (double-clic). Observez le résultat.

1. Quel texte apparaît dans l'onglet du navigateur ? Quelle balise HTML le définit ?

2. De quelle couleur est le titre principal ? Quelle règle CSS est responsable ?

3. Le texte d'introduction est en italique. Quelle propriété CSS produit cet effet ?

Correction

1. L'onglet affiche « Ma page », défini par la balise <title>Ma page</title> dans le <head>.

2. Le titre principal est en bleu foncé (darkblue). C'est la règle h1 { color: darkblue; } qui en est responsable.

3. C'est la propriété font-style: italic; dans la règle .intro { ... }.

Étape 2 - Modifier le HTML

Ouvrez index.html dans un éditeur de texte (Bloc-notes, Notepad++, VS Code...). Effectuez les modifications suivantes, puis rechargez la page dans le navigateur après chaque changement pour vérifier le résultat.

4. Changez le titre principal (<h1>) pour qu'il affiche votre prénom, par exemple : « Bienvenue sur la page de Léa ».

5. Remplacez les trois centres d'intérêt par les vôtres.

6. Ajoutez un deuxième paragraphe sous le paragraphe d'introduction, décrivant en une phrase votre activité préférée. Utilisez la balise <p>.

7. Mettez un mot de votre choix en gras avec la balise <strong> et un autre en italique avec la balise <em>.

Correction

4. Remplacer <h1>Bienvenue sur ma page</h1> par <h1>Bienvenue sur la page de Léa</h1>.

5. Remplacer les <li> existants par ses propres centres d'intérêt.

6. Ajouter par exemple : <p>J'adore le <strong>basketball</strong> car c'est un sport d'<em>équipe</em> passionnant.</p> après le paragraphe class="intro".

7. <strong> rend le texte gras, <em> le met en italique.

Étape 3 - Modifier le CSS

Ouvrez style.css dans l'éditeur de texte.

8. Changez la couleur de fond de la page (background-color dans body) en une couleur de votre choix (par exemple : #f0f8ff, lightyellow, #ffe4e1...).

9. Changez la couleur du titre h1 (par exemple : crimson, #2e8b57, purple...).

10. Ajoutez une bordure colorée autour du paragraphe d'introduction en ajoutant ces propriétés dans la règle .intro :

border: 2px solid royalblue;
padding: 10px;
border-radius: 5px;

11. Changez la police de caractères du body en "Courier New", monospace. Que constatez-vous ?

Correction

8. Par exemple : background-color: lightyellow; donne un fond jaune pâle à la page.

9. Par exemple : h1 { color: crimson; } rend le titre rouge cramoisi.

10. Le paragraphe d'introduction est désormais encadré par une bordure bleue avec des coins arrondis et un espace intérieur (padding) pour que le texte ne touche pas la bordure.

11. La police change pour une police à chasse fixe (toutes les lettres ont la même largeur, comme dans un terminal). Cela montre l'impact du CSS sur l'apparence globale de la page sans modifier le contenu HTML.

Étape 4 - Ajouter une classe CSS

12. Dans style.css, créez une nouvelle classe .important :

.important {
    background-color: #fff3cd;
    padding: 8px;
    border-left: 4px solid #ffc107;
    font-weight: bold;
}

Puis, dans index.html, appliquez cette classe à l'un de vos paragraphes en ajoutant class="important" dans la balise <p>. Rechargez la page.

13. Expliquez en une phrase le rôle de l'attribut class en HTML et son lien avec le CSS.

Correction

12. Le paragraphe ciblé apparaît avec un fond jaune pâle, une bordure jaune à gauche et un texte en gras. La classe CSS permet de cibler un élément précis sans modifier tous les éléments du même type.

13. L'attribut class en HTML permet d'associer un élément à une règle CSS spécifique, identifiée par un point suivi du nom de la classe (.important). Cela permet de donner un style particulier à certains éléments seulement, sans affecter tous les éléments du même type (tous les <p> par exemple).

🎯 Projet final - Créer un mini-site

Objectif

Créer un site Web de 2 à 3 pages HTML reliées entre elles par des liens hypertextes, avec une feuille de style CSS commune. Ce projet mobilise toutes les notions du thème : HTML, CSS, liens hypertextes, URL relatives, séparation fond/forme.

Consignes

Thème

Choisissez un sujet qui vous passionne : un sport, un artiste, un pays, un jeu vidéo, un animal, une cause qui vous tient à cœur... Le thème est libre.

Structure attendue

Votre site doit contenir au minimum :

Élément Exigence
Pages 2 à 3 fichiers .html (par exemple : index.html, page2.html, page3.html)
Feuille de style 1 fichier style.css commun à toutes les pages
Liens internes Chaque page doit contenir au moins un lien vers une autre page du site (URL relatives)
Lien externe Au moins un lien vers un site extérieur (URL absolue)
Images Au moins une image par page (avec un attribut alt descriptif)
Structure HTML Chaque page doit avoir un <head> complet (titre, charset, lien CSS) et un <body> structuré

Contenu HTML minimal par page

  • Un titre principal (<h1>) et au moins un sous-titre (<h2>)
  • Au moins deux paragraphes (<p>)
  • Au moins une liste à puces ou numérotée (<ul> / <ol>)
  • Du texte en gras (<strong>) et en italique (<em>)

Style CSS minimal

Votre fichier style.css doit contenir au minimum :

  • Une couleur de fond pour body
  • Une police de caractères pour body
  • Un style pour les titres (h1, h2) : couleur, alignement...
  • Un style pour les liens (a) : couleur, survol (a:hover)
  • Au moins une classe personnalisée utilisée dans le HTML

Organisation des fichiers

mon-mini-site/
    index.html
    page2.html
    page3.html       (facultatif)
    style.css
    images/
        image1.jpg
        image2.jpg

Respect du droit d'auteur

Les images utilisées doivent être libres de droits. Vous pouvez en trouver sur Unsplash, Pexels ou Pixabay. Indiquez la source dans un commentaire HTML : <!-- Image : Unsplash, auteur XYZ -->.

Barème indicatif

Critère Points
Structure HTML correcte (balises bien fermées, <head> complet) /4
Contenu riche et structuré (titres, paragraphes, listes, images) /4
Liens internes fonctionnels entre les pages (URL relatives) /3
Lien externe fonctionnel (URL absolue) /1
Feuille CSS commune avec styles variés /4
Utilisation d'au moins une classe CSS personnalisée /2
Originalité et soin apporté au contenu /2
Total /20

Conseils

Méthodologie

  1. Commencez par le contenu : écrivez d'abord tout le texte dans vos fichiers HTML, sans vous soucier de l'apparence.
  2. Ajoutez les liens : vérifiez que la navigation entre vos pages fonctionne (cliquez sur chaque lien).
  3. Stylisez ensuite : travaillez le fichier CSS pour donner une apparence agréable et cohérente à votre site.
  4. Testez souvent : rechargez la page dans le navigateur après chaque modification pour voir le résultat.
Correction - Exemple de structure

Voici un exemple minimal pour un site sur le basketball :

index.html (page d'accueil) :

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Mon site sur le basketball</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h1>Le basketball</h1>
    <p class="intro">Bienvenue sur mon site consacré au
    <strong>basketball</strong>, un sport collectif passionnant !</p>

    <h2>Présentation</h2>
    <p>Le basketball est un sport d'équipe inventé en
    <em>1891</em> par James Naismith au Canada. Il oppose
    deux équipes de cinq joueurs sur un terrain rectangulaire.</p>

    <h2>Navigation</h2>
    <ul>
        <li><a href="regles.html">Les règles du jeu</a></li>
        <li><a href="joueurs.html">Les grands joueurs</a></li>
    </ul>

    <img src="images/basket.jpg"
         alt="Un terrain de basketball" />

    <p>Pour en savoir plus :
    <a href="https://fr.wikipedia.org/wiki/Basket-ball">
    Wikipédia - Basket-ball</a></p>
</body>
</html>

style.css :

body {
    background-color: #fafafa;
    font-family: "Segoe UI", Arial, sans-serif;
    margin: 30px;
    color: #222;
}

h1 {
    color: #e65100;
    text-align: center;
    border-bottom: 3px solid #e65100;
    padding-bottom: 10px;
}

h2 {
    color: #bf360c;
}

.intro {
    font-size: 18px;
    background-color: #fff3e0;
    padding: 12px;
    border-radius: 6px;
}

a {
    color: #1565c0;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #0d47a1;
}

img {
    display: block;
    max-width: 400px;
    margin: 20px auto;
    border-radius: 8px;
    border: 2px solid #ddd;
}

Ce fichier CSS est partagé par les trois pages (index.html, regles.html, joueurs.html) grâce à la même balise <link> dans chaque <head>. Il suffit de modifier style.css pour changer l'apparence de tout le site d'un coup.