PatrickGross.org - Cours HTML 2

Home Back Google Microsoft		Ufologie Ufology

Contact Documentation Cours Favoris Utilitaires Musique Divers

patrickgross.org

Cours HTML

Précédent Suivant

2.1. Récapitulatif.

Vous savez maintenant:

Ce qu'est HTML, à quoi il sert.
Qu'avec HTML, on utilise des balises pour décrire les éléments de la page web que l'on construit.
Que chaque balise a un nom et un usage.
Qu'une balise s'ouvre en mettant son nom entre < et >, et qu'elle se ferme en remettant ce même nom entre </ et >.
Que la balise <p> veut dire paragraphe, et la balise <h1> veut dire grand titre.

2.2. La structure d'une page web.

On pourrait croire que mon exemple pour expliquer les balises était déjà une page web en bonne et due forme, rappelez-vous:

<h1>Bienvenue sur mon site web</h1> <p>Chers amis, ça y est, je me lance. Voilà le premier paragraphe de mon premier site Web. Je débute, je ne sais pas si je vais y arriver, je ne sais pas trop quoi raconter mais enfin, c'est en forgeant que l'on devient forgeron, n'est-ce pas?</p>

En fait, s'il n'y avait que cela dans ma page, ce ne serait pas correct du tout - même si cela avait eu l'air de fonctionner.

Il y a des balises qu'il faut toujours avoir dans une page Web.

Elle doit toujours commencer par une balise <html>, qui permet au navigateur de savoir que le document est un document HTML, et pas autre chose - car il n'y a pas que HTML... Et bien entendu, elle doit se terminer par la fermeture de la balise html:

<html> <h1>Bienvenue sur mon site web</h1> <p>Cher amis, ça y est, je me lance. Voilà le premier paragraphe de mon premier site Web. Je débute, je ne sais pas si je vais y arriver, je ne sais pas trop quoi raconter mais enfin, c'est en forgeant que l'on devient forgeron, n'est-ce pas?</p> </html>

Ce n'est pas tout. La balise <html> montre maintenant au navigateur qu'il a affaire à une page HTML, mais il faut aussi mettre le contenu à afficher entre des balises <body> et </body>:

<html> <body> <h1>Bienvenue sur mon site web</h1> <p>Cher amis, ça y est, je me lance. Voilà le premier paragraphe de mon premier site Web. Je débute, je ne sais pas si je vais y arriver, je ne sais pas trop quoi raconter mais enfin, c'est en forgeant que l'on devient forgeron, n'est-ce pas?</p> </body> </html>

La raison en est que nous pourrons aussi inscrire dans la page des choses qui ne seront pas affichées, comme par exemple, le nom de l'auteur. Ces choses-là ne seront pas entre <body> et </body>, mais entre <head> et </head>. Nous en reparlerons.

En attendant, voici notre première page web mieux formée, avec ses balises <html> et <body> et <head>:

<html> <head> </head> <body> <h1>Bienvenue sur mon site web</h1> <p>Cher amis, ça y est, je me lance. Voilà le premier paragraphe de mon premier site Web. Je débute, je ne sais pas si je vais y arriver, je ne sais pas trop quoi raconter mais enfin, c'est en forgeant que l'on devient forgeron, n'est-ce pas?</p> </body> </html>

Prenez le temps de regarder l'exemple ci-dessus. Vous comprenez maintenant plus facilement les éléments de structure html et body:

Tout ce qui est entre <html> et </html> est la page web.
Rien de ce qui est entre <head> et </head> ne sera affiché dans la page.
Tout ce qui est entre <body> et </body> est la partie de la page web qui sera affichée dans la fenêtre du navigateur.
Tout ce qui est entre <h1> et </h1> est sera affiché comme un grand titre.
Tout ce qui est entre <p> et </p> est sera affiché comme un paragraphe de texte normal.

Cette structure peut apparaître bien plus clairement si la page est indentée, c'est-à-dire, si on décale les éléments vers la droite, de plus en plus vers la droite selon leur niveau hiérarchique, comme je le fais ici:

