Fiche de révision : Principes fondamentaux du Web

📋 Plan du Cours

1. Origines du Web
2. Éléments fondamentaux du Web
3. Structure URL et navigation
4. Couple HTML+CSS
5. Langage HTML
6. Balises HTML et sémantique
7. CSS et mise en page
8. Ciblage en CSS (id, classe)
9. Exploitation d'une page HTML-CSS
10. Résumé et principes du Web

📖 1. Origines du Web

🔑 Notions clés & Définitions

• Tim Berners-Lee (1989) : informaticien britannique qui a inventé le Web au CERN, en mettant au point le système hypertexte permettant la consultation de documents liés par des hyperliens.
• Hypertexte : système développé par Berners-Lee permettant, à partir d’un document, de consulter d’autres documents en cliquant sur des mots clés ou hyperliens.
• Hyperliens : mots ou éléments cliquables soulignés en bleu, permettant de naviguer d’un document à un autre via le système hypertexte.
• Première page web : page initiale créée par Berners-Lee, accessible à l’adresse http://info.cern.ch/hypertext/WWW/TheProject.html, illustrant le concept d’hypertexte.
• Navigateur Web : logiciel permettant d’accéder et d’afficher les pages web en suivant les hyperliens, son apparition en 1993 avec NCSA Mosaic a popularisé le Web.

📝 Points essentiels

• Le Web a été développé au CERN par Tim Berners-Lee en 1989, en réponse à la nécessité de faciliter les échanges d’informations entre centres de recherche.
• Le système hypertexte, inventé par Berners-Lee, est la base du Web, permettant de naviguer entre documents reliés par des hyperliens.
• La première page web, toujours accessible, a été créée pour présenter ce système hypertexte.
• La popularisation du Web a commencé en 1993 avec le navigateur NCSA Mosaic, disponible sur plusieurs systèmes d’exploitation, ce qui a permis une diffusion plus large.
• Depuis 1995, le Web utilise des formats normalisés par le W3C, facilitant la circulation standardisée des données.
• La croissance du Web s’est accélérée dans les années 2000, notamment avec l’accessibilité via les applications mobiles et l’apparition de contenus multimédias (ex : vidéos).

💡 À retenir

Le Web, inventé par Tim Berners-Lee en 1989, repose sur le système hypertexte et les hyperliens, et sa popularisation a été favorisée par l’arrivée des navigateurs comme NCSA Mosaic en 1993.

📖 2. Éléments fondamentaux du Web

🔑 Notions clés & Définitions

• Éléments fondamentaux du Web : Ensemble des technologies permettant l’accès et la navigation sur le Web, comprenant notamment le protocole HTTP, les URL, le serveur Web, le client, et le Web lui-même (voir contenu source pour détails).

• Réseau de données : Système permettant la transmission d’informations entre différents dispositifs via des connexions interconnectées, sur lequel repose le Web. (Ce concept est évoqué dans le contexte des connexions mondiales, mais la définition précise n’est pas donnée dans la source).

• Protocole HTTP : HyperText Transfer Protocol, protocole de dialogue utilisé pour échanger des données entre un client (navigateur) et un serveur Web. Il permet la requête et la réponse pour accéder aux ressources du Web.

• URL (Uniform Resource Locator) : Adresse unique d’une ressource sur le Web, indiquant son emplacement dans l’arborescence d’un site. Elle se compose de trois parties principales : le protocole HTTP(S), le nom de domaine, et le chemin vers la ressource.

• Serveur Web : Système informatique qui héberge des ressources (pages, images, vidéos) et répond aux requêtes HTTP des clients en leur fournissant ces ressources si elles existent.

• Client : Dispositif ou logiciel (par exemple, un navigateur) qui envoie des requêtes HTTP au serveur Web pour accéder à des ressources.

📝 Points essentiels

