Structure d'une page html

Maintenant nous allons commencer à écrire pour de bon. Comme je vous l'ai déjà expliqué, ouvrez bloc-notes. Vous allez à partir de ce moment précis (et ce jusqu'à la fin) "jongler" entre les 2 fenêtres : celle de bloc-notes et celle de votre browser dans laquelle vous lisez ceci.

Vous écrirez la page en langage html sous bloc-notes, puis vous regarderez le résultat avez votre browser pour vérifier (après avoir enregistré, bien sûr).

En-tête et corps

Notre tout premier tag sera le tag <html>. Comme la plupart, il s'ouvre et se ferme. Il dit où commence la page html et où elle se termine. Donc vous n'écrirez rien en dehors de ce tag html.
Commencez donc à écrire :

<html>

</html>

Ca va jusque là ?
Dans une page html, on distingue 2 parties différentes : l'en-tête et le corps que l'on met dans cet ordre respectif. Je ne détaillerai pas ici ce qu'il contiennent, mais je vous en donnerai une idée. Commencez d'abord par écrire ces 2 tags qui délimitent ces parties.

Le tag de l'en-tête est <head>. Celui du corps est <body>. Essayez d'imaginer dans votre tête et sans continuer à lire, à quoi va ressembler votre page html. Voilà la réponse :

<html>

<head>
</head>

<body>
</body>

</html>

Le tag head sera minuscule par rapport au tag body à la fin. Mais head contient des informations importantes sur la page qui s'adressent plus particulièrement aux moteurs de recherche. Le prochain chapitre lui est consacré.

Quant à body, il risque d'être gigantesque ! C'est lui qui contiendra l'énorme majorité des tags qui existent. C'est entre les 2 body que vous écrirez du texte qui sera affiché, que vous mettrez en gras, italique, rouge, barré... Vous mettrez aussi des tableaux, des images... Bref, tous les prochains chapitres sauf le 3° lui sont consacrés.
Je commencerai déjà ici à vous en parler...

Tout d'abord, enregistrez votre page. Comme c'est la structure de base de la page html, vous serez obligé d'écrire ça pour toutes les pages. La bonne idée serait de la conserver comme modèle. Effectuez les opérations suivantes :

Fichier
Enregistrer
Choisissez un répertoire
Type : "Tous"
Nom : "nom.html"
Enregistrer

Remplacez le "nom" par le nom de votre choix.
Vous pouvez essayer de regarder à quoi ressemble votre page dans le browser. A la ligne "Adresse", tapez le chemin d'accès complet de votre fichier. Par exemple :

c:\Mes documents\web\exemple.html

Et que voyez-vous ? Il y a deux possibilités, soit vous avez un navigateur ancien (pensez à télécharger le dernier) et la page est entièrement grise, soit il est récent et elle est blanche. Rien de plus.

Vos débuts avec <body>

Vous pouvez essayer maintenant de taper du texte entre les 2 body :

<html>

<head>
</head>

<body>
Bonjour, bienvenue sur la page personnelle de Jean Dupont,
qui a été créée il y a peu. Vous m'excuserez du manque
d'informations et de rubriques que je ne tarderai pas à
vous proposer... En attendant, vous trouverez quelques
adresses susceptibles de vous intéresser.
</body>

</html>

Et ce texte sera affiché ! Il est vrai qu'il faut un minimum d'efforts avant d'arriver à un résultat.
Oui, mais quel résultat ? Ce que vous venez de voir, c'est ce que vous devriez taper sous bloc-notes (n'hésitez pas à changer le texte pour en avoir un plus approprié à ce que vous souhaitez dire).

Je vous proposerai souvent d'essayer l'exemple que vous avez sous vos yeux. Vous pourrez comparer celui-ci avec le votre, pour vérifier et comparer s'il n'y a pas d'erreurs.
Dans ces cas-là, vous aurez en dessous de l'exemple un bouton "Essayer !". Je vous conseille d'imaginer dans votre tête ce que cela donnera, pour savoir si vous avez bien compris. Voici le premier bouton (qui s'applique au précédent exemple) :

Normalement, une nouvelle fenêtre s'est affichée, sans la plupart des menus. Vous pouvez l'agrandir si vous le voulez, mais ce n'est pas une obligation. Cela vous permet de différencier ces pages-ci de celles qui servent d'exemples.

Vous avez pu remarquer que le résultat est loin des pages web que vous visitez, mais patience ! Vous serez bientôt surpris de ce que vous aurez fait.
Le premier problème de présentation auquel nous allons remédier de suite, est cet effet de "gros pâté" sur cette page. Vous aurez eu beau faire des entrées, mais je vous ai déjà dit que cela ne donne rien.

Il existe deux tags qui vous permettent cela. Le premier donne un retour à la ligne, et le second la création d'un nouveau paragraphe. Il y a ici un mini-tableau qui les présente :

Tag	Introduit	Valeur
<br>	Retour à la ligne	1 entrée
<p>	Nouveau paragraphe	2 entrées

Mais c'est toujours comme les espaces, vous ne pouvez pas en faire deux. 2 tags <br> à la suite rendront l'effet d'un seul tag <br>.
Les deux tags <p> et <br> ne doivent pas être fermés.

Cela donnera quelque chose de bien plus clair par rapport à notre ancien exemple. Faites de même en parallèle avec votre page perso.

<html>

<head>
</head>

<body>
Bonjour, bienvenue sur la page personnelle de Jean Dupont,
qui a été créée il y a peu.<p>Vous m'excuserez du manque
d'informations et de rubriques que je ne tarderai pas à
vous proposer...<br>En attendant, vous trouverez quelques
adresses susceptibles de vous intéresser.
</body>

</html>

Notez que j'aurais pu faire une entrée avant chaque tag d'entrée, mais cela n'aurait changé en rien le résultat. C'aurait été pour que je me retrouve plus facilement dans ma page la prochaine fois que je serais venu l'éditer.

Vous pouvez dès maintenant créer une page html.

Commentaires

Les commentaires peuvent vous être utiles dans certains cas, mais comme ils ne sont pas très importants, je ne m'attarderai pas longtemps dessus.

Un commentaire se trouve dans un tag assez spécial, et le browser ne l'affiche pas. C'est du texte qui peut vous permettre de vous situer (sous bloc-notes) dans une grosse page web.

Le commentaire est le SEUL tag qui peut se trouver n'importe où, même dans head ou en-dehors.
Comment créer un commentaire ? Comme d'habitude, ouvrez le tag par un <. Tapez juste après un ! et un -. Tapez votre commentaire après. A la fin de celui-ci, refaites un - puis fermez le tag par un >. Ouf ! Voyons ce que cela donne :

<!-Rappel : petit problème ici->

En imaginant qu'hier j'ai eu un problème pour créer ma page web, ce commentaire est là pour me rappeler le lendemain d'essayer d'y remédier.

Le tag <head> est l'objet de notre prochain chapitre.