Menu

Formation HTML5

Maîtrisez les bases du HTML5

Faire un don

Créez un compte gratuitement

Suivez votre progression, sauvegardez vos avancées et obtenez des certificats de complétion. Rejoignez des milliers d'apprenants qui développent leurs compétences avec nous !

Suivi de progression détaillé
Certificats téléchargeables
Badges et accomplissements

Introduction à HTML5

HTML5 est la dernière version du langage HTML (HyperText Markup Language). C'est le langage standard pour créer et structurer le contenu des pages web.

🚀 Pourquoi apprendre HTML5 ?

  • ✅ Essentiel pour le développement web - C'est la base de tous les sites web
  • ✅ Facile à apprendre - Syntaxe simple et intuitive
  • ✅ Très demandé - Compétence recherchée par les employeurs
  • ✅ Compatible - Fonctionne sur tous les navigateurs modernes
  • ✅ Gratuit - Aucun logiciel payant nécessaire

💻 Éditeurs HTML

Pour écrire du code HTML, vous avez besoin d'un éditeur de texte. Voici les meilleurs éditeurs pour débuter :

Éditeurs recommandés :

  • ✅ Visual Studio Code - Gratuit, puissant, extensions nombreuses
  • ✅ Sublime Text - Rapide et léger
  • ✅ Atom - Open source et personnalisable
  • ✅ Notepad++ - Simple et efficace (Windows)
  • ✅ Brackets - Spécialisé pour le web

Installation de VS Code

1. Téléchargez VS Code depuis code.visualstudio.com

2. Installez l'extension "Live Server" pour prévisualiser vos pages

3. Créez un fichier avec l'extension .html .html

4. Tapez ! puis Tab pour générer une structure HTML5

💡 Astuce : VS Code offre l'auto-complétion, la coloration syntaxique et le débogage intégré. C'est l'éditeur le plus populaire chez les développeurs web !

📚 HTML Basique

Comprendre les concepts de base est essentiel pour maîtriser HTML5.

Structure minimale d'une page HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma Page</title>
</head>
<body>
    <!-- Votre contenu ici -->
</body>
</html>

Les balises de base

  • <!DOCTYPE html> - Déclare le type de document
  • <html> - Conteneur principal
  • <head> - Métadonnées (non visibles)
  • <body> - Contenu visible de la page
  • <meta> - Informations sur la page
  • <title> - Titre dans l'onglet du navigateur

📝 Votre premier document HTML5

Voici la structure de base d'un document HTML5 :

Exemple - Structure HTML5

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Première Page HTML5</title>
</head>
<body>
    <h1>Bienvenue sur ma page !</h1>
    <p>Ceci est mon premier paragraphe HTML5.</p>
</body>
</html>

💡 Explication :

  • <!DOCTYPE html> - Déclare que c'est un document HTML5
  • <html> - Élément racine de la page
  • <head> - Contient les métadonnées (titre, encodage, etc.)
  • <body> - Contient le contenu visible de la page

🧩 Les Éléments HTML

Un élément HTML est défini par une balise d'ouverture, du contenu, et une balise de fermeture :

<nombalise>Le contenu va ici...</nombalise>

Éléments HTML courants :

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<p>Un paragraphe de texte.</p>
<a href="https://example.com">Un lien</a>
<img src="image.jpg" alt="Description">
<div>Un conteneur</div>
<span>Un élément en ligne</span>

⚙️ Les Attributs HTML

Les attributs fournissent des informations supplémentaires sur les éléments HTML. Ils sont toujours spécifiés dans la balise d'ouverture.

Exemple d'attributs

<a href="https://devformation.com" target="_blank" title="Visitez DevFormation">
    Cliquez ici
</a>

<img src="logo.png" alt="Logo DevFormation" width="200" height="100">

<div id="header" class="container">Contenu</div>

Attributs les plus utilisés :

  • href - Spécifie l'URL d'un lien
  • src - Spécifie la source d'une image
  • alt - Texte alternatif pour les images
  • id - Identifiant unique d'un élément
  • class - Classe CSS pour styliser l'élément
  • style - Style CSS inline
  • title - Information supplémentaire (tooltip)

📌 Les Titres HTML

HTML propose 6 niveaux de titres, de <h1> à <h6> :

<h1>Titre de niveau 1 (le plus important)</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6 (le moins important)</h6>

⚠️ Important : Utilisez <h1> pour le titre principal de la page (un seul par page). Les moteurs de recherche utilisent les titres pour indexer le contenu.

📄 Les Paragraphes

L'élément <p> définit un paragraphe. Les navigateurs ajoutent automatiquement un espace avant et après chaque paragraphe.

<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p>Les paragraphes peuvent contenir <strong>du texte en gras</strong> et <em>en italique</em>.</p>

🎨 Styles CSS

Vous pouvez ajouter du style à vos éléments HTML de trois façons différentes :

1. Style inline (dans la balise)

<p style="color: blue; font-size: 20px;">Texte bleu</p>

2. Style interne (dans le <head>)

<head>
  <style>
    p { color: red; }
  </style>
</head>

3. Style externe (fichier CSS séparé)