Pour "indenter" ainsi, on pourrait mettre des espaces, mais la bonne habitude est d'utiliser la touche de tabulation du clavier. Comprenez bien que de décaler ainsi des éléments vers la droite n'a aucun effet sur l'aspect de votre page lorsqu'un visiteur l'affiche.

La touche de tabulation.

Maintenant, avec l'indentation, et en aérant un peu avec des lignes vides, on voit bien que <html> et </html> est la balise "première". On voit bien qu'elle "contient" une partie "body" qui commence après <body> et se termine à </body>. On voit bien que mon grand titre et mon paragraphe font partie du "body", c'est à dire du "corps" de ma page html.

Bien entendu, si vous créez votre page sans indenter, sans laisser d'espace avec des lignes libres, voir en mettant certains balises sur la même ligne, le navigateur affichera le même résultat.

Mais vous aurez peut-être quelque difficultés à comprendre la structure de votre page si vous faites ce genre de choses:

<html><head> </head><body><h1> Bienvenue sur mon site web</h1> <p>Cher amis, ça y est, je me lance. Voilà le premier paragraphe de mon premier site Web. Je débute, je ne sais pas si je vais y arriver, je ne sais pas trop quoi raconter mais enfin, c'est en forgeant que l'on devient forgeron, n'est-ce pas? </p></body></html>

Voilà qui est vraiment peu lisible! Les programmeurs appellent ce genre de chose du "code spaghettis". On n'y voit rien, on n'y comprend rien! Dans mes exemples, je vais toujours indenter et aérer. Je suis comme ça, moi.

Je veux insister:

Les balises <html>, <head>, et <body> sont obligatoires.

Leur fermeture est tout aussi obligatoire.

Leur agencement doit être ainsi, dans cet ordre:

On "ouvre" <html>, dans lequel on ouvre <head>, que l'on ferme par </head>, puis on ouvre <body>, que l'on ferme par </body>, et enfin, on ferme </html>.

Ces balises "de structure" ne sont pas suffisantes. Il y a encore d'autres choses obligatoires, nous en parlerons en temps et heure. Mais si vous avez maintenant compris que votre page doit avoir cela, organisé ainsi, nous pourrons poursuivre.

2.3. Questions et réponses.

"Dans votre exemple, vous avez cette partie avec <head> et </head>, mais sans rien dedans. Alors cette partie ne sert à rien?"

Elle sert. Mais nous verrons plus tard ce que l'on peut y mettre. Pour le moment, il faut juste retenir que ce sont seulement les éléments entre <body> et </body> qui seront affichés dans la page.
"Quand vous "indentez", par exemple avec le grand titre dans les balises h1, cela va mettre ce grand titre plus à droite qu'avant, non?"

Non. Le navigateur se fiche complètement de l'indentation. Il voit seulement qu'il y a du texte entre les balises <h1> et </h1>, et il "traite" alors ce texte comme étant un grand titre. Rien ne lui dit de le mettre plus à droite qu'avant. Il le met à gauche.

Pour "mettre des choses plus à droite", comme pour centrer, ou pour d'autres positionnements, on procédera bien différemment. Mais il n'est pas encore temps de parler de positionnement.
"Comme un site la plupart du temps plusieurs pages, des tas de pages, ne serait-il pas pratique de se fabriquer une "page modèle" ou tout ces html head et autres body seraient construits "à l'avance", plutôt que de refaire chaque fois la même chose en se cassant la tête à chaque fois?

Evidemment. Bravo. Je donnerais un tel modèle. Mais pas maintenant, il y a encore d'autre choses à aborder, qui feront partie de ce "modèle de page".

Maintenant, nous allons apprendre à bien organiser les balises, à les imbriquer correctement. Nous en profiterons pour apprendre quelques autres balises. On ne va pas se contenter éternellement de <h1> et <p>!

Haut Suivant

patrickgross.org

Jeudi, 6 mars 2025