Les origines du Web

Découvrez l’histoire fascinante d’Internet, du World Wide Web et des technologies qui ont révolutionné notre façon de communiquer et de partager l’information.

  • 1989

    Invention du WWW

  • 1993

    Premier navigateur grand public

  • 6 milliards

    d’utilisateurs aujourd’hui

Chronologie des dates clés

De la création d’ARPANET à l’explosion du web moderne, retracez les moments décisifs qui ont façonné Internet tel que nous le connaissons aujourd’hui.

  1. 1969

    Création d’ARPANET

    Le premier réseau de communication entre ordinateurs, ancêtre d’Internet, est créé par l’agence américaine ARPA, qui deviendra la DARPA en 1972.

  2. 1989

    Invention du World Wide Web

    Tim Berners-Lee, au CERN, invente le World Wide Web avec les concepts d’URL, HTTP et HTML. Une révolution commence !

  3. 1990

    Premier site web

    info.cern.ch devient le premier site web au monde. Il explique ce qu’est le World Wide Web et comment l’utiliser.

  4. 1993

    Navigateur Mosaic

    Premier navigateur graphique populaire, Mosaic rend le web accessible au grand public et popularise l’usage d’Internet.

  5. 1994

    Création du W3C

    Tim Berners-Lee fonde le World Wide Web Consortium pour standardiser les technologies web et assurer leur évolution.

  6. 1995

    Naissance de JavaScript

    Brendan Eich crée JavaScript chez Netscape en dix jours. Le web cesse d’être une simple bibliothèque de documents pour devenir interactif.

  7. 1996

    CSS1 devient recommandation du W3C

    Proposées dès 1994 par Håkon Wium Lie, les feuilles de style en cascade sont spécifiées avec Bert Bos. Elles séparent le contenu de la présentation.

Pourquoi HTML et CSS ont-ils été créés ?

HTML — HyperText Markup Language

Le problème initial

En 1989, les chercheurs du CERN avaient besoin de partager facilement des documents scientifiques entre des ordinateurs et des systèmes différents.

La solution de Tim Berners-Lee

Créer un langage simple permettant de structurer un document et de le relier à d’autres par des liens hypertextes, formant ainsi une toile d’informations.

Les objectifs

  • Structurer le contenu (titres, paragraphes, listes)
  • Créer des liens entre les documents
  • Rester lisible par un humain
  • Fonctionner sur tous les systèmes

Ce choix du texte brut explique sa longévité : un fichier HTML se lit sans logiciel particulier, se compare d’une version à l’autre et ne dépend d’aucune machine.

CSS — Cascading Style Sheets

Le problème du HTML seul

Les premières pages web étaient très sommaires visuellement. HTML gérait à la fois le contenu et la présentation, ce qui produisait un code enchevêtré.

L’innovation de CSS

Proposées en 1994 et spécifiées en 1996, les feuilles de style séparent le contenu de sa présentation. Le design web s’en trouve transformé.

Les avantages

  • Séparation du contenu et de la présentation
  • Réutilisation des styles
  • Maintenance simplifiée
  • Mises en page plus élaborées

Leur place aujourd’hui dans le développement

Plus de trente-cinq ans après leur création, HTML et CSS demeurent les fondements du web moderne, et continuent d’évoluer pour répondre aux nouveaux usages.

Une page écrite en 1995 s’affiche encore dans un navigateur d’aujourd’hui. Cette rétrocompatibilité est un principe fondateur du web, qu’aucun autre écosystème technique n’a tenu aussi longtemps.

Quelques chiffres

  • 217 M

    Sites web actifs

  • 100 %

    Des sites reposent sur HTML

  • 6,1 milliards

    Utilisateurs d’Internet

  • 37 ans

    D’évolution continue depuis 1989

Chiffres relevés en août 2026 — sites actifs : Netcraft, juin 2026 ; utilisateurs d’Internet : DataReportal, avril 2026.

Exemples commentés

Découvrez comment HTML et CSS fonctionnent ensemble, à travers des exemples pratiques commentés ligne à ligne.

Exemple 1 : structure HTML de base

html 

<!-- Déclaration du type de document HTML5 -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- Métadonnées de la page -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Première Page Web</title>
</head>

<body>
    <!-- En-tête de la page -->
    <header>
        <h1>Bienvenue sur mon site</h1>
        <nav>
            <ul>
                <li><a href="#accueil">Accueil</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Contenu principal -->
    <main>
        <article>
            <h2>Mon Premier Article</h2>
            <p>Ceci est un paragraphe qui explique les bases du HTML.</p>
            <p>HTML structure le contenu, mais ne le style pas !</p>
        </article>
    </main>
    
    <!-- Pied de page -->
    <footer>
        <p>© 2025 Mon Site Web</p>
    </footer>
</body>
</html>
Repérez la hiérarchie : head porte les métadonnées, body le contenu visible.

Points clés de cet exemple

  • Structure sémantique : header, nav, main, article, footer
  • Hiérarchie des titres : h1 pour le titre principal, h2 pour les sous-titres
  • Navigation : liens internes avec des ancres (#accueil, #contact)
  • Métadonnées : charset et viewport pour l’affichage adaptatif

Exemple 2 : stylisation avec CSS

css 

/* Réinitialisation et styles globaux */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Style du corps de la page */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* En-tête de la page */
header {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Titre principal */
h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Navigation */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

nav a {
    text-decoration: none;
    color: #667eea;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    transition: all 0.3s ease;
}

/* Effet au survol des liens */
nav a:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
}

/* Contenu principal */
main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* Responsive Design - Adaptation mobile */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }
    
    nav ul {
        flex-direction: column;
        gap: 1rem;
    }
    
    main {
        margin: 1rem;
        padding: 1rem;
    }
}
Observez comment chaque règle vise un élément HTML précis par son sélecteur.

Techniques CSS modernes utilisées

  • Flexbox : pour centrer et aligner les éléments de navigation
  • Dégradés : arrière-plan en fondu de couleurs
  • Transitions : animations fluides au survol
  • Box-shadow : ombres donnant de la profondeur
  • Media queries : mise en page adaptée au mobile
  • Transform : effet de translation au survol

Exemple 3 : CSS Grid et animations

css 

/* Layout moderne avec CSS Grid */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

/* Cartes avec effets modernes */
.card {
    background: linear-gradient(145deg, #f0f0f0, #cacaca);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 20px 20px 60px #bebebe, 
                -20px -20px 60px #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Effet au survol */
.card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 25px 25px 80px #bebebe, 
                -25px -25px 80px #ffffff;
}

/* Animation CSS avec keyframes */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animated-element {
    animation: pulse 2s infinite ease-in-out;
}

/* Variables CSS pour une maintenance facile */
:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --text-color: #333;
    --border-radius: 15px;
    --shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Utilisation des variables */
.modern-button {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}
Comparez la concision de CSS Grid avec les mises en page à base de flottants qu’il a remplacées.

Fonctionnalités CSS avancées

  • CSS Grid : mise en page en grille, adaptative sans effort
  • Variables CSS : réutilisation de valeurs (couleurs, tailles)
  • Keyframes : animations personnalisées
  • Neumorphisme : effet d’ombre en relief
  • Transform 3D : effets de profondeur et de mouvement
  • Pseudo-classes : hover et focus pour l’interactivité

Prêt à commencer votre apprentissage ?

Maintenant que vous connaissez l’histoire et l’importance de HTML et CSS, il est temps de mettre les mains dans le code !

Apprendre HTML Styliser avec CSS