Catégorie: "HTML & CSS"

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.

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).

World Wide Web et HTML

On ne présente plus le World Wide Web (aussi appelé communément Web, WWW ou W3)! C'est probablement la facette la plus médiatique d'Internet. C'est certainement aussi la plus impressionnante: hypertexte, multimédia, distribuée... Paradoxalement, nous allons le voir, c'est aussi la plus accessible pour publier votre information!

En un mot, le Web est un outil idéal, puissant et facile à utiliser. Placez un utilisateur devant le Web et il apprendra à s'en servir tout seul, comme si c'était inné! Au bout de quelques clics de souris, il aura déjà fait le tour de la planète! Pour la suite, vous devez néanmoins savoir que pour consulter le Web, vous utilisez un client (Netscape NavigatorMosaïc,CelloLynx, etc...) qui permet de vous connecter à différents serveurs répartis dans le monde. Vous pouvez, bien sûr, passer d'un serveur à un autre de manière transparente, en cliquant simplement sur un lien. Vos propres informations seront donc installées sur un serveur particulier... mais seront visibles du monde entier comme si elles faisaient partie du Web entier.

Le client le plus utilisé actuellement est très probablement Netscape Navigator (communément appelé Netscape tout court), mais il faut garder à l'esprit qu'une proportion non négligeable des lecteurs potentiels de vos informations utiliseront toujours un client différent et aux capacités différentes, ne serait-ce que parce que tous les logiciels de navigation ne sont pas disponibles sur toutes les plates-formes. Cependant, pour garantir une représentation à peu près uniforme de vos données auprès de n'importe quel utilisateur, tous les clients reconnaissent un langage standardisé de structuration des documents. Ce langage est appelé HTML pour HyperText Markup Language, et consiste à enrichir vos différentes pages d'information avec des marqueurs ("tags") indiquant que telle phrase est un titre, que telle autre est une citation, qu'il faut insérer une image à tel endroit, etc...

Le langage HTML - qui est en fait une application particulière de la norme ISO-SGML (Standard Generalized Markup Language) - a été défini à l'origine par le CERN. Mais rapidement, d'autres acteurs d'Internet (notamment NCSA et Netscape) sont venus apporter des suggestions pour étendre le langage. HTML est donc devenu un standard en perpétuel développement sous le contrôle de l'IETF (Internet Engineering Task Force). On a ainsi vu apparaître successivement HTML version 1 puis 2 et bientôt 3. La particularité de ces différentes versions est d'être compatibles plus ou moins dans les deux sens, c'est-à-dire qu'un document écrit sous HTML 1 peut être affiché sans problème par un client implémentant HTML 3; de même, un document HTML 3 peut être affiché par un client HTML 1 mais cette fois-ci avec certaines restrictions... La compatibilité est étudiée de telle sorte que les restrictions se fassent les plus discrètes possibles et ne gênent pas la lecture.