	CV / Resume
	Le Sénégal
	Senegalese Singers
	Apprenez l'HTML

Maîtrisez l’Html en une semaine

Intro

Si vous êtes déjà adeptes de la programmation alors vous ne ferez qu’une bouchée de l’html. Par contre, si vous débutez, laissez moi vous dire que la structure de l’html n’est rien d’autre qu’une succession de balises, les balises étant des instructions notées comme suit:

<balise1>...</balise1>ou <balise2>
"..." représente un élément quelconque. Soit du texte, soit des balises,etc. Chaque balise a une fonction bien particulière mais le rôle général des balises est de donner des instructions. Certaines balises ordonnent le tracé d’une ligne, d’autre l’insertion d’une image, d’autres encore servent à créer un tableau etc...Il existe deux types de balises: les balises primaires et secondaires. Les balises primaires étant de la forme de Balise2 et les secondaires de la forme de Balise1. Les balises primaires servent à donner des instructions directes et courtes. Prenons l’exemple de la balise d’insertion d’image:

<IMAGE Source="photo.jpg" LargeurImage=200 pixels>
L’insertion de l’image se fait donc en une seule étape de façon directe. Le code a bien sûr été changé pour vous permettre de mieux comprendre l’exemple. En réalité, il est différent (par exemple, on n’écrit pas IMAGE mais IMG).Tout ce qui est marqué en bleu représente les options de la balise. Ces dernières sont toujours placées à l’intérieur de la balise qu’elle soit primaire ou secondaire.
Les balises secondaires sont différentes. En effet, la particularité des balises secondaires est qu’elles executent leur instruction sur tous les éléments compris entre <balise1>et </balise1>. Ces éléments peuvent être du texte ou même des balises primaires. Prenons un exemple:

<CENTRER>Bonjour </CENTRER>
Notre balise secondaire <CENTRER>... </CENTRER>permet de centrer des éléments. Ainsi, dans notre exemple, elle contribue à centrer le mot "Bonjour" au milieu de la page (le code a une nouvelle fois été modifié pour l’exemple. En réalité on n’écrit pas CENTRER mais CENTER).

Si vous avez bien saisi cette notion de balise, alors vous êtes prêts à programmer en html car la seule difficulté qu’il vous reste à présent est de savoir quelle balise fait quoi et quelles sont les options qui vont avec.

Entête d’un programme Html

Tout programme Html commence par <HTML>et se finit par </HTML>mais le contenu du programme en tant que tel se trouve entre les balises <BODY>et </BODY>. Cette balise est de la forme
<BODY BGCOLOR=" " BACKGROUND=" " TEXT=" ">... </BODY>
BGCOLOR définit la couleur de fond du document, TEXT celle du texte. Dans le champ BACKGROUND doit se placer le nom et le chemin de l’image à mettre en tapisserie. On aura par exemple <BODY BGCOLOR="red" TEXT="yellow">...</BODY>pour écrire en jaune sur fond rouge.
Entre les balises <HTML>et <BODY>se trouve l’entête du document qui se situe entre les balises <HEAD>et </HEAD>. Les principales balises de l’entête sont:

<META   NAME=" "   CONTENT=" ">
   Le champ CONTENT sert à expliciter le contenu du champ NAME. Ils permettent à eux deux de personnaliser un document HTML. Les valeurs les plus souvent assignées à NAME sont "Author", "Description", ou encore "Keywords". On aura par exemple <META   NAME="Description"   CONTENT="Page personnelle">. Le champ "keywords" est très important du fait que c’est ce qu’utilisent les moteurs de recherche pour vous référencier. Par exemple si vous faites une page web portant sur l’électronique et la chimie, l’une de vos balise META sera
<META   NAME="Keywords"   CONTENT="Electronique, Chimie">
<TITLE>NomDuDocument</TITLE>
Le titre de votre document doit se retrouver à l’intérieur de cette balise.

