Chapitre 3 : Le web.

🕐 Historique :

1965 : Invention et programmation du concept d’hypertexte par Ted Nelson
1989 : Naissance au CERN par Tim Berners Lee
1993 : Mise dans le domaine public, disponibilité du premier navigateur Mosaic
1995 : Mise à disposition de technologies pour le développement de sites Web interactifs (langage JavaScript) et dynamique (langage PHP)
2001 : Standardisation des pages grâce au DOM (Document Object Model)
2010 : Mise à disposition de technologies pour le développement d’applications sur mobiles

1. Le Web

Le Web (ou World Wide Web) est l'ensemble des pages que tu consultes dans ton navigateur : elles contiennent du texte, des images et des vidéos, et sont reliées entre elles par des liens.

2. Client, serveur et protocole HTTP

Sur le Web, deux ordinateurs dialoguent :

le client : ton navigateur (Chrome, Firefox…), qui demande une page ;
le serveur : un ordinateur distant qui stocke la page et la renvoie.

Quand tu tapes une adresse, ton navigateur envoie une requête au serveur, qui lui répond en renvoyant la page. Le navigateur affiche alors le résultat. Ces échanges suivent un langage commun, le protocole HTTP (HyperText Transfer Protocol).

3. Les navigateurs web

Pour naviguer sur le net, nous utilisons un navigateur web. Il s’agit d’un logiciel d’une extrême complexité, comportant des millions de lignes de code car c'est lui qui génère l'affichage des pages. Le premier navigateur web, appelé Mosaic, date de 1993. Actuellement, il en existe un grand nombre dont les plus connus sont les suivants :

Aucun navigateur n'est parfait : chacun fait des choix différents en matière de compatibilité, de services, de financement et de protection des données. La dernière colonne présente donc un point de vigilance, c'est-à-dire un élément à connaître avant de choisir.

Nom	Caractéristiques principales	Point de vigilance
Mozilla Firefox	Open source, moteur Gecko indépendant de Chromium et protections contre le pistage.	Firefox envoie par défaut à Mozilla des données techniques et d'utilisation. Mozilla indique qu'elles ne comprennent pas l'historique, les recherches ni les mots de passe ; cette collecte est désactivable.
Brave	Basé sur Chromium, protections « Shields » et bloqueur de publicités intégrés.	Les protections les plus strictes, comme le blocage de tous les cookies, peuvent empêcher certaines fonctions de sites de marcher. Il faut alors ajuster les réglages pour le site concerné.
Chromium	Projet open source servant de base à Chrome, Edge, Brave et Opera.	Chromium ne possède pas son propre système de mise à jour automatique. Selon la façon dont il a été installé, l'utilisateur doit donc veiller lui-même aux mises à jour de sécurité.
Safari	Moteur WebKit, forte intégration aux appareils et aux services Apple.	Apple ne fournit plus de version à jour pour Windows ni pour les autres systèmes non Apple. Les mises à jour de Safari passent généralement par celles du système d'exploitation.
Google Chrome	Basé sur Chromium, grande compatibilité et synchronisation avec le compte Google.	Chrome peut déduire des thèmes d'intérêt à partir de l'historique de navigation récent et les partager avec des sites pour personnaliser la publicité. Ces fonctions publicitaires sont désactivables.
Microsoft Edge	Basé sur Chromium, intégration à Windows et aux services Microsoft.	Edge collecte des données de diagnostic obligatoires. Si l'utilisateur autorise les données facultatives, elles peuvent aussi contenir l'adresse et le titre des pages visitées ; cette collecte facultative est désactivable.
Opera	Basé sur Chromium, bloqueur de publicités et « VPN » gratuit intégrés au navigateur.	Le « VPN » protège la navigation effectuée dans Opera, mais pas le trafic des autres applications de l'appareil. De plus, les cookies peuvent toujours permettre à un site de reconnaître l'utilisateur. Il ne remplace donc pas un VPN installé au niveau du système.

