1. Introduction à HTML .............................................................................................................

3
Qu'est-ce qu'HTML ? ............................................................................................................. 3
Structure de base d'une page HTML ...................................................................................... 3
Balises et éléments ................................................................................................................. 3
2. Titres, Paragraphes et Styles de Texte ................................................................................... 4
Les balises de titres <h1> à <h6> ........................................................................................... 4
Les balises de paragraphe <p> ............................................................................................... 4
Mise en forme du texte ........................................................................................................... 4
3. Liens et Ancres ....................................................................................................................... 5
Créer des liens hypertexte avec <a> ....................................................................................... 5
L'attribut href et les liens internes/externes ............................................................................ 5
Les ancres internes <a> pour la navigation dans la même page ............................................ 5
4. Images et Multimédia ............................................................................................................. 6
Intégrer des images avec <img>............................................................................................. 6
Vidéo et audio avec les balises <video> et <audio> .............................................................. 6
5. Listes ...................................................................................................................................... 6
Les listes non ordonnées <ul> ................................................................................................ 6
Les listes ordonnées <ol> ....................................................................................................... 7
Les listes de définitions <dl> ................................................................................................. 7
6. Tableaux ................................................................................................................................. 7
Créer un tableau avec <table> ................................................................................................ 7
7. Formulaires ............................................................................................................................. 8
Les bases des formulaires avec <form> ................................................................................. 8
Les champs de saisie : <input> .............................................................................................. 8
Les boutons <button> et <input type="submit"> ................................................................... 8
Les menus déroulants <select> et <option> ........................................................................... 9
8. Cadres et iFrames ................................................................................................................... 9
Introduction aux cadres <frame> et <frameset> .................................................................... 9
Utilisation des iFrames <iframe> ........................................................................................... 9
9. Sémantique HTML ................................................................................................................. 9
Les nouvelles balises sémantiques ......................................................................................... 9
10. Meta Tags et SEO .............................................................................................................. 10
Les balises <meta> pour les informations méta ................................................................... 10
Optimisation pour les moteurs de recherche (SEO) ............................................................. 10
11. Validation et Bonnes Pratiques .......................................................................................... 11
L'utilité de la validation HTML ........................................................................................... 11
Bonnes pratiques pour écrire du code HTML propre et bien structuré ................................ 11
12. HTML5 APIs ...................................................................................................................... 11
Introduction aux API HTML5.............................................................................................. 11
1. Introduction à HTML
Qu'est-ce qu'HTML ?
HTML (HyperText Markup Language) est un langage de balisage utilisé pour créer des pages
web. Il permet de structurer le contenu d'une page en utilisant des balises (tags) pour définir le
rôle et l'apparence des éléments. Les navigateurs web interprètent ces balises pour afficher le
contenu de manière appropriée.

Structure de base d'une page HTML

Une page HTML de base commence par une déclaration doctype indiquant la version
d'HTML utilisée, suivie de la balise <html> qui englobe tout le contenu de la page. L'intérieur
de la balise <html> contient deux sections principales : <head> et <body>.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cours Complet sur HTML</title>
</head>
<body>

</body>
</html>

Balises et éléments
Les balises HTML sont des marqueurs entourés de chevrons angulaires ("<" et ">"). Elles
sont utilisées pour encadrer le contenu et fournir des informations sur la structure de la page.
Les balises se composent généralement d'une balise ouvrante et d'une balise fermante, avec le
contenu entre les deux.

Exemple :

<p>Ceci est un paragraphe.</p>

Certaines balises n'ont pas de contenu et sont appelées balises autonomes (self-closing tags).
Elles se terminent par "/>".

Exemple :

<img src="[Link]" alt="Image">

2. Titres, Paragraphes et Styles de Texte
Les balises de titres <h1> à <h6>
Les balises de titres sont utilisées pour définir les différents niveaux de titres et sous-titres sur
une page. <h1> est le titre principal, et <h6> est le sous-titre le plus bas.

Exemple :

<h1>Ceci est un titre de niveau 1</h1>

<h2>Ceci est un titre de niveau 2</h2>