<head>
  <link rel="stylesheet" href="styles.css">
</head>

💡 Bonne pratique : Utilisez toujours un fichier CSS externe pour faciliter la maintenance et la réutilisation du code.

✨ Formatage du Texte

HTML propose plusieurs balises pour formater le texte :

<b>Texte en gras</b>
<strong>Texte important (gras)</strong>
<i>Texte en italique</i>
<em>Texte accentué (italique)</em>
<mark>Texte surligné</mark>
<small>Texte plus petit</small>
<del>Texte supprimé</del>
<ins>Texte inséré</ins>
<sub>Texte en indice</sub>
<sup>Texte en exposant</sup>

💬 Citations et Quotations

HTML propose plusieurs balises pour afficher des citations et des références.

Citation courte (<q>)

<p>Einstein a dit : <q>L'imagination est plus importante que le savoir</q></p>

Citation longue (<blockquote>)

<blockquote cite="https://source.com">
  Ceci est une citation longue qui sera affichée avec une indentation.
</blockquote>

Autres balises utiles

<abbr title="HyperText Markup Language">HTML</abbr>
<cite>Le Petit Prince</cite>
<address>123 Rue Example, Dakar</address>

📝 Commentaires HTML

Les commentaires permettent d'ajouter des notes dans votre code qui ne seront pas affichées dans le navigateur.

<!-- Ceci est un commentaire sur une ligne -->

<!--
  Ceci est un commentaire
  sur plusieurs lignes
-->

<p>Contenu visible</p>
<!-- <p>Contenu commenté (caché)</p> -->

💡 Utilité des commentaires :

  • Expliquer le code complexe
  • Désactiver temporairement du code
  • Marquer des sections importantes
  • Collaborer avec d'autres développeurs

🌈 Couleurs HTML

HTML supporte plusieurs formats pour définir les couleurs.

1. Noms de couleurs

<p style="color: red;">Texte rouge</p>
<p style="color: blue;">Texte bleu</p>

2. Code hexadécimal

<p style="color: #FF0000;">Rouge</p>
<p style="color: #00FF00;">Vert</p>
<p style="color: #0000FF;">Bleu</p>

3. RGB et RGBA

<p style="color: rgb(255, 0, 0);">Rouge RGB</p>
<p style="color: rgba(0, 0, 255, 0.5);">Bleu transparent</p>

Les liens permettent de naviguer entre les pages. Utilisez la balise <a> avec l'attribut href :

<a href="https://devformation.com">Visitez DevFormation</a>
<a href="contact.html">Page de contact</a>
<a href="#section1">Aller à la section 1</a>
<a href="mailto:contact@devformation.com">Envoyez un email</a>
<a href="tel:+221783123657">Appelez-nous</a>

🖼️ Les Images HTML

L'élément <img> permet d'insérer des images dans une page web. L'attribut src spécifie le chemin de l'image et alt fournit un texte alternatif.

<img src="photo.jpg" alt="Description de l'image">
<img src="logo.png" alt="Logo" width="300" height="200">

📊 Les Tableaux HTML

Les tableaux HTML permettent d'organiser et d'afficher des données structurées en lignes et colonnes. Ils sont essentiels pour présenter des informations tabulaires de manière claire et organisée.

Structure d'un tableau

Un tableau HTML est composé de plusieurs éléments :

  • <table> - Conteneur principal du tableau
  • <thead> - En-tête du tableau (optionnel mais recommandé)
  • <tbody> - Corps du tableau contenant les données
  • <tfoot> - Pied du tableau (optionnel)
  • <tr> - Ligne du tableau (Table Row)
  • <th> - Cellule d'en-tête (Table Header)
  • <td> - Cellule de données (Table Data)

Exemple de tableau complet

<table border="1">
  <thead>
    <tr>
      <th>Nom</th>
      <th>Âge</th>
      <th>Ville</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jean Dupont</td>
      <td>25</td>
      <td>Dakar</td>
    </tr>
    <tr>
      <td>Marie Martin</td>
      <td>30</td>
      <td>Thiès</td>
    </tr>
  </tbody>
</table>

Attributs importants des tableaux

Fusion de cellules

<!-- Fusion horizontale (colspan) -->
<td colspan="2">Cette cellule occupe 2 colonnes</td>

<!-- Fusion verticale (rowspan) -->
<td rowspan="3">Cette cellule occupe 3 lignes</td>

💡 Bonnes pratiques :

  • Utilisez toujours <thead> et <tbody> pour une meilleure structure
  • Les <th> rendent le tableau plus accessible aux lecteurs d'écran
  • Ajoutez un attribut caption pour décrire le tableau
  • Utilisez CSS pour le style plutôt que les attributs HTML obsolètes

📝 Les Listes HTML

HTML propose trois types de listes pour organiser et présenter des informations de manière structurée. Chaque type de liste a son utilité spécifique.

1. Liste non ordonnée (<ul>)

Utilisée pour des éléments sans ordre particulier. Par défaut, les éléments sont affichés avec des puces.

<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>JavaScript</li>
</ul>

Résultat : • HTML5 • CSS3 • JavaScript

2. Liste ordonnée (<ol>)

