Aller au contenu

Exercices#

Le Web

Mode d’emploi

  • Niveau : ★ échauffement, ★★ classique (niveau bac), ★★★ défi ; les coups de pouce et les corrigés se déplient sous chaque exercice.

  • sur papier à faire sur papier ; ▶ à réaliser sur un éditeur en ligne (jsfiddle.net ou codepen.io).

  • Les tableaux de balises HTML et de propriétés CSS du cours (§ IV et V) peuvent être consultés pour tous les exercices.

  • Usage de l’IA, indiqué sur chaque exercice : aucune ; en appui (déboguer, reformuler, vérifier ; la réponse finale est écrite et comprise par vous) ; l’exercice s’appuie sur une réponse d’IA. Voir la charte d’usage de l’IA.

Le Web et Internet#

★ Exercice 1 — Vrai ou faux #

• essentiel

sur papier Répondre et corriger les phrases fausses.

  1. Le Web et Internet, c’est la même chose.

  2. Un e-mail est transporté par le Web.

  3. Le Web repose sur trois technologies : HTTP, les URL et le HTML.

  4. Le Web a été inventé par Tim Berners-Lee, au CERN.

Coup de pouce

Relisez la section « Le Web n’est pas Internet » : le Web est-il le réseau lui-même, ou un service qui circule sur ce réseau ?

Corrigé

Réponses aux questions fermées ; pour les questions ouvertes, des pistes attendues (d’autres réponses sont possibles).

Activité 1 — Ma première page

Le résultat dépend de chacun ; voici une réalisation possible des trois questions (zone HTML, puis zone CSS de l’éditeur en ligne).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Ma premiere page</title>
  </head>
  <body>
    <h1>Bienvenue</h1>
    <p>Ceci est ma page web.</p>
    <p id="important">Ce paragraphe est important.</p>
    <img src="renard.jpg" alt="Un renard dans la neige" />
  </body>
</html>

h1 {
  text-align: center;
  color: crimson;
}
p {
  font-family: Verdana;
}
#important {
  color: red;
}

Seul le paragraphe qui porte id="important" passe en rouge : en CSS, l’identifiant se cible avec un dièse #.

Activité 2 — Aiguiser son esprit critique

  1. Réponse personnelle. On constate en général que les premiers résultats ne sont pas tout à fait les mêmes, ni dans le même ordre : chaque moteur a son propre index et son propre algorithme de classement.

  2. Les publicités sont signalées par une mention du type « Sponsorisé » (ou « Annonce ») et sont souvent placées tout en haut ; les autres résultats sont classés par l’algorithme, sans paiement.

  3. La plupart des internautes cliquent sur les tout premiers résultats et vont rarement en deuxième page : être en tête apporte beaucoup de visiteurs, donc de ventes ou de revenus publicitaires. C’est pourquoi des entreprises paient des annonces ou cherchent à améliorer leur classement.

  4. Faux. Internet est le réseau ; le Web est un service (les pages) qui circule dessus.

  5. Faux. L’e-mail utilise le protocole SMTP, pas le Web.

  6. Vrai. HTTP, URL et HTML.

  7. Vrai. Tim Berners-Lee, au CERN, en 1989–1991.

★ Exercice 2 — Web ou Internet ? #

sur papier Ranger dans deux colonnes ce qui relève du Web et ce qui relève d’Internet (mais pas du Web) : une page consultée dans un navigateur ; un e-mail ; un lien hypertexte ; un transfert de fichier par FTP ; le protocole HTTP.

Coup de pouce

Pour chaque élément, demandez-vous s’il fait partie des trois technologies du Web (pages HTML, adresses URL, protocole HTTP) ou s’il utilise le réseau autrement.

Corrigé

  • Web : une page consultée dans un navigateur ; un lien hypertexte ; le protocole HTTP.

  • Internet (hors Web) : un e-mail (SMTP) ; un transfert de fichier par FTP.

▷ Erreur fréquente. Ranger l’e-mail dans le Web parce qu’on le lit parfois dans un navigateur (messagerie en ligne). Le courrier lui-même voyage avec son propre protocole (SMTP) : c’est un autre service d’Internet que le Web.

La requête HTTP, client et serveur#

★★ Exercice 3 — Décomposer une requête #

