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.
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.
Le premier réseau de communication entre ordinateurs, ancêtre d'Internet, est créé par l'agence DARPA du département américain de la Défense.
Tim Berners-Lee, au CERN, invente le World Wide Web avec les concepts d'URL, HTTP et HTML. Une révolution commence !
info.cern.ch devient le premier site web au monde. Il explique ce qu'est le World Wide Web et comment l'utiliser.
Premier navigateur graphique populaire, Mosaic rend le web accessible au grand public et popularise l'usage d'Internet.
Tim Berners-Lee fonde le World Wide Web Consortium pour standardiser les technologies web et assurer leur évolution.
Les Cascading Style Sheets sont introduites pour séparer le contenu de la présentation, révolutionnant le design web.
En 1989, les chercheurs du CERN avaient besoin de partager facilement des documents scientifiques entre différents ordinateurs et systèmes.
Créer un langage simple qui permettrait de structurer des documents avec des liens hypertextes vers d'autres documents, créant ainsi un "web" d'informations.
Les premières pages web étaient très basiques visuellement. HTML gérait à la fois le contenu ET la présentation, créant du code complexe.
Håkon Wium Lie et Bert Bos créent CSS pour séparer le contenu (HTML) de la présentation (CSS), révolutionnant le design web.
Plus de 30 ans après leur création, HTML et CSS restent les fondements incontournables du web moderne, évoluant constamment pour répondre aux nouveaux défis.
Tous les sites web utilisent HTML et CSS, des blogs personnels aux applications complexes comme Facebook ou Google.
HTML5 et CSS3 apportent des fonctionnalités modernes : animations, responsive design, API multimédias, etc.
Frameworks CSS (Bootstrap, Tailwind), préprocesseurs (Sass), outils de build modernes s'appuient sur ces technologies.
Découvrez comment HTML et CSS fonctionnent ensemble à travers des exemples pratiques et commentés pour comprendre leur rôle respectif.
<!-- 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>/* 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;
}
}/* 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;
}Maintenant que vous connaissez l'histoire et l'importance de HTML et CSS, il est temps de mettre les mains dans le code !