Cours Complet Web - HTML/CSS/JavaScript

Chapitre 1: Les Fondamentaux du HTML

Comprendre la structure d'une page web et les balises essentielles

📚 Introduction aux balises sémantiques HTML5

Les balises sémantiques HTML5 permettent de donner du sens à la structure d’une page web. Elles remplacent les anciennes balises génériques comme <div> et <span> en offrant des éléments plus explicites. Cela aide les navigateurs, les moteurs de recherche et les technologies d’assistance à mieux comprendre et analyser le contenu.

Pourquoi utiliser des balises sémantiques ?

Pour améliorer l’accessibilité (lecteurs d’écran, aides techniques)
Pour optimiser le référencement naturel (SEO)
Pour faciliter la maintenance et la lecture du code

🏛️ Le "Saint-Graal" : header, main, footer

Ces trois balises sont la base de la structure d’une page web moderne :

<header> : Contient l’en-tête de la page, avec souvent le logo, le titre, et la navigation principale.
<main> : Contient le contenu principal unique de la page (doit être présent une seule fois).
<footer> : Contient le pied de page avec les informations de contact, droits d’auteur, liens légaux, etc.

Cette organisation forme la "colonne vertébrale" de la page.

<body>
    <header>
        <h1>Titre du site</h1>
        <nav>...navigation...</nav>
    </header>

    <main>
        <article>
            <h2>Article principal</h2>
            <p>Texte important ici.</p>
        </article>
    </main>

    <footer>
        <p>© 2025 Mon site web</p>
    </footer>
</body>

🧱 Les balises sémantiques HTML5 principales

Voici un tour d’horizon des balises les plus importantes, avec leur rôle expliqué simplement :

<article> : Contenu autonome pouvant être distribué ou réutilisé (ex. un article de blog, une news).
<section> : Regroupe une partie thématique d’une page, par exemple une section d’un article ou une partie distincte.
<nav> : Contient des liens de navigation vers d’autres pages ou parties de la page.
<aside> : Contenu complémentaire ou latéral, souvent une barre d’informations, une publicité, ou un encart lié au contenu principal.
<figure> : Conteneur pour une image ou un média, accompagné d’une légende (<figcaption>).
<figcaption> : Légende d’un contenu dans une balise <figure>.
<details> : Bloc repliable, souvent utilisé pour afficher/cacher du contenu.
<summary> : Titre visible d’un bloc <details>, cliquable pour déplier/replier.
<mark> : Pour mettre en surbrillance un texte important.
<time> : Pour marquer une date ou une heure.
<header> : En-tête pour une page ou une section (répétable dans différentes sections).
<footer> : Pied de page pour une page ou une section (répétable).

<article>
    <header>
        <h2>Titre de l’article</h2>
        <time datetime="2025-08-09">9 août 2025</time>
    </header>
    <p>Contenu principal de l’article...</p>

    <figure>
        <img src="photo.jpg" alt="Une belle photo">
        <figcaption>Une photo prise en été</figcaption>
    </figure>

    <footer>
        <p>Auteur : Jean Dupont</p>
    </footer>
</article>

💡 Astuce :

Utilise <section> pour regrouper plusieurs articles ou parties thématiques. Pour un contenu indépendant, préfère <article>.

⚙️ Exemple complet : le "Saint-Graal" amélioré avec sémantique complète

Voici un exemple complet avec toutes les balises sémantiques principales pour une page simple :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exemple page sémantique</title>
</head>
<body>

    <header>
        <h1>Mon site web</h1>
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Derniers articles</h2>

            <article>
                <header>
                    <h3>Titre de l’article 1</h3>
                    <time datetime="2025-08-09">9 août 2025</time>
                </header>
                <p>Contenu principal de l’article 1.</p>
                <footer>Auteur : Jean Dupont</footer>
            </article>

            <article>
                <header>
                    <h3>Titre de l’article 2</h3>
                    <time datetime="2025-08-08">8 août 2025</time>
                </header>
                <p>Contenu principal de l’article 2.</p>
                <footer>Auteur : Marie Curie</footer>
            </article>
        </section>

        <aside>
            <h2>À propos</h2>
            <p>Cette section contient des informations complémentaires, des liens utiles ou des publicités.</p>
        </aside>
    </main>

    <footer>
        <p>© 2025 Mon site web - Tous droits réservés</p>
        <nav>
            <ul>
                <li><a href="#">Mentions légales</a></li>
                <li><a href="#">Politique de confidentialité</a></li>
            </ul>
        </nav>
    </footer>

</body>
</html>

🧩 Autres balises utiles HTML5

Voici quelques autres balises intéressantes pour structurer ou enrichir vos pages :

<details> : Crée un bloc repliable.
<summary> : Titre cliquable du bloc <details>.
<figure> et <figcaption> : Groupe média + légende.
<mark> : Met en surbrillance du texte important.
<time> : Marque une date ou une heure.
<address> : Contient des informations de contact ou adresse.
<progress> et <meter> : Affichent une progression ou une valeur mesurée.
<main> : Unique par page, contenu principal.

