HTML

En naviguant sur Internet, vous utilisez forcément HTML, sans le savoir sans doute.
Et dès que vous allez vouloir travailler sur les squelettes, il vous sera indispensable d’avoir une compréhension minimale de ce langage de balisage, formalisant l’apparence d’affichage que votre navigateur va donner au texte de vos articles en les affichant à l’écran.

Avec des demandes de nouveaux volontaires apprentis Webmestres en 2020, je réalise qu’aucun article ne rappellait les bases indispensables du HTML à connaitre, sauf leur évocation en Serveur, base de données, ftp, à quoi ça sert ? et Html, php : qu’est-ce que c’est que ce charabia ?.

 
 
 
 
 
 
 
 

 Un langage de "balisage" du texte ?

Parler de "langage HTML" est un un peu paradoxal, car il ne s’agit de que ’codes de présentations’, insérés dans le contenu des pages web transmises à votre navigateur.
Rappelons qu’une page Web n’est qu’une suite de caractères alphabétiques (un texte ASCII simple, lisible naturellement, en Français j’espère pour les lecteurs francophones ;-)) que votre navigateur [1] retranscrira tels quels à l’écran.
Tels quels, pas tout-à-fait ! Le navigateur doit choisir plusieurs indications pour "habiller" l’affichage du texte (voir Séparer présentation et habillage), portant sur :
- la nature de la police identifiée par son nom, son type Serif ou sans Serif...
- la taille, la graisse, la casse, la couleur, le style de chaque caractère,
- l’alignement, l’espacement, l’interlignage et le crénage des paragraphes,
- la disposition relative des paragraphes en blocs dans la page,
- la mise en évidence de libellés de liens hypertexte de renvoi vers d’autres pages
- l’ajout de documents joints (images et fichiers multimedia),
- l’action d’apparence au survol des liens, ou de saut à une nouvelle page cliquée ...
Les enrichissements dynamiques d’interaction avec l’utilisateur relèvent d’autres outils, qui dépassent cette étape avec les <FORM> (formulaires HTML) et les interaction javaScript avec le CSS...

Il faut donc insérer dans le texte des "balises" [2], d’où l’expression et l’appellation !

 La forme du balisage HTML

Pour faire simple, il s’agit d’une convention, définissant des caractères spéciaux pour commencer et finir une chaîne de caractères, instruction de commande spéciale décodée par votre navigateur avant l’affichage : rédacteurs de SPIP, vous en connaissez déjà le principe avec les raccourcis typographiques utilisés en enrichissements dans les articles... [3].
HTML a choisi les deux-trois caractères mathématiques peu courants, les < et > pour circonscrire ces commandes HTML (avec un caractère d’échappement spécial & pour introduire les codifications spéciales [4]) ; évidemment ces deux caractères doivent être strictement appariés [5] d’origine anglo-saxonne. Après cette étiquette, on pourra trouver une suite d’options et paramètres pour spécifier son fonctionnement : [6] la balise {{<a ..>}} -certainement la plus importante sur Internet, doit indiquer un renvoi cliquable à une nouvelle page sur Internet (vers une URL) ; et le navigateur s’attend bien sûr à recevoir un paramètre -l’adresse de l’URL cible- à l’intérieur de cette balise, avant le > fermant : <a href="http://spippourlesnuls.fr">.
La balise ci-dessus marque le début de la portée, le scope de cette instruction (jusqu’où, dans votre texte affiché, s’applique-t-elle) pour mettre en évidence le texte du lien cliquable : vous devez à la suite de cette balise <a href="http://spippourlesnuls.fr"> [7], exprimer ce libellé, jusqu’à le terminer par la balise de fin en correspondance : cette fin est actée à l’apparition de la balise fermante de même nom, la fermeture s’exprimant en préfixant le nom de balise d’un / [8] ici un ’tag’ </a>, pour obtenir au final dans le texte HTML de votre page Web :
....<a href="http://spippourlesnuls.fr/article1 ">SPIP pour Débuter</a> est à lire...

