Études supérieures - Les enseignements - Plateforme Temps Réel - Atelier Hypermédia - HTML / CSS -

web#04 { HTmL : prémières pages ; }

Hyperdocuments

Une « page » web n’est rien d’autre qu’un document texte brut contennant des mots-clés très particuliers. Ces mots-clés indiquent des informations essentielles contenues dans cette page : le titre du document, les liens hypertextuels, les blocs de texte, les tableaux de valeurs, etc. Il s’agit d’indications sémantiques, donc des élements structurels qui influencent et décrivent le « contenu » de la page.

Le plus célèbre de ces mots-clés, et probablement le plus important, serait le lien : c’est lui qui relie une page avec une autre. Ce lien transforme notre document brut en un hyperdocument : un document qui prend son sens parce qu’il est relié à d’autres depuis son intérieur. C’est l’introduction de cette idée du lien qui a rendu célèbre les pages web, et leur ont donné aussi un nom : le HTmL, qui en anglais est un acronym pour « HyperText markup Language ».

En anglais, un « hypertext » concerne la partie dynamique du texte : le fait qu’une page web peut être reliée à une autre. Le mot « markup » décrit le système des mots-clés : il indique que le texte brut contient des sortes de mots-magiques qui changeront la forme du texte brut. Ces mots clés ne seront pas vu en tant que tel par les utilisateurs, mais influençeront le document néanmoins. Puis le mot « language » indique que l’ensemble est un code qu’un ordinateur peut comprendre, un système de codage normé. Si on suit les règles de ce langage, nous pouvons créer des pages web.

Architecture d’une page HTmL

Depuis ses débuts, une page HTmL utilise un système d’emboitement proche des poupées russes, via des parenthèses étranges qui encerclent les contenus et définissent leur rôles sémantiques : <ceci est un paragraphe dans la page>, <ceci est le titre de la page>, etc. Pendant longtemps, la plupart des concepteurs de sites web n’ont pas respecté l’usage de ces descripteurs : ils mettaient tout le contenu en vrac sur la page, sans indiquer où se trouvaient ni les débuts et ni les fin des paragraphes, lesquelles des phrases étaient des titres de sous-chapitres, etc. mais avec l’arrivé des feuilles de styles, on ne peut plus procéder de cette mannière : si on veut une jolie présentation, il faut une bonne structure semantique. Et cette structure semantique vient de l’utilisation de ce système d’emboitement.

La première couche d’emboitement se trouve dans la construction même de ce qu’on appelle une balise. Les balises sont formées avec les signes < et > qui entourent un mot compris dans le langage. Quand vous écriverez des <mots> inclus à l’intérieur de ces <signes>, ils seront traités comme des <balises>, c’est-à-dire des mots-clés qui ne s’afficheront pas directemment à l’utilisateur, mais influenceront la structure sémantique de la page. Tout ce qui est emboité à l’intérieur de ces signes inférieur à et supérieur à sera traité par la machine comme une balise.

La deuxième couche d’emboitement viendra avec l’uage de balises complémentaires. Dans la plupart des cas, chaque balise est écrite en double : une balise pour commencer, et une balise pour terminer. Si j’écris <strong>important!</strong>, tout ce qui est entouré par les balises <strong> et </strong> sera écrit avec force : on signale que ces mots ne sont pas des mots comme les autres ; ce sont des mots plus importants. Ce qui donnera, dans la plupart des cas, ces mots écris en gras sur la page web. Tout ce qui se trouvera entre ces deux balises, sera affecté par ces balises. Chacune de ces balises d’ouverture sera complétée par une balise de fermeture c’est-à-dire un contre-marqeur qui fermera la modification de la structure. La balise d’ouvertue est toujours rejointe par une balise qui la referme avec le signe / qui indique sa fin.

Le troisième emboitement sera l’entourage d’un couple de balises par un autre couple de balises. Par exempe, il y a des balises structurelles, qui définissent les différentes parties d’une page : <title> pour le titre de la page (en haut du browser), <body> pour le contenu de la page, <p> pour une paragraphe dans de contenu de la page, etc. Quand je crée une page, j’ai par exemple du contenu qui contient un paragraphe, et qui à son tour contient parfois des mots importants. Ce qui s’écrit en HTmL comme ceci :

