Université Hassane 1 Settat Faculté Polydisciplinaire Khouribga

Département : SEG

Semestre 3

Elément : Informatique Appliquée 2

Chapitre 3 : Technologie Web

Année Universitaire : 2013/2014

1
 1. Introduction :
Le terme « web » désigne le service internet permettant de naviguer à travers des pages web.
Le protocole utilisé pour ce type de communication est le protocole HTTP (HyperText
Transfer Protocol), ce qui explique le fait que vous saisissiez des URL commençant par
http://.
Le protocole HTTP en est actuellement à sa version 1.1 (spécifié par le consortium W3C).
Désormais, le protocole HTTPS (protocole HTTP sécurisé) est de plus en plus utilisé avec
l'utilisation de systèmes de commerce électronique, car il s'agit d'un protocole sécurisé
permettant de chiffrer les requêtes échangées entre le navigateur et le serveur.

2. Qu’est ce qu’un site web :

Un site web (aussi appelé site internet ou page perso dans le cas d'un site internet à but
personnel) est un ensemble de fichiers HTML stockés sur un ordinateur connecté en
permanence à internet et hébergeant les pages web (on parle généralement de serveur car cet
ordinateur possède un logiciel permettant de servir les pages web, il s'agit bien évidemment
d'un serveur web).

2.1 catégories de sites web :

Plusieurs catégories de sites web sont habituellement définies, selon le but poursuivi :

 Les sites vitrine (appelés également sites plaquette ou site identité) sont des sites dont
l'objectif est de mettre en avant l'image de marque de la société, en présentant par
exemple ses produits ou ses services ;

 Les sites catalogue sont des sites visant à présenter l'offre de l'entreprise ;

 Les sites d'information sont des sites fournissant une information particulière à un
type d'internautes ;

 Les sites marchands sont des sites vendant directement des produits aux internautes
et permettant éventuellement de payer en ligne ;

 Les sites institutionnels sont des sites présentant l'organisation et ses valeurs. Ce type
de site décrit généralement l'activité de l'organisation, des chiffres clés et donne les
informations nécessaires aux clients ou aux bénéficiaires ;

 Les sites personnels (parfois pages perso) sont des sites réalisés par des particuliers à
titre de loisir, le plus souvent par passion pour un sujet ou une discipline ;

 Les sites communautaires sont des sites réunissant des internautes autour d'un intérêt
commun.

 Les sites intranet sont des sites accessibles de l'intérieur d'une entreprise ou d'une
direction, ayant pour objet la mise à disposition et le partage d'informations
professionnelles.

2
 2.2 Conception :

La conception du site web est ainsi une phase essentielle du projet, dans laquelle une réflexion
globale est menée dans un premier temps sur les objectifs du site et la cible potentielle, et,
dans un second temps, sur la structure, l'ergonomie et la navigation.

Cahier des charges

 L'objet principal de la phase de conception est d'analyser l'ensemble des besoins, puis
d'imaginer des contextes d'utilisation. L'analyse des besoins comporte ainsi deux
volets :

 Les besoins de l'organisation, correspondant à une stratégie d'objectifs.

 Les besoins des utilisateurs, correspondant à une stratégie de cible.

2.3 Réalisation :

 La réalisation du site concerne la création des pages web et des éléments graphiques.
La création des pages web consiste à créer des fichiers HTML. Il existe deux façons
de créer ce type de fichier:

 En éditant les fichiers HTML « à la main », c'est-à-dire en saisissant le code HTML

dans un fichier texte à l'aide d'un simple éditeur de texte. Cette solution est la plus
fastidieuse (malgré la relative simplicité du langage HTML), mais reste toutefois la
meilleure façon d'apprendre à réaliser un site, de comprendre comment celui-ci
fonctionne, et d'être ainsi en mesure de créer un code optimisé et propre.

 En Utilisant un éditeur HTML WYSIWYG (What You See Is What You Get,
traduisez Ce que vous voyez est ce que vous obtenez). Il s'agit d'un logiciel permettant
de créer des pages web visuellement en plaçant des objets et des contrôles. Le logiciel
se charge de générer le code HTML automatiquement. Il s'agit d'une solution très
pratique pour créer des pages web, car la complexité est en grande partie masquée.
Cette méthode peut s'avèrer très ennuyeuse si l'éditeur ne permet pas de réaliser ce que
l'utilisateur souhaite. Une connaissance du langage HTML est néanmoins souhaitable
afin de pouvoir maîtriser les options d'édition avancées du logiciel, permettant
notamment de modifier manuellement des attributs de style.

 D'autre part, un site internet convivial doit contenir des images. Un logiciel de dessin
sera nécessaire afin d'égayer le site avec des images (au format GIF, JPG ou PNG).

2.4 Hébergement

 Une société mettant à disposition un serveur web connecté en permanence à internet

est appelée hébergeur et offre un service appelé hébergement. On distingue deux
principales catégories d'hébergeurs:

 les hébergeurs gratuits. Ils prêtent gratuitement un espace disque sur un serveur pour
créer vos pages web. Ce type de service est généralement totalement gratuit. Ils
3
 gagnent de l'argent soit avec un espace publicitaire sur votre site (ce procédé se fait de
plus en plus rare), soit uniquement grâce au trafic sur leur propre site.

 les hébergeurs professionnels. Ce type d'hébergement garantit un service de qualité

(bande passante) et de sécurité (sécurité des données et assurance d'un nombre de
pannes réduit). Il s'avère assez indispensable dans le cas d'un site à trafic important
(plus de 1000 visiteurs par jour) et permet l'achat d'un nom de domaine.

3. L’Ergonomie des sites web :

L'ergonomie est l'utilisation de connaissances scientifiques relatives à l'homme (psychologie,
physiologie, médecine) dans le but d'améliorer son environnement de travail. L'ergonomie se
caractérise généralement selon deux composantes :

 L'efficacité, consistant à adopter des solutions appropriées d'utilisation d'un produit,

