Aller au contenu principal

Le HTML

Introduction

Le développement web de base repose sur deux technologies essentielles :

  • Le HTML (HyperText Markup Language) ;
  • Le CSS (Cascading Style Sheets).

Ces deux langages permettent de structurer et de styliser des pages web.

Définition

Le HTML est un langage de balisage utilisé pour définir la structure et le contenu d'une page web. Contrairement aux langages de programmation classiques (comme Python), le HTML ne contient pas de logique ou de calculs. Il décrit simplement des éléments d'une page, comme :

  • Des titres ;
  • Du texte ;
  • Des images ;
  • Des liens ;
  • Des tableaux ;
  • Des formulaires, etc.

Fonctionnement​

Le HTML fonctionne avec des balises (tags) entourées de crochets angulaires < >. Ces balises indiquent au navigateur comment, et quels éléments afficher. Par exemple :

<h1>Bienvenue sur mon site</h1>
<p>Ceci est un paragraphe de texte.</p>

Dans cet exemple :

  • <h1> représente un titre principal (gros titre).
  • <p> représente un paragraphe.
Ouverture/Fermeture

Chaque balise possède une ouverture (ex. : <h1>) et, dans la plupart des cas, une balise de fermeture correspondante (ex. : </h1>).

Structure basique d'une page

Le code minimal d'une page :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>titre de la page</title>
    </head>
    <body>

    </body>
</html>

La balise <meta> permet de préciser l'encodage des caractères.
La balise <title> permet de marquer un titre dans l'onglet de la page.

Différentes balises​

Quelques balises HTML courantes :

  • <html> : Définit la structure globale de la page.
  • <head> : Contient des métadonnées, comme le titre de la page ou des liens vers des fichiers CSS.
  • <body> : Contient tout le contenu visible de la page.
  • <a> : Crée des liens hypertexte.
  • <img> : Insère des images.
  • <ul> et <li> : Créent des listes.
  • <p> : Crée des paragraphes.
  • <h1>, <h2> jusqu'à <h6> : Créent des titres de niveau 1, 2, ... , 6.

Il existe beaucoup de balises différentes, ajoutant du contenu dans une page, manipulant le texte, etc.
Les balises peuvent également s'imbriquer les unes dans les autres :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>titre de la page</title>
    </head>
    <body>
        <div>
            <a href="monbureaunumerique.fr">Lien vers MBN</a>
        </div>
    </body>
</html>

Dans cet exemple, une balise <div> ("division", sert à structurer des éléments) contient également une balise <a> créant un hyperlien vers monbureaunumerique.

Attributs​

Certaines balises ont besoin d'attributs pour fonctionner, c'est-à-dire que l'on doit leur préciser des informations, en plus du tag.

C'est notamment le cas pour les balises <img> ou <a>, a qui l'on doit préciser pour l'un la source de l'image à insérer dans la page, et pour l'autre le lien à insérer :

<img src="chat.png">
<a href="nsi-learning.fr">Lien vers le site</a>
  • Pour img, on précise l'attribut src : la position de l'image à insérer ;
  • Pour a, on précise l'attribut href : le lien vers qui la balise doit renvoyer lorsque l'on clique dessus.