Activités Quiz Sommaire SNT

Compétences et objectifs de la séquence

Distinguer le Web d'Internet et comprendre leur relation.
Comprendre la notion d'URL et de chemin (absolu/relatif).
Créer une page web simple en HTML et la mettre en forme avec CSS.
Expliquer le modèle client/serveur et le protocole HTTP.
Comprendre le fonctionnement des cookies et des moteurs de recherche.

Introduction au Web

Le "World Wide Web", plus communément appelé "Web", a été développé au CERN (Conseil Européen pour la Recherche Nucléaire) par le Britannique Sir Timothy John Berners-Lee et le Belge Robert Cailliau au début des années 90.

À cette époque, les principaux centres de recherche mondiaux étaient déjà connectés les uns aux autres, mais pour faciliter les échanges d'information, Tim Berners-Lee met au point le système hypertexte. Ce système permet, à partir d'un document, de consulter d'autres documents en cliquant sur des mots clés. Ces mots "cliquables" sont appelés hyperliens et sont souvent soulignés et en bleu.

Dates clés :

1990 : Tim Berners-Lee crée le premier navigateur web appelé "WorldWideWeb".
1993 : Le navigateur "NCSA Mosaic" rend le web populaire auprès du grand public.
Aujourd'hui : Des milliards de pages web accessibles dans le monde entier.

Distinction Fondamentale : Web ≠ Internet

Internet est un "réseau de réseaux" s'appuyant sur le protocole IP (voir module Internet).

Le Web est un service qui utilise Internet, basé sur trois technologies : HTTP, URL et HTML.

Autres services utilisant Internet : E-mails (protocole SMTP), transfert de fichiers (protocole FTP), messagerie instantanée...

La première page web est toujours consultable à l'adresse : info.cern.ch

I – Les URL (Uniform Resource Locator)

Dans la barre d'adresse de votre navigateur, vous trouvez des adresses du type : http://www.exemple.fr/dossier/page.html

Définition : Une URL (Uniform Resource Locator) permet d'identifier une ressource (par exemple un fichier) sur un réseau. Elle indique "l'endroit" où se trouve cette ressource sur un ordinateur.

Un fichier peut se trouver dans un dossier qui peut lui-même se trouver dans un autre dossier... On parle d'une structure en arborescence, car elle ressemble à un arbre à l'envers. La base de l'arbre s'appelle la racine et se représente par un /.

Chemin absolu ou chemin relatif ?

Pour indiquer la position d'un fichier dans l'arborescence, il existe 2 méthodes :

Chemin absolu : indique le chemin depuis la racine.
Exemple : /dossier2/dossier3/fichier3.jpg
Remarquez le / au début qui indique la racine.

Chemin relatif : indique le chemin depuis le dossier courant.
Exemple : dossier3/fichier3.jpg
Pas de / au début ! C'est ce qui distingue un chemin relatif d'un chemin absolu.

Pour "remonter" d'un niveau dans l'arborescence, on utilise ..

