SOMMAIRE :
I) Introduction à l'HTML
A) Qu'est ce que c'est l'HTML ?
B) Créer une page HTML
1) Les outils du programmeur
2) Le code d'une page blanche
a) La balise <head>
b) La balise <body>
II) Mise en page
A) Les marges
B) Le fond de la page
C) Un titre pour la fenêtre
III) Mise en forme du texte (pas encore terminé)
A) La balise <font>
1) La couleur du texte
2) La taille du texte
3) La police du texte
4) Un fond coloré pour le texte
B) Balises de mise en forme
C) Les alignements
1) Avec <center>
2) Avec des paragraphes
IV) Insérer des images (pas encore terminé)
A) Images dans la page
B) Image en fond de page
V) Créer des liens hypertextes (pas encore terminé)
A) Un texte en lien
B) Une image en lien
VI) Les tableaux (pas encore terminé)
VII) Les frames (pas encore terminé)
VIII) Les formulaires (pas encore terminé)
Annexe 1 : Quelques balises supplémentaires (pas encore terminé)
Annexe 2 : Introduction au CSS (pas encore terminé)
I) Introduction à L'HTML
A) Qu'est ce que c'est L'HTML ?
Je vais tenter d'être assez bref pour éviter d'ennuyer tout le monde :
L'HTML (Hyper Text Markup Language) est le language qui permet l'édition des pages web. Toutes les pages web (même celle-ci) sont codées, à la base, en HTML. Ensuite, on peut rajouter des scripts, en Javascript ou en PHP par exemple, dans le code de la page pour l'améliorer. Mais, à la base, c'est de l'HTML. Pour ceux que la naissance de l'HTML intéresse, ce language a été inventé en 1993 par le chercheur Tim Berners-Lee. Voilà, après cette rapide présentation, nous pouvons commencer à coder !
B) Créer une page HTML
1) Les outils du programmeur
Pour faire de l'HTML, il n'y a pas besoin de logiciel spécifique car presque tout le monde a sur son PC le simple Bloc-Notes et un navigateur. A noter, en plus, que même sans connexion à Internet, on peut faire de l'HTML (j'en ai moi-même fait pendant 2 ans sans avoir de connexion). Par contre, il est nécessaire d'avoir au moins un navigateur (même s'il affiche "Page indisponible") pour voir la page web (avouez que coder sans regarder ce que çà donne, c'est vite fatiguant).
En résumé : ayez un Bloc-Notes et un navigateur web.
2) Le code d'une page blanche
Pour créer juste une page blanche, il y a déjà un peu de code à mettre (je mets le code en bleu mais normalement, dans le Bloc-Notes, il est en noir, simple question de repérage):
<html> On ouvre la balise <html>
<head> On ouvre la balise <head>
</head> On ferme la balise <head>
<body> On ouvre la balise <body>
</body> On ferme la balise <body>
</html> On ferme la balise <html>
Commençons par le début : vous avez naïvement recopié ce code dans le Bloc-Notes (ou pas si vous n'êtes pas naïf), puis vous avez sauvegardé et vous avez été voir votre fichier mais là, surprise ! C'est un document texte ! Mais alors, comment en faire une page HTML ? C'est assez simple en fait, mais il faut y penser : quand vous sauvegarder votre fichier (nommons le "essai"), il est, par défaut, sauvegardé comme "essai.txt". Il faut donc, quand on vous demande le nom du fichier, taper "essai.HTML" pour le forcer à s'enregistrer comme une page HTML. Une fois ce code recopié et le fichier enregistré correctement, vous remarquer que l'icône du fichier est similaire à celle de votre navigateur. Vous pouvez donc l'ouvrir et tomber sur la fameuse page blanche. Ouf !
Not e1 : les instructions entres crochets <> sont appelées des balises. Tout ce qui est en dehors des crochets (sauf dans les scripts) est affiché dans la page.
Note 2 : la balise <html> s'ouvre tout au début et se tout à la fin du code. C'est un peu comme une preuve que c'est bien une page en HTML.
Note 3 : toutes les balises ouvertes doivent, à un moment donné, être fermées. Pour ouvrir une balise, taper : <balise>. Pour fermer une balise, taper : </balise>.
a) La balise <head>
La balise <head> s'ouvre et se ferme avant la balise <body>. Elle contient les informations sur la page, les scripts, les scripts de style (CSS). En résumé, tout ce qui est dedans, n'est pas vu (sauf le titre de la fenêtre) par le visiteur. S'il y a des scripts, le visiteurs en voit les effets mais pas le code.
b) La balise <body>
La balise <body> s'ouvre et se ferme après la balise <head>. C'est là que l'on écrit le texte de la page, qu'on place les images, les liens, les appels des scripts ... En résumé, tout ce que le visiteur de la page voit quand il navigue dessus (à noter qu'il ne voit pas les balises utilisées mais les effets qu'elles produisent).
II) Mise en page
A) Les marges
Les marges sont en fait l'espace (pour la marge du haut par exemple) entre le bord de la page et le début du contenu (images, tableaux, frames, texte ...). On peut régler les marges du haut, de la gauche, de la droite, et du bas de la page. Elles sont toutes par défaut à 1. Pour les régler, c'est dans la balise <body> que cela se passe. Créer une page HTML blanche et rajouter ce code (en fait, compléter la balise <body>):
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="1">
Je suppose que ce n'est pas la peine de vous faire un dessin. Vous avez compris que l'on mettait toutes les marges (sauf celle du bas pour l'exemple) à 0. En fait, 0 supprime la marge. Il n'y a bien sûr pas de valeur maximale pour les marges si ce n'est la dimension de votre page. Vous notez que les mises en forme de marges sont des paramètres de la balise <body> : elles sont juste derrière "body" mais dans la balise quand même. En fait, vous l'avez sans doute compris mais l'HTML, c'est en Anglais ! Pour les francophones, voici un petit rappel : top=haut, left=gauche, right=droite, bottom=bas et margin=marge. Mais vous le saviez bien sûr !
B) Le fond de la page
La page HTML moyenne est dotée soit d'un fond coloré uni, soit d'une image de fond. Pour l'image de fond, j'en parle plus loin dans ce tutorial. Ici, nous allons nous intéresser au fond coloré. Tout d'abord, il faut lui choisir une couleur. Voici une table des couleurs comme on peut en trouver de nombreuses sur internet. Pour ce tutorial, je vous propose d'utiliser la couleur intitulée "goldenrod" (vous pouvez bien sûr en prendre une autre si celle-ci ne vous convient pas). Pour mettre cette couleur en fond, faîtes une page HTML blanche (je ne le dirais plus par la suite mais çà va de soi que vous devrez, pour voir les effets de chaque balise séparément, refaire une page blanche (vous pouvez vous contenter de recycler l'ancienne)) Ouvrez là (c'est juste pour vous montrer un truc après). Puis, dans le Bloc-Notes, toujours dans la balise <body>, tapez :
<body bgcolor="goldenrod">
Ici, "bgcolor" signifie "background color", "couleur de fond" en français. Je suppose que vous avez compris : on tape "bgcolor=" puis le nom de la couleur entre guillemets. Notez que les paramètres dans une balise sont séparés par un espace, veillez donc à ne pas en mettre autour du "=".
Mais en fait, vous avez vu le fond changer ? Non ? C'est parce qu'il faut actualiser la page (F5) pour provoquer la mise à jour (j'ai fait exprès de vous faire ouvrir la page avant juste pour vous monter çà !).
De plus, vous pouvez (heureusement) mettre plusieurs paramètres dans les balises (peu importe leur ordre). On pourra donc avoir pour la page :
<html>
<head>
</head>
<body bgcolor="goldenrod" topmargin="0" leftmargin="5">
</body>
</html>
Vous remarquerez qu'il n'y a que deux paramètres pour les marges. En effet, pour l'exemple, je veux les laisser à 1. C'est leur valeur pas défaut qu'elles prendront toutes seules si on ne les écrit pas. Mais au fait,
C) Un titre pour la fenêtre
Le titre de la fenêtre, c'est ce qui est affiché tout en haut de l'écran (si vous regardez maintenant, çà doit être quelque chose comme : "C:\Mes.Documents\essai.HTML" selon votre lieu d'enregistrement). Il est aussi affiché dans la "Barre des tâches" en bas de l'écran cette fois. Pour changer ce titre et mettre quelque chose de plus intéressant, il faut, cette fois, remplir une partie du vide entre <head> et </head>. Insérez donc, entre ces deux balises ce code :
<title>Ma belle fenêtre en HTML !</title>
Vous avez vu, le titre a changé ! Ici, le titre sera le texte entre les balises <title> et </title> (title=titre en Anglais, facile !).