|
Rédiger un code en HTML
Vous êtes ici : Accueil  Menu principal Menu HTML
Introduction Code HTML
Pour rédiger un code en HTML, il n'est pas nécessaire de disposer d'un logiciel "spécialisé". Nous avons le choix de nous servir d'un éditeur de texte tel que "WordPad" de Windows, dans lequel nous tapons notre code comme tout autre texte - ou de nous appuyer sur un éditeur du HTML dont, au marché, nous trouvons à tout qualité et prix. Quelques-uns en ont toutefois le désavantage de restreindre le programmeur par trop de données "préfabriquées", susceptibles d'empêcher ou de compliquer la libre création.
L'éditeur HTML Arachnophilia qui, par son auteur Paul Lutus, est mis à la disposition des programmeurs en forme d'un "careware" - au lieu d'être payé en "espèces", l'auteur préfère une récompense "morale" - offre une solution intermédiaire :
 Il ne nous oblige pas à travailler sur la base de données préfabriquées, mais nous laisse la possibilité d'écrire et de corriger notre code librement, comme dans un éditeur de texte.
Mais au contraire d'un éditeur de texte qui ne distingue pas entre les diverses parties d'un code et nous laisse seul juge de sa qualité, il facilite notre travail par l'affichage de plusieurs couleurs : tout ce qui est balise ou attribut apparaît en bleu, les valeurs en vert et le texte en noir. Et si une faute de frappe (ou de programmation) s'introduit, les couleurs changent, et notre code adapte un aspect "d'alerte"...
http://www.webuniversum.net/webmaster/downloads/arach.exe
Note : L'éditeur Arachnophilia et ses fonctions sont expliqués dans le chapitre Logiciels HTML du cours Webmaster 1.
Création de la première page
Arachnophilia crée automatiquement les bases de notre première page. Il suffit de cliquer sur
File - New File - HTML File
pour que, d'abord, une boîte de dialogue apparaisse sur l'écran. Elle nous propose
 de donner un titre à notre page,