au-delà du bon sens du concepteur ;
 L'utilisabilité, marquant l'adéquation aux capacités de l'utilisateur. Elle se décline en
Le confort d'utilisation, consistant à réduire au maximum la fatigue physique et
nerveuse. La sécurité, consistant à choisir des solutions adéquates pour protéger
l'utilisateur.

Appliquée au domaine du web, l'ergonomie d'un site web peut être définie par sa capacité à
répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.

La principale difficulté que tente de lever l'ergonomie est la diversité des profils des visiteurs.
Les critères suivants sont généralement déterminant pour un site web :

 attentes de l'utilisateur : tous les visiteurs du site ne recherchent pas nécessairement la

même information ou n'ont pas nécessairement les mêmes exigences en terme de
graphisme.

 habitudes de l'utilisateur : elles correspondent à des comportements acquis.

 âge de l'utilisateur : il caractérise en général la capacité d'adaptation de l'utilisateur et

sa rapidité de navigation.

 équipements : il s'agit d'une des difficultés majeures. En effet, l'affichage du site

pourra varier d'un équipement à l'autre, en particulier selon le navigateur et la
résolution d'affichage.

 niveau de connaissances : tous les visiteurs du site ne sont pas nécessairement des as
de l'informatique. L'ergonomie du site doit être pensée pour l'utilisateur le moins
expérimenté.

4
3.1 Critères d’ergonomie :

5
6
 3.2 Structuration du site web :

La structuration du site web consiste à bâtir l'architecture globale du site web en organisant
les différentes informations.

Il s'agit dans un premier temps de faire l'inventaire des contenus du site web et de les
regrouper par thématique afin de constituer des rubriques, on parle alors de rubriquage.

Dès lors que les principales rubriques sont identifiées (on veillera à ne pas dépasser une
dizaine de rubriques principales), il faut alors déterminer leur organisation et leur découpage
en sous-rubriques. La plupart du temps la structuration du site peut se représenter sous la
forme d'une arborescence dont la racine est la page d'accueil :

7
 3.3 Classiques :
 Certaines caractéristiques se retrouvent généralement d'un site web à l'autre :
 Logo du site web en haut à gauche. Un clic sur ce logo conduit directement à la page
d'accueil du site ;
 Lien vers la page d'accueil présent sur chaque page du site ;

Eléments de navigation présents sur chaque page afin de permettre à l'utilisateur de se situer
dans le site et de revenir facilement à la rubrique principale.

4. Langage HTML :
4.1 Définition :

HTML (Hyper Text MarkUp Language ) est d'un langage de description (et non pas d'un
langage de programmation) qui va nous permettre de décrire l'aspect d'un document, d'y
inclure des informations variées (textes, images, sons, animations etc.) et d'établir des
relations cohérentes entre ces informations grâce aux liens hypertextes.

4.2 Types des pages :

 les pages statiques sont adéquates pour présenter une information pérenne.

Exemple : présentation d'une société ou d'un organisme, page de contact, présentation

d'un produit ou d'un service, conditions générales de vente...

 les pages dynamiques se justifient quand des modifications fréquentes doivent être
effectuées, typiquement mensuelles, hebdomadaires ou quotidiennes.

Exemple : les news, les annonces de recrutement, la liste des points de vente, un blog, les
pages produits d'un site marchand.

8
 4.3 HTML : Un langage à balises

 La description d'un document HTML passe par l'utilisation de BALISES (ou "TAGS"
en anglais). Une balise est

 délimitée par les signes "<" et ">" entre lesquels figure le nom de la balise.

 La première est appelée "balise d'ouverture" et la seconde "balise de fermeture". La

balise de fermeture est précédé du caractère /) :

Ainsi les balises <b> et </b> permettent de mettre en gras le texte qu'elles encadrent

HTML utilise deux types de balises :

 Autonome: il s'agit des balises monolithiques entre < et > comme <br> (retour à la
ligne).

 Conteneur: ce sont les balises possédant un début entre < et >, et une fin entre </ et >
comme <U>...</U>.

Certaines balises sont associées à un ou plusieurs attributs. Ces derniers précisent une autre
action à exécuter par le navigateur. Chaque attribut à un identifiant et une valeur (entre "" et
après =), par exemple : <IMG SRC= "photo.gif">

4.4 Notion de document HTML

Une page HTML est un simple fichier texte contenant des balises HTML. Par convention
l'extension donnée à une page HTML est .htm ou .html mais une page web peut
potentiellement porter n'importe quelle extension notamment .php, .php3 ou .php4 pour une
page générée dynamiquement en PHP.

Pour créer et visualiser de pages HTML on a besoin d'au moins :

 Un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad++ ou

tout autre éditeur équivalent.

 Un navigateur : Microsoft Internet Explorer et Netscape Navigator, FireFox, Google

Chrome ou autre.

Les fichiers HTML doivent être enregistrés avec l'extension .html ou .htm.

9
4.5 Les balises de structure

Une page HTML est un fichier texte commençant par la balise <HTML> et finissant par la
balise </HTML>. Elle contient également un en-tête décrivant le titre de la page, puis un
corps dans lequel se trouve le contenu de la page.

 L'en-tête est délimité par les balises <HEAD> et </HEAD>.

 Le titre de la page est délimité par les balises <TITLE> et </TITLE>

 Le corps est délimité par les balises <BODY> et </BODY>.

 Ainsi la page HTML minimum peut être représentée comme suit :

La ligne suivante doit également être ajoutée en prologue pour indiquer le type de document.

Elle fait ainsi référence à la norme HTML, afin de spécifier le standard et la version utilisée
pour le codage de la page en HTML.

10
4.6 Codage des caractères spéciaux