Sources pour vérifier et approfondir : Mozilla, Brave, Chromium, Apple, Google Chrome, Microsoft Edge et Opera.

4. Exercice : investissement de Google dans Chrome.

À faire dans le cahier.

Selon vous, pourquoi est-ce que Google a investi énormément d'argent pour développer son navigateur Chrome qu'il vous "offre" gratuitement ?

Vous noterez dans votre cahier les 3 bonnes réponses ci-dessous.

Parce qu'il est généreux et veut rendre le monde meilleur.
Pour collecter des données sur vos habitudes de navigation et mieux vous connaitre pour les publicités.
Parce que Google a trop d'argent et ne sait pas quoi en faire.
Parce que c'est une belle façon de dire "merci" aux utilisateurs pour leur fidélité.
Parce que Google adore travailler gratuitement, juste pour vous.
Pour renforcer son écosystème de services et garder les utilisateurs connectés à Google.
Parce que Chrome, c'est leur cadeau d'anniversaire pour l'humanité.
Parce qu'ils voulaient donner une leçon de gentillesse à Microsoft et Apple.
Parce que c'est une façon subtile de montrer à tout le monde qu'ils savent coder.
Parce que plus de navigateurs, c'est mieux pour l'équilibre de l'univers.
Parce que Google pense qu'offrir des choses gratuites, ça donne un bon karma.
Parce qu'ils avaient un besoin urgent de dépenser leur budget marketing.
Pour obtenir un avantage stratégique sur les concurrents comme Microsoft et Apple.

5. Découvrir les Moteurs de Recherche : Trouver l'Information en Ligne

Qu'est-ce qu'un Moteur de Recherche ?

Un moteur de recherche est un outil en ligne qui permet de rechercher et d'obtenir des informations à partir de milliards de pages web disponibles sur Internet. Il agit comme un guide vers l'énorme quantité de contenu en ligne.

Fonctionnement des Moteurs de Recherche :

Les moteurs de recherche utilisent des robots (appelés "spiders" ou "crawlers") pour explorer le web et indexer les pages qu'ils trouvent. Lorsque vous effectuez une recherche, le moteur de recherche parcourt son index pour afficher les résultats pertinents.

6. Activité : algorithme PageRank de Google.

À faire dans le cahier.

Quand tu tapes une recherche sur Google, des milliers de pages correspondent à ta demande. Google doit donc résoudre un problème : dans quel ordre afficher les résultats ?

En 1998, les fondateurs de Google, Larry Page et Sergey Brin, ont trouvé une solution : donner un score à chaque page web, appelé PageRank. Les pages qui ont les meilleurs scores sont affichées en premier. Ce score repose sur deux règles :

Règle 1 : une page est importante si beaucoup de pages contiennent un lien vers elle, surtout si ces pages sont elles-mêmes importantes ;
Règle 2 : un lien a moins de valeur s'il vient d'une page qui contient énormément de liens.

Le surfeur aléatoire.

Pour calculer ce score, Google imagine un internaute imaginaire : le surfeur aléatoire.

Il démarre sur une page choisie au hasard.
Il clique au hasard sur un des liens de la page où il se trouve.
Il recommence, encore et encore, en comptant combien de fois il visite chaque page.

Plus le surfeur visite souvent une page, plus cette page est populaire : c'est elle que Google affichera en premier.

La simulation.

Le graphe ci-dessous représente un mini-web de 12 sites. Chaque rond est un site web. Une flèche qui va du site 1 vers le site 2 signifie : « la page 1 contient un lien vers la page 2 ».

Le surfeur 🏄 se déplace de site en site en « cliquant » au hasard sur les liens, et le tableau compte automatiquement ses visites.

Nombre de déplacements : (max : 5000) Vitesse : 🐢 🐇

Clique sur « Lancer la simulation » pour faire partir le surfeur. 🏄