Voici un exemple d’entête:
<HTML>
<HEAD>
<META NAME="Author" CONTENT="Jean Dupont">
<TITLE>titre du document</TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">
Contenu du programme
</BODY>
</HTML>

Sommaire - Intro

Opération Sur Le texte En Général

Il s’agit de certaines balises très utilisées:

<PRE>...</PRE>: Elle ressort exactement le même texte qu’on lui a inséré avec prise en compte des retours à la ligne et des espaces.
<P>... </P>: Elle transforme le texte inséré en paragraphe. Elle ne tient compte ni des retours à la ligne, ni des espaces de plus d’un caractère.
<CENTER>...</CENTER>: Centre le texte inséré au milieu de la page (marche aussi pour les images).
<I>... </I>: Transforme le texte inséré en italique.
<U>... </U>: Souligne le texte inséré.
<B>... </B>: Transforme le texte inséré en gras.
: Tout le texte inséré dans cette balise sera mis en commentaire c’est-à-dire qu’il ne sera pas pris en compte par le programme lors de l’execution. Elle permet au concepteur de pouvoir expliquer les différentes parties de son programme pour permettre à ceux qui y sont étrangers de mieux s’y retrouver.
Les Balises Titre: Elles vont de <H1>... </H1>à <H6>... </H6> et ne servent exclusivement qu’aux titres. En effet, les différences entre les balises <H> se caractérisent par la taille. Les différentes tailles sont les suivantes:

<H1>
<H2>
...
<H5>

<H6>
Les Listes:
Il existe deux types de listes: les listes numérotées et les listes non numérotées. Les lignes numérotées sont du type
<OL>
   <LI> énumération 1
   <LI> énumération 2
   <LI> énumération 3
</OL>
Ce qui donne:
1. énumération 1
2. énumération 2
3. énumération 3
Les listes non numérotées mettent des points à la place des numéros. Elles s’écrivent en remplaçant respectivement <OL> et </OL> par <UL> et </UL>.
Sommaire - Intro

3
Manipulation Des Caractères

Les manipulations des caractères se font essentiellement avec la balise
<FONT COLOR=" " FACE=" " SIZE=+x>... </FONT>
COLOR définit la couleur, FACE la police et SIZE la taille des caractères compris dans balise. SIZE=+x signifie qu’on augmente la taille des caractères de x (ex. En faisant SIZE=+2 on passe de "test" à "test") et x peut varier ainsi de -7 à +7. On peut aussi définir la taille par une nombre de pixels. Par exemple, SIZE=5 donne "test" et SIZE=50 donne "test".

Sommaire - Intro

4
Le Code Des Couleurs

Il ya deux façons de traduire les couleurs en Html. La première est simple: il suffit d’utiliser le nom anglais de la couleur. Ainsi "green" donne "vert", "red" donne "rouge" etc. La deuxième utilise un code à six caractères chacun variant de 0 à F du type COLOR=#FF554A. Les deux premiers caractères dosent le rouge, les deux suivants le vert et les deux derniers le bleu. On a donc COLOR = #rrvvbb. Ce mode est plus complet et permet d’obtenir une plus grande palette de couleurs. On peut ainsi avoir plusieurs types de bleus ( BLEU, BLEU, BLEU...).
Sommaire - Intro

5
Caractères Spéciaux

Les caractères "<", ">" et "&" sont interprétés par l’Html. Pour pouvoir les utiliser sans interprétation, des codes ont été instaurés. En voici quelque uns:
< donne <
> donne >
& donne &
  donne le caractère "espace".
é donne é
È donne È
â donne â
ç donne ç
D’une manière générale, chaque caractère peut être codé par son code ASCII précédé de &#, le code ASCII étant une énorme table dans laquelle tous les caractères ont un équivalent numérique. Ainsi,  donnerait le caractère "apostrophe".
Sommaire - Intro

6
Insertion d’une Image

