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.
Cookies and similar technologies are used on our sites to personalize content and ads. You can find further details and change your personal settings below. By clicking OK, or by clicking any content on our sites, you agree to the use of these cookies and similar technologies.
When you visit any of our websites, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and manage your preferences. Please note, that blocking some types of cookies may impact your experience of the site and the services we are able to offer.