• essentiel

sur papier On tape dans le navigateur l’adresse : https://www.meteo.mc/prevoir?ville=Nice&jour=mardi.

  1. Quelle ressource est demandée au serveur (avant le ?) ?

  2. Combien de paramètres sont passés au serveur ? Donner le nom et la valeur de chacun.

  3. Que signifie la méthode GET d’une requête HTTP ?

Coup de pouce

Tout ce qui suit le ? est formé de paramètres nom=valeur, séparés par &.

Corrigé

  1. Ressource demandée : /prevoir.

  2. Deux paramètres : ville vaut Nice ; jour vaut mardi.

  3. GET signifie « donne-moi cette ressource ».

★ Exercice 4 — Réussite ou échec ? #

sur papier Associer chaque code de réponse HTTP à sa signification :
200 403 404 500

Significations : page non trouvée \(\bullet\) tout va bien \(\bullet\) erreur du serveur \(\bullet\) accès interdit.

Coup de pouce

Relisez le tableau des codes de réponse dans la section du cours sur le protocole HTTP.

Corrigé

200 \(=\) tout va bien ; 403 \(=\) accès interdit ; 404 \(=\) page non trouvée ; 500 \(=\) erreur du serveur.

★★ Exercice 5 — Client ou serveur ? #

sur papier

  1. Un langage s’exécute dans le navigateur pour animer la page : lequel, JavaScript ou PHP ?

  2. Comment fait-on, dans un navigateur, pour voir le code source d’une page reçue ?

  3. « Le serveur construit une page différente selon les paramètres reçus. » Comment appelle-t-on une telle page ?

Coup de pouce

Relisez l’encadré « Deux endroits où ça calcule » du cours : que fait le serveur, que fait le navigateur ?

Corrigé

  1. JavaScript s’exécute dans le navigateur (côté client) ; PHP, lui, tourne côté serveur.

  2. Par un clic droit \(\to\) « Afficher le code source » (ou les outils de développement).

  3. Une page dynamique (construite sur mesure par le serveur).

★★ Exercice 6 — Suivre une requête #

sur papier Vous tapez https://www.lycee.mc/cours.html dans la barre d’adresse. Le navigateur retrouve d’abord l’adresse du serveur www.lycee.mc sur le réseau (on verra comment au chapitre Internet). Remettre ensuite les étapes suivantes dans l’ordre :

  1. Le navigateur affiche la page.

  2. Le serveur trouve le fichier cours.html et renvoie une réponse avec le code 200.

  3. Le navigateur envoie au serveur la requête GET /cours.html.

Puis : quel code le serveur aurait-il renvoyé si le fichier cours.html n’existait pas ?

Coup de pouce

Dans un échange HTTP, c’est toujours le client qui parle le premier.

Corrigé

Ordre : C (le navigateur envoie la requête GET /cours.html), B (le serveur répond, code 200), A (le navigateur affiche la page). Si le fichier n’existait pas, le serveur aurait renvoyé le code 404 (page non trouvée).

★★★ Exercice 7 — Le formulaire de recherche #

≈ 15 min

sur papier Sur le site d’une médiathèque, on cherche « Harry Potter » au format « livre ». Après validation du formulaire, la barre d’adresse affiche (le + remplace l’espace) :

https://www.mediatheque.mc/chercher?titre=Harry+Potter&format=livre

  1. Quelle ressource est demandée ? Quels paramètres sont passés, avec quelles valeurs ?

  2. Écrire l’adresse obtenue si l’on cherche « Astérix » au format « BD ».

  3. La page de résultats est-elle une page toute prête ou une page dynamique ? Justifier.

  4. Pourquoi un site ne doit-il jamais transmettre un mot de passe de cette façon ?

Coup de pouce

Repérez le ? et le & pour découper l’adresse. Pour la question 4 : où s’affichent les paramètres, et où restent-ils enregistrés ensuite ?

Coup de pouce 2 (début de solution)

Seules les valeurs changent : titre=... et format=.... Le serveur peut-il avoir préparé à l’avance une page pour chaque titre possible ?