<details>
    <summary>Voir plus d’infos</summary>
    <p>Texte caché qui apparaît au clic.</p>
</details>

<figure>
    <img src="image.jpg" alt="Exemple">
    <figcaption>Légende de l’image</figcaption>
</figure>

<mark>Texte important mis en surbrillance</mark>

<time datetime="2025-08-09">9 août 2025</time>

🛠️ Playground - Créez votre première page

Code HTML

<h1>Mon Site Web</h1>
<h2>À propos de moi</h2>

<p>Bonjour ! Je suis <strong>votre nom</strong> et je commence à apprendre le développement web.</p>

<h3>Mes hobbies</h3>
<ul>
    <li>Programmer</li>
    <li>Lire des livres</li>
    <li>Jouer aux jeux vidéo</li>
</ul>

<h3>Mes liens préférés</h3>
<p>J'aime visiter <a href="#">ce site web</a> régulièrement.</p>

<blockquote>
    "L'apprentissage ne s'arrête jamais !"
</blockquote>

<hr>
<p><em>Dernière mise à jour : aujourd'hui</em></p>

Résultat

🎯 Quiz HTML

Quelle balise HTML est utilisée pour le titre principal d'une page ?

<title>

<h1>

<main>

🎯 Défi pratique :

Modifiez le code ci-dessus pour créer :

Une page "À propos" complète avec votre vraie information
Au moins 3 niveaux de titres différents
Une liste ordonnée ET une liste non ordonnée
Du texte formaté (gras, italique, surligné)
Une citation inspirante

🚀 Challenge avancé :

Créez une structure HTML complète pour un CV en ligne avec sections : contact, expérience, éducation, compétences.

Chapitre 2: Introduction au CSS

Styliser vos pages web avec les couleurs, unités et le box model

🎨 Qu'est-ce que le CSS ?

CSS (Cascading Style Sheets) permet de styliser vos pages HTML. Il sépare le contenu (HTML) de la présentation (CSS).

/* Syntaxe CSS de base */
selecteur {
    propriété: valeur;
    autre-propriété: autre-valeur;
}

/* Exemples */
h1 {
    color: blue;
    font-size: 2rem;
}

p {
    color: #333333;
    line-height: 1.5;
}

💡 Méthodes d'intégration CSS :

Inline : style="color: red"
Interne : <style>...</style>
Externe : <link rel="stylesheet" href="style.css">

🌈 Les couleurs en CSS

/* Différents formats de couleurs */
color: red;                    /* Nom de couleur */
color: #ff0000;               /* Hexadécimal */
color: rgb(255, 0, 0);        /* RGB */
color: rgba(255, 0, 0, 0.5);  /* RGBA avec transparence */
color: hsl(0, 100%, 50%);     /* HSL */

Rouge

#e74c3c

Bleu

#3498db

Vert

#27ae60

📏 Les unités CSS

Unités Absolues

px : Pixels, unité fixe
pt : Points, pour l'impression
cm, mm, in : Unités physiques

Unités Relatives

rem : Relatif à la taille de police racine
em : Relatif à la taille de police parent
% : Pourcentage du parent
vw, vh : Viewport width/height
vmin, vmax : Plus petite/grande dimension viewport

⚠️ Conseils d'utilisation :

px : Bordures, ombres, détails précis
rem : Tailles de police, espacement général
% : Largeurs responsives
vw/vh : Éléments plein écran

📦 Le Box Model CSS

Le Box Model définit comment CSS calcule l'espace total occupé par un élément :

MARGIN

BORDER

PADDING

CONTENT

.ma-boite {
    width: 200px;           /* Largeur du contenu */
    padding: 15px;          /* Espace interne */
    border: 5px solid red;  /* Bordure */
    margin: 20px;           /* Espace externe */
}

🎨 Playground Couleurs Interactif

Couleur du texte

Couleur de fond

Couleur de bordure

Opacité 100%

Testez vos couleurs ici !

                                .element {
                                color: #2c3e50;
                                background-color: #ecf0f1;
                                border: 3px solid #3498db;
                                opacity: 1;
                                }
                            

📦 Playground Box Model Interactif

Margin 20px

Border 5px

Padding 15px

Width 200px

CONTENU

Taille totale: 250px × 150px

🎮 Playground CSS Libre

HTML + CSS

<div class="carte">
    <h2>Ma Belle Carte</h2>
    <p>Cette carte utilise du CSS pour être stylée.</p>
    <button class="btn-carte">Cliquez-moi</button>
</div>

<style>
.carte {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    text-align: center;
    max-width: 300px;
    margin: 2rem auto;
    transition: transform 0.3s ease;
}

.carte:hover {
    transform: translateY(-5px) scale(1.02);
}

.carte h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.carte p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.btn-carte {
    background: white;
    color: #667eea;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-carte:hover {
    background: #f8f9fa;
    transform: scale(1.05);
}
</style>

Résultat

🎯 Défis CSS :

Créez une carte avec un dégradé de fond
Ajoutez une ombre portée et des bordures arrondies
Créez un effet de survol (hover)
Utilisez au moins 3 unités différentes (px, rem, %)