Chapitre 3 : Le web.

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 :

Logo	Nom	Caractéristiques principales
	Mozilla Firefox	Open source, respect de la vie privée.
	Brave	Protection de la vie privée, bloqueur de publicités intégré.
	Chromium	Projet open source, base de nombreux navigateurs (Chrome, Edge).
	Safari	Créé par Apple pour ses appareils.
	Google Chrome	Synchronisation avec le compte Google.
	Microsoft Edge	Créé par Microsoft et basé sur Chromium, intégration avec Windows.
	Opera	VPN gratuit intégré.

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.

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.

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é).

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

Balises de Titre :

La balise <h1> à <h6> est utilisée pour définir des titres de différentes tailles, <h1> étant le plus grand.

<h1>Titre Principal</h1>
<h2>Sous-Titre</h2>

Paragraphe :

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

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

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.

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

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

Liens :

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

<a href="https://www.exemple.com">Visiter Exemple.com</a>

Image :

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

<img src="chemin/vers/image.jpg" alt="Description de l'image">

Division :

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

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

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

Le CSS peut être inclus de trois façons :

• Dans une balise html à l'aide de style="".
• Dans le fichier HTML entre deux balises style.
• Dans un fichier séparé .css mais il faut au préalable indiquer dans l'en-tête de la page HTML où chercher. (non fait cette année, vu en première NSI)

18. Les éléments à connaitre pour débuter en CSS

Propriétés de Style :

Les propriétés CSS définissent le style des éléments sélectionnés. Voici quelques exemples :

/* Style des paragraphes : */
p {
    color: blue; /* pour que la couleur d'écriture soit bleue */
    font-size: 16px; /* pour définir la taille de la police */
    text-align: center; /* pour centrer le texte */
    font-weight: bold; /* pour rendre le texte en gras */
    background-color: yellow; /* pour ajouter un fond jaune */
    font-style: italic; /* pour mettre le texte en italique */
    margin-top: 20px; /* pour ajouter une marge en haut */
    border: 1px solid black; /* pour ajouter une bordure noire */
    padding: 5px; /* pour ajouter un espace à l'intérieur de l'élément */
    list-style-type: none; /* pour enlever les puces des listes (non applicable ici) */
    margin-bottom: 10px; /* pour ajouter un espace en bas de chaque élément */
}


/* Style des titres principaux : */
h1 {
    color: green; /* pour que la couleur d'écriture soit verte */
    font-size: 24px; /* pour définir la taille de la police */
    text-align: left; /* pour aligner le texte à gauche */
    font-weight: normal; /* pour rendre le texte en poids normal */
    background-color: lightgray; /* pour ajouter un fond gris clair */
    margin-top: 30px; /* pour ajouter une marge en haut */
    border-bottom: 2px solid darkgray; /* pour ajouter une bordure en bas */
    padding-bottom: 10px; /* pour ajouter un espace en bas à l'intérieur de l'élément */
}
    

21. Code client/code serveur

Le code serveur n'est pas forcément le même que celui qui est exécuté côté serveur.