Il crée des titres, des paragraphes, des listes, des liens, des images
Il dit : "Ceci est un titre", "Ceci est un paragraphe", "Ceci est un lien"

📐 Modélisation d'une page web :

P a g e _ w e b = { H T M L , C S S , J a v a S c r i p t }

Une page web est un ensemble de technologies qui se complètent.

2. Qu'est-ce que le CSS ?

Le CSS (Cascading Style Sheets) est le langage de présentation d'une page web. Il sert à définir l'apparence visuelle du contenu.

💡 Analogies :

CSS = la peinture, la décoration intérieure de la maison
CSS = les vêtements, la coiffure du corps humain

Ce que le CSS fait :

Il change les couleurs, les polices, les tailles, les marges
Il dit : "Ce titre doit être en bleu", "Ce paragraphe doit être en gras"

📐 Relation de dépendance :

R é s u l t a t _ v i s u e l = C S S ⁡ ( H T M L )

Le CSS s'applique sur le HTML pour produire le résultat visuel.

3. Comment le navigateur interprète votre code

Le navigateur est le logiciel qui lit votre code HTML et CSS pour afficher le résultat visuel à l'écran. Si votre code CSS dit "Les titres sont en rouge", le navigateur affichera les titres en rouge.

C'est un programme extrêmement complexe qui donne vie à vos pages. Le processus suit plusieurs étapes :

Parsing : Le navigateur lit et analyse le code HTML et CSS.
Construction du DOM : Le HTML est transformé en arbre de nœuds (DOM).
Construction du CSSOM : Le CSS est transformé en arbre de styles.
Rendu : Les deux arbres sont fusionnés pour créer le rendu final.

📐 Processus de rendu d'une page :

R e n d u = D O M ⊕ C S S O M → A f f i c h a g e

Le navigateur combine le DOM (structure) et le CSSOM (styles) pour afficher la page.

4. Le projet fil rouge : Robbie Lens

Tout au long de ce cours, vous construirez un projet fil rouge : le site web d'une photographe freelance nommée Robbie Lens.

🎯 Objectif final :

Créer un site professionnel permettant à Robbie Lens de :

Se présenter
Mettre son travail en valeur avec un portfolio
Être contactée facilement en ligne

5. Outils recommandés

Visual Studio Code

Vous aurez besoin d'un éditeur de code pour écrire vos fichiers. Visual Studio Code est l'éditeur recommandé, gratuit et très complet.

Navigateur web

Un navigateur à jour (Chrome, Safari, Firefox ou Edge) vous permettra de voir en direct le résultat de votre code.

CodePen

CodePen est un "bac à sable" en ligne où vous pouvez écrire du code et voir le résultat s'afficher en temps réel. Idéal pour expérimenter !

GitHub

Le projet GitHub du cours utilise un système de branches : chaque exercice et chaque solution se trouve sur sa propre branche. Des liens directs vous seront fournis pour accéder au code.

📐 Environnement de développement :

I D E = { V S C o d e , N a v i g a t e u r , C o d e P e n , G i t H u b }

6. Plan du cours

Partie 1 : Introduction au HTML et CSS

Écrire vos premières lignes de HTML et CSS
Créer du contenu avec HTML
Décorer votre contenu avec CSS

Partie 2 : Créer des éléments de texte en HTML

Créer des titres pour structurer la page
Ajouter du texte dans des paragraphes
Renforcer et souligner le texte
Ajouter des liens et comprendre les attributs
Organiser les éléments dans des listes
Ajouter des images à votre page web

Partie 3 : Structurer une page entière

Créer la structure générale d'une page
Comprendre les éléments en bloc et en ligne
Grouper le contenu avec divs et spans
Ajouter des classes et des identifiants
Ajouter des sauts de ligne et des séparateurs

Partie 4 : Styliser avec CSS

Appliquer du CSS aux éléments
Définir les couleurs
Choisir les polices
Contrôler les tailles et espacements

7. Distinguer HTML et CSS

Critère	HTML	CSS
Rôle	Structure / Contenu	Style / Apparence
Question	"Qu'est-ce que c'est ?"	"À quoi ça ressemble ?"
Fichier	`.html`	`.css`
Syntaxe	Balises `<nom>`	Règles `sélecteur { propriété: valeur; }`

📐 Séparation des préoccupations :

P a g e _ w e b = H T M L + C S S + J S

Chaque technologie a un rôle bien défini. Cette séparation rend le code plus maintenable.

⚠️ Erreur fréquente à éviter : Ne confondez jamais les rôles. On ne peut pas "styliser" avec du HTML. Le HTML est pour la structure, le CSS pour le style. Gardez-les toujours séparés pour un code propre et maintenable.

8. Éléments HTML et attributs

8.1. La structure de base d'une page HTML

<!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>
</head>
<body>
    <h1>Bienvenue sur mon site</h1>
    <p>Ceci est mon premier paragraphe.</p>
</body>
</html>

8.2. Les éléments HTML courants

