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.

1. Janvier 1996

De quoi avons nous besoin pour Publier sur le Web?

Etre accessible sur le Web

Pour être accessible sur le World Wide Web, votre information doit être placée sur un serveur WWW, c'est à dire que vos pages HTML doivent être placées sur le disque dur d'un ordinateur sur lequel tourne un serveur de requêtes HTTP. Cet ordinateur serveur doit être connecté à Internet en permanence afin que les utilisateurs puissent y accéder quand ils le désirent.

  • Si vous - ou l'organisation à laquelle vous appartenez (Université, Société, etc...) - disposez d'une connexion Full-IPà Internet, vous pouvez envisager de mettre en place un tel serveur sur l'un de vos ordinateurs.
  • Par contre, si vous n'avez qu'un accès Dialup-IP (le minimum pour utiliser le Web correctement) ou si vous voulez tâter le terrain avant d'installer votre propre serveur, vous allez profiter du serveur Web de votre prestataire de services.

Les bons prestataires incluent désormais dans leurs forfaits mensuels d'abonnement la possibilité de placer quelques pages HTML sur leur serveur, sans frais supplémentaires. Si cette solution comporte certaines restrictions, elle n'en reste pas moins un moyen simple, rapide et efficace "d'entrer dans le Web". Les restrictions que cette méthode comporte sont en fait sans importance pour le débutant. Elles proviennent de la politique commerciale du prestataire d'une part (le contenu de l'information doit être non commercial, limitation d'espace disque...) et de raisons techniques d'autre part (si vous n'avez pas directement accès au serveur, vous ne pouvez pas traiter de formulaires ni d'index cherchable par mot clef... mais ce n'est pas notre objectif premier de toute façon).

Ecrire des pages HTML

La méthode de création des pages est relativement simple. Tout d'abord, essayez de séparer vos informations en différentes "pages", sachant qu'une page, au sens HTML, est un document qui sera chargé en un seul bloc par le client puis affiché pour lecture. Lorsque vous cliquez pour suivre un lien, vous vous rendez (dans la majorité des cas) à une autre page. Chaque page peut être aussi longue que vous le voulez; si une page ne peut être affichée entièrement sur l'écran par un client, une barre de défilement apparaîtra automatiquement pour permettre au lecteur de se déplacer dans la page.

Il est néanmoins recommandé de respecter certaines limites. En effet, des pages trop courtes peuvent obliger le lecteur à changer de page trop souvent, à se perdre dans l'arborescence, et surtout à s'impatienter devant des étapes de chargement répétées. De l'autre côté, des documents trop longs (correspondant à plus de 4 pages A4) ne vont probablement pas être lus en entier...

Vous pouvez taper vos pages avec n'importe quel éditeur de texte ou traitement de texte permettant de sauver le "texte seul". A ce propos, si vous incluez des caractères spéciaux ou accentués, assurez-vous que le jeu de caractères utilisé soit l'ISO Latin-1. C'est le cas général sous Windows, courant sous UNIX, peu fréquent sur Mac et rare sous DOS. Nous verrons plus tard, une méthode de codage des caractères spéciaux permettant de sauver les pages en ASCII-7 bits (l'ASCII-7 bits étant un sous-ensemble de l'ISO Latin-1 et de l'immense majorité des jeux de caractères existants!)

Lors de la rédaction de vos documents, vous pouvez commencer à insérer différents marqueurs HTML pour spécifier la mise en forme. Sauvez alors chaque page dans un fichier séparé portant l'extension .html

Par la suite, vous verrez qu'il est également possible d'utiliser des éditeurs HTML. Ces éditeurs apportent un confort non négligeable par rapport à un éditeur de texte; cependant ils ne faciliteront pas toujours votre compréhension du langage. Peut-être devrirez vous attendre la fin de cette initiation avant de les utiliser...

Vérifier les pages HTML

A ce moment, vous voudrez probablement avoir un aperçu de votre page sous forme formatée. Pour ce faire, chargez simplement un client tel que Netscape, mais sans vous connecter à Internet. Dans le menu "Fichier" de votre client vous trouverez une option appelé "Ouvrir fichier..." ou "Fichier Local...". En sélectionnant cette option, vous aurez la possibilité de choisir un fichier xxx.html que vous avez créé sur votre disque dur et de voir s'afficher la page HTML qu'il contient... sous forme formatée.

Petit détail pratique: Si votre ordinateur n'est pas relié en permanence a Internet et que Netscape Navigator se bloque lorsque vous le lancez sans être connecté allez dans le menu "Options/Preferences/Styles" et sélectionnez "Start with: Blank Page" ce qui évitera que Netscape aille chercher automatiquement une quelconque page de départ sur le réseau.

ATTENTION: Gardez à l'esprit que ce que vous voyez n'est pas exactement ce que verront les gens utilisant un autre client que vous... et même s'ils utilisaient le même, ils pourraient le configurer différemment en ce qui concerne les polices de caractères et les couleurs utilisées. Songez qu'il existe même des clients Web en mode texte, sans aucun graphisme, et utilisables sans souris!

Vous pouvez alors retourner éditer le fichier pour améliorer sa présentation, puis demander à votre client de faire un "reload" pour voir le résultat.

Placer vos pages sur le serveur HTTP

Une fois que le résultat vous convient:

  • Si vous passez par un prestataire de service Internet externe, vous devez suivre ses instructions pour envoyer le ou les fichiers xxx.html vers son serveur; ceci se fait généralement par FTP.
  • Si la machine sur laquelle vous travaillez est directement reliée à Internet, il vous suffit parfois de placer vos pages dans un dossier nommé public_html dans votre compte (sous UNIX).
  • Lorsque vous maîtriserez bien HTML, vous voudrez peut-être mettre en place votre propre serveur HTTP...

A ce moment vos pages sont immédiatement accessibles depuis le monde entier (ou plutôt: l'Internet entier) par une adresse de type http://www.prestataire.domaine.fr/~votrelogin/xxx.html. Une telle adresse est appelée URL (Uniform Resource Locator).