L’insertion d’une image se fait par la balise suivante:
<IMG SRC=" " ALIGN=" " HSPACE=x Alt=" " WIDTH=x HEIGHT=x Border=x>
x représente un nombre quelconque.
SRC détermine le nom et l’emplacement de l’image à insérer, ALIGN signifie qu’on veut insérer du texte à coté de l’image, il ne prend que les valeurs "left" (texte à gauche) ou "right" (texte à droite). HSPACE détermine l’espace entre l’image et le texte inséré à coté. De ce fait, HSPACE ne peut être utilisé sans ALIGN. Alt définit la légende qui sera attribué à l’image une fois le programme mis en page. Enfin, WIDTH et HEIGHT définissent respectivement la base et la hauteur de l’image.
Par exemple,
<IMG SRC="Enfants.jpg" Alt="Test!!" WIDTH=85 HEIGHT=150> donne:

Sommaire - Intro

7
Liens Hypertextes

Il existe trois types de liens hypertextes:
1. Les liens reliant deux pages Html:
  Pour écrire un "lien" vers une autre page Html, on utilise la balise suivante
  <A HREF="NomDeLaPage">...</A>
  Par exemple, en cliquant sur le texte compris entre
  <A HREF="http://www.Site.com"> et </A>, vous serez dirigé vers la page d’acceuil du serveur Site. Si on insère une image entre <A ...> et </A>, elle devient un lien.
2. Les liens reliant deux endroits d’une même page Html:
  Les éléments compris entre
  <A HREF=#Nom > et </A>
  vous dirigeront automatiquement vers la zone du programme compris entre
  <A NAME=Nom > et </A>
  Par exemple, si on a <A HREF=#test>un</A> d’une part et
  <A NAME=test>deux</A> d’autre part dans le même progamme, le fait de cliquer sur "un" vous dirigera sur "deux".
  Dans l’exemple ci-dessus, on peut aussi accéder à "deux" d’une autre page du même serveur : Imaginons que "deux" soit sur la page "". En insérant un élément entre
  <A HREF="#deux" > et </A>, on crée un lien sur la page "" et plus précisément sur "deux" quelque soit la page d’où a été tapé le code.
3. Les liens en général:
  Les liens peuvent aussi ouvrir des fichiers de type multimédia tels que les sons, les vidéos, les images et même les mails. Pour cela, il suffit de mettre le nom et l’emplacement du fichier à ouvrir dans le champ HREF. Pour les mails, ce serait plutôt HREF="mailto: votre@adresse.com", à condition que l’ordinateur soit équipé d’un système de messagerie.
  Voici un exemple d’ouverture d’un fichier son:
  <A HREF="Bye.wav">Cliquez ici</A> donne
  
  Cliquez Ici
Vous avez dû remarquer que les liens n’ont plus la même couleur une fois que l’on a cliqué dessus. En effet, les navigateurs ont tendance à colorer les liens suivant trois phases: une couleur pour les liens non encore ouverts, une couleur pour les liens déjà ouverts et enfin, une couleur pour les liens sélectionnés par le curseur, indépendamment du fait qu’ils soient ouverts ou non. Il existe un moyen de choisir la couleur de chacune des trois phases. Pour cela, il faut insérer dans la balise <BODY..> les paramètres
LINK     Pour les liens non encore ouverts,
VLINK    Pour les liens ouverts,
ALINK    Pour les liens sélectionnés par le curseur.
On a donc quelquechose du type
<BODY LINK=#0000FF VLINK=#FF0000 ALINK=#000000>...</BODY>
Sommaire - Intro

8
Les Tableaux

Exemple de Tableau
Case 1 Case 2
Case 3 Case 4