Corrigé

  1. Ressource demandée : /chercher. Deux paramètres : titre vaut Harry Potter (écrit Harry+Potter) ; format vaut livre.

  2. https://www.mediatheque.mc/chercher?titre=Astérix&format=BD (le navigateur encode lui-même la lettre accentuée).

  3. Une page dynamique : le serveur ne peut pas avoir préparé à l’avance une page pour chaque titre possible ; il construit la liste des résultats d’après les paramètres reçus.

  4. Les paramètres apparaissent en clair dans la barre d’adresse (quelqu’un peut les lire par-dessus l’épaule) et restent enregistrés dans l’historique du navigateur et dans les marque-pages. Un mot de passe ne doit jamais être visible ainsi.

L’URL et les chemins#

★ Exercice 8 — Décomposer une URL #

• essentiel

sur papier On considère l’URL : https://www.lycee.mc/cours/snt/web.html.

  1. Quel est le protocole ? Que garantit-il de plus que http ?

  2. Quel est le nom du serveur (domaine) ?

  3. Quel est le chemin du fichier demandé ?

Coup de pouce

Une URL se lit de gauche à droite : ce qui précède ://, puis le nom du serveur jusqu’au premier / qui suit, puis le reste.

Corrigé

  1. Protocole : https. Il chiffre les données échangées (connexion sécurisée, cadenas).

  2. Nom du serveur (domaine) : www.lycee.mc.

  3. Chemin du fichier : /cours/snt/web.html.

★★ Exercice 9 — Chemins absolu et relatif #

sur papier On dispose de l’arborescence suivante (la racine est /) :

  1. Donner le chemin absolu du fichier sable.jpg.

  2. Le fichier album.css (dans photos) veut utiliser sable.jpg. Donner le chemin relatif correspondant.

  3. La page playlist.html (dans musique) veut afficher mer.png. Donner le chemin relatif correspondant.

Coup de pouce

Chemin absolu : on part de la racine / et on descend dossier par dossier. Chemin relatif : on part du dossier où se trouve le fichier qui fait le lien, sans / au début ; .. fait remonter d’un niveau.

Corrigé

  1. Chemin absolu : /photos/ete/sable.jpg.

  2. Chemin relatif depuis photos : ete/sable.jpg (pas de / au début).

  3. Depuis musique : ../photos/ete/mer.png (on remonte à la racine avec .., puis on redescend dans photos, puis dans ete).

▷ Erreur fréquente. Écrire /ete/sable.jpg pour le chemin relatif : avec un / au début, le chemin part de la racine du site, où il n’y a pas de dossier ete. Le lien est cassé.

★★★ Exercice 10 — Le site déménage #

≈ 20 min

sur papier Le site d’un club est rangé ainsi : à la racine, le fichier index.html et deux dossiers, images (qui contient logo.png) et pages (qui contient contact.html).

  1. Dessiner l’arborescence de ce site.

  2. Dans index.html, le logo s’affiche avec <img src="images/logo.png" alt="Logo du club" />. On copie cette ligne telle quelle dans contact.html : le logo ne s’affiche plus. Pourquoi ? Corriger le chemin.

  3. Écrire, dans contact.html, un lien qui ramène à index.html.

  4. On renomme le dossier images en img. Quels fichiers faut-il modifier, et comment ?

Coup de pouce

Un chemin relatif se lit à partir du dossier où se trouve la page qui l’utilise. Où se trouve contact.html ? Faut-il d’abord remonter ?

Coup de pouce 2 (début de solution)

Depuis le dossier pages, .. ramène à la racine du site, où se trouvent index.html et le dossier images.

Corrigé

  1. Arborescence :

  2. Un chemin relatif part du dossier de la page qui l’utilise. Depuis pages, images/logo.png désigne pages/images/logo.png, qui n’existe pas. Il faut d’abord remonter à la racine : <img src="../images/logo.png" alt="Logo du club" />.

  3. <a href="../index.html">Retour à l’accueil</a>.

  4. Il faut modifier les deux pages : dans index.html, images/logo.png devient img/logo.png ; dans contact.html, ../images/logo.png devient ../img/logo.png. (Tout chemin qui passe par ce dossier doit être corrigé.)

Lire du HTML#

★ Exercice 11 — Que voit-on ? #

• essentiel

sur papier Décrire ce que le navigateur affiche pour ce code :

