Catégories: "Développement Web"

1. Janvier 1996

HTML : Titres

Vous pouvez structurer vos pages à l'aide de titres de différentes importances grâce aux marqueurs <H1> à <H6>:

<H1>Titre de niveau 1</H1>
<H2>Titre de niveau 2</H2>
<H3>Titre de niveau 3</H3>
<H4>Titre de niveau 4</H4>
<H5>Titre de niveau 5</H5>
<H6>Titre de niveau 6</H6>

Ce qui donne le résultat suivant à l'affichage:

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5
Titre de niveau 6
1. Janvier 1996

HTML: Retours à la ligne et paragraphes

Vous pouvez revenir à la ligne quand bon vous semble lorsque vous tapez du texte, cela n'aura aucune influence sur la manière dont le browser affichera le texte en question. En effet, HTML considère tout espace, suite d'espaces, tabulation(s) ou retour(s) à la ligne comme une simple séparation entre deux mots. Ainsi lorsque vous tapez ceci:

Oh    qu'il   est    beau!
 Oui qu'il est beau!
  Il est beau mon paragraphe!
   Car il contient des jolis sauts de lignes!
Mais qu'il est beau :-)

... vous obtenez ceci:

Oh qu'il est beau! Oui qu'il est beau! Il est beau mon paragraphe! Car il contient des jolis sauts de lignes! Mais qu'il est beau :-)

Vous constaterez que votre browser n'a pas tenu compte des retours à la ligne ni des espaces multiples se trouvant entre les mots.

 

Retour à la ligne forcé

Si vous voulez revenir à la ligne dans un paragraphe, vous devez le spécifier explicitement avec <BR>. Par exemple:

Oh qu'il est beau! <BR>
Oui qu'il est beau!

donnera l'affichage suivant:

Oh qu'il est beau! 
Oui qu'il est beau!

 

Changement de paragraphe

Maintenant, si vous voulez changer de paragraphe, en sautant une ligne comme il se doit, vous pouvez le faire avec<P>. Par exemple:

Il est beau mon paragraphe! 
<P>
Celui-ci aussi, il est beau, non?

donnera l'affichage suivant:

Il est beau mon paragraphe!

Celui-ci aussi, il est beau, non?