Les balises de paragraphe <p>

La balise <p> est utilisée pour définir un paragraphe de texte.

Exemple :

<p>Ceci est un paragraphe.</p>

Mise en forme du texte

HTML fournit des balises pour mettre en forme le texte, telles que <em> pour l'italique,
<strong> pour le gras, <u> pour souligner, <s> pour barrer le texte, <sub> pour le texte en
indice, et <sup> pour le texte en exposant.

Exemple :

<p><em>Ceci est un texte en italique.</em></p>

<p><strong>Ceci est un texte en gras.</strong></p>
<p><u>Ceci est un texte souligné.</u></p>
<p><s>Ceci est un texte barré.</s></p>
<p>Ceci est un texte en _indice et en ^exposant.</p>

Les sauts de ligne <br> et les règles horizontales <hr>

La balise <br> est utilisée pour insérer un saut de ligne.

Exemple :

<p>Ceci est une première ligne.<br>Ceci est une deuxième ligne.</p>

La balise <hr> est utilisée pour insérer une règle horizontale.

Exemple :

<p>Ceci est un paragraphe.</p>

<hr>
<p>Ceci est un autre paragraphe.</p>

3. Liens et Ancres
Créer des liens hypertexte avec <a>
La balise <a> (anchor) est utilisée pour créer des liens hypertexte vers d'autres pages web, des
fichiers, des adresses email, etc.

Exemple :

<a href="[Link] ici pour visiter [Link]</a>

L'attribut href et les liens internes/externes

L'attribut href spécifie l'URL de destination du lien. Les liens peuvent être internes à la même
page ou externes vers d'autres pages web.

Exemple de lien interne :

<a href="#section2">Cliquez ici pour aller à la section 2</a>

Exemple de lien externe :

<a href="[Link] ici pour visiter [Link]</a>

Les ancres internes <a> pour la navigation dans la même page

Les ancres internes permettent de créer des liens pour naviguer à l'intérieur de la même page
en se référant à un élément spécifique.

Exemple :

<a href="#section2">Aller à la section 2</a>

...
<h2 id="section2">Section 2</h2>
<p>Ceci est le contenu de la section 2.</p>

4. Images et Multimédia
Intégrer des images avec <img>
La balise <img> est utilisée pour insérer des images dans une page web.

Exemple :

<img src="[Link]" alt="Image">

L'attribut src spécifie l'URL de l'image, tandis que l'attribut alt fournit un texte alternatif en
cas d'impossibilité d'afficher l'image.

Vidéo et audio avec les balises <video> et <audio>

Les balises <video> et <audio> permettent d'intégrer des vidéos et des fichiers audio dans une
page web.

Exemple de vidéo :

<video width="320" height="240" controls>

<source src="video.mp4" type="video/mp4">
Votre navigateur ne prend pas en charge la vidéo.
</video>

Exemple d'audio :

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Votre navigateur ne prend pas en charge l'audio.
</audio>

5. Listes
Les listes non ordonnées <ul>
La balise <ul> est utilisée pour créer une liste non ordonnée.

Exemple :
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>

Les listes ordonnées <ol>

La balise <ol> est utilisée pour créer une liste ordonnée.

Exemple :

<ol>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ol>

Les listes de définitions <dl>

La balise <dl> est utilisée pour créer une liste de définitions.

Exemple :

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

6. Tableaux
Créer un tableau avec <table>
La balise <table> est utilisée pour créer un tableau.

Exemple :

<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>John Doe</td>
 <td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>

Les balises <tr>, <th> et <td> définissent les lignes, les en-têtes de colonnes et les cellules de
données du tableau.

7. Formulaires
Les bases des formulaires avec <form>
La balise <form> est utilisée pour créer un formulaire.

Exemple :

<form action="/traiter_formulaire" method="post">

</form>

Les champs de saisie : <input>

La balise <input> est utilisée pour créer divers champs de saisie.

Exemple de champ de texte :

<label for="nom">Nom :</label>

<input type="text" id="nom" name="nom" required>

