Vous êtes sur le point d'embarquer pour un voyage qui va vous transformer de simple Surfeur Internet en Auteur Internet de Multimédia !
Après cette leçon, vous pourrez :
Maintenant que vous savez ce qu'est le HTML, commençons à l'utiliser.
(Test Eclair -- Qu'est-ce que ces lettres signifient ? Si vous aviez lu la leçon précédente, vous le sauriez !).
Quand un navigateur web affiche une page comme celle que vous lisez en ce moment, il lit un simple fichier texte, et cherche des codes spéciaux appelés balises ou "tags" entourés par les signes < et >. Le format général d'une balise HTML est :
<nom_de_tag>chaine de texte</nom_de_tag>
Par exemple, le titre de cette section utilise un tag header (titre) :
<h3>Que sont les balises HTML ?</h3>
Ce tag dit au navigateur web d'afficher le texte Que sont les tags HTML ? dans le style de titre de niveau 3 (Nous en saurons plus sur ces tags plus tard). Les balises HTML peuvent dire à un navigateur de présenter le texte en gras, en italiques, en faire un titre ou un lien hypertexte vers une autre page web. Il est important de noter que le tag de fin,
</nom_de_tag>
contient le caractère "/" slash (barre oblique). Ce "/" slash dit au navigateur d'arrêter d'interprêter le texte comme un tag. Plusieurs tags HTML se présentent en paires comme ceci. Si vous oubliez le slash, le navigateur continuera la balise pour le reste du texte dans votre document, produisant des résultats indésirables (vous pouvez essayer cette expérience plus tard).
NOTE: Un navigateur web ne fait pas attention aux majuscules et minuscules. Par exemple, <h3>...</h3> n'est pas différent de <H3>...</H3>
A la différence de la programmation sur ordinateur, si vous faites une erreur typographique en HTML, vous n'obtiendrez pas une "bombe" ni ne "planterez" le système ; votre page web aura simplement l'air, eh bien... fausse. Il est facile et rapide d'entrer dans le HTML et de faire les corrections.
Votre navigateur a un vocabulaire limité mais ouvert ! Un aspect intéressant du HTML réside dans le fait que, si votre navigateur ne sait pas quoi faire d'un tag, il l'ignorera ! Par exemple, dans le document que vous êtes en train de regarder, le tag de titre de cette section est réellement écrit comme cela :
<wiggle><h3>Que sont les tags HTML ?</h3></wiggle>
mais, comme votre navigateur ne supporte probablement pas le tag <wiggle> (je l'ai inventé, peut-être que dans le futur, ça fera se tortiller (wiggle) le texte sur votre écran ?), il se comporte comme si il savait quoi faire. Si j'étais en train de programmer un nouveau navigateur web, je pourrais décider d'ajouter cette fonctionnalité pour le tag <wiggle> dans mon logiciel.
Pour étudier les leçons de ce didacticiel, vous devriez créer une nouvelle fenêtre web (cela vous permet de garder une fenêtre avec les instructions de la leçon et d'utiliser une autre fenêtre comme votre "espace de travail"), et également ouvrir votre éditeur de texte dans une troisième fenêtre.
NOTE: Le moment est venu de vous rappeler que nous vous fournirons des instructions plutôt génériques car les noms de menus et de fichiers peuvent varier suivant les navigateurs que vous utilisez. Si nous écrivons, "Sélectionnez Ouvrir Location... dans le Menu Fichier" et que votre navigateur ne comporte pas l'option exacte, essayez de trouver l'équivalent le plus proche dans vos propres menus.
Il faudra également que vous soyez à l'aise pour passer d'une application à l'autre et de fenêtres en fenêtres sur votre ordinateur. Une autre option est d'imprimer les instructions des leçons (mais nous ne voulons vraiment pas promouvoir un massacre excessif des arbres).
Voci les étapes pour mettre en place votre "espace de travail" :
NOTE: La seule raison d'avoir deux fenêtres est que vous pouvez, en même temps, lire les instructions des leçons et voir votre document de travail. Il n'est pas obligatoire d'ouvrir deux fenêtres ; Ca rend juste votre travail plus aisé. Vous pouvez également enregistrer cette page web dans vos signets (ou favoris) ou revenir ici via le menu Aller ou Historique.
NOTE: Vous aurez besoin de passer entre les différentes fenêtres pour étudier ces leçons. Ca peut être un challenge en fonction de la taille de votre moniteur. Vous pouvez choisir de redimensionner les trois fenêtres de manière à ce qu'elles apparaîssent ensemble sur votre écran ou bien de les empiler afin de pouvoir cliquer sur n'importe laquelle pour l'amener au premier plan.
Si vous utilisez un traitement de texte pour écrire votre HTML, assurez-vous que vous sauvegardez vos documents au format texte (ASCII).
Si vous êtes débutant, nous vous recommandons FORTEMENT d'utiliser un éditeur de texte le plus simple possible -- SimpleText pour Macintosh ou le Bloc-Notes de Windows. Pourquoi ne pas utiliser ces coquets éditeurs HTML ? Il est plus sûr pour vous d'apprendre d'abord les concepts et ENSUITE de chercher des raccourcis ou des aides qui vous rendront le travail moins fatiguant.
Vous aurez également intérêt à créer un nouveau répertoire/dossier sur votre ordinateur pour votre espace de travail. Vous pouvez l'appeler Plan_de_Travail ou mon_espace ou n'importe quoi d'autre ; assurez-vous simplement que vous mettez tous les fichiers que vous créez à cet endroit. Ca vous rendra la vie plus facile... enfin, au moins quand vous travaillez sur ce didacticiel !
Un document HTML contient deux parties bien distinctes, la tête (head) et le corps (body). La partie head contient des informations sur le document qui ne sont pas affichées à l'écran. La partie body, elle, contient tout le reste et est affichée dans la page web.
La structure de base de n'importe quelle page HTML est donc :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
<html>
<head>
<!-- Info de titre contenant des informations supplémentaires sur
ce document, non affichées sur la page -->
</head>
<body>
<!-- Tout le HTML à afficher -->
: :
: :
: :
</body>
</html>
La toute première ligne:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
n'est pas obligatoire techniquement, mais c'est un code qui dit au navigateur pour quelle version de HTML la page actuelle est écrite. Pour plus d'informations, cf les Spécifications de Références du W3C.
Entourez tout le contenu HTML avec les tags <html>...</html>. A l'intérieur, vous avez d'abord la section <head>...</head> et ensuite la partie <body>...</body>.
Notez également les balises de commentaires entourés par <!-- bla bla bla -->. Le texte entre les tags n'est PAS affiché dans votre page web, mais c'est de l'information qui peut être importante pour vous ou n'importe quelle autre personne regardant le code HTML derrière la page. Quand votre page web se compliquera (comme vous le verrez quand nous arriverons aux tables, cadres et autres friandises à 20 leçons d'ici !), les commentaires vous seront bien utiles si vous devez mettre à jour une page que vous avez écrite il y a longtemps.
Voici les étapes pour créer votre premier fichier HTML. Vous êtes prêts ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
<html>
<head>
<title>Web Volcan</title>
</head>
<!-- Ecrit pour le Didacticiel "Ecrire le HTML"
par Lorrie Lava, 31 Février 1999 -->
<body>
Dans cette leçon, vous vous servirez d'Internet pour rechercher
de l'information sur les volcans et rédiger un rapport de
vos résultats.
</body>
</html>
NOTE : Regardez où le tag <title>...</title> est situé. C'est dans la partie <head>...</head> qui sera donc invisible à l'écran. A quoi cela sert-il ? Le tag <title> est utilisČ pour identifier de manière unique chaque document et est également affiché dans la barre de titre de la fenêtre de navigateur.
Dans la leçon 3, vous apprendrez comment ajouter une ligne de texte pour faire apparaître un titre directement dans votre page web.
Notez également que nous avons inséré un tag de commentaire qui indique le nom de l'auteur et la date de création du document. Vous pouvez écrire ce que vous voulez entre les tags de commentaire mais cela sera seulement visible quand vous regarderez le code "source" HTML d'une page web.
NOTE : Pour les utilisateurs de Windows 3.1, vous devez sauvegarder tous vos fichiers HTML avec des noms qui finissent en .HTM. Donc, dans ce cas, votre fichier devrait s'appeler VOLC.HTM. Ne vous inquiétez pas ! Votre navigateur est assez intélligent pour savoir qu'un fichier dont le nom se termine par .HTM est un fichier HTML.En regardant les extensions de noms de fichiers, votre navigateur web saura qu'il faut lire ces fichiers texte comme du HTML et affichera correctement la page web.
Vous pouvez créer des fichiers avec des noms comme VOLC.HTML si vous utilisez Windows95 ou une version plus récente du système d'exploitation Windows.
Comparez votre document avec un échantillon de ce qui devrait apparaître. Après avoir vu l'exemple, utilisez le bouton Précédent de votre navigateur pour revenir à cette page.
Si votre document est différent de l'exemple, vérifiez le texte que vous avez tapé dans votre editeur.
Une erreur courante que nous entendons est : "Je n'arrive pas à voir le titre !" Vous ne devez pas le voir ! Le texte dans le tag <title>...</title> n'est PAS affiché dans la page web ; vous devriez le voir dans la barre de titre de votre fenêtre de navigateur.
L'erreur la plus répandue chez les débutants est qu'ils essaient d'utiliser un traitement de texte pour taper le HTML et sont ensuite incapables d'ouvrir le fichier dans leur navigateur, ou si ils y arrivent, la page est pleine de caractères bizarres. Quand vous débutez, nous vous conseillons d'utiliser l'éditeur de texte le plus basique comme le Bloc-Notes de Windows ou SimpleText pour Macintosh. Cherchez les raccourcis après !
Si vous cherchez d'autres éditeurs gratuits, nous vous recommandons EditPad (pour Windows) et BBEdit Lite (pour Macintosh).
Pensez à un sujet pour votre propre page web. Maintenant, créez votre propre fichier texte HTML incluant un tag <title> et quelques phrases d'introduction. Sauvegardez le fichier HTML et rechargez-le dans votre navigateur. Vous pouvez créer un dossier/répertoire différent pour ce fichier afin de ne pas le confondre avec toutes les pages volcans que vous allez réaliser au cours de ce didacticiel.
Gardez ce fichier à portée de main car vous y ajouterez des choses dans les leçons suivantes.
Votre première page web est faite !
Mais, pour être honnête, elle est assez courte et pas très excitante ! Dans la prochaine leçon, vous apprendrez à modifier et mettre à jour votre document HTML.
Ecrire le HTML : Leçon 1 : Créer Votre Premier Document HTML
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut1.html