Poétique du HTML : la parole DIVersifiée

« L’HyperText Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que des applets. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation CSS (Cascading Style Sheets, feuilles de style en cascade). » Wikipedia

Bon, dit comme ça c’est un peu sec ! Quoique les « feuilles de style en cascade » peuvent déjà évoquer de verdoyants paysages de montagnes, irrigués de torrents dévalant les pentes, à l’eau fraiche et pure…

XXXX

On verra ainsi comment ce langage informatique et ses pratiques peuvent évoquer la fluidité et les mondes aquatiques. Un prolongement poétique qui va bien au delà de l’image de l’informaticien boutonneux, le geek ou le nerd, complètement accro aux logarithmes, initié aux arcanes du web, rodé aux formules mathématiques. Tous ces signes ésotériques ce qui permet de fabriquer n’importe quelle page HTML lisible on line. Car dans l’univers du numérique, c’est comme au théâtre : il y a le back stage et le on stage, le monde de l’obscurité, les coulisses et la scène, la mise en lumière.

Oui, l’informatique peut être sexy et lapartmanquante va vous le prouver !

Généralités : irrigations et arborescences

Les réseaux sociaux, les réseaux informatiques évoquent déjà tout un quadrillage de routes spatiales, aériennes, voire intergalactiques ! Plus près de nous, sur notre planète Terre, on connait les routes terrestres ou fluviales, les autoroutes de l’information. Certains cheminements sont plus intimes et charmants, sentiers, rivières, rizières, canaux… C’est un peu comme les prémisses de la méditation, lorsque le maître Zen vous suggère de vous représenter mentalement un paysage, puis de zoomer et de visualiser les cours d’eau, les lacs, puis les arbres et les plantes, d’entendre les oiseaux, de sentir cet air frais qui caresse votre visage…

Le web fait référence au monde végétal avec ses fameuses arborescences. Un site internet va se diversifier depuis sa home page (le port d’attache) en une multitude de pages hiérarchisées, reliées entre elles par des ponts virtuels, des passerelles (les liens hypertextes) avec un, deux, trois et plus, niveaux de plongée dans votre recherche. L’arborescence d’un site peut être extrêmement simple, comme un peuplier, ou complexe, comme un chêne, il n’en reste pas moins qu’il va abriter, comme tout arbre/macrocosme, un ensemble végétal/animal que l’internaute souhaite harmonieux et éloquent. Ce site devient à lui seul une biosphère, emplis de gazouillis et de clics-clics. Mais venons-en à la constitution cellulaire de cet arbre, la fibre et la sève. Regardons cet arbre et faisons-en un méta-arbre, constitué de métadonnées. Un exercice très platonicien, somme toute…

Petit schéma imagé des trois niveaux

Il y a tout d’abord le monde d’en bas : les racines de l’arbre plongent dans l’inframonde des signes, l’écriture HTML, le script minutieux comme des hiéroglyphes, un code encore plus alambiqué que celui du Da Vinci Code de Dan Brown. Toutes ces données sont archivées, stockés dans des serveurs réfrigérés et surprotégés, qu’on espère éternels et inaccessibles aux thermites et aux cyber terroristes.

Le transfert des données se fait via les navigateurs internet (Firefox, Chrome, Internet Explorer, Safari…) qui savent faire remonter les métadonnées, afin d’afficher les sites web, blogs, mails, etc. Ils sont connectés à de puissants moteurs de recherche (Google se taillant toujours la part de lion). C’est le tronc commun et les grosses branches.

Et puis le monde d’en haut, les ramifications, les feuilles, des fleurs parfois, qui sont autant de pages web, de mots, d’images, de graphismes, de vidéos, photographies, diaporamas, éclairées, nourries, alimentées par un soleil intérieur, une énergie sans quoi rien de tout cela ne serait possible : l’électricité qui innerve tout le processus et impulse la montée de sève.

On peut également imaginer que ce qui est généralement le but d’une recherche sur le web, le contenu, est le fruit (parfois défendu) de tout cet édifice virtuel.

Je balise, tu balises, nous plongeons