[Note: il serait en fait plus correct d'écrire ceci:]

<p>Il est beau mon paragraphe!</p>
<p>Celui-ci aussi, il est beau, non?</p>

[Le résultat à l'affichage serait rigoureusement identique.]

Séparation horizontale

Finalement, si vous voulez marquer une séparation très nette entre différentes sections d'une page, vous pouvez utiliser le marqueur <HR> qui tracera un trait horizontal en travers de votre page. Cette page en comporte plusieurs.

 

Récapitulatif:

<BR>
Retour à la ligne forcé (sans sauter de ligne, même deux <BR> successifs ne vous feront pas sauter de ligne!)
<P>
Changement de paragraphe (avec saut de ligne). Il n'y a pas d'autre solution pour sauter de ligne.
<HR>
Traçage un trait de séparation horizontal.
1. Janvier 1996

La page HTML de base

Trois marqueurs et leurs compléments permettent de créer le squelette de base à utiliser pour toute page: <HTML> <HEAD> et <BODY>. Ce squelette est donné ci-dessous:

<HTML>
 <HEAD>
  <TITLE>Titre de la page</TITLE>
 </HEAD>
 <BODY>
  Texte à publier...
 </BODY>
</HTML>

[Ceci est en fait incomplet, il faudrait faire précéder ce squelette de base d'un DOCTYPE, mais vous pourrez y revenir plus tard...]

Les différents marqueurs impliqués sont les suivants:

<HTML> et </HTML>
Encadrent l'ensemble de la page HTML
<HEAD> et </HEAD>
Encadrent la section header de la page. Cette section contient notament le titre de la page. Elle peut aussi contenir des informations complémentaires, tels que des mots clefs ou une description à l'intention des moteurs de recherche...
<BODY> et </BODY>
Encadrent la section texte principale de la page. Cette section contiendra l'information à publier proprement dite.
<TITLE> et </TITLE>
Encadrent le titre de la page. Ces marqueurs doivent être utilisés dans la section <HEAD>. Le titre de la page est généralement affiché séparément du reste de la page. Dans les browsers sous forme de fenêtre, le titre apparaîtra généralement dans la barre de titre de la fenêtre.

Le texte à publier doit être placé dans la section <BODY> de votre page HTML comme c'est le cas dans l'exemple donné plus haut.

Tous les exemples donnés par la suite, sauf mention contraire, doivent être placés dans la section <BODY> d'une page HTML.

1. Janvier 1996

Un exemple de pages HTML

Soit fichierA.html:

<HTML>
 <HEAD>
  <TITLE>Document A</TITLE>
 </HEAD>
 <BODY>
 <H1>Ceci est le
     Document A</H1>
 Vous en saurez plus dans le
<A HREF="fichierB.html">Document B</A>.
 </BODY>
</HTML>

...et fichierB.html:

<HTML>
 <HEAD>
  <TITLE>Document B</TITLE>
 </HEAD>
 <BODY>
  <H1>Ceci est le
      Document B</H1>

 Je vous propose d'en
 apprendre un peu plus sur
  <A HREF="http://www.univ-compiegne.fr/">l'UTC</A>...
 <HR>
  <UL>
   <LI>Un élément</LI>
   <LI>Un autre élément</LI>
   <LI>Une liste imbriquée,
       et numérotée en plus:</LI>
    <OL>
     <LI>1er élément...</LI>
     <LI>2ème élément...</LI>
    </OL>
   <LI>Encore un élément</LI>
  </UL>
 <HR>
  Retour au <A HREF="fichierA.html">Document A</A>.
 </BODY>
</HTML>

Vous découvrirez dans ces fichiers quelques marqueurs supplémentaires et notamment ceux permettant de créer des liens vers un autre fichier (local) ou vers un autre serveur en donnant l'URL  complète.

Sachez également que vous pouvez consulter le texte source de n'importe quelle page qui vous plaît en sélectionnant l'option "View/Source..." du menu de votre navigateur lorsque cette page y est affichée. Le menu d'aide de la plupart des clients peut également vous aiguiller vers des sites dédiés à la création de pages pour le Web...

1. Janvier 1996

Les bases du HTML

Pour commencer, rien ne vaut un exemple. Jetez donc un oeil sur le texte source suivant:

<HTML>
 <HEAD>
  <TITLE>Page d'exemple très simple</TITLE>
 </HEAD>
 <BODY>
  <HR>
  <H1>Gros Titre</H1>
   <P>Premier paragraphe...
      Fin.</P>
   <P>Deuxième paragraphe...
      Fin.</P>
  <HR>
   <H2>Moins Gros Titre</H2>
    <P>Du texte...
    La suite...
    <BR>A la ligne.</P>

  <HR>
 </BODY>
</HTML>

Cliquez ici pour voir le résultat à l'écran.

Vous constaterez que le texte source de cette page contient déjà un certain nombre de marqueurs, ces marqueurs devant être insérés entre crochets angulaires <...>. Vous pouvez également constater les marqueurs vont généralement par deux: un marqueur d'ouverture, par exemple <H1> et un marqueur de fermeture, par exemple </H1>. Les marqueurs portent sur la partie de texte entre l'ouverture et la fermeture. Voyons rapidement la signification de ces quelques marqueurs très simples:

<HTML>...</HTML>: englobe l'ensemble de la page au format HTML.

<HEAD>...</HEAD>: englobe certaines informations concernant le document, par exemple le titre qui sera indiqué par<TITLE>. Notez que ce titre apparaît séparé du reste du document à l'affichage, c'est pour çà que vous ne le voyez pas dans le rendu de page ci-dessus. Le titre peut par exemple être affiché dans le titre de la fenêtre du client. Il est également utilisé lorsque l'utilisateur insère votre page dans ses favoris.

<BODY>...</BODY> délimitent le corps de votre document. C'est entre ces marqueurs que vous placerez l'information elle-même.

<HR> est une exception à la règle, il n'y a pas de marqueur de fermeture. [Note: vous pouvez toutefois fermer cette balse de la manière suivante <HR></HR> ou mieux: "à la XHTML" c'est à dire en une seule balise qui ouvre et qui ferme en même temps: <HR />] Ce marqueur signifiant Horizontal Rule, trace un trait de séparation sur toute la largeur de la fenêtre client.

<H1> à <H6> permettent de donner des titres de section de différents niveaux, comme dans le cas des sommaires hiérarchiques que l'on trouve dans la plupart des publications scientifiques. Notez que la norme recommande de ne pas sauter de niveaux dans la hiérarchie, c'est-à-dire qu'il faut éviter d'avoir un <H1>...</H1> suivi par un <H3>...</H3>sans avoir mis de <H2>...</H2> entre eux.

<P>...</P> délimitent un paragraphe. Il est cependant parfaitement correct d'omettre le </P> final puisque le début du prochain paragraphe dénotera forcément la fin du premier. De même, il n'est pas nécessaire d'avoir un <P> juste après un titre. En pratique, on a donc coutume d'utiliser <P> uniquement pour signaler un changement de paragraphe... à vous de voir ce que vous préférez. [Note: tout ceci est effectivement valide en HTML, mais ce sont des mauvaises habitudes qui vous empêcheront d'évoluer facilement vers des langages plus évolués tels que XHTML. Prenez donc l'habitude d'ouvrir et de fermer systématiquement tous vos paragraphes!]

Finalement, <BR> signale un retour à la ligne (Break) sans changement de paragraphe. [Note: là encore, prenez l'habitude d'écrire directement <br />]

Dernier détail à connaître: quel que soit le nombre d'espaces ou de retours à la ligne que vous mettez entre deux mots dans votre code HTML, le client n'interprètera qu'un seul espace. Les retours à la ligne sont générés automatiquement lorsque le texte arrive à droite de l'écran à moins que vous n'ayez inséré un marqueur spécifique.