<h1>Recette</h1>
<p>Il faut <strong>trois</strong> oeufs.</p>
<ul>
  <li>farine</li>
  <li>sucre</li>
</ul>
Coup de pouce

Relisez dans le cours le rôle de chaque balise : <h1>, <p>, <strong>, <ul> et <li>.

Corrigé

Un grand titre « Recette », puis le paragraphe « Il faut trois oeufs. » (le mot trois en gras), puis une liste à puces :

  • farine

  • sucre

★★ Exercice 12 — Corriger les erreurs #

sur papier Ce code contient deux erreurs d’imbrication ou de fermeture. Les trouver et les corriger.

<p>Bonjour <strong>tout le monde</p></strong>
<h2>Chapitre 1
Coup de pouce

Relisez les deux règles d’or des balises : toute balise ouverte est-elle refermée ? Laquelle a été ouverte en dernier ?

Corrigé

La balise <strong> est refermée trop tard (mauvaise imbrication), et le <h2> n’est pas fermé. Code corrigé :

<p>Bonjour <strong>tout le monde</strong></p>
<h2>Chapitre 1</h2>

▷ Erreur fréquente. Refermer les balises dans le désordre, comme <p>…<strong>…</p></strong> : la dernière balise ouverte doit être la première refermée (les balises s’emboîtent comme des boîtes).

★★ Exercice 13 — Du rendu au code #

sur papier Écrire le code HTML (contenu du <body> seulement) qui produit l’affichage suivant : un grand titre « Mon club de foot » ; un paragraphe « Entraînement le mercredi. » où le mot mercredi est mis en valeur (en gras) ; une liste à puces de deux éléments, « gardiens » et « joueurs » ; enfin un lien « Le site du club » vers https://www.monclub.mc.

Coup de pouce

Une balise par élément : <h1> pour le titre, <p> et <strong> pour le paragraphe, <ul> et <li> pour la liste, <a href="..."> pour le lien.

Corrigé

Une solution :

<h1>Mon club de foot</h1>
<p>Entrainement le <strong>mercredi</strong>.</p>
<ul>
  <li>gardiens</li>
  <li>joueurs</li>
</ul>
<a href="https://www.monclub.mc">Le site du club</a>

Écrire du HTML et du CSS#

★★ Exercice 14 — Ma page de présentation #

• essentiel

▶ Écrire une page HTML complète (squelette compris) qui contient : un titre <h1> avec votre prénom, un paragraphe de présentation, une liste de trois loisirs, et un lien vers un site de votre choix.

Coup de pouce

Partez du squelette du cours : <head> pour ce qui est invisible (titre de l’onglet), <body> pour tout ce qui s’affiche.

Coup de pouce 2 (début de solution)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ma page</title>
</head>
<body> …

Corrigé

Une solution possible :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Ma page</title>
  </head>
  <body>
    <h1>Alex</h1>
    <p>Bonjour, je suis eleve de seconde au lycee.</p>
    <ul>
      <li>football</li>
      <li>guitare</li>
      <li>jeux video</li>
    </ul>
    <a href="https://www.gouv.mc">Un site que j'aime</a>
  </body>
</html>

★★ Exercice 15 — Un peu de style #

▶ Reprendre la page précédente et ajouter du CSS pour : centrer le titre et lui donner un fond coloré ; mettre les paragraphes dans la police Verdana ; ajouter en bas de page une ligne de signature (par exemple « Page réalisée par …») et la colorer en gris, via un id.

Coup de pouce

Une règle CSS : un sélecteur, puis des propriétés entre accolades (text-align, background-color, font-family, color). Pour la signature : donnez-lui un id dans le HTML, puis ciblez-le en CSS avec #.

Corrigé

On ajoute en bas du <body> une ligne de signature munie d’un id, par exemple <p id="signature">Page réalisée par Léa</p>, puis les règles CSS :

h1 {
  text-align: center;
  background-color: teal;
  color: white;
}
p {
  font-family: Verdana;
}
#signature {
  color: gray;
}

★★ Exercice 16 — Le bon sélecteur #

• essentiel

sur papier On considère le code suivant :

<h1 id="haut">Horaires</h1>
<p class="info">Ouvert du lundi au vendredi.</p>
<p>Ferme le dimanche.</p>
<p class="info" id="fin">Contact : 93 00 00 00</p>