Par défaut la norme HTML code les caractères sur 7 bits, ce qui donne un alphabet assez
pauvre, puisque par défaut les caractères accentués ne sont pas possible.

Il existe alors deux méthodes pour rendre accessible depuis tous les pays et tous les
navigateurs, les caractères spéciaux dont raffole par exemple la langue française.

 La plus simple et celle recommandé, consiste à étendre le jeu de caractère en ajoutant

dans le header du fichier HTML les informations de contenu suivantes :

ISO-8859-1 étant le code ISO de la française, il devient alors possible d'utiliser normalement
notre alphabet, qui sera alors codés sur 8 bits.

 La seconde consiste à remplacer les caractères spéciaux par leur équivalant en code
HTM. voici donc quelques caractères que l'on rencontre fréquemment :

Caractère Code HTML

‘’ &quot;

espace &nbsp;

ç &ccedil;

è &egrave;

é &eacute;

ê &ecirc;

<BODY>...</BODY> : Contient l'ensemble du contenu et des balises qui constituent le corps

du document.

 Syntaxe: <BODY Bgcolor="couleur d'arrière-plan" Background="URL de l'image

d'arrière-plan" Link="couleur des liens non visités" VLink="couleur des liens visités"
ALink="couleur des liens activés" Text="couleur du texte" >

11
 Corps du document

</BODY>

Chaque attribut de couleur peut prendre pour valeur l'un des 16 noms de couleurs réservés:
Black, White, Aqua, Silver, Gray, Maroon, Red, Purple, Fuschia, Green, Lime, Olive, Yellow,
Navy, Blue et Teal, ou un nombre de six chiffres hexadécimaux codant les intensité de RVB