Exemple : ../dossier3/fichier5.svg (remonte d'un niveau puis descend dans dossier3)

À retenir :
• Chemin absolu = commence par / (depuis la racine)
• Chemin relatif = ne commence PAS par / (depuis le dossier actuel)
• .. = remonter d'un niveau
• Sous Windows, on utilise \ mais sur le web c'est toujours /

II – HTML : Le langage du Web

HTML (HyperText Markup Language) est le format de données conçu pour représenter les pages web. C'est un langage de balisage permettant d'écrire de l'hypertexte.

HTML permet de :

Afficher du texte structuré (titres, paragraphes)
Afficher des images
Créer des hyperliens (liens vers d'autres pages)
Afficher des formulaires
Intégrer des vidéos (HTML5)

Important : HTML n'est PAS un langage de programmation (comme Python). Il n'y a pas de conditions, de boucles... C'est un langage de description.

Les balises HTML

En HTML, tout est une histoire de balises que l'on ouvre et que l'on ferme :

Balise ouvrante : <nom_balise>
Balise fermante : </nom_balise>

<h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

Règle d'imbrication : Les balises doivent être correctement imbriquées !
✅ Correct : texte
❌ Interdit : texte

Structure complète d'une page HTML

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Voici mon site</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World! Ceci est un titre</h1>
    <p>Ceci est un <strong>paragraphe</strong>.</p>
  </body>
</html>

Explications :

<!doctype html> : indique qu'on utilise HTML5
<html lang="fr"> : balise racine, langue française
<head> : en-tête (métadonnées, titre, liens CSS)
<meta charset="utf-8"> : encodage des caractères
<title> : titre affiché dans l'onglet du navigateur
<body> : corps de la page (contenu visible)

Balises courantes

<h1> à <h6> : titres (h1 = plus important)
 : paragraphe
 : texte important (gras)
<a href="url"> : lien hypertexte
<img src="image.jpg" alt="description"> : image
  : saut de ligne (balise autofermante)

III – CSS : La mise en forme

Le CSS (Cascading Style Sheets) gère la mise en page et l'aspect décoratif. HTML s'occupe du contenu, CSS s'occupe du style.

h1 {
  text-align: center;
  background-color: red;
}
h2 {
  font-family: Verdana;
  font-style: italic;
  color: green;
}

Structure d'une règle CSS :

Sélecteur : élément ciblé (h1, p, .classe, #id)
Propriété : ce qu'on modifie (color, font-size...)
Valeur : la nouvelle valeur (red, 16px...)

Cibler avec id et class

Pour cibler un élément précis :

id="nom" : identifiant unique → CSS : #nom { ... }
class="nom" : peut être réutilisé → CSS : .nom { ... }

<p id="intro">Premier paragraphe</p>
<p class="important">Deuxième paragraphe</p>

/* CSS */
#intro { color: blue; }
.important { font-weight: bold; }

Lier CSS et HTML

On place le CSS dans un fichier séparé (ex: style.css) et on le lie dans le <head> :

<link rel="stylesheet" href="style.css">

IV – Le Modèle Client/Serveur

Sur Internet, les échanges ne sont pas "symétriques" : un ordinateur client demande des ressources à un ordinateur serveur qui les fournit.

Définitions :

Client : ordinateur qui demande des ressources (votre PC, smartphone)
Serveur : ordinateur qui fournit des ressources (stocke les sites web)

Dialogue simplifié :
Client : "Bonjour www.google.fr, peux-tu m'envoyer le fichier index.html ?"
Serveur : "OK, voici le fichier index.html"
Client : "Je vois qu'il y a des images et du CSS, peux-tu me les envoyer ?"
Serveur : "OK, les voici"

Serveurs Web

Les serveurs sont des machines spécialisées fonctionnant 24h/24
Les grandes entreprises (Google, Facebook) possèdent des data centers avec des milliers de serveurs
Le logiciel serveur le plus populaire est Apache (environ 50% des serveurs)

Web statique vs dynamique

Statique : le serveur envoie des fichiers HTML tels quels
Dynamique : le serveur génère le HTML à la demande (PHP, Python...)

V – Le Protocole HTTP

Le protocole HTTP (HyperText Transfer Protocol) permet au client d'effectuer des requêtes et au serveur d'envoyer des réponses.

Requête HTTP (Client → Serveur)

GET /mondossier/monFichier.html HTTP/1.1
User-Agent: Mozilla/5.0
Accept: text/html

GET : méthode (demander une ressource)
POST : envoyer des données (formulaire)
DELETE : supprimer une ressource
PUT : modifier une ressource

Réponse HTTP (Serveur → Client)

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8

<!doctype html>
<html>...</html>

Codes de statut importants :

200 : OK, document trouvé
404 : Document non trouvé (erreur très courante !)
500 : Erreur serveur

HTTPS : la version sécurisée

HTTPS = HTTP + chiffrement. Les données sont chiffrées avant transmission. Vérifiez toujours que l'adresse commence par https:// avant d'envoyer des données sensibles (mot de passe, coordonnées bancaires).

VI – Les Cookies

Les cookies sont de petits fichiers stockés sur votre ordinateur par les sites web. Ils permettent de :

Mémoriser vos préférences (langue, thème...)
Maintenir votre connexion (session)
Suivre votre navigation (publicité ciblée)

Vie privée : Certains cookies permettent de vous tracer sur le web. La CNIL recommande de paramétrer votre navigateur pour limiter les cookies tiers.

VII – Les Moteurs de Recherche

Les moteurs de recherche (Google, Bing, DuckDuckGo...) sont des acteurs fondamentaux du web.

Fonctionnement d'un moteur de recherche :

Crawling : des robots parcourent le web en suivant les liens
Indexation : les pages sont analysées et stockées dans une base de données
Classement : algorithmes pour trier les résultats par pertinence

Alternative : DuckDuckGo
Ce moteur de recherche ne collecte pas vos données personnelles et ne vous trace pas. Il respecte mieux votre vie privée que Google ou Bing.

Synthèse du cours

Le Web repose sur 3 piliers : les URL (adresses), le HTML/CSS (contenu et style), et le protocole HTTP (communication). N'oubliez pas : le Web n'est qu'un service parmi d'autres sur Internet !

Sciences numériques et technologie

Compétences et objectifs de la séquence

Introduction au Web

Distinction Fondamentale : Web ≠ Internet

Sciences numériques et technologie

I – Les URL (Uniform Resource Locator)

Chemin absolu ou chemin relatif ?

Sciences numériques et technologie

II – HTML : Le langage du Web

Les balises HTML

Sciences numériques et technologie

Structure complète d'une page HTML

Balises courantes

Sciences numériques et technologie

III – CSS : La mise en forme

Cibler avec id et class

Lier CSS et HTML

Sciences numériques et technologie

IV – Le Modèle Client/Serveur

Serveurs Web

Web statique vs dynamique

Sciences numériques et technologie

V – Le Protocole HTTP

Requête HTTP (Client → Serveur)

Réponse HTTP (Serveur → Client)

HTTPS : la version sécurisée

Sciences numériques et technologie

VI – Les Cookies

VII – Les Moteurs de Recherche

Synthèse du cours