Cours - HTML

MODULE : INFORMATIQUE APPLIQUÉE
Chapitre 1 :
Le langage HTML
Enseignant : Hatem Sandid
PLAN DU COURS
Introduction
Définition
Structure d’un document
Les titres/Les listes
Fond de page et couleur du texte
La mise en forme du texte
Le lien hypertexte
Les images
Les tableaux
Les frames
Les formulaires 2
Exercice d’application
INTRODUTION
Internet offre un formidable moyen de communication à travers le monde en
interconnectant des millions d'ordinateurs. C’est un moyen d’accès à une masse
indescriptible d’informations, un outil de collaboration permettant l’apprentissage et
aussi le support des compétences de personnes à travers le monde.
Internet offre plusieurs services, parmi lesquels on trouve :
Echanger du courrier et des documents électroniques : en utilisant le

protocole : Simple Mail Transfer Protocol (SMTP).
Transférer des fichiers d'une machine à une autre : en utilisant le protocole

: File Transfer Protocol (FTP).
Participer à des groupes de discussion : en utilisant le protocole :

News Network Transfer Protocol (NNTP).
Accéder à des pages hypertexte et hypermédia : Ce service, nommé World 3

Wide Web ou WWW, permet d'accéder à des sites Web en utilisant le protocole :
Hyper Text Transfer Protocol (HTTP).
INTRODUTION
Un site web est un ensemble de pages Web reliées par des liens hypertextes et gérées par
une seule compagnie, organisation, ou par un individu.
Un site Web est identifié par son adresse, appelée URL. exemple: http://www.isetso.rnu.tn
http:// étant le protocole qui assure l’échange des pages entre les serveurs Web.
www.isetso.rnu.tn étant le Nom de domaine. La page est stockée sur un serveur

web. Elle est repérée sur le réseau Internet par un nom de domaine. A chaque nom
correspond une adresse IP. Les fournisseurs de services Internet (ou providers)
disposent de serveurs DNS pour convertir les noms de domaine en adresses IP.
Une page Web est écrite en langage HTML (Hyper Text Mark-up Language) et peut
contenir du texte, des images (statiques ou animées), des séquences vidéos, du son et des
(hyper)liens. Ces liens permettent de passer d’une page Web à une autre (située
éventuellement à l’autre bout du monde).
Une page web porte un nom et l’extension « .html » ou « .HTML » ou « .htm »

4
Exemple: http://www.isetso.rnu.tn/index.html
Adresse du site Web Nom de la page Web
INTRODUTION
Deux méthodes sont possibles pour créer des fichiers HTML :
Avec un éditeur de texte (ex : Bloc-notes), dans lequel vous devrez tout saisir (les
balises et le texte) ;
Avec un rédacteur de page HTML WYSIWYG (What You See Is What You Get) (ex. :
FrontPage, DreamWeaver, etc.), qui utilise le principe de « drag & drop » pour insérer
des objets dans le document HTML comme un traitement de texte WYSIWYG (ex. :
MS Word) et ajoute donc automatiquement les balises HTML au fur et à mesure de
l’insertion.
Pour visualiser un document HTML, un navigateur web est nécessaire,

ex.:
5
Opera, Safari, Mozilla Firefox, Netscape, Google Chrome, Internet
Explorer
HTML: DÉFINITION
HTML = Hypertext Markup Language – en anglais
(ou langage de balisage d’hypertexte - en français)
Hypertext : contient des liens appelés liens hypertexte
ou hyperlien permettant de passer d’un document à un
autre.
Markup : balisage
Une balise est un délimiteur de texte constitué d’un caractère
ou d’un mot encadré par les signes inférieur et supérieur (<, >).
Les navigateurs Web établissent une correspondance entre une
balise et des instructions de formatage.
Exemple:
6
<STRONG> Ceci est un texte en gras</STRONG>
HTML : STRUCTURE D’UN DOCUMENT
Un document HTML est composé de texte et de commandes (balise ou tag en anglais).
Ces commandes permettent de mettre en forme le texte (Titre, caractère gras,
italique, image, liens, etc...).
Chaque document HTML doit être écrit entre les balises HTML.
Entre les balises HEAD vous devez mettre tout ce qui concerne l'environnement de
votre page, le titre, les couleurs du texte, les liens et autres informations. Ces
éléments n'apparaissent pas directement dans la page.
Les balises TITLE permettent de faire apparaître dans la zone titre de votre
navigateur le texte que vous insérez entre ces balises.
7
Entre les balises BODY vous insérez les éléments qui constitueront votre page, les
informations texte, images, liens, le fond d'écran, les formulaires, etc.
HTML: STRUCTURE D’UN DOCUMENT
8
HTML: RÈGLES DE BALISAGES
o Deux types de balises :
o Autonome <…> (ex. <IMG src="image.jpg">)
o Délimitant une zone
o Balise de début de zone <…> (ex. <HTML>)

o Balise de fin de zone </…> (ex. </HTML>)
o Identifiants de balises non sensibles à la casse : ils peuvent être écrits en minuscules ou en majuscules.
(<BODY> = <Body>)
o Certaines balises sont associées à un ou plusieurs attributs ; Chaque attribut est un paramètre qui fournit des
indications à une balise. Il possède un nom et, très souvent, une valeur à préciser (nom=‘‘valeur’’),
exemple : <IMG src="photo.gif"> où le nom de l’attribut est « src » et sa valeur est « photo.gif »
o N.B. : Les espaces et les retours à la ligne dans un texte tapé ne sont pas interprétés par les navigateurs.
o Commentaires : 
o Les couleurs sont définies :
o soit par le nom de la couleur en anglais : couleur = ‘‘red’’
o soit par 6 chiffres hexadécimaux représentant 2 à 2 les tons de Rouge, de Vert et de Bleu tel que :
9
couleur="#RRVVBB" où R, V et B représentent respectivement un chiffre hexadécimal entre 0 et F
o Codage des caractères spéciaux : é = é à = à ô = ô

CODAGE DES
CARACTÈRES
SPÉCIAUX
CODAGE DES COULEURS
Nom de la Codage Lorsque ces caractères sont utilisés
Aperçu
couleur RVB dans un texte contenu dans une page
aqua #00FFFF
web, il est donc impératif de les coder en
black #000000
HTML, au risque sinon de provoquer une
blue #0000FF
fuchsia #FF00FF
erreur d'affichage dans le navigateur.
gainsboro #DCDCDC
Caractère Code HTML
ghostwhite #F8F8FF " "
gold #FFD700 & &
goldenrod #DAA520 ‹ <
gray #808080 › >
green #008000 & &
greenyellow #ADFF2F espace
honeydew #F0FFF0 ç ç
mediumsea
#3CB371
è è
green
é é 10
yellow #FFFF00
à à
yellowgreen #9ACD32
ù ù
Format Résultat
HTML : BALISES DE TITRE <H1>Taille 1</H1> Taille 1