p { font-family: Verdana; }
.info { color: green; }
#fin { text-align: right; }

  1. Quels éléments sont écrits en Verdana ? Lesquels sont en vert ? Lequel est aligné à droite ?

  2. Écrire une règle CSS qui met uniquement le titre en bleu, de deux façons différentes.

Coup de pouce

Pour chaque règle, lisez le sélecteur : p vise une balise, .info une classe (le point), #fin un identifiant (le dièse). Cherchez ensuite les éléments concernés dans le HTML.

Corrigé

  1. Verdana : les trois paragraphes <p> (pas le titre <h1>). En vert : les deux éléments de classe info, c’est-à-dire « Ouvert du lundi au vendredi. » et « Contact : 93 00 00 00 ». Aligné à droite : seulement l’élément d’identifiant fin, « Contact : 93 00 00 00 » (qui est donc à la fois en Verdana, en vert et à droite).

  2. Par la balise (il n’y a qu’un <h1>) ou par son identifiant :

    h1 { color: blue; }
#haut { color: blue; }

▷ Erreur fréquente. Confondre le point et le dièse : .info cible tous les éléments de classe info, #fin le seul élément d’identifiant fin. Écrire #info ne cible rien ici.

★★ Exercice 17 — Prévoir le rendu #

sur papier Sans machine, décrire précisément le rendu (couleurs, alignement, style) de :

<h1 class="titre">Actualites</h1>
<p class="titre">Bienvenue</p>

.titre {
  text-align: center;
  color: darkblue;
}
Coup de pouce

Quels éléments du code HTML portent la classe titre ? La règle .titre s’applique à chacun d’eux.

Corrigé

La classe .titre cible à la fois le <h1> et le <p> (ils ont tous deux class="titre"). Les deux seront donc centrés et écrits en bleu foncé. Le <h1> reste un grand titre (gras), le <p> un paragraphe de taille normale.

Droit d’auteur#

★★ Exercice 18 — Ai-je le droit ? #

sur papier

  1. Vous trouvez une belle photo sur le Web et voulez la publier sur le site du lycée. Est-ce automatiquement autorisé ? Pourquoi ?

  2. Qu’est-ce qu’une licence ? Que permet une licence Creative Commons ?

  3. « Un fichier se copie gratuitement, donc il n’a aucune valeur. » Discuter cette phrase en une ou deux phrases.

Coup de pouce

Relisez la section « À qui appartient une page ? » : qui décide de l’usage d’une œuvre, et comment l’auteur peut-il autoriser certains usages à l’avance ?

Corrigé

  1. Non : toute création est protégée par le droit d’auteur. La réutiliser exige l’autorisation de l’auteur (ou une licence adaptée).

  2. Une licence fixe le droit d’usage d’une œuvre. Une licence Creative Commons autorise d’avance certains usages (copier, parfois modifier/diffuser), souvent à condition de citer l’auteur.

  3. Faux : un fichier se copie pour presque rien, mais il garde une valeur (travail fourni, usage, valeur commerciale). Copiable \(\neq\) sans valeur.

Trouver une page#

★ Exercice 19 — Le moteur de recherche #

• essentiel

sur papier

  1. Qu’est-ce que l’index d’un moteur de recherche ? Quand vous tapez une requête, le moteur cherche-t-il « dans le Web » ou « dans son index » ?

  2. Citer un critère qui aide un moteur à classer les pages (par exemple le PageRank).

  3. Comment reconnaît-on, en haut d’une page de résultats, ce qui est une publicité ?

Coup de pouce

Relisez la définition du moteur de recherche et la règle « L’ordre des résultats n’est pas neutre », dans le cours.

Corrigé

  1. L’index est l’immense répertoire des pages déjà explorées par les robots. Le moteur cherche dans son index (déjà prêt), pas « dans le Web » en direct.

  2. Le PageRank : une page est jugée importante si beaucoup d’autres pages importantes pointent vers elle. (On accepte aussi : présence des mots-clés, langue, localisation.)

  3. Les publicités sont signalées par une mention du type « Sponsorisé » (autrefois Annonce) et apparaissent souvent tout en haut.