Exemple de champ de mot de passe :

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

<input type="password" id="motdepasse" name="motdepasse" required>

Les boutons <button> et <input type="submit">

Les balises <button> et <input type="submit"> créent des boutons pour soumettre le
formulaire.

Exemple de bouton avec <button> :

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

Exemple de bouton avec <input> :

<input type="submit" value="Envoyer">

Les menus déroulants <select> et <option>

Les balises <select> et <option> créent des menus déroulants.

Exemple :

<label for="pays">Pays :</label>

<select id="pays" name="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
</select>

8. Cadres et iFrames
Introduction aux cadres <frame> et <frameset>
Les cadres (<frame>) et les ensembles de cadres (<frameset>) étaient utilisés pour diviser une
page en plusieurs sections indépendantes avec leur propre contenu. Cependant, ils ne sont plus
recommandés car ils posent des problèmes d'accessibilité et de référencement.

Utilisation des iFrames <iframe>

Les iFrames (<iframe>) permettent d'intégrer une page web ou un contenu externe dans une
autre page.

Exemple :

<iframe src="[Link] width="500" height="300"

frameborder="0" scrolling="auto"></iframe>

9. Sémantique HTML
Les nouvelles balises sémantiques
HTML5 introduit des balises sémantiques qui décrivent le rôle du contenu plutôt que sa
présentation. Elles facilitent la compréhension du contenu par les machines et améliorent
l'accessibilité.

Exemples :

<header>
<h1>Titre du site</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<article>
<h2>Titre de l'article</h2>
<p>Contenu de l'article...</p>
</article>

Avantages de l'utilisation des balises sémantiques : elles améliorent la lisibilité du code,

facilitent la maintenance, aident les moteurs de recherche à mieux comprendre le contenu et
améliorent l'accessibilité pour les personnes handicapées.

10. Meta Tags et SEO

Les balises <meta> pour les informations méta
Les balises <meta> sont utilisées pour fournir des informations méta sur la page, telles que
l'encodage des caractères, la description, les mots-clés, etc.

Exemples :

<meta charset="UTF-8">
<meta name="description" content="Ceci est la description de ma page.">
<meta name="keywords" content="HTML, CSS, JavaScript">

Optimisation pour les moteurs de recherche (SEO)

L'utilisation appropriée des balises méta, des titres de page, des balises de titre (<h1>, <h2>,
etc.) et de contenu de qualité aide à optimiser votre page pour un meilleur classement dans les
moteurs de recherche.
11. Validation et Bonnes Pratiques
L'utilité de la validation HTML
La validation HTML consiste à vérifier que votre code respecte les normes et les règles du
langage. Cela aide à éviter les erreurs et les incompatibilités entre les navigateurs.

Bonnes pratiques pour écrire du code HTML propre et bien

structuré
Quelques bonnes pratiques incluent l'utilisation de balises sémantiques, l'indentation pour une
meilleure lisibilité, l'utilisation de noms de classe et d'identifiants significatifs, et l'ajout de
commentaires pour expliquer le code.

12. HTML5 APIs

Introduction aux API HTML5
HTML5 offre de nombreuses API intégrées qui permettent aux pages web d'accéder à des
fonctionnalités avancées du navigateur et du périphérique.

Exemples d'API HTML5 :

• Géolocalisation : Accéder aux coordonnées GPS de l'utilisateur.

• Historique : Modifier l'historique du navigateur sans recharger la page.
• Web Storage : Stocker des données localement dans le navigateur.
• Drag and Drop : Permettre aux utilisateurs de faire glisser et déposer des éléments sur
la page.

Ceci conclut notre cours complet sur HTML. En maîtrisant les concepts et les exemples
présentés dans ce cours, vous serez en mesure de créer des pages web bien structurées et
conformes aux normes HTML. N'hésitez pas à pratiquer et à explorer davantage pour
améliorer vos compétences en HTML et continuer à apprendre d'autres technologies web,
telles que CSS et JavaScript, pour rendre vos pages web encore plus attrayantes et
interactives. Bonne continuation dans votre apprentissage du développement web !