de choisir la couleur de notre arrière-plan,
de choisir la couleur de notre texte.
Si nous lui refusons le titre, notre page sera automatiquement baptisée "untitled" - sans titre.
Nous ne sommes pas non plus obligés à choisir déjà dans ce stade les couleurs de l'arrière-plan ou du texte. Si nous ne lui communiquons pas de décision, Arachnophilia nous dicte ses valeurs par défaut - blanc pour l'arrière-plan et noir pour le texte - que nous pouvons changer à tout moment, tant pour l'arrière-plan ou le texte entier que pour certaines parties de notre choix.
Ensuite, la boîte de dialogue nous demande encore les divers "link colors", les couleurs que nous attribuons à un lien en général, à un lien actif et à un lien déjà activé par l'utilisateur De nouveau, nous pouvons remettre cette décision à plus tard - peut-être même jusqu'au moment où nous aurons étudié le chapitre qui explique les différents types de liens...
Lorsque nous cliquons sur "OK", la base de notre code s'affiche.
<!doctype html public "-//w3c//dtd html 3.2//en">
<HTML>
<HEAD>
<TITLE>(Type a title for your page here)</TITLE>
<META name="GENERATOR" content="Arachnophilia 4.0">
<META name="FORMATTER" content="Arachnophilia 4.0">
</HEAD>
<BODY bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
</BODY>
</HTML>
La première ligne
<!doctype html public "-//w3c//dtd html 3.2//en">
nous informe sur la norme HTML avec laquelle nous travaillons. Ensuite, la balise
<HTML>
marque le début de notre code en HTML. A la fin de la page, elle est complétée par la balise finale
</HTML>
qui annonce la fin de la page HTML.
Comme l'indique déjà leur nom, les balises telles que <HTML> tracent les "directions" que notre page est censée prendre, tout comme les "vraies" balises tracent les chemins des randonneurs. Une balise - aussi appelée marqueur - signale le début et la fin d'un "bout de chemin" que le visiteur du site doit parcourir.
Quelques exceptions à part, les balises apparaissent toujours en couple : la première marque le début
<BODY>
la deuxième la fin
</BODY>
d'un "bout de chemin". La différence entre les deux est soulignée par le signe "/".
La balise <HEAD> annonce le début de l'en-tête de notre page. Ici, nous tombons sur le titre que nous lui avons donné ou, si nous n'en avons pas introduit un, la demande
(Type a title for your page here)
de le faire maintenant. De nouveau, nous ne sommes pas obligés à obéir, si nous acceptons le titre par défaut "untitled". Mais choisir un titre intéressant ou expressif est certainement plus attractif, car dès que nous affichons notre page dans un navigateur, nous le découvrirons en haut de la fenêtre.
Avant que notre en-tête se termine - sa balise finale est
</HEAD>
- nous tombons encore sur deux lignes
<META name="GENERATOR" content="Arachnophilia 4.0">
<META name="FORMATTER" content="Arachnophilia 4.0">
qui servent de base pour nos metas, des indications sur la nature de notre page dirigées aux moteurs de recherche. Leurs fonctions sont profondément traitées dans le chapitre "Moteurs de recherche" de la deuxième partie de notre formation.
Nous nous apercevons, que plusieurs secteurs peuvent être insérés les uns dans les autres. Dans l'exemple
<HTML>
<HEAD> ... </HEAD>
<BODY> ... </BODY>
</HTML>
l'en-tête et le corps de la page HTML sont insérés dans le secteur plus vaste html.
Le "véritable" code commence avec la balise <BODY> qui marque le début de la partie "corps", où toutes les données qui, plus tard, s'afficheront dans la fenêtre du navigateur seront introduites. Elle commence avec la définition des couleurs que nous avons indiquées avant de cliquer sur "OK" ou - si nous n'en avons pas choisi nous même - avec celle des couleurs par défaut. Dans les chapitres body et texte, nous apprenons, comment les modifier à volonté. Leurs valeurs sont expliquées dans celui des couleurs RGB.
Nous avons remarqué que, lors de l'ouverture de la page de code, notre curseur était placé entre les balises
<BODY ...>
et
</BODY>
donc au milieu du corps. Nous pouvons alors immédiatement commencer à écrire notre code.
Exemple d'un code HTML destiné au body : <BODY>
<H2 align="center">Mon premier code</H2>
<P align="right">HTML offre une large gamme de possibilités</P>
<P align="center"><B>Ma page décrit <FONT size="4">la vie des animaux</FONT> dans leur habitat naturel.</B></P>
<IMG src="../bear.gif" alt="L'ours est l'ami des animaux de la forêt">
etc.
</BODY>
La plupart des balises disposent d'attributs qui, de leur part, ne sont pas "viables" sans leurs balises. On ne les trouve donc jamais seuls. Les attributs précisent la nature du "bout du chemin" indiqué par la balise.
Dans l'exemple
<H2 align="center">Mon premier code</H2>
la balise <H2> ouvre un secteur caractérisé par le fait que son texte apparaît dans une taille différente de celle du secteur précédent ou - s'il s'agit du premier secteur - différente de la taille par défaut.
L'attribut align signale que nous souhaitons définir l'alignement du texte - ou des images - du secteur et sa valeur center indique la nature de l'alignement.
Ces balises, attributs et valeurs sont profondément traités dans les chapitres body, texte et images.
Pour que les navigateurs comprennent qu'ils n'ont pas affaire à un texte ordinaire, mais à un code HTML, nous sommes toujours obligés à entourer ses éléments par les signes inférieur et supérieur, c'est-à-dire par "<" et ">" :
<HEAD> ... </HEAD>
ou
<BODY> ... </BODY>
ou
<H2 align="center">
Après le ">" qui indique au navigateur que l'expression de code est terminée, nous plaçons le contenu du secteur, par exemple un texte ou une image. HTML ne permet jamais qu'une balise - avec ses attributs et valeurs - de début soit immédiatement suivie de son partenaire final. Il exige toujours que, entre le deux, se trouve d'abord un "contenu".
Finalement, le secteur se termine avec sa balise finale, en principe identique à celle du début, mais complété par "/" :
</H2>
Tous les balises, attributs et valeurs de ce code sont profondément traités dans les prochains chapitres.
Note : Au contraire des noms d'image ou de page, un code HTML peut être rédigé en majuscules ou minuscules.
Maintenant, il suffit d'enregistrer la page (File - Save as...) sous un nom de notre choix auquel nous ajoutons l'extension .html ou, si nous préférons, .htm - par exemple
mapage.html
- et nous pouvons la visualiser. La première possibilité consiste à l'ouvrir par un "doubleclic" sur son nom dans le navigateur Windows ou, deuxième possibilité, nous l'appelons directement par Arachnophilia. Pour cela, nous cliquons sur
Preview - Select & Launch Browser - Browser 1: System
Note : Si nous travaillons avec un "Mac", il vaut mieux utiliser l'extension .html.
Avant, finalement, de nous lancer à la recherche d'un serveur qui prend notre site en charge, nous créons encore un dossier de base qui regroupe toutes les pages actuelles et futures de notre site.
Théoriquement, notre site est prêt. Il ne reste qu'à le charger sur un serveur pour que tout utilisateur d'Internet puisse le consulter...
Les cours complets sont livrés online.
Ils ne sont accessibles qu'après inscription.
Copyright : TechnoLangue, 1998 - 2002
last revised: September 15, 2002 | 
