Projet : Guide complet d'Internet

Félicitations ! Tu as atteint la fin du module sur le fonctionnement d'Internet. Le savoir accumulé au fil de nombreuses leçons se fixe le mieux quand tu l'organises toi-même - il est donc temps de créer un guide complet d'Internet sous la forme d'une page HTML. Ce projet résume les connaissances du module : le réseau, les adresses URL, les protocoles HTTP et HTTPS, le DNS et les balises HTML. Au passage, tu découvriras quelques notions nouvelles : les couches TCP/IP, le protocole UDP et les réseaux CDN.

Imagine que tu es le scribe du pharaon et que tu dois créer un grand rouleau du savoir - une encyclopédie d'Internet pour les générations futures. Chaque section est une chambre différente dans la pyramide du savoir !

Mon conseil : construis la page étape par étape et vérifie l'aperçu après chaque étape. Tu trouveras une erreur plus vite dans cinq nouvelles lignes que dans cent.

Étape 1 : Structure du document - Les fondations de la pyramide

Commence par des fondations solides. Chaque pyramide a besoin de fondations, et chaque page HTML - d'une structure correcte. Tu vas utiliser ici des éléments vus dans la leçon sur la sémantique : <header> est l'en-tête de la page avec son titre, et <main> son contenu principal, qui n'apparaît qu'une seule fois sur la page :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Guide complet d'Internet</title>
7</head>
8<body>
9    <header>
10        <h1>Comment fonctionne Internet - Un guide</h1>
11        <p>Découvre les secrets du réseau, comme nous découvrons les secrets des pyramides !</p>
12    </header>
13    <main>
14        <!-- Tu ajouteras ici les sections suivantes -->
15    </main>
16</body>
17</html>

Pour l'instant, <main> est vide - le commentaire indique que les sections suivantes y prendront place. L'attribut lang="fr" indique aux lecteurs d'écran la langue du texte.

Étape 2 : Section sur les bases d'Internet

Enferme chaque sujet dans un élément <section> distinct, avec son propre titre <h2> - c'est une chambre de la pyramide avec une plaque au-dessus de l'entrée. La première chambre décrit ce que sont Internet et le WWW, et comment le réseau mondial est né :

1<section>
2    <h2>Qu'est-ce qu'Internet ?</h2>
3    <p>Internet est un réseau mondial d'ordinateurs connectés
4       qui communiquent à l'aide des protocoles TCP/IP.</p>
5
6    <h3>Concepts clés</h3>
7    <ul>
8        <li><strong>Internet</strong> - un réseau physique reliant les ordinateurs</li>
9        <li><strong>WWW</strong> - World Wide Web, un système de pages web</li>
10        <li><strong>Navigateur</strong> - un programme qui affiche les pages</li>
11        <li><strong>Serveur</strong> - un ordinateur qui fournit des ressources</li>
12    </ul>
13</section>

Une liste <ul> convient parfaitement ici, car l'ordre des concepts n'a pas d'importance. N'oublie pas qu'Internet et le WWW ne sont pas la même chose - le WWW n'est qu'un des services qui fonctionnent sur le réseau.

Étape 3 : HTTP, HTTPS et communication

Ajoute une section sur les protocoles de communication - sur la façon dont le navigateur parle au serveur. Les différences entre HTTP et HTTPS se montrent le mieux dans un tableau, car tu compares les mêmes caractéristiques des deux protocoles :

1<section>
2    <h2>Protocoles HTTP et HTTPS</h2>
3    <p>HTTP (Hypertext Transfer Protocol) est le langage par lequel
4       le navigateur et le serveur communiquent entre eux.</p>
5
6    <table>
7        <thead>
8            <tr>
9                <th>Caractéristique</th>
10                <th>HTTP</th>
11                <th>HTTPS</th>
12            </tr>
13        </thead>
14        <tbody>
15            <tr>
16                <td>Chiffrement</td>
17                <td>Aucun</td>
18                <td>Oui (SSL/TLS)</td>
19            </tr>
20            <tr>
21                <td>Sécurité</td>
22                <td>Faible</td>
23                <td>Élevée</td>
24            </tr>
25            <tr>
26                <td>Icône dans le navigateur</td>
27                <td>Pas de cadenas</td>
28                <td>Cadenas</td>
29            </tr>
30        </tbody>
31    </table>
32</section>