(exemple : Blue=#0000FF).

 Exemple :

<BODY Bgcolor="fuschia“ Text="Maroon">

Contenu et code HTML du corps de document…

</BODY>

Remarque : Les commentaires :

Des balises spéciales permettent d'insérer des commentaires dans le code HTML

4.7 Balises de formatage et mise en page :

Ces balises permettent d'utiliser divers attributs de police, de style et de mise en forme.

 <B>...</B> : Affiche le texte en gras. <B> Sommaire </B>

 <I>...</I> : Affiche le texte en italique.

 <U>...</U> : Affiche le texte en souligné.

 <S>...</S>, <STRIKE>...</STRIKE> : Affiche le texte en barré (barré).

 <SUB>...</SUB> : Affiche le texte en indice.

12
  <SUP>...</SUP> : Affiche le texte en exposant.

 <Hn>...</Hn> où 1 <n <6 : Etablit une hiérarchie entre les niveaux de titre du
document. La taille du caractère décroît pour chaque niveau de titre, <H1> étant le
plus élevé. Les titres s'affichent en gras.

Syntaxe:

<Hn ALIGN = "LEFT/RIGHT/CENTER/JUSTIFY"> texte </Hn> Où n=1, 2,

3, 4, 5 ou 6.

 <BR> : Insère un saut de ligne dans le document. Les retours chariot dans le code
HTML n'étant pas interprétés par le navigateur, les sauts de lignes doivent être alors
exprimés explicitement par la balise <BR>.

 <CENTER>...</CENTER> : Centre tous les textes et les éléments contenus dans la

balise

 <DIV>...</DIV> : Applique un alignement spécial à une partie du document.

Syntaxe :

<DIV ALIGN = "LEFT/RIGHT/CENTER/JUSTIFY">...</DIV>

L'attribut ALIGN détermine l'alignement du texte ou des éléments inclus entre <DIV> et
</DIV>. Il peut prendre les valeurs LEFT, RIGHT, CENTER ou JUSTIFY.

 <HR> : Insère une ligne horizontale. Les lignes horizontales permettent de scinder la
page en plusieurs sections.

Syntaxe:

<HR ALIGN="alignement" NOSHADE SIZE=épaisseur WIDTH=longueur>

ALIGN : spécifie l'alignement de la ligne. Il prend les valeurs LEFT, RIGHT ou CENTER
qui est la valeur par défaut. Il n'a d'effet que lorsque la longueur de la ligne est inférieure à la
largeur de la page.

NOSHADE: Supprime l'ombrage 3D et n'affiche qu'une ligne simple.

SIZE: Spécifie l'épaisseur (en pixels) de la ligne.

WIDTH: spécifie la largeur de la ligne. Il peut prendre une valeur en pixels ou en

pourcentage de la largeur de la page. Il est recommandé d'utiliser une valeur en pourcentage
car on ne peut jamais connaître d'avance la taille d'écran du visiteur.

 <BASEFONT> : Définit les propriétés de référence du texte (taille, couleur et police).

On préfère aujourd'hui utiliser les feuilles de style.

13
Syntaxe :

<BASEFONT SIZE= taille COLOR= "couleur" FACE ="liste de polices">

SIZE : prend pour valeur un entier compris entre 1 et 7. La valeur par défaut est 3.

COLOR : prend pour valeur le nom d'une couleur ou un code hexadécimal RVB. La couleur
par défaut est le noir.

FACE : prend pour valeur une liste de polices dans lesquelles le texte sera affiché. Le
navigateur utilise la première police disponible. Si aucune des polices n'est disponible le
navigateur utilise sa propre police par défaut.

 <P>...</P> : Définit un paragraphe.

Syntaxe:

<P ALIGN= "alignement">

Paragraphe

</P>

ALIGN : définit l'alignement du paragraphe. Les valeurs possibles sont LEFT, RIGHT,
CENTER et JUSTIFY.

 <PRE>...</PRE> : Indique au navigateur qu'il faut afficher le texte dans une police à
pas fixe et prendre en compte les espaces, les tabulations et les retours chariot inclus
entre <PRE> et </PRE>.

Syntaxe:

<PRE WIDTH= largeur maximale>

Texte

</PRE>

WIDTH : prend pour valeur le nombre de caractères contenu dans la ligne la plus longue du
bloc.

4.8 Balises de listes

Les listes font partie des techniques de mise en forme. Mais leur variété justifie que les balises
de listes soient traitées dans une section à part.

Il existe deux types de listes :

 Listes numérotées <UL>

 Listes à puces <OL>

14
  <LI> texte </LI> : Définit un élément de liste.

Exemple:

<LI> Rabat</LI>

<LI> Casablanca</LI>

<LI> Agadir</LI>

 Remarque:

Bien que <LI> soit une balise conteneur (avec un début et une fin), on l'emploie souvent de
façon autonome (sans </LI>).

 <OL> texte </OL> : Formate une liste numérotée.

Syntaxe :

<OL TYPE="1/A/a/I/i" START= "valeur initiale" COMPACT>

<LI> texte </LI>
<LI> texte </LI>
<LI> texte </LI>
…
</OL>

TYPE : Peut prendre les valeurs suivantes:

1: pour les chiffres (1, 2, 3, …).

A: pour les lettres capitales, dans l'ordre alphabétiques (A, B, C, …).

a: pour les lettres minuscule, dans l'ordre alphabétiques (a, b, c, …).

I: pour les chiffres romains en capitales (I, II, III, IV, …).

i: pour les chiffres romains en minuscules (i, ii, iii, iv, …).

START : Spécifie la valeur initiale (1 par défaut). Par exemple, en donnant à START la
valeur 3 et à TYPE la valeur I, on obtient une liste dont la numérotation commence à III.

COMPACT : Indique au navigateur de réduire au maximum l'interlignage des éléments.

 Exemple:

Plan :

<OL TYPE="A">

<LI> HTML </LI>

<LI> JAVASCRIPT </LI>

15
<LI> Active Server Pages (ASP) </LI>

</OL>

 <UL>...</UL> : Formate une liste à puces.

Syntaxe :

<UL TYPE="DISC / SQUARE / CIRCLE" COMPACT>

<LI> texte </LI>

<LI> texte </LI>

<LI> texte </LI>

</UL>

TYPE : Spécifie le type de puces. Cet attribut est particulièrement utile dans le cas de listes à
puces imbriquées. Les valeurs possibles pour TYPE sont :

DISC : cercle avec fond.

SQUARE : carré avec fond.

CIRCLE : cercle sans fond.

COMPACT : A la même fonction que dans <OL>.

 Exemple:

Navigateurs :

<UL TYPE= "SQUARE">

<LI> Netscape Communicator </LI>

<LI> Microsoft Internet Explorer </LI>

<LI> Mozilla </LI>

</UL>

4.9 Balises d’hyperliens

Les liens : HTML (HyperText Markup Language) est un langage hypertexte (et
hypergraphique) qui permet en cliquant sur un mot, généralement souligné (ou une image) de
passer:

 vers un autre endroit du document.

 vers un autre fichier HTML situé sur votre ordinateur.

16
  vers un autre fichier HTML situé sur le Web.

Pour spécifier un lien on utilise la balise <A> dont la syntaxe simplifiée est :

<A HREF="URL ou adresse"> texte et/ou image </A>

Selon la valeur de l'attribut HREF on peut dégager trois types de lien:

a. Lien externe : Permet d'accéder à un autre ordinateur situé sur le réseau Internet en
utilisant son adresse ou URL (Universal Ressource Locator). Ce sont les adresses du type :

 http://serveur/chemin.../fichier : Pour accéder à des pages Web

 ftp://serveur/chemin.../fichier : Pour faire un transfert de fichiers

 mailto:utilisateur@hôte : Pour envoyer un mail

Exemples:

<A HREF=" http://www.fpk.ac.ma/ ">Faculté polydisciplinaire de Khouribga</A>

<A HREF="mailto : hassan@gmail.com" > Pr. Hassan </A>

b. Lien local : Permet de charger un fichier HTML situé dans le même répertoire que le
fichier contenant le lien (fichier appelant). L'adresse du lien sera alors tout simplement:
fichier.html

Exemple:

<A HREF="info.html">Pour informations cliquer ici </A>

c. Lien mixte: C'est un lien vers un fichier situé à un autre endroit de votre ordinateur, et
donc non situé dans le répertoire de votre site (contenant le fichier appelant). L'adresse
prendra la forme : file:///lecteur:/répertoire/fichier.htm (en adressage absolu).

Exemples :

<A HREF="file:///c:/cours/cours1.html" > Cours n°1</A>

17
4.10 Les images

Sans images, le Web n'aurait pas sans doute connu son succès actuel. Le visiteur est souvent
attiré par le contenu graphique. Le placement d'une image sur une page Web est très simple, il
suffit pour cela d'utiliser une seule balise HTML. Les nombreux attributs que cette balise peut
contenir donnent un contrôle très précis de l'image insérée.

Mais avant d'insérer une image sur une page Web, il faut:

 Cerner l'idée à exprimer.

 Trouver l'image qui l'exprime le mieux.

 Déterminer le format le plus appropriée (GIF, JPEG)

Généralement, il y a quatre types d'utilisations des images sur des pages WEB:

 Les photos de personnes, de produits, de lieux, …

 Les bandeaux, et les logotypes.

 Les boutons ou icônes.

 Les textures d'arrière-plan ou papiers peints qui forment le fond des pages.

a. La balise <IMG>

Cette balise permet de placer une image sur une page Web.

 Syntaxe de <IMG> :

<IMG SRC= "URL du fichier image" WIDTH= largeur HEIGHT= hauteur ALT="texte
de remplacement" BORDER= épaisseur du cadre ALIGN= "TOP/ MIDDLE/ BOTTOM/
LEFT/ RIGHT"

HSPACE= espacement horizontal VSPACE= espacement vertical>

Attributs indispensables :

Techniquement, SRC est le seul attribut obligatoire dans une balise <IMG>, mais on peut
considérer comme indispensables les attributs suivants :

 HEIGHT et WIDTH

 ALT

Une balise <IMG> devrait ressembler à cela :

<IMG SRC="URL du fichier graphique" ALT="texte de remplacement" WIDTH= largeur

en pixels HEIGHT= hauteur en pixels >

18
  Exemple :

<IMG SRC="terre.jpg" ALT= "la terre tourne" WIDTH=50 HEIGHT=60>

Les autres attributs :

 BORDER : Définit l'épaisseur du cadre autour de l'image. Par défaut BORDER=0 ce

qui provoque un affichage de l'image sans cadre.

Exemple :

<IMG SRC="terre.gif" ALT="la terre tourne" WIDTH= 50 HEIGHT= 60

BORDER=5>

 HSPACE et VSPACE: Définissent l'espace qui sera laissé autour de l'image ce qui
permet de la placer mieux et disposer sur la page. HSPACE prend pour valeur le
nombre de pixels qui seront réservés à droite et à gauche de l'image. VSPACE prend
pour valeur le nombre de pixels qui seront réservés en haut et en bas.

Exemple:

<IMG SRC="terre.gif" ALT="la terre tourne" WIDTH=50 HEIGHT=60 HSPACE=10

VSPACE=10>

 ALIGN: Gère l'habillage de l'image par le texte et prend les valeurs indiquées dans le
tableau ci-dessous. Les valeurs TOP, MIDDLE et BOTTOM fixent l'alignement du
texte adjacent par rapport à l'image. LEFT et RIGHT aligne l'image sur la marge de
gauche ou la marge de droite.

19
Les valeurs LEFT et RIGHT permettent l'habillage de l'image par le texte, ce qui donne des
mises en pages créatives.

Pour centrer une image, il faut utiliser la balise <CENTER> ou la balise <DIV> :

 Exemple : Comment centrer une image

<DIV ALIGN="CENTER"><IMG SRC="terre.gif" WIDTH= 50 HEIGHT=

60></DIV>

4.11 Les tableaux

Les tableaux ont été initialement destinés à la présentation des données en colonnes.
Aujourd'hui, ils sont principalement utilisés pour l'élaboration de mises en page complexes.
Un tableau est composé d’un ensemble de lignes, et chaque ligne est composée par des
cellules.

En résumé, on a:
 Les cellules sont les éléments constituant un tableau. Elles contiennent soit des
données, soit des entêtes de colonnes.

 Les cellules sont ordonnées en lignes.

 Les lignes composent le tableau.

4.11.1 balises de tableaux
Pour créer un tableau en HTML, on utilise quatre balises : <TABLE>, <TR>, <TH> et
<TD>.
La syntaxe de base d'un tableau est :

20
  Règle à respecter :
Toutes les balises de tableaux (<TR>...</TR>, <TH>...</TH> et <TD>...</TD>) doivent
apparaître entre les balises <TABLE> et </TABLE>. Toute balise de tableau placée à
l'extérieur de ces balises sera ignorée.

 Exemple de tableau :

21
Commentaires sur la syntaxe générale des balises de tableaux :

 Les balises <TABLE> et </TABLE> spécifient le début et la fin du tableau. Le

tableau est justifié à gauche par défaut.

 Les balises <TR> et </TR> indiquent le début et la fin d'une ligne du tableau.

 Les balises <TH> et </TH> sont utilisées pour présenter les cellules de la première
ligne qui sera utilisée comme en-tête du tableau. Le contenu des cellules de l'en-tête
est automatiquement centré et affiché en caractères gras.

 On peut utiliser un tableau sans en-tête. Dans ce cas on n'utilise pas le pair de balises
<TH> </TH>.

 Les balises <TD> et </TD> définissent les cellules de données. Le contenu de ces
cellules est justifié à gauche par défaut.

 Tout formatage supplémentaire (gras, italique, couleur,…) des données devra être
spécifié par les balises appropriées à l'intérieur de chaque pair <TD></TD>.

 Chacune des balises de tableau dispose d'un ensemble d'attributs qu'on examinera ci-
dessous
Le contenu des cellules peut être:

 du texte des images

 d'hyperliens (ou liens)
 des arrière-plans
 et même des tableaux
4.11.2 Légende
Pour ajouter une légende au tableau, on insère le texte correspondant entre les balises
<CAPTION> et </CAPTION>. La légende sera centrée au-dessus du tableau. Le texte de la
légende peut être mis en forme en utilisant les différentes balises de formatage. Les balises
<CAPTION> et </CAPTION> doivent être placées entre <TABLE> et </TABLE> :

22
Exemple : Insertion et formatage (<FONT>) de la légende.

4.11.3 Fusion des cellules

Par défaut, une cellule n'a que la hauteur d'une ligne et la largeur d'une colonne. Ce qui est
suffisant pour la plupart des tableaux standards. Lorsque l'on se sert des tableaux à des fins de
mise en page, il arrive qu'une cellule doive s'étendre sur plusieurs lignes et/ou plusieurs
colonnes. Dans ce cas, on doit faire une fusion de cellules à la manière des tableurs.

23
 a. Fusion Horizontale :
L'attribut COLSPAN des balises <TH> et <TD> permet d'étendre la cellule définie sur
plusieurs colonnes. COLSPAN prend pour valeur le nombre de colonnes que doit occuper la
cellule.
Exemple :

b. Fusion verticale :
L'attribut ROWSPAN fonctionne de la même manière que COLSPAN, mais s'applique aux
lignes du tableau. Elle permet d'étendre une cellule sur plusieurs lignes.

24
Exemple:

4.12 Les cadres : Frames

Les premières versions d’HTML ne comprenaient pas les frames. Il a été introduit par la suite
pour surmonter cette limitation d’HTML. Le concept est le suivant : la fenêtre du navigateur
est divisée en plusieurs parcelles appelées frames ou cadres dont chacune peut contenir un
document différent. Si un document est long, le frame qui le contient affiche ses propres
barres de défilement.

4.12.1 Quelques utilisations des frames

Les frames ne doivent pas être employés uniquement parce qu'ils offrent un joli design au site
WEB. Ils doivent répondre aux besoins et aux caractéristiques du visiteur du site, et améliorer
de façon significative la présentation du contenu.
L'application la plus courante consiste à fournir un contenu statique (une table de matières par
exemple) dans un frame et un contenu variable dans un autre. A cet effet, deux frames
seulement sont nécessaires: L'un situé à gauche de la fenêtre, l'autre occupant l'espace restant
et chargé d'afficher les documents. Dans les frames statiques, on trouve souvent des:
 Liens de navigation vers d'autres pages.

