Créer et consulter le Web
Comprendre les liens, créer une page HTML et CSS, lire une URL et une requête, vérifier les résultats et les traces.
Environ 45 minutes
- Distinguer Web et Internet et représenter des liens hypertextes
- Modifier le HTML et le CSS d’une page simple
- Décomposer une URL et expliquer un échange HTTP
- Analyser des résultats de recherche et des traces de navigation
Quand tu ouvres une page, qui répond à ton navigateur et comment la juger ?
Créer une page et la consulter mobilisent plusieurs couches : une adresse, un échange avec un serveur, un document structuré, une présentation, puis parfois un moteur de recherche qui permet de découvrir la page. Cette leçon suit ce trajet et montre comment vérifier ce que l’écran ne dit pas à lui seul.
Un réseau de pages liées
Le Web est un service qui utilise Internet, réseau reliant des machines. Les deux termes ne désignent pas la même chose : le courrier électronique utilise aussi Internet, sans être une page Web. Quand tu saisis une adresse dans un navigateur, celui-ci demande une ressource et affiche souvent un document composé de textes, d’images et de liens. Un lien hypertexte peut renvoyer vers une autre partie du document, un fichier ou une page hébergée ailleurs. Chaque lecteur peut donc suivre un chemin différent. Le texte du lien donne une indication, mais seule sa destination réelle dit où le clic conduit.
On peut représenter un petit ensemble de pages par un graphe : les pages sont des sommets et les liens, des flèches. La figure contient quatre pages. La page A mène à B et à C ; B et C mènent à D. Deux chemins conduisent de A à D. La flèche a un sens : un lien de A vers B n’implique pas que B renvoie vers A. Cette structure aide à comprendre comment un robot découvre des pages en suivant des liens. Elle ne garantit pas qu’il découvre toutes les pages : une page sans lien entrant peut être absente de son parcours.
Le Web a été proposé en 1989 au CERN par Tim Berners-Lee et est devenu un moyen de publier des documents reliés. Publier ne donne pas pour autant le droit de reprendre tout contenu trouvé en ligne. Une image visible dans un résultat de recherche peut être protégée par le droit d’auteur. Vérifie l’auteur, la licence et les conditions d’usage avant de l’intégrer dans ta page. Pense aussi aux informations personnelles : une page publiée peut être copiée et rester retrouvable longtemps. Une photo d’une autre personne ne se publie pas par simple commodité.
À toi d'essayer
Dans le graphe, peux-tu aller de C à B en suivant seulement les flèches ? Explique.
Coup de pouce : Suis chaque flèche dans son sens.
Voir la réponseMasquer la réponse
Non. C mène à D et aucune flèche ne mène ensuite de D vers B. Le fait que B mène aussi à D ne crée pas de lien inverse.
Écrire le contenu, puis son apparence
Le HTML décrit la structure et le sens du contenu d’une page. Un titre principal est identifié par la balise h1, un paragraphe par p, un lien par a. L’attribut href du lien contient l’adresse de destination, tandis que le texte entre les balises est celui que voit le lecteur. Cette organisation permet au navigateur et aux outils d’accessibilité de distinguer les rôles des éléments. Elle rend aussi le document plus facile à modifier : changer un titre ne demande pas de reconstruire toute la page.
Le CSS décrit la présentation : couleurs, tailles, espacements, disposition. Une règle visant h1 peut colorer tous les titres principaux sans changer leur texte ni leur place dans la structure du document. Si tu remplaces le texte d’un titre, tu modifies le HTML ; si tu changes sa couleur, tu modifies le CSS. Le navigateur reçoit le HTML, charge les ressources nécessaires, applique les styles et construit l’affichage. Une page peut également contenir du JavaScript, qui exécute des instructions dans le navigateur. Ce langage n’est pas nécessaire pour une page statique simple.
Exemple résolu
Une page d’association comporte le titre principal «\u00a0Atelier nature\u00a0», un paragraphe et un lien «\u00a0Programme\u00a0» vers /programme. Il faut ajouter «\u00a02026\u00a0» au titre et afficher celui-ci en vert. Que modifier ?
- Étape 1 : Repérer les rôles : h1 porte le titre, p le paragraphe et a le lien avec href.
- Étape 2 : Dans le HTML, modifier le contenu de h1 pour obtenir «\u00a0Atelier nature 2026\u00a0» ; conserver href vers /programme.
- Étape 3 : Dans le CSS, ajouter ou modifier une règle ciblant h1 avec la propriété color et une valeur verte.
Résultat : Le texte et la destination du lien restent dans le HTML ; la couleur du titre se règle dans le CSS. Le lien mène toujours à /programme.
Piège à éviter : Changer l’apparence du lien ne corrige pas une mauvaise adresse dans href.
Les outils de développement d’un navigateur permettent d’inspecter la balise correspondant au titre et les règles de style qui s’appliquent. Une modification effectuée dans ces outils est locale et temporaire : elle ne publie pas une nouvelle version sur le serveur. Pour conserver une modification, il faut enregistrer le fichier source dans un espace où tu as le droit d’écrire, puis utiliser un moyen de publication autorisé. Une image insérée dans le HTML doit aussi avoir un texte alternatif utile si elle porte une information ; ce texte sert notamment aux personnes qui ne voient pas l’image.
À toi d'essayer
Le titre d’une page reste identique, mais il doit être plus grand et mieux espacé. Faut-il changer le texte, la balise h1 ou le CSS ? Justifie.
Coup de pouce : Demande-toi si le sens du document change.
Correction détaillée pas à pasDans ce chapitre : 2 corrections détaillées.
Lire une adresse et suivre la requête
Une URL indique comment accéder à une ressource et où la demander. Dans https://exemple.fr/agenda?mois=juin, https est le protocole, exemple.fr le nom d’hôte, /agenda le chemin et mois=juin un paramètre de requête. Le signe ? sépare le chemin des paramètres ; plusieurs paramètres sont séparés par &. L’URL peut être copiée, partagée ou enregistrée, mais sa présence ne prouve pas que la page existe encore. Le texte apparent d’un lien peut cacher une autre destination : observe l’adresse effective avant de cliquer, surtout si le message demande des données personnelles.
Le navigateur joue le rôle de client : il lance une requête HTTP. Le serveur la reçoit et renvoie une réponse, avec un statut et souvent une ressource. Dans l’exemple de la figure, GET /agenda demande la page /agenda et une réponse 200 apporte du HTML. Le code 404 indique qu’aucune ressource correspondante n’a été trouvée à cette adresse. Le code 200 décrit une réponse technique, pas la vérité du document. Le navigateur peut demander séparément le CSS, les images et d’autres fichiers. Une seule page visible peut donc provenir de plusieurs échanges.
Exemple résolu
Décompose https://bibliotheque.exemple/chercher?q=atlas&lang=fr et explique la demande du navigateur.
- Étape 1 : Avant le nom du site, https indique le protocole ; bibliotheque.exemple est le nom d’hôte.
- Étape 2 : Après le nom d’hôte, /chercher est le chemin de la ressource.
- Étape 3 : Après ?, q vaut atlas et lang vaut fr ; le signe & sépare ces deux paramètres.
- Étape 4 : Formuler la demande du client sans inventer le résultat que produira le serveur.
Résultat : Le navigateur demande /chercher au serveur bibliotheque.exemple, avec q=atlas et lang=fr. L’URL seule ne dit pas quels résultats seront renvoyés.
Piège à éviter : Le signe ? ne fait pas partie du nom d’hôte ; il introduit les paramètres.
HTTPS établit une connexion chiffrée avec le serveur identifié par le certificat accepté par le navigateur. Le cadenas signale cette protection de l’échange, non la véracité des phrases de la page. Une page trompeuse peut elle aussi utiliser HTTPS. Le HTML reçu peut comporter du JavaScript exécuté chez le client, tandis que le serveur peut avoir effectué d’autres traitements avant la réponse. Inspecter le code reçu n’expose donc pas forcément les calculs du serveur. Pour décrire ce qui se passe, sépare ce que l’interface montre de ce que tu déduis.
À toi d'essayer
Un lien de livraison inattendu mène à une page HTTPS qui demande ton mot de passe. Que prouve le cadenas et comment réagis-tu ?
Coup de pouce : Distingue protection du transport et confiance dans le contenu.
Correction détaillée pas à pasDans ce chapitre : 2 corrections détaillées.
Chercher, vérifier, limiter les traces
Un moteur de recherche ne visite généralement pas tout le Web au moment où tu poses une question. Des robots explorent des pages accessibles ; le moteur analyse ensuite leur contenu et construit un index qui associe notamment des termes à des pages. Lors d’une recherche, il consulte cet index et classe les résultats. L’ordre peut dépendre de la correspondance avec les mots demandés et de liens vers les pages. Une page récente, non explorée ou interdite aux robots peut manquer. La première position n’équivaut donc pas à une vérification de l’exactitude.
Certains résultats sont des annonces achetées par des annonceurs. Leur mention publicitaire doit être distinguée des résultats ordinaires. Pour juger une réponse, ouvre la page et identifie son auteur, sa date, ses sources et son objectif. Une boutique, un billet d’opinion et une publication institutionnelle ne jouent pas le même rôle. Si un chiffre est décisif, retrouve le document qui l’a produit. Reformule ta requête et compare plusieurs résultats ou moteurs : un classement différent peut révéler ce que le premier laissait de côté.
Exemple résolu
Pour décrire la qualité de l’air dans une ville, un premier résultat publicitaire vend un purificateur ; un second donne des mesures datées d’un organisme public. Quelle source retenir ?
- Étape 1 : Préciser le besoin : des observations locales datées, et non un conseil d’achat.
- Étape 2 : Reconnaître la publicité commerciale et la page de mesures ; ouvrir la seconde.
- Étape 3 : Vérifier la ville, la date, l’indicateur, la méthode et l’organisme responsable.
- Étape 4 : Citer la mesure comme observation située, sans la généraliser à toute l’année.
Résultat : La page de mesures est la meilleure candidate si ses données et son auteur sont vérifiables. La publicité ne constitue pas une preuve sur l’air local.
Piège à éviter : Prendre la première position pour une validation scientifique ferait confondre promotion et mesure.
La navigation laisse des traces de natures différentes. Le navigateur peut conserver un historique local. Des sites peuvent recevoir des informations de connexion et placer des cookies selon les réglages du navigateur. Effacer l’historique local ne supprime pas automatiquement des données déjà reçues par un site. Dans les paramètres du navigateur, examine les cookies, les permissions accordées et les options de confidentialité. Une fenêtre privée limite surtout les informations conservées localement après la session ; elle ne rend pas invisible au site visité ni au réseau utilisé. Choisis donc tes réglages en connaissant leur portée réelle.
Vers le bac : expliquer une situation numérique
- Décris ce qui est observable : URL, requête, page affichée ou trace enregistrée.
- Nomme le mécanisme exact : HTML et CSS, client et serveur, index et classement, cookie ou historique.
- Appuie chaque explication sur un indice et sépare observation et hypothèse.
- Conclus par la limite de la preuve et par une vérification utile : source, destination d’un lien ou réglage du navigateur.
Vocabulaire
- Web :
- Service de ressources reliées par des liens et accessible grâce à Internet.
- Hyperlien :
- Élément cliquable menant à une autre ressource ou partie de document.
- HTML :
- Langage de balisage qui structure le contenu d’une page.
- CSS :
- Langage de règles qui définit la présentation d’une page.
- URL :
- Adresse comprenant notamment protocole, hôte, chemin et parfois paramètres.
- Requête HTTP :
- Message envoyé par un client à un serveur pour demander une ressource ou transmettre des données.
- Index :
- Structure associant des termes à des pages pour faciliter leur recherche.
- Cookie :
- Donnée qu’un site peut demander au navigateur de conserver et de renvoyer.
Erreurs fréquentes : confondre Internet et Web ; croire que CSS change le sens d’une page ; prendre HTTPS pour une preuve de véracité ; croire que le premier résultat a été validé ; penser que la navigation privée supprime toutes les traces.
Bilan des gestes à maîtriser
| Situation | Question utile | Action |
|---|---|---|
| Créer une page | Contenu ou style ? | Structurer en HTML et présenter avec CSS. |
| Consulter une page | À qui parle le navigateur ? | Lire l’URL et suivre la requête. |
| Chercher | Pourquoi ce résultat ? | Comparer auteur, date, source et publicité. |
| Naviguer | Quelles traces restent ? | Examiner les réglages et leurs limites. |
À retenir
- Le Web relie des ressources par des liens hypertextes ; il utilise Internet sans se confondre avec lui.
- HTML décrit la structure et le contenu ; CSS définit la présentation.
- Le navigateur envoie une requête HTTP et le serveur renvoie une réponse.
- HTTPS protège l’échange avec le site identifié par son certificat, sans garantir la véracité de la page.
- Un moteur explore, indexe et classe des pages ; le classement appelle une lecture critique.
- Historique local, cookies et données reçues par les sites sont des traces distinctes.
Fiche de révision
Pour expliquer une page Web, suis le trajet : lien ou URL, requête du navigateur, réponse du serveur, interprétation du HTML et application du CSS.
Pour modifier une page, demande-toi si tu changes son contenu, son rôle ou seulement son apparence. Vérifie la destination réelle du lien.
Pour analyser une recherche, confronte les résultats à leur auteur, leur date, leurs données et une éventuelle mention publicitaire.
Pour protéger ta navigation, observe séparément l’historique local, les cookies et les informations déjà transmises aux sites.
Questions fréquentes
Un moteur de recherche est-il un navigateur ?
Non. Le navigateur affiche les pages et envoie les requêtes ; le moteur est un service qui aide à trouver des pages à partir d’un index.
Un site HTTPS est-il forcément fiable ?
Non. HTTPS protège la connexion et vérifie le certificat présenté ; il ne valide pas les affirmations ni l’intention de l’éditeur.
Le mode privé efface-t-il toutes les traces ?
Non. Il limite surtout les traces conservées localement après la session. Les sites et le réseau peuvent encore recevoir des informations.
Et maintenant ?
Tu as lu le cours. L’étape suivante tient en une action.
Relis le coursLes exercices de ce chapitre arrivent bientôt.Prolonge l’expérience !
Continue à explorer ce chapitre à travers de nouvelles activités, des défis et des expériences interactives. Avec Premium, l’apprentissage continue !
Ici, tu débloques aussi 2 corrections détaillées.
Parent ? Suivez les progrès de votre enfant.