★★★ Exercice 20 — Le graphe des liens #

≈ 15 min

sur papier Quatre pages A, B, C et D se font des liens (une flèche de A vers B signifie : « la page A contient un lien vers la page B ») :

  1. Pour chaque page, compter le nombre de liens qui pointent vers elle.

  2. D’après l’idée du PageRank, quelle page sera jugée la plus importante ?

  3. A et B reçoivent chacune un seul lien. Laquelle des deux devrait être mieux classée ? Justifier.

  4. Un site crée des centaines de fausses pages qui pointent toutes vers lui. Que cherche-t-il à faire ? Pourquoi les moteurs de recherche luttent-ils contre cela ?

Coup de pouce

Relisez la règle du cours : une page est importante si beaucoup d’autres pages importantes pointent vers elle. Il y a donc deux choses à regarder : le nombre de liens reçus, et l’importance de la page qui envoie le lien.

Coup de pouce 2 (début de solution)

Liens reçus : A en reçoit un (de C), B un (de A). Qui, de C ou de A, est la page la plus importante du graphe ?

Corrigé

  1. Liens reçus : A en reçoit 1 (de C) ; B en reçoit 1 (de A) ; C en reçoit 3 (de A, B et D) ; D n’en reçoit aucun.

  2. C, qui reçoit le plus de liens.

  3. A : son unique lien vient de C, la page la plus importante du graphe, alors que celui de B vient de A, moins importante. Selon l’idée du PageRank, un lien « compte » plus quand il vient d’une page importante.

  4. Il cherche à tricher pour remonter artificiellement dans le classement (et attirer plus de visiteurs, donc plus d’argent). Les moteurs luttent contre cela pour que les premiers résultats restent pertinents pour l’utilisateur : ils repèrent les fausses pages et pénalisent les sites qui les utilisent.

Sécurité et confidentialité#

★ Exercice 21 — Régler et sécuriser son navigateur #

sur papier

  1. Citer trois réglages de sécurité/confidentialité que l’on peut modifier dans un navigateur.

  2. Qu’est-ce que l’hameçonnage (phishing) ?

  3. Avant de cliquer sur un lien reçu par message, quel geste simple permet de vérifier vers quelle adresse il mène réellement ?

Coup de pouce

Relisez la section « Sécurité et confidentialité » du cours. Pour la question 3 : le texte affiché d’un lien est-il forcément l’adresse vers laquelle il mène ?

Corrigé

  1. Par exemple : refuser les cookies (tiers), effacer l’historique / navigation privée, gérer les autorisations (caméra, micro, position), bloquer les traceurs.

  2. L’hameçonnage : une fausse page imitant un vrai site pour voler vos identifiants.

  3. Survoler le lien (sans cliquer) pour lire la vraie URL de destination et vérifier le nom de domaine.

Critiquer une réponse d’IA#

★★ Exercice 22 — Le cadenas rend-il anonyme ? #

sur papier Un élève a demandé à un assistant d’IA : « Quand je vois le cadenas HTTPS, est-ce que je suis anonyme sur le site ? » Voici la réponse obtenue :

Le cadenas signifie que le site utilise HTTPS, la version sécurisée de HTTP : les données échangées entre votre navigateur et le serveur sont chiffrées. Personne ne peut donc lire au passage votre mot de passe ou votre numéro de carte, ce qui est indispensable avant de les saisir. Et comme la connexion est chiffrée, le site ne peut pas vous suivre : avec HTTPS, les cookies sont désactivés et votre navigation est totalement anonyme. Le cadenas ne garantit pas, en revanche, que le site est honnête : une page d’hameçonnage peut très bien être en HTTPS.

  1. La réponse est-elle correcte ? Relire la section « Sécurité et confidentialité » du cours et comparer phrase par phrase.

  2. Localiser et corriger l’erreur.

    Coup de pouce

    Relisez l’encadré du cours sur les cookies et les traces de navigation : que dit-il de l’anonymat ?

  3. Quelle vérification simple, faite avant de faire confiance à cette réponse, aurait suffi à détecter l’erreur ?

