Leçon 1 : ma première page web

Introduction

Objectif : Créer une page du genre de celle-ci.

La mise en page de ce premier "cours" va te sembler très sommaire par rapport à ce que tu as peut-être l'habitude de voir au cours de tes surfs sur le net : c'est normal, je n'utilise ici que les balises de la leçon. Il en sera de même pour les autres cours, leur mise en page évoluera au fil de ta progression, de façon à ce que tu puisses avoir un exemple concret d'application de tes nouvelles connaissances.
Je vais logiquement supposer que tu as lu la leçon 00 (B.A. BA) et que les opérations suivantes ne te sont pas inconnues (au cas où elles le seraient, tu devines où aller piocher le "comment faire" :)....). Tu sais donc :

1) ... te servir du Bloc-notes (ou de son équivalent Mac) pour créer un fichier HTML.
2) ... utiliser ton navigateur (Internet Explorer mais il en existe d'autres comme par exemple Netscape Navigator pour ne citer que le plus connu) pour afficher la page que tu viens de créer ou de modifier.
3) ... visualiser le code source d'une page HTML affichée dans ton navigateur.(J'insiste : c'est très utile... cliquer avec le bouton droit de la souris sur un endroit de la page où il n'y a que du texte et de choisir "Afficher la source".)
4) ... envoyer une page web par e-mail.

Sans plus tarder, entrons dans le vif du sujet !

Structure de la page

Qu'est-ce qu'une page web ?

Il s'agit en fait d'une page de texte "normale" à laquelle sont ajoutées des balises - encore appelées tags - qui sont autant d'indications pour le navigateur de la mise en forme à appliquer au texte. Plus simplement, ces balises indiquent au navigateur quelle apparence doit prendre le texte sur l'écran de l'internaute. L'ensemble du texte et des balises constitue ce que l'on appelle le code source ou la source de la page.

Une balise s'écrit de la façon suivante: <BALISE>
Elle est toujours accompagnée de sa contre-balise qui s'écrit </BALISE>
La contre-balise indique au navigateur qu'il doit cesser d'appliquer la balise.

Je conseille vivement de faire suivre la frappe d'une balise de celle de la contre-balise correspondante et de taper le texte entre les deux pour éviter les oublis.

Une page vide

Le Hyper Text Markup Language impose une structure type aux pages web. Celles-ci sont composées:
- d'un entête (ou tête) qui informe le navigateur et les moteurs de recherche, délimité par <HEAD> et </HEAD>
- d'un corps qui grosso modo correspond à ce qui va s'afficher à l'écran et qui est délimité par <BODY> et </BODY>.

Ainsi, une page web type et vide de tout texte se présentera de la façon suivante:

<HTML>
  <HEAD>
  </HEAD>

  <BODY>
  </BODY>
</HTML>

Assez de bla bla...

Bonjour à tous !

Muni des informations qui précèdent, imaginons que tu souhaites maintenant créer ta première page web (ENFIN !) qui affiche "Bonjour à tous !".
Son code source serait :

<HTML>
  <HEAD>
  </HEAD>

  <BODY>
Bonjour à tous !
  </BODY>
</HTML>

Pour créer cette page, il te suffit de taper ce code source dans un nouveau document du bloc-notes et de le sauvegarder (bonjour.html par exemple) attention au .html !!!, avant de visualiser la page avec le navigateur (en cliquant sur le fichier).
Si rien ne s'affiche dans le navigateur, tu as certainement oublié un crochet, ou un mot, ou le ".html" alors.... recommence !

Jouons avec le texte (introduction)

En affichant le code source de cette page, tu auras probablement remarqué un certain nombre de balises qui permettent d'en mettre en forme le texte.
Ci-dessous la liste de ces balises et de leurs fonctions:

1) <P> et </P> : c'est la balise de paragraphe, qui comme son nom l'indique définit un paragraphe. Un saut à la ligne et une ligne vierge sont insérés à la fin du paragraphe.
Un examen attentif du code source montre que cette balise est employée avec un attribut et quatre valeurs de cet attribut. Un attribut est une option possible pour une balise et cette option peut prendre plusieurs valeurs.

Il peut aussi y avoir plusieurs attributs pour une seule balise, mais nous verrons ceci au fur et à mesure !!!
Pour ce qui est de la balise <P>, l'attribut utilisé pour cette page est ALIGN qui permet de définir l'alignement choisi pour le texte: à gauche, à droite, centré ou justifié (non reconnu par tous les navigateurs), comme dans ton traitement de texte préféré.
Recherche tous les exemples d'utilisation de ces valeurs dans le code source et note bien la syntaxe employée:
<P ALIGN="Valeur">.
Regarde ce qu'il se passe quand on n'utilise pas d'attribut.

2) <Hx> (avec x=1 à 6) : Cette balise permet d'afficher des titres d'importance variant selon six niveaux, de 1 (le plus fort) à 6 (le plus faible donc), en insérant un saut à la ligne à sa suite. On l'utilise pour afficher les titres principaux, secondaires, les sous-titres etc. d'un texte.
Recherche tous les exemples d'utilisation de ces titres dans le code source.

3) <BIG> et </BIG> : Augmente la taille du texte, que ce soit du texte simple ou un titre (dans ce cas il n'y a pas de retour à la ligne).

4) <CENTER> et </CENTER> : Centre le texte dans la page.

5) <BR> : Insère un saut de ligne. Note qu'il n'y a pas de contre-balise.

6) <HR> : Crée un trait horizontal de séparation aussi appelé filet. Là aussi pas de contre-balise.

N.B. : Tu trouveras dans le code source de cette page un certain nombre de caractères dit spéciaux:
&lt;   crochet gauche <
&gt;   crochet droit >
&nbsp;   espace insécable (tu te rendras compte petit à petit que les espaces ne sont pas toujours reconnus par le navigateur).

Cherche les autres balises de mise en forme du texte dont je n'ai pas parlé... et vois à quoi elles servent. Il y en a 3.
Il y aussi une autre balise que je n'ai pas citée, trouve-là et essaye de voir à quoi elle sert.

Phoebe 08/02/2001