HTML
pour Débutants

Apprenez à créer vos premières pages web avec HTML. Du concept de base aux balises avancées, maîtrisez le langage de balisage le plus important du web.

🏷️
Balises HTML
📝
Attributs
🏗️
Structure
💻
Pratique

Les Bases du HTML

Commençons par comprendre les concepts fondamentaux : les balises, les attributs et les commentaires.

🏷️ Les Balises HTML

Qu'est-ce qu'une balise ?

Une balise HTML est un élément qui indique au navigateur comment interpréter et afficher le contenu. Elle est entourée de chevrons < >.

Structure d'une balise :
  • • Balise ouvrante : <nom>
  • • Contenu : Le texte à afficher
  • • Balise fermante : </nom>
Balises auto-fermantes :

Certaines balises n'ont pas de contenu et se ferment d'elles-mêmes : <br/>, <img/>

Exemples de balises :

<h1>Mon Titre</h1>
<p>Un paragraphe de texte.</p>
<br/>
<strong>Texte important</strong>

📝 Les Attributs HTML

Qu'est-ce qu'un attribut ?

Les attributs donnent des informations supplémentaires aux balises. Ils se placent dans la balise ouvrante et suivent la syntaxe nom="valeur".

Attributs couramment utilisés :
  • • id : Identifiant unique
  • • class : Classe CSS
  • • src : Source d'une image
  • • href : Lien hypertexte
  • • alt : Texte alternatif
  • • title : Info-bulle

Exemples d'attributs :

<a href="https://google.com" title="Aller sur Google" >Google</a>
<img src="photo.jpg" alt="Ma photo"/>
<div id="header" class="container" >Contenu</div>

💬 Les Commentaires HTML

Pourquoi utiliser des commentaires ?

Les commentaires permettent d'ajouter des notes dans votre code qui ne seront pas affichées par le navigateur. Ils sont essentiels pour :

  • • Expliquer des parties complexes du code
  • • Organiser et structurer votre HTML
  • • Désactiver temporairement du code
  • • Laisser des notes pour l'équipe
Syntaxe :

<!-- Votre commentaire ici -->

Exemples de commentaires :

<!-- En-tête du site -->
<header>
<h1>Mon Site</h1>
</header>
<!-- Navigation principale -->
<nav>
<!-- Menu sera ajouté ici -->
</nav>
<!-- TODO: Ajouter le formulaire de contact Attention: Vérifier la validation -->

Ma Première Page Web

Découvrons la structure de base d'une page HTML et l'importance de chaque élément fondamental.

Structure complète d'une page HTML

<!-- Déclaration du type de document : HTML5 -->
<!DOCTYPE html>

<!-- Élément racine de la page -->
<html lang="fr">

    <!-- En-tête de la page (métadonnées) -->
    <head>
        <!-- Encodage des caractères -->
        <meta charset="UTF-8">
        
        <!-- Configuration responsive -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <!-- Description pour les moteurs de recherche -->
        <meta name="description" content="Ma première page web en HTML">
        
        <!-- Titre affiché dans l'onglet du navigateur -->
        <title>Ma Première Page Web</title>
        
        <!-- Lien vers la feuille de style CSS -->
        <link rel="stylesheet" href="css/style.css">
    </head>

    <!-- Corps de la page (contenu visible) -->
    <body>
        <!-- Votre contenu visible ici -->
        <h1>Bienvenue sur ma première page !</h1>
        <p>Ceci est mon premier paragraphe en HTML.</p>
        
    </body>
    
</html>

Toujours dans notre projet

Arborescence des fichiers :

📁 mon-premier-site/
📁 css/
└── style.css
📁 js/
└── script.js
📁 img/
└── (vos images)
📄 index.html <- ici

Étapes de modification :

  1. 1. Modifiez le fichier index.html en remplaçant le code par celui ci-dessus
  2. 2. Clic droit sur le fichier → "Open with Live Server"
  3. 3. Votre navigateur s'ouvre automatiquement
  4. 4. Modifiez votre code et voyez les changements en temps réel !

🏗️ DOCTYPE et HTML

<!DOCTYPE html>

