Formation HTML les documents structurés, tutoriel & guide de travaux pratiques en pdf.

Séparer la forme du fond

Contrairement aux précédentes versions d’HTML, les nouvelles spécifications permettent de séparer complètement la forme du fond. En fait HTML décrit la structure et les enrichissements sémantiques du texte, et la mise en forme est décrite par CSS (les feuilles de styles).
De cette façon, les logiciels de navigation pourront au mieux présenter les informations en fonction à la fois de la volonté de l’auteur en matière de mise en page, mais aussi des spécificités des lecteurs. De plus les logiciels de type « robot intelligent » (ou plus ou moins intelligent) pourront tirer parti de ces informations.

Utiliser les éléments HTML à bon escient

L’utilisation de balises structurantes à des fins de formatage de paragraphes représente une gène considérable pour beaucoup d’utilisateurs. Prenons un exemple fréquent : utiliser un élément de type DL, qui concerne des listes, pour faire un décalage par rapport à la marge de gauche. La présence de cet élément risque de provoquer une erreur dans le cas d’un navigateur non graphique. Un navigateur purement vocal par exemple risque d’indiquer un début de liste…
Les titres ou « En-têtes »
Les éléments H1, H2… H6 permettent de définir des titres de différents niveaux. On parle aussi d’entêtes pour faire la distinction avec l’élément TITLE placé dans l’élément HEAD.

Il y a 6 niveaux d’entête, H1, H2, H3, H4, H5 et H6. H1 correspond au titre principal, H2 au titre secondaire, etc jusqu’à H6. Les navigateurs graphiques présentent en général les éléments Hn en utilisant des polices de caractère de différentes tailles (la plus grande pour H1…).
Il est important de respecter l’ordre d’apparition des entêtes, de façon à éviter tout risque d’erreur d’interprétation lors de l’utilisation d’un logiciel de navigation spécifique. Certains agents logiciels peuvent en effet utiliser ces éléments pour construire automatiquement une table des matières.
Exemple
 
<H1>Le Havre, porte Océane</H1>
<H2>Le Havre hier…</H2>
  <H3>Anchois Pommier</H3>
  …
  <H3>La révolution industrielle</H3>
  …
  <H3>Le 12 septembre 1944</H3>
  …
<H2>et aujourd’hui</H2>
  <H3>La nouvelle ville</H3>
  …
  <H3>Les mutations économiques</H3>
  …

Les paragraphes

Créer un paragraphe
La gestion des fins de lignes est laissée au logiciel de navigation. En effet, on ne peut pas connaître lors de la rédaction les dimensions de la fenêtre dans laquelle les documents seront visionnés. Il est donc nécessaire d’indiquer explicitement chaque nouveau paragraphe.
Pour cela, on utilise l’élément P. Cet élément se définit en plaçant simplement une balise <P> au début du paragraphe. La balise de fin peut être omise.
Exemple
<P>En 1517, François Premier décide de fonder à l’estuaire de la
Seine un nouveau port. Le Havre est aujourd’hui une ville de
200 000 habitants et l’un des tous premiers ports français.
<P>Complètement détruite en 1944 la ville renaît de ses cendres
sous les plans d’Auguste Perret.
En 1517, François Premier décide de fonder à l’estuaire de la Seine un nouveau port. Le Havre est aujourd’hui une ville de 200 000 habitants et l’un des tous premiers ports français.
Complètement détruite en 1944 la ville renaît de ses cendres sous les plans d’Auguste Perret.

Forcer une fin de ligne

Il est possible de forcer une fin de ligne à l’intérieur d’un paragraphe. Pour cela on utilise l’élément BR. Cet élément s’utilise très simplement aussi, en plaçant une balise <BR> à l’endroit où l’on veut sauter une ligne.
Exemple
<P>Le port du Havre s’étend sur 1000 ha, circonscrits par 28 km
de quais. <BR> Un traffic supérieur à 50 millions de tonnes…
Le port du Havre s’étend sur 1000 ha, circonscrits par 28 km de quais.
Un traffic supérieur à 50 millions de tonnes…

Les paragraphes spéciaux

L’élément PRE
L’élément PRE (pour « preformatted text ») permet d’indiquer qu’une zone de texte est préformattée. Cela signifie qu’elle doit être présentée par le logiciel de navigation « telle qu’elle », en respectant la mise en page du code source. Notamment :

• sans modifier le nombre d’espaces
• en utilisant une police à chasse fixe (dont tous les caractères ont la même largeur)
• en allant à la ligne au même endroit que dans le code source

Exemple
 
<PRE>En 1517, François Premier décide de fonder à l’estuaire de la Seine un nouveau port. Le Havre est aujourd’hui une ville de 200 000 habitants et l’un des tous premiers ports français.
Complètement détruite en 1944 la ville renaît de ses cendres sous les plans d’Auguste Perret.</PRE>
En 1517, François Premier décide de fonder à l’estuaire de la Seine un nouveau port. Le Havre est aujourd’hui une ville de 200 000 habitants et l’un des tous premiers ports français.
Complètement détruite en 1944 la ville renaît de ses cendres sous les plans d’Auguste Perret.