Lernzettel: Introduction au Web et ses Technologies

📋 Plan du Cours

1. Définition et historique du Web
2. Structure des pages web, URL et liens hypertextes
3. Sécurité de la navigation et protection des données personnelles
4. Fonctionnement des moteurs de recherche et référencement naturel
5. Droit d’auteur et impacts sociétaux du Web
6. Langage HTML et balises principales pour structurer une page web
7. Langage CSS et mise en forme des pages web
8. Modèle client-serveur et requêtes HTTP

📖 1. Définition et historique du Web

🔑 Notions clés & Définitions

• Disposition de technologies pour : La mise en place de technologies permettant le développement de sites Web interactifs et dynamiques, comme l'introduction de langages spécifiques en 1995.
• Mise à disposition de technologies : L'action de rendre accessibles des technologies standardisées pour le développement et l'utilisation du Web, telles que les langages JavaScript et PHP à partir de 1995.
• Technologies pour le développement : Les langages et outils introduits pour créer des sites Web interactifs et dynamiques, notamment JavaScript et PHP, disponibles depuis 1995.
• Liens hypertextes : Des connexions entre données sur le Web permettant de naviguer d'une ressource à une autre, concept inventé en 1965 par Ted Nelson.

📝 Points essentiels

• Le Web est un système donnant accès à un ensemble de données reliées par des liens hypertextes et accessibles sur le réseau internet.
• Le Web utilise des formats normalisés par le W3C pour permettre une circulation standardisée des informations.
• Le concept d'hypertexte a été inventé en 1965 par Ted Nelson.
• Le Web est né en 1989 au CERN grâce à Tim Berners Lee.
• Le premier navigateur Mosaic a été rendu public en 1993, facilitant l'accès au Web.

💡 À retenir

Le Web est une révolution technologique née d'un concept d'hypertexte standardisé, qui a évolué grâce à des acteurs clés et des normes mondiales.

📖 2. Structure des pages web, URL et liens hypertextes

🔑 Notions clés & Définitions

• Page web : Une ressource accessible sur le Web contenant du texte, images, vidéos, et liens hypertextes.

📝 Points essentiels

• Une page web contient de nombreux liens hypertextes permettant de naviguer vers d’autres pages ou parties de pages.
• Un lien hypertexte est un élément d’une page web qui, lorsqu’on clique dessus, dirige vers une autre ressource via son URL.
• La structure du Web peut être représentée par un graphe de pages reliées par des liens hypertextes.

💡 À retenir

Les pages web sont interconnectées via des URL et liens hypertextes, formant une structure navigable du Web.

📖 3. Sécurité de la navigation et protection des données personnelles

🔑 Notions clés & Définitions

• Historique de navigation : Enregistrement des interactions de navigation conservé par le navigateur, accessible localement sur le poste client et parfois aux sites connectés.
• Sécurité du navigateur : Paramétrage du navigateur visant à limiter l’exécution de scripts non souhaités et à protéger la confidentialité des données échangées.

📝 Points essentiels

• Vider régulièrement le cache et l'historique de navigation pour sécuriser sa navigation.
• Paramétrer la sécurité du navigateur limite l'exécution de scripts non souhaités.
• Les cookies sont des fichiers stockés sur le poste client par un site web pour conserver des informations.
• Les fausses pages web peuvent être utilisées pour l’hameçonnage des utilisateurs.
• Choisir des mots de passe forts et différents selon les applications est essentiel pour la protection des données.
• Ce fichier est stocké sur le poste client.

💡 À retenir

Vider régulièrement le cache et l'historique de navigation pour sécuriser sa navigation.

📖 4. Fonctionnement des moteurs de recherche et référencement naturel

🔑 Notions clés & Définitions

• Moteur de recherche : Application qui permet de rechercher des informations sur le Web.
• Moteurs de recherche : Services permettant de trouver des sites pertinents grâce à un ou plusieurs mots clés bien choisis.

📝 Points essentiels

• Les moteurs de recherche permettent de trouver des sites pertinents grâce à des mots clés.
• Les résultats sponsorisés peuvent apparaître au-dessus des résultats naturels dans les moteurs de recherche.
• Le classement des pages dépend notamment de la popularité des liens, de la pertinence aux mots clés et de l'ordre des termes dans la requête.
• (Moteurs de recherche utilisés, France 2019) Les moteurs de recherche permettent de trouver des informations dans des pages dont on ne connaît pas l’adresse, voire dont on ignore l’existence.

💡 À retenir

Les moteurs de recherche permettent de trouver des sites pertinents grâce à des mots clés.

📖 5. Droit d’auteur et impacts sociétaux du Web

🔑 Notions clés & Définitions

• Droit d’auteur : Droit qui regroupe l’ensemble des droits dont dispose un auteur ou ses ayants droit sur des œuvres originales de l’esprit, notamment pour protéger le contenu original du Web.
• Droit à l’oubli : Droit qui soulève la difficulté d’effacer des informations personnelles conservées longtemps sur le Web, notamment lorsque ces informations sont accessibles partout et de longue durée.

📝 Points essentiels