Reprenons le « chemin de balisage » du début. Tout d’abord, il faut retenir qu’une balise HTML ouvre et ferme une zone d’informations, qu’elles se succèdent dans le code HTML qui s’écrit avec des signes (le nec plus ultra de l’abstraction pour les humains) pour composer le scénario en quelque sorte, avec texte, décor et accessoires inclus. Il peut même y avoir des balises enfermées dans d’autres balises, des boîtes dans des boîtes (une mise en abîme !) un peu comme les poupées russes. Mais il y a toujours un début et une fin, une entrée et une sortie de ces zones complètement abstraites. Une balise HTML ponctue une division (les fameuses DIV pour les initiés) de l’espace virtuel. Elles ressemblent respectivement à <…> et </…>. Il faut donc commencer par imaginer une série de balises (jaunes, pourquoi pas, comme en pleine mer et au large des plages) qui flottent dans un espace-temps complètement dématérialisé, le grand vide en quelque sorte. À ne pas confondre avec les balises en carton qui servent à passer des frontières réelles, elles. Jaune ou de toutes les couleurs de l’arc-en-ciel, une balise ouvre avant tout à la possibilité d’une île, euh, que dis-je, d’un cosmos, car c’est effectivement de toute une cosmogonie dont il s’agit ici.

La DÉMATÉRIALISATION est la clef de ce monde under/upper ground, dans lequel on va pouvoir écrire des textes, construire des formes, visibles uniquement sur un écran d’ordinateur ou une tablette, un smartphone… Tout cela en 2 ou 3 dimensions, s’il vous plait, avec des images, des icônes, statiques ou en mouvement. Un fantastique univers qui vous paraît peut-être déjà bien plus réel que la réalité ; c’est en tout cas un monde assurément envoûtant et extrêmement prégnant, voire chronophage ! D’ailleurs comme je le disais plus haut, nous sommes dans un autre espace-temps, un domaine dans lequel il est inutile voire absurde de compter les heures…

Ajustez palmes, masques et tubas, nous maintenant allons plonger dans cet univers virtuel EN TOTALE IMMERSION ! Mais attention, dérouillez vos doigts, qu’ils deviennent souples et ondulants comme des nageoires, caressez votre souris dans le sens du poil car il va falloir y mettre du sien, être INTERACTIF…

Donner du corps à l’invisible

Maintenant qu’on est passé par la phase de l’abstraction/dématérialisation, il va falloir redonner une apparence à tout cela. Retrouvons forme humaine en quelque sorte. Premièrement, la définition de la page, son NOM (le titre) qui est presque sacré, plus quelques métadonnées et des liens extérieurs à la page si nécessaire. C’est un peu comme les pensées : elles restent invisibles et sont toutes contenues dans le head (la tête), tout au dessus de la page en langage HTML, entre les balises <head> et </head>. Car il s’agit surtout de ne pas perdre pied ni tête au milieu de toutes ces données virtuelles.

Le reste, tout ce qui se voit, c’est le body (le corps). Il faut surtout bien centrer le body dans sa DIV principale <body>, celle qui englobe toutes les autres balises de la partie visible, afin que notre page web ait une présentation tout à fait décente face à l’internaute.

DIV pas très float, plutôt clear

Les autres DIV ID, qui définiront des zones lisibles par un œil humain, grâce aux feuilles de style CSS, peuvent être flottantes afin de mieux se répartir entre elles. Ainsi elles glisseront bien les unes avec les autres lorsqu’il s’agira de les positionner dans l’espace virtuel du body, un peu comme des bulles dans une flûte de champagne. On dit alors qu’elles sont float. On a donc une sorte de bulle rectangulaire pour faire une colonne de droite/gauche (sidebar) ou au centre (contenu). Au contraire, les bulles qui adhèrent au verre de la flûte, bien fixées à l’intérieur du contenant body, seront clear ; certaines restent accrochées en haut (bando, navigation) ou tombent en bas (footer). Gloups, DIVin, c’est sublime et très bon pour la digestion.

Les CSS, c’est stylé

Comme pour une mise en page papier classique, nous allons ensuite structurer la page web avec encore une tête, qui se voit cette fois-ci, le header, un corps de page et aussi quelques marges et colonnes. Rien de mieux que nos feuilles de style (CSS) pour donner du style et de l’élégance justement, en définissant la taille, la couleur, la typographies, etc. de chacune des parties qui vont animer la page. Le style s’insère après le head, avec la balise <style>. C’est assez classe, un CSS, sur un éditeur de style ça se définit entre deux accolades rococo { ou }. Par exemple, pour le body général (celui que pour centrer il faut définir float left et right), ça va s’écrire body{ … }

