Guide d'initiation au HTML

L'équipe Info-conseils Forums de discussion

par Chrystian Guy

Ma première page web!
Parce qu'il faut bien commencer quelque part...

Chers amis lecteurs, je me suis ennuyé de vous! Mais je ne vous ai pas oublié, que non! J'ai préparé pour vous une série d'articles qui feront de vous, je l'espère, de véritables petits htmleurs (le néologisme est boîteux, je l'avoue). Et comme le dit la chanson : après la tempête, il faut reconstruire. Oublions donc ce verglas et construisons une page web!

Attention, je ne vous la ferai pas facile! Il ne s'agit pas ici d'un cours de design de page web, mais bien d'un cours de HTML, le langage derrière les pages web. Alors préparez-vous à faire ce que vous n'avez peut-être jamais fait auparavant : écrire une ligne de code informatique! Aie! Vous verrez, c'est plus facile que vous ne le croyez…

HTML quoi?

Ok les amis, avant de poursuivre, il importe de savoir de quoi on parle, non? Le HTML, de son nom de baptême HyperText Markup Language est le langage qui sert à programmer les pages web que l'on retrouve dans Internet. Il s'agit d'un langage interprété (non-compilé), c'est à dire qu'il est lu en continu par un autre logiciel, votre navigateur en l'occurrence. Il fonctionne par ancrage; par exemple, pour mettre un mot en italique, il suffit d'y ajouter les ancres nécessaires : le mot que vous voulez mettre en italique

Note : Avant de me faire crucifier par mes pairs, il importe de dire que le HTML n'est pas vraiment un langage de programmation, mais plutôt une définition de format de document. Mais, bon, entre nous, on se comprend…

Les pré-requis

De quoi aurez-vous besoin pour réaliser des pages web? Heureusement, vous allez tout trouver dans Megagiciel! Voici une petite liste :

1- un navigateur (que vous avez déjà si vous lisez ceci)
2- un éditeur de texte OU un éditeur HTML
3- un logiciel de FTP pour transférer vos pages
4- un logiciel de retouche d'image

Ce que le Pro que je suis (hmm!) utilise :

1- Netscape 4.7 (PC, Mac) ou Internet Explorer 5.0 (PC) ou 4.51 (Mac)
2- Web Expert 3.02 (en français, oui madame!) ou BBEdit (Mac)
3- WS-FTP LE ou Fetch (Mac)
4- Adobe PhotoShop (très cher, PC ou Mac), alors je suggère aussi Paint Shop Pro (PC) ou CorelDraw 8 LE (Mac)

L'avantage d'un éditeur HTML sur un simple éditeur de texte, c'est que le premier vous permet d'insérer les ancres HTML de façon simple, sans avoir à les taper vous même… vous verrez, vous apprécierez très vite! De plus, vous profiterez de plusieurs raccourcis-claviers ainsi que d'explications fort utiles grâce aux documents d'aide en ligne contenus dans la plupart des éditeurs HTML.

Ma première page web

Bon! On commence! Ouvrez votre éditeur ainsi que votre navigateur. Nous verrons les deux autres logiciels au cours des prochaines semaines.

Dans votre éditeur, ouvrez un nouveau document; si vous utilisez Web Expert, une fenêtre de dialogue vous demandera d'entrer certaines informations.

N'entrez rien et appuyez sur OK… avant d'utiliser les raccourcis, on va quand même apprendre les vrais principes, non? Tout de même!

Vous avez maintenant un page avec toutes sortes de codes… sélectionnez tout et effacez-moi ça! Allez! Ouste! On commence à zéro. Si vous utilisez un autre logiciel que Web Expert, il se peut que votre page soit déjà blanche.

Les ancres de base

Les ancres HTML sont toujours entre < >. La plupart fonctionne en paires, c'est à dire qu'il y a une ancre de début et une ancre de fin, comme dans notre exemple précédant, pour mettre une expression en italique, il faut commencer par un et finir par un . Ce sera le même principe pour toutes les ancres à paires. Il y a quelques ancres qui sont absoluement nécessaires pour une page HTML minimale, les voici :

