En document HTML (comme vous avez pu le lire en introduction) ne contient que des données, et se limite très souvent à mettre en forme un texte à afficher selon une mise en page particulière, voire à insérer une image, une vidéo ou éventuellement une source sonore. Le HTML n'est qu'un langage à balises qui sert à indiquer aux browsers comment afficher tel ou tel bloc de texte, ou placer une image, et cetera. Cette page "premier pas" vous initiera à l'emploi des balises les plus courantes. Pour en connaître davantage sur le HTML et ses balises, regardez plutôt la section des commandes avancées.
Bon, commençons par le commencement.Un document HTML regroupe des blocs qui délimiteront un pavé de texte (par exemple). Les premiers blocs que vous apprendrez seront :
Voici donc comment se composera obligatoirement un script HTML :
<HTML>
<HEAD>
. . .
</HEAD>
<BODY>
. . .
</BODY>
</HTML>
Les trois marqueurs que nous vous avons indiqués sont obligatoires, ils doivent forcément apparaître dans vos scripts HTML.
Le bloc d'en-tête : HEAD
Nous ne verrons ici, que la caractéristique première du bloc HEAD, c'est à dire donner un titre à votre page HTML.
C'est ainsi que vous insérerez entre les 2 délimiteurs HEAD, un autre bloc : TITLE.
Nous avons maintenant :
<HEAD>
<TITLE>Voici le titre de ma page</TITLE>
</HEAD>
Les navigateurs actuels font apparaître le contenu du bloc TITLE dans la barre qui est juste au-dessus de la barre de menus. Pour ceux qui travaillent sous Windows, il s'agit de la barre bleu, où le nom de la fenêtre active est affiché.
Et bien voilà, les premières instructions n'ont pas été trop douloureuses à comprendre. Comme le reste est de même nature, vous pouvez maintenant vous imaginez la difficulté de mettre en oeuvre une page HTML (du gâteau !).
Le bloc de corps : BODY
Ce bloc regroupe presque les 98% de vos pages HTML (les 2% restants sont pour les marqueurs HEAD). Comme d'habitude, il faudra indiquer un balisage pour mettre en forme vos pages. Nous commençons tout de suite par les en-têtes (headers en anglais).
Il se présentent sous la forme de bloc (eux aussi) de type <Hx> </Hx>
où le petit x qui suit le H est un chiffre compris entre 1 et 6 inclus. La dimension d'un en-tête varie suivant le chiffre que vous lui indiquez.
Ainsi <H1>...</H1> affichera le contenu du bloc en très grosses lettres, alors que <H6>...</H6> affichera le contenu en toutes petites lettres.
Comme un croquis vaut mieux qu'un long discours, voici une exemple ;-) :
Ex : <H1>Exemple d'en-tête de taille 1</H1>
le résultat sera :
Remarque : Comme vous avez pu le voir, des sauts de ligne sont effectués avant et après l'en-tête, nul besoin d'en rajouter.
Ok, vous avez compris ? Si oui continuez à parcourir cette page, sinon relisez attentivement tous les mots qui composent le dernier paragraphe :-).
Vous pouvez également centrer les en-têtes en indiquant une petite commande supplémentaire :
<H2 ALIGN=CENTER>Voici un en-tête centré de type 2</H2> centrera votre en-tête en plein milieu de la ligne. La commande ALIGN peut être égale à LEFT, CENTER ou encore RIGHT.
Notre énoncé <H2 ALIGN=CENTER>Voici un en-tête centré de type 2</H2> donnera comme résultat :
Le prochain marqueur que nous vous ferons découvrir servira à tracer un trait horizontal. Il s'agit du marqueur HR. Il s'emploie tout bêtement en inscrivant : <HR>.
Lui aussi dispose de commandes supplémentaires pour faire varier l'épaisseur du trait, sa longueur et son ombrage. Ainsi vous aurez :
Par défaut, SIZE=1 et l'option NOSHADE est désactivée.
Remarque : Nous tenons à vous indiquer que chaque browser évalue votre script comme il l'entend, les résultats d'un browser à l'autre peuvent donc varier. Si vous tenez à tout prix à contrôler la structure de votre page, programmez "classique", c'est à dire avec des commandes qui sont reconnues de tous les navigateurs actuels, ces derniers les interprêtant tous de la même manière (et encore...). Nous serions trop vous conseiller de tester à la fois vos pages sur Netscape Navigator (qui semble être adopté par beaucoup d'internautes) et sur Internet Explorer (l'autre grand navigateur). Bien évidemment il existe autant de browsers que d'étoiles dans le ciel, vous ne pourrez pas réussir à composer une page HTML qui puisse être la même pour tous ces browsers : donc testez vos pages avec plusieurs navigateurs si vous le pouvez (un conseil d'amis pour éviter les mauvaises surprises).
Vous en connaissez suffisamment pour que nous vous proposions un exemple complet, voici le script :
<HTML>
<HEAD>
<TITLE>Premier exemple complet</TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER>Premier exemple complet</H2>
<HR>
Vous pouvez admirez un exemple complet de toutes les commandes que nous avons pu voir depuis le début de cette section. Avec peu de commandes, nous arrivons déjà à faire quelques chose d'honnête, alors lorsque vous en saurez plus, vous verrez les résultats...
<HR WIDTH=30%>
Nous revoilà sur une autre section de cette page destinée à vous faire comprendre les principes fondamentaux de l'HyperText Mark-up Language (HTML).
</BODY>
</HTML>
Conseil : Vous pouvez demander à votre navigateur d'enregistrer cette page sur votre disque dur, ou sur une disquette, afin de la conserver. Vous pourrez ainsi la lire à tête reposée sans engraisser les télécoms.
Maintenant que vous avez bien compris le mécanisme du HTML, voici une liste de quelques marqueurs que vous pourrez utiliser sans trop de problèmes :
Remarque : Les navigateurs "oublient" les espaces, les sauts de lignes et les tabulations répétés. Ainsi il est inutile de taper plusieurs fois sur la barre espace pour simuler une mise en page, d'insérer plusieurs BR pour sauter des lignes...
Maintenant que vous connaissez le fonctionnement du HTML, vous allez pouvoir en profiter pour faire quelques pages d'essai afin de vous familiariser avec les différentes commandes que nous vous avons listés ci-dessus. Pas de panique, elles fonctionnent toutes sur le même principe, c'est à dire que vous entrez le marqueur de début suivi de votre texte, puis vous fermer le bloc par le marqueur de fin qui est exactement le même que celui de début sauf qu'une barre (un slash : /) est à insérer devant son nom.
Nous avons fait le tour des principales commandes qui affectent le texte. Et si nous abordions maintenant l'insertion d'images, les liens et les ancrages ? Si vous êtes toujours avec nous, retrouvez-nous dans la section des commandes avancées.