Cette fois, le tableau a une partie <thead> avec les en-têtes des colonnes et une partie <tbody> avec les données, ce qui met de l'ordre dans sa structure. Tu peux aussi y lister les codes de réponse HTTP que tu as découverts, par exemple 200 et 404.

Étape 4 : DNS - Le système de noms de domaine

Explique comment le DNS traduit les noms de domaine en adresses IP. Ici, l'ordre des étapes compte, alors au lieu de <ul>, utilise une liste numérotée <ol> :

1<section>
2    <h2>Système DNS</h2>
3    <p>Le DNS (Domain Name System) convertit des noms conviviaux
4       comme « google.com » en adresses IP comme « 142.250.74.206 ».</p>
5
6    <h3>Étapes de la résolution DNS</h3>
7    <ol>
8        <li>Le navigateur vérifie le cache local</li>
9        <li>La requête est envoyée au résolveur DNS</li>
10        <li>Le résolveur interroge le serveur DNS racine</li>
11        <li>La racine dirige vers le serveur TLD (.com, .fr)</li>
12        <li>Le serveur TLD dirige vers le serveur du domaine</li>
13        <li>Nous recevons l'adresse IP de la page</li>
14    </ol>
15</section>

La liste <ol> numérote elle-même les étapes. L'adresse IP de l'exemple n'est qu'indicative - les grands services ont de nombreuses adresses. Dans l'analogie égyptienne, le DNS est le gardien du temple qui indique le chemin vers la bonne chambre.

Étape 5 : TCP/IP et paquets de données

Décris comment les données voyagent à travers Internet. Cette section réunit les deux structures que tu connais déjà : une liste numérotée des couches et un tableau qui compare TCP et UDP :

1<section>
2    <h2>Modèle TCP/IP</h2>
3    <p>TCP/IP est un ensemble de protocoles qui organisent
4       la transmission de données sur Internet.</p>
5
6    <h3>Couches TCP/IP</h3>
7    <ol>
8        <li><strong>Couche d'accès réseau</strong> - câbles, WiFi</li>
9        <li><strong>Couche Internet (IP)</strong> - adressage</li>
10        <li><strong>Couche transport (TCP/UDP)</strong> - fiabilité</li>
11        <li><strong>Couche application</strong> - HTTP, DNS, FTP</li>
12    </ol>
13
14    <h3>TCP vs UDP</h3>
15    <table>
16        <thead>
17            <tr>
18                <th>Caractéristique</th>
19                <th>TCP</th>
20                <th>UDP</th>
21            </tr>
22        </thead>
23        <tbody>
24            <tr>
25                <td>Fiabilité</td>
26                <td>Garantit la livraison</td>
27                <td>Aucune garantie</td>
28            </tr>
29            <tr>
30                <td>Vitesse</td>
31                <td>Plus lent</td>
32                <td>Plus rapide</td>
33            </tr>
34            <tr>
35                <td>Cas d'usage</td>
36                <td>Sites web, e-mail, fichiers</td>
37                <td>Streaming, jeux</td>
38            </tr>
39        </tbody>
40    </table>
41</section>

Nous listons les couches de la plus basse (câbles, Wi-Fi) à la plus haute (HTTP, DNS). TCP veille à ce que chaque paquet arrive à destination, tandis qu'UDP renonce à ce contrôle au profit de la vitesse.

Étape 6 : Streaming et CDN

Ajoute une section sur le multimédia sur le web. Des paragraphes et un titre <h3> suffisent ici, car tu décris des notions au lieu d'énumérer des étapes successives :

1<section>
2    <h2>Streaming et CDN</h2>
3    <p>Le streaming permet de lire du multimédia sans télécharger
4       le fichier entier. Le CDN accélère la livraison du contenu.</p>
5
6    <h3>Comment fonctionne un CDN ?</h3>
7    <p>Un CDN (Content Delivery Network) est un réseau de serveurs
8       répartis dans le monde entier qui stockent des copies du contenu.
9       L'utilisateur se connecte au serveur le plus proche.</p>
10</section>

Tu peux comparer un CDN aux greniers alignés le long du Nil : au lieu de faire venir le grain d'une seule capitale, chacun le prend dans l'entrepôt le plus proche.

Étape 7 : Sécurité

Ajoute une section sur la protection sur Internet. C'est le bon endroit pour une analogie égyptienne avec les tombeaux, que l'on protégeait des pilleurs par des sceaux et des pièges :

