HTML5 et CSS3 🎨

Le HTML et le CSS sont les deux premiers langages que tout développeur web apprend. HTML = la structure (le squelette), CSS = le style (les vêtements) !

1. Les fondations du web 🌐

pseudo ' HTML : on décrit la STRUCTURE ' CSS : on décrit le STYLE

' Structure d'une balise HTML : <nom_balise attribut="valeur"> Contenu </nom_balise>

' Exemple : <maison couleur="bleue"> <piece nom="salon"> Un canapé confortable </piece> </maison> ``'

2. Structure HTML de base 📄


<!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</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Mon Site</h1>
        <nav>
            <a href="/">Accueil</a>
            <a href="/about">À propos</a>
        </nav>
    </header>
    <main>
        <article>
            <h2>Article 1</h2>
            <p>Contenu de l'article...</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2026 AlanAI</p>
    </footer>
</body>
</html>

💡 Les balises importantes :

<h1> à <h6> : titres (1 = plus important)

<p> : paragraphe

<a> : lien

<img> : image

<div> : bloc générique

<span> : texte inline

3. CSS : sélecteurs et propriétés 🎨

Exécution pas à pas
pseudo
1/55
▶️' Syntaxe CSS :
' Syntaxe CSS :Le programme exécute cette action, puis passe à la suivante.
Le programme exécute cette instruction, puis passe à la suivante.

4. Box Model 📦

Chaque élément est une boîte :

Exécution pas à pas
pseudo
1/46
▶️' Du plus loin au plus proche du contenu :
' Du plus loin au plus proche du contenu :Le programme exécute cette action, puis passe à la suivante.
Le programme exécute cette instruction, puis passe à la suivante.

Exercices pour toi 🎯

Crée ta première page : un fichier HTML avec un titre, un paragraphe, une image et un lien
Ajoute du style : change la couleur de fond, la police, et ajoute des marges
Box Model : crée une carte (.card) avec padding, border, margin et observe les différences
Responsive : fais en sorte que ta page ait 1 colonne sur mobile et 3 sur desktop

Exécution pas à pas

0/6

⚡ Simulateur — HTML5 et CSS3

Étape 1/8

📝 Pseudo-code

1<!DOCTYPE html>

2<html lang='fr'>

3 <head>

4 <title>Ma page</title>

5 <link rel='stylesheet' href='style.css'>

6 </head>

7 <body>

8 <div class="card"> # ⬅ voir la carte

9 <h1>Titre principal</h1> # ⬅ voir les styles

10 <p>Ceci est un paragraphe.</p> # ⬅ voir le box model

11 <a href='/'>Lien</a>

12 </div>

13 <footer>

15 </footer>

16 </body>

17</html>

19/* CSS */

20.card { background: white; padding: 20px; border-radius: 8px; }

21h1 { color: blue; font-size: 24px; }

22p { padding: 10px; margin: 5px 0; }

📄 Arbre DOM + Styles

🌳 Arbre DOM

├─ <html>...

├─ <head>...

└─ <title>

├─ <body>...

🎨 Styles CSS appliqués

Cliquez sur une ligne HTML pour voir les styles

💡 Concepts clés

HTML = structure de la page
CSS = style et mise en page
DOM = arbre des éléments HTML
Box Model = margin → border → padding → content

DOCTYPE : indique au navigateur qu'il s'agit d'un document HTML5.