Cours Complet : Développement HTML
1. Introduction au HTML
Le HTML (HyperText Markup Language) est le langage de base utilisé pour structurer
et présenter le contenu sur le web. Il ne s'agit pas d'un langage de programmation avec
de la logique, mais d'un langage de balisage.
Le navigateur lit le document HTML et l'interprète pour afficher une interface graphique
à l'utilisateur.
2. Structure Fondamentale d'un Document
Tout document HTML5 doit commencer par la déclaration du type de document. Le
reste du code se divise en deux parties principales : l'en-tête (head) et le corps (body).
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Premier Site</title>
</head>
<body>
<h1>Bienvenue</h1>
</body>
</html>
3. Balises et Éléments
Un élément HTML est généralement composé d'une balise d'ouverture, du contenu, et
d'une balise de fermeture (ex: <p>Texte</p>). Certaines balises, appelées orphelines,
se suffisent à elles-mêmes (ex: <img>, <br>).
Le texte se hiérarchise avec des niveaux de titre allant de h1 (le plus important) à h6.
Les paragraphes s'écrivent avec la balise p.
4. Attributs
Les attributs fournissent des informations supplémentaires sur les éléments. Ils
s'insèrent toujours dans la balise d'ouverture sous le format nom="valeur".
<a href="[Link] target="_blank">Cliquez ici</a>
<img src="[Link]" alt="Logo de l'entreprise">
5. Listes et Tableaux
Le HTML différencie les listes non ordonnées (à puces, ul) des listes ordonnées
(numérotées, ol). Chaque élément de la liste s'insère dans une balise li.
Les tableaux utilisent l'élément table. Les lignes sont définies par tr, les cellules d'en-
tête par th, et les cellules de données classiques par td.
<ul>
<li>Café</li>
<li>Thé</li>
</ul>
6. Liens et Navigation
La balise a (anchor) permet de créer des liens hypertextes. Elle permet de lier
différentes pages d'un même site (liens relatifs) ou de rediriger vers des sites externes
(liens absolus).
L'attribut id permet également de créer des ancres pour scroller directement vers une
section précise de la page active.
7. Sémantique HTML5
L'évolution HTML5 a introduit des balises sémantiques. Elles indiquent clairement le
rôle de chaque bloc, améliorant à la fois le référencement naturel (SEO) et
l'accessibilité pour les lecteurs d'écran.
<header>En-tête de la page</header>
<nav>Menu de navigation</nav>
<main>
<article>Contenu principal</article>
<aside>Barre latérale</aside>
</main>
<footer>Pied de page</footer>
8. Les Formulaires
L'élément form permet de récolter des données utilisateur. La balise input prend
plusieurs formes (texte, mot de passe, email, radio) selon son attribut type.
<form action="/submit" method="POST">
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<button type="submit">Envoyer</button>
</form>
9. Intégration Multimédia
Le HTML5 permet d'intégrer nativement de l'audio et de la vidéo sans recourir à des
plugins externes (comme Flash autrefois). Les balises audio et video gèrent des
contrôles natifs de lecture.
<video controls width="500">
<source src="film.mp4" type="video/mp4">
Votre navigateur ne supporte pas la vidéo.
</video>
10. Liaison avec CSS et JavaScript
Le HTML ne gère ni le design (couleurs, polices, mise en page complexe) ni le
comportement dynamique. Le design est géré par les feuilles de style CSS, liées dans
le <head> via la balise <link>. L'interactivité est gérée par JavaScript, lié en fin de
<body> avec la balise <script>.