Indique au navigateur que nous utilisons HTML5, la version moderne du langage. À placer en première ligne.

<html lang="fr">

L'élément racine qui contient tout le contenu. L'attribut lang="fr" précise la langue pour l'accessibilité.

🧠 L'élément HEAD

Métadonnées invisibles

Contient les informations sur la page qui ne sont pas affichées : titre, encodage, description, liens vers CSS et JS.

Éléments essentiels

  • • <title> : Titre de l'onglet
  • • <meta charset> : Encodage
  • • <meta viewport> : Responsive
  • • <link> : CSS externe

👁️ L'élément BODY

Contenu visible

Tout ce qui se trouve dans <body> est affiché par le navigateur : textes, images, vidéos, formulaires...

Organisation du contenu

Structurez votre contenu avec les balises appropriées pour une meilleure accessibilité et un meilleur SEO.

<body>
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
</body>

Balises de Contenu

Découvrez les balises pour structurer et formater le contenu à l'intérieur de vos sections : textes, liens, images et plus.

Titres : h1 à h6

Hiérarchie des titres, du plus important (h1) au moins important (h6).

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Section</h3>
<h4>Sous-section</h4>

Paragraphes et Formatage

<p>Paragraphe normal</p>
<strong>Texte important</strong>
<em>Texte accentué</em>
<mark>Surligné</mark>
<small>Petit texte</small>
<br/> ← Saut de ligne

DIV et SPAN

<div>

Conteneur bloc générique pour grouper d'autres éléments.

<span>

Conteneur en ligne pour styliser une partie de texte.

<div class="container">
<p>Texte avec <span class="highlight">mot important</span></p>
</div>

Liens hypertextes

<a href="https://google.com">Google</a>
<a href="#section1">Aller à la section</a>
<a href="mailto:test@email.com">Email</a>
<a href="#" target="_blank">Nouvel onglet</a>

Images

<img src="photo.jpg" alt="Description"/>
<img src="photo.jpg" alt="Photo" width="300" height="200"/>
<a href="grande-photo.jpg">
<img src="miniature.jpg" alt="Cliquer pour agrandir"/>
</a>

Listes

Liste non ordonnée (ul)

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Liste ordonnée (ol)

<ol>
<li>Étape 1</li>
<li>Étape 2</li>
</ol>

Les Tableaux HTML

Apprenez à créer des tableaux pour organiser vos données de manière structurée et accessible.

Structure d'un tableau

Balises principales :

<table>

Conteneur principal du tableau

<thead>

En-tête du tableau

<tbody>

Corps du tableau

<tfoot>

Pied du tableau

<tr>

Ligne du tableau

<th> / <td>

Cellule d'en-tête / Cellule de données

Rendu visuel :

Nom Âge Ville
Alice 25 Paris
Bob 30 Lyon

Exemple complet de tableau

<!-- Tableau des étudiants -->
<table border="1">
    <!-- Titre du tableau -->
    <caption>Liste des Étudiants - Promotion 2025</caption>
    
    <!-- En-tête du tableau -->
    <thead>
        <tr>
            <th scope="col">Nom</th>
            <th scope="col">Prénom</th>
            <th scope="col">Âge</th>
            <th scope="col">Spécialité</th>
            <th scope="col">Note Moyenne</th>
        </tr>
    </thead>
    
    <!-- Corps du tableau -->
    <tbody>
        <tr>
            <td>Dupont</td>
            <td>Marie</td>
            <td>22</td>
            <td>Développement Web</td>
            <td>16.5</td>
        </tr>
        
        <tr>
            <td>Martin</td>
            <td>Pierre</td>
            <td>24</td>
            <td>Design UX/UI</td>
            <td>14.8</td>
        </tr>
        
        <tr>
            <td>Bernard</td>
            <td>Sophie</td>
            <td>23</td>
            <td>Cybersécurité</td>
            <td>17.2</td>
        </tr>
    </tbody>
    
    <!-- Pied du tableau -->
    <tfoot>
        <tr>
            <td colspan="4">Moyenne générale de la promotion</td>
            <td>16.17</td>
        </tr>
    </tfoot>
</table>

Attributs utiles

colspan

Fusionne des cellules horizontalement