<H2>Taille 2</H2> Taille 2
Les balises H1, H2, H3, H4, H5 et H6 sont
des styles de mise en forme du texte. <H3>Taille 3</H3> Taille 3
La balise H1 a la valeur la plus importante <H4>Taille 4</H4> Taille 4

(écriture plus large ...) et la balise H6 a la <H5>Taille 5</H5> Taille 5
valeur la moins importante. <H6>Taille 6</H6> Taille 6
<html>
<head> <title> test des titres </title> </head>
<body bgcolor="pink ">
<h1>Bienvenue sur ma page !</h1>
<p>Petite introduction sur ce site.</p>
<h2>Première partie</h2>
<p>Un paragraphe intéressant</p>
<p>Un autre paragraphe.</p>
<h3>Première sous-partie</h3>
<p>Un paragraphe court.</p>
<p>Un autre plus long.</p>
11
etc.
</body>
</html>
BALISES DE STYLE
Les balises de style modifient la typographie du texte. Elles peuvent être imbriquées
dans d'autres balises de style de la même façon qu'on le ferait avec un traitement de
texte.
Balise de style Effet Visuel
<B> ou <strong> Met la police en gras (bold)
<I> Italique (italic)
<S> ou <STRIKE> ou <del> Texte barré

<SAMP> Exemple
<SMALL> Police plus petite
<BIG> Police plus grande

<U> ou <INS> Texte souligné (underline)
<SUB> Texte en Indice
<SUP> Texte en Exposant
<TT> Caractère de machine à écrire
<VAR> Nom d'une variable

<address> écrire une adresse en dessous de la ligne
<CITE> Citation 12
<CODE> Instruction
<DFN> Définition d'instance

MISE EN FORME DU TEXTE
Saut de paragraphe <P> … </P>
A la ligne [Line break] <BR>
Insertion d'une ligne horizontale de séparation <HR> …. </HR>
Centrage [Center] <CENTER>…</CENTER>
Style du texte: < FONT > et </ FONT > pour modifier l'apparence du texte
Taille de caractère [Font size]: de 1 à 7 ou bien de -2 à +4
<FONT SIZE=4>…</FONT>
Couleur du caractère [Font color]:
<FONT COLOR="#$$$$$$ "> … </FONT>
Police [Font face]:
<FONT FACE ="Arial, Times New Roman" > … </FONT>
Texte pré-formaté : <PRE> et </PRE> : PRE affiche le texte contenu dans ses 13
balises tel qu'il est écrit en respectant les espaces, les tabulations et les sauts à la
ligne. N.B. : Il n'est pas possible d'afficher des images à l'intérieur du tag PRE.
DIFFÉRENCE D’AFFICHAGE ENTRE LES NAVIGATEURS
Internet Explorer Opera
Firefox Safari
14
Les couleurs
<HTML>
<HEAD>
<TITLE>Texte en couleurs</TITLE>
</HEAD>
<BODY>
<FONT color="red">Rouge</FONT> <BR>
<FONT color="#FF0000">Rouge</FONT> <BR>
<FONT color="green">Vert</FONT> <BR>
<FONT color="#008000">Vert</FONT> <BR>
<FONT color="blue">Bleu</FONT> <BR>
<FONT color="#0000FF">Bleu</FONT> <BR>
<FONT color="yellow">Jaune</FONT> <BR>
15
<FONT color="#FFFF00">Jaune</FONT> <BR>
</BODY>
</HTML>
Les tailles et les polices
<HTML>
<HEAD>
<TITLE>Taille et police du textes</TITLE>
</HEAD>
<BODY>
<FONT size=7>Taille 7</FONT> <BR>
<FONT size=3>Taille 3 (par défaut)</FONT> <BR>
<BR>
<FONT size="+4">Taille +4</FONT> <BR>
Taille par défaut ( => 3 ) <BR>
<FONT size="-1">Taille -1</FONT> <BR>
<FONT size="-2">Taille -2</FONT> <BR>
<FONT size=4 face="Verdana">Taille 4 en Verdana</FONT> <BR>
<FONT size=3 face="Comic sans MS">Taille 3 en Comic sans MS</FONT> <BR>
<FONT face="Arial, Times New Roman" color="#336699">Taille normal en Arial si 16
la police existe sinon en Times New Roman en couleur #336699</FONT> <BR>
</BODY>
</HTML>
Position, soulignement, forme du texte
<HTML>
<HEAD>
<TITLE>Texte en gras, italique, centré</TITLE>
</HEAD>
<BODY>
<B>texte en gras</B> <BR>
<I>texte en italique</I> <BR>
<U>texte souligné</U> <BR>
<CENTER>texte centre</CENTER> <BR>

<B><CENTER>texte centré en gras</CENTER></B>

<BR>

<B> <CENTER> <FONT color="red" size=2> texte en rouge, gras, centré de taille 2 </FONT> 17
</CENTER> </B> <BR>
</BODY>
</HTML>
MISE EN FORME DU TEXTE : PARAGRAPHE ET RETRAIT
<p> … </p> avec l'attribut "align" : permet de créer un paragraphe avec du texte aligné
soit à gauche ("left"), à droite ("right"), au centre ("center") ou en justifié ("justify").
<blockquote>…</blockquote> : permet de décaler un bloc de texte par rapport au bord

