4.10. Introduction au HTML : structure de base, balises et attributs : formulaires en HTML
Le langage HTML (Hyper Text Markup Language) constitue la base de la création de tout site Web sur le Web. Il s'agit d'un langage de balisage, ce qui signifie qu'il est utilisé pour structurer le contenu d'un document, mais pas pour programmer des comportements ou des styles. Pour cela, nous utilisons d'autres langages tels que CSS et JavaScript. Dans ce chapitre, nous nous concentrerons sur la compréhension de la structure de base d'un document HTML, des balises les plus courantes et de la manière d'utiliser les attributs. De plus, nous apprendrons également à créer des formulaires HTML.
Structure de base d'un document HTML
Chaque document HTML commence par la déclaration du type de document, qui indique au navigateur le type de document qu'il lit. Pour HTML5, la dernière version de HTML, la déclaration est simplement . Après cela, le document HTML est divisé en deux parties principales : l’en-tête et le corps. L'en-tête contient des métadonnées sur le document, telles que le titre qui apparaît dans l'onglet du navigateur, ainsi que des liens vers des feuilles de style CSS ou des scripts JavaScript. Le corps contient le contenu réel du site Web, c'est-à-dire ce que les utilisateurs voient et avec lequel ils interagissent.
Exemple de structure de base d'un document HTML :
<!DOCTYPE html>
<html>
<head>
<title>Titre du site</title>
≪/head>
<body>
Contenu du site Web
</body>
</html>
Balises HTML
Les balises HTML sont utilisées pour baliser et catégoriser le contenu d'un document HTML. Chaque balise commence par un crochet angulaire (<) et se termine par un crochet angulaire (>). La plupart des balises ont une balise d'ouverture et une balise de fermeture, avec le contenu entre les deux. La balise de fermeture est la même que la balise d'ouverture, mais elle comporte une barre oblique (/) avant le nom de la balise.
Exemple d'utilisation des balises HTML :
<p>Ceci est un paragraphe.</p>
<h1>Il s'agit d'un en-tête de niveau 1.</h1>
<a href="https://www.example.com"> Ceci est un lien.</a>
Attributs HTML
Les attributs sont utilisés pour fournir des informations supplémentaires sur un élément HTML. Ils sont inclus dans la balise d'ouverture et se composent d'un nom d'attribut et d'une valeur d'attribut. La valeur de l'attribut doit être placée entre guillemets.
Exemple d'utilisation des attributs HTML :
<a href="https://www.example.com" target="_blank">Ceci est un lien qui s'ouvre dans un nouvel onglet.</a>
<img src="image.jpg" alt="Description de l'image">
Formulaires HTML
Les formulaires constituent une partie importante de tout site Web car ils permettent aux utilisateurs de saisir des informations et d'interagir avec le site Web. Un formulaire est créé à l'aide de la balise <form>, et dans le formulaire, nous utilisons différentes balises pour différents types de champs de saisie, tels que <input>, <textarea>, <select>, etc. Chaque champ de saisie peut avoir des attributs pour contrôler son comportement, tels que le type, le nom, la valeur, etc.
Exemple de formulaire HTML :
<form action="/submit_form" method="post">
<label for="name">Nom :</label>
<input type="text" id="nom" name="nom">
<label for="email">Email :</label>
<input type="email" id="email" name="email">
<input type="soumettre" value="Soumettre">
</formulaire>