Scribd
Importer
8 vues82 pages

HTML - Formation

Le 'Manuel Complet d'HTML' est un guide exhaustif destiné aux débutants pour maîtriser le langage HTML, couvrant des sujets allant des bases aux pratiques avancées. Il inclut des sections sur la structure des pages, la mise en forme, les formulaires, l'accessibilité, et des projets pratiques pour appliquer les connaissances acquises. Le document fournit également des ressources supplémentaires et des exercices pour renforcer l'apprentissage.

Transféré par

mouandadiamant
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
8 vues82 pages

HTML - Formation

Le 'Manuel Complet d'HTML' est un guide exhaustif destiné aux débutants pour maîtriser le langage HTML, couvrant des sujets allant des bases aux pratiques avancées. Il inclut des sections sur la structure des pages, la mise en forme, les formulaires, l'accessibilité, et des projets pratiques pour appliquer les connaissances acquises. Le document fournit également des ressources supplémentaires et des exercices pour renforcer l'apprentissage.

Transféré par

mouandadiamant
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Manuel Complet d'HTML : Du

Débutant à l'Expert

Table des Matières


Partie 1 : Fondations du HTML
1. Introduction au Web et au HTML

Qu’est-ce que le HTML ?

Historique et évolutions (HTML5, XHTML).

Rôle du HTML dans le développement web.

2. Environnement de Développement

Éditeurs de code (VS Code, Sublime Text).

Navigateurs et outils de développement (Chrome DevTools).

Structure d’un projet HTML.

Partie 2 : Les Bases du HTML


1. Anatomy d’une Page HTML

La structure de base ( <!DOCTYPE> , <html> , <head> , <body> ).

Les commentaires ( <!-- --> ).

2. Texte et Mise en Forme

Balises de titre ( <h1> à <h6> ).

Paragraphes ( <p> ), sauts de ligne ( <br> ).

Mise en valeur ( <strong> , <em> , <mark> ).

Listes ordonnées/non ordonnées ( <ol> , <ul> , <li> ).

3. Liens et Ancres

Liens absolus et relatifs ( <a href=""> ).

Manuel Complet d'HTML : Du Débutant à l'Expert 1


Cibles (_blank, _self) et attributs title / rel .

Ancres internes (liens vers des sections de page).

4. Images et Médias

Insérer une image ( <img src="" alt=""> ).

Formats d’image (WebP, SVG, PNG, JPG).

Audio ( <audio> ) et vidéo ( <video> ).

Partie 3 : Structure Avancée et Sémantique


1. Tableaux

Création de tableaux ( <table> , <tr> , <td> , <th> ).

Fusion de cellules ( colspan , rowspan ).

Accessibilité des tableaux ( <caption> , <scope> ).

2. Formulaires Interactifs

Balise <form> et attributs ( action , method ).

Champs de saisie ( <input type="text|email|password"> ).

Cases à cocher ( <checkbox> ), boutons radio ( <radio> ).

Listes déroulantes ( <select> , <option> ).

Validation basique (required, pattern).

3. HTML Sémantique

Balises sémantiques ( <header> , <footer> , <article> , <section> ).

Importance pour le SEO et l’accessibilité.

Exemples de structuration de page.

Partie 4 : HTML Moderne et Bonnes Pratiques


1. Accessibilité (ARIA)

Rôles ARIA ( role="navigation" ).

Attributs ( aria-label , aria-hidden ).

Tests avec des lecteurs d’écran.

Manuel Complet d'HTML : Du Débutant à l'Expert 2


2. API HTML5

Stockage local ( localStorage , sessionStorage ).

Géolocalisation ( [Link] ).

Canvas et SVG (introduction).

3. Intégration de Contenu Externe

Iframes ( <iframe> ).

Intégration de cartes (Google Maps), vidéos (YouTube).

4. Performance et SEO

Optimisation des images ( loading="lazy" ).

Métadonnées essentielles ( <meta name="description"> ).

Structure de URL canoniques.

Partie 5 : Projets et Exercices Pratiques


1. Travaux Pratiques Guidés

Création d’un CV en ligne.

Formulaire de contact fonctionnel.

Page de portfolio avec galerie d’images.

Site web responsive simple (avec introduction CSS).

2. Exercices Corrigés

20 exercices progressifs (basiques à avancés).

Solutions détaillées et bonnes pratiques.

Partie 6 : Ressources et Approfondissement


1. Aller Plus Loin

HTML et JavaScript (manipulation du DOM).

Web Components (introduction).

Évolutions futures (HTML6, spécifications W3C).

2. Ressources Externes

Manuel Complet d'HTML : Du Débutant à l'Expert 3


Documentation : MDN Web Docs, W3Schools.

Outils : Validateur W3C, Can I Use.

Communautés : Stack Overflow, GitHub.

3. Annexes

Référence des balises HTML.

Cheatsheet des attributs communs.

Glossary des termes techniques.

Partie 7 : Dictionnaire HTML - Comprendre les Balises,


Attributs et Concepts

Public Visé : Débutants sans expérience en programmation.

Objectif : Maîtriser la création de sites web statiques, comprendre les bonnes


pratiques, et préparer l’apprentissage du CSS/JavaScript.

Format proposé : Cours → Exemples → Exercices → Solutions → Projets


pratiques.

Partie 1 : Fondations du HTML

1. Introduction au Web et au HTML


Qu’est-ce que le HTML ?

Le HTML (HyperText Markup Language) est le langage standard utilisé pour


créer des pages web. Il structure le contenu via des balises (tags) qui indiquent
au navigateur comment afficher les éléments (textes, images, liens).

Exemple :

<p>Ceci est un paragraphe</p>


<a href="<[Link] est un lien</a>

Historique et évolutions

HTML 2.0 (1995) : Première standardisation.

HTML 4.01 (1999) : Introduction des CSS.

Manuel Complet d'HTML : Du Débutant à l'Expert 4


XHTML (2000) : HTML reformulé en XML (syntaxe stricte).

HTML5 (2014) : Nouveaux éléments sémantiques ( <header> , <video> ), APIs


modernes.

Rôle du HTML dans le développement web

Structure le contenu d’une page.

Fonctionne avec le CSS (style) et JavaScript (interactivité).

Base essentielle pour le SEO (référencement naturel).

2. Environnement de Développement
Éditeurs de code

VS Code (gratuit, extensions utiles : Live Server, Prettier).

Sublime Text (léger, plugins personnalisables).

Astuce : Utilisez la colorisation syntaxique et l’auto-complétion.

Navigateurs et outils de développement

Chrome DevTools : Inspecter le HTML, déboguer, tester le responsive.

Ouvrir avec F12 ou Ctrl+Shift+I .

Firefox Developer Edition : Outils similaires avec des fonctionnalités


avancées pour le CSS.

Structure d’un projet HTML


Organisez vos fichiers ainsi :

mon-projet/
│
├── [Link] (fichier principal)
├── styles/
│ └── [Link] (fichiers CSS)
├── scripts/
│ └── [Link] (fichiers JavaScript)
└── images/
└── [Link] (assets)

Exemple de fichier [Link] :

Manuel Complet d'HTML : Du Débutant à l'Expert 5


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Premier Projet</title>
<link rel="stylesheet" href="styles/[Link]">
</head>
<body>
<h1>Bienvenue !</h1>
<script src="scripts/[Link]"></script>
</body>
</html>

Exercice 1

1. Installez VS Code et Chrome.

2. Créez un dossier projet-html avec la structure ci-dessus.

3. Écrivez le code HTML de base dans [Link] et ouvrez-le dans Chrome.

Solution de l’exercice 1

Vérifiez que votre fichier s’affiche correctement dans le navigateur. Si besoin,


utilisez l’extension Live Server de VS Code pour un rechargement automatique.

Ressources pour cette partie

Documentation MDN : HTML basics

Validateur HTML W3C : Validator

Astuce : Utilisez toujours <!DOCTYPE html> pour activer le mode standard des
navigateurs.

Partie 2 : Les Bases du HTML

3. Anatomie d'une Page HTML


Structure de base d'un document HTML
Chaque page HTML suit une structure fondamentale composée de balises
essentielles :

Manuel Complet d'HTML : Du Débutant à l'Expert 6


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Mon Document HTML</title>
</head>
<body>
<!-- Le contenu visible de la page -->
<h1>Bienvenue sur ma page</h1>
<p>Ceci est mon premier paragraphe.</p>
</body>
</html>

Explications détaillées :

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

<html> : Racine du document, contient tout le contenu

lang="fr" : Attribut indiquant la langue de la page

<head> : Section d'en-tête (métadonnées non visibles)

<meta charset="UTF-8"> : Encodage des caractères (essential pour les accents


français)

<meta name="viewport"> : Configuration pour le responsive design