<body>

 <p>Voici un paragraphe à l'intérieur de la page avec quelque chose <strong>important</strong> qui doit être lu avec insistance.</p>

</body>

Dans cet exemple nous avons du contenu (<body></body>, c’est-à-dire le « corps » du texte), qui contient un paragraphe (<p></p>) qui contient un mot important (<strong></strong>). Chacun des élements se trouvent emboités les uns dans les autres, comme des poupées russes.

Tout document HTmL suit cette logique, à l’exception de quelques balises particulières qui entourent aucun contenu. même la déclaration que le fichier texte est en réalité du HTmL, utilise cette forme d’emboitement. Voici donc une page HTmL simple, le plus brut possible, par exemple telle qu’on l’aurait construit en 1992 :


<html>

<head>
 <title>le titre de la page</titre>
</head>

<body>

 <p>voici le premier paragraphe.</p>

</body>

</html>

Si on tape ces informations dans SimpleText (ou le Bloc Notes sur Windows), il ressemblera à ceci :

...mais dans le navigateur web ressemblera à ceci :

Notez que la partie du texte écrite entre les balises <title></title> ne s’écrit pas à l’intérieur de la partie blanche de la page, mais s’écrit en haut de la fenêtre du navigateur (« le titre de la page »).

Dans cet exemple nous voyons une structure typique d’un document HTmL.

Les balises d’ouverture et de fermeture déclarent que les élements à l’intérieur décriront un document hypertextuel. Ensuite, deux sous-structures sont déclarés : les en-têtes de la page (<head></head>) et le corps de la page (<body></body>). À l’intérieur de chacun de ces sous-structures nous trouvons des sous-élements : dans les en-têtes nous trouvons les balises qui définissent le titre de la page, puis dans le corps du texte nous trouvons le premier paragraphe de la page.

Emboitements ratés

Attention, quand vous emboîtez un élement dans un autre, de ne pas ratez l’ordre des <balises> d’ouverture et les </balises> de fermeture. Dans l’exemple suivant, nous avons justemment raté l’ordre :


<body>

   <em><p>Attention!</em> Cette paragraphe n'a pas été déclaré correctement dans le code HTmL.</p>

</body>

Est-ce que vous voyez l’erreur ? Le principe de poupées russes n’a pas été respecté. On a écrit <em> avant d’écrire <p>, alors qu’en réalité, notre mot insisté se trouve à l’intérieur de notre paragraphe : on aurait du écrire :


<body>

   <p><em>Genial!</em> Enfin une page qui respecte la norme HTmL.</p>

</body>

Il est important de bien comprendre cette logique d’emboîtement. Car plus tard, quand nous introduirons le « feuilles de styles » graphiques, cet emboîtement devra être respecté pour que les pages s’affichent correctement dans les navigateurs.

Validator

Ok. Notre page s’est affichée dans le navigateur, et nous avons vérifier que le principe de poupées russes à été respecté. mais est-ce qu’elle est pour autant bien faite ? Elle est visible, ça marche, mais est-ce qu’elle sera bien adapté au plus grand nombre de navigateurs et de machines ?

Passons notre fichier dans le W3C Validator. Si vous ne savez pas ce qu’est le Validator, vous n’avez pas lu le cours web#03 à ce sujet. Allez-y jeter un coup d’oeil, si c’est le cas, l’article est court — je vous attendrai.

Comme nous pouvons voir dans cette illustration, le vérificateur du W3C n’a pas aimé notre page. Il dit qu’elle n’est pas « valide ». Pourquoi ? Nous avons écrit correctemment nos balises, n’est-ce pas ? Nous n’avons pas de mauvaise chevauchements dans la structure, n’est-ce pas ?

Oui, mais il y a encore à ajouter...

HTmL > xHTmL