Site	1	2	3	4	5	6	7	8	9	10	11	12
Visites	0	0	0	0	0	0	0	0	0	0	0	0

Travail à faire.

Clique sur « 🏄 Lancer la simulation » et observe le surfeur. Tu peux régler sa vitesse, même pendant la simulation.
À la fin de la simulation, note dans ton cahier le numéro du site le plus visité : c'est le site le plus populaire, celui que Google afficherait en premier dans ses résultats.
Relance la simulation. Est-ce le même site qui gagne ? Note ta réponse dans ton cahier.
Observe bien le graphe : tous les sites reçoivent le même nombre de flèches, et pourtant l'un d'eux est bien plus visité que les autres ! Regarde d'où viennent les flèches qui arrivent sur le site gagnant, et aide-toi des deux règles du début pour expliquer sa popularité. Note ton explication dans ton cahier.

7. Se protéger sur le Web

Quelques gestes simples protègent tes données, ton argent et ton identité contre les cyberattaques et les fraudes :

Mots de passe solides : longs, uniques pour chaque compte, mêlant lettres, chiffres et symboles.
Mises à jour régulières : elles corrigent les failles de sécurité de tes logiciels.
Méfiance : ne clique pas sur un lien douteux et n'ouvre pas une pièce jointe d'un expéditeur inconnu (hameçonnage, virus).
Vie privée : partage peu d'informations personnelles et règle les paramètres de confidentialité.

9. Cookie :

Un site web peut faire en sorte de laisser des données sur l'appareil du client pour une future connexion.

Le consentement pour les cookies est généralement requis dans les cas suivants :

Cookies non essentiels : Les cookies qui ne sont pas strictement nécessaires au fonctionnement d'un site web, comme les cookies de suivi, d'analyse ou de publicité, nécessitent le consentement explicite de l'utilisateur avant d'être utilisés.
Réglementation locale : Dans de nombreuses juridictions, notamment en Europe avec le Règlement Général sur la Protection des Données (RGPD) et la Directive ePrivacy, le consentement des utilisateurs est obligatoire pour l'utilisation de cookies non essentiels.
Collecte de données personnelles : Si les cookies collectent des données personnelles, comme des informations sur le comportement de navigation ou des préférences, le consentement est nécessaire.
Transfert de données à des tiers : Si les cookies transfèrent des données à des tiers, par exemple pour des services d'analyse ou de publicité, le consentement est également requis.

Les cookies essentiels, qui sont nécessaires pour le fonctionnement de base d'un site web (comme les cookies de session pour les paniers d'achat ou les préférences linguistiques), ne nécessitent généralement pas de consentement. Cependant, il est toujours bon de fournir des informations claires sur leur utilisation.

10. Exercice : cookies déposés par un site.

À faire dans le cahier.

Est-ce que le site info-lycee.fr dépose des cookies sur votre ordinateur ?

11. Rôles de HTML, CSS et JavaScript

HTML : Structure le contenu de la page web.
CSS : Gère la présentation et la mise en page.
JavaScript : Permet l'interactivité et la dynamique de la page.

12. Le HTML

Le HTML (HyperText Markup Language), inventé en 1993, est le langage qui structure les pages web. On en est à la version 5, d'où le nom HTML5.

C'est un langage de balises : une balise s'écrit entre < et > (par exemple <p>), et on la ferme en ajoutant un / (par exemple </p>).

Toute la page est placée entre <html lang="fr"> et </html>, avec deux parties à l'intérieur : le head (les informations sur la page) et le body (le contenu affiché).

13. Exemple

On peut prendre pour exemple le code suivant :