<td colspan="2">

rowspan

Fusionne des cellules verticalement

<td rowspan="3">

scope

Améliore l'accessibilité

<th scope="col">

Bonnes pratiques

✓

Utilisez <caption> pour décrire le tableau

✓

Structurez avec thead, tbody, tfoot

✓

Utilisez <th> pour les en-têtes

✓

Ajoutez l'attribut scope pour l'accessibilité

✓

Stylisez avec CSS plutôt qu'avec border

🦸‍♂️ Projet Pratique : Les Avengers

Créons ensemble une page dédiée aux Avengers ! Suivez les exercices étape par étape en HTML simple et voyez votre page prendre forme visuellement.

🎯 Progression du Projet

1 Structure HTML
2 En-tête
3 Section principale
4 Galerie héros
5 Tableau & Footer

🖼️ Images fournies pour votre projet :

🤖

Iron Man

ironman.jpg
🛡️

Captain America

captain.jpg
⚡

Thor

thor.jpg
🦸‍♂️

Équipe

equipe.png

💡 Astuce : Créez un dossier "img" et placez-y ces 4 fichiers pour votre projet. Cliquez sur les images pour les télécharger

Nouvelle structure de notre projet

Arborescence des fichiers :

📁 projet_avengers/
📁 css/
└── style.css
📁 js/
└── script.js
📁 img/
└── (vos images)
📄 avengers.html

Étapes de création :

  1. 1. Créez un dossier dans votre One drive si ce n'est pas déjà fait : web
  2. 1. Créez un dossier dans web : projet_avengers
  3. 2. Ouvrez ce dossier avec VSCode :
    Fichier → Ouvrir le dossier
  4. 3. Créez les sous-dossiers : css, js, img
  5. 4. Créez le fichier avengers.html à la racine.

1 Étape 1 : Structure HTML de base

🎨 Rendu de cette étape :

📄

Page blanche HTML

Structure de base créée

Titre : "Les Avengers" dans l'onglet

✅ Objectifs :
  • • Créer un fichier avengers.html
  • • Structure HTML5 complète
  • • Titre dans l'onglet du navigateur
  • • Encodage UTF-8 pour les caractères

💡 Aide pour créer votre fichier :

📋 Balises à utiliser :

Structure de base :

  • • <!DOCTYPE html> - Version HTML5
  • • <html lang="fr"> - Langue française
  • • <head> - Métadonnées
  • • <body> - Contenu visible

Dans le <head> :

  • • <meta charset="UTF-8">
  • • <meta name="viewport"...>
  • • <title> - Titre de l'onglet
