Documents structurés pour le web
Documents HTML

Master web éditorial

Yannis Delmas
yannis.delmas@univ-poitiers.fr

Introduction
Genèse du HTML

L'invention du World wide web

«This is for everyone» Tim Berners-Lee

Exemple d'instrument au CERN :

CERN - détecteur Atlas

Exemple d'article du CERN : Search for a Standard Model Higgs boson…

Choix fonctionnels

Choix techniques

Architecture générale

Découpage d'une page

Architecture client-serveur

Principe des caches

HTML et documents hypermédias

Texte structuré

Balisages SGML et XML

entitéexplicationval.
&lt;plus petit que (less than)<
&amp;esperluette (ampersand)&
&laquo;guillemet français ouvrant
(left angle quote)
«
&eacute;e accent aigu (acute)é
&ecirc;e accent circonflexeê
&ccedil;c cédilleç
&euro;euro
entitéexplicationval.
&gt;plus grand que (greater than)>
 
&raquo;guillemet français fermant
(left angle quote)
»
&egrave;e accent graveè
&euml;e tréma (umlaut)ë
 
&copy;copyright©

URL et URI

Structuration logique

Pourquoi structurer ?

Éléments de type bloc (HTML 4)

Hiérarchisation des contenus

Listes

Éléments en-ligne

Liens :

Objets inclus :

Marquage sémantique : !

Et pour tout ce qui n'est pas prévu :

Attention : ne jamais raisonner “rendu” !

HTML et description de document

Données et méta-données

Le fichier HTML ne comporte pas que son contenu (version HTML 5 simple) :

<!DOCTYPE html>
<html lang="fr">
▏  <head>
▏  ▏  <meta charset="utf-8">
▏  ▏  <title>…titre de la page…</title>
▏  ▏  <meta name="author" content="…nom et/ou adresse de l'auteur…">
▏  ▏  <meta name="description" content="…description du contenu…">
▏  ▏  <meta name="keywords" content="mot-clé,mot-clé,…">
▏  ▏  <link rel="stylesheet" href="…URL d'une feuille de style…">
▏  </head>
▏  <body>
▏  ▏  …contenu de la page…
▏  </body>
</html>

Indications hors code :

Structure-type d'une page

XHTML 1 (et XHTML 5)

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
▏  <head>
▏  ▏  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
▏  ▏  <meta charset="utf-8" /><!-- XHTML5 -->
▏  ▏  <title>…titre de la page…</title>
▏  ▏  <meta name="author" content="…nom et/ou adresse de l'auteur…" />
▏  ▏  <meta name="description" content="…description du contenu…" />
▏  ▏  <meta name="keywords" content="mot-clé,mot-clé,…" />
▏  ▏  <link rel="stylesheet" type="text/css" href="…URL d'une feuille de style…" />
▏  </head>
▏  <body>
▏  ▏  …contenu de la page…
▏  </body>
</html>

HTML 4 (et HTML 5)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="fr">
▏  <head>
▏  ▏  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
▏  ▏  <meta charset="utf-8" /><!-- XHTML5 -->
▏  ▏  <title>…titre de la page…</title>
▏  ▏  <meta name="author" content="…nom et/ou adresse de l'auteur…" />
▏  ▏  <meta name="description" content="…description du contenu…" />
▏  ▏  <meta name="keywords" content="mot-clé,mot-clé,…" />
▏  ▏  <link rel="stylesheet" type="text/css" href="…URL d'une feuille de style…" />
▏  </head>
▏  <body>
▏  ▏  …contenu de la page…
▏  </body>
</html>

À vous de jouer !