Le HTML, c’est quoi ? – 2D Online

Le HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer et présenter du contenu sur le Web. Il sert de fondation à toutes les pages web. Les navigateurs (comme Chrome, Firefox, etc.) interprètent le HTML pour afficher des textes, images, vidéos, et autres contenus.

1. Structure de Base d’une Page HTML

Chaque document HTML a une structure de base qui comprend des éléments essentiels. Voici un exemple minimaliste d’une page HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Ma Première Page Web</title>
</head>
<body>
    <h1>Bienvenue sur ma page!</h1>
    <p>Ceci est mon premier paragraphe en HTML.</p>
</body>
</html>

<!DOCTYPE html> : Indique au navigateur que le document utilise la dernière version de HTML (HTML5).
<html> : L’élément racine qui englobe tout le contenu de la page.
<head> : Contient les métadonnées de la page (informations qui ne sont pas affichées directement), comme le titre, les styles, ou les liens vers des fichiers CSS/JS.
<title> : Définit le titre de la page (ce qui apparaît dans l’onglet du navigateur).
<body> : Contient tout le contenu visible de la page (textes, images, liens, etc.).

2. Les Balises de Base

Les balises HTML sont des éléments entourés de chevrons (< >). Elles peuvent être des balises de début (<tag>) et de fin (</tag>), ou des balises auto-fermantes.

a) Les Titres

HTML utilise des balises de titres pour définir les en-têtes de sections ou sous-sections :

<h1>Titre Principal</h1>
<h2>Sous-titre</h2>
<h3>Titre de niveau 3</h3>
<!-- Jusqu'à h6 -->

<h1> à <h6> : Balises de titres, <h1> étant le plus important, <h6> le moins important.

b) Les Paragraphes

Les paragraphes sont définis par la balise <p>.

<p>Ceci est un paragraphe.</p>

c) Les Liens Hypertextes

Les liens sont créés avec la balise <a> (ancre).

<a href="https://www.example.com">Visitez Example.com</a>

href : Attribut de l’élément <a> qui spécifie l’URL de destination.

d) Les Images

Les images sont insérées avec la balise <img>, qui est auto-fermante.

<img src="image.jpg" alt="Description de l'image">

src : Spécifie le chemin vers l’image.
alt : Fournit une description textuelle de l’image (utile pour l’accessibilité et si l’image ne se charge pas).

e) Les Listes

HTML supporte deux types de listes : ordonnées (numérotées) et non ordonnées (à puces).

Liste non ordonnée :

<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ul>

Liste ordonnée :

<ol>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ol>

<ul> : Liste non ordonnée.
<ol> : Liste ordonnée.
<li> : Élément de liste.

3. Les Attributs

Les attributs fournissent des informations supplémentaires sur les éléments HTML. Ils sont placés dans la balise d’ouverture, après le nom de la balise.

Exemple :

<a href="https://www.example.com" target="_blank">Ouvrir dans un nouvel onglet</a>

target="_blank" : Ouvre le lien dans un nouvel onglet.

4. Les Commentaires

Les commentaires sont des notes dans le code qui ne sont pas affichées dans le navigateur. Ils sont utiles pour expliquer le code ou désactiver temporairement certaines parties.

<!-- Ceci est un commentaire -->

5. Mise en Forme du Texte

HTML permet de formater le texte de diverses manières :

Gras : <strong> ou <b> ( <strong> a une signification sémantique plus forte, indiquant de l’importance).

<strong>Texte en gras</strong>

Italique : <em> ou <i> (<em> signifie que le texte est important).

<em>Texte en italique</em>

Souligné : <u>.

<u>Texte souligné</u>

6. Tableaux

Les tableaux structurent les données sous forme de grilles.

<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>
</table>

<table> : Définit le tableau.
<tr> : Définit une ligne dans le tableau.
<th> : Définit une cellule d’en-tête (par défaut en gras et centré).
<td> : Définit une cellule de données.

7. Incorporer du CSS

Le CSS (Cascading Style Sheets) est utilisé pour styliser les éléments HTML. Vous pouvez inclure du CSS directement dans un document HTML avec la balise <style> ou lier un fichier CSS externe avec <link>.

CSS interne :

<style>
    body {
        background-color: lightblue;
    }
    h1 {
        color: navy;
        text-align: center;
    }
</style>

CSS externe :

<link rel="stylesheet" href="styles.css">

8. Formulaires

Les formulaires permettent de recueillir des informations auprès des utilisateurs.

<form action="/soumettre" method="POST">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom">

    <label for="email">Email :</label>
    <input type="email" id="email" name="email">

    <input type="submit" value="Envoyer">
</form>

<form> : Conteneur pour le formulaire.
<label> : Associe un texte descriptif à un champ.
<input> : Champ de saisie.
type="text" : Champ de texte.
type="email" : Champ pour saisir un email.
type="submit" : Bouton pour envoyer le formulaire.

Créer son formulaire de contact

Conclusion

Avec ces bases en HTML, vous pouvez créer des pages Web simples et bien structurées. HTML est souvent utilisé avec le CSS pour la mise en forme et le JavaScript pour l’interactivité, mais il constitue la fondation essentielle pour toute page Web. Vous pouvez continuer à explorer et à pratiquer pour mieux maîtriser ce langage.

Image d’illustration par Freepik