Apprendre le langage HTML
Auteur: Winkin Adrien
Publié le 15-08-2023 | Catégorie: Développement front-end
Le langage HTML (HyperText Markup Language) est le langage de base de toutes les pages web. C'est un langage de balisage qui permet d'insérer du contenu dans nos pages web, c'est le squelette de chacune de nos pages web. Dans cet article, nous allons voir les bases de ce langage HTML. Nous parlerons de la structure d'une page HTML, des balises courantes et de l'indentation.
Définition et syntaxe de base
Le langage HTML utilise des balises pour marquer les différents éléments du contenu d'une page web. Ces balises sont ensuite interprétées par les navigateurs web pour afficher le contenu correctement. Un élément en langage HTML est généralement entouré d'une balise d'ouverture et d'une balise de fermeture. Les balises d'ouverture sont entourées de chevrons (< et >) et les balises de fermeture possède un "/" en plus avant le nom de la baliseVoici un exemple d'un simple paragraphe :
<div id="conteneur">
<p>Ceci est un paragraphe.</p>
</div>
Structure d'une page HTML
Chaque document HTML doit commencer par une déclaration de type de document, également appelée Doctype. Cela indique au navigateur web quelle version du langage HTML est utilisée. La déclaration Doctype pour la version HTML5 est la suivante :
<!DOCTYPE HTML>
Ensuite, tout le code HTML doit être entouré de balises <HTML>. Dans cette balises, on trouve les deux sections principales d'une page HTML : la balise <head> et la balise <body>.
La section <head> renferme les informations sur le document telles que le titre, les metadonnées, la langue, les liens vers les feuilles de style CSS,... La section <body>contient tout le contenu de la page web visible par les utilisateur.Voici maintenant un exemple de structure HTML que vous pourrez reprendre dans vos futurs codes
<!DOCTYPE HTML>
<HTML>
<head>
<title>Titre de la page</title>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
</body>
</HTML>
l'indentation
Indenter une balise est le fait de laisser de l'espace entre celle-ci et la marge gauche de votre éditeur de code. L'indentation n'est pas nécessaire mais elle existe pour une question de lisibilité et de structure. Je vous conseille fortement d'indenter vos codes (à vos débuts en tout cas).
Voici deux exemples du même code indenté et non indenté :
Code indenté
<!DOCTYPE HTML>
<HTML>
<head>
<title>
Le code indenté
</title>
</head>
<body>
<div>
<ul>
<li>
élément 1
</li>
<li>
élément 2
</li>
<li>
élément 3
</li>
</ul>
</div>
</body>
</HTML>
Code non indenté
<!DOCTYPE HTML>
<HTML>
<head>
<title>
Le code non indenté
</title>
</head>
<body>
<div>
<ul>
<li>
élément 1
</li>
<li>
élément 2
</li>
<li>
élément 3
</li>
</ul>
</div>
</body>
</HTML>
Éléments HTML courants
Voici les éléments HTML de base à absolument connaître
- Les titres : "<h1>" à "<h6>" (de plus grand à plus petit)
- Les paragraphes : "<p>"
- Les listes ordonnées : "<ol>"
- Les listes non ordonnées : "<ul>"
- Les éléments de liste : "<li>"
- Les liens : "<a>"
- Les images : "<img>"
- Les divisions : "<div>" (c'est un conteneur)
- Les span (oui, je ne sais pas comment cela se nomme) : "<span>" (c'est un autre conteneur)
La balise <head>
La balise head est la section qui renferme toutes les informations à propos du document telles que le titre de la page, les métadonnées,... C'est dans cette balise que nous mettrons les liens vers les feuilles de style, les fichiers JavaScript,... Il est important de ne pas mettre d'éléments destinés au <body>.
Les métadonnées
- Métadonnées d'encodage des caractères : <meta charset="UTF-8">
- Métadonnées descriptives : <meta name="description" content="Description de votre page">
- Métadonnées adminisratives : <meta name="author" content="Nom de l'auteur"> et <meta name="date" content="2023-08-13>
- Métadonnées de robot : <meta name="robots" content="index,follow">
- Métadonnées de langue : <HTML lang="fr">
Les métadonnées n'ont pas de balise de fin et elles se placent dans la balise <head>. Les métadonnées de robot servent à dire au robot de Google s'il faut indexer la page et s'il doit la suivre.
Utilisation des éléments HTML de base
Dans ce paragraphe, nous allons voir comment utiliser les éléments que nous avons vu ci-dessus. Nous allons voir comment les disposer et quels sont les différents attributs qui y sont intégrés.
Les images et les liens
D'abord les liens. Un liens s'utilise comme ceci : <a href="https://example.com">Un texte</a>. L'attribut href permet de définir l'URL vers laquelle le lien renvoie. Cet attribut peut contenir une URL (comme dans l'exemple de la phrase précédente), un lien interne (le lien vers un fichier de notre site) comme par exemple <a href="index.HTML">Un texte</a> ou encore un id (voir cet article la définition d'un id) comme par exemple, <a href="#contact">Un texte</a>. Ce dernier lien renvoie vers l'élément HTML défini par l'id "contact". Ensuite, le texte entre les deux balises <a> est le texte cliquable du lien.
Pour les images, c'est légèrement différent. Déjà, il n'y a pas de balise de fermeture. En effet, en langage HTML, une image se définis comme cela : <img src="lien/vers/image" width=Xpx height=Ypx> où l'attribut "src" contient le lien interne de l'image à afficher. Les attribut "width" et "height" définissent la largeur et la hauteur de l'image en pixels (px). En pratique, on stock souvent les images dans un dossier nommé "images" qui se trouve dans le répertoir racine du site.
Différences entre div et span
Les div et les span sont deux conteneurs avec principalement une propriété qui varie. Cette propriété est la taille du conteneur. En fait, une division prendra toute la largeur de la page tandis qu'une span prendre uniquement la place de son contenu. Pour s'en convaincre et montrer un exemple, on peut créer une span et une div avec une couleur de fond :
De cette différence, on voit qu'il est possible de mettre plusieurs span les une à côté des autres contrairement aux div.
Les tableaux en langage HTML
Dans cette partie, nous allons voir ce qu'il y a à savoir sur les tableaux en langage HTML. On va commencer par les principes généraux avec les balises utilisées lors de la création d'un tableau. Ensuite nous verrons un exemple de code d'un tableau simple et pour finir, un exemple de code d'un tableau à double entrée.
Principes généraux
La structure
Pour créer un tableau en langage HTML, vous utilisez l'élément <table>, qui englobe toutes les lignes et les colonnes du tableau. Chaque ligne est définie avec l'élément <tr> (table row), et chaque cellule de données est définie avec l'élément <td> (table data). Les en-têtes de colonnes sont définis avec l'élément <th> (table header).
Les attributs
- L'attribut 'border' de l'élément <table> définit l'épaisseur de la bordure du tableau (cet attribut est en train de devenir obsolète donc préférez le css).
- L'attribut 'colspan' de l'élément <td> ou <th> permet de fusionner des cellules sur plusieurs colonnes.
- L'attribut 'rowspan' de l'élément <td> ou <th> permet de fusionner des cellules sur plusieurs lignes.
Exemple d'un tableau simple en langage HTML
<table>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
<tr>
<td>Donnée 1</td>
<td>Donnée 2</td>
</tr>
<tr>
<td>Donnée 3</td>
<td>Donnée 4</td>
</tr>
</table>
Exemple d'un tableau à double entrée en langage HTML
<table>
<tr>
<th></th>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>
<tr>
<th>Ligne 1</th>
<td>Donnée 1-1</td>
<td>Donnée 1-2</td>
<td>Donnée 1-3</td>
</tr>
<tr>
<th>Ligne 2</th>
<td>Donnée 2-1</td>
<td>Donnée 2-2</td>
<td>Donnée 2-3</td>
</tr>
<tr>
<th>Ligne 3</th>
<td>Donnée 3-1</td>
<td>Donnée 3-2</td>
<td>Donnée 3-3</td>
</tr>
</table>
Les formulaires en HTML
Un formulaire est créé à l'aide de la balise <form>. À l'intérieur de cette balise, vous pouvez placer des éléments de saisie tels que des champs de texte, des boutons, des cases à cocher,... Nous allons voir ces éléments dans les lignes suivantes.
Les éléments des formulaires
Voici les principaux éléments utilisés dans les formulaires en langage HTML
- <input type="text"> : champ de texte pour saisir du texte.
- <input type="password"> : champ de mot de passe pour saisir des mots de passe.
- <input type="email"> : champ pour saisir une adresse e-mail.
- <input type="checkbox"> : case à cocher pour les options indépendantes.
- <input type="submit"> : bouton d'envoi du formulaire (soumettre le formulaire)
- <input type="hidden"> : permet d'inclure des données dans le formulaire sans que les utilisateurs puissent les voir.
- <select> : menu déroulant pour sélectionner une option.
- <textarea> : zone de texte multiligne pour saisir du texte étendu.
- <label> : permet d'associer un texte descriptif à un élément de saisie (cela facilite la sélection des champs).
Attributs importants
- 'name' : identifie les éléments de saisie lorsque le formulaire est soumis.
- 'value' : définit la valeur par défaut d'un élément.
- 'placeholder' : affiche un texte indicatif dans le champ de saisie.
- 'required' : rend un champ obligatoire.
- 'disabled' : désactive un élément de saisie.
- 'readonly' : rend un champ "en lecture seule".
- 'action' : définit l'URL où les données du formulaire seront envoyées pour traitement.
Conclusion
Félicitations ! Vous avez maintenant une compréhension de base du langage HTML. Vous pouvez dès maintenant commencer à créer vos propres pages web en utilisant les balises et les éléments que nous avons couverts dans cet article. Pour ce faire, il vous faut un éditeur de code (par exemple visual studio code ou brackets) et un fichier en .HTML (par exemple index.HTML) et vous pourrez commencer à coder en ouvrant votre fichier avec votre éditeur de code. Je vais être honnête avec vous, il reste énormément de chemin avant de créer des pages web dignes de ce nom. Je vous invite donc à vous documenter d'avantage et à lire d'autres articles de ce site pour améliorer vos compétence en développement web. Vous pouvez déjà être fier d'avoir fait vos premiers pas en arrivant au bout de cet article sur le langage HTML.