HTML et CSS – Deux langages, une grande aventure !
par Daniel Alouidor
Aujourd’hui, tu vas faire connaissance avec deux stars du web : HTML et CSS. En fait, ce sont comme deux super-héros qui bossent ensemble pour construire et décorer tous les sites que tu aimes.
HTML, le constructeur musclé
Imagine que tu construis une maison en Lego. Tu empiles les briques pour créer les murs, les fenêtres, la porte. Tu ajoutes une chambre, une cuisine, une salle de bain…
Eh bien HTML (HyperText Markup Language), c’est exactement ça. C’est le langage qui construit la structure d’une page web. Il te permet de dire : « Ici, je veux un titre ». « Là, un paragraphe ». « Ici, une image de chat qui danse.
Le HTML représente donc les briques du site.
CSS, le styliste à paillettes
Bon. Maintenant que ta maison est construite, elle est un peu… grise. Pas très funky, non ? Alors, tu veux : peindre les murs en bleu, mettre une belle font pour les titres, centrer les textes, arrondir les coins, ajouter une ombre, un dégradé… C’est là que CSS entre en scène ! CSS = la déco du site.
CSS (Cascading Style Sheets), c’est le langage du style. Il ne construit pas, mais il rend ton site magnifique, stylé, mignon, foufou, artistique — à ton image !
Une analogie rigolote : ton site est une personne !
Voici une façon marrante de retenir :
| Le site, c’est comme… | HTML | CSS |
|---|---|---|
| Le corps humain | Les os, le squelette | Les vêtements, le maquillage, la coiffure |
| Une pizza | La pâte, la forme | Les ingrédients : sauce, fromage, olives |
| Un concert | La scène, les instruments | Les lumières, les costumes, les effets spéciaux |
Donc HTML + CSS = un site complet ET joli !
Exemple concret : une page sans et avec style
Voici une page en HTML seulement :
<!DOCTYPE html>
<html>
<head>
<title>Ma page sans style</title>
</head>
<body>
<h1>Bienvenue sur ma page !</h1>
<p>Elle est super cool… mais un peu moche ????</p>
</body>
</html>
Résultat ? Du texte noir sur fond blanc. Rien de fou.
Maintenant, regarde ce qu’on peut faire en ajoutant du CSS :
<!DOCTYPE html>
<html>
<head>
<title>Ma page stylée</title>
<style>
body {
background-color: lavender;
font-family: Comic Sans MS, sans-serif;
color: darkblue;
text-align: center;
}
h1 {
font-size: 3em;
text-shadow: 2px 2px #ccc;
}
</style>
</head>
<body>
<h1>Bienvenue dans mon monde !</h1>
<p>Ma page a mis sa plus belle robe ????</p>
</body>
</html>
Résultat ? Une page plus adorable, un peu colorée et funky ! Et ce n’est que le début.
Ce qu’il faut retenir dans tout ce charabia, c’est que le HTML dit ce qu’il y a sur la page et le CSS dit à quoi ça ressemble. Tu as donc besoin des deux pour faire un site qui marche ET qui donne envie d’y rester !
Mini-défi fun :
Crée un fichier dans Bloc-Notes : index.html. Copie ce code et colle le dans le fichier :
<!DOCTYPE html>
<html>
<head>
<title>Mon site funky</title>
<style>
body {
background-color: #ffebcd;
font-family: Arial, sans-serif;
color: #333;
padding: 20px;
}
</style>
</head>
<body>
<h1>???? Bienvenue sur le site officiel des grenouilles stars !</h1>
<p>Ici, on parle mode, sauts artistiques, et chants nocturnes ! Ribbit !</p>
</body>
</html>
Sauvegarde. Ouvre. Admire.
Et, bam! Tu viens de faire un site web stylé avec HTML + CSS.
???? Prochain épisode…
Dans l’article 3, on installe nos outils de code : tu vas te sentir comme un vrai hacker (mais, gentil). Patience, Patience. Prochainement, tu vas ouvrir ton tout premier éditeur de code, et créer ton propre projet web !
En attendant, révise les deux premiers articles et répète les exercices.
Daniel Alouidor
Consulter les autres leçons
Leçon 1 : Bonne nouvelle : je vais t’apprendre à créer ton site web … gratis!
Leçon 3 : Prépare ton atelier de super codeur
Leçon 4 : Les balises HTML les plus cools pour construire ta page web
Leçon 5 : Des listes et des liens – La base d’un vrai mini-site web !