Galop d'essai
Sans entrer dans un cours de HTML, voici quelques petits exemples pour améliorer cette première page. Et surtout pour bien sentir à quel point il est simple de manipuler quelques balises et de mettre son site à jour aussi souvent que l'on veut.
Un contenu un peu plus riche
Le langage HTML n'est en fait qu'un ensemble de balises, des sortes de mots-clés, qui ne servent qu'à indiquer au navigateur de votre visiteur comment il doit afficher les éléments de votre page.
Dans notre premier essai, vous avec constaté que ce qui devrait être un titre de page, les mots "Bienvenue sur mon site", s'affichent contre le bord gauche et en petits caractères. En effet, nous n'avons placé aucune balise indiquant que cela doive être autrement... Il serait mieux que notre titre soit centré : qu'à cela ne tienne, reprenons le fichier de ce premier exemple qui contenait :
<HTML>
<HEAD>
</HEAD>
<BODY>
Bienvenue sur mon site
</BODY>
</HTML>
Pour le centrer, il suffit d'ajouter la balise <CENTER>, toujours avec notre Bloc-notes :
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>Bienvenue sur mon site</CENTER>
</BODY>
</HTML>
On enregistre, on ouvre dans le navigateur : le titre est centré ! Une petite remarque au passage : de nombreuses balises HTML ont une version "ouvrante" (ici <CENTER>) et une version "fermante" (</CENTER>). Il s'agit en effet d'indiquer au navigateur quand il doit finir de centrer le texte, il ne le devinera pas tout seul ! Au-delà de la balise </CENTER>, l'affichage reprendra selon le mode par défaut, c'est-à-dire aligné à gauche.
Le titre est centré, mais bien petit... Donnons-lui donc un peu plus de consistance, en ajoutant une nouvelle balise, la balise <FONT> :
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
<FONT FACE="Comic sans MS" SIZE="+4">Bienvenue sur mon site</FONT>
</CENTER>
</BODY>
</HTML>
Voila une balise qui semble bien compliquée ! Regardons-la de plus près : à l'intérieur de la balise <FONT>, on trouve FACE="Comic sans MS" SIZE="+4". FACE et SIZE s'appellent des attributs. Ils servent simplement à indiquer au navigateur dans quels caractères (FACE) et dans quelle taille (SIZE) il doit afficher le texte entre les balises <FONT> et </FONT>. La plupart des balises ont ainsi une liste d'attributs pour préciser l'effet à obtenir.
Ajoutons maintenant quelques lignes de texte sous notre titre :
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
<FONT FACE="Comic sans MS" SIZE="+4">Bienvenue sur mon site</FONT>
</CENTER>
Ce site présente les résultats des recherches que j'ai commencées il y a dix ans pour retrouver mes ancêtres et mes cousins éloignés.
Si j'ai décidé aujourd'hui de les publier sur Internet, c'est parce que j'ai envie de partager tout cela avec vous, de vous faire profiter de tout ce que j'ai déjà trouvé et parce que je compte bien que vous allez pouvoir vous aussi m'aider à retrouver quelques chaînons manquants.
</BODY>
</HTML>
Deux petits paragraphes, dont nous allons voir l'effet dans le navigateur, comme précédemment... Or que constatons-nous ? Tout d'abord le texte n'est plus dans la même police que le titre et il est revenu à l'alignement à gauche. C'est normal puisque nous avons fermé les balises FONT et CENTER du titre : le navigateur a alors repris la police de caractères et la taille de lettres qui sont définis dans ses préférences. C'est ce qui se passera chez vos visiteurs à chaque fois que ne préciserez pas autre chose avec les balises appropriées et leurs attributs.
Mais surtout, nous avions tapé deux paragraphes en sautant une ligne entre les deux : or, tout le texte est affiché à la suite, sans tenir compte de nos sauts de ligne. En effet, le navigateur ignore les retours à la ligne placés dans le code HTML. Cela permet de sauter des lignes dans le fichier source pour le rendre plus lisible. Et pour que le texte aille effectivement à la ligne à l'affichage, il faut utiliser une balise ! Il s'agit soit de la balise <BR> qui donne un simple retour à la ligne, soit de la balise <P> qui saute en plus une ligne. Voici donc ce qu'il convient de faire pour obtenir deux paragraphes séparés par une ligne :
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
<FONT FACE="Comic sans MS" SIZE="+4">Bienvenue sur mon site</FONT>
</CENTER>
Ce site présente les résultats des recherches que j'ai commencées il y a dix ans pour retrouver mes ancêtres et mes cousins éloignés.
<P>Si j'ai décidé aujourd'hui de les publier sur Internet, c'est parce que j'ai envie de partager tout cela avec vous, de vous faire profiter de tout ce que j'ai déjà trouvé et parce que je compte bien que vous allez pouvoir vous aussi m'aider à retrouver quelques chaînons manquants.
</BODY>
</HTML>
Le "langage" HTML, c'est quelques dizaines de balises comme celles que l'on vient de voir, qui servent à mettre le texte en forme, à insérer des images ou des sons, à donner de la couleur aux pages, à créer des colonnes ou des tableaux, etc. C'est en les combinant habilement que l'on obtient de belles pages. Il sortirait du cadre de cette introduction de les passer toutes en revue. Le but était seulement de vous faire toucher du doigt la façon dont les sites étaient faits et de vous permettre de faire facilement vos premiers pas.
Faut-il apprendre le HTML ?
Oui et non... Tout cela peut vous sembler bien rébarbatif et difficile à apprendre. Alors voici une bonne nouvelle : il existe des logiciels de création de sites avec lesquels vous créerez de très belles pages sans jamais apercevoir l'ombre d'une balise HTML !
Ces logiciels sont comparables à des traitements de texte ou mieux encore à des logiciels de mise en page utilisés pour créer les journaux et magazines imprimés. Grâce à des menus très complets, vous définissez des zones dans la page où seront placés textes et images, vous les y collez d'un simple geste à la souris... Vous voyez aussitÙt le résultat et quand il vous plait, le logiciel traduit automatiquement ce que vous avez fait en code HTML. Vous n'avez plus qu'à télécharger le tout chez votre hébergeur.
Il en existe une gamme assez variée, des gratuits et des très chers, des bons et de moins bons... vous trouverez sur ce site une rubrique qui leur est consacrée.
Alors à quoi bon passer des heures à transpirer pour apprendre le HTML ? C'est que toute médaille a son revers : comme souvent dans des systèmes automatiques, la "traduction" en HTML n'est pas de très bonne qualité. Les pages obtenues sont quelque fois lourdes à cause de répétitions inutiles, les résultats ne sont pas toujours les mêmes d'une navigateur à l'autre... Il est alors bon de connaÓtre assez de HTML pour regarder le code généré et l'améliorer. C'est souvent ce qui fait la différence en un résultat correct et un résultat excellent... Alors un petit efort, et vous en serez récompensé, d'autant qu'avec quelques heures de pratique vous vous rendrez vite compte que le HTML n'est pas si rébarbatif ni difficile, et que Áa peut même devenir amusant !