• Le Web est un système donnant accès à un ensemble de données reliées par des hyperliens, accessible via un navigateur sur Internet.
• La différence entre Internet et le Web : Internet est un réseau de réseaux basé sur le protocole IP, tandis que le Web est un service utilisant trois technologies principales : le protocole HTTP, les URL, et le langage HTML.
• L’accès à une page Web se fait en saisissant son URL dans le navigateur ou en suivant des hyperliens.
• Une URL indique l’emplacement précis d’une ressource dans l’arborescence d’un site, composée du protocole, du nom de domaine, et du chemin.
• La communication entre client et serveur repose sur un dialogue : le client envoie une requête HTTP, le serveur répond en fournissant la ressource demandée ou un message d’erreur.
• La structure d’un site Web est en arborescence, avec des ressources situées dans des dossiers imbriqués.
• Le couple HTML+CSS est fondamental pour la création et la mise en forme des pages Web : HTML pour la structure et le contenu, CSS pour la présentation graphique.

💡 À retenir

Le Web repose sur un dialogue standardisé entre clients et serveurs via le protocole HTTP, utilisant des URL pour localiser précisément chaque ressource dans une structure arborescente, permettant ainsi l’accès à un vaste ensemble de données reliées par des hyperliens.

📖 3. Structure URL et navigation

🔑 Notions clés & Définitions

Structure URL : Organisation hiérarchique de l'adresse d'une ressource sur le Web, composée de plusieurs parties permettant d'indiquer l'emplacement précis de cette ressource dans l'arborescence du site.

Parties de l'URL : Segments qui composent une URL, comprenant le protocole, le nom de domaine, et le chemin d’accès, permettant d’identifier et d’accéder à une ressource spécifique.

Protocole : Partie de l’URL qui indique le langage de communication utilisé entre le client et le serveur, généralement HTTP ou HTTPS, précisant la méthode de transfert des données.

Nom de domaine : Partie de l’URL qui désigne l’adresse unique du serveur hébergeant la ressource, par exemple "www.eduscol.education.fr". Il sert à localiser le serveur sur le réseau.

Chemin d’accès : Partie de l’URL qui indique la localisation précise de la ressource sur le serveur, en précisant la structure arborescente (dossiers et fichiers), par exemple "/actualites/article/sciences-numérique-technologie.html".

📝 Points essentiels

• L’URL (Uniform Resource Locator) définit un emplacement unique d’une ressource sur un serveur Web.
• Elle se compose de trois parties principales : le protocole (HTTP/HTTPS), le nom de domaine, et le chemin d’accès.
• Le protocole indique la méthode de communication (ex : HTTP ou HTTPS).
• Le nom de domaine désigne le serveur hébergeant la ressource.
• Le chemin d’accès précise la localisation exacte de la ressource dans l’arborescence du site.
• La structure URL est hiérarchique et permet de naviguer dans l’arborescence du site.
• La requête HTTP est envoyée au serveur via cette URL pour accéder à la ressource demandée.
• La structure en arborescence facilite la gestion et l’organisation des ressources sur le serveur.

💡 À retenir

La structure d’une URL, composée du protocole, du nom de domaine et du chemin d’accès, permet d’identifier précisément une ressource sur le Web et d’assurer une navigation hiérarchique efficace.

📖 4. Couple HTML+CSS

🔑 Notions clés & Définitions

• Couple HTML+CSS : Association fondamentale dans le développement Web, où HTML (HyperText Markup Language) structure la page et CSS (Cascading Style Sheets) en assure la présentation (voir source).
• Langage de balisage : Type de langage permettant de structurer et décrire le contenu d’un document, en utilisant des balises ouvrantes et fermantes pour délimiter des éléments (voir source).
• HTML (HyperText Markup Language) : Langage de description conçu pour représenter et structurer les pages Web, en utilisant des balises pour définir le contenu et sa sémantique (voir source).
• CSS (Cascading Style Sheets) : Langage de présentation permettant de définir le style graphique d’une page Web, en spécifiant des propriétés comme la couleur, la mise en page, la police, etc. (voir source).
• Balises HTML : Marques syntaxiques délimitant des éléments de contenu, généralement sous la forme <nom_de_la_balise> et </nom_de_la_balise>. Certaines balises sont auto-fermantes, comme <br/> (voir source).
• Sémantique HTML : Utilisation de balises ayant une signification précise pour le contenu qu’elles encadrent, comme <h1> pour un titre ou <p> pour un paragraphe, afin d’améliorer l’accessibilité et la compréhension du document (voir source).

