Cours HTML

Copie à l'usage exclusif de souleymanethiam25@gmail.com, IP 160.0.177.14.
OFPPT – ISTA ALADARISSA FES
PROGRAMME TSDI
Module 15 : Création d’un site web

Partie 1 : HTML
Formateur : M. HAIJOUBI
Reproduction et diffusion interdite.

Html Module 15
Chapitre 1 : structure d'un document HTML
Le langage HTML
HTML (Hyper Text Markup Language) est le langage universel utilisé pour communiquer
sur le Web. Les fichiers HTML sont transportés sur le réseau Internet, pour aboutir sur
l'ordinateur de votre lecteur grâce à un programme appelé navigateur ou browser.
Le logiciel que l'on appelle un browser vous permet de surfer sur le Net et d'afficher sur votre
écran les "pages" qu'il a interceptées.
En plus du texte adressé à votre lecteur, il vous faudra inclure des instructions pour le
browser. Ces instructions seront différenciées de votre texte par les signes < et > par exemple
<HTML>. Ces "instructions" s'appellent des tags ou des balises.
Quand vous écrirez les balises de votre page HTML, il faudra garder à l'esprit :
- qu'une balise marque une action pour le browser (ce qu'il doit faire...).
- que les attributs précisent les modalités de cette action (comment il doit le faire...).
La déclaration de la version supportée avec la balise <doctype> doit se situer au début de
votre document.
Exemples :
<doctype html public "-//w3c//dtd html 4.0//en" "http://www.w3c.org/TR/REC-
html40/strict.dtd">
Il s'agit de la version 4, sans support des éléments des versions précédentes

<doctype html public "-//w3c//dtd html 4.0 transitional//en" "http://www.w3c.org/TR/REC-
html40/loose.dtd"> :
Il s'agit de la version 4 avec support des anciennes versions de html
<doctype html public "-//w3c//dtd html 4.0 frameset//en" "http://www.w3c.org/TR/REC-
html40/frameset.dtd"> :
S’applique aux fichiers gérant le multi fenêtrage N.B. : le "en" signifie que le html est en
anglais
Le document HTML minimum
Nous avons vu qu'une page HTML était en fait un fichier texte, enrichi d'un certain nombre de
codes ou commandes, appelés balises.
Ces balises sont toujours exprimées sous la forme d'un mot clé, encadré par les caractères "<"
et ">".
Pour la plupart des balises, il existe une balise de fermeture associée, reprenant le même nom,
mais précédée du caractère "/". Exemple : </BALISE>. La commande spécifiée s'applique
donc uniquement au texte situé entre le couple de balises ainsi formé. Exemple:
<HTML>
...
</HTML>
Notons que :
• une balise peut indifféremment être indiquée en minuscules ou en majuscules,

Html Module 15
• le formatage "manuel" du document (espaces, sauts de lignes,...) est toujours ignoré.

Par exemple : <HTML>...</HTML> est interprété de la même façon par le navigateur web
que la syntaxe sur plusieurs lignes indiquée ci-dessus.
Nous venons de découvrir, sans le savoir, un des éléments de la structure d'une page HTML :
toute page doit en effet débuter par la balise <HTML> et se terminer par </HTML>.
Entre ces deux balises, on définit deux zones : l'en-tête, spécifié par les commandes <HEAD>
et </HEAD>, ainsi que le corps, délimité par: <BODY> et </BODY>. Ce qui donne, comme
structure de base :
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
Dans l'en-tête, on ne met généralement qu'une seule information, le Titre du document qui
sera affiché en haut de la fenêtre du navigateur et qui apparaît dans les bookmarks (listes
d'URL gérées par un navigateur, une sorte d'annuaire).
Ce Titre est indiqué entre les balises <TITLE> et </TITLE>. Exemple:
<TITLE>Ceci est le Titre</TITLE>.
Dans le corps, on met en fait tout le document à afficher (texte, définition des images etc.).
Signalons l'existence d'une balise de commentaires, qui peut être utilisée partout dans les
documents HTML, définie comme suit :
 Ne pas

afficher
Paragraphe [Paragraph] <P> … </P> Début d'un

nouveau
paragraphe
Centrage [Center] <CENTER></CENTER> Centrer
Exemple :
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>

</BODY>
</HTML>
Quelques commentaires s'imposent
• Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police et taille de
caractères choisis dans sa configuration par défaut.
• Le browser affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci atteint le bord
de la fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la

Html Module 15
ligne comme vous le souhaitez, il faut une instruction particulière. C'est la balise <BR>. Celle-
ci représente une action ponctuelle et n'a donc pas besoin de balise de fin.
• Le même browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui
<FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en

bleu</FONT>est équivalent à <FONT SIZE=5>texte</FONT><FONT
COLOR="#0000FF">en bleu</FONT>
• Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien
les imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de vous créer
des ennuis.
• La taille dans <FONT SIZE=?> peut être indiquée de deux façons :
1. avec un nombre de 1 à 7. La valeur par défaut étant 3.

2. de façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0 +1 +2 +3.
Le principe des couleurs en HTML
Le modèle RVB : Couleurs additives

Une grande partie du spectre visible peut être représentée par trois composantes dans des
proportions et des intensités variables. Ces composantes portent le nom de couleurs primaires :
rouge, vert et bleu (RVB).
Chaque élément de couleur (Rouge, Vert ou Bleu) est codé en HTML sur 8 bit en hexadécimal soit de
00 à FF (de 0 à 255)
Ainsi FF de rouge, FF de Vert et FF de Bleu, donne du Blanc Voici les codes de quelques couleurs
basiques :
Bleu #0000FF Vert #00FF00
Blanc #FFFFFF Violet #8000FF
Rouge #FF0000 Jaune #FFFF00
Gris clair #C0C0C0 Noir #000000
Quelques balises plus complexes
Selon les versions du HTML, et l'apparition des éditeurs HTML évolués, certains tags sont moins
utilisés. D'autres aussi sont tout bonnement d'un emploi rare ou pour le moins particulier. En voici
quelques-uns qui complèteront votre panoplie actuelle :
• <NOBR> Empêche un changement de ligne.

