HTML

Problématique

Comment créer un texte pouvant en mode texte seulement contenir des informations sur son contenu, sa structure et sa présentation, à la fois lisible par un humain et par une machine ?

C'est dès les annéés 60 que le besoin se fait sentir :

  • pour les documents techniques
  • pour les documents juridiques
  • pour les documents scientifiques

Il faut trouver un moyen de séparer le fond de la forme.

Historiquement

  • dans les années 1969 : GML1 (Generalized Markup Language) est un langage de balisage développé par IBM pour la publication de documentation technique.
  • en 1986 : SGML2 (Standard Generalized Markup Language) est une norme ISO qui définit un langage de balisage générique.
  • en 1991 : HTML3 (HyperText Markup Language) est un langage de balisage dérivé de SGML, conçu pour créer des pages web. Il a été développé par Tim Berners-Lee au CERN (Organisation européenne pour la recherche nucléaire) à Genève, en Suisse.

Concept

HyperText Markup Language :

  • HyperText : concept d'interconnexion de documents par des liens hypertextes, parcours non linéaire
  • Markup Language : langage de balisage, qui permet de structurer le contenu d'un document en utilisant des balises

Markup language

Définition

Markup language = langage de balisage : langage informatique permettant de structurer un document en utilisant des balises

Une balise est un morceau de texte qui "ouvre" un contexte, et ce même contexte est "fermé" par la même balise. Les contextes peuvent être imbriqués, et chaque balise peut contenir des attributs.

Syntaxe : <balise>...</balise>

Exemple :

<article id="example">
  <h1>Mon titre</h1>
  <p>Mon texte</p>
  <ul>
    <li>Mon premier élément</li>
    <li>Mon deuxième élément</li>
    <li>
      <ol>
        <li>Mon premier sous-élément</li>
        <li>Mon deuxième sous-élément</li>
      </ol>
    </li>
  </ul>
</article>

En arrivant à la ligne "Mon premier sous-élément", on a ouvert successivement les contextes article > ul > li > ol > li. En passant, on a ouvert et fermé le contexte h1 et p.

Règles :

  • pas de chevauchement de balises, mode poupées russes
  • dans l'idéal, balisage sémantique : le balisage doit refléter la structure du document, et non sa présentation; cela permet de séparer le fond de la forme, de faciliter la lecture et la compréhension du document par une machine, et de permettre une présentation différente selon le contexte (impression, écran, etc.)

HyperText

Définition

hypertexte : Fonction permettant d'établir des liaisons directes entre éléments (texte, image…) de documents différents.

Inclus dans le balisage, le concept d'hypertexte permet de créer des liens entre les documents, et de naviguer entre eux. Cela permet de créer des pages interconnectées, et de créer une toile d'informations. On utilise pour cela la balise <a> (anchor) qui permet de créer un lien vers une autre page en utilisant l'attribut href (Hypertext REFerence) pour spécifier l'URL de la page cible.

HyperTexte

Suite de l'histoire

  • 1995-1999 : HTML 3.2, HTML 4.0, guerre des navigateurs, balbutiements du CSS
  • 2000-2005 : XHTML, CSS2.1, Internet Explorer, époque sombre
  • 2007-2012 : HTML5, CSS2, un nouveau souffle, SPA, PWA, WebApps
  • 2012-... : le bonheur à nouveau, des standards enfin à peu près respectés & uniformes (et IE disparait progressivement)

Programme

  • SNT : thème Web
  • NSI 1ère : Évènements clés de l'histoire de l'informatique