HTML

 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...

 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 à 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.
Nota Bene : à moins que vous ne vouliez immédiatement créer un site ’ex-nihilo’ vous n’aurez que des modifications mineures à apporter aux Squelettes de la "dist", à certaines noisettes ; vous avez donc assez peu de connaissances pointues à maîtriser sur HTML ; l’essentiel est d’identifier les blocs de texte mis en forme, puis l’application des sélecteurs CSS (voir Modifier quelques styles), qui facilitera une adaptation de l’apparence graphique homogène dans toutes les pages de votre site.

 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