<title> : Titre de la page (affiché dans l'onglet du navigateur)

<body> : Corps du document (contenu visible)

Les commentaires HTML

<!-- Ceci est un commentaire -->


<!--
Les commentaires sur
plusieurs lignes
-->

Manuel Complet d'HTML : Du Débutant à l'Expert 7


4. Texte et Mise en Forme
Balises de titre (hiérarchie)

<h1>Titre principal (un seul par page)</h1>


<h2>Sous-titre de niveau 2</h2>
<h3>Sous-titre de niveau 3</h3>
<h4>Sous-titre de niveau 4</h4>
<h5>Sous-titre de niveau 5</h5>
<h6>Sous-titre de niveau 6</h6>

Paragraphes et sauts de ligne

<p>Ceci est un paragraphe. Le texte va


automatiquement s'adapter à la largeur
de la fenêtre.</p>

<p>Un deuxième paragraphe<br>


avec un saut de ligne artificiel.</p>

Mise en valeur sémantique

<p>
<strong>Ce texte est important</strong> (gras)<br>
<em>Ce texte est emphatisé</em> (italique)<br>
<mark>Ce texte est surligné</mark><br>
<small>Ce texte est petit</small><br>
<del>Ce texte est barré</del><br>
<ins>Ce texte est inséré/souligné</ins>
</p>

Listes ordonnées et non ordonnées

<!-- Liste non ordonnée (à puces) -->


<ul>
<li>Element de liste 1</li>
<li>Element de liste 2</li>
<li>Element de liste 3</li>
</ul>

Manuel Complet d'HTML : Du Débutant à l'Expert 8


<!-- Liste ordonnée (numérotée) -->
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>

<!-- Liste de définition -->


<dl>
<dt>HTML</dt>
<dd>Langage de balisage hypertexte</dd>
<dt>CSS</dt>
<dd>Feuilles de style en cascade</dd>
</dl>

5. Liens et Ancres
Liens hypertextes de base

<!-- Lien absolu (vers un site externe) -->


<a href="<[Link] Example</a>

<!-- Lien relatif (vers une page du même site) -->


<a href="[Link]">Page À propos</a>

<!-- Lien avec attribut target -->


<a href="<[Link] target="_blank">Ouvrir dans un no
uvel onglet</a>

<!-- Lien avec titre au survol -->


<a href="[Link]" title="Description du lien">Lien avec info-bulle</a>

Ancres internes

<!-- Création d'une ancre -->


<h2 id="section1">Section 1</h2>
<p>Contenu de la section...</p>

Manuel Complet d'HTML : Du Débutant à l'Expert 9


<!-- Lien vers l'ancre -->
<a href="#section1">Aller à la Section 1</a>

<!-- Lien vers une ancre sur une autre page -->
<a href="[Link]#section2">Aller à la Section 2 de l'autre page</
a>

Liens spéciaux

<!-- Lien mailto -->


<a href="[Link] contacter</a>

<!-- Lien tel -->


<a href="[Link] le service client</a>

<!-- Lien de téléchargement -->


<a href="documents/[Link]" download>Télécharger le guide</a>

6. Images et Médias
Images de base

<!-- Image avec texte alternatif -->


<img src="images/[Link]" alt="Logo de l'entreprise">

<!-- Image avec dimensions -->


<img src="[Link]" alt="Description" width="800" height="600">

<!-- Image responsive -->


<img src="[Link]" alt="Description" style="max-width: 100%; height: a
uto;">

Figure avec légende

<figure>
<img src="[Link]" alt="Diagramme explicatif">

Manuel Complet d'HTML : Du Débutant à l'Expert 10


<figcaption>Figure 1: Diagramme de notre processus</figcaption>
</figure>

Audio et vidéo HTML5

<!-- Audio -->


<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Votre navigateur ne supporte pas l'élément audio.
</audio>

<!-- Vidéo -->


<video controls width="640" height="360" poster="[Link]">
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Votre navigateur ne supporte pas l'élément vidéo.
</video>

Exercices de la Partie 2

Exercice 1 : Structure de base


Créez une page HTML valide avec la structure minimale et ajoutez un titre de
niveau 1 et deux paragraphes.

Exercice 2 : Listes et mise en forme


Créez une liste de courses avec:

Une liste non ordonnée pour les catégories

Des listes ordonnées à l'intérieur pour les articles prioritaires

Exercice 3 : Liens et images


Créez une page avec:

Un lien vers votre site préféré (ouvrant dans un nouvel onglet)

Une image avec légende

Un lien mailto

Exercice 4 : Page complète


Créez une page "À propos" contenant:

Manuel Complet d'HTML : Du Débutant à l'Expert 11


Un titre principal

Une photo de vous (ou placeholder)

Une brève description

Un lien vers la page d'accueil

Un lien de contact mailto

Solutions des Exercices


Solution Exercice 1 :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma Première Page</title>
</head>
<body>
<h1>Bienvenue sur mon site</h1>
<p>Ceci est mon premier paragraphe.</p>
<p>Voici mon deuxième paragraphe.</p>
</body>
</html>

Solution Exercice 2 :

<h1>Liste de courses</h1>
<ul>
<li>Fruits
<ol>
<li>Pommes</li>
<li>Bananes</li>
</ol>
</li>
<li>Légumes
<ol>
<li>Carottes</li>
<li>Salade</li>
</ol>

Manuel Complet d'HTML : Du Débutant à l'Expert 12


</li>
</ul>

Solution Exercice 3 :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Liens et Images</title>
</head>
<body>
<h1>Mes liens favoris</h1>
<a href="<[Link] target="_blank" title="Encyclopé
die en ligne">
Visiter Wikipedia
</a>

<figure>
<img src="[Link]" alt="Image exemple" width="300">
<figcaption>Une belle image d'exemple</figcaption>
</figure>

<a href="[Link]
</body>
</html>

Solution Exercice 4 :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>À propos de moi</title>
</head>
<body>
<h1>À propos de moi</h1>
<img src="[Link]" alt="Ma photo" width="200">

Manuel Complet d'HTML : Du Débutant à l'Expert 13


<p>Je suis un développeur web passionné par le HTML.</p>
<a href="[Link]">Retour à l'accueil</a> |
<a href="[Link] contacter</a>
</body>
</html>

Bonnes pratiques à retenir :

Utilisez toujours l'attribut alt pour les images

Privilégiez les chemins relatifs pour les ressources internes

Respectez la hiérarchie des titres (h1 > h2 > h3...)

Utilisez la sémantique appropriée (strong vs b, em vs i)

Testez vos liens régulièrement

Ressources complémentaires :

MDN Web Docs : Référence complète des balises HTML

HTML Validator : Validation de code HTML

Can I Use : Compatibilité des fonctionnalités

Partie 3 : Structure Avancée et Sémantique

7. Tableaux
Définition : Les tableaux HTML permettent d'afficher des données tabulaires.
Ils sont construits avec un ensemble de balises spécifiques qui définissent la
structure des lignes et des colonnes.
Structure de base d'un tableau :

<table>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
<tr>
<td>Donnée 1</td>

Manuel Complet d'HTML : Du Débutant à l'Expert 14


<td>Donnée 2</td>
</tr>
</table>

Exemple complet avec style :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tableaux HTML</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #f4f4f4;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<table>
<caption>Liste des employés</caption>
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Poste</th>

Manuel Complet d'HTML : Du Débutant à l'Expert 15


<th scope="col">Département</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marie Dupont</td>
<td>Développeuse</td>
<td>IT</td>
</tr>
<tr>
<td>Pierre Martin</td>
<td>Designer</td>
<td>Création</td>
</tr>
</tbody>
</table>
</body>
</html>

Résultat visuel :

┌─────────────────┬───────────────┬──────────────┐
│ Nom │ Poste │ Département │
├─────────────────┼───────────────┼──────────────┤
│ Marie Dupont │ Développeuse │ IT │
│ Pierre Martin │ Designer │ Création │
└─────────────────┴───────────────┴──────────────┘

Fusion de cellules :

<table>
<tr>
<th colspan="2">Nom et Prénom</th>
<th>Âge</th>
</tr>
<tr>
<td>Dupont</td>
<td>Marie</td>

Manuel Complet d'HTML : Du Débutant à l'Expert 16


<td rowspan="2">30</td>
</tr>
<tr>
<td>Martin</td>
<td>Pierre</td>
</tr>
</table>

8. Formulaires Interactifs
Définition : Les formulaires permettent de recueillir des informations utilisateur.
Ils sont essentiels pour les interactions comme les inscriptions, connexions, et
contacts.
Structure de base d'un formulaire :

<form action="/submit" method="POST">


<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>

<label for="email">Email :</label>


<input type="email" id="email" name="email" required>

<button type="submit">Envoyer</button>
</form>

Formulaire complet avec différents champs :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Formulaire de Contact</title>
<style>
form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;

Manuel Complet d'HTML : Du Débutant à l'Expert 17


border-radius: 8px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select, textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<form action="/contact" method="POST">
<h2>Contactez-nous</h2>

<!-- Champ texte -->


<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom" required
placeholder="Votre prénom">

<!-- Email -->


<label for="email">Email :</label>

Manuel Complet d'HTML : Du Débutant à l'Expert 18


<input type="email" id="email" name="email" required
placeholder="votre@[Link]">

<!-- Liste déroulante -->


<label for="sujet">Sujet :</label>
<select id="sujet" name="sujet" required>
<option value="">Choisissez un sujet</option>
<option value="support">Support technique</option>
<option value="vente">Question commerciale</option>
<option value="autre">Autre</option>
</select>

<!-- Zone de texte -->


<label for="message">Message :</label>
<textarea id="message" name="message" rows="5" required
placeholder="Votre message..."></textarea>

<!-- Case à cocher -->


<label>
<input type="checkbox" name="newsletter" value="1">
S'abonner à la newsletter
</label>

<!-- Boutons radio -->


<fieldset>
<legend>Méthode de contact préférée :</legend>
<label>
<input type="radio" name="contact-method" value="email" chec
ked>
Email
</label>
<label>
<input type="radio" name="contact-method" value="phone">
Téléphone
</label>
</fieldset>

<button type="submit">Envoyer le message</button>

Manuel Complet d'HTML : Du Débutant à l'Expert 19


</form>
</body>
</html>

Validation HTML5 :

<input type="text" pattern="[A-Za-z]{3,}"


title="Minimum 3 lettres alphabétiques">
<input type="number" min="18" max="99">
<input type="password" minlength="8" required>

9. HTML Sémantique
Définition : L'HTML sémantique utilise des balises qui décrivent leur contenu,
améliorant l'accessibilité, le SEO et la maintenance.
Structure sémantique d'une page :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Blog Personnel</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; line-height: 1.6; }
header, footer { background: #333; color: white; padding: 20px; }
nav ul { display: flex; list-style: none; }
nav a { color: white; text-decoration: none; padding: 10px; }
main { padding: 20px; max-width: 1200px; margin: 0 auto; }
article { margin-bottom: 30px; padding: 20px; border: 1px solid #ddd; }
aside { background: #f4f4f4; padding: 20px; margin-left: 20px; }
.container { display: flex; }
</style>
</head>
<body>
<header role="banner">
<h1>Mon Blog Personnel</h1>
<nav role="navigation" aria-label="Menu principal">

Manuel Complet d'HTML : Du Débutant à l'Expert 20


<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<div class="container">
<main role="main">
<article>
<header>
<h2>Mon Premier Article</h2>
<time datetime="2024-01-15">15 Janvier 2024</time>
</header>
<section>
<p>Ceci est l'introduction de mon article...</p>
<figure>
<img src="<[Link]
236-ca5d3832db39?w=600>"
alt="Paysage montagneux" width="600">
<figcaption>Photo de paysage par Unsplash</figcaption>
</figure>
</section>
<footer>
<p>Écrit par <address>Jean Dupont</address></p>
</footer>
</article>
</main>

<aside role="complementary" aria-label="Sidebar">


<h3>À propos de l'auteur</h3>
<p>Je suis un développeur passionné par le web...</p>
<section>
<h4>Articles récents</h4>
<ul>
<li><a href="#article1">Article 1</a></li>
<li><a href="#article2">Article 2</a></li>

Manuel Complet d'HTML : Du Débutant à l'Expert 21


</ul>
</section>
</aside>
</div>

<footer role="contentinfo">
<p>&copy; 2024 Mon Blog. Tous droits réservés.</p>
<nav aria-label="Navigation pied de page">
<a href="#confidentialité">Politique de confidentialité</a>
<a href="#conditions">Conditions d'utilisation</a>
</nav>
</footer>
</body>
</html>

Balises sémantiques importantes :

<header> : En-tête de page ou de section

<nav> : Navigation principale

<main> : Contenu principal unique

<article> : Contenu autonome (article, blog post)

<section> : Section thématique de contenu

<aside> : Contenu tangentiel (sidebar)

<footer> : Pied de page

<time> : Date/heure avec format machine

<address> : Informations de contact

Exercices de la Partie 3
Exercice 1 : Tableau complexe
Créez un tableau d'emploi du temps avec fusion de cellules pour les créneaux
horaires.
Exercice 2 : Formulaire d'inscription
Créez un formulaire d'inscription avec validation HTML5.
Exercice 3 : Page sémantique
Structurez une page de blog avec toutes les balises sémantiques.

Manuel Complet d'HTML : Du Débutant à l'Expert 22


Solutions des Exercices
Solution Exercice 1 :

<table>
<caption>Emploi du temps</caption>
<thead>
<tr>
<th>Heure</th>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">9h-11h</td>
<td>Mathématiques</td>
<td>Physique</td>
<td>Histoire</td>
</tr>
<tr>
<td>Salle A</td>
<td>Salle B</td>
<td>Salle C</td>
</tr>
<tr>
<td>11h-12h</td>
<td colspan="3">Pause déjeuner</td>
</tr>
</tbody>
</table>

Solution Exercice 2 :

<form>
<fieldset>
<legend>Informations personnelles</legend>
<label for="nom">Nom complet :</label>

Manuel Complet d'HTML : Du Débutant à l'Expert 23


<input type="text" id="nom" name="nom" required pattern="[A-Za-z
]+">

<label for="age">Âge :</label>


<input type="number" id="age" name="age" min="18" max="120">
</fieldset>

<fieldset>
<legend>Compte</legend>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>

<label for="password">Mot de passe :</label>


<input type="password" id="password" name="password"
minlength="8" required>
</fieldset>

<button type="submit">S'inscrire</button>
</form>

Solution Exercice 3 :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Blog</title>
</head>
<body>
<header>
<h1>Mon Blog Technologique</h1>
<nav>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#articles">Articles</a></li>
</ul>
</nav>
</header>

Manuel Complet d'HTML : Du Débutant à l'Expert 24


<main>
<article>
<header>
<h2>Les dernières tendances HTML5</h2>
<time datetime="2024-01-20">20 janvier 2024</time>
</header>

<section>
<h3>Introduction</h3>
<p>Le HTML5 continue d'évoluer avec de nouvelles API...</p>
</section>

<section>
<h3>Les nouveautés</h3>
<p>Découvrez les dernières fonctionnalités...</p>
</section>
</article>
</main>

<footer>
<p>&copy; 2024 Blog Tech</p>
</footer>
</body>
</html>

Bonnes pratiques :

Utilisez toujours <label> avec les champs de formulaire

Employez les balises sémantiques appropriées

Testez vos tableaux avec des lecteurs d'écran

Validez vos formulaires avec JavaScript en complément du HTML5

Ressources :

MDN Tableaux

W3C Formulaires

HTML5 Semantic Elements

Manuel Complet d'HTML : Du Débutant à l'Expert 25


Dans la prochaine partie, nous aborderons l'accessibilité et les API HTML5
modernes!

Partie 4 : HTML Moderne et Bonnes Pratiques

10. Accessibilité (ARIA)


Définition : ARIA (Accessible Rich Internet Applications) est une spécification
qui permet de rendre le contenu web plus accessible aux personnes
handicapées, notamment celles utilisant des lecteurs d'écran.
Rôles ARIA fondamentaux :

<!-- Navigation principale -->


<nav role="navigation">
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>

<!-- Contenu principal -->


<main role="main">
<article role="article">
<h1>Titre de l'article</h1>
<p>Contenu...</p>
</article>
</main>

<!-- Pied de page -->


<footer role="contentinfo">
<p>&copy; 2024 Mon Site</p>
</footer>

Attributs ARIA essentiels :

<!-- Indication pour les lecteurs d'écran -->


<button aria-label="Fermer la fenêtre modale">X</button>

Manuel Complet d'HTML : Du Débutant à l'Expert 26


<!-- Masquer un élément visuellement mais le garder accessible -->
<div aria-hidden="true" style="display: none;">
Contenu caché
</div>

<!-- État actif -->


<button aria-expanded="false" aria-controls="menu-deroulant">
Menu
</button>
<div id="menu-deroulant" aria-hidden="true">
<!-- Contenu du menu -->
</div>

Exemple complet avec résultat visuel :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple ARIA</title>
<style>
.modal { display: none; background: #f0f0f0; padding: 20px; }
.modal[aria-hidden="false"] { display: block; }
</style>
</head>
<body>
<button aria-expanded="false" aria-controls="ma-modale"
onclick="toggleModal()">
Ouvrir la modale
</button>

<div id="ma-modale" class="modal" aria-hidden="true" role="dialog"


aria-labelledby="titre-modale">
<h2 id="titre-modale">Information importante</h2>
<p>Ceci est une fenêtre modale accessible.</p>
<button aria-label="Fermer" onclick="toggleModal()">X</button>
</div>

Manuel Complet d'HTML : Du Débutant à l'Expert 27


<script>
function toggleModal() {
const modal = [Link]('ma-modale');
const button = [Link]('[aria-controls="ma-modal
e"]');
const isHidden = [Link]('aria-hidden') === 'true';

[Link]('aria-hidden', !isHidden);
[Link]('aria-expanded', isHidden);
}
</script>
</body>
</html>

Résultat visuel :
[Bouton "Ouvrir la modale"] → [Cliquez] → [Fenêtre grise avec titre et texte
apparaît]

11. API HTML5


localStorage et sessionStorage :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Storage API</title>
</head>
<body>
<input type="text" id="userInput" placeholder="Entrez quelque chose">
<button onclick="saveData()">Sauvegarder</button>
<button onclick="loadData()">Charger</button>
<div id="output"></div>

<script>
function saveData() {
const data = [Link]('userInput').value;

Manuel Complet d'HTML : Du Débutant à l'Expert 28


[Link]('userData', data);
alert('Données sauvegardées!');
}

function loadData() {
const data = [Link]('userData');
[Link]('output').textContent = data || 'Aucune d
onnée';
}
</script>
</body>
</html>

Résultat :
[Champ texte] [Bouton Sauvegarder] [Bouton Charger]
→ Texte saisi persiste après actualisation
Géolocalisation :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Géolocalisation</title>
</head>
<body>
<button onclick="getLocation()">Obtenir ma position</button>
<div id="geoResult"></div>

<script>
function getLocation() {
if ([Link]) {
[Link](showPosition);
} else {
[Link]('geoResult').textContent =
"Géolocalisation non supportée";
}
}

Manuel Complet d'HTML : Du Débutant à l'Expert 29


function showPosition(position) {
const geoDiv = [Link]('geoResult');
[Link] = `
Latitude: ${[Link]}<br>
Longitude: ${[Link]}<br>
Précision: ${[Link]}m
`;
}
</script>
</body>
</html>

Résultat :
[Bouton] → [Demande d'autorisation] → [Coordonnées affichées]

12. Intégration de Contenu Externe


Iframes responsives :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Iframe Responsive</title>
<style>
.iframe-container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* Ratio 16:9 */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

Manuel Complet d'HTML : Du Débutant à l'Expert 30


border: 0;
}
</style>
</head>
<body>
<div class="iframe-container">
<iframe src="<[Link]
ox=-0.1276,51.5072,0.1276,51.5072>"
title="Carte de Londres"></iframe>
</div>
</body>
</html>

Résultat :
[Carte interactive responsive qui s'adapte à la taille de l'écran]
Intégration YouTube :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Vidéo YouTube</title>
</head>
<body>
<div style="max-width: 800px; margin: 0 auto;">
<iframe width="100%" height="450"
src="<[Link]
title="Video YouTube" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-medi
a; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</body>
</html>

Résultat :

Manuel Complet d'HTML : Du Débutant à l'Expert 31


[Vidéo YouTube intégrée avec lecteur fonctionnel]

13. Performance et SEO


Optimisation des images :

<!-- Image responsive avec lazy loading -->


<img src="<[Link]
1450?w=800>"
srcset="<[Link]
81450?w=400> 400w,
<[Link]
0?w=800> 800w"
sizes="(max-width: 600px) 400px, 800px"
alt="Paysage désertique"
loading="lazy"
width="800" height="600">

<!-- Image modern format avec fallback -->


<picture>
<source srcset="[Link]" type="image/webp">
<source srcset="[Link]" type="image/jpeg">
<img src="[Link]" alt="Description de l'image">
</picture>

Métadonnées SEO essentielles :

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Mon Site - Page d'Accueil</title>
<meta name="description" content="Découvrez nos services de qualité
exceptionnelle">
<meta name="keywords" content="service, qualité, excellence">
<meta name="author" content="Votre Nom">

<!-- Open Graph pour les réseaux sociaux -->


<meta property="og:title" content="Mon Site">

Manuel Complet d'HTML : Du Débutant à l'Expert 32


<meta property="og:description" content="Description pour les réseaux
sociaux">
<meta property="og:image" content="<[Link]
>">
<meta property="og:url" content="<[Link]

<!-- Canonical URL -->


<link rel="canonical" href="<[Link]
</head>

Exercices de la Partie 4
Exercice 1 : Accessibilité
Créez un menu accessible avec:

Rôles ARIA appropriés

Navigation au clavier

États aria-expanded

Exercice 2 : localStorage
Créez une liste de tâches qui persiste après actualisation
Exercice 3 : Iframe Responsive
Intégrez une carte Google Maps responsive
Exercice 4 : SEO
Optimisez une page avec toutes les métadonnées essentielles

Solutions des Exercices


Solution Exercice 1 :

<nav role="navigation" aria-label="Menu principal">


<button aria-expanded="false" aria-controls="menu-list">☰ Menu</butt
on>
<ul id="menu-list" aria-hidden="true" style="display: none;">
<li><a href="#accueil">Accueil</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>

Manuel Complet d'HTML : Du Débutant à l'Expert 33


<script>
[Link]('button').addEventListener('click', function() {
const menu = [Link]('menu-list');
const isExpanded = [Link]('aria-expanded') === 'true';

[Link]('aria-expanded', !isExpanded);
[Link]('aria-hidden', isExpanded);
[Link] = isExpanded ? 'block' : 'none';
});
</script>

Solution Exercice 2 :

<input type="text" id="taskInput" placeholder="Nouvelle tâche">


<button onclick="addTask()">Ajouter</button>
<ul id="taskList"></ul>

<script>
function addTask() {
const task = [Link]('taskInput').value;
if (task) {
const tasks = [Link]([Link]('tasks') || '[]');
[Link](task);
[Link]('tasks', [Link](tasks));
displayTasks();
}
}

function displayTasks() {
const tasks = [Link]([Link]('tasks') || '[]');
const list = [Link]('taskList');
[Link] = [Link](task => `<li>${task}</li>`).join('');
}

displayTasks();
</script>

Solution Exercice 3 :

Manuel Complet d'HTML : Du Débutant à l'Expert 34


<div style="position: relative; overflow: hidden; padding-top: 56.25%;">
<iframe src="<[Link]
3!1d2624.991440608209!2d2.292292615674185!3d48.8583700792875!2m
3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%
3A0x8ddca9ee380ef7e0!2sTour%20Eiffel!5e0!3m2!1sfr!2sfr!4v1633011923
456!5m2!1sfr!2sfr>"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
border: 0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>

Solution Exercice 4 :

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Restaurant La Belle Table - Cuisine française à Paris</title>
<meta name="description" content="Restaurant gastronomique proposa
nt une cuisine française traditionnelle avec des produits frais et locaux">
<meta name="keywords" content="restaurant, paris, cuisine française, g
astronomie">
<meta name="author" content="Chef Michel">
<meta property="og:title" content="Restaurant La Belle Table">
<meta property="og:description" content="Découvrez notre cuisine d'ex
ception">
<meta property="og:image" content="<[Link]
oto-1517248135467-4c7edcad34c4?w=1200>">
<meta property="og:url" content="<[Link]
<link rel="canonical" href="<[Link]
</head>

Bonnes pratiques à retenir :

Testez l'accessibilité avec des outils comme Lighthouse

Manuel Complet d'HTML : Du Débutant à l'Expert 35


Utilisez le lazy loading pour les images hors écran

Validez votre HTML avec le validateur W3C

Optimisez les métadonnées pour le référencement

Ressources :

WebAIM : Guide d'accessibilité

MDN ARIA

Google Lighthouse

Partie 5 : Projets et Exercices Pratiques

14. Travaux Pratiques Guidés


Définition : Cette section présente des projets complets qui combinent toutes
les notions apprises. Chaque projet est accompagné d'instructions détaillées et
de conseils pratiques.

Projet 1 : CV en Ligne Responsive

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Mon CV en Ligne</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; }
.container { max-width: 1000px; margin: 0 auto; padding: 20px; }

header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px 20px;
text-align: center;

Manuel Complet d'HTML : Du Débutant à l'Expert 36


}

.profile-img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid white;
margin-bottom: 20px;
}

section {
margin: 30px 0;
padding: 20px;
border-radius: 8px;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h2 {
color: #667eea;
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
margin-bottom: 20px;
}

.competences-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.experience-item {
margin-bottom: 20px;
}

@media (max-width: 768px) {


.container { padding: 10px; }

Manuel Complet d'HTML : Du Débutant à l'Expert 37


header { padding: 20px 10px; }
}
</style>
</head>
<body>
<header>
<img src="<[Link]
d7228f2d?w=300&h=300&fit=crop&crop=face>"
alt="Photo de profil" class="profile-img">
<h1>Jean Dupont</h1>
<p>Développeur Web Fullstack</p>
</header>

<div class="container">
<section id="apropos">
<h2>À Propos</h2>
<p>Développeur passionné avec 5 ans d'expérience dans la créatio
n d'applications web modernes et responsives.</p>
</section>

<section id="competences">
<h2>Compétences Techniques</h2>
<div class="competences-grid">
<div>
<h3>Frontend</h3>
<ul>
<li>HTML5/CSS3</li>
<li>JavaScript/TypeScript</li>
<li>[Link]</li>
</ul>
</div>
<div>
<h3>Backend</h3>
<ul>
<li>[Link]</li>
<li>Python/Django</li>
<li>Bases de données</li>
</ul>

Manuel Complet d'HTML : Du Débutant à l'Expert 38


</div>
</div>
</section>

<section id="experience">
<h2>Expérience Professionnelle</h2>
<div class="experience-item">
<h3>Développeur Senior - TechCorp</h3>
<p><em>2020 - Présent</em></p>
<p>Développement d'applications web complexes avec React et
[Link]</p>
</div>
</section>

<section id="contact">
<h2>Contact</h2>
<form>
<label for="email">Email :</label>
<input type="email" id="email" required>

<label for="message">Message :</label>


<textarea id="message" rows="4" required></textarea>

<button type="submit">Envoyer</button>
</form>
</section>
</div>
</body>
</html>

Résultat visuel :
[En-tête coloré avec photo] → [Sections avec ombres] → [Formulaire de
contact]

Projet 2 : Formulaire de Contact Interactif

<!DOCTYPE html>
<html lang="fr">

Manuel Complet d'HTML : Du Débutant à l'Expert 39


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Formulaire de Contact</title>
<style>
:root {
--primary: #007bff;
--success: #28a745;
--error: #dc3545;
}

.form-container {
max-width: 600px;
margin: 50px auto;
padding: 30px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.form-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input, select, textarea {


width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 5px;
transition: border-color 0.3s;
}

Manuel Complet d'HTML : Du Débutant à l'Expert 40


input:focus, textarea:focus {
border-color: var(--primary);
outline: none;
}

.error {
color: var(--error);
font-size: 0.9em;
margin-top: 5px;
display: none;
}

button {
background: var(--primary);
color: white;
padding: 15px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
}

button:hover {
background: #0056b3;
}

.success-message {
background: var(--success);
color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
display: none;
}
</style>
</head>
<body>

Manuel Complet d'HTML : Du Débutant à l'Expert 41


<div class="form-container">
<h2>Contactez-nous</h2>

<div class="success-message" id="successMessage">


Message envoyé avec succès !
</div>

<form id="contactForm">
<div class="form-group">
<label for="name">Nom complet :</label>
<input type="text" id="name" name="name" required>
<div class="error" id="nameError">Veuillez entrer votre nom</di
v>
</div>

<div class="form-group">
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<div class="error" id="emailError">Email invalide</div>
</div>

<div class="form-group">
<label for="subject">Sujet :</label>
<select id="subject" name="subject" required>
<option value="">Choisissez un sujet</option>
<option value="support">Support technique</option>
<option value="sales">Service commercial</option>
<option value="other">Autre</option>
</select>
</div>

<div class="form-group">
<label for="message">Message :</label>
<textarea id="message" name="message" rows="5" required></
textarea>
<div class="error" id="messageError">Message requis</div>
</div>

Manuel Complet d'HTML : Du Débutant à l'Expert 42


<button type="submit">Envoyer le message</button>
</form>
</div>

<script>
[Link]('contactForm').addEventListener('submit', f
unction(e) {
[Link]();

let isValid = true;

// Validation simple
const name = [Link]('name');
const email = [Link]('email');
const message = [Link]('message');

if (![Link]()) {
[Link]('nameError').[Link] = 'block';
isValid = false;
}

if (![Link]('@')) {
[Link]('emailError').[Link] = 'block';
isValid = false;
}

if (![Link]()) {
[Link]('messageError').[Link] = 'bloc
k';
isValid = false;
}

if (isValid) {
// Simulation d'envoi réussi
[Link]('successMessage').[Link] = 'blo
ck';
[Link]();

Manuel Complet d'HTML : Du Débutant à l'Expert 43


// Cacher le message après 3 secondes
setTimeout(() => {
[Link]('successMessage').[Link] =
'none';
}, 3000);
}
});

// Cacher les messages d'erreur lors de la saisie


const inputs = [Link]('input, textarea');
[Link](input => {
[Link]('input', () => {
[Link]([Link] + 'Error').[Link] = 'non
e';
});
});
</script>
</body>
</html>

Projet 3 : Page de Portfolio avec Galerie

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>Mon Portfolio</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}

.gallery-item {

Manuel Complet d'HTML : Du Débutant à l'Expert 44


position: relative;
overflow: hidden;
border-radius: 10px;
cursor: pointer;
}

.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.3s;
}

.gallery-item:hover img {
transform: scale(1.1);
}

.overlay {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.7);
color: white;
width: 100%;
padding: 20px;
transform: translateY(100%);
transition: transform 0.3s;
}

.gallery-item:hover .overlay {
transform: translateY(0);
}

.modal {
display: none;
position: fixed;
z-index: 1000;
padding: 50px;
left: 0;

Manuel Complet d'HTML : Du Débutant à l'Expert 45


top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
}

.modal-content {
max-width: 90%;
max-height: 90%;
margin: auto;
display: block;
}

.close {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 40px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gallery">
<div class="gallery-item" onclick="openModal('<[Link]
[Link]/photo-1682687980961-78fa83781450?w=800>')">
<img src="<[Link]
fa83781450?w=400>" alt="Projet 1">
<div class="overlay">
<h3>Projet Désert</h3>
<p>Photographie de paysage désertique</p>
</div>
</div>

<div class="gallery-item" onclick="openModal('<[Link]


[Link]/photo-1705517102236-ca5d3832db39?w=800>')">
<img src="<[Link]

Manuel Complet d'HTML : Du Débutant à l'Expert 46


5d3832db39?w=400>" alt="Projet 2">
<div class="overlay">
<h3>Projet Montagne</h3>
<p>Paysage montagneux enneigé</p>
</div>
</div>
</div>

<div id="modal" class="modal">


<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="modalImage">
</div>

<script>
function openModal(src) {
[Link]('modal').[Link] = 'block';
[Link]('modalImage').src = src;
}

function closeModal() {
[Link]('modal').[Link] = 'none';
}

// Fermer la modale en cliquant à l'extérieur


[Link] = function(event) {
if ([Link] === [Link]('modal')) {
closeModal();
}
}
</script>
</body>
</html>

15. Exercices Corrigés


Exercice 1 : Menu Navigation Responsive

Manuel Complet d'HTML : Du Débutant à l'Expert 47


<nav class="navbar">
<div class="nav-brand">MonSite</div>
<button class="nav-toggle">☰</button>
<ul class="nav-menu">
<li><a href="#accueil">Accueil</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<style>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #333;
}

.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}