Retenez donc l’importance pour l’écriture d’instructions HTML, les deux niveaux de correspondance :
- une instruction HTML (<a href="..."> ouverte par {{<code>< doit être close par >,
- la portée d’une balise HTML <a..> se termine par la balise de fin </a>
- exception [9] : une instruction à portée nulle (seulement des paramètres dans l’instruction) est auto-fermée, elle intègre sa fin, à la fin...
par exemple, restons sur le cas de la balise <a> pour une ’ancre’, point visé dans le contenu de la page , qu’il faudra écrire <a id="ou" /> en bon puriste.
- on n’a pas dit que vous pouvez englober une balise HTML dans une autre, à condition de respecter le principe des poupées russes [10]
- on finit par l’exception habituelle en informatique : les commentaires !
en HTML on doit enclore un texte de commentaire non affiché par la forme de balise HTML suivante : <!-- ce commentaire ne sera pas affiché --> !
Nota : évidement, vous imaginez que rédiger cette page sur les instructions HTML non affichables par nature, avec des mises en gras par en utilisant les raccourcis typographiques de SPIP, qui doivent, comme les étiquettes HTML etre correctement appariées pour obtenir un affichage correct.... fut une partie de plaisir !

 Quelles balises à reconnaître

Le choix de la balise <a ..>...</a> pour initier cette syntaxe n’était pas innocent, pour toutes raisons que je vous laisse imaginer, comme :
- alphabétique : la première de l’alphabet comme le fondement du HTTP,
- succincte : une lettre facile a identifier pour introduire la syntaxe,
- facile à comprendre : vous avez déjà déjà cliqué sur un lien,
- structuré : avec les deux formes de paramètre (interne et texte englobé),

Nous allons donc signaler quelques balises jugées utiles pour comprendre et décoder les squelettes de SPIP : vu la longueur de la liste, elle sera décomposées en sections arbitraires, et cela ne remplace certainement pas l’un des très nombreux cours HTML à lire.

 Les balises courantes

- la balise de lien hypertexte
<a href="..url..."> text-lien</a>
- les balises de formattage simples (souvent gérées par CSS, donc ne pas les rechercher) :
<b>...</b> : pour bold = gras,
<i>...</i> : pour italic =... ,
<s>...</s> : pour strike = barré [11] (pas très lisible)... ,
<u>...</u> : pour underligned = souligné (traditionnellement réservé pour les liens)
- les balises de formatage informatique :
<pre>...</pre> : pour présenter tel quel,
<code>... : tiens, SPIP l’utilise aussi ... ? [12]
- les balises de délimitation de blocs de texte (non structurantes) :
<p>...</p> : pour paragraph = .....,
<span>...</span> : pour une étendue particulière ,
- les balises de listes, très fréquantes (sont plus complexes : deux niveaux d’imbrication) :
<ul>...</ul> : pour contenir tous les items de la liste
(une liste de lignes <li> est contenu dans un bloc <ul></ul>)
<li>...</li> : pour chaque line (ou groupe) de la liste
- les balises de blocs de texte :
<div>...</div> : pour division structurante de la page
_  voir aussi les délimitations HTML5...
- quelques balises d’inclusions (on omettra désormais la balise de fin dans cette liste)
_ d’image <img src="..." /> (auto-fermante, mais c’est souvent oublié)
_ de définitions de syle CSS <style>  </style> ou <style = "" />
_ de liaison de fichiers externes <link ><scrpt ..>

 Le découpage d’un fichier "page" HTML

Ce paragraphe est plus spécifiquement consacrée aux balises principales qui structurent un fichier HTML ; souvent les squelettes de SPIP sont découpés pour correspondre à ces blocs, dont le rôle fonctionnel est revu, voir en HTML5.
- les balises de structuration de la page HTML (souvent évoquées pour la structure du squelette) :
_ la première <html> englobe tout le reste du fichier de la page Web
_ souvent précédée d’une <DTD..> en HTML5
_ le <body>....<body> englobe tout le corps des textes affichés pour la page
_ le <head>...</head> contient les inclusions d’informations et préfixes non-affichés
_ sauf le <title> dans le <head>) s’affiche dans le bandeau des navigateurs
_ et le <favicon..> indique l’image [13] souvent utilisée dans l’onglet à coté du titre ci-dessus


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1ou browser ou butineur : le programme de votre terminal qui affiche le contenu à l’écran : Firefox, Chrome, Brave, Safari, Edge, Opera, Vivaldi ...pour citer les plus connus.

[2Les ’tags’ ou pieux qui délimitent une piste de slalom ou un chenal pour les bateaux..
Rien à voir avec les balises de SPIP, qui obéissent pourtant au meme concept, masi avec le caractère spécial # suivi d’un nom en MAJUSCULE, justement pour éviter toute confusion...

[3Le langage XML, utilisé pour les définitions et transferts de données, appartient à la même famille initiée par SGML.

[4L’utilisation directe d’un caractère inférieur ou supérieur est alors obtenue par les codes spéciaux &lt; et &gt; dans le texte d’origine... On n’évoquera pas ici les codifications multi-octets, UTF, etc...

[5A chaque < ouvrant une balise / tag HTML doit rapidement correspondre le > fermant, pour activer l’identification et le décodage d’une instruction HTML !
A chaque balise, ou instruction HTML correspond donc un nom ou étiquette en ASCII[[Caractères alphabétiques européens sans accents, désormais plutot utilisés en casse minuscule..

[6Autre exemple une balise <FONT ...> (évidente pour les anglophones / FONT veut dire police de caractères, francisée en "fonte" (cette balise <FONT...> est désormais obsolète, à ne pas utiliser : mauvais exemple !) s’attend à savoir quelle fonte appliquer, par son nom et/ou sa taille...

[7A bien clore, "fermée" par le second caractère spécial >

[8Vous vous perdez à la fin.... Un exemple

[9Comme toujours, les exceptions confirment la règle, pour vérifier votre bonne compréhension.

[10Les début et fin de la balise englobées sont tout deux à l’intérieur, entre les deux balises début & fin de l’instruction HTML extérieure !

[11Non, pas souligné ! Voire ci-dessous. Et le surlignage/stabilo s’obtient plutôt par CSS...

[12On y reviendra peut-être dans un article pour les rédacteurs : SPIP tolérera que vous introduisiez des instructions HTML dans vos textes.... mais censuré on va dire que c’est interdit ! A vos risques et périls garantis !

[13Cette icône ne doit pas être confondue avec le logo du site, ou des pages et objets éditoriaux de SPIP : toute ressemblance ne serait que l’expression de la volonté du webmestre...


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 23 mars, et actualisé en mars 2020 .

Répondre à cet article