25
  Tables de matières

 Bannières et logos

 Outils de recherche
Le visiteur interagit dans le frame statique (clique un lien, saisie d'un critère de recherche,
etc.), et les résultats s'affichent dans le frame variable.
4.12.2 Création des frames
Avant de commencer le codage HTML, il est conseillé de faire un croquis de la page finale.
Cela permet de décider de la construction la plus efficace du document contenant des cadres.
a. La balise <FRAMESET>
Il faut donc commencer par diviser la page en zones indépendantes; c'est le rôle des balises
<FRAMESET> et </FRAMESET>. Les attributs que reçoivent ces balises sont essentiels à
la définition des cadres.
La balise <FRAMESET> requiert l'un des deux attributs suivants :

Remarque :
Généralement, on utilise des pourcentages et des astérisques (*) pour indiquer la taille de
chaque cadre.
La structure de base du document HTML, où on définit des cadres, est la suivante :

Remarques:

1. On note que dans la structure de base d'un document contenant des cadres, les balises
<FRAMESET> et </FRAMESET> ne sont pas mises entre les deux balises <BODY> et
</BODY>.

26
2. On ne doit utiliser que l'un des attributs ROWS ou COLS dans la balise <FRAMESET>.
Si les deux sont présents dans la même balise <FRAMESET>, le navigateur n'interprétera
que le premier attribut rencontré.
b. Bordure des cadres
On peut modifier l'épaisseur des bords des cadres ou de supprimer les bords. Les documents
se présentent comme une page Web ordinaire, sans les bords des cadres. On utilise pour cela
les deux attributs:

