4.13. Introduction au HTML : structure de base, balises et attributs : tableaux en HTML
HTML, ou HyperText Markup Language, est le langage standard pour la création de pages Web et d'applications. Constitué d'une série d'éléments, ou « balises », le HTML forme la structure d'une page Web et indique au navigateur comment afficher le contenu. Dans cette section, nous explorerons la structure de base du HTML, les balises et les attributs, avec un accent particulier sur les tableaux en HTML.
Structure de base du HTML
Une page HTML est composée d'une série d'éléments imbriqués. Chaque page commence par une déclaration du type de document, qui pour HTML5 est simplement . Ensuite, nous avons la balise html qui entoure tout le contenu de la page, suivie des balises head et body.
La balise head contient des métadonnées sur la page, telles que le titre qui apparaît dans l'onglet du navigateur, des liens vers des feuilles de style CSS et des scripts JavaScript. La balise body contient le contenu principal de la page visible par les utilisateurs.
Exemple de structure HTML de base
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
≪/head>
<body>
Le contenu de la page va ici.
</body>
</html>
Balises et attributs HTML
Les éléments HTML sont définis par des balises. Une balise est composée d’un nom d’élément, entouré de crochets angulaires. La plupart des éléments HTML ont une balise d'ouverture et une balise de fermeture, avec le contenu de l'élément entre les deux.
Par exemple, pour créer un paragraphe, nous utilisons la balise p. La balise d'ouverture est <p> et la balise de fermeture est </p>. Le contenu du paragraphe se situe entre ces balises.
De plus, les balises peuvent avoir des attributs qui fournissent des informations supplémentaires sur l'élément. Les attributs se présentent généralement sous forme de paires nom/valeur et sont inclus dans la balise d'ouverture de l'élément.
Exemple de balises et d'attributs HTML
<p style="color:blue"> Ceci est un paragraphe bleu.</p>
Dans cet exemple, le style est un attribut de la balise p et "color:blue" est la valeur de l'attribut. Cela indique au navigateur d'afficher le texte du paragraphe en bleu.
Tableaux en HTML
Les tableaux en HTML sont définis avec la balise <table> et sont constitués de lignes et de cellules. Les lignes sont définies avec la balise <tr> et les cellules à l'intérieur des lignes sont définies avec la balise <td>. pour les cellules de données ou <th> aux cellules d'en-tête.
Exemple de tableau en HTML
<tableau>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
≪/tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
≪/tr>
</tableau>
Cet exemple crée un tableau avec deux en-têtes et deux cellules de données. Le résultat est un tableau avec deux colonnes et deux lignes.
Les tableaux HTML peuvent également avoir des attributs, tels que "border" pour définir la bordure du tableau, "width" et "height" pour définir la largeur et la hauteur du tableau, et "cellpadding" et "cellspacing" pour définir le espace à l'intérieur et entre les cellules.
Exemple de tableau HTML avec attributs
<table border="1" width="100%" cellpadding="5">
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
≪/tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
≪/tr>
</tableau>
Cet exemple crée un tableau avec une bordure de 1 pixel, une largeur de 100 % de la largeur de la page et un espace interne de 5 pixels dans chaque cellule.