• <BLOCKQUOTE> introduit une citation.
• <PRE> affiche un texte dit pré formaté. (Machine à écrire degueu).
• <XMP> Le browser prend ainsi en compte tous les espaces et sauts de ligne définis à l'écran.
• <ADDRESS> pour indiquer une adresse (généralement en fin de document).
• <U> souligne le texte. Comme, par convention, les éléments servant d'hyperlien sont
soulignés (c'est le même que dans les fichiers d'aide), on évitera de souligner des éléments
de texte pour leur donner de l'importance. On préfèrera les mettre en gras ou dans un format
ou une couleur de police différent. Il ne faut donc pas en abuser.
• <SUB> place le texte en indice.
• <SUP> place le texte en exposant.
• <INS> marque les sections ajoutées depuis la mise à jour.

Html Module 15
• <DEL> marquent ceux qui ont été supprimés ou périmés.

• <EM> accentuation.
• <ABBR> abréviation.
• <CODE> : code programmation.
• <VAR> : variable de programme.
• <STRONG> : accent plus fort.
• <KBD> : texte à saisir.
• <DFN>: définition.
• <SAMP> : exemple.
• <ACRONYM> : acronyme.
• <DIV align=left>...<DIV align=center>…<DIV align=right> permettent d'aligner différents
éléments à gauche, au centre et à droite.
• <DIV STYLE="text-align:justify;"> permet une justification du texte.
Les Titres
Tout document d'une certaine consistance se doit de présenter, par exemple dans la table des
matières, les différents niveaux de son exposé. HTML a disposé dès son origine d'outils spécialement
conçus à cet effet.
Pour ce faire, on utilise la balise <Hn>...</Hn> où n peut prendre une valeur entière comprise entre 1
et 6 (dans l'ordre décroissant de taille).
En-têtes [Heading] <Hn></Hn> Afficher un en-tête de niveau n et

avec n=1 à sauter une ligne
6
Exemple :
<H1>Les mois du printemps</H1> mars, avril, mai <H3>Les mois d'automne</H3> septembre,
octobre, novembre
Les caractères spéciaux
Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère
possède une abréviation (ENTITY) permettant de le coder.
Exemple :
Espace
© ©
< <
> >
E é
E è

Html Module 15
Chapitre 3 : listes d'éléments

Le langage HTML permet de définir deux styles de listes : les listes numérotées et les listes non
numérotées.
Les listes numérotées
Une liste numérotée (Ordered List) est délimitée par les balises <OL> et </OL> entre lesquelles
chaque élément de la liste (List Item) est précédé de la balise <LI>.
Exemple :
<OL>
<LI>élément 1,
<LI>élément 2,
<LI>élément 3.
</OL>
Ce qui donne à l'écran :
1. élément 1,
2. élément 2,
3. élément 3.
Les listes à puces
Une liste non numérotée est définie de la même façon, sauf qu'elle est encadrée par les balises <UL>
et </UL>.
Exemple :
<UL>
<LI>élément 1,
<LI>élément 2,
<LI>élément 3.
</UL>
On obtient cette fois :
• élément 1,
• élément 2,
• élément 3.
Notez qu'il est possible d'imbriquer des listes du même type ou de types différents.
Exemple :

Html Module 15
<UL>
<LI>élément 1 :
<OL>
<LI>sous-élément A,
<LI>sous-élément B.
</OL>
<LI>élément 2,
<LI>élément 3.
</UL>
On obtient alors :
• élément 1,
1. sous-élément A,
2. sous-élément B.
• élément 2,
• élément 3.
Liste de tabulations
Enfin, il est possible de définir des listes spéciales, permettant de faire des glossaires, en utilisant les
balises <DL> et </DL> pour encadrer la liste, <DT> pour spécifier un élément et <DD> pour indiquer
sa définition.
Exemple :
<DL>
<DT>HTML<DD>HyperText Markup Language
<DT>HTTP<DD>HyperText Transfert Protocol
</DL>
Donne :
HTML
HyperText Markup Language
HTTP
HyperText Transfert Protocol
Les attributs
Type="type" UL & (déprécié en faveur des css) : spécifie l'aspect des

OL marqueurs des éléments
Start="nombre" OL commence la numérotation à la valeur spécifiée.
Value="nombre" LI spécifie le nombre de l'élément.
Compact OL & rendu plus compact de la liste

UL
Le type des listes :
<UL type="disc"> Puces rondes pleines
<UL type="circle"> Puces rondes creuses

Html Module 15
<UL type="square"> Puces carrées
<OL type=1> (1,2,3)
<OL type=a> (a,b,c)
<OL type=A> (A,B,C)
<OL type=i> (i,ii,iii)
<OL type=I> (I,II,III)
10

Html Module 15
Chapitre 4 : les liens hypertextes

HTML (Hyper Text Markup Language) est un langage hypertexte (et hypergraphique) qui vous permet
en cliquant sur un mot généralement souligné (ou une image) de vous transporter :
• vers un autre endroit du document.

• vers un autre fichier HTML situé sur votre ordinateur.
• vers un autre ordinateur situé sur le Web.
Ce système d'hypertexte vous est familier car il est également utilisé par les fichiers d'aide de
Windows. Ce sont ces liens qui vous permettent de surfer de page en page et qui constituent
l'essence des documents HTML.
Les Liens
La syntaxe de ces liens entre plusieurs pages est simple mais entraînera de nombreux commentaires
:
<A HREF="URL ou adresse">...</A>
om
1. Lien externe
l.c
Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL (UNIVERSAL
ai
Ressource Locator). HTML permet d'accéder à toutes les machines et toutes les ressources du Net.
gm
Pour peu qu'Internet vous soit un peu familier, ce sont les adresses du type :
@
http://serveur/chemin.../fichier
25
ftp://serveur/chemin.../fichier
am
mailto:utilisateur@hôte
hi
2. Lien local
et
an
L'organisation classique, et plus que conseillée, d'un site Web consiste à regrouper l'ensemble des
m
éléments de celui-ci (fichiers htm, images, ...) dans un même répertoire. Vous pourrez ainsi
ey
"transporter" aisément votre site pour le présenter sur un autre ordinateur et ,but ultime, le charger sur
un serveur. Cette façon de procéder est la plus aisée et vous évitera pas mal de problèmes. L'adresse
ul
du lien sera alors tout simplement : fichier.htm

so
Exemple :
- Dans l'éditeur de texte,

nous allons créer deux fichiers HTML.
• le fichier 1.htm:
<A HREF="2.HTM">Aller vers le document 2</A>
• le fichier 2.htm:
<A HREF="1.HTM">Retour au document 1</A>
Les ancres
Des liens peuvent aussi pointer vers un endroit précis du même document ou d'un autre fichier. C'est
ce qu'on appelle les ancres, ancrages ou pointeurs [Anchor].
Point d'ancrage
11

Html Module 15
<A NAME="***">...</A>
On nomme la cible ***
Lien vers une ancre dans la même page
<A HREF="#***">...</A>
Lien vers la cible *** lorsque celle-ci se trouve dans la même page
Lien vers une ancre dans une autre page
<A HREF="URL#***">...</A>
Lien vers la cible *** lorsque celle-ci se trouve dans une autre page
Plusieurs liens à l'intérieur d'un même document supposent que ce document présente une certaine
longueur sinon une longueur certaine (et donc un temps de chargement assez long). Ainsi, on
préférera généralement à cette technique le découpage d'une longue page en un ensemble de
plusieurs pages de dimensions plus réduites.
Attributs de <A>
name="texte" nomme le lien. Ce nom est unique dans le

document.
href="adresse" spécifie l'emplacement des ressources visées.
hreflang="fr/en/en- spécifie la langue des ressources visées.

us/..."
rel="type de relation" relation avec d'autres documents
rev="type de relation" suivi de la liste d'adresse de ressources

considérées comme précédentes.
charset="charset" spécifie l'encodage des caractères des ressources

visées.
accesskey, shape, sont abordés plus en détails plus loin.

coords, tabindex
Les balises <LINK> et <BASE>
1. la balise <Link>
Elle apparaît dans <HEAD> et permet de spécifier les documents liés à celui en cours de consultation.
Ces informations sont aussi utilisées par les navigateurs utilisant les tooltips, navigateurs oraux, ...
<LINK> sert principalement à spécifier et donner l'adresse - via les attributs TYPE="TEXT/CSS" et
MEDIA="screen" - des feuilles de style s'appliquant au document (Nous le verrons plus loin)
Cet élément est en outre utilisé par les moteurs de recherche en vue de répertorier le site
<LINK TITLE="Manuel en Francais" TYPE="TEXT/HTML" REL="alternate"

HREFLANG="FR" HREF="adresse">
12

Html Module 15
2. la balise <BASE>
Apparaît dans <HEAD>, juste après <TITLE>, et avant tout autre élément.
Il permet de stipuler l'adresse absolue du document, ce qui permet de résoudre les éventuels conflits
d'adresse relatives (href="../fichier.gif").
Attributs :
href="adresse"
target="frame" : fenêtre visée pour le chargement.
13

Html Module 15
Chapitre 5 : les images

GIF ou JPEG ?
Avant de passer aux balises, il faut savoir ce qui suit.
• Les deux formats d'image (maximum 256 couleurs) reconnus sur le Web, sont le format GIF
(version 89a) et le format JPEG. Pour le format GIF, on retiendra la caractéristique "entrelacé"
qui permet de charger progressivement l'image lors de l'ouverture de la page. Ces deux
formats donnent des résultats assez équivalents bien que JPG soit plutôt recommandé pour
des images avec des tons nuancés ou dégradés.
• L'ennemi sur le Web, c'est la taille des images! Plus l'image est grande, plus le temps de
chargement sera long... au risque de décourager vos visiteurs. Si cela est possible, une image
en 16 couleurs peut très bien faire l'affaire. Présenter une petite image indiquant un lien vers
l'image complète est également un bon conseil.
• Il n'est pas inutile de prévoir dans votre panoplie de compositeur Web, un logiciel de retouche
d'images. A ce propos "Paint Shop Pro" a la triple qualité d'être disponible en shareware,
d'être très intuitif et d'être performant. En outre, un tel logiciel vous permettra de composer
vos propres images et ainsi de personnaliser vos pages.
• Dois-je rappeler qu'il est très facile de se faire une bibliothèque d'images tout en surfant sur le
Web? Avec Netscape, il suffit de se positionner sur l'image, de cliquer avec le bouton droit de
la souris et de suivre les instructions du menu déroulant (Save Image As...).
La balise <IMG SRC>
<IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse...

1. Attributs.
(Texte alternatif) alt="****" Pour les browser n'ayant pas l'option
"image" activée
(Dimensions) width=x height=y Hauteur et largeur (en pixels)
border=x (en pixels) Bordure
align=top align=middle Alignement

align=botton align=left
align=right
Commentaires :
• En HTML, l'image ne fait pas partie de votre document. Le browser va la chercher à l'adresse
indiquée. Généralement, on place les images dans le même répertoire que les pages HTML.
• Presque en conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises
dans un fichier HTML ne modifie en rien sa taille.
• Prévoir un texte pour les browsers n'ayant pas l'option image activée, permet au lecteur de ne
pas perdre le fil de l'exposé et peut-être d'activer cette option pour découvrir votre oeuvre.
• Il est important pour la fluidité de l'affichage de préciser la taille en hauteur et largeur de
l'image car le browser peut ainsi, connaissant l'emplacement à réserver pour celle-ci,
continuer à afficher le texte..
• Nous pouvons très bien faire un lien sur une image (<A HREF="fichier.htm"><IMG
SRC="image.gif"></A>)
14

Html Module 15
2. L'attribut Align
L'attribut align positionne l'image par rapport au texte
<IMG SRC="HELP.gif" align=TOP>Fichier d'aide
<IMG SRC="HELP.gif" align=CENTER>Fichier d'aide
<IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide
15

Html Module 15
Chapitre 6 : attributs de présentation

Les séparateurs
Les browsers intègrent un outil de mise en forme intéressant pour clarifier la présentation de votre
texte. C'est la ligne horizontale.
La syntaxe en est fort simple:

Ligne horizontale [Horizontal Rule] <HR> Insérer une ligne horizontale
Les valeurs par défaut de la balise <HR> sont : une épaisseur de trait de 2 pixels, un alignement
centré et une largeur de 470 de la fenêtre. Vous pouvez très bien modifier les valeurs de ces
différents attributs.
<HR size=?> Epaisseur en pixels

<HR width=?> Largeur en pixels
<HR width="%"> Largeur en % de la fenêtre
<HR align=left> Alignement gauche
<HR align=right> Alignement droite
<HR align=center> Alignement centré
Il est donc tout à fait équivalent d'écrire:
• <HR> et/ou
• <HR size=2 align=center width="470"
Je vous propose un petit exercice: - Avec l'éditeur de texte

<H3 align=center>Nicolas Chu</H3>
<HR align=center size=8 width="50%">
- Commentaires :
• On préférera spécifier la largeur en % de la fenêtre plutôt qu'en pixels car l'affichage

s'adaptera ainsi à toutes les tailles et résolutions d'écran.
Les arrière-plans
Le langage HTML permet d'agrémenter la présentation du document d'un arrière-plan [background]

coloré ou composé d'une image. Ce qui apporte un élément "artistique" à votre page.
La balise à utiliser ne pose pas de problème :
Couleur d'arrière-plan <BODY BGCOLOR="#$$$$$$">

Exemple :
<BODY BGCOLOR="#000088">
<H1>Bonjour</H1>
</BODY>
La lisibilité n'est pas parfaite. Heureusement, des balises sont prévues pour modifier les couleurs
utilisées par défaut par le browser pour le texte et les liens.
16

Html Module 15
Couleur de texte <BODY TEXT="#$$$$$$">

Couleur de lien <BODY LINK="#$$$$$$">
Lien visité <BODY VLINK="#$$$$$$">
Lien actif <BODY ALINK="#$$$$$$">
Reprenons notre exemple :
<BODY BGCOLOR="#000088" TEXT="#FFFF00">

<H1>Bonjour</H1>
</BODY>
On peut aussi prévoir un fond en image. Cette image (petite de préférence) est affichée en mosaïque
par le browser. Attention aux raccords... comme lorsque vous posez du papier peint.
Texture d'arrière-plan <BODY BACKGROUND="Adresse">

Ce qui peut nous donner :
<BODY BACKGROUND="PAPER.gif">
<H1>Bonjour</H1>
</BODY>
17

Html Module 15
Chapitre 7 : les tableaux

Nous abordons ici la partie la plus délicate mais aussi la plus intéressante du point de vue de la
présentation. Les tableaux permettent des possibilités d'alignement que les autres éléments du Html
n'autorisent pas.
Balises de base
Définition du [Table] <TABLE></TABLE> Début et fin de

tableau tableau
Définition d'une [Table Row] <TR></TR> Début et fin de
ligne ligne
Définition d'une [Table Data] <TD></TD> Début et fin de
cellule cellule
Le marqueur <TABLE> initialise le tableau. Il possède tout un tas de paramètres qui peuvent donner
ses caractéristiques. Par exemple, ici BORDER donne l'épaisseur du bord des cellules et du tableau.
Le marqueur <TR> débute une ligne d'un tableau, le marqueur <TD> quant à lui débute une cellule.
Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit:
<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
Les cellules
Avant toutes choses, les cellules peuvent contenir tous les éléments HTML déjà passés en revue,
soit:
• du texte
• des images
• des liens
• des arrière-plans
• et même des tableaux (eh oui!)
Bien que l'allure de votre tableau soit déjà déterminée, chaque cellule est en quelque sorte un petit
univers à part qui a ses propres spécifications. Découvrons les balises.
Largeur d'une cellule <TD width=x> en pixels

<TD width=%> en pourcentage
Fusion de lignes <TD rowspan=x>
Fusion de colonnes <TD colspan=x>
Découvrons ceci par des exemples.
18

Html Module 15
Je veux un tableau centré qui occupe 60% de la fenêtre avec, sur une ligne, trois colonnes égales.
Essayons ceci :
<CENTER>
<TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD>
</TR>
</TABLE>
</CENTER>
cellule1 cel. 2 3
Ou :
<CENTER>
<TR>
<TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE>
</CENTER>
cellule1 cel. 2 3
Le même tableau mais avec 2 lignes :

<CENTER>
<TR>
<TD width=34%>3</TD></TR>
<TR>
</TR>
</TABLE>
</CENTER>
cellule1 cel. 2 3
cellule1 cel. 2 3
Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc
déborder sur 3 cellules horizontales : c’est de la fusion.
<CENTER>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR>
<TD width=33%>cellule 1</TD>
<TD width=33%>cel 2</TD>
</TR>
19

Html Module 15
</TABLE>
</CENTER>
cellule 1
cellule 1 cel 2 3
Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La
première cellule doit donc déborder sur 2 cellules verticales.
<CENTER>
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
</TR>
<TR>
</TR>
om
</TABLE>
</CENTER>
l.c
cel 2 ai
3
cellule 1
gm
cel 2 3
@
25
am
Ligne de tableau <TR align=left/center/right> horizontalement

<TR verticalement
hi
valign=top/middle/bottom>
et
Cellule de tableau <TD align=left/center/right> horizontalement

an
<TD verticalement
m
valign=top/middle/bottom>
ey
ul
A Titre d'exemple, reprenons le tableau suivant :

so
cellule 1
cellule 1 cel 2 3
Avec quelques aménagements, il devient :

<CENTER>
<TR>
<TD colspan=3 align=center>Tarif au ../../..</TD>
</TR>
<TR>
<TD width=33% >Article 1</TD>
<TD width=33%>Ref 002 </TD>
<TD width=34% align=right>30fr</TD>
</TR>
</TABLE>
</CENTER>
20

Html Module 15
Tarif au ../../..
Article 1 Ref 002 30fr
Il est également possible de changer la couleur de la cellule.

Couleur de la cellule <TD BGCOLOR="#$$$$$$">
Notre dernier exemple pourrait devenir :
<TD colspan=3 align=center bgcolor="#000088">
Tarif au ../../..
Article 1 Ref 002 30fr
Attributs des balises <TABLE> <TR> et <TD>
Les paramètres du marqueur TABLE sont les suivants:
• BGCOLOR="Couleur"indique la couleur de fond du tableau

• ALIGN= LEFT | RIGHT, HSPACE et VSPACE ont la même signification que pour le
marqueur IMG
• CELLPADDING="Pixels" détermine la marge d'une cellule. Cette marge est la même de tous
les cotés de chaque cellule.
• CELLSPACING="Pixels" détermine la largeur en pixels entre chacune des cellule (à
l'extérieur de la cellule).
• WIDTH et HEIGHT sont censés donner la taille du tableau, soit en pixels, soit en pourcentage
de la page.
Les paramètres du marqueur TR sont les suivants:
• BGCOLOR="Couleur" indique la couleur de fond de la ligne

• ALIGN= LEFT | RIGHT | CENTER indiquent l'alignement horizontal à l'intérieur de chacune
des cellules de la ligne (comme DIV
• VALIGN= BOTTOM|MIDDLE|TOP indiquent l'alignement vertical, BOTTOM: aligné en bas,
TOP aligné en haut et MIDDLE centré
Les principaux paramètres du marqueur TD sont les suivants:
• BGCOLOR="Couleur" indique la couleur de fond de la cellule

• ALIGN= LEFT | RIGHT | CENTER indiquent l'alignement horizontal à l'interieur de la
cellule(comme DIV
• VALIGN= BOTTOM|MIDDLE|TOP indiquent l'alignement vertical, BOTTOM: aligné en bas,
TOP aligné en haut et MIDDLE centré
• COLSPAN=x permet à une cellule d'occuper plusieurs colonnes consécutives. (voir exemple
plus loin)
• ROWSPAN=x permet à une cellule d'occuper plusieurs lignes consécutives (voir exemple
plus loin)
A noter la présence d'un marqueur supplémentaire <CAPTION ALIGN=BOTTOM|TOP> qui permet

de mettre un Titre au tableau. Son paramètre indique si le Titre doit être avant (TOP) ou après
(BOTTOM) le tableau.
21

Html Module 15
Chapitre 8 : les frames

Les frames sont les cadres créés dans la fenêtre de votre navigateur. Chaque cadre peut recevoir un
fichier HTML différent. Ce principe est surtout utilisé pour des barres de navigations, des hauts de
page (où sont placés des publicités ou plus simplement le nom de la compagnie ou du site visité). Un
moment très en vogue, les frames tendent à se faire plus rares sur Internet. D'abord parce que la mise
à jour du site est plus difficile et surtout parce que les frames accroissent sensiblement les temps de
chargement.
Dans le cas d'une page contenant deux frames, il faut au moins trois fichiers (un fichier par cadre créé
- son contenu) :
• le fichier <FRAMESET>, celui qui répartit les cadres dans la fenêtre

• deux fichiers HTML pour le contenu de chaque cadre
Le fichier <FRAMESET>
Comme un tableau, un fichier frameset se construit en lisant les cadres de haut en bas, et de gauche
à droite. Mais commençons par un exemple de code simple :
<HTML>
<HEAD>
<TITLE>Mon site</TITLE>
</HEAD>
<FRAMESET cols="20, *">
<FRAME SRC="fichier1.html" name="colGauche">
<FRAME SRC="fichier2.html" name="colDroite">
<NOFRAMES>
Ce site a ete construit avec des frames. Il semble que votre
navigateur ne supporte pas ces balises. Voici un lien pour
visiter notre site sans frames : <A HREF="fichier2.html">Site
sans frames</A>
</NOFRAMES>
</FRAMESET>
</HTML>
Le fichier <FRAMESET> est le fichier qui crée et répartit dans la fenêtre les différents cadres (frames)
de notre page. Les balises <FRAMESET> et </FRAMESET> remplacent les balises traditionnelles
<BODY> et </BODY>.
Ici, nous avons créé deux colonnes, la première fait 20 pixels de large et la seconde occupe le reste
disponible de la fenêtre du navigateur. Dans le colonne de gauche de 20 pixels de large - son nom
étant "colGauche" -, nous chargeons le fichier "fichier1.html" et dans la colonne de gauche -
"colGauche" -, nous chargeons le fichier "fichier2.html".
Au cas où le navigateur de notre visiteur ne supporterait pas les balises de frames, nous fournissons
un contenu alternatif via les balises <NOFRAMES>. Ici, un lien vers fichier2.html.
Les attributs des FRAMES
1- Les attributs de la balise <FRAMESET> :
22

Html Module 15
cols="pixels / %, crée des colonnes dont la largeur peut être spécifiée

pixels / %" en pixels ou en pourcentage de la fenêtre totale. Les
dimensions pour chaque colonne sont séparées par
des virgules. (on note aussi qu'il est possible
d'indiquer le signe "*" pour indiquer que la colonne
occupe l'espace restant).
rows="pixels / %, crée des cadres horizontaux (lignes). Il n'est pas

pixels / %" possible d'utiliser cols et rows dans le même
frameset (voir dans l'exemple en fin de leçon).
framespacing="pixels" indique l'espace entre les deux cadres.
frameborder="pixels" épaisseur de la bordure des cadres.
bordercolor="code couleur de la bordure des cadres (ici, les noms des

héxadécimal" 16 couleurs standard ne sont pas possibles).
border="pixels" épaisseur de la bordure entre les cadres.
NOTE IMPORTANTE : si vous désirez que vos cadres n'aient pas de bordure, il vous faut fixer les
trois attributs suivants à la valeur de "0" pour que cela fonctionne sous Netscape et Internet Explorer :
framespacing, frameborder et border. Certains de ces attributs sont redondants, mais c'est parce
qu'ils ne fonctionnent soit que sous Internet Explorer soit sous Netscape.
2- Les attributs des balises <FRAME> :
Src="fichier" indique le fichier initialement chargé

dans la fenêtre.
name="texte" spécifie un nom pour la fenêtre créée.

C'est particulièrement important car
vous ferez appel à ce nom lorsque
vous voudrez charger un fichier dans
ladite fenêtre.
scrolling="yes / no / auto" autorise ou non la présence

d'ascenseurs de défilement pour le
cadre. "auto" laisse au navigateur le
soin d'afficher des ascenseurs si
besoin est (c'est l'option par défaut si
rien n'est spécifié).
marginheight="pixels" marges disposées en haut et en bas

du cadre.
marginwidth="pixels" marges disposées de chaque côté du

cadre.
Bien que le nom que vous donnez à vos fenêtres soit libre, il existe certains noms qui sont réservés
en HTML :
"_top" : le fichier est chargé dans la fenêtre entière (efface les frames)
"_blank" : une nouvelle fenêtre est ouverte dans votre navigateur pour y charger le fichier. L'ancienne
fenêtre reste ouverte en arrière plan.
"_parent" : ouvre le fichier dans une fenêtre supérieure hiérarchiquement (dans le cas où plusieurs
fenêtres du navigateur sont ouvertes).
23

Html Module 15
3- Des fichiers HTML et des frames
En fait, rien ne différencie à première vue les fichiers HTML pour un site avec des frames des autres
fichiers HTML. La seule différence s'observe dans les liens hypertextes : il faut préciser la frame de
destination pour l'affichage du fichier à charger. Par défaut, si rien n'est indiqué, le fichier se charge
dans le cadre où se trouvait le lien hypertexte.
Voici un exemple de code :
<A HREF="monExemple.html" target="colDroite">Un exemple de

chargement dans une frame</A>
En guise de rappel, trois noms réservés vous permettent de sortir des frames : "_top", "_parent",
"_blank" (à utiliser avec l'attribut target).
4- Exemples de codes pour des fichiers avec des Frames
a) Exemple de frames simples :

<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
L'attribut COLS="largeur1,largeur2,...,largeurN" définit la largeur des différentes fenêtres en cas de

division verticale.
La largeur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à470;
On peut mélanger les deux :
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
b) Exemple avec l’attribut SRC :
Pour l'instant, nos frames sont vides. On va donc leur donner à manger par des attributs de la balise :
<FRAME SRC="URL ou adresse du document à afficher dans la fenêtre">
On construit 3 fichiers HTML élémentaires que l'on place dans le même répertoire que le fichier de
frames :
A.htm B.htm C.htm
<HTML><BODY> <HTML><BODY> <HTML><BODY>
<H4>A</H4> <H1>B</H1> <H1>C</H1>
</BODY></HTML> </BODY></HTML> </BODY></HTML>
On reprend le fichier de frame précédent que l'on complète.
24

Html Module 15
<FRAME SRC="A.htm">
<FRAME SRC="B.htm">
<FRAME SRC="C.htm">
</FRAMESET>
</FRAMESET>
Les ascenseurs, comme à la fenêtre A, apparaissent automatiquement.

Par l'attribut SCROLLING="yes/no/auto" de la balise <FRAME> vous pouvez indiquer si la fenêtre doit
ou non posséder une barre de défilement.
c) Exemple avec les attributs NAME et TARGET :
NAME indique le nom de la fenêtre de telle sorte que cette frame puisse être utilisée comme cible d'un
lien hypertexte.
Ainsi, je voudrais faire un lien sur B pour afficher le contenu de ce lien (prenons le fichier A.htm pour
éviter de l'encodage) dans C .
Le fichier de frames devient :
<FRAME SRC="A.htm">
<FRAME SRC="B.htm">
<FRAME SRC="C.htm" NAME="fenetreC">
</FRAMESET>
</FRAMESET>
Et on met un lien vers A.htm dans le fichier B.htm en désignant comme cible la frame C.
<HTML>
<BODY>
<A HREF="A.htm" TARGET="fenetreC"><H1>B</H1></A>
</BODY>
</HTML>
25

Html Module 15
Chapitre 9 : les formulaires

Avec les formulaires, le langage Html vous ouvre la porte de l'interactivité. Votre interlocuteur pourra
remplir un champ de saisie de texte ou d'autres objets interactifs comme des cases à cocher. Ces
données seront transmises à une application sur le serveur qui les traitera.
1- Définition d'un formulaire
Un formulaire est créé entre les balises <FORM> et </FORM>
<FORM method="post" action="URL d'expédition" enctype="text/plain">
... éléments du formulaire ...
</FORM>
L'attribut "method" vous offre le choix entre get et post. La différence entre ces deux méthodes
repose sur la façon dont les données seront transmises au serveur et exploitées par celui-ci. Avec le
temps, la méthode post s'est imposée car elle apparaît plus efficace et permet le traitement d'une
quantité plus importante de données.
L'attribut "action" spécifie l'adresse d'expédition des données.

Dans le cas d'un traitement des données par une CGI, on spécifie le répertoire CGI du serveur et le
nom de la CGI :
<FORM method="post" action="http://www.serveur/cgi-bin/ma_cgi.pl">
L'attribut "enctype" (optionnel) spécifie l'encodage utilisé pour le contenu du formulaire. Ce paramètre
ne peut être utilisé qu'accompagné par la méthode post.
Ainsi enctype="text/plain" encode le contenu du formulaire en format texte lisible par le destinataire
L'attribut name est utilisé pour donner un nom au formulaire.
Attention !!! Ne pas oublier la balise de fin </FORM>. Dans ce cas, à la visualisation dans le
navigateur, rien ne sera affiché.
Dans le cas de l'utilisation en interne des formulaires par du Javascript, les attributs method, action et
enctype sont inutiles car on ne fait pas appel au serveur.
2- Zone de texte
INPUT type="text" indique un champ de saisie d'une seule ligne.
<FORM>
<INPUT type="text" name="nom" size="50">
</FORM>
L'attribut name est quasiment obligatoire. Le nom va identifier le champ de saisie.
L'attribut size (optionnel) définit la longueur du champ de saisie. Notons que l'on peut introduire un
nombre de caractères plus élevé que celui de la longueur.
26

Html Module 15
Il existe l'attribut maxlength="x" (optionnel) qui limite le nombre réel de caractères que l'on peut
introduire dans le champ de saisie.
La balise <INPUT> n'a pas de balise de fin.
3- Zone de texte multi lignes
La balise <TEXTAREA>...</TEXTAREA> introduit une zone de texte multi lignes. La syntaxe est :
<FORM>
<TEXTAREA name="nom" rows=4 cols=40>Valeur par défaut</TEXTAREA>
</FORM>
Valeur par défaut
L'attribut name permet de donner un nom au formulaire.

L'attribut rows=x détermine le nombre de lignes de la zone de texte.
L'attribut cols=y détermine le nombre de caractères visibles sur chaque ligne ou si vous préférez le
nombre de colonnes.
L'attribut wrap (optionnel) détermine la façon dont les sauts de ligne seront traités lors d'un
changement de ligne.
Avec wrap=virtual, les changements de lignes sont effectués automatiquement dans la zone de texte
mais le tout sera transmis en une seule ligne.
Avec wrap=physical, les changements de lignes sont effectués automatiquement dans la zone de
texte et ceux-ci sont également transmis.
Avec wrap=off, il n'y a aucun changement de ligne.
Attention !!! La balise <TEXTAREA> a une balise de fin, soit </TEXTAREA>.
4- Liste déroulante
La balise <SELECT></SELECT> indique au browser l'usage d'une liste déroulante. Les éléments de
la liste sont introduits par la balise <OPTION> ... (</OPTION> facultatif).
<FORM>
<SELECT name="nom" size="1">
<OPTION Value="Lundi">lundi
<OPTION Value="Mardi">mardi
<OPTION Value="Mercredi">mercredi
<OPTION Value="Jeudi">jeudi
<OPTION Value="Vendredi">vendredi
</SELECT>
</FORM>
lundi
Si vous cliquez sur la petite flèche vers le bas, vous obtiendrez la liste déroulante où on retrouve les
éléments de la liste (<OPTION>).
27

Html Module 15
L'attribut name="nom" définit le nom du formulaire.

L'attribut size="x" détermine le nombre d'éléments de liste affiché dans la boite d'entrée. En fait,
size="1" est optionnel car "1" est la valeur par défaut. Le même exemple avec size="3" donne :
lundi
mardi
mercredi
On peut présélectionner l'élément affiché dans la boite d'entrée (par défaut, le premier élément de la
liste sera retenu). On utilise pour ce faire l'attribut selected de la balise <OPTION>.
mercredi
La balise <SELECT> a une balise de fin </SELECT> tandis que la balise de fin </OPTION> est
facultative.
5- Bouton d'option
Les boutons d'option, aussi appelés boutons radio, ont comme particularité qu'une seule option à la
fois peut être activée (le "ou" exclusif).
om
l.c
La syntaxe de base est :
ai
gm
<FORM>
<INPUT type="radio" name="nom du groupe" value="valeur du bouton">
@
</FORM>
25
am
Exemple :
hi
et
<FORM>
an
<INPUT type= "radio" name="ville" value="Paris"> Paris

<INPUT type= "radio" name="ville" value="Londres "> Londres
m
<INPUT type= "radio" name="ville" value="NY "> NY

ey
</FORM>
ul
so
Paris Londres NY
Vous avez compris que l'attribut name="nom" doit avoir le même nom pour tout le groupe de boutons
d'option.
L'attribut "checked" (optionnel) permet de présélectionner un bouton radio. Ainsi :
<INPUT type= "radio" name="Ville" value="Paris" checked> Paris
Présenterait le bouton radio "tarif de jour" en position présélectionnée.
Le contenu de l'attribut "value" du bouton retenu sera utilisé par le Javascript.

6- Case à cocher
La philosophie des cases à cocher [checkbox] est assez similaire aux boites d'option. Ici, cependant,
plusieurs choix simultanés peuvent être réalisés.
28

Html Module 15
La syntaxe de base est :
<FORM>
<INPUT type="checkbox" name="nom" value="valeur attachée au bouton">
</FORM>
Comme exemple :
<FORM>
<INPUT type="checkbox" name="choix1" value="1"> Toto
<INPUT type="checkbox" name="choix2" value="2"> Titi
<INPUT type="checkbox" name="choix3" value="3"> Tata
<INPUT type="checkbox" name="choix4" value="4"> Tete
</FORM>
Toto Titi Tata Tete
Les règles pour l'attribut name="nom" sont moins précises que pour les boutons d'option. Vous
pouvez employer des noms identiques ou des noms différents pour chaque case à cocher. Cependant
des noms différents sont nécessaires pour l'utilisation d'un script. L'attribut checked (optionnel)
permet de présélectionner une case à cher. Ainsi :
<INPUT type="checkbox" name="choix4" value="4" checked> Tete
Présenterait la case à cocher "Tete" en position présélectionnée.
Le contenu de l'attribut "value" du ou des boutons retenus seront utilisés par le Javascript.
7- Bouton de commande
Le bouton de commande sert à placer un bouton, auquel on assignera plus tard une tâche
particulière.
<FORM>
<INPUT type="button" name="nom" value="texte du bouton">
</FORM>
L'attribut "value" permet d'adapter le texte du bouton à vos souhaits.
8- Bouton "Submit"
Le bouton Submit a la tâche spécifique de transmettre toutes les informations contenues dans le
formulaire à l'URL désignée dans les attributs ACTION et METHOD du tag <FORM>.
La syntaxe Html est :
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :
29

Html Module 15
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="Envoyer">
</FORM>
Envoyer
Les modifications seront peu nombreuses car le bouton Submit a une fonction Html très spécifique.
Seul le texte du bouton pourra être modifié (par défaut Submit).
9- Bouton "Reset"
Le bouton Reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et de
restaurer les valeurs par défaut.
La syntaxe Html est :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="Annuler">
</FORM>
Annuler
Les modifications seront peu nombreuses car le bouton Reset a une fonction Html très spécifique.
Seul le texte du bouton pourra être modifié (par défaut Reset).
Le TYPE="image" permet de remplacer le bouton submit par une image.
Exemple :
<FORM>
<INPUT TYPE="image" NAME="nom" SRC="source_de_l_image">
</FORM>
30

Cours HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Copie à l'usage exclusif de souleymanethiam25@gmail.com, IP 160.0.177.14.

OFPPT – ISTA ALADARISSA FES

Module 15 : Création d’un site web

Reproduction et diffusion interdite.

Chapitre 1 : structure d'un document HTML

Il s'agit de la version 4, sans support des éléments des versions précédentes

Copie à l'usage exclusif de souleymanethiam25@gmail.com, IP 160.0.177.14.

• le formatage "manuel" du document (espaces, sauts de lignes,...) est toujours ignoré.

<HTML> Ceci est le début d'un document de type HTML.

</HTML> Ceci est la fin d'un document de type HTML.

<HEAD> Ceci est le début de la zone d'en-tête (prologue au

Reproduction et diffusion interdite.

informations destinées au browser).

</HEAD> Ceci est la fin de la zone d'en-tête.

<TITLE> Ceci est le début du Titre de la page.

</TITLE> Ceci est la fin du Titre de la page.

<BODY> Ceci est le début du document proprement dit.

</ BODY> Ceci est la fin du document proprement dit.

Copie à l'usage exclusif de souleymanethiam25@gmail.com, IP 160.0.177.14.

Chapitre 2 : le traitement du texte

Gras [Bold] <B>...</B> Début et fin

Italique [Italic] <I>...</I> Début et fin

Taille de [Font size] <FONT SIZE=?>...</FONT> Début et fin

Couleur de [Font color] <FONT COLOR="#$$$$$$"></FONT> Début et fin

A la ligne [Line break] <BR> Aller à la

Commentaires [Comments]  Ne pas

Paragraphe [Paragraph] <P> … </P> Début d'un

Centrage [Center] <CENTER></CENTER> Centrer

Reproduction et diffusion interdite.

<FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en

1. avec un nombre de 1 à 7. La valeur par défaut étant 3.

Le principe des couleurs en HTML

Le modèle RVB : Couleurs additives

Bleu #0000FF Vert #00FF00

Blanc #FFFFFF Violet #8000FF

Rouge #FF0000 Jaune #FFFF00

Gris clair #C0C0C0 Noir #000000

Quelques balises plus complexes

• <NOBR> Empêche un changement de ligne.

Copie à l'usage exclusif de souleymanethiam25@gmail.com, IP 160.0.177.14.

• <DEL> marquent ceux qui ont été supprimés ou périmés.

En-têtes [Heading] <Hn></Hn> Afficher un en-tête de niveau n et

Les caractères spéciaux

Reproduction et diffusion interdite.

Chapitre 3 : listes d'éléments

Les listes numérotées

Ce qui donne à l'écran :

Les listes à puces

On obtient cette fois :

Copie à l'usage exclusif de souleymanethiam25@gmail.com, IP 160.0.177.14.

Type="type" UL & (déprécié en faveur des css) : spécifie l'aspect des

Start="nombre" OL commence la numérotation à la valeur spécifiée.

Value="nombre" LI spécifie le nombre de l'élément.

Compact OL & rendu plus compact de la liste

Le type des listes :

<UL type="disc"> Puces rondes pleines

<UL type="circle"> Puces rondes creuses

Reproduction et diffusion interdite.

<UL type="square"> Puces carrées

<OL type=1> (1,2,3)

<OL type=a> (a,b,c)

<OL type=A> (A,B,C)

<OL type=i> (i,ii,iii)

<OL type=I> (I,II,III)