Avec ce que vous avez appris dans les lecons precedentes, vous etes maintenant a quelques minutes de realiser votre premier site Web.
Dans la lecon 1, nous avons vu ce qui etait necessaire pour faire un site Web : un navigateur et Bloc-notes (ou un editeur de texte similaire). Puisque vous lisez ces lignes, votre navigateur est deja ouvert. Vous devez seulement ouvrir une autre fenetre de navigateur (ouvrez le navigateur encore une fois) afin que vous puissiez lire ce tutoriel et en meme temps voir votre votre nouveau site Web.
Lancez egalement Bloc-notes (dans Accessoires sous Programmes dans le menu Start) :
Nous sommes maintenant prets !
Commencons par quelque chose de simple. Que dites-vous d'une page ou s'inscrirait : Hourra ! Mon premier site Web. Lisez la suite et vous verrez combien c'est facile.
HTML est simple et logique. Le navigateur lit le code HTML comme vous, de haut en bas et de gauche a droite. Un document HTML commence donc par ce qui vient en premier dans la page et finit par ce qui vient en dernier.
La premiere chose a faire est de dire au navigateur que vous lui parlerez dans le langage HTML. On le fait avec la balise
<html> (ce n'est pas surprenant ici). Donc, avant de faire quoi que ce soit d'autre, tapez <html>
a la premiere ligne de votre document dans Bloc-notes .
Comme vous l'avez peut-etre retenu des lecons precedentes, <html> est une balise ouvrante qui doit etre close
par une balise fermante a la fin de la saisie du code HTML. Pour vous assurer de ne pas oublier la balise fermante du code HTML,
tapez donc maintenant la balise fermante </html> quelques lignes en-dessous, vous ecrirez le reste du document
entre <html> and </html>.
Le document a ensuite besoin d'une en-tete (N.d.T. head), laquelle fournit des informations a propos du document,
et d'un corps (N.d.T. body), lequel constitue le contenu du document. Puisque HTML n'est rien sans logique,
l'en-tete (<head> et </head>) se trouve avant le corps (<body> et </body>).
Votre document devrait ressembler a ceci :
<html>
<head>
</head>
<body>
</body>
</html>
Notez comment nous avons structure les balises avec des nouvelles lignes (avec la touche Entree) ainsi que des indentations (avec la touche Tabulation). En principe, la facon dont on structure le document HTML n'a aucune importance. Mais pour vous aider (et ceux qui liront votre code) a garder une vue d'ensemble, il est fortement recommande de structurer son code HTML proprement avec des sauts de ligne et des indentations, comme dans l'exemple ci-dessus.
Si votre document est comme l'exemple precedent, vous avez fait votre premier site Web, un site particulierement terne et probablement pas celui dont vous avez reve en entament ce tutoriel mais un site Web quand meme. Ce que vous avez fait constituera la charpente de tous vos documents HTML futurs.
Comme vu auparavant, votre document HTML se compose de deux parties : une en-tete et un corps. Dans la section d'en-tete, vous inscrivez des informations concernant la page, tandis que le corps contient les informations qui constituent la page.
Par exmple, si vous souhaitez donner un titre a la page, qui apparaitra dans la barre superieure du navigateur, il faudra le faire
dans la section head . L'element servant pour un titre est title. C'est-a-dire que vous devez ecrire le titre de
la page entre la balise ouvrante <title> et la balise fermante </title> :
<title>Mon premier site Web</title>
Remarquez que ce titre n'apparaitra pas dans la page meme. Tout ce que vous voulez faire apparaitre dans la page est du contenu, et doit donc etre ajoute entre les balises body .
Comme promis, nous voulons que la page affiche Hourra ! Mon premier site Web . C'est le texte que nous voulons communiquer et il appartient ainsi a la section body . Donc dans la section de corps, tapez ce qui suit :
<p>Hourra ! Mon premier site Web.</p>
Le p dans <p> est l'abreviation de paragraphe , et c'est exactement ca, un paragraphe de texte.
Votre document HTML devrait ressembler a ca :
<html>
<head>
<title>Mon premier site Web </title>
</head>
<body>
<p>Hourra ! Mon premier site Web.</p>
</body>
</html>
ca y est ! Vous avez maintenant fabrique votre premier veritable site Web !
Tout ce que vous avez a faire ensuite est de l'enregistrer sur votre disque dur et de l'ouvrir dans votre navigateur :
Maintenant allez au navigateur :
Il devrait alors s'afficher Hourra ! Mon premier site Web. dans le navigateur. Felicitations !
Si vous tenez absolument a ce que le monde entier voit votre chef d'ouvre tout de suite, vous pouvez sauter a la lecon 14 et apprendre a placer la page sur Internet. Sinon soyez patient et continuez a lire. La fete a juste commence.