📖 Références dans le cours :
🎯 Instructions :
  1. 1. Commencez par <!DOCTYPE html>
  2. 2. Ajoutez la balise <html> avec l'attribut lang="fr"
  3. 3. Créez la section <head> avec les métadonnées
  4. 4. Ajoutez le titre "Les Avengers - Super-Héros" dans <title>
  5. 5. Créez la section <body> (vide pour l'instant)
  6. 6. Fermez toutes les balises dans le bon ordre

2 Étape 2 : En-tête avec navigation

🎨 Rendu de cette étape :

AVENGERS

✅ Objectifs :
  • • En-tête avec balise <header>
  • • Titre principal <h1>
  • • Navigation avec <nav> et liens
  • • Liens internes vers les sections

💡 Aide pour créer l'en-tête :

📋 Balises à utiliser :

Structure de l'en-tête :

  • • <header> - En-tête sémantique
  • • <h1> - Titre principal
  • • <nav> - Navigation

Pour les liens :

  • • <a href="#section"> - Lien interne
  • • Utilisez les id : #accueil, #heros, #pouvoirs, #contact
📖 Références dans le cours :
🎯 Instructions :
  1. 1. Ouvrez votre fichier avengers.html de l'étape 1
  2. 2. Dans le <body>, ajoutez une balise <header>
  3. 3. Dans le header, créez un <h1> avec "AVENGERS"
  4. 4. Ajoutez une balise <nav> après le h1
  5. 5. Dans nav, créez 4 liens <a> vers les sections futures
  6. 6. Testez en ouvrant votre fichier dans le navigateur
💭 Astuce :

Les liens internes utilisent un # suivi de l'id de la section cible. Même si les sections n'existent pas encore, les liens seront fonctionnels quand vous les créerez dans les prochaines étapes !

3 Étape 3 : Section d'accueil

🎨 Rendu de cette étape :

Bienvenue chez les Avengers

Les plus puissants héros de la Terre s'unissent pour protéger le monde.

Découvrez l'équipe de super-héros qui protège notre planète des menaces extraordinaires.

Voir les héros
✅ Objectifs :
  • • Section principale avec <main>
  • • Titre <h2> et paragraphes <p>
  • • Image avec attribut alt
  • • Lien vers la section héros

💡 Aide pour créer la section d'accueil :

📋 Balises à utiliser :

Structure du contenu :

  • • <main> - Contenu principal
  • • <section id="accueil"> - Section avec identifiant
  • • <h2> - Titre de section
  • • <p> - Paragraphes

Contenu enrichi :

  • • <strong> - Texte important
  • • <img src="..." alt="..."> - Image
  • • <a href="#heros"> - Lien vers la section héros
📖 Références dans le cours :
🎯 Instructions :
  1. 1. Après le </header>, ajoutez <main>
  2. 2. Dans main, créez une <section> avec id="accueil"
  3. 3. Ajoutez un <h2> avec "Bienvenue chez les Avengers"
  4. 4. Créez un premier <p> avec <strong> pour "puissants héros"
  5. 5. Ajoutez une image <img> (chemin : "img/equipe.png")
  6. 6. Créez un second paragraphe descriptif
  7. 7. Terminez par un lien <a> vers la section héros
📁 Organisation des fichiers :
📁 mon-projet/
📄 avengers.html
📁 img/
🖼️ equipe.png ← Cette image

4 Étape 4 : Galerie des super-héros

🎨 Rendu de cette étape :

AVENGERS

Section d'accueil...

Nos Super-Héros

Iron Man

Tony Stark, génie inventeur

  • • Armure high-tech
  • • Vol supersonique

Captain America

Steve Rogers, premier Avenger

  • • Force surhumaine
  • • Bouclier vibranium

Thor

Dieu du Tonnerre

  • • Contrôle foudre
  • • Marteau Mjöllnir
✅ Objectifs :
  • • Section héros avec <section>
  • • Articles individuels <article>
  • • Images de chaque héros
  • • Listes de pouvoirs <ul> <li>

💡 Aide pour créer la galerie des héros :

📋 Balises à utiliser :

Structure de la galerie :

  • • <section id="heros"> - Section des héros
  • • <h2> - Titre "Nos Super-Héros"
  • • <article> - Chaque héros (x3)
  • • <h3> - Nom du héros

Contenu de chaque héros :

  • • <img> - Photo du héros
  • • <p> - Description + <strong>
  • • <h4> - "Pouvoirs et capacités :"
  • • <ul><li> - Liste des pouvoirs
📖 Références dans le cours :
🎯 Instructions étape par étape :

Structure générale :

  1. 1. Dans <main>, après la section accueil, créez <section id="heros">
  2. 2. Ajoutez le titre <h2> "Nos Super-Héros"

Pour chaque héros (Iron Man, Captain America, Thor) :

  1. 3. Créez un <article>
  2. 4. Ajoutez <h3> avec le nom du héros
  3. 5. Insérez <img> (src="img/[nom].jpg", width="200")
  4. 6. Écrivez <p> avec description (nom en <strong>)
  5. 7. Ajoutez <h4> "Pouvoirs et capacités :"
  6. 8. Créez <ul> avec 4 <li> de pouvoirs
  7. 9. Fermez l'</article>
🖼️ Images requises :
Iron Man
ironman.jpg
Captain America
captain.jpg
Thor
thor.jpg
💡 Suggestions de pouvoirs :

Iron Man :

  • • Armure technologique
  • • Vol supersonique
  • • Répulseurs d'énergie
  • • IA JARVIS

Captain America :

  • • Force surhumaine
  • • Bouclier vibranium
  • • Endurance exceptionnelle
  • • Leadership tactique

Thor :

  • • Contrôle de la foudre
  • • Marteau Mjöllnir
  • • Force divine
  • • Vol mystique

5 Étape 5 : Tableau de statistiques et Footer

🎨 Rendu de cette étape :

Header + Accueil + Héros (sections précédentes)

Pouvoirs et Statistiques

Tous les pouvoirs réunis des Avengers

Héros Force Vitesse Intelligence
Iron Man 85 90 100
Captain America 95 85 80
Thor 100 95 85
AVENGERS
Héros unis
Liens
Navigation
Contact
avengers@earth.com
© 2025 Avengers Initiative
✅ Objectifs :
  • • Section pouvoirs avec <section>
  • • Tableau <table> avec en-têtes
  • • Structure <thead> et <tbody>
  • • Footer <footer> avec informations
  • • Fermeture du <main>

💡 Aide pour créer le tableau et le footer :

📋 Balises à utiliser :

Section des pouvoirs :

  • • <section id="pouvoirs"> - Section avec tableau
  • • <table border="1"> - Tableau avec bordures
  • • <caption> - Titre du tableau
  • • <thead> / <tbody> - Structure

Footer :

  • • <footer id="contact"> - Pied de page
  • • <div> - Colonnes d'informations
  • • <hr> - Ligne de séparation
  • • <a href="mailto:"> - Email
📖 Références dans le cours :
🎯 Instructions détaillées :

Section des statistiques :

  1. 1. Dans <main>, après la section héros, créez <section id="pouvoirs">
  2. 2. Ajoutez <h2> "Pouvoirs et Statistiques"
  3. 3. Écrivez un <p> d'introduction au tableau
  4. 4. Créez <table border="1">
  5. 5. Ajoutez <caption> "Statistiques de combat des Avengers"

Structure du tableau :

  1. 6. Créez <thead> avec une ligne <tr>
  2. 7. Dans cette ligne, 5 <th scope="col"> : Héros, Force, Vitesse, Intelligence, Énergie
  3. 8. Créez <tbody> avec 3 lignes <tr> (une par héros)
  4. 9. Chaque ligne : 1 <td> nom + 4 <td> statistiques
  5. 10. Fermez le tableau et fermez </main>

Footer final :

  1. 11. Après </main>, créez <footer id="contact">
  2. 12. Ajoutez <h2> "Contact et Informations"
  3. 13. Créez 3 <div> : Description, Navigation, Contact
  4. 14. Ajoutez <hr> et copyright
  5. 15. Fermez </footer>, </body>, </html>
📊 Statistiques suggérées (sur 100) :

Iron Man :

  • Force: 85
  • Vitesse: 90
  • Intelligence: 100
  • Énergie: 100

Captain America :

  • Force: 95
  • Vitesse: 85
  • Intelligence: 80
  • Énergie: 75

Thor :

  • Force: 100
  • Vitesse: 95
  • Intelligence: 85
  • Énergie: 100
🏗️ Structure finale de votre fichier :
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<header>...</header> ← Étape 2
<main>
<section id="accueil">...</section> ← Étape 3
<section id="heros">...</section> ← Étape 4
<section id="pouvoirs">...</section> ← Étape 5
</main>
<footer id="contact">...</footer> ← Étape 5
</body>
</html>

6 Étape 6 : Rendu Final et Aperçu CSS

🎨 Votre page HTML terminée :

Bienvenue chez les Avengers

Les plus puissants héros de la Terre s'unissent pour protéger le monde.

[Image: equipe.png]

Découvrez l'équipe de super-héros...

Découvrir nos héros

Nos Super-Héros

Iron Man

[ironman.jpg]

Tony Stark, génie milliardaire...

Pouvoirs et capacités :

  • • Armure technologique avancée
  • • Vol supersonique
  • • Répulseurs d'énergie
  • • Intelligence artificielle JARVIS

Captain America

[captain.jpg]

Steve Rogers, le premier Avenger...

• Force surhumaine • Bouclier vibranium • Endurance...

Thor

[thor.jpg]

Thor Odinson, Dieu du Tonnerre...

• Contrôle foudre • Mjöllnir • Force divine...

Pouvoirs et Statistiques

Tous les pouvoirs réunis des Avengers

Statistiques de combat des Avengers
Héros Force Vitesse Intel.
Iron Man 85 90 100
Captain America 95 85 80
Thor 100 95 85

Contact et Informations

Avengers Initiative

Les plus puissants héros...

Navigation

Contact

Avengers Tower
contact@avengers.com

© 2025 Avengers Initiative. Assemblons-nous !

📄 HTML pur - Ce que vous avez créé :
  • • Page fonctionnelle mais basique
  • • Structure sémantique complète
  • • Navigation interne qui fonctionne
  • • Contenu bien organisé et accessible

✨ Aperçu avec CSS (prochaine étape) :

A

AVENGERS

AVENGERS

Les plus puissants héros de la Terre

🦸‍♂️

Nos Héros

🤖

Iron Man

  • • Armure tech
  • • Vol supersonique
🛡️

Captain

  • • Force surhumaine
  • • Bouclier
⚡

Thor

  • • Contrôle foudre
  • • Mjöllnir

📊 Pouvoirs et Statistiques

Tous les pouvoirs réunis des Avengers

Héros Force Vitesse Intel.
Iron Man 85 90 100
Captain 95 85 80
Thor 100 95 85

Contact et Informations

Avengers Initiative

Les plus puissants héros...

Navigation

Liens rapides

Contact

Avengers Tower
contact@avengers.com

© 2025 Avengers • Tous droits réservés • Assemblons-nous !

🎨 Avec CSS - La transformation magique :
  • • Design moderne et attractif
  • • Effets visuels et animations
  • • Grille responsive et cartes stylisées
  • • Couleurs et dégradés Marvel

🎯 Mission Accomplie : Page Avengers en HTML pur !

✓ Structure HTML créée :

  • 🏗️ Document HTML5 complet et valide
  • 🧭 En-tête avec titre et navigation interne
  • 📝 Section d'accueil avec image et description
  • 🦸‍♂️ Galerie de 3 super-héros avec leurs pouvoirs
  • 📊 Tableau de statistiques accessible
  • 📄 Footer avec informations de contact

🎓 Balises HTML maîtrisées :

Structurelles :
  • • <!DOCTYPE html>
  • • <html>, <head>, <body>
  • • <header>, <main>, <footer>
  • • <section>, <article>
  • • <nav>, <div>
Contenu :
  • • <h1> à <h4>
  • • <p>, <strong>
  • • <img> avec alt
  • • <a> avec href
  • • <ul>, <li>
Tableaux :
  • • <table> avec border
  • • <caption>
  • • <thead>, <tbody>
  • • <tr>, <th>, <td>
  • • Attribut scope
Attributs :
  • • lang, charset
  • • id pour les ancres
  • • href pour liens
  • • src, alt, width
  • • scope pour tableaux

📁 Structure de fichiers requise :

📁 mon-projet-avengers/
📄 avengers.html
📁 css/
📁 img/
🖼️ equipe.png
🖼️ ironman.jpg
🖼️ captain.jpg
🖼️ thor.jpg
📁 js/

💡 Astuce : Utilisez des images libres de droits ou créez des images de remplacement simple

🚀 Prochaines Étapes

📝
1. Assembler

Copiez tous les codes dans avengers.html

🖼️
2. Images

Ajoutez les 4 images dans le dossier

🧪
3. Tester

Ouvrez dans votre navigateur et validez

📧
4. Envoyer

Envoyez à fabrice@adnduweb.com

🦸‍♂️ Félicitations ! Vous maîtrisez maintenant le HTML ! 🦸‍♀️

Votre première page web est terminée. Vous avez appris les fondamentaux du HTML en créant une page complète sur les Avengers !

🎓 Prochaine étape : Maintenant que vous maîtrisez le HTML, vous êtes prêt à apprendre le CSS pour styliser vos pages web !

Connectez vos Pages avec Style ! 🔗

Maintenant que vous avez créé votre page HTML, il est temps de la rendre interactive et attrayante. Explorez les autres aspects du HTML pour créer des sites web complets et professionnels.

🔗 Liens 📝 Formulaires 🖼️ Images 📝 Contenu 📦 Imbrication 🎨 CSS