📝 Points essentiels

• Le couple HTML+CSS est la base du développement Web : HTML structure la page, CSS en contrôle l’aspect visuel.
• HTML utilise des balises pour décrire le contenu, avec une syntaxe d’ouverture <balise> et de fermeture </balise>.
• La structure HTML doit respecter l’imbrication correcte des balises : <balise1> <balise2> </balise2> </balise1>.
• La sémantique des balises est cruciale pour l’accessibilité et la compréhension du contenu par les moteurs de recherche.
• CSS est séparé du HTML, mais peut être intégré dans la page ou lié via un fichier externe.
• La différenciation entre contenu (HTML) et style (CSS) est une bonne pratique pour la maintenance et la clarté du code.

💡 À retenir

Le couple HTML+CSS constitue la base du Web, HTML structurant la page avec des balises sémantiques, et CSS lui donnant un style graphique pour un rendu visuel cohérent et accessible.

📖 5. Langage HTML

🔑 Notions clés & Définitions

Langage HTML : Wikipedia (définition) : Le 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, d’où son nom. HTML permet de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias, dont des images, des formulaires de saisie, et des programmes informatiques. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).
Auteurs : Wikipedia (date non précisée).

Balises HTML : Ce sont des éléments de code délimités par des chevrons < >, permettant de structurer et de donner une signification au contenu. Chaque balise a une fonction précise, comme définir un titre, un paragraphe ou un lien.

Attributs HTML : Ce sont des propriétés ajoutées aux balises pour leur donner des caractéristiques spécifiques. Exemple : id (identifiant unique), class (groupe de styles). La syntaxe est : <balise attribut_1="valeur_1" attribut_2="valeur_2">.

Structure d'une page HTML : Composée principalement de balises ouvrantes et fermantes imbriquées, elle organise le contenu en sections sémantiques (titres, paragraphes, liens). La structure doit respecter l'imbrication correcte des balises, notamment que chaque balise ouverte doit être fermée dans le bon ordre.

Balises de titre : <h1>, <h2>, <h3>, etc., utilisées pour définir des titres de différents niveaux, avec <h1> comme titre principal. Leur contenu est sémantiquement important pour l'organisation du document.

Balise de paragraphe : <p>, utilisée pour délimiter un paragraphe de texte. Elle structure le contenu textuel en unités cohérentes.

Balise de lien : <a>, utilisée pour créer un hyperlien. Elle possède un attribut href qui indique l'adresse de la ressource vers laquelle le lien pointe.

📝 Points essentiels

• Le HTML est un langage de description, non de programmation, permettant de représenter la structure et le contenu d’une page web.
• Toute balise doit être ouverte et fermée, sauf celles qui sont auto-fermantes (ex : <br/>).
• L’imbrication correcte des balises est essentielle pour respecter la sémantique et la validité du document.
• Les balises <h1> à <h6> définissent la hiérarchie des titres, <p> pour les paragraphes, et <a> pour les hyperliens.
• Les attributs id et class permettent de cibler précisément des éléments pour la mise en forme ou la manipulation via CSS ou JavaScript.

💡 À retenir

Le HTML structure le contenu d'une page web à l'aide de balises sémantiques, qui doivent être ouvertes, fermées et imbriquées correctement pour assurer une bonne organisation et accessibilité du document.

📖 6. Balises HTML et sémantique

🔑 Notions clés & Définitions