La balise utilisée pour créer des tableaux est
<TABLE Border=x WIDTH=x Cellpading=x Cellspacing=x >...</TABLE>
x représente un nombre quelconque
L’option Border détermine la bordure du tableau. Si elle n’est pas précisée, le navigateur prendra la valeur par défaut. L’option Cellpading détermine l’espace entre le cadre du tableau et les données comprises dans les cases de ce dernier. WIDTH désigne la largeur du tableau. Elle peut s’exprimer en pourcentage ou en pixels. Enfin, Cellspacing fixe l’espace entre les cases du tableau.
La balise TABLE s’accompagne des balises <TR>..</TR> et <TD>..</TD> (Table Row et Table Data) qui se placent entre <TABLE> et </TABLE>. Pour passer à la ligne suivante du tableau, on utilise TR et pour passer à la case suivante d’une même ligne, on utilise TD. Par exemple le programme de l’exemple défini ci-dessus serait:

<TABLE>
   <TR>
      <TD COLSPAN=2>
      Exemple de Tableau
      </TD>
   </TR>
   <TR>
      <TD>
      Case 1
      </TD>
      <TD>
      Case 2
      </TD>
      ...
</TABLE>

Il existe aussi des options pour la balise de TD. Ces options s’appliquent aux cases du tableau. De cette façon, chaque case a ses principales caractéristiques telles que la couleur de fond ou l’image de fond. La balise TD s’écrit:
<TD COLSPAN=x ROWSPAN=x ALIGN=" " BGCOLOR=" " BACKGROUND=" " WIDTH=x VALIGN=top>
x représente un nombre quelconque.
Les options Backgound et BGCOLOR sont les mêmes que ceux définis dans la balise <BODY>...</BODY> (cf. "Entête d’un document Html"). L’option WIDTH est la même que celle défini pour la balise <TABLE>...</TABLE>. L’option ALIGN détermine l’alignement du texte à l’interieur de la case. Ses valeurs sont "left","right" ou "center". L’option ALIGN est aussi utilisée par la balise <P>..</P> et les balises <Hi>..</Hi> , "i" étant un nombre allant de 1 à 6 (cf. "Opérations sur le texte en général"). VALIGN=top signifie que le texte doit être affiché en haut de la case. COLSPAN=x indique que la case occupe x colonnes et ROWSPAN=y veut dire que la case occupe y lignes. Dans l’exemple ci-dessous, la case contenant "Colonnes" occupe deux colonnes et la case contenant "Lignes" occupe deux lignes.

Colonnes
Lignes Case 1 Case 2
Case 3 Case 4

Sommaire - Intro

9
Les Frames

Un ensemble de frames est entièrement défini entre les balises <FRAMESET> et </FRAMESET>. L’architecture principale des frames est orientée horizontalement ou verticalement :
horizontalement : l’écran est partagé en plusieurs bandes horizontales
verticalement : l’écran est partagé en plusieurs bandes verticales
Accessoirement, chaque bande peut être subdivisée en plusieurs zones ou frames. Il en résulte qu’il n’y pas de limite au nombre de frames ainsi définis.

Définition d’un système de frames comportant 2 bandes verticales
<FRAMESET COLS="30%,70%"> ou <FRAMESET COLS="30%,*">

Définition d’un système de frames comportant 3 bandes horizontales
<FRAMESET COLS="15%,70%,15%"> ou <FRAMESET ROWS="15%,*,15%">

l’attribut COLS précise qu’il s’agit de colonnes de même que l’attribut ROWS précise qu’il s’agit de rangées. Les paramètres associés sont placés entre guillemets les nombres de colonnes et de rangées sont induits du nombre d’informations séparées par les virgules;
les largeurs des colonnes et des rangées sont indiquées soit comme une constante (c’est-à-dire en pourcentage de la largeur de l’écran ou en valeur absolue (pixels)); soit comme une variable (*) : dans ce cas, c’est le navigateur qui décide de la largeur de la colonne.
Pour affiner la présentation à l’écran des informations, Microsoft a ajouté deux attributs à FRAMESET qui permettent de modifier l’aspect général d’une interface et la disposition des frames :
FRAMEBORDER : affiche ou efface la bordure des frames;
syntaxe : <FRAMESET FRAMEBORDER="yes|no">
FRAMESPACING : définit un espace entre les frames de l’écran;
syntaxe : < FRAMESET FRAMESPACING=n >(n=nombre de pixels) Ce paramétrage s’applique à l’ensemble des frames affichés en même temps à l’écran.