.nav-toggle {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
}

@media (max-width: 768px) {


.nav-toggle { display: block; }
.nav-menu {
display: none;
flex-direction: column;

Manuel Complet d'HTML : Du Débutant à l'Expert 48


position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #333;
}
}
</style>

Exercice 2 : Tableau de Données Dynamique

<table id="dataTable">
<thead>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Ville</th>
</tr>
</thead>
<tbody>
<!-- Les données seront ajoutées par JavaScript -->
</tbody>
</table>

<script>
const data = [
{ nom: "Alice", age: 25, ville: "Paris" },
{ nom: "Bob", age: 30, ville: "Lyon" }
];

const tbody = [Link]('#dataTable tbody');


[Link](person => {
const tr = [Link]('tr');
[Link] = `
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
`;

Manuel Complet d'HTML : Du Débutant à l'Expert 49


[Link](tr);
});
</script>

Exercice 3 : Formulaire de Recherche

<div class="search-container">
<input type="text" id="searchInput" placeholder="Rechercher...">
<button onclick="performSearch()"> 🔍</button>
<div id="searchResults"></div>
</div>

<script>
function performSearch() {
const query = [Link]('searchInput').value;
// Simulation de résultats
const results = [
"Résultat 1 pour " + query,
"Résultat 2 pour " + query
];

const resultsDiv = [Link]('searchResults');


[Link] = [Link](result =>
`<div class="result-item">${result}</div>`
).join('');
}
</script>