gauche
<HTML>
<HEAD> <TITLE> Paragraphes et retraits</TITLE>
</HEAD> <BODY>
Paragraphes : <BR>
Vous pouvez former des paragraphes si vous le
souhaitez avec des alignements différents
<P align="right">texte aligné à droite</P> <BR>
<P align="center">texte aligné au centre</P> <BR>
<P align="left">texte aligné à gauche</P> <BR>
<P align="justify">texte justifié : Ceci est un texte
justifié suivi de deux lignes vides</P> <BR><br>
retrait de texte : <BR>
18
<BLOCKQUOTE>votre texte</BLOCKQUOTE><br>
</BODY> </HTML>
FOND DE PAGE ET COULEUR DU TEXTE
1. Le fond d’une page : vous pouvez mettre un fond uni en codant la couleur grâce à l'option
BGCOLOR ou bien une image grâce à l'option BACKGROUND.
L'option BGCOLOR : la balise à utiliser est <BODY BGCOLOR =
#nombre_héxadécimal> ; exemple : <BODY BGCOLOR=#808080> ou <BODY
BGCOLOR="red">
N.B. : La couleur peut être aussi définie avec un mot clé précisant le nom d’une couleur en
anglais.
L'option BACKGROUND : la balise à utiliser est <BODY BACKGROUND = "image"> ;
exemple : <BODY BACKGROUND="bgr.jpg">
2. La couleur du texte : comprend plusieurs options, à savoir :
L'option TEXT : cette option permet de positionner la couleur du texte standard (hors lien).
Par défaut la couleur est noire. Syntaxe : <BODY TEXT = "#nombre_héxadécimal">
L'option LINK : cette option permet de positionner la couleur d'un lien ou ancre qui n'a pas
encore été visité. Par défaut la couleur est bleue. Syntaxe :
<BODY LINK = "#nombre_héxadécimal">
N.B. : Les liens permettent de faire la liaison entre les pages web et de naviguer dans un site
web.
L'option VLINK (Visited Link) : cette option permet de positionner la couleur d'un lien ou
ancre qui a déjà été visité. Par défaut la couleur est violette. Syntaxe :
<BODY VLINK = "#nombre_héxadécimal">
L'option ALINK (Active Link) : cette option permet de positionner la couleur 19
d'un lien ou ancre au moment où l'on clique dessus. Par défaut la couleur est rouge. Syntaxe:
<BODY ALINK = "#nombre_héxadécimal">
HTML: LES LISTES
HTML définit 3 types de liste : ordonnée, non ordonnée et de définition.
1. Liste non ordonnée [Unordered list] : <UL>…</UL>

2. Liste ordonnée [Ordered list] : <OL>…</OL>
Elles utilisent toutes les deux des éléments de liste [List items] : <LI>
Exemple :
<H1>Les mois du printemps</H1>

<UL>
<LI> avril
<LI> mai
<LI> juin
</UL>
<H3>Les mois d’automne</H3>
<OL>
<LI> octobre 20
<LI> novembre
<LI> décembre
</OL>
HTML: LES LISTES
3. Liste de définition Conteneur Effet Visuel
<DL>…</DL> : Definition List <dl> article 1
<dt>Terme</dt> définition 1
<DT>…</DT> : Definition Term
<dd>Définition</dd> article 2
<DD>…</DD> : Definition Data
</dl> définition 2
Il existe des attributs spécifiques aux listes
Attribut Valeur Effet Visuel
1 numérotation chiffrée (par défaut)
A numérotation en capitales
TYPE (pour les listes ordonnées) a numérotation en bas de casse
I numérotation en chiffres romains (I, II, III, IV ...)
i numérotation en chiffres romains en bas de casse
circle o puce circulaire
TYPE (pour les listes non-ordonnées) square puce carrée
disc • puce en disque
Exemple : <dl>
<dt>clavier</dt>
<dd>un périphérique d’entrée de l’ordinateur
composé de touches envoyant des instructions à la
machine une fois actionnées.</dd>
21
<dt>écran</dt>
<dd>un périphérique de sortie qui permet la
communication visuelle avec l'utilisateur </dd>
</dl>
HTML: LE LIEN HYPERTEXTE
C’est un texte établissant un lien vers un autre document.
Il permet de faire la liaison entre les pages web et de naviguer
dans un site web.
Trois types de liens existent :
- Les liens internes à un site (utilisation très fréquente des
chemins relatifs car plus court à taper).
- Les liens internes à une page (ou ancre) (=> utilisation
de chemins absolus ou relatifs).
- Les liens externes (uniquement des chemins absolus !)
<a> et </a> : permettent de créer un lien hypertexte.
Son attribut indispensable est "href " : il spécifie
l’emplacement (ou URL «Uniform Resource Locator ») du
document à afficher. Il peut spécifier l'URL d’une image, d'un
fichier ZIP, d'une vidéo MPEG ou tout simplement d'un autre22
document HTML.
SYNTAXE D’UN LIEN
Il faut savoir qu'un lien est tout d'abord composé d'un protocole :
http:\\ est utilisé pour accéder au contenu d’un serveur web
...
mailto: permet d'ouvrir la messagerie du lecteur.
ftp:\\ est utilisé pour accéder au contenu d’un serveur de
transfert de fichiers.
file:/// sert à chercher un fichier sur sa propre machine, sans
pour autant être connecté à l'Internet.
…
Exemple : ajout d’une adresse électronique

<A HREF = "mailto:contact@compagnie.com"> Commentaires </A>
lorsque vous cliquerez sur "Commentaires" une fenêtre vous23
permettant d'envoyer un courrier électronique s'affichera
contenant l'adresse électronique spécifiée après le « mailto ».
SYNTAXE D’UN LIEN
URL absolue et URL relative :
On parle d’URL absolue, c'est lorsque vous indiquez la
totalité de l'adresse du lien.
Les URL relatives sont indiquées par rapport au dossier
contenant le document source.
Si vous établissez un lien vers une page Web n'appartenant pas
à votre site, vous devez spécifier une URL absolue.
En théorie, une URL absolue est beaucoup plus longue à se charger.
On emploiera donc le plus possible des URL relatives.
Exemples :
Pour créer un lien de la page « index.html »vers la page « poisson.html »
En utilisant une URL absolue :
<a href="file:///C:/TI11/Programmation-Web/TP1/poisson/poisson.html">
<h3> poisson </h3></a>
En utilisant une URL relative :
<a href="poisson/poisson.html" ><h3> poisson </h3></a>
Pour créer un lien de la page « poisson.html » vers la page « index.html »

En utilisant une URL absolue :
<a href="file:///C:/TI11/Programmation-Web/TP1/index.html">
<h3> retour à la page d’accueil /h3></a> 24
En utilisant une URL relative :
<a href="../index.html"> Retour à la page d'accueil </a>
HTML: LES LIENS HYPERTEXTES
Lien externe
<HTML>
<HEAD>
<TITLE>Les liens hypertextes</TITLE>
</HEAD>
<BODY>

<BR><BR>
<A href="http:\\www.google.tn"> Lien vers le site google
</A>
<BR><BR><BR>
</BODY> 25
</HTML>
Liens internes (ancres) exemple
On peut créer un signet (ancre) dans une page c'est-à-dire marquer un endroit précis
d'une page pour s'y rendre par hypertexte. Cela se fait grâce à l'attribut NAME ou ID
<HTML>
<HEAD> <TITLE> Les liens hypertextes </TITLE> </HEAD>
<BODY>
<BR><BR>
<A href="#ancre1"> Lien vers l'ancre 1 </A> 
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A name="ancre1"> Texte </A> 

