Introduction
Cette page est un document HTML qui vous explique comment fonctionne HTML. Chaque section vous montrera différentes balises et leurs usages.
Balises de Texte
Voici les balises les plus courantes pour structurer le texte.
Titre de niveau 1 (un seul par page en général)
Titre de niveau 2 (pour les sections)
Titre de niveau 3 (pour les sous-sections)
Titre de niveau 4
Titre de niveau 5
Titre de niveau 6
Ceci est un paragraphe (<p>). Il est utilisé pour regrouper du texte.
On peut aussi mettre du texte en gras avec <strong> (importance), en gras avec <b> (juste visuel), en italique avec <em> (emphase), ou en italique avec <i> (juste visuel). On peut souligner avec <u> ou surligner avec <mark>.
Listes
Il existe plusieurs types de listes en HTML.
Liste non ordonnée (<ul>)
- Élément 1
- Élément 2
- Élément 3
Liste ordonnée (<ol>)
- Premier élément
- Deuxième élément
- Troisième élément
Liens (Hyperliens)
Les liens (balise <a>) permettent de naviguer entre les pages ou vers d'autres sites.
target="_blank" ouvre le lien dans un nouvel onglet).
On peut aussi faire un lien vers une section de cette page, comme revenir à l'introduction.
Images
La balise <img> permet d'afficher une image. L'attribut alt est important
pour l'accessibilité.
Tableaux
Les tableaux (<table>) sont utilisés pour afficher des données tabulaires.
| Nom | Prénom | Ville |
|---|---|---|
| Dupont | Jean | Paris |
| Martin | Marie | Lyon |
Formulaires
Les formulaires (<form>) permettent de collecter des informations auprès des
utilisateurs.
Afficher du code
Pour afficher une petite portion de code en ligne, on utilise la balise <code>.
Pour afficher un bloc de code, on combine <pre> (qui préserve les espaces et sauts de
ligne) et <code>.
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<h1>Mon premier titre</h1>
<p>Mon premier paragraphe.</p>
</body>
</html>Note : Les caractères < et > ont été remplacés par <
et > pour que le navigateur ne les interprète pas comme des balises.
Utilisation : pratiquer le HTML en direct
Ici, tout est déjà prêt, vous devez juste compléter le code dans la zone de gauche
(les commentaires <!-- TODO --> indiquent quoi faire). Ensuite, cliquez sur
“Exécuter le code” pour voir la page à droite.