D'abord, il faut dire qu'il s'agit d'un document HTML :

<HTML>

(il faudra " fermer " cette ancre par sa paire à la fin du document…)

Ensuite, on installe une entête de fichier, ceci sert à identifier certains paramètres, notament pour les robots et les moteurs de recherches. Voici le minimum requis, nous en verrons d'autres la prochaine fois :

<HEAD>
<TITLE>Ma première page web</TITLE>
</HEAD>

Ouf! Il y en a des trucs dans cette partie! C'est très simple : à la ligne 1 nous avons annoncé qu'il s'agit de la partie HEAD (entête) du document, à la ligne 2 nous avons spécifié le titre du document, c'est ce qui apparaîtra dans le haut de la fenêtre de votre navigateur et enfin, à la dernière ligne, nous avons " fermé " la section HEAD, comme nous l'avions fait pour l'ancre TITLE…

Maintenant, attaquons le corps du document, ou si vous préférez, ce que les gens vont voir à leur écran!

Spécifions le début de la section du corps de document :

<BODY>

(espace pour écrire ce que vous voulez!)

</BODY>

et profitons-en pour fermer l'ancre HTML : </HTML>

Récapitulons

Voici l'ensemble du code jusqu'à maintenant :

<HTML>

<HEAD>
<TITLE>Ma première page web</TITLE>
</HEAD>

<BODY>

</BODY>

</HTML>

Pas mal! On avance… mais là, le fun commence!

Écrivez ceci entre les ancres <BODY> et </BODY> :

Voici ma première page web! Je suis une grande personne maintenant…

Sauvegardez votre page dans le répertoire de votre choix avec la fonction Fichier, Sauvegarder… N'oubliez pas de nommer votre page le-nom-que-vous-voulez.html, l'extension .html devrait se mettre toute seule, mais je ne prends pas de chance avec l'informatique!

Maintenant, passez à votre navigateur et ouvrez la page que vous venez de sauvegarder : File, Open Page… et retrouvez la page qui est dans le répertoire que vous avez choisi tout à l'heure.

Tadam!

L'émotion vous monte sûrement aux yeux, je comprends… vous pouvez prendre une pause de quelques minutes pour admirer votre chef-d'œuvre.

Vous pouvez maintenant vous amuser en écrivant ce que vous voulez, mais pour avoir véritablement du plaisir, il faut connaître un minimum d'ancres, en voici quelques-unes : Les majuscules/minuscules sont sans importance en HTML…

Italique : 
Gras (bold) : 
Souligné (underline) : 
Centré : <CENTER> </CENTER>
Clignotant : <BLINK> </BLINK>
Saut de ligne (break) : (c'est tout, c'est une ancre solitaire)

Le saut de ligne est très important, car même si vous faites des sauts de lignes dans votre texte en appuyant sur la touche RETOUR (ENTER), ça ne changera rien en HTML, par exemple :

<BODY>
A noir, E blanc, 1 rouge, U vert, 0 bleu: voyelles,
Je dirai quelque jour vos naissances latentes
</BODY>

Donnera :

A noir, E blanc, 1 rouge, U vert, 0 bleu: voyelles,Je dirai quelque jour vos naissances latentes

Mais si vous insérez les ancres :

<BODY>
A noir, E blanc, 1 rouge, U vert, 0 bleu: voyelles,<BR>
Je dirai quelque jour vos naissances latentes
</BODY>

Voici le résultat :

A noir, E blanc, 1 rouge, U vert, 0 bleu: voyelles,
Je dirai quelque jour vos naissances latentes

Magique!

Cela suffit pour une première leçon, la semaine prochaine, nous allons commencer à mettre un peu de couleurs dans tout ça! Nous allons aussi faire un peu de mise en page. En attendant, je vous invite à composer une petite page avec du texte de votre cru; mettez les sauts de lignes et insérez quelques caractères en gras, italiques et soulignés. Nous allons jazzer ça un peu ensemble… À bientôt!

Infos | Ajouter un site | Pour nous écrire