• Balise <h1> : balise HTML utilisée pour définir un titre de premier niveau, indiquant une importance forte dans la hiérarchie du contenu (source : contexte général).
• Balise <p> : balise HTML permettant de délimiter un paragraphe, structurant le texte en unités cohérentes (source : contexte général).
• Balise <strong> : balise HTML utilisée pour mettre en évidence un texte important, généralement en gras, et ayant une signification sémantique forte (source : contexte général).
• Attribut class : attribut HTML permettant de donner un nom de classe à une balise, utilisé pour cibler plusieurs éléments avec un même style en CSS (source : contexte général).
• Attribut id : attribut HTML permettant d’identifier de façon unique une balise dans la page, utilisé pour cibler précisément un seul élément en CSS ou JavaScript (source : contexte général).
• Imbrication des balises : organisation hiérarchique où une balise est placée à l’intérieur d’une autre, respectant la règle <balise1> <balise2> </balise2> </balise1> ; la structure doit respecter la sémantique et la syntaxe correcte (source : contexte général).

📝 Points essentiels

• La balise <h1> est utilisée pour définir un titre principal, essentiel pour la hiérarchie sémantique de la page.
• La balise <p> sert à structurer le texte en paragraphes, facilitant la lecture et la compréhension.
• La balise <strong> indique une mise en évidence sémantique d’un contenu, souvent traduite visuellement par du gras.
• Les attributs class et id permettent de cibler précisément des éléments pour appliquer des styles CSS ou pour manipuler via JavaScript.
• L’imbrication correcte des balises est cruciale : chaque balise ouverte doit être fermée dans le bon ordre, en respectant la hiérarchie, pour assurer la validité et la sémantique du code HTML.

💡 À retenir

Les balises <h1>, <p>, et <strong> structurent et hiérarchisent le contenu sémantique d’une page HTML, tandis que les attributs class et id facilitent la mise en style et la manipulation précise des éléments, dans le respect de l’imbrication correcte des balises.

📖 7. CSS et mise en page

🔑 Notions clés & Définitions

• Propriétés CSS : Attributs permettant de définir le style graphique d’un élément HTML, comme la couleur, la taille, l’alignement, etc. (voir propriétés text-align et background-color).

• Sélecteurs CSS : Syntaxe utilisée pour cibler précisément un ou plusieurs éléments HTML afin d’appliquer des styles. Exemple : le sélecteur # pour cibler un élément par son id, le sélecteur . pour cibler par class.

• Ciblage par id et classe : Méthodes de sélection d’éléments HTML en CSS :

  • # (dièse) : cible un élément unique avec un attribut id spécifique.
  • . (point) : cible tous les éléments partageant une même classe (class).

• Propriétés text-align : Permet de définir l’alignement horizontal du texte dans un élément (exemples : left, center, right, justify).

• Propriété background-color : Permet de définir la couleur de fond d’un élément HTML.

📝 Points essentiels

• Le CSS est utilisé pour la mise en page et la décoration d’une page HTML, séparément du contenu structuré par HTML.
• Le ciblage d’un élément en CSS peut se faire via l’attribut id en utilisant le sélecteur #, ou via l’attribut class en utilisant le sélecteur ..
• La propriété text-align permet d’aligner le texte à gauche, à droite, au centre ou justifié.
• La propriété background-color modifie la couleur de fond d’un élément.
• La différence entre id et class : id doit être unique dans une page, tandis que class peut être attribuée à plusieurs éléments pour leur appliquer un même style.

💡 À retenir

Le CSS, via ses sélecteurs et propriétés, permet de contrôler précisément la mise en page et l’apparence graphique d’une page web en ciblant efficacement les éléments HTML par id ou class.

📖 8. Ciblage en CSS (id, classe)

🔑 Notions clés & Définitions

• Sélecteur # (id) : Un sélecteur en CSS utilisant le symbole # permet de cibler un élément HTML spécifique grâce à son attribut id. L’attribut id doit être unique dans une page, ce qui signifie qu’un seul élément peut porter un même id.
  Source : "Dans le CSS, on utilisera le point . à la place du #. La différence entre « id » et « class » n'est pas très importante. L'attribut « class » permet de donner le même nom à plusieurs reprises dans une même page."

• Sélecteur . (classe) : Un sélecteur utilisant le symbole . cible tous les éléments HTML ayant l’attribut class correspondant. Contrairement à l’id, une classe peut être attribuée à plusieurs éléments dans une même page.
  Source : "Il est aussi possible d'utiliser l'attribut « class » à la place de « id »."