• Le contenu original du Web est protégé par le droit d’auteur, et la reproduction sans autorisation constitue un délit de contrefaçon.
• Le Web a révolutionné la communication en permettant à tous de publier et de coopérer, mais diffuse aussi des informations dont la qualité, la pertinence et la véracité ne sont pas garanties.
• Le droit à l’oubli concerne la difficulté d’effacer des informations personnelles accessibles sur le Web, parfois depuis longtemps.
• L’exploitation des données personnelles peut entraîner des recommandations commerciales ciblées et des bulles informationnelles, avec des impacts sociétaux encore difficiles à estimer.

💡 À retenir

Le droit à l’oubli concerne la difficulté d’effacer des informations personnelles accessibles sur le Web, parfois depuis longtemps.

📖 6. Langage HTML et balises principales pour structurer une page web

🔑 Notions clés & Définitions

• Langage HTML : Langage fondé sur l’utilisation de balises et de liens hypertextes pour décrire la structure et le contenu d’une page web.

📝 Points essentiels

• Le langage HTML utilise des balises pour décrire le contenu d’une page web, avec une syntaxe stricte comprenant un chevron ouvrant, le nom de la balise, des attributs optionnels, et un chevron fermant.
• Une seule balise body par page HTML.

💡 À retenir

Maîtriser la syntaxe et les balises essentielles du HTML est crucial pour structurer efficacement une page web.

📖 7. Langage CSS et mise en forme des pages web

🔑 Notions clés & Définitions

• Charte graphique : L'ensemble des règles définissant l'aspect visuel global d'un site web, qui peut être entièrement contrôlé par une feuille de style CSS.
• Mettre en forme : L'action de gérer l'apparence visuelle d'une page web, notamment grâce au CSS, sans modifier sa structure HTML.

📝 Points essentiels

• Le code CSS est souvent placé dans un fichier externe, comme style.css, pour centraliser la gestion de la charte graphique.
• Le code CSS est souvent placé dans un fichier externe appelé feuille de style, par exemple style.css.
• Le code des feuilles de style, aussi appelées fichiers CSS, permet de gérer le design d’une page web.

💡 À retenir

Le CSS sépare la présentation du contenu, permettant une mise en forme flexible et centralisée d’un site web.

📖 8. Modèle client-serveur et requêtes HTTP

🔑 Notions clés & Définitions

• Modèle client-serveur : Architecture informatique dans laquelle un client, comme un navigateur, initie une communication en envoyant des requêtes à un serveur, qui traite ces requêtes et renvoie des données ou des services.
• Protocole HTTP : Ensemble de règles permettant la communication entre un navigateur et un serveur web, utilisant des URL commençant par HTTP ou HTTPS pour échanger des données sur le Web.
• Requête HTTP : Une demande effectuée par le navigateur web (Internet Explorer, Firefox, Chrome, Safari.

📝 Points essentiels

• La requête HTTP contient une méthode, une ressource demandée, et une version du protocole, et le serveur répond avec un code de statut.
• Les langages client (HTML, CSS, JavaScript) s’exécutent dans le navigateur, tandis que les langages serveur (PHP, JavaScript côté serveur) s’exécutent sur le serveur.
• Le dialogue entre client et serveur est initié par le client via une requête HTTP, et la réponse contient la page demandée.
• Le modèle client-serveur permet l’échange de données entre le serveur web et le navigateur (le client), grâce à une requête HTTP émise par le client et à la ......................................................................................................................................................

💡 À retenir

La requête HTTP contient une méthode, une ressource demandée, et une version du protocole, et le serveur répond avec un code de statut.

📅 Repères chronologiques

Date	Événement
1965	Invention du concept d'hypertexte
1989	Naissance du Web au CERN
1993	Rendu public du premier navigateur Mosaic
1995	Introduction de technologies pour sites Web interactifs et dynamiques
2019	Utilisation des moteurs de recherche en France

📊 Tableaux de Synthèse

Comparaison des technologies Web par année

Année	Technologies introduites	Objectifs
1965	Concept d'hypertexte	Navigation entre données
1989	Web au CERN	Partage de données
1993	Navigateur Mosaic	Accessibilité du Web
1995	JavaScript, PHP	Sites interactifs et dynamiques
2019	Moteurs de recherche en France	Recherche d'informations

⚠️ Pièges & Confusions Fréquentes

1. Confusion entre hypertexte et URL, qui sont liés mais distincts.
2. Mélanger dates de l'invention du Web et de ses technologies.
3. Confondre la sécurité du navigateur avec la sécurité du Web en général.
4. Oublier que le Web utilise des formats normalisés par le W3C.
5. Confusion entre moteurs de recherche et moteurs de navigation.
6. Mélanger le droit d'auteur avec le droit à l'oubli.
7. Confondre HTML et CSS comme étant la même chose.

✅ Checklist Examen

1. Comprendre la chronologie du Web et ses acteurs clés.
2. Savoir définir une page web et ses composants.
3. Connaître les principes de base de la sécurité en navigation.
4. Identifier le rôle des moteurs de recherche et leur fonctionnement.
5. Expliquer le concept de droit d'auteur et le droit à l'oubli.
6. Maîtriser la syntaxe HTML et ses balises principales.
7. Différencier CSS et HTML dans la mise en forme.
8. Comprendre le modèle client-serveur et le protocole HTTP.
9. Savoir comment une requête HTTP est structurée.
10. Identifier les enjeux de la protection des données personnelles.
11. Connaître les formats de liens hypertextes et leur rôle.
12. Expliquer la structure d'une page web.