Le langage client HTML

Objectif

  • Découvrir comment est structuré le contenu d'une page web.

Mise en situation

Lorsque l'on visite un site web, le navigateur affiche un document sous la forme de caractères mis en forme, articulés avec des images, ou encore des liens.

En fait le navigateur récupère un fichier texte contenant du code HTML. Ce code indique au navigateur quels sont les éléments de contenu (une chaîne de caractères, une image), quel est leur type (un titre, un paragraphe) et comment les ordonner (ce paragraphe ci vient avant celui-là).

C'est en interprétant ce code HTML que le navigateur construit une présentation lisible par un être humain.

DéfinitionHTML : le langage de contenu des pages web

Le contenu des pages web est écrit en HTML, pour HyperText Markup Langage.

HTML est un langage de balisage : sa fonction est de structurer le contenu de la page, grâce à des balises.

Les balisent servent à décrire la fonction des éléments et à leur donner du sens. Elles se composent de trois parties :

  • une balise ouvrante : <balise>,

  • un contenu,

  • une balise fermante : </balise>,

Le contenu des pages web est stocké dans des fichiers HTML dont l'extension est généralement html.

ExempleHello World

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Hello</title>
6
  </head>
7
  <body>
8
    <h1>Hello World</h1>
9
  </body>
10
</html>

SyntaxeBalises

Le code minimal d'un fichier HTML est composé de :

  1. Une balise initiale, indiquant le type du document <!DOCTYPE html>.

  2. Une balise racine <html> : elle englobe tout le reste du contenu.

    • La balise <head> : elle contient les méta-données de la page et son contenu n’apparaît pas dans le rendu final.

    • La balise <body> : elle contient tout le contenu visible de la page.

ComplémentExemples de balises de base

  • Titres (du plus au moins important) : <h1> <h2> <h3> <h4> <h5> <h6>

  • Blocs : <div> <section> <article> <form> <footer> <header> <menu>

  • Éléments linéaires : <span> <p>

  • Champs : <input /> <textarea /> <button> <select>

  • Emphases : <em> <b> <i>

  • Listes : <ul> <ol> <li>

  • Images : <img src=""/>

  • Liens : <a href="">

  • Commentaires (non-visibles dans le rendu finale) : <!-- Ceci est un commentaire -->

RemarqueHTML et éditeur de texte

Les éditeurs de textes comme LibreOffice Writer ou Microsoft Word utilisent un langage de balisage proche du HTML pour représenter les documents. Quand un titre est créé ou une image insérée, ce sont en réalité des balises similaires qui sont enregistrées dans le fichiers, et rendues par l'éditeur.

ExempleParagraphe

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <!-- Encodage du fichier, ici UTF-8 -->
5
    <meta charset="utf-8">
6
    <!-- Titre de la page dans le navigateur -->
7
    <title>Un paragraphe</title>
8
  </head>
9
<body>
10
  <h1>Un titre en HTML </h1>
11
  <p>Un paragraphe de texte dans lequel on peut écrire le corps d'une page web.
12
  Ceci est un exemple minimaliste de fichier HTML.
13
  </p>
14
</body>
15
</html>

ExempleImages

1
<!DOCTYPE html>
2
  <head>
3
    <meta charset="utf-8">
4
    <title>Une image</title>
5
  </head>
6
<html>
7
 <body>
8
  <h1>Vacances 2010</h1>
9
  <h2>À la mer</h2>
10
  <!-- Image dont l'emplacement sur le serveur se trouve dans le dossier images -->
11
  <img src="/images/seven-sisters.jpg"/>
12
 </body>
13
</html>

ComplémentHTML à travers les âges

HTML a été créé en 1992, mais chaque navigateur avait sa propre version de HTML, et sa propre manière d'interpréter les balises. Les sites web avaient un aspect différent sur chaque navigateur, particulièrement pour les éléments complexes.

Depuis sa standardisation par le W3C (World Wide Web Consortium) en 1995, la compatibilité s'est améliorée et aujourd'hui la plupart les sites web ont un rendu identique pour tous les navigateurs standards.

À retenir

  • HTML est un langage de balisage permettant de structurer le contenu du document.

  • Un fichier HTML contient des en-têtes (métadonnées) et un corps (contenu).

  • La structure d'un document peut se faire de manière sémantique : titre, paragraphe, section, image, lien, etc.

  • Les navigateurs savent comment afficher ces différents éléments de manière standard.

Stéphane Crozat, Jinane Ben Salem Paternité - Partage des Conditions Initiales à l'Identique