• Utilisation de id et class :

  • id sert à cibler un seul élément précis, souvent pour une mise en forme spécifique ou une manipulation JavaScript.
  • class permet de regrouper plusieurs éléments partageant une même caractéristique stylistique ou fonctionnelle, facilitant la mise en forme collective.

• Exemples de ciblage :

  • Cibler un élément avec un id : #monId
  • Cibler des éléments avec une class : .maClasse
  • Exemple en HTML : <p id="parag1"> ou <div class="conteneur">

📝 Points essentiels

• Le symbole # en CSS indique un ciblage par id, qui doit être unique dans la page.
• Le symbole . en CSS indique un ciblage par class, pouvant être attribué à plusieurs éléments.
• La propriété id doit être unique, tandis que class peut être partagée par plusieurs éléments.
• La différence principale réside dans leur usage : id pour un ciblage précis, class pour un regroupement d’éléments.
• En CSS, pour cibler un élément avec un id, on écrit #nomId. Pour une class, on écrit .nomClasse.

💡 À retenir

Le ciblage en CSS utilise # pour identifier un élément unique via son id, et . pour regrouper plusieurs éléments partageant une même class. Ces sélecteurs permettent de définir précisément la mise en forme des éléments HTML.

📖 9. Exploitation d'une page HTML-CSS

🔑 Notions clés & Définitions

Exploitation d'une page HTML-CSS : Processus consistant à analyser, comprendre et vérifier le rendu visuel d'une page web en utilisant un code HTML et CSS, notamment via des outils comme jsfiddle.net.

Lecture de code HTML : Action d'interpréter le contenu écrit en HTML, en identifiant les balises, leur structure, leur sémantique, et leur relation pour comprendre la composition de la page.

Interprétation du rendu : Analyse du résultat visuel obtenu après exécution du code HTML et CSS, en observant la mise en page, les styles appliqués, et la disposition des éléments.

Utilisation de jsfiddle.net : Outil en ligne permettant d’écrire, tester et visualiser simultanément du code HTML, CSS, et JavaScript dans un environnement intégré, facilitant la vérification du rendu visuel.

Vérification du résultat visuel : Contrôle de la correspondance entre le code écrit et l’affichage obtenu, en s’assurant que le rendu correspond aux attentes ou aux consignes, notamment par des captures d'écran.

📝 Points essentiels

• La démarche d’exploitation d’une page HTML-CSS implique de lire le code HTML pour identifier la structure et la sémantique des balises, puis d’observer le rendu visuel pour vérifier la mise en forme et la disposition.
• La lecture de code HTML repose sur la compréhension des balises ouvrantes et fermantes, leur imbrication, et l’usage des attributs comme « id » et « class ».
• L’interprétation du rendu consiste à analyser le résultat visuel dans l’onglet « Result » de jsfiddle.net, en comparant avec le code écrit.
• L’outil jsfiddle.net facilite cette exploitation en permettant d’écrire le code dans une partie dédiée et de voir instantanément le rendu, ce qui accélère la vérification.
• La vérification du résultat visuel est essentielle pour valider la compréhension du code HTML et CSS, et pour s’assurer que la mise en page correspond aux attentes.

💡 À retenir

L’exploitation d’une page HTML-CSS consiste à analyser le code pour comprendre sa structure et à vérifier le rendu visuel obtenu, en utilisant des outils comme jsfiddle.net pour tester et confirmer l’affichage.

📖 10. Résumé et principes du Web

🔑 Notions clés & Définitions

