Aller au contenu

Thème 1 : Le web⚓︎

🎯 Objectifs pédagogiques⚓︎

Partie Objectifs
🧠 Comment pense un navigateur ? Comprendre les échanges entre client (navigateur) et serveur via des protocoles (HTTP)
🏗 Construire une page Web (avec HTML) Découvrir le rôle du HTML pour structurer le contenu d’une page
🎨 Embellir ta page (avec CSS) Comprendre le rôle du CSS pour modifier l’apparence d’une page
🔗 Créer des liens entre tes pages Maîtriser la notion d’URL et créer des liens avec la balise <a>

🧠 Compétences travaillées :
- Identifier les principaux composants du Web (serveurs, clients, protocole HTTP, URL…)
- Lire et modifier un code HTML de base
- Ajouter des styles simples en CSS
- Créer un mini-site Web composé de plusieurs pages reliées entre elles
- Développer l’autonomie numérique et l’esprit de logique

🎥 Vidéos

🎥 Regarde chacune des vidéos suivantes
🔁 Repère les mots clés
📝 Donne une explication des mots-clés.

Internet est le réseau qui connectent les ordinateurs, tablettes, téléphone,... entre eux. Sur ce gros réseaux, chaque objet est identifié par une adresse IP.
Le modèle client-serveur Le Web désigne un ensemble de ressources numériques disponibles sur Internet. Il est basé sur l'utilisation des liens hypertextes qui permettent de surfer d'une ressource à une autre.
Les échanges et leurs protocoles Pour pouvoir accéder à des pages Web, les internautes utilisent des logiciels appelés navigateurs. Leur rôle est de demander aux serveurs les contenus qu'ils hébergent et ensuite de les afficher. Afin de pouvoir se comprendre, le client (le navigateur) et le serveur utilisent le protocole de communication HTTP (HyperText Transfer Protocol) ou HTTPS sa version sécurisée (HyperText Transfer Protocol Secure).
HTTP
Exemples de navigateurs Safari, Chrome, Edge, Firefox
Les URL Pour trouver une ressource sur le Web, il faut pouvoir la localiser précisément et de façon unique. C'est le rôle de l'URL (Uniform Resource Locator) qui indique le protocole utilisé, le nom de domaine du service hébergeant la ressource, puis le chemin à suivre pour trouver la ressource sur le serveur.
URL
Les Cookies Lors de la navigation, de petits fichiers texte sont enregistrés : les cookies. D'utilité variable, ils peuvent être retirés manuellement ou en configurant le navigateur.
Les moteurs de recherches Un moteur de recherche est un site qui référence les contenus du Web. Pour cela, il utilise des robots qui explorent le Web en utilisant les liens hypertextes. Lorsque l'internaute envoie une requête sous forme de mots-clés, des algorithmes ordonnent les URL correspondantes en fonction de leur pertinence supposée. Exemple de moteur de recherche : Google, Ecosia, Qwant, Bing
HTML-CSS sont des langages de programmation pour créer des pages web. Le HTML permet de créer le contenu, le CSS permet de définir du style.

Questions

  1. Qu'est ce que le web ?

    • un réseau social

    • Un ensemble de pages reliées entre elles par des liens

    • Un système d'exploitation

    • Un logiciel

  2. Quels sont les deux éléments principaux qui permettent de naviguer sur le Web ?

    • Un navigateur et un serveur web

    • Un serveur et un logiciel antivirus

    • Un moteur de recherche et un réseau social

    • Un ordinateur et un smartphone

  3. Qu’est-ce qu’un URL ?

    • Un logiciel pour naviguer sur Internet

    • L’adresse d’une ressource sur le Web

    • Un protocole de communication

    • Un virus informatique

  4. Que signifie HTTP ou HTTPS dans une adresse web ?

    • Un type de navigateur

    • Un protocole pour transférer des pages web

    • Un langage de programmation

    • Un système de protection antivirus

  5. Qu’est-ce qu’un serveur web ?

    • Un logiciel pour créer des sites

    • Un moteur de recherche

    • Un ordinateur qui stocke et envoie des pages Web

    • Un virus

  6. Qui a inventé le World Wide Web et en quelle année ?

    • Steve Jobs en 1985

    • Tim Berners-Lee en 1989

    • Bill Gates en 1990

    • Mark Zuckerberg en 2004

  7. Quel était l’objectif principal du Web à sa création ?

    • Créer un réseau social

    • Diffuser des vidéos

    • Vendre des produits en ligne

    • Partager facilement des documents entre chercheurs

  8. Quelle est la différence principale entre Internet et le Web ?

    • Internet est un service, le Web est le réseau

    • Internet est le réseau mondial, le Web est un service fonctionnant sur Internet

    • Internet est un logiciel, le Web est un matériel

    • Internet et le Web sont exactement la même chose

  9. Quel est un enjeu important de la sécurité sur le Web ?

    • Installer plus de publicités

    • Rendre les sites plus lents

    • Augmenter la taille des pages web

    • Protéger les données personnelles