La deuxième étape, lors de la déclaration de frames en HTML, consiste à définir chaque frame successivement en respectant l’ordre logique des colonnes ou des rangées déclarées dans l’en-tête. L’élément à utiliser pour cette définition est l’élément FRAME. Les caractéristiques qui doivent être définies sont au nombre de six. La balise est du type:
<FRAME NAME=" " SCROLLING="yes/no" SRC=" " NORESIZE MARGINHEIGHT>
NAME: nom du frame.
MARGINWIDTH: règle l’espace défini en pixels entre le bord interne d’un frame et le bord externe du document qui est placé dans ce frame; cet attribut est rattaché à l’élément FRAME ce rend le paramétrage spécifique d’un frame donné; il faut donc paramétrer chaque frame séparément. La valeur par défaut est fixée par le navigateur de même que la valeur minimale; c’est celle-ci que prend le navigateur en présence de l’instruction MARGINWIDTH=0;
MARGINHEIGHT: définit l’espace entre la bordure supérieure/inférieure du frame et le bord supérieur/inférieur du document. La valeur par défaut et la valeur minimale sont fixées par le navigateur; ainsi, à l’affichage, un titre placé dans un frame dont on a fixé la marge haute à 0 sera néammoins séparé du bord du frame.
SCROLLING: détermine la présence ou non de barres de défilement.
SRC: la désignation du document source qui viendra s’afficher dans le frame.
NORESIZE: le caractère fixe ou dynamique du document : par défaut, un frame est redimensionnable soit manuellement avec la souris, soit automatiquement par le navigateur; mais on peut le figer à l’aide de l’attribut NORESIZE.

La déclaration d’un frame Index comportant des ascenseurs, redimensionnable par l’utilisateur, destiné à recevoir un index prendra la forme suivante :
<FRAME NAME="Index" SCROLLING="yes" SRC="">

Lorsque qu’une colonne ou une rangée comportent des subdivisions, l’ensemble des frames ainsi générés est considéré comme un sous-ensemble de l’ensemble principal et doit être déclaré comme tel à l’aide de l’élément FRAMESET. Pour mieux comprendre comment il faut procéder pour avoir un résultat conforme, prenons l’exemple d’un système de frames à trois bandeaux principaux disposés horizontalement, représenté dans la table ci-dessus (colonne : 3; cadres : 4)
```
<!--- Déclaration de la structure générale: 3 bandes horizontales 
<FRAMESET ROWS="70,*,70">

<!--- Déclaration du bandeau supérieur
    <FRAME SCROLLING="no" NAME="titre" NORESIZE SRC="titreh.htm">

<!--- Déclaration du bandeau médian
    <!--- Déclaration du sous-ensemble : 2 frames verticaux
        <FRAMESET COLS="22%,78%">

        <!--- Déclaration du frame de gauche
        <FRAME SCROLLING="yes" NAME="index" SRC="index.htm#html">
        
        <!--- Déclaration du frame de droite
        <FRAME SCROLLING="yes" NAME="manuel" SRC="intro.htm#html">
        
        </FRAMESET>
    <!--- Fin de la déclaration du bandeau médian
        
<!--- Déclaration du bandeau inférieur
   <FRAME SCROLLING="no" NAME="boutons" NORESIZE SRC="titreb.htm">

</FRAMESET>
<!--- Message aux navigateurs ne pouvant rendre les frames>
<NOFRAMES>
Si votre navigateur ne peut afficher des fenêtres multiples,
<A HREF="intro.htm">cliquez ici </A>
pour revenir au menu général.
</NOFRAMES>
<!--- Fin du listing>
```
Comme on peut le remarquer, ce listing comporte en fait deux parties : la première concerne la définition des frames; la deuxième, comprise entre les marqueurs de l’élément NOFRAMES est tout aussi importante. Elle est destinée aux navigateurs qui ne savent pas rendre les frames. Le code HTML, placé entre les marqueurs de NOFRAMES, est vu comme du code normal dans un document HTML classique. Il est donc interprété comme tel. On peut donc y placer tout document HTML, quelle que soit sa taille.