Web : Système donnant accès à un ensemble de données (pages, images, sons, vidéos) reliées par des liens hypertextes et accessibles via Internet par un navigateur.
Hyperliens : Mots ou éléments cliquables permettant de consulter d’autres documents ou pages web.
Internet : Réseau de réseaux basé sur le protocole IP, distinct du Web qui est un service utilisant ce réseau.
URL (Uniform Resource Locator) : Adresse unique d’une ressource sur le Web, composée de trois parties : protocole (HTTP/HTTPS), nom de domaine, et chemin d’accès.
Protocole HTTP : Protocol de dialogue pour l’échange d’informations sur le Web.
HTML (HyperText Markup Language) : Langage de balisage conçu pour représenter et structurer les pages web. Il permet d’écrire de l’hypertexte, de structurer sémantiquement le contenu, d’inclure des ressources multimédias, et de créer des documents interopérables.
CSS (Cascading Style Sheets) : Langage de style permettant de définir l’aspect graphique d’une page web, comme la mise en page, les couleurs, les polices, etc.
Couple HTML+CSS : Association fondamentale pour le développement web, où HTML structure le contenu et CSS en gère la présentation.

📝 Points essentiels

• Le Web est un service d’Internet, distinct de celui-ci, qui donne accès à des données reliées par hyperliens.
• La première page web a été créée en 1991, et le Web a connu une croissance exponentielle, avec plus d’un milliard de sites en 2014.
• Le Web repose sur trois technologies principales : le protocole HTTP, les URL, et le langage HTML.
• Une URL se divise en trois parties : protocole (ex : http), nom de domaine, et chemin d’accès vers la ressource.
• La structure d’une page Web est hiérarchique, avec des ressources organisées en arborescence.
• HTML est un langage de description, non de programmation, utilisant des balises ouvrantes et fermantes pour structurer le contenu.
• Les balises HTML ont une signification sémantique (ex : <h1> pour un titre, <p> pour un paragraphe, <strong> pour mettre en évidence).
• La mise en page et le style sont gérés par CSS, qui s’applique via des sélecteurs ciblant des éléments HTML par leur type, id ou classe.
• Le dialogue entre client et serveur repose sur des requêtes HTTP, et une page peut être consultée en saisissant son URL ou en suivant des hyperliens.

💡 À retenir

Le Web est une plateforme basée sur HTML pour la structure et CSS pour le style, permettant de créer, organiser et naviguer dans des ressources reliées par hyperliens, tout en étant un service d’Internet utilisant un protocole spécifique.

📊 Tableaux de Synthèse

⚠️ Pièges & Confusions Fréquentes

1. Confondre Internet et le Web : Internet est un réseau, le Web est un service utilisant HTTP, URL, HTML.
2. Mal interpréter la structure d’une URL : ne pas distinguer le protocole, le nom de domaine, et le chemin.
3. Confondre balises HTML et éléments CSS : HTML structure, CSS met en forme.
4. Oublier que le couple HTML+CSS est indissociable pour la création de pages web.
5. Confusion entre hypertexte et hyperliens : hypertexte est le système, hyperliens sont les éléments cliquables.
6. Négliger la hiérarchie dans la structure URL : l’ordre des parties est crucial.
7. Confondre le rôle du navigateur (client) et du serveur Web : le navigateur envoie la requête, le serveur répond.

✅ Checklist Examen

1. Connaître la définition de Tim Berners-Lee et son rôle dans l’invention du Web en 1989.
2. Savoir ce qu’est un hypertexte et comment il permet la navigation entre documents.
3. Identifier les éléments fondamentaux du Web : protocole HTTP, URL, serveur Web, client.
4. Expliquer la différence entre Internet et le Web.
5. Définir la structure d’une URL : protocole, nom de domaine, chemin d’accès.
6. Connaître la composition d’une URL et son rôle dans la navigation.
7. Maîtriser la syntaxe et la fonction des balises HTML.
8. Comprendre la sémantique HTML et l’importance de choisir les bonnes balises.
9. Savoir ce qu’est le couple HTML+CSS et leur complémentarité.
10. Connaître les propriétés principales du CSS pour la mise en page.
11. Être capable d’identifier et d’utiliser un sélecteur CSS (id, classe).
12. Savoir exploiter une page HTML-CSS pour créer une mise en page cohérente.
13. Récapituler les principes fondamentaux du Web : hypertexte, navigation, structure, standardisation.
14. Connaître la différence entre le protocole HTTP et HTTPS.
15. Savoir comment une requête HTTP est envoyée et traitée par le serveur.
16. Maîtriser la hiérarchie dans la structure URL pour une navigation efficace.