Catégories: "Développement"

1. Janvier 1996

HTML: Comment créer des listes

HTML vous offre la possibilité de créer des listes dans lesquelles chaque élément se trouve sur une ligne différente.

Il existe différents types de listes:

Listes non numérotées

  • Lait
  • Chocolat

  • Café

    • Noir

    • Au lait

      • Avec du sucre

        • Blanc
        • Roux
      • Sans sucre

Ce type de liste est réalisé grâce aux marqueurs <UL> et </UL> (Unordered List). Chaque entrée de liste est signalée avec le marqueur <LI> (LIst entry):

<UL>
 <LI>Café
 <LI>Chocolat
 <LI>Lait
</UL>

Liste numérotée

  1. Ouvrez
  2. Entrez
  3. Fermez
    1. La porte
    2. La fenêtre
    3. La bouteille
      1. De lait
      2. D'eau
      3. De pinard
<OL>
 <LI>Ouvrez
 <LI>Entrez
 <LI>Fermez
</OL>

Liste de définitions

HTML
HyperText Markup Language
WWW
World Wide Web
<DL>
 <DT>HTML
 <DD>HyperText Markup Language

 <DT>WWW
 <DD>World Wide Web
</DL>
1. Janvier 1996

HTML: Liens hypermédia

Début de la page

Le principal atout de HTML réside dans ses possibilités hypermédia. En effet, vous avez la possibilité (grâce au marqueur <A>) de transformer certains mots, icônes ou images d'une page en sortes deboutons qui, lorsqu'ils sont sélectionnés, renvoient vers un autre paragraphe, une autre page, une image, un son, un clip vidéo, etc...

Il existe plusieurs types de liens différents...

 

Liens vers un autre document

Ceci est un lien vers une autre page Web nommée gato.html dans le même répertoire que la page courante. Voici comment il a été réalisé:

Ceci est un <A HREF="gato.html">lien vers une
autre page Web nommée gato.html</A> dans le
même répertoire que la page courante.

Ceci est un lien vers une autre page Web dont le chemin d'accès est indiqué relativement à la page courante:

Ceci est un <A HREF="../Publier/copyright.html">
lien</A> vers une autre page Web dont le chemin
d'accès est indiqué relativement à la page courante.

Notez:

  • Pour séparer les noms de dossiers, vous devez utiliser des slash /, même si vous travaillez sous MS-DOS où vous avez coutume d'utiliser des backslash \.
  • Pour remonter au dossier supérieur, il faut utiliser le nom .. (point-point)

Liens vers un autre serveur

Ceci est un lien vers un autre serveur - celui de l'UTC. Pour réaliser un tel lien, vous devez indiquer dans HREF une URL complète:

Ceci est un <A HREF="http://www.utc.fr/">lien
vers un autre serveur</A> - celui de l'UTC.

Liens à l'intérieur d'un document

Ceci sont des liens vers le début et la fin de page. On les réalise en indiquant dans HREF le nom d'une étiquette précédé d'un dièse #:

Ceci sont des liens vers le <A HREF="#etiquette_debut">
début</A> et la <A HREF="#etiquette_fin">fin</A> de la page.

Mais bien sur, il faut pour celà avoir défini de telles étiquettes dans la page HTML. C'est ce que nous avons fait au début et à la fin de la présente page de la manière suivante:

<A NAME="etiquette_debut"><EM>Début de la page</EM></A>
<A NAME="etiquette_fin"><EM>Fin de la page</EM></A>

Fin de la page

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.