Corrigé

  1. Non. Le début est juste (HTTPS chiffre les échanges, indispensable avant de saisir un mot de passe) et la fin aussi (un site d’hameçonnage peut être en HTTPS). Mais le cours dit exactement le contraire du milieu : « Naviguer n’est jamais tout à fait anonyme » et « chaque visite laisse des traces : historique, adresse IP, cookies ».

  2. L’erreur : « avec HTTPS, les cookies sont désactivés et votre navigation est totalement anonyme ». HTTPS protège le contenu des échanges contre une lecture en chemin, rien de plus : le site (et ses cookies) sait très bien qui vous êtes et ce que vous y faites, et votre adresse IP reste visible. Correction : « le cadenas ne rend pas anonyme ; pour limiter le suivi, il faut régler les cookies ou utiliser la navigation privée ».

  3. Ouvrir un site en HTTPS où l’on est resté connecté (le portail du lycée, une boutique) : il vous reconnaît malgré le cadenas, donc il n’y a pas d’anonymat. Ou, plus simplement, relire l’encadré « Cookies et traces » du cours avant de croire l’assistant.

Python au service du thème#

★★ Exercice 23 — Python au service du thème — fabriquer du HTML #

▶ En Python (Spyder ou Basthon). Un serveur peut fabriquer une page sur mesure avant de l’envoyer (page dynamique) : c’est alors un programme qui écrit le code HTML. On le fait ici en Python, en collant des chaînes de caractères (concaténation).

  1. Écrire une fonction balise(nom, contenu) qui renvoie le code d’un élément HTML : balise("h1", "Mon club") doit renvoyer "<h1>Mon club</h1>". La tester aussi avec balise("strong", "mercredi").

  2. Sans machine, écrire ce qu’affiche le programme suivant, puis vérifier. Que montrerait un navigateur qui recevrait ce code HTML ?

    print("<ul>")
for i in range(1, 4):
    print(balise("li", f"Photo {i}"))
print("</ul>")

  3. Écrire une fonction url(protocole, serveur, chemin) qui reconstitue une URL complète. La tester avec les trois morceaux trouvés à l’exercice « Décomposer une URL » : on doit retrouver l’URL complète de cet exercice.

Coup de pouce

Écrivez d’abord sur papier le résultat attendu, <h1>Mon club</h1>, et repérez les morceaux qui changent d’un appel à l’autre (le nom de la balise, le contenu) et ceux qui ne changent jamais (les chevrons, la barre oblique) : il reste à les coller avec +.

Coup de pouce 2 (début de solution)

def balise(nom, contenu):
return "<" + nom + ">" + contenu + …
(il reste la balise fermante.) Pour url, n’oubliez ni "://" ni la barre "/" entre le serveur et le chemin.

Corrigé

1. Un élément HTML, c’est la balise ouvrante, le contenu, puis la balise fermante (avec sa barre oblique). Seuls le nom et le contenu changent : ce sont les deux paramètres.

def balise(nom, contenu):
    return "<" + nom + ">" + contenu + "</" + nom + ">"

print(balise("h1", "Mon club"))       # <h1>Mon club</h1>
print(balise("strong", "mercredi"))   # <strong>mercredi</strong>

2. i prend les valeurs \(1\), \(2\) et \(3\) ; le programme affiche :

<ul>
<li>Photo 1</li>
<li>Photo 2</li>
<li>Photo 3</li>
</ul>

C’est le code d’une liste à puces : le navigateur afficherait trois puces, « Photo 1 », « Photo 2 » et « Photo 3 ». Avec range(1, 101), la même boucle écrirait une liste de cent photos : c’est ainsi qu’un serveur fabrique une page dynamique (une galerie, des résultats de recherche) sans que personne n’écrive le HTML à la main.
3. On recolle les trois morceaux avec les séparateurs "://" et "/" :

def url(protocole, serveur, chemin):
    return protocole + "://" + serveur + "/" + chemin

print(url("https", "www.lycee.mc", "cours/snt/web.html"))
# https://www.lycee.mc/cours/snt/web.html

▷ Erreur fréquente. Oublier la barre oblique de la balise fermante : "<" + nom + ">" + contenu + "<" + nom + ">" renvoie <h1>Mon club<h1>, où la balise <h1> est ouverte deux fois et jamais fermée. Afficher le résultat d’un appel avec print et le comparer à un code HTML correct montre tout de suite l’erreur.