Solutions Détaillées
Solution Projet 1 - Améliorations :

<!-- Ajouter une section formation -->


<section id="formation">
<h2>Formation</h2>
<div class="formation-item">
<h3>Master en Informatique</h3>
<p>Université de Paris - 2019</p>
</div>

Manuel Complet d'HTML : Du Débutant à l'Expert 50


</section>

<!-- Ajouter des icônes de compétences -->


<style>
.competence-item {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
}

.competence-icon {
width: 24px;
height: 24px;
background: #007bff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>

Solution Projet 2 - Validation Avancée :

// Ajouter une validation d'email plus robuste


function validateEmail(email) {
const regex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
return [Link](email);
}

// Ajouter la validation au formulaire


if (!validateEmail([Link])) {
showError('emailError', 'Email invalide');
isValid = false;
}

Manuel Complet d'HTML : Du Débutant à l'Expert 51


Conseils Pratiques :

Testez toujours la responsivité sur mobile

Validez votre HTML avec le validateur W

Utilisez des images optimisées pour le web

Pensez à l'accessibilité (aria-labels, contrastes)

Prochaines Étapes :

Intégration avec CSS avancé

Ajout de fonctionnalités JavaScript

Connexion à une API backend

Déploiement en ligne

Cette partie pratique vous prepare à créer des projets réels et à construire
votre portfolio de développeur web!

Partie 6 : Ressources et Approfondissement

16. Aller Plus Loin


Définition : Cette section explore les concepts avancés qui vous permettront
de passer de développeur HTML compétent à expert. Nous aborderons
l'intégration avec JavaScript, les Web Components et les évolutions futures du
langage.

HTML et Manipulation du DOM avec JavaScript

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Manipulation du DOM</title>
<style>
.container {
max-width: 800px;
margin: 50px auto;

Manuel Complet d'HTML : Du Débutant à l'Expert 52


padding: 20px;
border: 2px solid #333;
border-radius: 10px;
}
.dynamic-content {
padding: 20px;
margin: 10px 0;
background: #f0f0f0;
border-radius: 5px;
}
.user-card {
border: 1px solid #ccc;
padding: 15px;
margin: 10px 0;
border-radius: 8px;
background: white;
}
button {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
background: #007bff;
color: white;
}
button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Manipulation Dynamique du DOM</h1>

<!-- Création d'éléments -->


<button onclick="createElement()">Créer un élément</button>
<button onclick="removeElement()">Supprimer un élément</button>

Manuel Complet d'HTML : Du Débutant à l'Expert 53


<div id="content-area">
<!-- Contenu dynamique ici -->
</div>

<!-- Modification de contenu -->


<div class="dynamic-content">
<p id="text-to-change">Ce texte va être modifié</p>
<button onclick="changeText()">Changer le texte</button>
<button onclick="changeStyle()">Changer le style</button>
</div>

<!-- Formulaire dynamique -->


<div class="dynamic-content">
<h3>Ajouter un utilisateur</h3>
<input type="text" id="userName" placeholder="Nom d'utilisateu
r">
<input type="email" id="userEmail" placeholder="Email">
<button onclick="addUser()">Ajouter</button>

<div id="users-list">
<!-- Liste des utilisateurs -->
</div>
</div>
</div>

<script>
// Création d'éléments
function createElement() {
const newElement = [Link]('div');
[Link] = `
<h4>Nouvel élément créé</h4>
<p>Créé le: ${new Date().toLocaleTimeString()}</p>
<button onclick="[Link]()">Supprimer</butt
on>
`;
[Link] = '#e3f2fd';
[Link] = '15px';

Manuel Complet d'HTML : Du Débutant à l'Expert 54


[Link] = '10px 0';
[Link] = '8px';

[Link]('content-area').appendChild(newElemen
t);
}

// Suppression d'éléments
function removeElement() {
const contentArea = [Link]('content-area');
if ([Link]) {
[Link]();
}
}

// Modification de texte
function changeText() {
const element = [Link]('text-to-change');
[Link] = 'Texte modifié avec succès! ' + new Date().to
LocaleTimeString();
}

// Modification de style
function changeStyle() {
const element = [Link]('text-to-change');
[Link] = '#ff6b6b';
[Link] = 'bold';
[Link] = '1.2em';
}

// Ajout d'utilisateurs
function addUser() {
const name = [Link]('userName').value;
const email = [Link]('userEmail').value;

if (name && email) {


const userCard = [Link]('div');
[Link] = 'user-card';

Manuel Complet d'HTML : Du Débutant à l'Expert 55


[Link] = `
<h4>${name}</h4>
<p>Email: ${email}</p>
<small>Ajouté: ${new Date().toLocaleString()}</small>
<button onclick="[Link]()">Supprimer</bu
tton>
`;

[Link]('users-list').appendChild(userCard);

// Réinitialiser le formulaire
[Link]('userName').value = '';
[Link]('userEmail').value = '';
}
}

// Chargement initial
[Link]('DOMContentLoaded', function() {
[Link]('DOM complètement chargé et analysé');
// Charger des données initiales ici
});
</script>
</body>
</html>

Résultat visuel :
[Interface avec boutons] → [Création dynamique de cartes] → [Modification en
temps réel]

Introduction aux Web Components

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Web Components</title>
<style>
/* Styles globaux */

Manuel Complet d'HTML : Du Débutant à l'Expert 56


body {
font-family: Arial, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}

/* Style pour le composant personnalisé */


user-card {
display: block;
margin: 20px 0;
border: 2px solid #007bff;
border-radius: 10px;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
</style>
</head>
<body>
<h1>Web Components Personnalisés</h1>

<!-- Utilisation de notre composant personnalisé -->


<user-card
name="Marie Dupont"
role="Développeuse Frontend"
avatar="<[Link]
12b786?w=150&h=150&fit=crop&crop=face>"
theme="dark">
</user-card>

<user-card
name="Pierre Martin"
role="Designer UX"
avatar="<[Link]
228f2d?w=150&h=150&fit=crop&crop=face>"
theme="light">
</user-card>

Manuel Complet d'HTML : Du Débutant à l'Expert 57


<script>
// Définition du Web Component
class UserCard extends HTMLElement {
constructor() {
super();
[Link]({ mode: 'open' });
}

connectedCallback() {
[Link]();
}

static get observedAttributes() {


return ['name', 'role', 'avatar', 'theme'];
}

attributeChangedCallback(name, oldValue, newValue) {


[Link]();
}

render() {
const name = [Link]('name') || 'Utilisateur';
const role = [Link]('role') || 'Rôle non défini';
const avatar = [Link]('avatar') || '<[Link]
[Link]/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&cr
op=face>';
const theme = [Link]('theme') || 'light';

[Link] = `
<style>
:host {
display: block;
margin: 20px 0;
border-radius: 15px;
padding: 25px;
font-family: Arial, sans-serif;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);

Manuel Complet d'HTML : Du Débutant à l'Expert 58


}

.card {
display: flex;
align-items: center;
gap: 20px;
}

.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid white;
}

.content h2 {
margin: 0 0 10px 0;
color: ${theme === 'dark' ? 'white' : '#333'};
}

.content p {
margin: 0;
color: ${theme === 'dark' ? '#ccc' : '#666'};
font-size: 1.1em;
}

.theme-dark {
background: linear-gradient(135deg, #2c3e50 0%, #3449
5e 100%);
}

.theme-light {
background: linear-gradient(135deg, #ecf0f1 0%, #bdc3c7
100%);
}
</style>

Manuel Complet d'HTML : Du Débutant à l'Expert 59


<div class="card theme-${theme}">
<img src="${avatar}" alt="${name}" class="avatar">
<div class="content">
<h2>${name}</h2>
<p>${role}</p>
</div>
</div>
`;
}
}

// Enregistrement du custom element


[Link]('user-card', UserCard);
</script>
</body>
</html>

Évolutions Futures (HTML6 et Au-Delà)

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Futures Évolutions HTML</title>
<style>
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 40px 0;
}

.feature-card {
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);

Manuel Complet d'HTML : Du Débutant à l'Expert 60


}