Utilisée pour des éléments qui suivent un ordre spécifique. Les éléments sont numérotés automatiquement.

<ol>
  <li>Ouvrir l'éditeur</li>
  <li>Écrire le code HTML</li>
  <li>Enregistrer le fichier</li>
  <li>Ouvrir dans le navigateur</li>
</ol>

Résultat : 1. Ouvrir l'éditeur 2. Écrire le code HTML 3. Enregistrer...

Attributs des listes ordonnées

<!-- Type de numérotation -->
<ol type="A"> <!-- A, B, C... -->
<ol type="a"> <!-- a, b, c... -->
<ol type="I"> <!-- I, II, III... -->
<ol type="i"> <!-- i, ii, iii... -->

<!-- Commencer à un numéro spécifique -->
<ol start="5"> <!-- Commence à 5 -->
  <li>Élément 5</li>
  <li>Élément 6</li>
</ol>

3. Liste de définition (<dl>)

Utilisée pour afficher des termes et leurs définitions, comme un glossaire.

<dl>
  <dt>HTML</dt>
  <dd>Langage de balisage pour créer des pages web</dd>

  <dt>CSS</dt>
  <dd>Langage de style pour la présentation des pages web</dd>
</dl>

Listes imbriquées

Vous pouvez créer des listes à plusieurs niveaux en imbriquant des listes :

<ul>
  <li>Technologies Front-end
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Technologies Back-end
    <ul>
      <li>PHP</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

💡 Quand utiliser chaque type :

  • <ul> - Liste de courses, caractéristiques d'un produit, menu de navigation
  • <ol> - Instructions étape par étape, classements, recettes de cuisine
  • <dl> - Glossaires, FAQ, métadonnées

📋 Les Formulaires HTML

Les formulaires HTML permettent aux utilisateurs d'interagir avec votre site en saisissant et soumettant des données. Essentiels pour inscriptions, connexions, recherches et commentaires.

Structure de base

<form action="/traitement.php" 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">

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

Types de champs input

  • text - Texte simple
  • email - Adresse email (validation automatique)
  • password - Mot de passe (masqué)
  • number - Nombres uniquement
  • tel - Numéro de téléphone
  • date - Sélecteur de date
  • checkbox - Cases à cocher
  • radio - Boutons radio
  • file - Upload de fichiers

Autres éléments de formulaire

<!-- Zone de texte multiligne -->
<textarea name="message" rows="5"></textarea>

<!-- Liste déroulante -->
<select name="pays">
  <option value="sn">Sénégal</option>
  <option value="fr">France</option>
</select>

💡 Bonnes pratiques :

  • Toujours associer un <label> à chaque champ avec l'attribut for
  • Utiliser placeholder pour des exemples de saisie
  • Ajouter required pour les champs obligatoires
  • Utiliser les bons types d'input pour la validation automatique

🎬 Audio et Vidéo HTML5

HTML5 permet d'intégrer facilement des médias audio et vidéo sans plugins externes.

Vidéo HTML5

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Votre navigateur ne supporte pas la vidéo.
</video>

Audio HTML5

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

🎨 Canvas HTML5

L'élément <canvas> permet de dessiner des graphiques dynamiques avec JavaScript.

<canvas id="monCanvas" width="400" height="200"></canvas>
<script>
  const ctx = document.getElementById('monCanvas').getContext('2d');
  ctx.fillStyle = '#04AA6D';
  ctx.fillRect(20, 20, 150, 100);
</script>

🖌️ SVG

SVG permet de créer des graphiques vectoriels qui s'adaptent à toutes les tailles.

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="#04AA6D"/>
</svg>

⚡ APIs HTML5

HTML5 introduit de nombreuses APIs JavaScript pour créer des applications web puissantes.

Geolocation API

<script>
  navigator.geolocation.getCurrentPosition(function(pos) {
    console.log(pos.coords.latitude);
  });
</script>

🏗️ HTML Sémantique

HTML5 introduit des balises sémantiques qui donnent du sens au contenu.

<header>En-tête de la page</header>
<nav>Menu de navigation</nav>
<main>
  <article>Contenu principal</article>
  <aside>Contenu secondaire</aside>
</main>
<footer>Pied de page</footer>

🎓 Prochaines étapes

Maintenant que vous connaissez les bases, explorez les autres chapitres dans le menu de gauche pour approfondir vos connaissances en HTML5 !

✅ Ce que vous avez appris :

  • La structure de base d'un document HTML5
  • Les éléments et balises HTML
  • Les attributs HTML
  • Les titres et paragraphes
  • Le formatage du texte
  • Les liens hypertextes
  • Les images
  • Les tableaux avec fusion de cellules
  • Les listes (ordonnées, non ordonnées, définition)
  • Les formulaires et leurs éléments
  • HTML Sémantique
  • Audio et Vidéo HTML5
  • Canvas et SVG
  • Les APIs HTML5
❮ Accueil Suivant: CSS3 ❯
Cliquer pour discuter avec NiangProgrammeur
NiangProgrammeur
En ligne

Bonjour ! 👋

Comment puis-je vous aider aujourd'hui ?

Ouvrir WhatsApp