<!DOCTYPE html>
        <html lang="fr">
        
            <head>
                <meta charset="utf-8">
                <title>Mon titre</title>
            </head>
            
            <body>
                <h1>Un gros titre</h1>
                <h2>Un sous-titre</h2>
                <p>Mon paragraphe</p>
                <h2>Mon deuxième sous-titre</h2>
                <p>Un autre paragraphe</p>
                <ul>
                    <li>Une première ligne d'une liste non ordonnée (unordered list).</li>
                    <li>Une deuxième ligne.</li>
                </ul>
                <h2>Mon troisième sous-titre</h2>
                <p>Encore un paragraphe.</p>
                <p>Et un autre beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup
                    beaucoup plus long.</p>
                <ol>
                    <li>Une première ligne d'une liste ordonnée (ordered list).</li>
                    <li>Une deuxième ligne.</li>
                </ol>
            </body>
            
        </html>

14. Les balises à connaître pour débuter en HTML

Balises de titre

Les balises <h1> à <h6> définissent des titres de différents niveaux, <h1> étant le titre principal.

Code HTML

<h1>Titre principal</h1>
<h3>Sous-titre</h3>

Résultat dans le navigateur

Titre principal

Sous-titre

Paragraphe

La balise <p> est utilisée pour créer des paragraphes de texte.

Code HTML

<p>Ceci est un paragraphe.</p>

Résultat dans le navigateur

Ceci est un paragraphe.

Liste à puces et liste numérotée

Les balises <ul> (liste à puces) et <ol> (liste numérotée) sont utilisées pour créer des listes.

Code HTML

<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ul>

<ol>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ol>

Résultat dans le navigateur

Élément 1
Élément 2

Élément 1
Élément 2

Liens

La balise <a> est utilisée pour créer des liens hypertexte.

Code HTML

<a href="https://fr.wikipedia.org/wiki/M%C3%A9lin%C3%A9e_Manouchian">Découvrir Mélinée Manouchian</a>

Résultat dans le navigateur

Découvrir Mélinée Manouchian

Image

La balise <img> est utilisée pour afficher des images.

Code HTML

<img src="imageintro.webp" alt="Illustration du Web" width="200">

Résultat dans le navigateur

Division

La balise <div> est une balise de division générique souvent utilisée pour grouper des éléments.

Code HTML

<div>
    <p>Ceci est un paragraphe à l'intérieur d'une division.</p>
</div>

Résultat dans le navigateur

Ceci est un paragraphe à l'intérieur d'une division.

15. Exercice : créer sa première page HTML.

Allez dans le dossier SNT ou en créer un.
À l'intérieur du dossier SNT, aller dans le dossier chapitre03 ou en créer un.
À l'intérieur du dossier chapitre03, créer un dossier exercice15.
À l'intérieur du dossier exercice15 :

Faire "clic droit" ➡️ "Nouveau" ➡️ "Document texte".
Renommer ce fichier index.html.
Ouvrir ce fichier avec le Bloc-notes :

"Clic droit" ➡️ "Ouvrir avec une autre application" ➡️ "Autre application" ➡️ "Bloc-notes".
Écrire ce qu'il faut dans un fichier index.html afin que l'on obtienne :

16. Le CSS

Les pages que nous avons vues sont en noir et blanc et offrent peu de personnalisation.

Le CSS est là pour y apporter "du style".

Le CSS est né en 1996. CSS signifie "Cascading Style Sheets".

Nous en sommes actuellement à la version 3 (c'est pour cela que l'on parle de CSS3).

17. Utilisation du CSS

Cette année, tu écriras le CSS directement dans la balise HTML grâce à l'attribut style.

Les propriétés sont placées entre les guillemets et séparées par des points-virgules :

<p style="color: blue; text-align: center;">Ce texte est bleu et centré.</p>

Il existe d'autres façons d'écrire du CSS, que tu découvriras notamment en première NSI.

18. Les propriétés de style essentielles en CSS

Une propriété CSS permet de modifier l'apparence ou la disposition d'une balise. Dans les exemples suivants, observe que tout le CSS est écrit dans l'attribut style.

Aligner du texte avec `text-align`

La propriété text-align permet d'aligner horizontalement le texte à gauche, au centre ou à droite.