Introduction aux langages du Web : HTML/CSS⚓︎

Notion objectif
HTML 🏗 Construire une page Web (avec HTML)
CSS 🎨 Embellir ta page (avec CSS)
URL 🔗 Créer des liens entre tes pages
Structure Web 🧠 Comment pense un navigateur ?
JavaScript (option) 🕹 Rendre ta page interactive

Exemples

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Ma première page</title>
</head>
<body>
    <h1>Bonjour !</h1>
    <p>Voici ma première page Web.</p>
</body>
</html>
CSS
h1{color: red;}
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}

Ma première page

🎯 Sujets possibles pour votre page Web⚓︎

Les activités pour créer les pages Web seront à faire sur le site Capytale :

WEB 1
WEB 2
WEB 3
WEB 4
WEB 5
WEB 6

Vous allez publier une page contenant au moins :
- un titre
- deux sous-titres
- trois paragraphes
- des images
- un lien hypertexte

Et vous devez traiter l’un des sujets suivants :

🌐 Notion 🎯 Objectif
🌍 Internet vs Web Distinguer l’infrastructure (Internet) du service (Web)
🧠 Fonctionnement du Web Comprendre l’échange client-serveur via HTTP
🧱 HTML / CSS Structurer et styliser une page web
💻 Client / Serveur Expliquer le rôle du navigateur et du serveur
🌐 DNS Comprendre comment un nom de domaine devient une adresse IP
📦 Hébergement Découvrir comment un site est mis en ligne
🔍 Moteurs de recherche Comprendre comment les pages sont indexées et classées
📁 Structure de site Concevoir l’organisation d’un site multi-pages
⚖️ Droit et éthique Respecter les droits (image, auteur, données personnelles)

📚 Glossaire – Les notions du Web

Terme Définition
Web Ensemble de pages accessibles via Internet à l’aide d’un navigateur.
Navigateur Logiciel (comme Chrome, Firefox…) qui affiche les pages Web.
Serveur Ordinateur qui envoie les pages Web quand on les demande.
HTTP Protocole utilisé pour que le navigateur communique avec le serveur.
URL Adresse d’une page Web (ex. : https://exemple.fr/page.html).
HTML Langage qui structure le contenu d’une page (titres, paragraphes, images…).
Balise HTML Mot-clé entre < et > utilisé pour structurer (ex. : <h1>, <p>, <a>).
CSS Langage qui permet de modifier l’apparence de la page (couleurs, polices, mise en page…).
JavaScript Langage qui permet de rendre une page interactive (ex. : bouton qui affiche un message).
Fichier HTML Fichier contenant le code de la page (structure et contenu).
Fichier CSS Fichier qui contient les règles de style (couleurs, tailles, etc.).
Lien hypertexte Élément cliquable qui mène vers une autre page (créé avec la balise <a>).
Balise Rôle
<html> Balise racine d’une page HTML
<head> Contient les infos invisibles de la page (titre, encodage, etc.)
<title> Titre affiché dans l’onglet du navigateur
<body> Contenu visible de la page
<h1> à <h6> Titres (du plus important <h1> au moins important <h6>)
<p> Paragraphe
<br> Saut de ligne
<strong> Texte en gras (important)
<em> Texte en italique (emphase)
<a> Lien hypertexte
<img> Image
<ul> / <ol> Liste à puces / liste numérotée
<li> Élément d’une liste
<div> Bloc de contenu (sans signification sémantique particulière)
<span> Portion de texte en ligne
Propriété Rôle
color Couleur du texte
background-color Couleur de fond
font-size Taille du texte
font-family Police d’écriture
text-align Alignement du texte (left, center, right...)
margin Marge extérieure (espace autour de l’élément)
padding Marge intérieure (espace entre le contenu et la bordure)
border Bordure autour de l’élément
width / height Largeur / hauteur de l’élément
display Type d’affichage (block, inline, flex...)
position Positionnement (relative, absolute, fixed...)
text-decoration Décoration du texte (souligné, barré...)
hover (pseudo-classe) Effet lors du survol de l’élément