Introduction au Développement HTML et CSS
Introduction au Développement HTML et CSS

Qu’est-ce qu’un site web ? Comment fonctionne Internet ?

Bienvenue dans ce cours d'introduction au développement web ! Avant de plonger les mains dans le code HTML et CSS, il est crucial de comprendre les fondations : qu'est-ce qu'un site web, et comment la magie d'Internet opère-t-elle pour nous permettre d'y accéder ?

Imaginez que vous êtes sur le point de construire une maison. Avant de poser la première brique, il est essentiel de comprendre à quoi servira cette maison (un site web) et comment elle sera reliée aux services extérieurs (l'Internet : eau, électricité, route). Cette leçon vous donnera les bases indispensables pour appréhender le rôle de chaque composant que vous allez apprendre à manipuler.

I. Qu'est-ce qu'un Site Web ?

Un site web est une collection de pages web et de contenus multimédias (images, vidéos, sons) connexes, généralement accessibles via une adresse unique sur Internet. Pensez à un livre : un site web est le livre entier, et chaque page du livre est une "page web".

Ces "livres" numériques sont stockés sur des ordinateurs spéciaux appelés serveurs et peuvent être consultés par n'importe qui dans le monde grâce à un logiciel appelé navigateur web (comme Chrome, Firefox, Safari ou Edge).

Les Composants Essentiels d'une Page Web

Une page web n'est pas un bloc monolithique. Elle est construite à partir de plusieurs couches de technologies qui travaillent en synergie :

1. Le Contenu et la Structure (HTML)

Le HTML (HyperText Markup Language) est la fondation de toute page web. C'est le langage qui donne sa structure et son sens au contenu. Il définit les titres, les paragraphes, les images, les liens, les listes, etc. Pensez-y comme au squelette de votre page.

Exemple de structure HTML très simple :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Première Page Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Bienvenue sur mon site !</h1>
    <p>Ceci est un paragraphe de texte. Il est structuré avec HTML.</p>
    <img src="image.jpg" alt="Description de l'image">
    <a href="https://www.google.com">Visiter Google</a>
</body>
</html>
  • Explication du code :
    • <!DOCTYPE html>: Indique au navigateur qu'il s'agit d'un document HTML5.
    • <html lang="fr">: La balise racine de tout document HTML, indiquant la langue du contenu.
    • <head>: Contient des métadonnées sur la page (non visibles directement) comme le titre de l'onglet (<title>) et le lien vers la feuille de style CSS (<link rel="stylesheet" href="style.css">).
    • <body>: Contient tout le contenu visible de la page.
    • <h1>: Un titre de niveau 1.
    • <p>: Un paragraphe de texte.
    • <img>: Une image, avec un attribut src pour la source et alt pour le texte alternatif (important pour l'accessibilité).
    • <a>: Un lien hypertexte, avec un attribut href pour l'adresse de destination.

2. L'Apparence et le Style (CSS)

Le CSS (Cascading Style Sheets) est le langage utilisé pour décorer et mettre en forme le contenu HTML. Il gère les couleurs, les polices, les espacements, les agencements (mise en page), et bien plus encore. C'est le maquillage et les vêtements de votre page.

Exemple de feuille de style CSS (pour le HTML ci-dessus) :

/* style.css */
body {
    font-family: Arial, sans-serif; /* Définit la police de caractère */
    margin: 20px; /* Ajoute une marge autour du contenu */
    background-color: #f4f4f4; /* Définit la couleur de fond */
}

h1 {
    color: #333; /* Définit la couleur du titre */
    text-align: center; /* Centre le texte du titre */
}

p {
    line-height: 1.6; /* Espacement des lignes */
    color: #555; /* Couleur du texte du paragraphe */
}

a {
    color: #007bff; /* Couleur des liens */
    text-decoration: none; /* Supprime le soulignement des liens */
}

a:hover {
    text-decoration: underline; /* Souligne les liens au survol */
}
  • Explication du code :
    • Chaque bloc commence par un sélecteur (ex: body, h1, p, a), qui cible un ou plusieurs éléments HTML.
    • À l'intérieur des accolades {}, on trouve des propriétés (ex: color, font-family) suivies de deux-points : et d'une valeur (ex: #333, Arial, sans-serif), terminées par un point-virgule ;.
    • Ces règles CSS dictent comment les éléments HTML correspondants doivent être affichés par le navigateur.

3. L'Interactivité (JavaScript)

Le JavaScript est un langage de programmation qui ajoute de la dynamique et de l'interactivité aux pages web. Il permet de faire bouger des éléments, de valider des formulaires, de charger du contenu sans recharger la page, de créer des animations complexes, et bien plus encore. C'est le cerveau qui rend la page réactive. Nous explorerons JavaScript plus tard dans votre parcours de développement.

II. Comment fonctionne Internet ?

Internet est un gigantesque réseau mondial d'ordinateurs interconnectés. C'est l'infrastructure qui permet à toutes les données, y compris les sites web, de voyager d'un point à un autre. Pensez à un réseau routier mondial où les données sont des véhicules.

Pour comprendre comment une page web arrive sur votre écran, il faut saisir quelques concepts clés :

1. Les Clients et les Serveurs

Le fonctionnement d'Internet repose sur une architecture client-serveur :

  • Un Client : C'est généralement votre ordinateur, votre smartphone ou votre tablette. Il demande des informations (un site web) via un navigateur.
  • Un Serveur : C'est un ordinateur puissant, optimisé pour stocker des données (comme les fichiers d'un site web) et les fournir aux clients qui les demandent. Lorsque vous visitez un site, votre navigateur client envoie une requête au serveur qui héberge ce site.

2. Les Adresses IP (Internet Protocol)

Chaque appareil connecté à Internet (clients et serveurs) possède une adresse numérique unique appelée Adresse IP. C'est comme le numéro de téléphone ou l'adresse postale d'un appareil sur le réseau.

  • IPv4 : Les adresses IP que vous connaissez le plus souvent sont au format xxx.xxx.xxx.xxx (par exemple, 172.217.160.142 pour Google). Il y a environ 4,3 milliards d'adresses IPv4 possibles.
  • IPv6 : Avec l'explosion des appareils connectés, nous manquons d'adresses IPv4. L'IPv6 est la nouvelle génération d'adresses IP, beaucoup plus longue et capable de supporter un nombre astronomique d'appareils (par exemple, 2001:0db8:85a3:0000:0000:8a2e:0370:7334).

3. Les Noms de Domaine (DNS - Domain Name System)

Imaginez devoir retenir l'adresse IP de chaque site web que vous voulez visiter ! Impossible. C'est là qu'interviennent les Noms de Domaine. Un nom de domaine est une adresse textuelle facile à retenir (par exemple, google.com, wikipedia.org, mon-super-site.fr). Le DNS (Domain Name System) est un système qui agit comme un annuaire téléphonique géant d'Internet. Lorsque vous tapez google.com dans votre navigateur, le DNS traduit ce nom de domaine en l'adresse IP correspondante (ex: 172.217.160.142), permettant à votre navigateur de trouver le bon serveur.

4. Le Protocole HTTP/HTTPS (Hypertext Transfer Protocol)

Le HTTP est le "langage" standard que les navigateurs (clients) et les serveurs web utilisent pour communiquer et échanger des données (comme les pages web). C'est un ensemble de règles qui régissent la manière dont les informations sont formatées et transmises.

Lorsque vous voyez HTTPS (le "S" pour "Secure"), cela signifie que la communication entre votre navigateur et le serveur est chiffrée et donc sécurisée. C'est essentiel pour les sites qui gèrent des informations sensibles (banque, achats en ligne, données personnelles).

5. Les Navigateurs Web

Le navigateur web est le logiciel que vous utilisez sur votre appareil pour accéder à Internet. Chrome, Firefox, Edge, Safari... Leur rôle est de :

  • Envoyer vos requêtes HTTP/HTTPS aux serveurs.
  • Recevoir les réponses des serveurs (les fichiers HTML, CSS, JavaScript, images, etc.).
  • Interpréter et rendre (afficher) ces fichiers pour reconstituer la page web sur votre écran.

6. Les FAI (Fournisseurs d'Accès à Internet)

Les FAI (comme Orange, Free, SFR, Bouygues Télécom en France, ou Comcast, Verizon aux États-Unis) sont les entreprises qui vous fournissent l'accès physique à Internet. Ils vous connectent au "réseau des réseaux" via des câbles (fibre optique, ADSL), le Wi-Fi ou des réseaux mobiles (4G/5G).

III. Le Cycle de Vie d'une Requête Web : Du Navigateur au Serveur et Retour

Mettons tout cela en pratique avec un scénario simple : vous ouvrez votre navigateur et tapez www.example.com dans la barre d'adresse.

  1. Vous entrez l'URL : Votre navigateur (client) reçoit l'instruction d'aller sur www.example.com.
  2. Résolution DNS :
    • Le navigateur ne connaît pas l'adresse IP de www.example.com.
    • Il envoie une requête à un serveur DNS (souvent celui de votre FAI).
    • Le serveur DNS recherche l'adresse IP correspondante (par exemple, 192.0.2.1).
    • Le serveur DNS renvoie cette IP à votre navigateur.
  3. Établissement de la Connexion :
    • Votre navigateur dispose maintenant de l'adresse IP du serveur www.example.com.
    • Il établit une connexion TCP/IP (un canal de communication fiable) avec ce serveur, généralement sur le port 80 pour HTTP ou 443 pour HTTPS. Si c'est HTTPS, une étape supplémentaire de "handshake" SSL/TLS a lieu pour sécuriser la connexion.
  4. Requête HTTP :
    • Une fois la connexion établie, votre navigateur envoie une requête HTTP au serveur. Cette requête inclut des informations comme :
      • La méthode de la requête (souvent GET pour demander une page).
      • Le chemin du fichier demandé (par exemple, /index.html pour la page d'accueil).
      • Des informations sur votre navigateur, les langues préférées, etc.
  5. Traitement par le Serveur :
    • Le serveur web reçoit la requête.
    • Il localise le fichier demandé (index.html, style.css, image.jpg, etc.) sur son disque dur.
    • Il prépare une réponse HTTP.
  6. Réponse HTTP du Serveur :
    • Le serveur renvoie la réponse HTTP à votre navigateur. Cette réponse contient :
      • Un code de statut (ex: 200 OK si tout s'est bien passé, 404 Not Found si la page n'existe pas).
      • Des en-têtes (informations sur le contenu, comme son type, sa taille, etc.).
      • Le corps de la réponse : le contenu du fichier demandé (le code HTML de la page, les données d'une image, le code CSS, etc.).
  7. Rendu par le Navigateur :
    • Votre navigateur reçoit la réponse.
    • Il commence à parser (lire et interpréter) le code HTML.
    • Dès qu'il rencontre des références à d'autres ressources (comme les feuilles de style CSS avec <link rel="stylesheet" href="style.css"> ou les images avec <img src="image.jpg">), il envoie de nouvelles requêtes HTTP au serveur pour les obtenir (recommençant les étapes 3 à 6 pour chaque ressource).
    • Une fois toutes les ressources (HTML, CSS, images, JavaScript) téléchargées et interprétées, le navigateur les combine pour afficher la page web finale sur votre écran.

Conclusion

Vous comprenez maintenant qu'un site web est bien plus qu'une simple image sur votre écran. C'est un ensemble structuré de fichiers (HTML, CSS, JavaScript, images...) hébergés sur un serveur, rendus accessibles grâce au gigantesque réseau Internet. Votre navigateur agit comme un interprète et un visualiseur, tandis que le DNS vous aide à trouver les bonnes adresses et HTTP/HTTPS est le langage de communication.

Cette compréhension fondamentale est votre premier pas crucial dans le monde du développement web. Les prochains modules vous plongeront au cœur du HTML pour construire la structure de vos pages, puis du CSS pour leur donner vie et style. Vous savez maintenant ce que vous allez construire et comment cela s'intègre dans le grand écosystème du web !