<BR><BR>
Pour finir, on peut très bien accéder à un ancre d'une page située sur un
autre site en utilisant donc une URL suivie d'un ancre.
<A href="http:\\www.un-autre-site.com/repertoire/fichier.html#nom_ancre">
lien vers un ancre sur une page d'un site extérieure </A> 26
</BODY>
</HTML>
Liens internes (ancres) :

on peut marquer un paragraphe avec autre chose que la balise <A>,
c'est la qu'intervient l'attribut commun id détaillé comme suit :
Exemple :
<H2 id="TitrePage"> Les liens </H2>
voici le code permettant d’atteindre le titre du lien ci-dessus :
<A href="#TitrePage"> Aller au titre de la page </A>
Vous l'aurez compris, cliquer sur ce lien aura pour effet de retourner
27
au titre de cette page. Aller au titre de la page
HTML: LES IMAGES
<img> : insère une image dans votre page (N.B. : pas de balise de fin pour l’image.)
syntaxe : <IMG SRC="adr_img" ALIGN="center" ALT="titre_abs" BORDER="bb"

Height="h" Width="w" TITLE="titre_img" VSPACE="vv" HSPACE="hh">
Attribut Valeur Résultat
Felhi, Gallas, Hamed & Kerkeni

(attribut obligatoire) précise le chemin (l’URL ou l’adresse) de
SRC Adr_img
l'image.
Center, right ou left

ALIGN Définit l’alignement de l'image dans la page.
bottom, middle ou top
ALT titre_abs Texte alternatif qui sera affiché si l'image n’est pas trouvée.
bb est un nombre Désigne la taille du bord à afficher autour de l'image (par défaut =
BORDER
entier 0).
HEIGHT h est un nombre entier Définit la hauteur de l'image en pixels.
WIDTH w est un nombre entier Définit la largeur de l'image en pixels.
TITLE titre_img Texte qui s’affiche lorsqu’on passe la souris sur l’image.
vv est un nombre Définit le nombre de pixels d'ajustement entre l'image et le texte

28
VSPACE
entier adjacent verticalement (par défaut = 0).
hh est un nombre Définit le nombre de pixels d'ajustement entre l'image et le texte
HSPACE
entier adjacent horizontalement (par défaut = 0).
HTML: LES IMAGES
<HTML><HEAD> <TITLE> Images </TITLE>
</HEAD><BODY>
Voici une première image sans attribut
particulier
 <BR>

<Center> <IMG src="fleur.jpg" > </Center>
<BR> une image avec un bord de taille 3 : <BR>
<IMG src="fleur.jpg" border=3 align=center>
<BR> Il est souvent utile de préciser la taille de
l'image pour que le navigateur connaisse la
taille de l'emplacement à réserver
<BR> <CENTER>
<IMG src="fleur.jpg" border=0 width=88
height=31>
</CENTER> <BR> Si l'image n'est pas trouvée
par le navigateur, on utilise alt pour un texte
<BR> <CENTER>
<IMG src="papillon.gif" width=88 height=31 29
hspace=20 alt="papillon"> </CENTER>
</BODY></HTML>
LES IMAGES CLIQUABLES OU RÉACTIVES
Une image peut servir d'ancre comme nous l'avons vu mais dans ce cas quelque soit
la partie de l'image sur laquelle vous cliquez vous irez toujours vers une seule
destination.
Cependant, la balise MAP peut vous permettre de définir sur la même image
différentes zones cliquables qui vous renverront vers des destinations variées.
Pour cela, vous devez utiliser l'option USEMAP avec la balise IMG pour indiquer
que vous définissez une image cliquable :
<IMG SRC = "image_cliquable.gif" USEMAP = "#nom_map" >
Ensuite vous devez ouvrir la map "nom_map" en indiquant les différentes

coordonnées des zones cliquables :
<MAP NAME = "nom_map"> Description des zones cliquables </MAP>
Vous devez définir le type des différentes zones cliquables de votre image en 30
utilisant la balise AREA, en indiquant le lien sur lequel cette zone pointe et les
coordonnées définissant l'élément.
EXEMPLE D’IMAGE
RÉACTIVE
Découpons cette image en plusieurs parties :