1<section>
2    <h2>Sécurité sur Internet</h2>
3    <ul>
4        <li>Vérifie toujours le cadenas HTTPS dans la barre d'adresse</li>
5        <li>Le certificat SSL/TLS chiffre la communication</li>
6        <li>Ne saisis jamais de mots de passe sur des pages HTTP</li>
7        <li>Méfie-toi du phishing - les fausses pages</li>
8    </ul>
9</section>

Chaque point de la liste est une règle. Tu peux développer le phishing dans un paragraphe séparé : une fausse page peut même avoir un cadenas, alors vérifie toujours l'adresse.

Étape 8 : Pied de page - Le sceau du pharaon

Termine la page par un pied de page, comme un sceau apposé sur un décret royal. Place l'élément <footer> après la fermeture de </main>, juste avant la fermeture de </body> :

1    <footer>
2        <p>Guide d'Internet - Module 2</p>
3        <p>Créé lors d'un voyage à travers l'Égypte ancienne</p>
4    </footer>
5</body>
6</html>

C'est la fin du document. Vérifie que chaque balise ouverte a bien sa paire - c'est l'erreur la plus fréquente dans les grands projets.

Ta tâche

Crée une page HTML complète qui réunit toutes les sections ci-dessus en un seul document cohérent. Ajoute tes propres descriptions, exemples et analogies égyptiennes. La page doit être lisible, bien organisée et contenir au moins :

• Des titres <h1> à <h3> - la hiérarchie des sujets
• Des listes <ul> et <ol> - l'énumération des étapes et des concepts
• Des tableaux <table> - les comparaisons de protocoles
• Des paragraphes <p> - les descriptions et les explications
• Des éléments sémantiques <header>, <main>, <section>, <footer>

Le mentor évaluera aussi tes analogies égyptiennes, alors ajoute des sections qui ne figurent pas dans le squelette : la structure d'une adresse URL (protocole, domaine, chemin, paramètres) à partir de l'exemple d'un site égyptien imaginaire, le chargement d'une page décrit comme une cérémonie au temple, les navigateurs présentés comme des dieux égyptiens, et la sécurité vue sous l'angle de la protection des tombeaux.

Soumets le projet terminé au mentor pour vérification à l'étape suivante. Dans l'éditeur ci-dessous, un squelette t'attend, avec les titres des sections et des commentaires qui donnent des indices - remplis-le de contenu :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Guide complet d'Internet</title>
6</head>
7<body>
8    <h1>Le grand rouleau du savoir - Encyclopédie d'Internet</h1>
9
10    <!-- Section 1 : Qu'est-ce qu'Internet ? -->
11    <h2>1. Qu'est-ce qu'Internet ?</h2>
12    <!-- Décris ce qu'est Internet en tant que réseau mondial d'ordinateurs -->
13
14    <!-- Section 2 : Protocoles HTTP et HTTPS -->
15    <h2>2. Protocoles de communication</h2>
16    <!-- Décris la différence entre HTTP et HTTPS -->
17    <!-- Utilise un <table> pour la comparaison -->
18
19    <!-- Section 3 : Système DNS -->
20    <h2>3. Système DNS</h2>
21    <!-- Explique comment le DNS traduit les domaines en adresses IP -->
22    <!-- Utilise une liste ordonnée <ol> pour décrire les étapes -->
23
24    <!-- Section 4 : Navigateurs -->
25    <h2>4. Navigateurs web</h2>
26    <!-- Liste les navigateurs populaires dans une liste <ul> -->
27
28    <!-- Section 5 : Sécurité -->
29    <h2>5. Sécurité en ligne</h2>
30    <!-- Décris les règles d'une utilisation sûre d'Internet -->
31
32    <!-- Section 6 : Multimédia et streaming -->
33    <h2>6. Le multimédia sur Internet</h2>
34    <!-- Décris ce que sont le streaming et le CDN -->
35
36    <footer>
37        <p><em>Auteur : Scribe du pharaon | Académie d'Internet</em></p>
38    </footer>
39</body>
40</html>

Retiens : un bon guide est comme une pyramide - des fondations solides, des chambres-sections avec des plaques bien lisibles, et le sceau du pied de page à la fin. Dans le module suivant, tu lui donneras des couleurs avec le CSS.