Remarque:
Si FRAMEBORDER=0 et BORDER=0, le contenu des cadres paraît continu sans
séparateurs.

4.12.3 Définition des contenus des cadres : <FRAME>

La balise <FRAMESET> ne fait que définir les différents cadres (ou frames). Il reste à placer
dans chaque frame le contenu qui lui convient. C'est le rôle de la balise <FRAME> et de ses
nombreux attributs.
L'attribut important et obligatoire de la balise <FRAME> est SRC qui indique au navigateur
l'URL du document à charger dans le frame. Cette balise peut recevoir les attributs suivants:

Exemples :
1. Division de la fenêtre du navigateur en deux cadres verticaux pour afficher respectivement
les deux documents HTML tabmat.html et accueil.html. Le premier cadre occupera 30% de
la fenêtre, et le deuxième occupera le reste. On suppose que les trois fichiers HTML de
l'exemple sont stockés dans le même dossier.

27
2. On reprend l'exemple 1, mais cette fois on divise la fenêtre du navigateur en deux cadres
horizontaux. Pour cela on utilise l'attribut ROWS au lieu de COLS dans la balise
<FRAMESET> dans index.html.

28
L'attribut TARGET
L'une des applications courantes des frames est l'utilisation d'un cadre dont le contenu est
statique et un ou plusieurs autres cadres dont le contenu change. Ce changement peut être fait
suite à un clic sur un lien par exemple. Pour cela, il faut spécifier dans le lien:
- Le document HTML à charger (valeur de l'attribut HREF de la balise <A>)

- Le cadre dans lequel on doit faire l'affichage du document, c'est le rôle de l'attribut
TARGET de la balise <A>.

L'attribut TARGET prend comme valeur le nom du cadre vers lequel on veut rediriger le
document indiqué dans l'attribut HREF:
<A HREF="URL du document HTML" TARGET= "Nom de cadre" >

Exemple :
On reprend l'exemple précédent et on ajoute dans tabmat.html un lien vers le document
chapitre1.html qui sera chargé dans la frame "contenu".

29
4.13 Les formulaires

L'interactivité a connu une grande évolution sur le WEB grâce à l'introduction des
composants de l'interface permettant de collecter les données utilisateur. Ces composants
constituent les éléments des formulaires qui représentent la partie visible de l'interactivité
WEB.

30
L'utilisateur entre des informations par le biais des champs et contrôles, puis clique sur un
bouton pour valider les données. Le navigateur rassemble alors ces données, ouvre une
connexion HTTP et les transmet au serveur. Le serveur traitera, ensuite, les données reçues et
envoie la réponse à l'utilisateur sous forme d'une page HTML.
Les données transmises par un formulaire sont traitées par un programme CGI, un script ASP
ou PHP.

4.13.1 Création de formulaire

Les balises permettant de spécifier les composants du formulaire doivent être placées entre les
conteneurs <FORM> et </FORM>. Ces composants peuvent être: des champs de saisie, des
listes de sélection, des cases à cocher, des boutons de commandes ou d'options, …etc.
La balise <FORM> :
La balise ouvrante <FORM> définit également l'en-tête du formulaire à l'aide des attributs
cités ci-dessous. Seule la propriété ACTION est obligatoire.

Exemple Général:

31
4.13.2 Composants des formulaires
Ces composants peuvent être des:
 Zones de texte.
 Cases à cocher.
 Boutons d'options.
 Zones de liste.
 Boutons de commandes.

Chaque composant doit avoir un nom unique. Ces noms serviront de variables au script de
traitement pour identifier le contenu de chaque composant. Pour spécifier les composants d'un
formulaire, on utilise les balises <INPUT>, <TEXTAREA> et <SELECT> entre les deux
conteneurs <FORM> et </FORM>.

Comme le montre le tableau ci-dessus, la balise <INPUT> gère la plupart des types de
champs; cela grâce aux multiples valeurs que prend son attribut TYPE. Selon le type de
champ, <INPUT> devra également recevoir d'autres attributs qu'on indiquera dans les
sections suivantes.
Les balises citées dans le tableau précédent ne font que produire les champs eux-mêmes. C'est
au concepteur de la page HTML de précéder chaque champ d'un libellé qui indique à
l'utilisateur quelle information entrer.
Généralement, on utilise un tableau (souvent sans bordure) pour justifier ces libellés et les
composants du formulaire.

32
a. Zones de texte

1. Zone de texte monoligne

Ce type de composant permet de saisir un texte sur une seule ligne.
Pour produire un champ de saisie, on se sert d'un code comme celui-ci (les attributs entre
crochets sont facultatifs):