Balise	Utilité	Exemple
`<h1>` à `<h6>`	Titres hiérarchiques	`<h1>Titre principal</h1>`
`<p>`	Paragraphe de texte	`<p>Ceci est un paragraphe.</p>`
`<a>`	Lien hypertexte	`<a href="#">Cliquez</a>`
`<img>`	Image	`<img src="photo.jpg" alt="Description">`
`<ul>` / `<ol>`	Listes	`<ul><li>Item</li></ul>`
`<div>`	Conteneur (bloc)	`<div class="conteneur">...</div>`
`<span>`	Conteneur (en ligne)	`<span class="surligne">texte</span>`

8.3. Les attributs HTML

Attribut	Utilisé sur	Utilité
`href`	`<a>`	Destination du lien
`src`	`<img>`	Source de l'image
`alt`	`<img>`	Texte alternatif (accessibilité)
`class`	Toutes	Cible un groupe en CSS
`id`	Toutes	Cible un élément unique en CSS

9. Balises sémantiques

Les balises sémantiques donnent du sens à la structure de la page. Elles améliorent l'accessibilité, le SEO et la maintenabilité du code.

Balise	Signification	Utilisation
`<header>`	En-tête	Logo, titre, navigation
`<nav>`	Navigation	Menu principal
`<main>`	Contenu principal	Contenu central unique
`<section>`	Section	Regroupe un thème
`<article>`	Article	Contenu indépendant
`<aside>`	À côté	Contenu secondaire
`<footer>`	Pied de page	Mentions légales, copyright

<body>
    <header>
        <h1>Mon Site</h1>
        <nav>
            <a href="#">Accueil</a>
            <a href="#">Blog</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>Articles</h2>
            <article>
                <h3>Article 1</h3>
                <p>Contenu...</p>
            </article>
        </section>
    </main>

    <footer>
        <p>&copy; 2026</p>
    </footer>
</body>

✅ Pourquoi utiliser les balises sémantiques ?

Accessibilité : Les lecteurs d'écran comprennent mieux la structure.
SEO : Google comprend mieux le contenu et le référence mieux.
Maintenance : Le code est plus lisible pour les développeurs.

10. Distinguer les éléments en bloc des éléments en ligne

10.1. Les éléments en bloc (block elements)

Prennent toute la largeur disponible.
Provoquent un retour à la ligne.
Peuvent avoir width et height.

Exemples : <div>, <p>, <h1>, <section>, <header>.

10.2. Les éléments en ligne (inline elements)

Prennent uniquement la largeur de leur contenu.
Ne provoquent pas de retour à la ligne.
Ne peuvent pas avoir width ou height.

Exemples : <a>, <span>, <img>, <strong>.

Élément bloc	Élément en ligne
Occupe toute la largeur	Occupe seulement sa largeur
Retour à la ligne	Pas de retour à la ligne
Peut avoir `width`/`height`	Ne peut pas avoir `width`/`height`
Ex: `<div>`, `<p>`	Ex: `<span>`, `<a>`

📐 Occupation de l'espace :

L a r g e u r _ b l o c = 100 % d u _ p a r e n t L a r g e u r _ i n l i n e = c o n t e n u _ s e u l

11. Syntaxe CSS

11.1. La syntaxe de base

sélecteur {
    propriété: valeur;
}

11.2. Les sélecteurs CSS

Sélecteur	Syntaxe	Exemple
Élément	`balise`	`p { color: red; }`
Classe	`.nomClasse`	`.intro { font-weight: bold; }`
ID	`#nomId`	`#titre { font-size: 40px; }`
Universel	`*`	`* { margin: 0; }`

11.3. Où écrire le CSS ?

Feuille de style externe (✅ RECOMMANDÉ)
<link rel="stylesheet" href="style.css">
Style interne (⚠️ À utiliser avec modération)
<style> p { color: blue; } </style>
Style en ligne (❌ À ÉVITER sauf exceptions)
<p style="color: blue;">Texte</p>

📐 Règle CSS générique :

R = { S i , { ( P j , V j ) } }

Une règle CSS est composée d'un sélecteur Si et de couples (Pj,Vj).

12. Appliquer le CSS aux éléments HTML

Exemple complet : Carte de visite

<div class="carte">
    <h1 id="nom">Jean Dupont</h1>
    <p class="titre">Développeur Web</p>
    <a class="bouton" href="#">Me contacter</a>
</div>

.carte {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 30px;
    text-align: center;
    width: 300px;
}

#nom {
    color: #2c3e50;
    font-size: 24px;
}

.titre {
    color: #3498db;
    font-weight: bold;
}

.bouton {
    background: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background 0.3s;
}

.bouton:hover {
    background: #2980b9;
}

📐 CSS : du code au rendu visuel

C S S ⁡ ( H T M L ) = S t y l e _ a p p l i q u é

Le CSS s'applique au HTML pour transformer le contenu brut en design visuel.

🚀 Prochaine étape :

JavaScript
Frameworks CSS
Bootstrap
Développement web avancé

آخر تعديل: السبت، 8 أغسطس 2026، 4:15 PM