La caractéristique la plus intéressante d’un système d’affichage à base de frames est la faculté d’établir des relations entre les frames de sorte qu’une action effectuée dans l’un entraine un résultat dans un autre. L’exemple d’utilisation type est celui de la consultation d’un manuel grâce à un index comme dans notre interface. Pour que l’information s’affiche dans le frame de droite lorsqu’on clique sur un mot clé de l’index, il faut la réunion de deux conditions indispensables :
le frame de destination doit avoir un nom : NAME="manuel" dans notre exemple.
les liens hypertexte de l’index doivent pointer vers ce frame; ceci est réalisé grâce à l’attribut TARGET; ainsi le lien qui permet l’affichage du document à droite a la syntaxe générale suivante : <A HREF="document.htm" TARGET="manuel"> Mot-clé </A> L’attribut TARGET joue un rôle essentiel dans l’ergonomie des frames : c’est lui qui règle l’affichage en fonctions des paramètres qui lui sont associés. Comme on vient de le voir, la cible d’un lien peut être un frame spécifié par son nom. Il existe en outre 4 paramètres prédéfinis qui permettent d’orienter différemment l’affichage.
Ce sont :
- _self : le document vers lequel pointe le lien hypertexte contenant l’instruction "TARGET=_self" est affiché dans le même frame;
- _top : l’instruction "TARGET=_top", placée dans un lien, efface les frames présents et leur superpose un affichage plein écran; elle permet en fait de quitter l’interface;
- _blank : force le navigateur à ouvrir une nouvelle fenêtre plein écran qui n’a pas de nom;
- _parent : affiche le document spécifié par le lien dans le frame où était (ou est encore) le document parent du document actuel, c’est-à-dire, le document, mémorisé par le navigateur, à partir duquel on a eu accès au document actuel;
Lorsque l’attribut TARGET est absent dans un lien , le navigateur affiche le document dans le même frame, ce qui correspond à "TARGET=_self", qui est par conséquent la valeur par défaut.
Sommaire - Intro

10
Conseils

Le langage HTML est un langage très riche et sans cesse renouvelé si bien que tout ce que j’ai pu vous dire le long de cette page ne constitue que la base du langage. Il reste cependant encore beaucoup de domaines inexplorés tels que les images réactives, les feuilles de style, ou encore l’envoi de données saisies par formulaire. En effet, ces parties demandent beaucoup de précision et de détails dans l’explication si bien que le meilleur endroit où les apprendre demeure encore les livres spécialisés. En attendant, vous disposez entre vos mains d’outils assez importants pour pouvoir programmer des sites complets. Surtout, soyez curieux, n’hésitez pas à consulter les programmes sources des sites que vous trouverez intéressants (menu "affichage" ou bouton droit de la souris) et inspirez-vous-en. Le langage Java s’avère un excellent complément au code HTML, cependant vous n’avez nul besoin de maîtriser ce langage pour l’utiliser sur votre site. En effet, de nombreux applets java sont actuellement disponibles sur l’Internet. De plus, il existe de nombreux logiciels tels que Frontpage qui permettent de générer des pages web sans souci de programmation. Ces logiciels sont très utiles à condition de savoir les utiliser. Pour le reste, je fais appel à votre imagination, votre sens de l’information et surtout votre talent. J’espère que mon site vous aura été profitable.
Sommaire - Intro

Home

Maîtrisez l’Html en une semaine

Intro

Sommaire

Entête d’un programme Html

Opération Sur Le texte En Général

<H1>

<H2>

<H5>

<H6>

Manipulation Des Caractères

Le Code Des Couleurs

Caractères Spéciaux

Insertion d’une Image

Liens Hypertextes

Les Tableaux

Les Frames

Conseils