C'est votre première leçon d'écriture d'une page en html.
Cinq leçons seulement vous seront nécessaires pour maîtriser l'essentiel de l'écriture en format html.

L'écriture en html est en fait très simple : Tout ce que vous voyez est écrit, non pas sur cette page, mais sur une page " Source " qui s'ouvre en cliquant sur :
" Affichage " puis sur " Source ".

Ainsi la page web ne peut être modifiée qu'en travaillant dans sa source...
Et c'est cette source qu'il faudra enregistrer ( et non pas la page web ! ) avec l'extension " .html " .

* * * * * * * * * * * * * *
Pour formater un texte, c'est à dire pour changer la forme des signes utilisés, il faut insérer des commandes ( appelées des tags ) aux bons endroits.
La mise en page de la source n'a aucune importance. Ce sont les tags qui commandent cette mise en page directement sur la page web.

Observez maintenant les premiers tags que j'ai employés ( BR , I , U , B et CENTER ) et essayez de comprendre leur signification...
( Les tags s'écrivent en majuscules ou minuscule, cela n'a pas d'importance. )

* * * * * * * * * * * * * *

Vous voici prêt(e) pour votre première création !

Ouvrez la source, cliquez "Fichier" puis "Nouveau" et laissez-vous inspirer...
Quand vous aurez écrit quelques mots, faites "Fichier" et "Enregistrez sous" et enregistrez votre travail dans un dossier en lui donnant une extension .html.
Fermez alors votre source ( et oui, elle ne sert plus à rien ! )
Dans l'"Explorateur" ( ou "Navigateur" ) ouvrez la page html que vous venez d'enregistrer.
Vous ferez alors "Affichage" , "Source" et vous n'aurez ensuite qu'à naviguer entre votre page et sa source en n'oubliant pas d'enregistrer votre travail au fur et à mesure de son avancement, de réduire votre source que vous venez d'enregistrer et d'actualiser ( on dit aussi "rafraîchir" ) votre page ( touche F5 du clavier de votre ordinateur ) .

Ces 3 opérations ( Enregister, Réduire, Actualiser ) sont des opérations extrêmement courantes quand on écrit en html et que l'on répète à chaque fois que l'on vient de changer quelque chose sur sa page.

* * * * * * * * * * * * * *
Dites-vous bien que si vous avez compris ce que je viens d'expliquer, cela veut dire deux choses :
* vous n'êtes pas si bête et vous allez être capable de tout comprendre aussi facilement,
* je ne suis moi-même pas si nul puisque j'ai expliqué tout cela... et que vous l'avez compris !

;-)

Encore un mot avant d'aller plus loin :
Jusque là, je n'ai pratiquement pas organisé de mise en page de la source. C'est vrai que cela n'a pas d'incidence sur la page web mais, dans un souci de clarté, j'ai pris l'habitude d'organiser ma source, ce que je vais maintenant faire.

* * * * * * * * * * * * * *

Suite de la première leçon...

Ci-dessous, trois images, l'une à gauche, la seconde centrée et la dernière à droite.
Ces images se trouvent dans un sous-dossier que j'ai appelé " dossier1 ", qui est lui-même dans un dossier "cours"... sur mon disque dur !
Le chemin de l'image1 sera donc : "cours/dossier1/image1.gif".

CAPTURER CES IMAGES
Mais vous êtes sur Internet et donc, vous n'avez pas directement accès à cette image enregistrée dans "dossier1".
Vous allez alors avoir besoin de capturer ces images que vous allez enregistrer dans un dossier. Ce dossier, vous allez le créer au même endroit où vous avez enregistré la première page html que vous venez d'écrire.
Vous pouvez donner le nom que vous voudrez à ce dossier, pourvu que ce nom ne comporte pas de majuscules et qu'il compte un maximum de 8 lettres ( ou chiffres ).

COMMENT FAIRE ?
Il suffit de cliquer bouton droit sur l'image, de cliquer bouton gauche sur "Enregistrer l'image sous...", de choisir le bon endroit sur votre disque dur ( dans le dossier que vous venez de créer ), et de cliquer OK.

Quand vous utiliserez une des images que vous aurez capturée ( on peut en capturer des tas sur Internet ! ), dans la source de la page que vous écrirez, n'oubliez pas de remplacer "dossier" par le nom du dossier dans lequel se trouve votre image !
A la place de :
IMG SRC="cours/dossier1/image2.gif"
vous écrirez, par exemple :
IMG SRC="( le nom de votre dossier )/image2.gif"

* * * * * * * * * *
Repérez, dans la source de cette page, les tags "P ALIGN="right" " ( c'est l'alignement de l'image à droite ) et "IMG SRC="......" ". Ce qui est entre guillemets représente le chemin du fichier image sur le serveur.

Vous constatez deux choses :
* l'importance d'écrire un chemin correct afin que la source trouve la bonne image à afficher dans la page,
* la nécessité de noter l'extension du fichier ( .gif ou .jpg )
* * * * * * * * * *
Repérez, dans la source de cette page, le tag "&dièze160;".
Il correspond à un petit retrait. Pour obtenir un retrait plus important, j'ai été obligé de le répéter ( mais il existe une autre solution que nous verrons plus tard ).

Repérez aussi le tag "!".
Il correspond à un commentaire qui n'affectera pas la page. Je peux y écrire ce que je veux : cela ne sert qu'à clarifier ma source...
* * * * * * * * * *
Notez que votre serveur ne prendra en compte ni les extensions en majuscules ( .GIF ou .JPG ), ni les lettres majuscules.
Notez aussi qu'il est préférable de n'utiliser qu'un maximum de 8 lettres ( ou chiffres ) pour nommer vos fichiers.
Notez enfin que vos pages html seront placées dans un même dossier ( le dossier de votre site ) et que vos fichiers images et sons se trouveront dans des sous-dossiers de ce dossier principal. Ceci, dans un souci d'organisation, pour faciliter vos recherches ultérieures.

Dernière notion nouvelle, telle une cerise sur le gâteau :

Le

lien

hy

per

tex

te :

Ceci est un lien hypertexte vers la page suivante ( leçon 2 ) ...

Résumé de la première leçon :

Vous avez découvert le tag de retour à la ligne ( ou de saut de lignes ) BR
le retrait dièze160;
les tags de formatage I , U , B et H
les tags de mise en page CENTER , P ALIGN="right"
le tag d'insertion d'image IMG SRC="......"
le tag de lien hypertexte A HREF="......"
et, enfin, le tag de commentaire !...... .

Vous savez aussi qu'il faut systématiquement enregistrer chaque opération de la source,
réduire cette source pour revenir à la page web et
actualiser ( F5 ) votre page web pour apprécier le changement obtenu.

Et maintenant...

à votre clavier !

Pour la leçon 2, vous aurez besoin d'avoir créé une page personnelle comprenant du texte, évidemment, mais aussi deux ou trois images et un lien hypertexte vers une deuxième page.
Sur cette deuxième page, vous placerez un lien hypertexte vers votre première page.

Vous avez donc 2 pages html à écrire d'ici notre prochaine rencontre.
N'hésitez pas à me contacter si vous rencontrez une difficulté.