Le clavier
La souris
L’unité centrale
Le moniteur
<map name="ordinateur">
<area shape="RECT" coords=" 97,81,123,97" href="souris.html" alt="Souris" >
<area shape="CIRCLE" coords=" 56,32,37" href="moniteur.html"
alt="Moniteur" >
<area shape="RECT" coords=" 100,9,147,78" href="uc.html" alt="Unité
centrale" >
<area shape= "RECT" coords=" 4,71,88,95" href="clavier.html" alt="Clavier" >
<area shape="DEFAULT" href="defaut.html">
</map> 31
<IMG SRC="ordinateur.gif" ALT="Figure d’un ordinateur"
USEMAP="#ordinateur">
LES IMAGES CLIQUABLES OU RÉACTIVES
Balise Attribut Valeur Effet Exemple
MAP NAME nom_map <map name="ordinateur">
<AREA shape=rect coords="5,10,20,25">
RECT
Rectangle 
Cercle <AREA shape=circle coords="5,10,5">
CIRCLE (ses coordonnées sont : 
<AREA shape=polygon
Polygone
coords="0,15,5,10,10,15,5,20">
(ses coordonnées sont :

DEFAULT Pour les points non définis
Lien vers l'URL (la page de

HREF URL
destination)
32
"XX,XX,XX, Contient les coordonnées
COORDS
XX" de la zone cliquable.
HTML: LES TABLEAUX
Balises :
<table> et </table> : création d'un tableau.
<tr> (table row) : crée une nouvelle ligne dans le tableau.
<td> (table data) : crée une nouvelle cellule dans un tableau. Cette cellule doit
être contenue dans une ligne et donc une balise "TR" doit être déjà ouverte. Une
cellule peut contenir du texte, des images, etc.
<TH> (table header) : crée une cellule d’en-tête du tableau (gras et centré)
<CAPTION> et </CAPTION> : Titre du tableau.
<TABLE border=1>
<caption> TAB <br> entier </caption>
<TR> <Th> A </Th> <Th> B </Th> </TR>
<TR> <TD> 1 </TD> <TD> 2 </TD> </TR>
<TR> <TD> 3 </TD> <TD> 4 </TD> </TR>
</TABLE>
33
N.B. : pour créer une cellule soit vous utiliser TH soit TD.
HTML: LES TABLEAUX
Les attributs du tableau :

bgcolor : fixe la couleur de fond d’un tableau ou d’une cellule.
border : fixe l’épaisseur du bord du tableau
width : fixe la largeur d'un tableau ou d'une cellule en pixels ou en % (par
rapport à la page).
height : fixe la hauteur d'un tableau ou d'une cellule en pixels ou en % (par
rapport à la page).
align : précise l'alignement sur un axe horizontal du tableau ou du contenu
d’une cellule. (valeur possible : "left" par défaut, "right", "center").
valign : précise l'alignement du contenu des cellules sur un axe vertical.
(valeur possible : "middle", "bottom", "top"). 34
HTML: LES TABLEAUX
"colspan" permet de fusionner des cellules d'une même
ligne. Il faut préciser le nombre de cellules à fusionner.
<TABLE width=60% border=1>

<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR>
<TD width=33%>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR> 35
</TABLE>
HTML: LES TABLEAUX
• "rowspan" permet de faire fusionner des cellules d'une même

colonne. Il faut préciser le nombre de cellules.
<TABLE width=60% border=1>

<TR>
<TD width=33% rowspan=3>cellule 1</TD>
</TR>
<TR>
</TR>
<TR>
<TD width=34%>3</TD> 36
</TR>
</TABLE>
HTML: LES TABLEAUX
"cellpadding" définit l’entourage des cellules ou l’espace entre le bord et le contenu
<TABLE border=2 cellpadding=10>
<TR> <TD>1</TD> <TD>2</TD> </TR>
<TR> <TD>3</TD> <TD>4</TD> </TR>
</TABLE>
"cellspacing" définit l’espace entre les cellules ou l’épaisseur des lignes du quadrillage
<TABLE border=2 cellspacing=10>
<TR> <TD>1</TD> <TD>2</TD> </TR>
<TR> <TD>3</TD> <TD>4</TD> </TR>

37
</TABLE>
FRAME & FRAMESET
Les frames permettent de fragmenter la page du navigateur en plusieurs zones (ou cadres) qui
peuvent contenir des informations différentes.
Les balises:
<FRAMESET> : Début de zone avec des fenêtres
</FRAMESET> : Fin de zone avec des fenêtres
cette balise définit les cadres par leur dimension en pixels ou en pourcentage (%)
Remarque: <FRAMESET> … </FRAMESET> remplace <BODY> … </BODY>
La balise <FRAME> permet de définir un ou plusieurs cadres au sein de la balise <FRAMESET>

<HTML>
<HEAD> </HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="frame1.html" NAME="haut">

<FRAME SRC="frame2.html" NAME="bas">

</FRAMESET> 38
</HTML>
LES ATTRIBUTS DE LA BALISE <FRAMESET>
L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" définit la hauteur
des différentes fenêtres en cas de division horizontale. La hauteur s'exprime
en nombre de pixels ou en % de l’écran (dans ce cas, on veillera à ce que le
total soit égal à100%) ou en * pour désigner le reste ; ex. Rows = ‘‘120, 50%,
*’’
L'attribut COLS="largeur1,largeur2,...,largeurN" définit la largeur des
différentes fenêtres en cas de division verticale. Elle s’exprime comme dans
rows ; ex. Cols = ‘‘120, 50%, *’’
Pour les 2 attributs précédents, il suffit de fixer une seule des valeurs et de
donner à l'autre la valeur *, alors cette dernière s'ajuste automatiquement.
L’attribut FRAMEBORDER : peut prendre les valeurs 1 (ou YES) s’il y a
une bordure) ou 0 (ou NO) s’il n’y a pas de bordure.
L’attribut Border=n avec n une valeur définissant la taille de la bordure
L’attribut Bordercolor ="#nombre_héxadécimal" (ou
=‘‘mot_clé_anglais_d’une_couleur’’) indique la couleur de la bordure 39
L’attribut Framespacing=n avec n une valeur définissant l'espace entre

