Cours sur la technologie HTML
Introduction à la technologie HTML (HyperText Markup Language)
HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu
d'une page web. Il permet de créer et organiser des éléments tels que des textes, des images, des
vidéos, des liens, et bien plus.
1. Bases de HTML
Une page HTML est composée de balises entourées de chevrons <>. Ces balises servent à
indiquer le rôle de chaque élément dans la page. Les balises fonctionnent souvent par paires : une
balise d'ouverture et une balise de fermeture.
Exemple de structure HTML de base :
<!DOCTYPE html>
<html>
<head>
<title>Ma première page</title>
</head>
<body>
<h1>Bienvenue sur ma page web</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>
Explications :
- <!DOCTYPE html> : indique que le document utilise HTML5.
- <html> : balise racine de la page.
Page 1
Cours sur la technologie HTML
- <head> : contient des métadonnées (informations sur la page, titre, styles, etc.).
- <title> : titre qui apparaît dans l'onglet du navigateur.
- <body> : contient le contenu visible par les utilisateurs.
2. Les balises principales
| Balise | Utilisation |
|---------------|-------------------------------------------|
| <h1> à <h6> | Titres (h1 est le plus grand, h6 le plus petit). |
| <p> | Paragraphe. |
| <a> | Lien hypertexte. |
| <img> | Image. |
| <ul> et <li> | Liste à puces. |
| <ol> et <li> | Liste numérotée. |
| <div> | Conteneur de blocs. |
| <span> | Conteneur en ligne pour le texte. |
3. Ajouter des liens et des images
a) Lien hypertexte :
<a href="[Link] ici</a>
- href : attribue l'adresse du lien.
b) Image :
<img src="[Link]" alt="Description de l'image">
- src : chemin de l'image.
- alt : texte alternatif (utile si l'image ne s'affiche pas).
Page 2
Cours sur la technologie HTML
4. Créer des listes
a) Liste à puces :
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
b) Liste numérotée :
<ol>
<li>Élément 1</li>
<li>Élément 2</li>
</ol>
5. Tableaux
Pour structurer des données en colonnes et en lignes :
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Marie</td>
<td>30</td>
</tr>
</table>
Page 3
Cours sur la technologie HTML
6. Formulaires
Les formulaires permettent d'interagir avec les utilisateurs (saisir des données, envoyer des
requêtes).
<form action="[Link]" method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<button type="submit">Envoyer</button>
</form>
7. Intégrer des styles et des scripts
HTML peut inclure des feuilles de style (CSS) et des scripts (JavaScript).
a) CSS (style) :
<style>
body {
background-color: lightblue;
</style>
b) JavaScript (script) :
<script>
alert("Bienvenue !");
</script>
8. Bonnes pratiques
- Respecter la structure hiérarchique des balises.
Page 4
Cours sur la technologie HTML
- Utiliser des noms descriptifs pour les images et les liens.
- Valider le code HTML avec un outil comme le W3C Validator.
Page 5