JavaScool:DocFormatHml : Différence entre versions

De Sciencinfolycee
Aller à : navigation, rechercher
m (Décrire une page HML.)
(div code enlevés)
 
(25 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
[[Catégorie:JavaScoolDev]] __NOTOC__
+
[[Catégorie:JavaScoolDev]] __TOC__
== Documentation HML. ==
 
  
<div>
+
<div class="label1">'''Des pages Web en «HTML minimal» : le HML'''</div>
  
== Introduction. ==
+
Pour bien comprendre la structure logique et les principes fondamentaux des langages HTML, le «sous-langage» HML proposé ici permet de spécifier de manière minimale une page HTML complète. Il est en fait très proche des derniers langages (<tt>XHTML</tt> ou <tt>HTML5</tt>).  
  
Pour bien comprendre la structure logique et les principes fondamentaux des langages HTML, le «sous-langage» HML proposé ici permet de spécifier de manière minimale une page HTML complète. Il est en fait très proche des derniers langages (<tt>XHTML</tt> ou <tt>HTML5</tt>). </div><div>
+
Essentiellement un document HML est [[#Structurer_le_texte_en_divisions.|structuré en division]], le texte est [[#Enrichir_le_texte_en_modifiant_son_aspect.| enrichi pour qualifier son contenu]], tout en [[#Cr.C3.A9er_de_l.27.C2.ABhyper-texte.C2.BB_en_ajoutant_des_objets_et_des_liens.|intégrant des liens hyper-texte]]: ici seul le contenu compte, la mise en page et le rendu doit être spécifié ailleurs, dans les feuilles de style. La page «HML» elle-même est [[#D.C3.A9crire_la_page_HML_elle-m.C3.AAme.|paramétrée par des méta-données]].
  
== Décrire une page HML. ==
+
== Structurer le texte en divisions. ==
  
<div>Un fichier HML contient une page qui va s'afficher dans un navigateur.</div><div>Cette page doit contenir des méta-données permettant de prendre connaissance immédiatement de son contexte, et de la référencer ensuite. </div><div>La construction est de la forme:
+
Un texte est structuré de manière récursive en, par exemple, chapitre qui contiennent des sections, qui contiennent des paragraphes, etc.  
 +
La construction est de la forme:
  
 
{| border="1" align="center"
 
{| border="1" align="center"
 
|
 
|
<div class="code"><div><font color="#990000">'''&lt;page'''</font></div><div><font color="#505000">name</font> <font color="#990000">'''<nowiki>=</nowiki>'''</font> <font color="#008000">"value"</font> .. (pour spécifier une méta-donnée) .. </div><div><font color="#990000">'''>'''></div><div> .. (contenu de la page) .. </div><div><font color="#990000">'''&lt;/page>'''</font></div></div>
 
|}
 
  
  les espaces et retour à la ligne n'étant pas significatifs. </div><div>La syntaxe est:
+
<font color="#990000">'''&lt;div>'''</font> <font color="#505000">title</font> <font color="#990000">'''<nowiki>=</nowiki>'''</font> <font color="#008000">"titre"</font> .. (division) ..  
 
+
&nbsp;&nbsp;<font color="#990000">''''&lt;div>'''</font> .. (sous-division) ..
{| width="90%" bgcolor="#eeeeee"
+
&nbsp;&nbsp; .. (etc.) ..  
| colspan="4" | '''{''' page
+
&nbsp;&nbsp;<font color="#990000">''''&lt;/div>'''</font>
|-
+
<font color="#990000">''''&lt;/div>'''</font>
| align="center" | '''name'''
 
| align="center" | '''type'''
 
| align="center" | '''default value'''
 
|
 
|-
 
| <font color="#505000">title</font>
 
| <font color="#990000">string</font>
 
| ''mandatory''
 
| Titre de la page.
 
|-
 
| <font color="#505000">icon</font>
 
| <font color="#990000">location</font>
 
| <font color="#008000">"null"</font>
 
| Icone permettant de reconnaitre la page.
 
|-
 
| <font color="#505000">author</font>
 
| <font color="#990000">identity</font>
 
| ''mandatory''
 
| Nom et email de l'auteur sous la forme <tt>Prenom Nom <email></tt>.
 
|-
 
| <font color="#505000">tags</font>
 
| <font color="#990000">name*</font>
 
| ''mandatory''
 
| Liste de mots-clé de la page, séparés par des espaces, un mot composé étant construit avec le titre <tt>-</tt>.
 
|-
 
| <font color="#505000">style</font>
 
| <font color="#990000">location</font>
 
| <font color="#008000">"null"</font>
 
| Ficher de style CSS de la page.
 
|-
 
| <font color="#505000">script</font>
 
| <font color="#990000">location</font>
 
| <font color="#008000">"null"</font>
 
| Fichier des fonctions JavaScript de la page.
 
|-
 
| <font color="#505000">abstract</font>
 
| <font color="#990000">string</font>
 
| <font color="#008000">"null"</font>
 
| Description en quelques lignes du contenu de la page (utilisé par les moteurs d'indexation du web).
 
|-
 
| <font color="#505000"><nowiki>*</nowiki></font>
 
| <font color="#990000">string</font>
 
| <font color="#008000">"null"</font>
 
| Autre(s) méta-donnée(s) éventuelle(s), à la discrétion de l'utilisateur.
 
|-
 
| colspan="4" | Structure: "<font color="#202080">div*"</font>
 
|-
 
| colspan="4" |
 
----
 
|-
 
| colspan="4" |
 
|-
 
| colspan="4" | '''}'''
 
 
|}
 
|}
 
+
comme un arbre dont la racine et la section globale du texte et les branches ses divisions et sous divisions jusqu'au feuilles qui sont des paragraphes du texte. Les paramètres possibles sont:  
et cette construction contient une suite de division <font color="#990000">'''{ div'''</font>. </div><div>
+
{| width="90%"  
 
 
=== Discussion. ===
 
 
 
Cette construction correspond à l'entête d'une page HTML (la construction <tt><html><head>..</head>..</html></tt>). Elle force l'utilisateur à définir son identité (pas de page anonyme), un titre à la la page, et des mots-clé ou tag, de façon à ne pas générer de page sans aucun contexte permettant d'en comprendre la pertinence. Elle contraint les éléments de style et de script à être définis dans un unique fichier associé à la page (ce fichier pouvant lui-même en include d'autres), de façon à avoir une organisation de fichier bien organisée. L'encodage est forcément du <tt>UTF-8</tt>, le langage n'est pas spécifié en méta-donnée car le texte lui-même est potentiellement multilingue. </div></div><div>
 
 
 
== Structurer le texte en divisions. ==
 
 
 
<div>Un texte est structuré de manière récursive en, par exemple, chapitre qui contiennent des sections, qui contiennent des paragraphes, etc. </div><div>La construction est de la forme:
 
 
 
{| border="1" align="center"
 
|
 
<div class="code"><div><font color="#990000">'''{ div'''</font> <font color="#505000">title</font> <font color="#990000">'''<nowiki>=</nowiki>'''</font> <font color="#008000">"titre"</font> .. (division) .. </div><div><font color="#990000">'''{ div'''</font> .. (sous-division) .. </div><div> .. (etc.) .. </div><div><font color="#990000">'''}'''</font></div><div><font color="#990000">'''}'''</font></div></div>
 
|}
 
 
 
  comme un arbre dont la racine et la section globale du texte et les branches ses divisions et sous divisions jusqu'au feuilles qui sont des paragraphes du texte. </div><div>La syntaxe est:
 
 
 
{| width="90%" bgcolor="#eeeeee"
 
| colspan="4" | '''{''' div
 
 
|-
 
|-
 
| align="center" | '''name'''
 
| align="center" | '''name'''
Ligne 117 : Ligne 44 :
 
| Définit de quelle type de division il s'agit.
 
| Définit de quelle type de division il s'agit.
 
|-
 
|-
| colspan="4" | Structure: "<font color="#202080">(div|s|l|text())*"</font>
+
| colspan="3" | Structure: "<font color="#202080">(div|s|l|text())*"</font>
|-
+
| Cette construction contient du texte avec des sous-divisions, des blocks de texte et des liens.
| colspan="4" |
 
----
 
|-
 
| colspan="4" |
 
|-
 
| colspan="4" | '''}'''
 
 
|}
 
|}
  
et cette construction contient du texte avec des sous-division, des blocks de texte et des liens, comme définit ci-dessous. </div><div>Le paramètre <tt>class</tt> prend, par exemple, une valeur correspondant:
+
Le paramètre <tt>class</tt> prend, par exemple, une valeur correspondant:
  
{| class="table" width="90%" cellpadding="5px" align="center" bgcolor="#eeeeee"
+
{| class="table" width="90%" cellpadding="5px" align="center"  
| valign="top" | <font color="#990000">'''{div class=ul'''</font>
+
| valign="top" | <font color="#990000">'''class=ul'''</font>
 
| valign="top" | Liste d'items non-numérotés
 
| valign="top" | Liste d'items non-numérotés
 
|-
 
|-
| valign="top" | <font color="#990000">'''{div class=ol'''</font>
+
| valign="top" | <font color="#990000">'''class=ol'''</font>
 
| valign="top" | Liste d'items numérotés
 
| valign="top" | Liste d'items numérotés
 
|-
 
|-
| valign="top" | <font color="#990000">'''{div class=table'''</font>
+
| valign="top" | <font color="#990000">'''class=table'''</font>
 
| valign="top" | Table avec des lignes et des collones
 
| valign="top" | Table avec des lignes et des collones
 
|-
 
|-
| valign="top" | <font color="#990000">'''{div class=margin'''</font>
+
| valign="top" | <font color="#990000">'''class=margin'''</font>
 
| valign="top" | Pour des notes en marge
 
| valign="top" | Pour des notes en marge
 
|-
 
|-
| valign="top" | <font color="#990000">'''{div class=center'''</font>
+
| valign="top" | <font color="#990000">'''class=center'''</font>
 
| valign="top" | Pour des informations centrales
 
| valign="top" | Pour des informations centrales
 
|-
 
|-
| valign="top" | <font color="#990000">'''{div class='*''''</font>
+
| valign="top" | <font color="#990000">'''class='*''''</font>
 
| valign="top" | Autre type de structure, à la discrétion de l'utilisateur
 
| valign="top" | Autre type de structure, à la discrétion de l'utilisateur
 
|}
 
|}
 +
qui correspondent à la façon dont le texte est structuré et à la façon dont le texte sera rendu sur la page.
  
<br /> qui correspondent à la façon dont le texte est structuré et à la façon dont le texte sera rendu sur la page. <div>A titre de raccourci les paragraphes peuvent s'appeler <font color="#990000">'''{ p'''</font> au lieu de <font color="#990000">'''{ div'''</font>. </div>
+
A titre de raccourci les paragraphes peuvent s'appeler <font color="#990000">'''&lt;p>'''</font> au lieu de <font color="#990000">'''&lt;div>'''</font>, les deux noms étant complètement équivalent à ce niveau.
  
 
* Dans le cas d'une liste, les sous-divisions seront les ''items'' de la liste.
 
* Dans le cas d'une liste, les sous-divisions seront les ''items'' de la liste.
 
* Dans le cas d'une table, les sous-divisions seront les ''lignes'' de la table et leurs sous-divisions les ''cellules'' de la table (on les définit de gauche à droite puis de haut en bas).
 
* Dans le cas d'une table, les sous-divisions seront les ''lignes'' de la table et leurs sous-divisions les ''cellules'' de la table (on les définit de gauche à droite puis de haut en bas).
  
<div>La façon dont le texte sera rendu, le ''style'' est complètement séparé du contenu: on distingue complètement le fait d'écrire le texte de la façon de le mettre en page. Cette mise en page sera définie dans les fichier de style. </div></div><div>
+
 
 +
La façon dont le texte sera rendu, le ''style'' est complètement séparé du contenu: on distingue complètement le fait d'écrire le texte de la façon de le mettre en page. Cette mise en page sera définie dans les fichier de style.  
 +
 
  
 
=== Discussion. ===
 
=== Discussion. ===
  
Cette construction correspond à tous les éléments HTML qui définissent des containers de texte. Elle force l'utilisateur à se concentrer sur le fond du contenu, pas sur sa forme. Le rendu peut en effet dépendre du support (grand écran, écran de balladeur, papier, ..). </div></div><div>
+
Cette construction correspond à tous les éléments HTML qui définissent des containers de texte. Elle force l'utilisateur à se concentrer sur le fond du contenu, pas sur sa forme. Le rendu peut en effet dépendre du support (grand écran, écran de balladeur, papier, ..).
 
 
== Enrichir le texte en modifiant son aspect. ==
 
  
<div>Dans un éditeur on peut modifier l'aspect d'un morceau de texte en changeant sa couleur ou son style, etc. Cela permet de montrer que l'importance ou le sens de ce morceau de texte est différent du reste. </div><div>Une telle construction est de la forme:
+
== Enrichir le texte en qualifiant son contenu. ==
  
 +
Dans un éditeur on peut modifier l'aspect d'un morceau de texte en changeant sa couleur ou son style, etc. Cela permet de montrer que l'importance ou le sens de ce morceau de texte est différent du reste. Une telle construction est de la forme:
 
{| border="1" align="center"
 
{| border="1" align="center"
 
|
 
|
<div class="code"><div>(texte ordinaire) ..<font color="#990000">'''{ s'''</font> <font color="#505000">class</font><font color="#990000">'''<nowiki>=</nowiki>'''</font><font color="#008000">"type-de-texte"</font> .. (texte enrichi) .. <font color="#990000">'''}'''</font> .. (suite du texte) </div></div>
+
(texte ordinaire) ..
 +
<font color="#990000">'''&lt;s'''</font>
 +
<font color="#505000">class</font><font color="#990000">'''<nowiki>=</nowiki>'''</font><font color="#008000">"type-de-texte"</font><font color="#990000">''>'''</font>
 +
.. (texte enrichi) ..
 +
<font color="#990000">'''&lt;/s'''</font>  
 +
.. (suite du texte) ..
 
|}
 
|}
 
+
où le texte enrichi est encapsulé dans un tag <font color="#990000">'''&lt;s''' '''&lt;/s'''</font> en précisant la classe de texte en question. Le paramètre est:  
  où le texte enrichi est mis entre accolade en précisant la classe de texte en question. </div><div>La syntaxe est:
+
{| width="90%"  
 
 
{| width="90%" bgcolor="#eeeeee"
 
| colspan="4" | '''{''' s
 
 
|-
 
|-
 
| align="center" | '''name'''
 
| align="center" | '''name'''
Ligne 184 : Ligne 109 :
 
| Définit de quelle type de division il s'agit.
 
| Définit de quelle type de division il s'agit.
 
|-
 
|-
| colspan="4" | Structure: "<font color="#202080">(l|text())*"</font>
+
| colspan="3" | Structure: "<font color="#202080">(l|text())*"</font>  
|-
+
| Cette construction contient du texte avec des blocks de texte et des liens (mais pas de sous-divisions).
| colspan="4" |
 
----
 
|-
 
| colspan="4" |
 
|-
 
| colspan="4" | '''}'''
 
 
|}
 
|}
  
et cette construction contient du texte avec des blocks de texte et des liens, comme définit ici et ci-dessous. </div><div>Le paramètre <font color="#990000">'''class'''</font> prend comme précédemment une valeur sémantique (qui décrit le sens que donne à cet enrichissement), indépendemment de la forme avec laquelle il sera redu. </div><div>A titre de raccourci, les constructions suivantes sont définies:
+
Le paramètre <font color="#990000">'''class'''</font> prend comme précédemment une valeur sémantique (qui décrit le sens que donne à cet enrichissement), indépendemment de la forme avec laquelle il sera redu.  
 +
A titre de raccourci, les constructions suivantes sont définies:
  
{| class="table" width="90%" cellpadding="5px" align="center" bgcolor="#eeeeee"
+
{| class="table" width="90%" cellpadding="5px" align="center"  
| valign="top" | <font color="#990000">'''{ b'''</font>
+
| valign="top" | <font color="#990000">'''&lt;b>'''</font>
| valign="top" | (bold) Texte ou texte important à ne pas manquer lors de lecture rapide
+
| valign="top" | (class = bold) Texte ou texte important à ne pas manquer lors de lecture rapide
 
|-
 
|-
| valign="top" | <font color="#990000">'''{ i'''</font>
+
| valign="top" | <font color="#990000">'''&lt;i>'''</font>
| valign="top" | (idiom) Mot ou texte utilisé dans un sens particulier ou d'une autre langue, dont le sens est à bien calculer
+
| valign="top" | (class = idiom) Mot ou texte utilisé dans un sens particulier ou d'une autre langue, dont le sens est à bien calculer
 
|-
 
|-
| valign="top" | <font color="#990000">'''{ c'''</font>
+
| valign="top" | <font color="#990000">'''&lt;c>'''</font>
| valign="top" | (code) Mot ou texte appartenant à un langage informatique ou formel
+
| valign="top" | (class = code) Mot ou texte appartenant à un langage informatique ou formel
 
|-
 
|-
| valign="top" | <font color="#990000">'''{ S'''</font>
+
| valign="top" | <font color="#990000">'''&lt;S>'''</font>
| valign="top" | (sup) Mot ou texte en exposant (comme dans «x au carré» <tt>x{S 2}</tt>
+
| valign="top" | (class = sup) Mot ou texte en exposant (comme dans «x au carré» <tt>x{S 2}</tt>
 
|-
 
|-
| valign="top" | <font color="#990000">'''{ I'''</font>
+
| valign="top" | <font color="#990000">'''&lt;I>'''</font>
| valign="top" | (sub) Mot ou texte en indexe (inverse de l'exposant) pour décrire des objets paramétrés
+
| valign="top" | (class = sub) Mot ou texte en indexe (inverse de l'exposant) pour décrire des objets paramétrés
 
|}
 
|}
 
+
cette liste n'étant pas limitative. Ces constructions sont des synonymes de <font color="#990000">'''&lt;s class="bold"'''</font>, etc..  
<br /> cette liste n'étant pas limitative. Ces constructions sont des synonymes de <font color="#990000">'''{ s class="bold"'''</font>, etc.. </div><div>
 
  
 
=== Discussion. ===
 
=== Discussion. ===
  
Cette construction correspond à l'élément HTML <tt><span>..</span></tt> et à tous les éléments dérivés. L'introduction de raccourci allège la lecture et l'édition du texte source, que l'on veut rester lisible ici (contrairement au XML ou HTML qui sont supposés cachés à l'utilisateur). </div></div><div>
+
Cette construction correspond à l'élément HTML <tt><span>..</span></tt> et à tous les éléments dérivés. L'introduction de raccourci allège la lecture et l'édition du texte source, que l'on veut rester lisible ici (contrairement au XML ou HTML qui sont supposés cachés à l'utilisateur).
  
 
== Créer de l'«hyper-texte» en ajoutant des objets et des liens. ==
 
== Créer de l'«hyper-texte» en ajoutant des objets et des liens. ==
  
<div>Dans un texte il est possible de référencer d'autres textes, images ou animations.</div><div>Soit on accède ces éléments soit en cliquant, soit ces éléments sont insérés dans le texte.</div><div>La syntaxe de cette construction est:
+
Dans un texte il est possible de référencer d'autres textes, images ou animations. Soit on accède ces éléments soit en cliquant, soit ces éléments sont insérés dans le texte.
 
+
{| width="90%" bgcolor="#eeeeee"
+
Une telle construction est de la forme:
| colspan="4" | '''{''' l
+
{| border="1" align="center"
 +
|
 +
<font color="#990000">'''&lt;l'''</font>
 +
<font color="#505000">text</font><font color="#990000">'''<nowiki>=</nowiki>'''</font><font color="#008000">"description-du-lien"</font>
 +
etc . .
 +
<font color="#990000">'''&lt;/>'''</font>
 +
|}
 +
Les paramètres sont:
 +
{| width="90%"
 
|-
 
|-
 
| align="center" | '''name'''
 
| align="center" | '''name'''
Ligne 251 : Ligne 178 :
 
| Définit de quelle type de lien il s'agit.
 
| Définit de quelle type de lien il s'agit.
 
|-
 
|-
| colspan="4" | ''no element''
+
| colspan="3" | ''pas de sous-élément''
|-
 
| colspan="4" |
 
----
 
|-
 
| colspan="4" |
 
|-
 
| colspan="4" | '''}'''
 
 
|}
 
|}
  
et cette construction ne contient rien. </div><div>Le paramètre <font color="#990000">'''class'''</font> prend comme précédemment une valeur sémantique, qui décrit en partculier si l'élément est inséré dans la page ou accessible par un clic. Il prend, par exemple, une valeur correspondant:
+
Le paramètre <font color="#990000">'''class'''</font> prend comme précédemment une valeur sémantique, qui décrit en partculier si l'élément est inséré dans la page ou accessible par un clic. Il prend, par exemple, une valeur correspondant:
 
+
{| class="table" width="90%" cellpadding="5px" align="center"
{| class="table" width="90%" cellpadding="5px" align="center" bgcolor="#eeeeee"
 
 
| valign="top" | <font color="#990000">'''replace'''</font>
 
| valign="top" | <font color="#990000">'''replace'''</font>
 
| valign="top" | Pour fermer cette page et ouvrir une autre page à la place.
 
| valign="top" | Pour fermer cette page et ouvrir une autre page à la place.
Ligne 270 : Ligne 189 :
 
| valign="top" | Pour insérer le contenu d'un fichier ''Hml'' dans la présente page.
 
| valign="top" | Pour insérer le contenu d'un fichier ''Hml'' dans la présente page.
 
|-
 
|-
| valign="top" | <font color="#990000">'''new'''</font>
+
| valign="top" | <font color="#990000">'''newtab'''</font>
| valign="top" | Pour s'ouvrir dans une autre fenêtre.
+
| valign="top" | Pour l'ouvrir dans une autre fenêtre.
 
|-
 
|-
 
| valign="top" | <font color="#990000">'''<nowiki>*</nowiki>'''</font>
 
| valign="top" | <font color="#990000">'''<nowiki>*</nowiki>'''</font>
Ligne 277 : Ligne 196 :
 
|}
 
|}
  
<br />. <div>Une construction de la forme <tt><font color="#990000">'''{l class="''name''}'''</font></tt> désigne une entité de nom ''name'', c'est à dire un mot du texte qui sera rendu de manière particulière. </div></div><div>
+
Une construction de la forme <tt><font color="#990000">'''&lt;l class="''name''>'''</font></tt> désigne une entité de nom ''name'', c'est à dire un mot du texte qui sera rendu de manière particulière.  
 +
           
 +
Dans le cas d'une image à insérer la construction de base est de la forme
 +
<font color="#990000">'''&lt;l'''</font>
 +
<font color="#505000">icon</font><font color="#990000">'''<nowiki>=</nowiki>'''</font><font color="#008000">"nom-du-fichier-image"</font>
 +
<font color="#990000">'''/>'''</font>
 +
donc la classe est <font color="#990000">'''include'''</font> par défaut. On peut ajouter un lien avec l'attribut <font color="#505000">link</font> qui sera cliquable sur l'image, un titre à l'image avec l'attribut <font color="#505000">text</font> qui sera à la fois le texte de remplacement si l'image n'est pas visible et un titre si il est affichable.
 +
 
 +
 
 +
=== Discussion. ===
 +
 
 +
Cette construction correspond aux éléments HTML <tt><a href= ../..>.</tt> et <tt><img src= ../..>.</tt> et à tous les éléments (tel que <tt><object ...</tt>), qui incluent des contenus dans le texte. L'intégration des ces éléments étant considéré comme au-delà de la compétence d'un rédacteur de texte, la présente spécification se propose de les encapsuler, pour être utilisés sans se donner la peine de les programmer.
 +
 
 +
== Décrire la page HML elle-même. ==
 +
 
 +
Un fichier HML contient une page qui va s'afficher dans un navigateur.
 +
Cette page doit contenir des méta-données permettant de prendre connaissance immédiatement de son contexte, et de la référencer ensuite.
 +
La construction est de la forme:
 +
 
 +
{| border="1" align="center"
 +
|
 +
<font color="#990000">'''&lt;page'''</font>
 +
<font color="#505000">title</font> <font color="#990000">'''<nowiki>=</nowiki>'''</font> <font color="#008000">"value"</font> .. (et autres méta-donnée) ..
 +
<font color="#990000">'''>'''
 +
.. (contenu de la page) ..
 +
<font color="#990000">'''&lt;/page>'''</font>
 +
|}
 +
les espaces et retour à la ligne n'étant pas significatifs. Les paramètres possibles sont:
 +
{| width="90%"
 +
|-
 +
| align="center" | '''name'''
 +
| align="center" | '''type'''
 +
| align="center" | '''default value'''
 +
|
 +
|-
 +
| <font color="#505000">title</font>
 +
| <font color="#990000">string</font>
 +
| ''mandatory''
 +
| Titre de la page.
 +
|-
 +
| <font color="#505000">icon</font>
 +
| <font color="#990000">location</font>
 +
| <font color="#008000">"null"</font>
 +
| Icone permettant de reconnaitre la page.
 +
|-
 +
| <font color="#505000">author</font>
 +
| <font color="#990000">identity</font>
 +
| ''mandatory''
 +
| Nom et email de l'auteur sous la forme <tt>Prenom Nom <email></tt>.
 +
|-
 +
| <font color="#505000">tags</font>
 +
| <font color="#990000">name*</font>
 +
| ''mandatory''
 +
| Liste de mots-clé de la page, séparés par des espaces, un mot composé étant construit avec le titre <tt>-</tt>.
 +
|-
 +
| <font color="#505000">style</font>
 +
| <font color="#990000">location</font>
 +
| <font color="#008000">"null"</font>
 +
| Ficher de style CSS de la page.
 +
|-
 +
| <font color="#505000">script</font>
 +
| <font color="#990000">location</font>
 +
| <font color="#008000">"null"</font>
 +
| Fichier des fonctions JavaScript de la page.
 +
|-
 +
| <font color="#505000">abstract</font>
 +
| <font color="#990000">string</font>
 +
| <font color="#008000">"null"</font>
 +
| Description en quelques lignes du contenu de la page (utilisé par les moteurs d'indexation du web).
 +
|-
 +
| <font color="#505000"><nowiki>*</nowiki></font>
 +
| <font color="#990000">string</font>
 +
| <font color="#008000">"null"</font>
 +
| Autre(s) méta-donnée(s) éventuelle(s), à la discrétion de l'utilisateur.
 +
|-
 +
| colspan="3" | Structure: "<font color="#202080">div*"</font>  
 +
| Cette construction contient une suite de division <font color="#990000">'''div'''</font>.
 +
|}
  
 
=== Discussion. ===
 
=== Discussion. ===
  
Cette construction correspond aux éléments HTML <tt><a href="?page=api:/org/javascool/doc-files/..">.</tt> et <tt><img src="/api//org/javascool/doc-files/..">.</tt> et à tous les éléments (tel que <tt><object ...</tt>), qui incluent des contenus dans le texte. L'intégration des ces éléments étant considéré comme au-delà de la compétence d'un rédacteur de texte, la présente spécification se propose de les encapsuler, pour être utilisés sans ce donner la peine de les programmer. </div></div>
+
Cette construction correspond à l'entête d'une page HTML (la construction <tt><html><head>..</head>..</html></tt>). Elle force l'utilisateur à définir son identité (pas de page anonyme), un titre à la la page, et des mots-clé ou tag, de façon à ne pas générer de page sans aucun contexte permettant d'en comprendre la pertinence. Elle contraint les éléments de style et de script à être définis dans un unique fichier associé à la page (ce fichier pouvant lui-même en include d'autres), de façon à avoir une organisation de fichier bien organisée. L'encodage est forcément du <tt>UTF-8</tt>, le langage n'est pas spécifié en méta-donnée car le texte lui-même est potentiellement multilingue.

Version actuelle datée du 8 novembre 2011 à 09:52

Des pages Web en «HTML minimal» : le HML

Pour bien comprendre la structure logique et les principes fondamentaux des langages HTML, le «sous-langage» HML proposé ici permet de spécifier de manière minimale une page HTML complète. Il est en fait très proche des derniers langages (XHTML ou HTML5).

Essentiellement un document HML est structuré en division, le texte est enrichi pour qualifier son contenu, tout en intégrant des liens hyper-texte: ici seul le contenu compte, la mise en page et le rendu doit être spécifié ailleurs, dans les feuilles de style. La page «HML» elle-même est paramétrée par des méta-données.

Structurer le texte en divisions.

Un texte est structuré de manière récursive en, par exemple, chapitre qui contiennent des sections, qui contiennent des paragraphes, etc. La construction est de la forme:

<div> title = "titre" .. (division) ..   '<div> .. (sous-division) ..    .. (etc.) ..   '</div> '</div>

comme un arbre dont la racine et la section globale du texte et les branches ses divisions et sous divisions jusqu'au feuilles qui sont des paragraphes du texte. Les paramètres possibles sont:

name type default value
title string "null" Titre de la division.
id name "null" Unique identificateur (étiquette) qui permet de référencer la division, chaque division doit avoir un identifiant différent.
class name "null" Définit de quelle type de division il s'agit.
Structure: "(div|s|l|text())*" Cette construction contient du texte avec des sous-divisions, des blocks de texte et des liens.

Le paramètre class prend, par exemple, une valeur correspondant:

class=ul Liste d'items non-numérotés
class=ol Liste d'items numérotés
class=table Table avec des lignes et des collones
class=margin Pour des notes en marge
class=center Pour des informations centrales
class='*' Autre type de structure, à la discrétion de l'utilisateur

qui correspondent à la façon dont le texte est structuré et à la façon dont le texte sera rendu sur la page.

A titre de raccourci les paragraphes peuvent s'appeler <p> au lieu de <div>, les deux noms étant complètement équivalent à ce niveau.

  • Dans le cas d'une liste, les sous-divisions seront les items de la liste.
  • Dans le cas d'une table, les sous-divisions seront les lignes de la table et leurs sous-divisions les cellules de la table (on les définit de gauche à droite puis de haut en bas).


La façon dont le texte sera rendu, le style est complètement séparé du contenu: on distingue complètement le fait d'écrire le texte de la façon de le mettre en page. Cette mise en page sera définie dans les fichier de style.


Discussion.

Cette construction correspond à tous les éléments HTML qui définissent des containers de texte. Elle force l'utilisateur à se concentrer sur le fond du contenu, pas sur sa forme. Le rendu peut en effet dépendre du support (grand écran, écran de balladeur, papier, ..).

Enrichir le texte en qualifiant son contenu.

Dans un éditeur on peut modifier l'aspect d'un morceau de texte en changeant sa couleur ou son style, etc. Cela permet de montrer que l'importance ou le sens de ce morceau de texte est différent du reste. Une telle construction est de la forme:

(texte ordinaire) .. <s class'="type-de-texte"> .. (texte enrichi) .. </s .. (suite du texte) ..

où le texte enrichi est encapsulé dans un tag <s </s en précisant la classe de texte en question. Le paramètre est:

name type default value
class name mandatory Définit de quelle type de division il s'agit.
Structure: "(l|text())*" Cette construction contient du texte avec des blocks de texte et des liens (mais pas de sous-divisions).

Le paramètre class prend comme précédemment une valeur sémantique (qui décrit le sens que donne à cet enrichissement), indépendemment de la forme avec laquelle il sera redu. A titre de raccourci, les constructions suivantes sont définies:

<b> (class = bold) Texte ou texte important à ne pas manquer lors de lecture rapide
<i> (class = idiom) Mot ou texte utilisé dans un sens particulier ou d'une autre langue, dont le sens est à bien calculer
<c> (class = code) Mot ou texte appartenant à un langage informatique ou formel
<S> (class = sup) Mot ou texte en exposant (comme dans «x au carré» x{S 2}
<I> (class = sub) Mot ou texte en indexe (inverse de l'exposant) pour décrire des objets paramétrés

cette liste n'étant pas limitative. Ces constructions sont des synonymes de <s class="bold", etc..

Discussion.

Cette construction correspond à l'élément HTML .. et à tous les éléments dérivés. L'introduction de raccourci allège la lecture et l'édition du texte source, que l'on veut rester lisible ici (contrairement au XML ou HTML qui sont supposés cachés à l'utilisateur).

Créer de l'«hyper-texte» en ajoutant des objets et des liens.

Dans un texte il est possible de référencer d'autres textes, images ou animations. Soit on accède ces éléments soit en cliquant, soit ces éléments sont insérés dans le texte.

Une telle construction est de la forme:

<l text="description-du-lien" etc . . </>

Les paramètres sont:

name type default value
text string "null" Texte décrivant le lien.
icon location "null" Image décrivant ce lien.
link location "null" Ressource décrite par ce lien.
class name "null" Définit de quelle type de lien il s'agit.
pas de sous-élément

Le paramètre class prend comme précédemment une valeur sémantique, qui décrit en partculier si l'élément est inséré dans la page ou accessible par un clic. Il prend, par exemple, une valeur correspondant:

replace Pour fermer cette page et ouvrir une autre page à la place.
include Pour insérer le contenu d'un fichier Hml dans la présente page.
newtab Pour l'ouvrir dans une autre fenêtre.
* Pour un autre rendu, à définir par ailleurs.

Une construction de la forme <l class="name> désigne une entité de nom name, c'est à dire un mot du texte qui sera rendu de manière particulière.

Dans le cas d'une image à insérer la construction de base est de la forme <l icon="nom-du-fichier-image" /> donc la classe est include par défaut. On peut ajouter un lien avec l'attribut link qui sera cliquable sur l'image, un titre à l'image avec l'attribut text qui sera à la fois le texte de remplacement si l'image n'est pas visible et un titre si il est affichable.


Discussion.

Cette construction correspond aux éléments HTML <a href= ../..>. et <img src= ../..>. et à tous les éléments (tel que <object ...), qui incluent des contenus dans le texte. L'intégration des ces éléments étant considéré comme au-delà de la compétence d'un rédacteur de texte, la présente spécification se propose de les encapsuler, pour être utilisés sans se donner la peine de les programmer.

Décrire la page HML elle-même.

Un fichier HML contient une page qui va s'afficher dans un navigateur. Cette page doit contenir des méta-données permettant de prendre connaissance immédiatement de son contexte, et de la référencer ensuite. La construction est de la forme:

<page title = "value" .. (et autres méta-donnée) .. > .. (contenu de la page) .. </page>

les espaces et retour à la ligne n'étant pas significatifs. Les paramètres possibles sont:

name type default value
title string mandatory Titre de la page.
icon location "null" Icone permettant de reconnaitre la page.
author identity mandatory Nom et email de l'auteur sous la forme Prenom Nom <email>.
tags name* mandatory Liste de mots-clé de la page, séparés par des espaces, un mot composé étant construit avec le titre -.
style location "null" Ficher de style CSS de la page.
script location "null" Fichier des fonctions JavaScript de la page.
abstract string "null" Description en quelques lignes du contenu de la page (utilisé par les moteurs d'indexation du web).
* string "null" Autre(s) méta-donnée(s) éventuelle(s), à la discrétion de l'utilisateur.
Structure: "div*" Cette construction contient une suite de division div.

Discussion.

Cette construction correspond à l'entête d'une page HTML (la construction ....). Elle force l'utilisateur à définir son identité (pas de page anonyme), un titre à la la page, et des mots-clé ou tag, de façon à ne pas générer de page sans aucun contexte permettant d'en comprendre la pertinence. Elle contraint les éléments de style et de script à être définis dans un unique fichier associé à la page (ce fichier pouvant lui-même en include d'autres), de façon à avoir une organisation de fichier bien organisée. L'encodage est forcément du UTF-8, le langage n'est pas spécifié en méta-donnée car le texte lui-même est potentiellement multilingue.