- L'attribut NAME est obligatoire en ce qu'il identifie les données reçues par le champ.

- L'attribut facultatif VALUE prend pour valeur la chaîne de caractères qui apparaîtra par
défaut dans le champ. Ainsi, on épargne à l'utilisateur de saisir le texte lui-même lorsque les
données sont prévisibles. Le texte par défaut sert aussi à indiquer le type d'information
attendu.

- L'attribut SIZE indique la longueur (en caractères) qu'occupera le champ c à d le nombre de

caractères visibles du champ. La valeur par défaut est de vingt caractères.

- L'attribut MAXLENGTH spécifie le nombre maximal de caractères que pourra recevoir le

champ.
Exemple :

Nom d'utilisateur: <INPUT TYPE = TEXT NAME = "login" SIZE = 20

MAXLENGTH= 15>

2. Champ de mot de passe

Ce champ ne diffère de la zone de texte que sur un seul point: le texte entré dans un champ de
mot de passe est remplacé, à l'écran, par des astérisques (*). On utilise le code suivant pour
produire un champ de mot de passe:

<INPUT TYPE ="PASSWORD" NAME= "nom" [VALUE= "texte par défaut"] [SIZE =
longueur] [MAXLENGTH = longueur maximale]>

Exemple:

Mot de passé : <INPUT TYPE="PASSWORD" NAME="pass" SIZE=10

MAXLENGTH=6>

33
3. Zone de texte multilignes
Les champs de saisie et de mot de passe ne peuvent contenir qu'une seule ligne de texte. Pour
créer des zones de texte multilignes, on utilise les balises <TEXTAREA> et
</TEXTAREA>. En voici la syntaxe:

<TEXTAREA NAME = "nom" [ROWS = nombre de lignes] [COLS = nombre de colonnes]

>
... Texte par défaut ...
</TEXTAREA>

- L'attribut NAME assigne à la zone de texte un identifiant unique.

- Les attributs facultatifs ROWS et COLS spécifient les dimensions de la zone de texte (la
taille par défaut varie selon les navigateurs).

- Le texte inclus entre <TEXTAREA> et <TEXTAREA> apparaîtra comme contenu par

défaut.

- Les zones de texte multilignes se prêtent parfaitement aux longues entrées de texte, tels que
commentaires ou messages électroniques
Exemple :

Commentaire : <TEXTAREA NAME="notes" ROWS=5 COLS=20> </TEXTAREA>

4. Fichier
On peut envoyer au serveur un fichier via un formulaire. Pour cela, il est impératif de stipuler
l'attribut ENCTYPE dans la balise <FORM>, ainsi qu'une instruction <INPUT TYPE =
"FILE"> :

<FORM ACTION = "URL d'un script" ENCTYPE = "type MIME du fichier">

Fichier à Envoyer: <INPUT TYPE = "FILE" NAME = "nom">
…
</FORM>

34
 5. Champ masqué
Les champs masqués ne sont pas utilisés pour recevoir des données, mais seulement pour
fournir au serveur des informations qui n'apparaissent pas sur le formulaire. Les champs
masqués sont définis par des balises du type:

<INPUT TYPE = "HIDDEN" NAME = "nom" VALUE = "valeur">

- Les champs masqués permettent notamment d'exploiter un seul script général pour le
traitement de différents formulaires. Le script doit savoir de quel formulaire particulier lui
parvient les données; un champ masqué peut livrer cette information cette information sans
intervention de l'utilisateur. Ainsi, on peut créer un champ masqué, dans chaque formulaire,
qui indiquera l'identité de ce dernier.

- La position du champ masqué dans le code n'est pas importante, du moment qu'il apparaîtra
entre les balises <FORM> et </FORM>.

6. Cases à cocher
Les cases à cocher permettent à l'utilisateur d'effectuer une sélection multiple entre plusieurs
options. Pour générer une case à cocher on utilise le code suivant:

<INPUT TYPE = "CHECKBOX" NAME = "nom" VALUE = "valeur" [CHECKED] >

- Chaque case à cocher est définie par sa propre balise <INPUT>.

- L'attribut NAME spécifie le nom de la case. Ce nom doit être unique. En effet, si toutes les
cases à cocher d'un groupe portent le même nom, le script de traitement n'aura aucun moyen
d'interpréter la sélection de l'utilisateur.

- L'attribut VALUE indique quelles données devront être envoyées au serveur si l'utilisateur
coche la case; cette information est transparente pour l'utilisateur.

- L'attribut facultatif CHECKED, lorsqu'il est stipulé, indique que la case est cochée par
défaut.

- Seules les données relatives aux cases à cocher sélectionnées sont transmises au serveur. Il
n'est pas fait mention des autres.
Exemple :

