Activité 1 : Explorer le code source et les liens

Ouvrir une page (ex : Wikipédia Tim Berners-Lee) et afficher le code source (Ctrl+U ou F12).
Repérer : balise <title>, les premières balises <h1>, quelques balises <a href="...">.
Noter au moins 3 URL de liens hypertextes trouvés dans le code.
Expliquer la différence entre le texte du lien et l’attribut href.

1 Quelle balise contient le titre affiché dans l’onglet du navigateur ?

Activité 2 : Reproduire une page simple

Objectif : recréer une page comportant titre, paragraphe, image et liste de liens.

<h1>Veille et fact-checking</h1>
<p>Paragraphe avec <strong>mot</strong> et <a href="https://exemple.fr">lien</a>.</p>
<img src="https://frederic-junier.org/SNT/Theme1_Web/media/schema-index2.jpg" alt="schéma">
<ol>
  <li>https://interstices.info/un-moteur-de-recherche-pour-le-meilleur-et-pour-le-pire/</li>
  <li>https://fr.wikipedia.org/wiki/Fake_news</li>
  <li>https://www.lemonde.fr/verification/</li>
  <li>https://www.liberation.fr/desintox</li>
</ol>

Saisir ce code dans un bac à sable ou éditeur local.
Vérifier l’affichage et l’imbrication des balises dans l’inspecteur.
Ajouter un second paragraphe et un lien supplémentaire de votre choix.

2 Quelle balise utilise-t-on pour une liste numérotée ?

Activité 3 : Styliser avec CSS externe

Créer un fichier style.css avec : couleurs (titres), police du corps de texte, marges.
Lier la feuille dans <head> : <link rel="stylesheet" href="style.css">.
Ajouter au moins 3 règles (ex : centrer le h1, justifier les paragraphes, colorer les liens).
Recharger la page et vérifier dans l’inspecteur que les règles sont appliquées.

/* Exemple minimal */
body { font-family: "Times New Roman", serif; }
h1 { color: #0b2f8f; text-align: center; }
a  { color: #b22222; text-decoration: underline; }

3 Dans quel bloc du document HTML place-t-on la balise <link> ?

Liens utiles

Retour au cours Web