Vous êtes ici :  Accueil    Formations online    Webmaster pro
  Niveau 1    Formation HTML    Introduction HTML

Introduction à la programmation HTML

Peu importe si nous voyageons sur le Net, si nous visitons des forums, si nous lisons des magazines spécialisés ou, tout simplement, si nous regardons la télé, nous entendons souvent parler d'une foule de techniques avancées avec lesquelles on peut réaliser des sites formidables.
 
Cela est vrai et faux en même temps. Il est vrai qu'avec des techniques du genre Perl ou PHP, on peut faire des merveilles. Mais ce qui n'est pas vrai - bien que beaucoup de "branchés" le prétendent - c'est qu'il suffit de se lancer carrément dans un de ces langages avancés, comme PHP, JavaScript ou Python, pour créer des pages Web.

Car tous ces langages très intéressants ont en commun qu'ils basent sur le HTML. Il est impossible de créer une page Web complexe sans maîtriser ce langage qui, à ses débuts, avait la réputation de n'être qu'un outil de programmation très "simple" - mais qui, grâce aux progrès de la technique, est devenu de plus en plus performant.

Pour créer une page Web, nous avons donc besoin de passer par un document HTML. Que faut-il faire pour établir un tel document ?
 
Théoriquement, nous disposons de plusieurs méthodes. Les Webmasters les plus "purs" se servent tout simplement d'un éditeur de texte : edit sous MS-DOS, Wordpad sous Windows, SimpleText sous Macintosh ou vi sous UNIX.
 
Cette méthode présente un seul "désavantage" : chaque signe et chaque lettre doivent être tapés sans la moindre faute de frappe. Toute erreur risque d'empêcher le déroulement correct de notre application future.
 
C'est la raison pour laquelle les amateurs préfèrent souvent les éditeurs HTML (HotDog, HoTMetaL, HyperMakerHTML etc.) ou un logiciel du type WYSIWYG du style Adobe GoLive, Claris Home Page, DreamWeaver ou FrontPage. L'emploi d'un éditeur HTML ou, surtout, d'un logiciel WYSIWYG ne demande pas beaucoup de connaissances : pour entrer les marqueurs dans l'application, nous n'avons qu'à cliquer sur un bouton ou à nous servir d'un menu déroulant. Les fautes de frappe sont donc exclues.
 
Toutefois, sans maîtriser le HTML, personne n'est en mesure de créer un site pro - ni sans, ni avec l'aide d'un tel logiciel. Dans les mains d'un amateur, les performances d'un éditeur HTML ou d'un WYSIWYG ne sont jamais suffisantes pour la rédaction d'un site complexe. Dans les mains d'un pro, par contre, ces logiciels deviennent superflus.
 
Un code rédigé par un logiciel ne peut jamais être comparé à celui d'un "véritable" Webmaster : un logiciel de création est toujours moins performant et, par sa nature, ne peut jamais baser sur les techniques les plus récentes.

Ainsi, au contraire d'un amateur, un Webmaster maîtrise tous ces logiciels, mais il ne s'en sert jamais. - Sauf, peut-être, dans une situation particulière où son client y insiste, ce qui est très rare. Il préfère créer son propre code et le taper à la main, sans l'assistance d'un logiciel.

Nous avons donc dit que le langage HTML est celui dans lequel nous nous adressons aux visiteurs de nos sites. Nous l'utilisons en forme de codes. Toutefois, nos visiteurs ne sont pas en mesure de comprendre nos codes "tels quels" : ils ont besoin de "quelqu'un" qui traduit ses codes et les transforme en textes ou images. Ces "interprètes" de codes s'appellent navigateurs.
 
Nous avons tous dans notre ordinateur un ou plusieurs de ces navigateurs, par exemple Internet Explorer, Netscape Communicator ou Opera.
 
Au grand regret du Webmaster, ces "interprètes" ont une influence extraordinaire sur la présentation de nos pages sur le Net. Ils ont le pouvoir d'interpréter nos codes à leur "guise".
 
Cela ne veut heureusement pas dire qu'un navigateur risque de faire "n'importe quoi" : les créateurs des navigateurs les plus répandus ont tous signé un accord avec le W3C dans lequel ils se sont engagés à suivre une norme commune. Ainsi, une image programmée en HTML est toujours affichée en tant qu'image, et un texte reste un texte - en théorie.
 
Mais la réalité ne suit pas toujours la théorie. Le problème : il y a trop de navigateurs différents sur le marché qui, malgré leur accord, se font un "plaisir" à se distinguer de leurs concurrents. Puis, au cours du temps, chaque navigateur a été édité en plusieurs versions. Il serait bien plus facile si tous les internautes ne se servaient que d'un seul et même navigateur et si, comble de bonheur du Webmaster, ils n'en utilisaient que la toute dernière version.
 