.feature-card h3 {
color: #007bff;
margin-top: 0;
}

.status {
display: inline-block;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.8em;
margin-left: 10px;
}

.[Link] { background: #ffc107; color: black; }


.[Link] { background: #17a2b8; color: white; }
.[Link] { background: #28a745; color: white; }
</style>
</head>
<body>
<h1>Futures Évolutions du HTML</h1>

<div class="feature-grid">
<div class="feature-card">
<h3>Native Dialog Elements <span class="status standard">HTML
5.2</span></h3>
<p>Éléments de dialogue natifs pour les modales</p>
<button onclick="[Link]('demoDialog').showMo
dal()">
Ouvrir la modale
</button>
</div>

<div class="feature-card">
<h3>Web Share API <span class="status proposal">Proposal</spa
n></h3>
<p>Partage natif vers les applications</p>

Manuel Complet d'HTML : Du Débutant à l'Expert 61


<button onclick="shareContent()">Partager cette page</button>
</div>

<div class="feature-card">
<h3>Container Queries <span class="status draft">Draft</span></
h3>
<p>Media queries basées sur la taille du conteneur</p>
</div>
</div>

<!-- Dialog Element (HTML5.2) -->


<dialog id="demoDialog">
<h2>Modale Native HTML</h2>
<p>Ceci est une modale utilisant l'élément &lt;dialog&gt; natif</p>
<button onclick="[Link]('demoDialog').close()">
Fermer
</button>
</dialog>

<script>
// Web Share API
async function shareContent() {
if ([Link]) {
try {
await [Link]({
title: 'Futures Évolutions HTML',
text: 'Découvrez les nouvelles fonctionnalités HTML',
url: [Link]
});
[Link]('Contenu partagé avec succès');
} catch (error) {
[Link]('Partage annulé');
}
} else {
alert('Web Share API non supportée sur ce navigateur');
}
}

Manuel Complet d'HTML : Du Débutant à l'Expert 62


// Exemple de nouvelles APIs
[Link]('visibilitychange', function() {
if ([Link] === 'visible') {
[Link]('Page visible');
} else {
[Link]('Page cachée');
}
});

// Page Visibility API


if ('loading' in [Link]) {
[Link]('Lazy loading natif supporté');
}
</script>
</body>
</html>

17. Ressources Externes


Documentation de Référence

<div class="resources-container">
<h2>Ressources Essentielles</h2>

<div class="resource-category">
<h3> 📚 Documentation Officielle</h3>
<ul>
<li>
<a href="<[Link] tar
get="_blank">
<strong>MDN Web Docs</strong> - Documentation complète
HTML
</a>
<p>La référence la plus complète et à jour</p>
</li>
<li>
<a href="<[Link] target="_blank">
<strong>W3C Specification</strong> - Spécification officielle

Manuel Complet d'HTML : Du Débutant à l'Expert 63


</a>
<p>Document technique complet</p>
</li>
</ul>
</div>

<div class="resource-category">
<h3> 🛠️ Outils de Développement</h3>
<ul>
<li>
<a href="<[Link] target="_blank">
<strong>Validateur HTML W3C</strong>
</a>
<p>Validation de code HTML</p>
</li>
<li>
<a href="<[Link] target="_blank">
<strong>Can I Use</strong>
</a>
<p>Compatibilité des navigateurs</p>
</li>
</ul>
</div>

<div class="resource-category">
<h3> 👥 Communautés</h3>
<ul>
<li>
<a href="<[Link] tar
get="_blank">
<strong>Stack Overflow</strong>
</a>
<p>Questions et réponses techniques</p>
</li>
<li>
<a href="<[Link] target="_blank">
<strong>GitHub</strong>
</a>

Manuel Complet d'HTML : Du Débutant à l'Expert 64


<p>Projets open source</p>
</li>
</ul>
</div>
</div>

<style>
.resources-container {
max-width: 800px;
margin: 40px auto;
padding: 30px;
background: #f8f9fa;
border-radius: 15px;
}

.resource-category {
margin-bottom: 30px;
}

.resource-category h3 {
color: #333;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}

.resource-category ul {
list-style: none;
padding: 0;
}

.resource-category li {
margin: 15px 0;
padding: 15px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Manuel Complet d'HTML : Du Débutant à l'Expert 65


.resource-category a {
color: #007bff;
text-decoration: none;
font-size: 1.1em;
}

.resource-category a:hover {
text-decoration: underline;
}

.resource-category p {
margin: 5px 0 0 0;
color: #666;
font-size: 0.9em;
}
</style>

18. Annexes
Référence des Balises HTML Essentielles

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Référence des Balises HTML</title>
<style>
.cheatsheet {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 40px 0;
}

.tag-card {
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;

Manuel Complet d'HTML : Du Débutant à l'Expert 66


background: white;
}

.tag-name {
background: #007bff;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-family: monospace;
display: inline-block;
margin-bottom: 10px;
}

.tag-description {
color: #666;
line-height: 1.6;
}

.tag-example {
background: #f8f9fa;
padding: 10px;
border-radius: 4px;
font-family: monospace;
font-size: 0.9em;
margin-top: 10px;
border-left: 4px solid #007bff;
}
</style>
</head>
<body>
<h1>Cheat Sheet HTML</h1>

<div class="cheatsheet">
<div class="tag-card">
<span class="tag-name">&lt;section&gt;</span>
<p class="tag-description">Définit une section thématique dans un
document</p>
<div class="tag-example">

Manuel Complet d'HTML : Du Débutant à l'Expert 67


&lt;section&gt;<br>
&nbsp;&nbsp;&lt;h2&gt;Titre&lt;/h2&gt;<br>
&nbsp;&nbsp;&lt;p&gt;Contenu&lt;/p&gt;<br>
&lt;/section&gt;
</div>
</div>

<div class="tag-card">
<span class="tag-name">&lt;article&gt;</span>
<p class="tag-description">Contenu autonome et indépendant</p>
<div class="tag-example">
&lt;article&gt;<br>
&nbsp;&nbsp;&lt;h2&gt;Article&lt;/h2&gt;<br>
&nbsp;&nbsp;&lt;p&gt;Contenu&lt;/p&gt;<br>
&lt;/article&gt;
</div>
</div>

<div class="tag-card">
<span class="tag-name">&lt;details&gt;</span>
<p class="tag-description">Widget d'information dépliable</p>
<div class="tag-example">
&lt;details&gt;<br>
&nbsp;&nbsp;&lt;summary&gt;Voir plus&lt;/summary&gt;<br>
&nbsp;&nbsp;&lt;p&gt;Contenu caché&lt;/p&gt;<br>
&lt;/details&gt;
</div>
</div>
</div>
</body>
</html>

Glossaire des Termes Techniques

<div class="glossary">
<h2>Glossaire Technique</h2>

<div class="term">

Manuel Complet d'HTML : Du Débutant à l'Expert 68


<h3>DOM (Document Object Model)</h3>
<p>Représentation objet d'un document HTML qui permet à JavaScri
pt de manipuler la structure et le contenu.</p>
</div>

<div class="term">
<h3>Semantic HTML</h3>
<p>Utilisation de balises HTML qui décrivent leur contenu de manière
significative pour améliorer l'accessibilité et le SEO.</p>
</div>

<div class="term">
<h3>Web Components</h3>
<p>Ensemble de technologies permettant de créer des éléments pers
onnalisés et réutilisables.</p>
</div>
</div>

<style>
.glossary {
max-width: 800px;
margin: 40px auto;
}

.term {
margin: 20px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #007bff;
}

.term h3 {
color: #333;
margin-top: 0;
}

.term p {

Manuel Complet d'HTML : Du Débutant à l'Expert 69


color: #666;
line-height: 1.6;
margin-bottom: 0;
}
</style>

Exercices d'Approfondissement
Exercice 1 : Créer un Web Component

<!-- Créez un composant <weather-card> qui affiche la météo -->


<weather-card
city="Paris"
temperature="20"
condition="sunny">
</weather-card>

<script>
// À implémenter
class WeatherCard extends HTMLElement {
constructor() {
super();
// Votre code ici
}

connectedCallback() {
[Link]();
}

render() {
// Afficher la météo
}
}

[Link]('weather-card', WeatherCard);
</script>

Exercice 2 : API Modernes

Manuel Complet d'HTML : Du Débutant à l'Expert 70


<!-- Utilisez la Page Visibility API -->
<script>
[Link]('visibilitychange', function() {
if ([Link]) {
[Link]('Page cachée');
} else {
[Link]('Page visible');
}
});
</script>

Ressources Complémentaires
Livres Recommandés :

"HTML and CSS: Design and Build Websites" - Jon Duckett

"Learning Web Design" - Jennifer Robbins

"HTML5: The Missing Manual" - Matthew MacDonald

Cours En Ligne :

MDN Web Docs (gratuit)

FreeCodeCamp (gratuit)

Coursera/edX (cours universitaires)

Outils Avancés :

Web Components DevTools

Lighthouse pour l'audit

BrowserStack pour le testing multi-navigateurs

Cette section conclude votre parcours d'apprentissage HTML et vous prepare


aux technologies web modernes qui construisent sur ces foundations solides!

Manuel Complet d'HTML : Du Débutant à l'Expert 71


Partie 7 : Dictionnaire HTML - Comprendre les Balises,
Attributs et Concepts

Introduction au Dictionnaire HTML


Bienvenue dans le dictionnaire HTML ! Cette partie a pour but de vous
expliquer clairement et simplement tous les éléments, attributs et concepts que
vous avez rencontrés dans ce manuel. Aucun code technique ici - juste des
explications accessibles pour les débutants.

Les Balises HTML Fondamentales


<!DOCTYPE html>

Qu'est-ce que c'est ?


La toute première ligne de votre document HTML. Elle indique au navigateur
que vous utilisez la version HTML5.
À quoi ça sert ?

Elle permet au navigateur de comprendre comment interpréter votre page


correctement.
<html>

Qu'est-ce que c'est ?


La balise racine qui contient tout votre document HTML.
À quoi ça sert ?
C'est le conteneur principal de toute votre page web.
<head>

Qu'est-ce que c'est ?


La "tête" de votre document, invisible pour les visiteurs.
À quoi ça sert ?
Elle contient les métadonnées (informations sur la page), le titre, les liens vers
les fichiers CSS, etc.
<body>

Qu'est-ce que c'est ?


Le "corps" de votre document, visible pour les visiteurs.
À quoi ça sert ?

Manuel Complet d'HTML : Du Débutant à l'Expert 72


Elle contient tout le contenu visible de votre page : textes, images, liens, etc.
<title>

Qu'est-ce que c'est ?


Le titre de votre page web.

À quoi ça sert ?
Il s'affiche dans l'onglet du navigateur et dans les résultats des moteurs de
recherche.

Les Balises de Texte et Structure


<h1> à <h6>

Qu'est-ce que c'est ?


Les titres et sous-titres, du plus important (h1) au moins important (h6).
À quoi ça sert ?
Structurer votre contenu hiérarchiquement, comme dans un livre avec des
chapitres et sections.
<p>

Qu'est-ce que c'est ?


Un paragraphe de texte.
À quoi ça sert ?
Organiser votre texte en blocs cohérents.
<br>

Qu'est-ce que c'est ?


Un saut de ligne (retour à la ligne).
À quoi ça sert ?
Aller à la ligne sans créer un nouveau paragraphe.
<strong>

Qu'est-ce que c'est ?


Du texte important, généralement en gras.
À quoi ça sert ?
Attirer l'attention sur un texte important.
<em>

Manuel Complet d'HTML : Du Débutant à l'Expert 73


Qu'est-ce que c'est ?
Du texte emphatisé, généralement en italique.
À quoi ça sert ?
Mettre l'accent sur un mot ou une phrase.

<ul> et <ol>

Qu'est-ce que c'est ?

<ul> : liste à puces (non ordonnée)

<ol> : liste numérotée (ordonnée)


À quoi ça sert ?
Créer des listes d'éléments.
<li>

Qu'est-ce que c'est ?


Un élément dans une liste.
À quoi ça sert ?
Définir chaque item de vos listes.

Les Balises de Liens et Médias


<a>

Qu'est-ce que c'est ?


Un lien hypertexte.
À quoi ça sert ?
Créer des liens vers d'autres pages ou vers des sections de la même page.
<img>

Qu'est-ce que c'est ?


Une image.
À quoi ça sert ?
Afficher des images dans votre page.
<audio>

Qu'est-ce que c'est ?


Un lecteur audio.

Manuel Complet d'HTML : Du Débutant à l'Expert 74


À quoi ça sert ?

Intégrer et lire des fichiers audio.


<video>

Qu'est-ce que c'est ?


Un lecteur vidéo.

À quoi ça sert ?
Intégrer et lire des fichiers vidéo.

Les Balises de Structure Avancée


<table>

Qu'est-ce que c'est ?


Un tableau.
À quoi ça sert ?
Afficher des données organisées en lignes et colonnes.
<tr>

Qu'est-ce que c'est ?


Une ligne de tableau.
À quoi ça sert ?
Définir chaque ligne dans un tableau.
<td>

Qu'est-ce que c'est ?


Une cellule de données dans un tableau.
À quoi ça sert ?
Contenir les données de votre tableau.
<th>

Qu'est-ce que c'est ?


Une cellule d'en-tête de tableau.
À quoi ça sert ?
Définir les titres des colonnes ou lignes.
<form>

Qu'est-ce que c'est ?

Manuel Complet d'HTML : Du Débutant à l'Expert 75


Un formulaire.
À quoi ça sert ?
Récupérer des informations des utilisateurs.
<input>

Qu'est-ce que c'est ?


Un champ de saisie.
À quoi ça sert ?
Permettre aux utilisateurs de saisir des données.
<select>

Qu'est-ce que c'est ?


Une liste déroulante.
À quoi ça sert ?
Proposer des choix prédéfinis.
<textarea>

Qu'est-ce que c'est ?


Une zone de texte multiligne.
À quoi ça sert ?
Permettre de saisir du texte long.

Les Balises Sémantiques (HTML5)


<header>

Qu'est-ce que c'est ?


L'en-tête d'une page ou d'une section.
À quoi ça sert ?
Contenir le logo, le menu de navigation, etc.
<nav>

Qu'est-ce que c'est ?


La navigation principale.
À quoi ça sert ?
Contenir les liens de menu.
<main>

Manuel Complet d'HTML : Du Débutant à l'Expert 76


Qu'est-ce que c'est ?
Le contenu principal unique.

À quoi ça sert ?
Délimiter le contenu principal de la page.
<article>

Qu'est-ce que c'est ?


Un contenu autonome.

À quoi ça sert ?
Contenir un article, un post de blog, etc.
<section>

Qu'est-ce que c'est ?


Une section thématique.

À quoi ça sert ?
Grouper du contenu par thème.
<aside>

Qu'est-ce que c'est ?


Un contenu complémentaire.

À quoi ça sert ?
Contenir des informations secondaires (barre latérale).
<footer>

Qu'est-ce que c'est ?


Le pied de page.

À quoi ça sert ?
Contenir les informations de bas de page.
<figure>

Qu'est-ce que c'est ?


Une illustration.

À quoi ça sert ?
Contenir une image avec sa légende.
<figcaption>

Manuel Complet d'HTML : Du Débutant à l'Expert 77


Qu'est-ce que c'est ?
La légende d'une illustration.
À quoi ça sert ?
Décrire l'image contenue dans <figure> .

Les Attributs Essentiels


href

Qu'est-ce que c'est ?


L'adresse vers laquelle pointe un lien.
Où l'utiliser ?
Dans les balises <a> pour les liens.
src

Qu'est-ce que c'est ?


La source d'un média (image, vidéo, audio).
Où l'utiliser ?
Dans <img> , <video> , <audio> .
alt

Qu'est-ce que c'est ?


Le texte alternatif d'une image.
À quoi ça sert ?
Décrire l'image si elle ne s'affiche pas, et pour l'accessibilité.
width et height

Qu'est-ce que c'est ?


La largeur et la hauteur d'un élément.
À quoi ça sert ?
Définir les dimensions des images et autres éléments.
id

Qu'est-ce que c'est ?


Un identifiant unique.
À quoi ça sert ?

Manuel Complet d'HTML : Du Débutant à l'Expert 78


Identifier un élément spécifique pour le style ou le JavaScript.
class

Qu'est-ce que c'est ?


Une classe pour grouper des éléments.
À quoi ça sert ?
Appliquer le même style à plusieurs éléments.
required

Qu'est-ce que c'est ?


Indique qu'un champ est obligatoire.
À quoi ça sert ?
Empêcher l'envoi d'un formulaire si le champ est vide.
placeholder

Qu'est-ce que c'est ?


Un texte d'exemple dans un champ.
À quoi ça sert ?
Guider l'utilisateur sur ce qu'il doit saisir.

Les Concepts HTML Importants


Structure en Arborescence
C'est quoi ?
Le HTML est organisé comme un arbre avec des parents et des enfants.
Exemple simple :
<html> est le parent de <head> et <body> , qui sont eux-mêmes parents d'autres
éléments.
Balises Ouvrantes et Fermantes
C'est quoi ?
La plupart des balises ont une ouvrante ( <balise> ) et une fermante ( </balise> ).
Exception :
Les balises auto-fermantes comme <img> ou <br> .
Accessibilité (a11y)

Manuel Complet d'HTML : Du Débutant à l'Expert 79


C'est quoi ?
Rendre votre site utilisable par tout le monde, y compris les personnes
handicapées.
Comment ?
En utilisant les bonnes balises sémantiques et les attributs alt .
Responsive Design
C'est quoi ?
Faire en sorte que votre site s'adapte à toutes les tailles d'écran.
Comment ?
Avec le viewport et en pensant mobile d'abord.
Sémantique HTML
C'est quoi ?
Utiliser les balises qui correspondent au sens de votre contenu.
Pourquoi ?
Meilleur référencement et meilleure accessibilité.
Validation HTML
C'est quoi ?
Vérifier que votre code HTML respecte les standards.
Comment ?
Avec des outils comme le validateur W3C.

SEO (Référencement)
C'est quoi ?
Optimiser votre site pour les moteurs de recherche.
Comment avec HTML ?
En utilisant les bonnes balises sémantiques et les métadonnées.
API HTML5
C'est quoi ?
Des fonctionnalités avancées intégrées aux navigateurs.
Exemples :

Manuel Complet d'HTML : Du Débutant à l'Expert 80


Géolocalisation, stockage local, etc.
Web Components
C'est quoi ?
Créer vos propres balises HTML personnalisées.

À quoi ça sert ?
Réutiliser du code complexe facilement.

Relations entre les Concepts


HTML + CSS = Style
Le HTML structure le contenu, le CSS l'habille.
HTML + JavaScript = Interactivité
Le HTML fournit la structure, JavaScript ajoute l'interaction.

Balises Sémantiques + Accessibilité = Site Universel


Des balises significatives rendent votre site accessible à tous.
Validation + Standards = Compatibilité
Un code valide fonctionne mieux sur tous les navigateurs.
SEO + Sémantique = Meilleur Classement
Un code bien structuré est mieux compris par Google.

Bonnes Pratiques à Retenir


1. Toujours fermer vos balises (sauf les auto-fermantes)

2. Utiliser les balises sémantiques quand c'est possible

3. Ajouter des attributs alt à toutes vos images

4. Valider votre code régulièrement

5. Penser accessibilité dès le début

6. Structurer hiérarchiquement avec h1-h6

7. Utiliser des noms de classes significatifs

8. Tester sur plusieurs navigateurs

9. Optimiser les images pour le web

Manuel Complet d'HTML : Du Débutant à l'Expert 81


10. Apprendre continuellement - le web évolue toujours

Prochaines Étapes Après HTML


Maintenant que vous maîtrisez HTML, vous pouvez :

Apprendre CSS pour styliser vos pages

Découvrir JavaScript pour ajouter de l'interactivité

Explorer les frameworks comme React ou [Link]

Apprendre le responsive design avancé

Découvrir l'accessibilité approfondie

Ce dictionnaire vous servira de référence tout au long de votre apprentissage.


Revenez-y chaque fois que vous avez un doute sur une balise ou un concept !
Fin du Manuel HTML - Félicitations pour votre parcours ! 🎉

Manuel Complet d'HTML : Du Débutant à l'Expert 82

Vous aimerez peut-être aussi