Rajoutez quelques # ; [ — et : pour faire joli, et envoyez le tout sur un serveur afin que le monde entier puisse avoir accès à votre chef d’œuvre, un univers tout en finesse et en apesanteur, encore plus beau que la grande barrière de corail du Pacifique !

De plus en plus fluide

Tout cela coule de source, non ? Il faut savoir aussi qu’on peut avoir, après les colonnes flottantes, des colonnes liquides, avec du texte qui s’écoule comme de l’eau et se répartit automatiquement en fonction du volume qu’on leur imprime… Et si vous agrandissez, ou rapetissez votre fenêtre de navigateur, hop, tout suit et s’adapte au format, tout en restant lisible, c’est magique ! Il y a aussi le liquid content selon Joël de Rosnay par exemple, ce concept d’une grande marée numérique, permanente et en tout lieu, un monde supra-connecté, imprégné de wifi jusqu’à la moelle qui éclipserait la classique connexion privée à Internet.

Si vous voulez aller voir à quoi ressemble en VRAI un encodage HTML, par exemple celui de cette page, il vous suffit d’avoir un Mac, puis d’aller, toujours en restant sur votre navigateur préféré, sur l’onglet Outil, de descendre le menu déroulant jusqu’à Développeur web, puis de choisir dans le sous-menu qui s’ouvre à droite (chez moi c’est comme ça) « Code source de la page » pour le code HTML en entier, ou « Éditeur de styles » pour voir juste les CSS.

Certains on pu voir dans cette merveilleuse duplicité HTML/CSS une contrainte de trop, et désirant en rester au niveau des idées pures, se sont mis à envoyer des spams « CSS SS », dont nous ne tiendrons pas compte ici. Pas de politique dans ce développement, c’est déjà assez compliqué comme ça.

Vous reprendrez bien quelques DIV ??

Un peu perdu dans tout ce jargon, besoin d’un traducteur ? Pas de panique, rien de grave, ce fut un peu comme votre baptême de marin au croisement de la ligne des Tropiques sur les océans du monde. Du moment que les balises sont repérées et bien étanches, pas de risque de se noyer dans le grand vide du virtuel. La page blanche, not found, s’est égarée dans les méandres du web ? Qu’importe, votre poème « la complainte du webdesigner », roulé dans une vraie bouteille en verre bien concrète, ce poème jeté à la mer et flottant au hasard des courants et des navigations sur la Toile trouvera bien un rivage favorable, afin s’être lu un jour par quelques yeux compatissants.

Mais pour la suite, le cheminement doit être référencé, clair et limpide, comme une carte de navigation calculée au compas. Les dossiers seront donc rangés sur le bureau comme des bateaux arrimés à quai, et dans chaque tiroir les ustensiles sont alignés, tandis que les cordages sont parfaitement enroulés. L’équipage est identifié, les commerciaux, les créatifs dont les concepteurs-rédacteurs, l’architecte et le designer d’information, le motion designer, les infographistes et le web designer, le D.A. et son D.A. junior, et toute l’équipe des développeurs se tiennent sur le pont. Magnifique, le chef de projet est au gouvernail, l’œil sur la ligne d’horizon. Prêt à dérouler le fil d’Ariane, on largue les amarres ?…

Bon ben alors maintenant on va pouvoir mettre les voiles… Allez bon vent moussaillon, et vogue le navire !!

XXXX

Pour aller plus loin ou (re)commencer depuis le début, le site du zéro. Sinon une formation web à l’école EMI-CFD, idéale pour un baptême HTML et plus…

Cet article fait partie d’un cycle sur le langage. Vous pouvez retrouver tous les articles dans la rubrique Flux du langage

Florent Hugoniot

 

Publicités

A propos lapartmanquante

Part-iciper, part-ager, part-faire, part-ir, partout et par ici !
Cet article, publié dans Flux du langage, est tagué , , , , , , . Ajoutez ce permalien à vos favoris.

Un commentaire pour Poétique du HTML : la parole DIVersifiée

  1. Argent Sur Le Net dit :

    Merci enormement pour cette mine d information.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s