Comme nous avons vu dans le cours précédent, une page web correcte a plus d’informations que <html></html> et <body></body>. Elle a même beaucoup plus d’informations. Ces informations pourrait sembler beaucoup plus obscur que <html></html> (elles le sont), il n’empêche qu’elle permettra à notre page de s’afficher pareil un peu partout.

Avant 1999 — et en réalité encore aujourd’hui pour beaucoup — on pouvait faire une page comme la notre et elle s’affichera correctement dans tout navigateur. mais avec l’introduction des normes xHTmL, qui normalise le HTmL et le rend plus extensible dans l’avenir, nous avons besoin de déclarer quelle version d’HTmL nous utilisons. Est-ce que nous utilisons le HTmL de 1992 ? La version que Netscape a introduit en 1995 ? 1997 ? La version que microsoft a proposé en 1997 ? 1998 ? 2001 ? 2003 ?

Avant donc 1999, nous avions aucune manière universelle pour dire : cette page a été faite avec la norme en vigeur en 1999, quand j’écris que ceci est un paragraphe, respectez bien cette information s’il vous plaît.

Nous allons donc déclarer la version de HTmL que nous utilisons dans notre page. Et nous allons nous servir du document de base que nous proposé dans le cours précédent sur le W3C. Et dans ce document, nous trouvons la déclaration suivante :

<?xml version="1.0" encoding="UTF-8"?>

Suivi d’une déclaration du type de document :

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTmL 1.0 Strict//EN"
  "DTD/xhtml1-strict.dtd">

Suivi d’une modification de la balise <html> pour dire où se trouve une description de la norme que nous suivons :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Ces trois déclarations sont justemment ce que le Validator nous dit manquait dans notre code de départ. Il nous disait :

  1. Qu’il ne trouvait pas le type de format du fichier texte, autremment dit, si le texte contenait des caractères spéciaux (comme les accents en français, ou les caractères chinois)
  2. Qu’il ne trouvait pas de déclaration du type de document (« pas de DOCTYPE »)

En ajoutant ces trois déclarations, nous avons transformer notre page HTmL, en ce qu’on appelle le xHTmL. Il s’agit d’encore une terme, mais pour l’instant accepter que le xHTmL est mieux que le HTmL. Il fait tout ce que fait le HTmL, mais mieux, et marchera mieux sur les machines futures.

Et pour de bonnes mesures — à cause de certains serveurs — nous pourrions ajouter à l’intérieur du <head></head> la ligne suivante :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Re-validator

Nous allons maintenant repasser notre fichier, avec ces modifications, dans le collimateur du W3C. Si vous n’avez pas encore copié l’exemple du cours précédent sur le Validator (vous trainez encore les pieds !?), voici une copie de notre page de base :


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTmL 1.0 Strict//EN"
  "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Titre</title>
</head>

<body>

  <p>Voici une version correcte de notre page. Elle déclare l'encodage (UTF-8), le type de document (DOCTYPE) et pointe vers le site du concepteur de la norme (xmls="...").</p>

</body>

</html>

Copiez ce code, collez-le dans un document avec un nom comme page.html, sauvegardez-le dans votre dossier Sites, puis téléchargez le fichier sur le W3C Validator. Si tout va bien, vous devriez recevoir un résultat positif :

Résumé

Nous avons appris comment se construit une page web : dans un document de texte brut, nous écrivons des mots-clés — appellés <balises> — qui convertiront notre texte en un hypertexte. Ces balises respectent la logique des poupées russes : elles se trouvent entourées progressivement les unes dans les autres. C’est cet emboitement qui donne la structure sémantique de notre document. Après, nous avons vu qu’une norme a été proposé en 1999, permettant de normaliser la façon dont ces balises doivent être écrites et donc traitées dans un navigateur. Nous avons donc copié le prototype d’une page standarde du site du W3C, puis l’ont modifié pour mettre notre propre contenu. Enfin, nous avons testé notre page dans le vérificateur du W3C, pour être sûr que notre page reste valide selon cette norme.


ESAAix - Ecole supérieure d’art d’Aix-en-Provence - http://www.ecole-art-aix.fr