les cadres.
LES ATTRIBUTS DE LA BALISE <FRAME>
Attribut Valeur Action
Définit l'emplacement de la page à afficher dans le
Src URL
cadre
Définit un nom qui permettra d'afficher un autre
Name "nom" document dans le cadre grâce à l'attribut Target qui
s’utilise avec la balise a href
n est un entier spécifiant
Marginwidth=n Taille des marges latérales
le nombre de pixels
n est un entier spécifiant
Marginheight=n Taille des marges du haut et du bas
le nombre de pixels
YES ou 1
Frameborder Détermine si les cadres auront ou non une bordure
NO ou 0
n est un entier spécifiant Taille de l'espace entre les cadres (uniquement pour
Border=n
le nombre de pixels Netscape)
Interdit à l'utilisateur de redimensionner les cadres
Noresize (Aucune)
(Ce n'est pas la valeur par défaut)
YES
Permet ou non l'affichage d'une barre de défilement 40
Scrolling NO
(Auto laisse le navigateur décider de son utilité)
AUTO
FRAME & FRAMESET
Pour afficher des liens dans un des cadres, il suffit d'utiliser l'attribut TARGET dans la balise
<A HREF …> pour spécifier le nom du cadre qui a été spécifié dans la balise <FRAME> par
l'attribut NAME.
Code de la page « index.html »

<HTML>
<FRAMESET COLS="20%, 80%">
<FRAME src="f1.html" NAME="gauche">
<FRAME src="f2.html" NAME="droite">
</FRAMESET>
</HTML>
Code de la page « f2.html »

<HTML>
<Body>
<A HREF="f3.html" TARGET="gauche">Hello</a>
</Body>
</HTML> 41
Lorsque l’utilisateur clique sur le lien hypertexte « Hello » contenu dans la page «
f2.html », la page « f3.html » remplacera la page « f1.html » dans la zone « gauche »
HTML: ATTRIBUT TARGET DES LIENS
HYPERTEXTES
target : (cible) cet attribut sert à déterminer l'endroit

où sera ouvert le document précisé par l'URL. On s'en
sert surtout dans un site composé de cadres. Sachez
seulement que cet attribut contient le nom de l'endroit
où ouvrir le lien.
Valeurs prédéfinies de l’attribut TARGET
Valeur Action
_self Affiche la cible dans le même cadre que le lien
_parent Affiche la cible dans le cadre de niveau supérieur
_blank Affiche la cible dans une nouvelle fenêtre

42
_top Affiche la cible dans la fenêtre entière du navigateur
A.html B.html C.html
<HTML><BODY> <HTML><BODY> <HTML><BODY>
FRAME & FRAMESET <H1>A</H1> <H1>B</H1> <H1>C</H1>
</BODY></HTML> </BODY></HTML> </BODY></HTML>
Index.html
<frameset rows="*" cols="210,*" frameborder="yes" border="2" >
<frame src="A.html" name="gauche" frameborder="yes" scrolling="NO">
<frameset rows="155,*" cols="*" framespacing="0" frameborder="yes" >
<frame src="B.html" name="tete" frameborder="yes" noresize>
<frame src="C.html" frameborder="yes" name="bien" noresize>
</frameset>
</frameset>
Remarque: On utilise les balises <NOFRAMES> et </NOFRAMES> permettant de spécifier un texte HTML à afficher en cas où le
navigateur ne permet pas d'afficher les frames. Le texte entre les balises <NOFRAMES> et </NOFRAMES> doit donc
contenir les balises <BODY> ... </BODY>.
<HTML>
<FRAMESET COLS="33%, 33%,*">
<FRAME SRC="frame1.html" NAME="gauche">
<FRAME SRC="frame2.html" NAME="milieu">
<FRAME SRC="frame3.html" NAME="droite">
</FRAMESET>
<NOFRAMES>
43
<BODY> Cette page HTML nécessite un navigateur supportant les frames, veuillez nous en excuser. </BODY>
</NOFRAMES>
</HTML>
FORMULAIRES
Les formulaires permettent de générer des zones de "dialogue" avec
le lecteur, ils lui offrent une fiche à remplir.
Ces zones ou champs peuvent être des :

Zones de saisie de texte
Boîtes à cocher
Boutons radio
Menus déroulants
Boutons
…
Les formulaires n'ont aucun intérêt si vous ne pouvez pas récupérer

l'information fournie par le lecteur et ensuite la traiter. C'est
pourquoi les formulaires nécessitent d'être associés à un
programme, par exemple pour interroger une base de données, 44
réaliser une enquête via le web, …
FORMULAIRES: BALISES
Déclaration d’un formulaire <FORM> …</FORM>
Attributs principaux (<FORM Action=… Name=… Target=… Method=… >
ACTION : URL du programme exécutable vers lequel les données saisies sont
envoyés
NAME : nom du formulaire
TARGET : nom de la frame dans laquelle le résultat doit être affiché.
METHOD : commande HTTP à utiliser pour effectuer l’envoi (=POST ou =GET)
Exemple : METHOD="POST" ou METHOD="GET". La première (POST) envoie
les données sans l'adresse indiquée dans l'option ACTION tandis que la deuxième
(GET) envoie aussi l'adresse. Cette option n'est pas obligatoire, par défaut GET sera
positionné.
Remarques :
Toutes les balises HTML (des images, tableaux, …) sont permises entre <FORM >… </FORM>
Des formulaires peuvent être insérés à l’intérieur d’un autre formulaire web.
45
Trois classes de zone de dialogue avec l'utilisateur sont à distinguer :
INPUT, SELECT et TEXTAREA.
LES FORMULAIRES: BALISE INPUT
Déclaration des champs de saisie (exclusivement entre <FORM>…</FORM>)
NAME : nom du champ de saisie (unique à l’intérieur d’un formulaire)
TYPE : type du champ de saisie
Les types possibles sont : CHECKBOX, HIDDEN, IMAGE, PASSWORD, RADIO,
RESET, SUBMIT, TEXT, etc.
A. Le TYPE="CHECKBOX" permet la création de cases à cocher. Lorsque vous

cochez une case, l'autre ne réagit pas. Les cases à cocher sont indépendantes les unes
des autres.
Exemple :
<FORM ACTION="pgm.php">
<INPUT NAME="choix" TYPE="CHECKBOX"> Choix 1 <BR>
<INPUT NAME="choix" TYPE="CHECKBOX"> Choix 2
</FORM>
Avec ‘‘choix’’ le nom de la variable qui référence les données 46
et ‘‘pgm.php’’ le programme qui recevra les données à traiter.
N.B. : L’attribut CHECKED est optionnel et permet d'activer une case à cocher.
B. Le TYPE="RADIO"
Il permet la création d'un élément de saisie sous la forme d'un bouton radio. Les boutons radio
sont liés les uns aux autres par le même nom de variable. Vous ne pouvez faire qu'un choix,
lorsque vous cliquez sur l'un d'eux, qui prend la valeur oui ou non, les autres sont mis à non ou
off.
Vous pouvez, bien évidemment, proposer plus que deux choix.
Remarque : L'attribut VALUE est obligatoire avec le type RADIO, il permet d'initialiser la valeur
de l'élément de saisie.
Exemple :
<INPUT NAME="radio1" TYPE="RADIO" VALUE="1"> oui
<INPUT NAME="radio1" TYPE="RADIO" VALUE="0"> non
</FORM>
Avec ‘‘radio1’’ le nom de la variable qui référence les données et ‘‘pgm.php’’ le programme qui
47
recevra les données à traiter.
N.B. : L’attribut CHECKED est optionnel et permet d'activer un bouton radio.

C. Le TYPE="TEXT" crée une zone de saisie de texte. Ce type a 2 attributs
facultatifs : l’attribut MAXLENGTH qui définit la taille du texte à saisir et l'attribut
SIZE qui définit la taille de la zone du texte qui sera saisi.
D. Le TYPE="RESET" lorsque l'utilisateur clique sur ce bouton, toutes les valeurs

qu'il a saisi seront remplacées par les valeurs par défaut définies grâce à l'attribut
VALUE.
E. Le TYPE="SUBMIT" permet de créer un bouton qui, lorsque l'utilisateur clique

dessus, déclenche l'envoi des données au programme référencé dans le champ ACTION.
Exemple :
<INPUT NAME="texte" TYPE="TEXT" SIZE="20" VALUE="Le texte">
<BR> <INPUT TYPE="SUBMIT" VALUE="Soumettre">
<INPUT TYPE="RESET" VALUE="Effacez">
48
</FORM>
Avec « pgm.php » le programme qui recevra les données à traiter.

et VALUE="Le texte" représente le texte par défaut de la zone de saisie.
ENVOI DES DONNÉES AU SERVEUR WEB (WWW)
Lorsque l’utilisateur appuie sur le bouton SUBMIT, le navigateur :
Construit une chaîne de caractère contenant toutes les données du formulaire
Envoie cette chaîne au programme référencé dans le champ ACTION.
Cette chaîne :
Ensemble de couples séparés par le caractère &
Chaque couple est de la forme : nom de champ= valeur saisie
N.B. : Les espaces sont remplacés par le caractère + 49

E. Le TYPE="FILE" permet d'uploader des fichiers.
F. Le TYPE="PASSWORD" permet la création d'une zone de saisie dans

laquelle les caractères tapés par l'utilisateur sont remplacés par des étoiles, offrant ainsi
une plus grande confidentialité. Les données récupérées par le programme sont, quant
à elles, en clair.
Exemple :
<FORM ACTION="prog.exe" METHOD="POST">
<br> Mot de passe <INPUT TYPE=PASSWORD NAME="pass">
<br> Sélectionner un fichier <INPUT TYPE=FILE NAME="fichier">
<br> <INPUT TYPE=SUBMIT VALUE="Envoi"> <INPUT TYPE=RESET VALUE="Remise à zéro">
</FORM>
50
G. Le TYPE="IMAGE" permet la création d'une image cliquable comme
nous l'avons vu précédemment. Les éléments transmis au programme sont alors les
coordonnées x et y de la zone où a eu lieu le clic. Si la variable se nomme "zone",
le programme recevra zone.x=coord_x et zone.y=coord_y.
Remarque : L’attribut SRC="adresse" est obligatoire avec le TYPE="IMAGE" et
permet d'indiquer le lieu où se trouve l'image à insérer dans le formulaire.
Exemple: <INPUT type="image" name="envoyer" src="logo.jpg">
avec « envoyer » le nom de la variable qui référence les données.
H. Le TYPE="BUTTON" permet la création d’un bouton à associer avec un

traitement javascript ou vbscript. Exemple :
<INPUT TYPE=BUTTON VALUE="Cliquez" onClick="fonctionJavaScript() ">
I. Le TYPE="HIDDEN" permet la création d'un élément de saisie non visible à

l'écran mais son contenu sera transmis au programme. C'est à dire que les attributs 51
name et value sont pris en compte lors du traitement du formulaire.
Exemple: <INPUT type="hidden" name="Sondage" value=100>
EXERCICE D’APPLICATION
Q. : Donner le code
correspondant à la figure ci-
contre ainsi que le résultat de
son envoi avec des données
fictives.
1er cas : envoi avec bouton « envoyer »

<html>
<head> <title> Exemple de HTML </title> </head>
<Body link=blue alink=red vlink=black>
<FORM action="mailto:test@isetkr.rnu.tn" method="post" name="petitsondage">
<H3>Petit sondage...</H3>
<INPUT type="hidden" name="SondageEtudiants" value=23102011>
<br> Login : <INPUT type="text" name="login" maxlength="21">
<br> E-Mail : <INPUT type="text" name="email">
<br> Mot de passe : <INPUT type="password" name="pass" size="10" maxlength="10">
<br> <INPUT type="submit" value="envoyer">
<INPUT type="reset" value="Remise à zéro"><br>
</FORM> Envoi du formulaire par la méthode « POST » Envoi à travers le bouton « envoyer »
</Body> avec les données fictives suivantes : SondageEtudiants=23102011 52
</html> Login = JeSuis21CaracteresMax &login=JeSuis21CaracteresMax
E-Mail = test@isetkr.rnu.tn &email=test%40isetkr.rnu.tn
Mot de passe = 1234567890 &pass=1234567890
2ème cas : envoi avec bouton image « flèche à droite »
<html>
<head> <title> Exemple de HTML </title> </head>
<Body link=blue alink=red vlink=black>
<FORM action="test.php" method="get" name="petitsondage">
<H3>Petit sondage...</H3>
<INPUT type="hidden" name="SondageEtudiants" value=23102011>
Login : <INPUT type="text" name="login" maxlength="21">
<br> E-Mail : <INPUT type="text" name="email">
<br> Mot de passe : <INPUT type="password" name="pass" size="8" maxlength="8">
<br> <INPUT type="image" name="envoiPARimage" src="right.gif">
<INPUT type="reset" value="Remise à zéro"><br>
</FORM> Envoi du formulaire par la méthode «
</Body> GET »
avec les données fictives suivantes :
</html>
Login = essai
E-Mail = essai@isetkr.rnu.tn
Mot de passe = essai
Envoi à travers l’image « flèche à droite »
test.php?SondageEtudiants=23102011
&login=JeSuis21CaracteresMax 53
&email=test%40isetkr.rnu.tn
&pass=12345678
&envoiPARimage.x=45&envoiPARimage.y=19
LES FORMULAIRES: BALISE SELECT
Elle permet de créer des listes avec des menus déroulants.
Son attribut principal est NAME qui permet d'associer un nom de
variable aux données sélectionnées par l'utilisateur.
Son élément principal est OPTION : permet de définir chaque
élément texte du menu. Il précède chaque ligne de texte.
Un attribut facultatif de la balise OPTION peut être ajouté, qui est
‘‘SELECTED’’ et qui permet de définir un élément sélectionné par
défaut. Il n'est pas obligatoire.
Exemple :
<FORM ACTION=“pgm.php” method = “POST”>
<SELECT NAME=“list_choix">
<OPTION value=1 >Premier choix
<OPTION value=2 SELECTED>Deuxième choix
<OPTION value=3 >Troisième choix
<OPTION value=4 >Quatrième choix
<OPTION value=5 >Cinquième choix 54
</SELECT>
</FORM>
LES FORMULAIRES: BALISE SELECT
La balise SELECT permet aussi de créer des listes à ascenseurs.
Dans ce cas, vous devez associer à cette balise d’autres attributs que ceux vu précédemment, à savoir :
SIZE : l'attribut SIZE="chiffre" permet d’afficher à l'écran "chiffre" lignes.
MULTIPLE : cet attribut vous donne la possibilité de sélectionner plusieurs choix dans la liste.
Exemple : comme précédemment, le choix "Deuxième choix" est celui par défaut grâce à l'attribut SELECTED.
- L'attribut MULTIPLE permet de réaliser plusieurs choix dans la liste. Sélectionner votre premier choix,
ensuite, cliquer sur la combinaison « CTRL + un autre choix » si vous voulez sélectionner ce dernier choix en
plus ou bien l’éliminer.
- L’attribut « Size = 3 » permet d’afficher 3 lignes à l’écran.
<FORM ACTION=“pgm.php” method = “POST”>
<SELECT NAME=“list_choix" SIZE="3" MULTIPLE>
<OPTION value=1 >Premier choix
<OPTION value=2 SELECTED>Deuxième choix
<OPTION value=3 >Troisième choix
<OPTION value=4 >Quatrième choix
<OPTION value=5 >Cinquième choix 55
</SELECT>
</FORM>
LES FORMULAIRES: BALISE TEXTAREA
Cette balise permet de créer une zone de saisie de texte sous forme
de bloc. La zone de saisie est délimitée par les attributs ROWS
(lignes) et COLS (colonnes).
Si vous entrez un texte plus long ou plus large que la zone de saisie,
cette dernière positionnera alors des ascenseurs pour vous déplacer.
Le texte compris entre les balises <TEXTAREA> et </TEXTAREA>
sera affiché dans la zone de saisie.
Exemple :
<FORM ACTION=“pgm.php” method =“POST”>
<TEXTAREA NAME="commentaire" COLS="30" ROWS="5">
Entrez votre texte
</TEXTAREA>
56
</FORM>
57
LES FORMULAIRES
Q. : Donner le code correspondant à la figure ci-contre ainsi que le
résultat de son envoi avec des données fictives.
58
<HTML> <head> <title> Exemple de HTML </title> </head> <BODY>
<FORM action="mailto:test@isetks.rnu.tn" method="post" name="petitsondage">
<H3> Petit sondage... </H3>
<INPUT type="hidden" name="SondageLoisirs" value=10122011>
<TABLE> <TR> <TD> <PRE>Nom et Prénom :
<INPUT type="text" name="Nom" maxlength="25">
Votre image : <INPUT type="file" name="photo"> </PRE> </TD> </table>
Votre langage préféré en programmation :
<INPUT type="checkbox" name="langage" value="VB">Visual Basic
<INPUT type="checkbox" name="langage" value="P">Turbo Pascal
<INPUT type="checkbox" name="langage" value="D">Delphi
<INPUT type="checkbox" name="langage" value="C" checked>C++
<br> Quel sont vos activités de loisirs ? <BR>
<SELECT name="loisirs" multiple>
<OPTION value="Natation">Natation</OPTION>
<OPTION value="Lecture" selected>Lecture</OPTION>
<OPTION value="Tennis">Tennis</OPTION>
<OPTION value="Web" >Navigation Web</OPTION>
</SELECT>
<br> Commentaires <br>
<TEXTAREA name="comments" cols="65" rows="5"> </TEXTAREA> <br>
59
<INPUT type="submit" value="envoyer">
<INPUT type="reset" value="Remise à zéro">
</FORM> </BODY> </HTML>

Cours - HTML

Transféré par

Informations du document

Description :

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é ?

Description :

Droits d'auteur :

Formats disponibles

Cours - HTML

Transféré par

Description :

Droits d'auteur :

Formats disponibles

MODULE : INFORMATIQUE APPLIQUÉE

Internet offre plusieurs services, parmi lesquels on trouve :

Echanger du courrier et des documents électroniques : en utilisant le

Transférer des fichiers d'une machine à une autre : en utilisant le protocole

Participer à des groupes de discussion : en utilisant le protocole :

Accéder à des pages hypertexte et hypermédia : Ce service, nommé World 3

www.isetso.rnu.tn étant le Nom de domaine. La page est stockée sur un serveur

Une page web porte un nom et l’extension « .html » ou « .HTML » ou « .htm »

Pour visualiser un document HTML, un navigateur web est nécessaire,

o Balise de début de zone <…> (ex. <HTML>)

o Commentaires :

o Les couleurs sont définies :

o soit par le nom de la couleur en anglais : couleur = ‘‘red’’

o Codage des caractères spéciaux : é = &eacute; à = &agrave; ô = &ocirc;

HTML : BALISES DE TITRE <H1>Taille 1</H1> Taille 1

La balise H1 a la valeur la plus importante <H4>Taille 4</H4> Taille 4

<I> Italique (italic)

<S> ou <STRIKE> ou <del> Texte barré

<BIG> Police plus grande

<SUP> Texte en Exposant

<TT> Caractère de machine à écrire

<VAR> Nom d'une variable

<DFN> Définition d'instance

Insertion d'une ligne horizontale de séparation <HR> …. </HR>

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

<blockquote>…</blockquote> : permet de décaler un bloc de texte par rapport au bord

1. Liste non ordonnée [Unordered list] : <UL>…</UL>

<H1>Les mois du printemps</H1>

Exemple : ajout d’une adresse électronique

Pour créer un lien de la page « poisson.html » vers la page « index.html »

<A name="ancre1"> Texte </A>

Liens internes (ancres) :

voici le code permettant d’atteindre le titre du lien ci-dessus :

<A href="#TitrePage"> Aller au titre de la page </A>

syntaxe : <IMG SRC="adr_img" ALIGN="center" ALT="titre_abs" BORDER="bb"

Attribut Valeur Résultat

Felhi, Gallas, Hamed & Kerkeni

Center, right ou left

WIDTH w est un nombre entier Définit la largeur de l'image en pixels.

vv est un nombre Définit le nombre de pixels d'ajustement entre l'image et le texte

Felhi, Gallas, Hamed & Kerkeni

<IMG SRC = "image_cliquable.gif" USEMAP = "#nom_map" >

Ensuite vous devez ouvrir la map "nom_map" en indiquant les différentes

<MAP NAME = "nom_map"> Description des zones cliquables </MAP>

Découpons cette image en plusieurs parties :

Lien vers l'URL (la page de

Les attributs du tableau :

ligne. Il faut préciser le nombre de cellules à fusionner.

<TABLE width=60% border=1>

• "rowspan" permet de faire fusionner des cellules d'une même

<TABLE width=60% border=1>

"cellpadding" définit l’entourage des cellules ou l’espace entre le bord et le contenu

<TABLE border=2 cellpadding=10>

<TR> <TD>1</TD> <TD>2</TD> </TR>

<TR> <TD>3</TD> <TD>4</TD> </TR>

<TABLE border=2 cellspacing=10>

<TR> <TD>1</TD> <TD>2</TD> </TR>

<TR> <TD>3</TD> <TD>4</TD> </TR>

Remarque: <FRAMESET> … </FRAMESET> remplace <BODY> … </BODY>

La balise <FRAME> permet de définir un ou plusieurs cadres au sein de la balise <FRAMESET>

L’attribut Framespacing=n avec n une valeur définissant l'espace entre

o Codage des caractères spéciaux : é = é à = à ô = ô