<INPUT TYPE = CHECKBOX NAME = "BD" VALUE = "1"> Bases de Données

<BR>
<INPUT TYPE = CHECKBOX NAME = "RES" VALUE = "2"> Réseaux <BR>
<INPUT TYPE = CHECKBOX NAME = "MT" VALUE = "3"> Maintenance <BR>

35
 7. Boutons d’options
Contrairement aux cases à cocher, les boutons d'option sont utilisés pour effectuer une seule
sélection entre plusieurs options possibles. Pour produire un bouton d'option, on utilise le
code suivant :

<INPUT TYPE = "RADIO" NAME = "nom" VALUE = "valeur" [CHECKED]>

- Les attributs VALUE et CHECKED jouent le même rôle que pour les cases à cocher.
- Généralement, on crée un groupe de boutons d'option en utilisant plusieurs balises
<INPUT> avec le même nom (NAME).

- L'ensemble des boutons d'un groupe ne peut envoyer qu'une seule valeur au serveur.

Exemple :

<INPUT TYPE = RADIO NAME = "ACT" VALUE = "etudiant" CHECKED >

Etudiant <BR>
<INPUT TYPE = RADIO NAME = "ACT" VALUE = "prof" > Enseignant <BR>
<INPUT TYPE = RADIO NAME = "ACT" VALUE = "tech" > Technicien <BR>

8. Zones de liste
Les balises <SELECT> et </SELECT> permettent de générer des zones de liste déroulantes
ou de type "ComboBox". La syntaxe générale de ces composants est :

<SELECT NAME = "nom" [SIZE = nombre d'éléments affichées] [MULTIPLE] >

<OPTION VALUE = "valeur1" [SELECTED] > texte d'option 1 </OPTION>
<OPTION VALUE = "valeur2" [SELECTED] > texte d'option 2 </OPTION>
…
<OPTION VALUE ="valeurN" [SELECTED] > texte d'option N </OPTION>
</SELECT>

- L'attribut NAME de la balise <SELECT> attribue un nom unique à la liste.

36
- L'attribut facultatif SIZE spécifie le nombre d'options affichées simultanément. Les options
non affichées seront accessibles grâce aux barres de défilement. La valeur par défaut de SIZE
est 1.

- L'attribut facultatif MULTIPLE autorise les sélections multiples (par Ctrl-clic).

- Si on stipule SIZE = 1 sans spécifier l'attribut MULTIPLE, la liste sera représentée comme
une liste déroulante. Autrement, la liste prendra la forme d'une zone de liste avec barres de
défilement (ou liste "Combo").

- La balise <OPTION> définit un élément de la liste.

- L'attribut VALUE de la balise <OPTION> spécifie la valeur qui doit être passé au serveur
si l'option est sélectionnée. En l'absence de l'attribut VALUE, le texte de l'option sera
transmis au serveur.

- L'attribut SELECTED de la balise <OPTION> permet de sélectionner l'option par défaut.

Exemple :

<SELECT NAME = "pays" SIZE = 1 >

<OPTION VALUE = "ma" SELECTED > Maroc </OPTION>
<OPTION VALUE = "arabe" > Pays Arabe </OPTION>
<OPTION VALUE ="autre" > Autre </OPTION>
</SELECT>

9. Boutons de commande
La balise <INPUT> permet également de générer des boutons de commande. Ces boutons
sont réparties en trois types:
- SUBMIT (valider): Lorsque l'utilisateur clique sur ce bouton, les données du formulaire
sont rassemblées et envoyées au serveur.

- RESET (réinitialiser) : En cliquant sur ce bouton, l'ensemble des données est effacé et les
champs reprennent leur valeur par défaut.

- BUTTON : C'est un bouton "scripté" utilisé, généralement, pour déclencher un traitement en

utilisant un script côté client (en JavaScript, VBScript…).

- Bouton de validation :Tout formulaire doit contenir un bouton de validation, afin que les
données puissent être transmises au serveur. Si le formulaire ne contient qu'un seul champ, la
présence d'un bouton de validation est optionnelle. Dans ce cas, la frappe de la touche Entrée

37
provoque automatiquement la validation des données. Pour créer un bouton de validation, on
utilise le code:
<INPUT TYPE = "SUBMIT" NAME = "nom" VALUE = "valeur">

- L'attribut NAME attribue un nom unique au bouton. Ce nom est utilisé dans des script côté
client (En JavaScript, VBScript,…).

- L'attribut VALUE spécifie le texte qui apparaîtra sur le bouton.

Exemple :

<INPUT TYPE = "SUBMIT" VALUE = "Envoyer">

Bouton de réinitialisation
Le bouton de réinitialisation permet de remettre les champs à leurs valeurs par défaut. On
utilise l'instruction suivante pour générer un bouton RESET :

<INPUT TYPE = "RESET" NAME = "nom" VALUE = "valeur">

Les attributs NAME et VALUE ont la même fonction que pour le bouton de validation.

Bouton "scripté" :
Les boutons "scriptés" réagissent au clic en exécutant un script côté client. Un tel bouton ne
peut rien faire par lui-même. Pour qu'il réagisse aux clics, on doit utiliser l'événement
OnClick pour spécifier le script à exécuter. La définition d'un bouton "scripté" ressemble à
cela:

<INPUT TYPE="BUTTON" NAME="nom" VALUE="valeur" OnClick="fonction" >

- Les attributs NAME et VALUE jouent le même rôle que pour les autres boutons.

- L'événement OnClick spécifie le script (une fonction en JavaScript ou VBScript,…) à

exécuter suite à un clic sur le bouton.
Exemple :

<INPUT TYPE =BUTTON NAME ="verifier" VALUE ="Vérifier les données"

OnCilck="verif()">
<!-- Lorsqu'on clique sur ce bouton, le navigateur exécutera la fonction verif ().-->

38