Pire : les internautes ne voyagent pas seulement au moyen des navigateurs les plus divers, ils utilisent aussi des systèmes d'exploitations différents. Ainsi, l'affichage d'une page sous Mac n'est jamais vraiment identique à celui sous Windows, et Internet Explorer pour Mac ne réagit pas forcément de la même manière qu'Internet Explorer pour Windows.
 
Toutefois, nous n'avons pas d'influence sur les habitudes des internautes, et peu importe si elles compliquent notre tâche, nous n'y pouvons rien changer : quelques visiteurs de nos sites se servent du dernier Internet Explorer, des autres du dernier Netscape Communicator, un troisième groupe préfère un ancien Internet Explorer et un quatrième ou cinquième ne jure que sur Opera ou Mozilla. L'un penche pour Windows, l'autre pour Mac, le troisième pour Linux. Et si cela nous plaît ou non - c'est au Webmaster de faire en sorte que son code soit toujours correctement affiché.

Notre première arme contre "l'individualisme" des navigateurs est la norme du HTML. Si nous rédigeons nos codes exactement selon cette norme, il y a de fortes chances que notre code soit correctement "traduit" par un maximum de navigateurs.

Par la suite, tu étudieras cette norme qui t'aidera à "dompter" les navigateurs trop "têtus". Parfois - au moins à première vue - tu seras étonné de te voir obligé de placer tes codes selon un certain ordre, de faire attention aux minuscules ou majuscules bien que, dans ton navigateur préféré, cela ne semble pas avoir d'importance, ou de respecter des "futilités" comme des guillemets ou un espace entre deux codes. Cependant, toutes ces exigences (dont tu prendras rapidement l'habitude) ne servent qu'à assurer l'affichage correct de tes pages dans un maximum de navigateurs différents.
 
Soit dit à côté - ton travail soigneux sera doublement récompensé. Non seulement que les navigateurs ne te poseront pas des problèmes et ne t'obligeront jamais (ou très rarement) de reprendre une programmation pour l'adapter aux besoins de l'un ou l'autre d'entre eux, il y a une deuxième récompense qui t'attend : au moment où tu t'attaqueras aux langages plus performants tels que Perl ou PHP, tu auras déjà pris l'habitude d'un bon nombre d'éléments qui sont obligatoires pour les faire fonctionner.
 
Prenons les guillemets, pour ne citer qu'un exemple. Un guillemet oublié en HTML "condamne" ton code à être mal interprété par l'un ou l'autre navigateur. Mais il y a toujours des navigateurs qui n'y font pas attention et, malgré la faute, affichent ta page correctement. Lorsque, par contre, tu te sers d'un langage de programmation plus avancé, rien ne marche plus dès que tu oublies un seul guillemet, une virgule ou un espace.

Mais revenons au HTML et à nos navigateurs. Pour avoir la garantie qu'aucun navigateur ne lui joue un "tour", un véritable pro teste ses pages toujours dans un maximum de navigateurs différents. Nous, les débutants, nous contentons pour le moment des trois navigateurs les plus répandus : Internet Explorer, Netscape Communicator et Opera.

Les premiers pas en programmation HTML

Un code HTML est toujours entouré de parenthèses du style < et >. Sans ces caractères, ses éléments ne peuvent pas être interprétés comme code HTML.
 
Il consiste toujours en trois éléments de base : les balises (aussi appelées marqueurs, étiquettes ou, en anglais, tags), les attributs et les valeurs. Désormais, cette "trinité" régnera sur toute ta vie professionnelle.

Les balises en HTML

Les balises sont les éléments "dominants" de notre code. Sans elles, aucun élément ne peut être affiché sur l'écran d'un internaute : peu importe s'il s'agit des textes, des images ou de tout autre objet, ils ont toujours besoin de balises.
 
En HTML, les balises sont toujours rédigées en majuscules.
 
Comme nous avons vu ci-dessus, une balise se place toujours entre des parenthèses < et >.
 
Il est rare de trouver une balise seule qui n'est pas accompagnée par un attribut et une valeur - toutefois, cela est possible. Théoriquement, toutes les balises peuvent "vivre" seules, sans le soutien des attributs et valeurs. A l'époque des anciennes versions du HTML, il y en avait qui sont allés jusqu'à "refuser" la présence d'un compagnon : elles ont préféré rester seules entre leurs parenthèses < et >. D'autres, par contre, n'ont pas de "sens" sans au moins un attribut et une valeur.

Les attributs en HTML

Au contraire des balises, un attribut ne peut pas rester seul : il n'est jamais "viable" sans la compagnie d'une balise.
 
Les attributs sont toujours rédigés en minuscules.
 
Dans notre code, les attributs jouent un rôle essentiel : ils ont pour but de donner un élément supplémentaire à une balise. Toutefois, pour qu'ils puissent remplir leur tâche, il ne suffit pas de les placer à côté des balises : ils exigent aussi la présence d'une valeur. Ainsi, un attribut est toujours placé après une balise et (à quelques rares exceptions près) avant une valeur. Ainsi, notre code est rédigé selon le schéma :

<BALISE attribut="valeur">

L'attribut et la valeur sont donc placés à l'intérieur du même champ créé par les caractères < et > qui entourent déjà notre balise. Nous considérons les attributs et les valeur comme la "famille" de la balise.

Les valeurs en HTML

Tu as déjà remarqué qu'une valeur est toujours rédigée en minuscules. Nous la plaçons toujours entre guillemets.
 
Une valeur dépend toujours d'un attribut. Elle ne peut jamais être attachée directement à une balise, c'est-à-dire sans l'intermédiaire d'un attribut. Nous sommes toujours obligés de rédiger d'abord la balise (en majuscules), ensuite l'attribut et sa valeur (en minuscules).

Un attribut peut avoir plusieurs valeurs, mais une valeur ne dépend toujours que d'un seul attribut. Chaque attribut dispose d'un certain choix (limité) de valeurs dont il a le droit de se servir.

Exemple :   Plus haut, nous avons déjà dit que la balise <FONT> peut, entre autres, gérer la couleur d'un texte. Mais pour que le navigateur sache que le marqueur a l'intention de lui "parler" d'une couleur, il a besoin d'être accompagné de l'attribut adéquat, c'est-à-dire de color.   Toutefois, bien que - grâce à l'attribut color - le navigateur ait compris que la balise veut lui communiquer la couleur d'un texte, cela ne suffit pas pour lui faire comprendre, de quelle couleur il doit se servir. Cette tâche est déléguée à la valeur.   Nous disons donc <FONT> et le navigateur sait que le code veut lui donner une indication concernant l'affichage du texte. Laquelle ? - Il ne peut pas encore le savoir.   Ensuite, nous disons <FONT color ...> et le navigateur sait que le code veut lui parler d'une couleur. Mais de quelle couleur ?   Finalement, nous disons <FONT color="red"> et le navigateur aura compris qu'il est censé afficher le texte en rouge.

Tu sais évidemment que le HTML a été "normalisé" aux États-Unis, Par conséquent, il base sur l'anglais. Pour cette raison, nous sommes obligés de nous servir du mot anglais color pour parler des couleurs et de red pour indiquer la couleur rouge.

Pour le moment, ces paragraphes te paraissent peut-être un peut "théoriques". Mais très bientôt, tu verras leur utilité pratique. Nous te conseillons donc de retenir un maximum de ces informations pour, dès que tu te seras plongé dans la première tranche de ton travail pratique, les relire et les retenir définitivement.

La vie HTML en couple

Il serait évidemment exagéré de comparer la réaction d'une balise avec la vie d'un homme ou d'un animal. Toutefois, il est amusant de constater que nos marqueurs forment également de véritables "couples" et, à la limite, même des "familles".
 
Il y a très peu de balises qui refusent carrément la présence d'un partenaire. Tous les autres préfèrent n'apparaître qu'accompagnées par leur compagnon. Il y a même des marqueurs incapables d'accomplir leur tâche sans le soutien du partenaire adéquat.

Un couple de balises consiste toujours en un partenaire "initiale" et un partenaire "final". Les deux disposent d'un nom commun - d'une sorte de "nom de famille". Pour les distinguer l'un de l'autre, le nom du partenaire final est toujours précédé par le caractère /.

Nous avons remarqué que chaque balise - peu importe s'il s'agit d'une balise initiale ou finale - exige ses propres parenthèses < et >. Nous retenons qu'il est strictement interdit de placer plus d'une balise entre un seul couple < et >. Chaque balise a droit à son couple < et > personnel.
 
Comme dit son nom, la balise initiale sert à "initier" notre code ou, alternativement, une partie définie de notre code. Le marqueur final, par contre, termine la partie du code initié par son partenaire. Par conséquent, il est logique qu'une balise finale n'a jamais le droit d'être placée immédiatement après son partenaire initial : entre les deux, nous plaçons toujours un "contenu" - un texte, une image ou tout simplement un autre code - qui est "protégé" (ou, dans la langue du pro, "géré") par les deux balises.

La structure d'une page HTML

Mais assez de théorie. Regardons de près la structure d'une véritable page HTML. Une telle page consiste toujours en deux parties : un en-tête et un corps. Comme toujours, le HTML insiste à ce que ces éléments soit nommés en anglais - nous sommes donc obligés de parler d'un head ("tête" ou "en-tête" en anglais) et d'un body ("corps" en anglais).
 
Nous verrons bientôt, que les deux ont des tâches clairement définies.

L'en-tête - notre head - contient tout ce qui est responsable de la bonne gestion de la page. Son contenu n'est donc jamais affiché sur l'écran d'un internaute : nous pouvons dire que le head d'une page HTML correspond au "personnage dans l'arrière-plan" qu'on ne voit jamais, mais qui détient tout le pouvoir.
 
Le body - le corps du document - héberge tous les éléments censés être affichés par les navigateurs : les textes, les images etc.

Il ne vaut pas la peine d'insérer un élément du head dans un body : les navigateurs ne le comprendraient pas et afficheraient "n'importe quoi". Et il est strictement interdit d'inscrire un élément du body dans le head : les navigateurs risqueraient d'en être perturbés au point de "gâcher" l'affichage de la page entière.
 
Dès maintenant, nous prenons donc l'habitude de distinguer entre un marqueur de la "famille" du head et un marqueur de celle du body.
 
Mais bien que le head et le body règnent sur des domaines sévèrement séparés, l'un ne peut pas se passer de l'autre. Une page HTML a toujours besoin du head et du body - l'un ne peut pas exister sans l'autre.

Les marqueurs du head et du body
dans un document HTML

Nous avons dit que, lorsque nous "parlons" HTML, nous nous exprimons toujours en forme de codes dont les éléments dominants consistent en balises. Il est alors clair que nous utilisons des balises pour marquer les limites de nos head et body : ainsi, le début du head est signalé par la présence de la balise initiale <HEAD>, sa fin par la balise finale </HEAD>. Le body, par conséquent, se sert des balises <BODY> et </BODY>.
 
Dans cet ordre d'idées, nous saisissons le sens de la "vie en couple" : pour bien limiter le début et la fin d'un head ou d'un body, il faut être à deux.

Maintenant, il ne reste qu'à remplir les lignes "... les divers éléments du head ..." et "... les divers éléments du body ...". C'est à ces lignes que nous consacrerons les prochaines semaines.
 
Toutefois, si nous regardons de près notre système de page, nous nous rendons compte qu'il y manque une indication importante : comment le navigateur peut-il savoir que nous avons l'intention de lui soumettre une page en HTML si nous oublions de le lui dire ?

Les indicateurs du HTML

Nous savons déjà qu'un navigateur n'est pas capable de comprendre quoi que ce soit sans que nous le lui communiquions - évidemment par le biais d'une balise.
 
Comme nous avons déjà compris la simplicité du système du HTML, nous ne sommes pas étonnés d'apprendre que la balise qui indique le langage HTML se nomme tout simplement <HTML>. Son partenaire final est logiquement </HTML>.
 
Nous créons donc un champ limité par <HTML> et </HTML> dans lequel nous insérions notre page entière : c'est-à-dire la partie du head et celle du body.

Nous n'oublions pas que </HTML> est toujours le tout dernier code d'une page HTML. Cette balise marque strictement la fin de la page : aucun autre code ne peut la suivre.
 
Maintenant, rien ne nous empêche de commencer à remplir nos heads et bodies. Mais avant de nous plonger dans l'apprentissage des divers balises, attributs et valeurs, réfléchissons un moment à la question très pratique, de quel support nous nous servons pour créer nos pages HTML.

Au début de cette leçon, nous avons parlé des divers éditeurs HTML et de leurs atouts et désavantages. Nous avons aussi dit qu'un véritable Webmaster ne les utilise jamais. Nous, les futurs pros, nous nous servons d'une sorte de "compromis" : nous utilisons un éditeur HTML qui nous permet de taper nos codes "à la main" - comme un véritable Webmaster - mais qui surveille notre travail et intervient, quand nous faisons trop de "bêtises". Cet éditeur dont les services nous seront précieux au cours des prochaines semaines (et, comme pour beaucoup de pros, peut-être pendant toute notre carrière) s'appelle Arachnophilia.

Allons-y. Ouvrons notre Arachnophilia et créons notre première page.

Clique ici pour afficher ton prochain chapitre : Ma première page HTML