Scribd
Importer
40 vues105 pages

Chap1 HTML Complet

Transféré par

Maha Fteiti
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
40 vues105 pages

Chap1 HTML Complet

Transféré par

Maha Fteiti
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Développement d’Applications Web

Niveau : 2 IOT

Année Universitaire : 2021-2022

1
Développement d’Applications Web

Chapitre I : LE LANGAGE HTML


HyperText Markup Language

2
Objectifs

• Apprendre les balises HTML


• Apprendre à insérer différents objets
dans une page HTML
• Paramétrer les différents objets et
personnaliser les balises HTML

3
INTRODUCTION

A. Qu’est –ce que HTML ?


B. Qu’est-ce qu’une page HTML ?
C. Exemple de page HTML
D. Architecture d’une application
Web

4
Qu’est –ce que HTML ?
HTML HyperText Markup Language
HyperText = texte+liens vers d‟autres pages ou d‟autres objets
Il s‟agit d‟un langage de balises issu de SGML (Structured Generalized Markup
Language) qui est lui même un langage standard (norme ISO 8779 :1986) utilisé
aujourd‟hui par de nombreuses grandes sociétés et institutions pour l‟échange
international de documents et de données. SGML est très complet mais il est
très lourd à gérer. HTML est une version allégée de ce langage.
HTML permet la mise en forme de textes et d'objets multimédia (images, son, vidéo) et
donc la création d'une page Web.
Ce n'est pas un langage de programmation proprement parlé (puisqu‟il ne permet pas de
créer des programmes), mais un langage qui se veut multi-systèmes (PC, Unix,
Linux, Mac...) et multi-plateformes (tout type de taille et de résolution d'écran,
tout type de navigateur : Microsoft Internet Explorer, Netscape Navigator,
Opera...).
Un document HTML est interprété par le navigateur. D'où des différences si on visualise
une page sur un même système avec différents navigateurs, voire différentes
versions d'un même navigateur. D'où la nécessité de tester les pages sur
différents navigateurs pour avoir le même rendu. 5
QU’EST-CE QU’UNE PAGE HTML ?

Une page Web est constituée de plusieurs éléments ou fichiers :


• Un fichier HTML, également appelé "fichier source". Son extension est
typiquement ".htm" (pour tenir compte des anciens systèmes
d‟exploitation qui ne permettent pas plus de 3 caractères pour l‟extension
du fichier, DOS par exemple) ou ".html". Par exemple, "[Link]"
pour la page d'accueil de votre site. Il s'agit d'un fichier en texte brut que
ce chapitre est destiné à créer.
• De photos ou d'images, au format JPEG ".jpg" ou ".jpeg" (optimisé pour les
photos), au format GIF ".gif" (optimisé pour les images, logos, utilisation
de la transparence, etc..).
• Du son (WAVE ".wav"), des vidéos (MPEG ".mpeg" ou ".mpg", AVI ".avi"),
des animations Flash ou QuickTime, des codes JavaScript ou XML, ASP,
PHP, JSP, Perl, etc...
Page HTML

[Link] Votre Texte


<img > Images/[Link]
ou
[Link]
6
EXEMPLE DE PAGE HTML
<html>
<head>
<title>Ma première page HTML</title>
</head>
<body>
<p>
Ecrire une page HTML,
c'est facile !!
</p>
<div align="center">
<img src=
"Images/[Link]">
</div>
</body>
</html>

7
ARCHITECTURE D’UNE APPLICATION WEB

Client
Communication Serveur
Scripts
Client
Page HTML Site
Complet
Texte
Images, Sons
Scripts clients
Cookies Objets Scripts
encapsulés Serveurs Base de
(applets) données

• Scripts serveur : Perl, PHP, ASP, ColdFusion….


• Images : JPEG, GIF, PNG ou BMP
• Sons : WAV, MIDI, MP3, …
• Scripts clients : JavaScript ou VBScript
• Objets encapsulés: Animations Flash, Animations Shockwave,
Applets Java
8
SYNTAXE HTML

A. Balises HTML
B. Commentaires
C. Adresses de fichiers
D. Couleurs
E. La balise !DOCTYPE (document type
declaration)

9
Balises HTML

• Les instructions HTML sont exprimées dans des balises (ou


"tags"), délimitées par les signes < et >.
• La plupart des balises doivent être ouvertes et fermées.
• La balise de fermeture est toujours identique à la balise
d'ouverture à la différence qu'elle comporte une barre oblique
(caractère slash /) après le signe <.
<balise> texte affecté par la balise </balise>
• Les balises peuvent être écrites aussi bien en majuscules qu‟en
minuscules : <HTML> <html> <HtMl> sont équivalentes.
• Les espaces et les sauts de lignes ne sont pas interprétés
comme tels.
• Les balises comportent éventuellement des attributs (entre
guillemets) :
<font face=“georgia,verdana” size=„„3‟‟ color =„„red1‟0‟>
COMMENTAIRES <!-- -->

• Les balises <!-- et --> indiquent un


commentaire
• Un commentaire n‟est visible que dans le
code source
• <!-- ceci est un commentaire -->

11
ADRESSES DE FICHIERS

Les fichiers sont adressés en indiquant le chemin


relatif par rapport à la page courante :
• Le chemin est indiqué entre barres
obliques (/)
• Un point indique le répertoire courant
• Deux points représentent le répertoire
parent
Exemple: on est dans [Link]
[Link]
- "[Link]" ou "./[Link]"
[Link]
- "ressources/[Link]" ou
"./ressources/[Link]"
[Link]
- "../[Link]"
[Link]
- "../produits/[Link]"
12
COULEURS

• Les couleurs sont définies par leur code hexadécimal ou par leurs noms en
toutes lettres
• Les couleurs qui sont définies par 6 chiffres hexadécimaux représentent 2 à 2
les tons du Rouge, du Vert et du Bleu, selon le codage RGB (Red Green
Blue), ou en français RVB (Rouge Vert Bleu).
couleur="#RRVVBB" où R, V et B représentent respectivement un chiffre
hexadécimal entre 0 et F pour le Rouge, le Vert et le Bleu.
Exemple:
<font color="#FF0000">Rouge</font>
<font color="blue">Bleu</font>

• Plus de 16 millions de couleurs sont disponibles pour colorer les pages Web.
Toutefois, étant donné que tous les navigateurs ne reconnaissent pas les
couleurs de la même façon, le W3C conseille l'utilisation des couleurs ci-
dessous, pour lesquelles un nom intelligible a été donné. Il est donc possible
(et conseillé) d'appeler une couleur de la façon suivante :
13
COULEURS : NOMS DES COULEURS HTML 4

14
COULEURS : NOMS DES COULEURS HTML 4

15
COULEURS : PALETTE WEB-SAFE

Lorsque le système d'exploitation est configuré en 256 couleurs, il n'y a que 216
couleurs communes à la fois aux navigateurs (Netscape, Internet Explorer)
et aux systèmes d'exploitation (Windows, Macintosh) : c'est la palette
"web-safe"
• Les couleurs web-safe ont pour valeur hexadécimale une combinaison des
paires 00, 33, 66, 99, CC ou FF
• Mais, en réalité il n'y a que 212 couleurs web-safe :
Sous Windows, Internet Explorer ne restitue pas correctement les
couleurs #0033FF (0,51,255), #3300FF (51,0,255), #00FF33
(0,255,51) et #33FF00 (51,255,0).
Que se passe-t-il si l'on utilise une couleur "non web-safe" :
• En 256 couleurs, la couleur est créée par dithering
La qualité de l'image est dégradée
• Avec 65 536 couleurs, le problème est moins sensible
Lorsque le client utilise 16 millions de couleurs, il n'est pas utile de se servir de la
palette "web-safe"
16
COULEURS : PALETTE WEB-SAFE

FFFFFF CCCCCC 999999 666666 333333 000000 FFCC00 FF9900 FF6600 FF3300

99CC00 CC9900 FFCC33 FFCC66 FF9966 FF6633 CC3300 CC0033

CCFF00 CCFF33 333300 666600 999900 CCCC00 FFFF00 CC9933 CC6633 330000 660000 990000 CC0000 FF0000 FF3366 FF0033

99FF00 CCFF66 99CC33 666633 999933 CCCC33 FFFF33 996600 993300 663333 993333 CC3333 FF3333 CC3366 FF6699 FF0066

66FF00 99FF66 66CC33 669900 999966 CCCC66 FFFF66 996633 663300 996666 CC6666 FF6666 990033 CC3399 FF66CC FF0099

33FF00 66FF33 339900 66CC00 99FF33 CCCC99 FFFF99 CC9966 CC6600 CC9999 FF9999 FF3399 CC0066 990066 FF33CC FF00CC

00CC00 33CC00 336600 669933 99CC66 CCFF99 FFFFCC FFCC99 FF9933 FFCCCC FF99CC CC6699 993366 660033 CC0099 330033

33CC33 66CC66 00FF00 33FF33 66FF66 99FF99 CCFFCC CC99CC 996699 993399 990099 663366 660066

006600 336633 009900 339933 669966 99CC99 FFCCFF FF99FF FF66FF FF33FF FF00FF CC66CC CC33CC

003300 00CC33 006633 339966 66CC99 99FFCC CCFFFF 3399FF 99CCFF CCCCFF CC99FF 9966CC 663399 330066 9900CC CC00CC

00FF33 33FF66 009933 00CC66 33FF99 99FFFF 99CCCC 0066CC 6699CC 9999FF 9999CC 9933FF 6600CC 660099 CC33FF CC00FF

00FF66 66FF99 33CC66 009966 66FFFF 66CCCC 669999 003366 336699 6666FF 6666CC 666699 330099 9933CC CC66FF 9900FF

00FF99 66FFCC 33CC99 33FFFF 33CCCC 339999 336666 006699 003399 3333FF 3333CC 333399 333366 6633CC 9966FF 6600FF

00FFCC 33FFCC 00FFFF 00CCCC 009999 006666 003333 3399CC 3366CC 0000FF 0000CC 000099 000066 000033 6633FF 3300FF

00CC99 0099CC 33CCFF 66CCFF 6699FF 3366FF 0033CC 3300CC

00CCFF 0099FF 0066FF 0033FF

17
La balise !DOCTYPE (document type declaration)

La balise !DOCTYPE définit :


• La version HTML utilisée (4.01, ou la norme XHTML 1.0)
• La DTD (pour Document Type Definition) utilisé par le document
• Cette balise n'est pas obligatoire dans les pages HTML, mais il est recommandé de
l'utiliser, spécialement pour son importance dans la norme XHTML émergeante.
• Elle se positionne en en-tête du document (avant la balise <html>).
Trois DTD sont utilisables pour le HTML :
a) Strict DTD : DTD Stricte (respect du HTML 4.01)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
a) Transitional DTD : DTD transitionnelle (autorisant l'usage des
balises obsolètes)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
b) Frameset DTD : DTD supportant les frames.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN">
Pour vérifier la validité de vos pages, le W3C propose des services de validation des documents à
18
l'adresse : W3C Validation HTML - [Link]
DOCUMENT HTML

1. Structure d’un document HTML


2. En-tête du document <head>
3. Corps du document <body>

19
STRUCTURE D’UN DOCUMENT HTML

<html> Document HyperText Markup Language


<head> Entête
</head> Fin de Entête

<body> Page (corps)


</body> Fin de page (fin de corps)
</html> Fin du document HyperText Markup Language

20
A Minimal HTML Document

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"


"[Link]
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="[Link]">
<script type="text/javascript" src="[Link]"></script>
</head>

<body>
</body>
</html>
EN-TETE DU DOCUMENT <HEAD>

Les balises présentes sont :


• <TITLE> permet de donner un titre à une page, qui sera affiché
dans la barre de titre, les favoris, l‟historique et éventuellement
dans les résultats des moteurs de recherche. Il ne peut contenir des
mises en forme.
• <BASE> permet de :
1. Redéfinir une URL (Uniform Resource Locator) de base au
sein d'un document HTML en cas d'erreur d'exploration
(<base href="Adresse d'une page">).
2. Indiquer la base des liens des frames par l'attribut target,
pour diriger vers une frame;
• <SCRIPT> permet d'insérer des Scripts ;
• <STYLE> permet d'insérer des styles CSS ;
• <META> permet de donner des renseignements sur les pages
24
EN-TETE DU DOCUMENT <HEAD>

pour pouvoir bien les référencer et bien les classer par les moteurs
de recherche.

25
EN-TETE DU DOCUMENT <HEAD>

La plupart des outils de recherche sur Internet sont des moteurs de recherche
d'indexation automatique comme AltaVista (à distinguer des annnuaires
comme Yahoo), il faut préparer à l'avance ses pages à l'arrivée des robots de
ces moteurs de recherche. Lorsqu'on soumet l'adresse de son site à un moteur,
celui-ci l'enregistre puis envoie des "robots" aller se balader sur vos pages et
enregistrer les informations contenues dans les meta balises que vous aurez
préalablement placé entre les balises <HEAD> et </HEAD> de votre code
HTML.

• Indiquer la table des caractères utilisée


<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
• Indiquer la ou les langues du site
<META http-equiv="Content-Language" content="fr">
• Indiquer la description du site (maximum 200 caractères).
<META name="Description" content="HTML, Web, conception de sites web">
• Informer les moteurs du contenu du site avec des mots-clés (maximum 1000
caractères).
<META name="Keywords" content="web, conception sites, html, css, internet,
webdesigner ">

26
EN-TETE DU DOCUMENT <HEAD>

• Indiquer le nom de l'auteur


<META name="author" content="Prénom et Nom">
• Indiquer l'email de l'auteur du site
<META name="reply-to" content="adresse-email">
• Indiquer l'éditeur html avec lequel la page a été construite.
<META name="Generator" content="Macromedia Dreamweaver">
• Indique aux robots d'indexer ou non cette page: "all" ou "none".
<META NAME="Robots" CONTENT= "all">
• Indique la date d‟expiration: Expires"never" ou "date
d'expiration".
<META NAME="Expires" CONTENT= "never">
• Rafraîchissement de la page.
<META HTTP-EQUIV ="refresh" content="x; URL=file">

Exemple: <META HTTP-EQUIV="refresh" CONTENT="10">


Rafraîchit votre page toutes les "10" secondes.

• Etc.
27
CORPS DU DOCUMENT <BODY>

La balise <BODY> décrit le contenu de la page. Elle possède les attributs :


• BGCOLOR : Couleur du fond de l'écran (par défaut : Blanc)
• TEXT : Couleur du texte (par défaut : noir)
• LINK : Couleur des liens (par défaut : bleu)
• VLINK : Couleur des liens déjà visités (par défaut : Mauve)
• ALINK : Couleur des liens activés, c'est à dire quand le pointeur de
la souris passe au-dessus (uniquement IE) (par défaut : Rouge)
• BACKGROUND : Image (gif ou jpeg) en fond de page
• LEFTMARGIN : Largeur de la marge de gauche en pixels
• TOPMARGIN : Largeur de la marge du haut en pixels
Exemple:
<html>
<head><title> Ma première page</title></head>
<body bgcolor="white" text="black" link="blue" vlink=" purple"
alink="red">
<p>Texte de la page</p> </body> 27
</html>
FORMATAGE DU TEXTE

A. Paragraphe
B. Saut de ligne
C. Titre
D. Ligne horizontale
E. Section
F. Formatage avec <SPAN>
G. Indentation
H. Texte préformaté

28
PARAGRAPHE <P>

Un paragraphe commence par <P> et se termine par </P>.


Le navigateur crée une ligne blanche au-dessus et en dessous de
chaque paragraphe.
La balise <P> possède l'attribut ALIGN :
• JUSTIFY : Justifier le texte (texte assez long)
• LEFT : Aligne le texte sur la marge de gauche (par défaut)
• RIGHT : Aligne le texte sur la marge de droite
• CENTER : Centre le texte entre les marges

Exemple :
• <P align= «justify»> texte du paragraphe assez long<p>
• <P align= «center»> texte du paragraphe <p>

Remarque:
Un texte présenté entre <body> et </body> sans balises sera présenté
avec les propriétés de mise en forme par défaut. 29
PARAGRAPHE <P> (EXEMPLE)

30
LE RETOUR A LA LIGNE <BR>

Mon poème ne s‟affiche comme je l‟ai écrit : les retours à la


ligne ne sont pas respectés.

31
LE RETOUR A LA LIGNE <BR>

Avec <br> je contrôle l‟affichage de mon poème ligne par ligne

La balise <br> (Break) permet le retour à la ligne 32


TITRES <Hi> i=1 .. 6

HTML propose 6 niveaux de titres gras :


<H1> (grande taille) à <H6> (petite
taille)
Les balises <Hi> possèdent également
l'attribut ALIGN
Valeurs : RIGHT, LEFT et
CENTER
justify aussi.
Exemple:
<H1>Titre de niveau 1</H1>
<H2>Titre de niveau 2</H2>
<H3>Titre de niveau 3</H3>
<H4>Titre de niveau 4</H4>
<H5>Titre de niveau 5</H5>
<H6>Titre de niveau 6</H6> 33
LIGNES HORIZONTALES <HR>
• La balise <HR> permet de tracer une ligne horizontale
Attributs :
• ALIGN : Permet d'aligner la ligne horizontale sur la page.
Valeurs : RIGHT, LEFT ou CENTER
• WIDTH : Spécifie la largeur de la ligne (en pixels ou % de largeur de la fenêtre)
• SIZE : Epaisseur de la ligne (de 1 à 10)
• NOSHADE : S'il est présent (1), l'effet d'ombre (3d) est annulé
• COLOR : Spécifie la couleur de la ligne (IE)
Exemple :
<HR WIDTH="50%">
<HR WIDTH="100" ALIGN="LEFT">
<HR WIDTH="150" COLOR="blue" ALIGN="LEFT">
<HR WIDTH="200" COLOR="#008000" NOSHADE ALIGN="LEFT">

34
SECTION <DIV>

La balise <DIV> permet de définir l'alignement de plusieurs éléments d‟une page : titres,
textes, images, lignes horizontales, etc.
Attribut :
• ALIGN
Valeurs : RIGHT, LEFT et CENTER et justify aussi.

<DIV ALIGN= « CENTER »> remplace la balise <CENTER> (HTML1.0)


Exemple:
<hr>
<p>Après cette ligne il y a un saut de paragraphe.</p>
<hr>
<div>Après cette ligne il y a un saut de division.</div>
<hr>

35
Formatage avec <SPAN>

• Avec <span style=...> ... </span>, vous pouvez formater comme vous le
désirez des passages de texte à l'intérieur d'autres balises HTML
(span = tendre).
• Derrière la mention style= les propriétés de formatage désirées.
• La mention doit figurer entre guillemets.
• À l'intérieur de la définition de format sont autorisées les mentions
de feuilles de style.
• Chaque attribution de propriété comporte un nom par exemple font-
style et une valeur, par exemple italic, séparés par deux points.
Fermez chaque définition de format par un point virgule.
Exemple :
C'est mon premier paragraphe
C'est mon
<span style="font-style:italic; color:red;"> premier </span>
paragraphe
36
INDENTATION <BLOCKQUOTE>
La balise <BLOCKQUOTE> sert à mettre du texte en retrait : Décalage vers la droite

<BLOCKQUOTE>Ce texte est en retrait.


<BLOCKQUOTE> Ce texte est en
double retrait.
</BLOCKQUOTE>
</BLOCKQUOTE> 37
TEXTE PREFORMATE <PRE>

• Le texte compris entre les balises <PRE> et </PRE> est transcrit tel
qu‟il est écrit dans le code
• Les espaces et tabulations sont respectés
• C‟est uniquement du texte : ni titres, ni paragraphes, …
Exemple :

38
MISE EN FORME DES CARACTERES

A. MISE EN FORME LOGIQUE


B. MISE EN FORME PHYSIQUE
C. POLICE DE CARACTERES
D. CARACTERES ACCENTUES
E. CARACTERES SPECIAUX
F. CHOIX DE LA POLICE DE
CARACTERES

39
MISE EN FORME LOGIQUE
• Les balises de mise en forme logique indiquent la nature du texte
• Elles laissent le navigateur appliquer le formatage selon les préférences de
l‟utilisateur ou les valeurs par défaut

Les balises de mise en forme logique :


• CITE : Citation.
• CODE : Code informatique.
• EM : Emphase (italique)
• KBD : Keyboard (clavier)
• STRONG : Faire ressortir du
texte (gras)
• VAR : Variable
• DFN : Définition.
Il est possible d‟imbriquer plusieurs
balises
Exemple :
<CITE><STRONG>Citation importante</STRONG></CITE> 40
MISE EN FORME PHYSIQUE

Les balises de mise en forme physique


précisent la typographie qui sera utilisée par
le navigateur
• B : Affiche le texte en gras
• I : Met le texte en italique
• TT : Affiche le texte en police style
machine à écrire
• U : Souligne le texte
• STRIKE : Barre le texte
• S : Barre le texte
• BIG : Police de caractères plus grande
• SMALL : Police de caractères plus
petite
• SUB : Affiche le texte en indice
• SUP : Affiche le texte en exposant
• BLINK : Texte clignotant (uniquement
sur Netscape)
Exemple : 41
<I><B>Texte en italique et en gras</B></I>
POLICE DE CARACTERES <FONT>

La balise <FONT> sert à spécifier directement la police de caractères qui sera utilisée
par le navigateur
Attributs :
• FACE : Précise par ordre de priorité les noms des polices.
Valeurs les plus fréquentes :
face="Arial, Helvetica, sans-serif" : Police droite
face="Times New Roman, Times, serif" : Police sérifiée
face="Courier New, Courier, mono" : Police non proportionnelle
face= "Georgia, Times New Roman, Times, serif"
face= "Verdana, Arial, Helvetica, sans-serif"
• SIZE : Taille absolue (1 à 7) ou relative (-3 à +4) de la police
Valeur par défaut : 3
• COLOR : Couleur du texte
Il existe une balise appelée <BASEFONT> sensée définir la police pour l‟ensemble de la
page. Elle ne fonctionne correctement que sur IE.
Exemple :
<basefont color="#00CCFF" face="Times New Roman, Times, serif" size="5">
42
POLICE DE CARACTERES <FONT> (EXEMPLE)

43
CARACTERES ACCENTUES

Les caractères accentués s'affichent de la même manière quel que soit le poste
client, lorsque le code ci-dessous est utilisé dans le fichier source :

Caractère Code HTML Caractère Code HTML


Á &Aacute; à &agrave;
À &Agrave; ä &auml;
à &Atilde; é &eacute;
É &Eacute; ê &ecirc;
È &Egrave; ú &uacute;
Î &Icirc; ü &uuml;
Ö &Ouml; ï &iuml;
 &Acirc; ç &ccedil;
Å &Aring; â &acirc;
Ä &Auml; æ &aelig;
Ê &Ecirc; è &egrave;
Ë &Euml; ë &euml;
Ô &Ocirc; û &ucirc;
Æ &AElig; ö &ouml;
Ç &Ccedil; î &icirc;
ù &ugrave;

Attention: Les codes HTML sont case sensitive(distinction entre


majuscules et minuscules)
&Eacute; É n'a pas la même signification que &eacute; é 44
CARACTERES SPECIAUX
Les caractères spéciaux sont également rendus par un code HTML
Caractère Code HTML
Caractère Code HTML & &amp ;
> &gt; ¶ &para;
< &lt; œ &#156;
Espace insécable &nbsp; &quot;
"
(non-breaking space)
© &copy;
® &reg;
™
± &plusmn;
&#153;
¹ &#185;
» &#187;
³ &#179;
« &#171;
¼ &frac14;
° &#176;
¾ &frac34;
² &#178;
· &#183;
§ &sect;
‰ &#137;
½ &frac12;

Si dans votre texte des caractères qui ont une signification particulière en HTML sont
employés vous devez masquer ces caractères. Les caractères suivants doivent être masqués
de la façon suivante:
Remplacez le caractère < par la suite de caractères &lt;
Remplacez le caractère > par la suite de caractères&gt;
Remplacez le caractère & par la suite de caractères &amp;
Remplacez le caractère " par la suite de caractères &quot;
Remplacez les caractères « et » par les suites de caractères &laquo; et &raquo; 45
CHOIX DE LA POLICE DE CARACTERES

• La police par défaut est généralement jugée "trop grande",


les concepteurs de sites choisissent une police plus petite
que le défaut :<font face=verdana size=-2> ou <font face=arial size=-1>
pour le texte
voire <font face=verdana size=1> ou <font face=arial size=2>…

• Verdana et Georgia sont des polices conçues pour être lues


sur écran. Mais elles ne sont pas disponibles sur les anciens
systèmes d'exploitation (exemple: Windows 95)
• Verdana apparaît très grosse sous Windows et s'imprime
de la même manière…
• Verdana est plus grosse qu'Arial,
face="verdana, arial, helvetica, sans serif" est une erreur
46
LES LISTES

A. Liste numérotée ou liste


ordonnée
B. Liste à puces ou liste non
ordonnée
C. Liste de définitions
D. Imbrication de listes

47
LISTE NUMEROTEE <OL>
La balise <OL> sert à définir une liste numérotée (ordonnée)
Elle accepte l’attribut TYPE qui permet de choisir le type d’indice :
[Link]=1 : Nombres (par défaut) : 1,2,3
[Link]=A : Majuscules :A,B,C
[Link]=a : Minuscules : a,b,c
4. TYPE=I : Chiffres romains majuscules : I,II,III
5. TYPE=i : Chiffres romains minuscules : i,ii,iii
• Chaque item de la liste est indiqué par <LI>
• Pour définir la valeur de départ de la liste :
START=n

• Liste avec titre

48
LISTE A PUCES <UL>
• La balise <UL> sert à définir une liste à puces (non ordonnée).
• Elle prend l‟attribut TYPE qui permet de spécifier la forme de la puce :
1. TYPE=DISC : Disque plein (par défaut)
2. TYPE=CIRCLE : Disque vide
3. TYPE=SQUARE : Carré
• Chaque item de la liste est indiqué par <LI>

49
LISTE A PUCES <UL>
• Liste avec titre: avec <LI>
• Liste avec image

• Liste avec des puces colorées de manière unique

• Liste avec des puces colorées avec différentes couleurs

50
LISTE DE DEFINITIONS <DL>

La balise <DL> (Definition List) permet de construire une liste de termes avec
les définitions correspondantes.
<DT> : le terme (Definition Term)
<DD> : la définition du terme (Definition Description)

Exemple:
<DL>
<DT> Étoile </DT>
<DD>Objet céleste étudié par les astrophysiciens.</DD>
<DD>Danseur confirmé d'un ballet.</DD>
<DT>Liste </DT>
<DD>Ensemble d‟éléments.</DD>
</DL>

51
IMBRICATION DE LISTES

Il est possible d’imbriquer plusieurs listes.

Exemple:

<OL TYPE= “A”>


<LI>Premier item </LI>
<UL>
<LI>Début du premier item</LI>
<LI>Suite du premier item </LI>
</UL>
<LI>Second item</LI>
</OL>

52
LIENS HYPERTEXTES

1. L'ancre
2. Lien interne à la page
[Link] interne au site
[Link] externe
[Link] de messagerie

53
L’ANCRE <A>

• La balise <A> permet d'établir un lien hypertexte.

Attributs :
• HREF : Source du document (relative ou absolue)
• NAME : Nom de l‟ancre (pour une cible seulement)
• TARGET : Cible (cadre ou fenêtre) pour l'affichage du
document
• TITLE : Description du lien (identique à l'attribut ALT
pour une image) (IE)
• Pour afficher le document dans une nouvelle fenêtre du
navigateur :
<A HREF="[Link]" TARGET=“_blank ”>
Cliquez ici pour ouvrir une fenêtre
</A> 54
LIENS INTERNES A LA PAGE

• Un lien interne permet de se déplacer à l'intérieur


d'une même page
• Définir la cible d'un lien (l'ancre).
<A NAME="top"></A>
 Le nom ne doit pas contenir d'espaces, ni
d'accents, ni de caractères spéciaux.
• Associer un lien à l'ancre.
<A HREF="#top">top</A>

55
LIENS INTERNES AU SITE

De la même manière, il est possible de construire des liens vers d‟autres pages :

• Lien vers une page située dans le même répertoire


<A HREF="[Link]">Cliquez ici</A>

• Lien dans un répertoire différent


<A HREF="sujet/[Link]">Cliquez ici</A>

• Lien dans un même répertoire et vers une ancre d'une autre page
<A HREF="[Link]#top">Cliquez ici</A>

• Lien dans un répertoire différent et vers une ancre d'une autre page
<A HREF="sujet/[Link]#top">Cliquez ici</A>

• Lien vers un fichier en téléchargement


<A HREF="[Link]">Cliquez ici pour télécharger le fichier</A>
56
LIENS EXTERNES

• Un lien externe pointe vers un autre site


L‟attribut HREF indique l‟adresse complète de la
page ou du fichier ainsi que le protocole de
communication.
Exemple:
• Lien externe vers un site http.
<A HREF="[Link] MySite</A>

• Lien externe vers un serveur FTP.


<A HREF="[Link] MySite</A>

57
LIENS DE MESSAGERIE

Un lien de messagerie (e-mail) permet d‟ouvrir le


logiciel de messagerie associé au navigateur

<A HREF="[Link] moi</A>

Attributs :
• subject : sujet du mail
• cc : destinataires en copie
• body : texte du mail

Les attributs sont précédés de ? et séparés par &

58
LIENS DE MESSAGERIE

• Lien e-mail simple


<A HREF="[Link]
• Lien e-mail avec sujet
<A HREF="[Link]
nom@[Link]</A>
• Lien e-mail avec sujet et texte dans le corps du message.
<A HREF="[Link] Votre
message">nom@[Link]</A>
• Liene-mail envoyé à 2 destinataires.
<A HREF=”[Link]
nom@[Link] et nom2@[Link] </A>

59
IMAGES

1. La balise <IMG>
2. Aligner une image
3. Format des images

60
IMAGES <IMG>
La balise <IMG> permet d‟insérer une image sur la page.
Attributs:
• SRC indique l‟adresse du fichier :
 Soit en relatif par rapport au fichier courant
<IMG SRC="images/[Link]">
 Soit en absolu par un lien htt
<IMG SRC="[Link]
• WIDTH et HEIGHT : largueur et hauteur de l‟image en pixels
• ALT : Texte associé à l‟image.
 Ce texte s‟affiche avant que l‟image ne se charge ou lorsque le visiteur désactive le chargement
des images. Il est utilisé par les lecteurs d‟écrans pour malvoyants. Avec Windows, il apparaît sous
la forme d‟une bulle d‟aide (info-bulle) lorsque le pointeur de la souris passe au-dessus de l‟image.
 L'attribut ALT n'est pas compris sur Macintosh pour lequel il est préférable d'employer TITLE

• BORDER : Taille de la bordure entourant de l‟image


• HSPACE et VSPACE : Espace vertical ou horizontal entre le texte et l‟image (en pixels)

Pour mettre un lien sur une image, il suffit de placer l'image dans une ancre :
<A HREF="[Link]/[Link]">
<IMG SRC="images/logo_machincom.gif"> 61
</A>
ALIGNER UNE IMAGE : l’attribut « ALIGN »

Alignement du texte et de l'image : Attribut ALIGN

• Soit plusieurs lignes de texte peuvent s’afficher à coté de l’image:


• LEFT: Image à gauche (texte à droite)
• RIGHT: Image à droite (texte à gauche)

• Soit l’image et le texte sont sur la même ligne (petite image)

• TOP (ou TEXTTOP): le haut de l’image est aligné sur le plus haut
caractère de la ligne
• ABSMIDDLE : Le milieu de l’image est aligné sur le milieu du texte
• ABSBOTTOM : le bas de l’image est aligné sur le bas du caractère le
plus bas du texte
• MIDDLE : Le milieu de l’image est aligné sur la ligne de base du
texte
• BASELINE (ou BOTTOM): Le bas de l’image est aligné sur la ligne de
base du texte (défaut)
62
ALIGNER UNE IMAGE ALIGN (EXEMPLE)

<p>
<img src="[Link]" width="155" height="126" border="1"
hspace="20" align="right‟‟ alt="Les chrysanth&egrave;mes">
Les chrysanthèmes sont de la famille des Composées Radiées, groupant environ 200
espèces distribuées dans l‟hémisphère Nord et en Afrique du Sud, dont les
marguerites, les tanaisies, et les pyrèthres. Les chrysanthèmes des jardins sont, pour
la plupart, dérivés du <i>Chrysanthemum indicum</i> et d‟espèces voisines
provenant d‟Extrême-Orient.
</p>

63
FORMAT DES IMAGES

• GIF (Graphics Interchange Format)


• Adapté aux images contenant des zones de couleurs clairement distinctes
• Moins volumineux et plus rapide à charger que le JPEG
• Donne l'impression d'une image non rectangulaire grâce à la transparence:
Meilleure intégration dans la page
• Le GIF contient moins de couleur que le JPEG : il crée les couleurs manquantes
par dithering (combinaison de couleurs proches dans la palette). La qualité de
l'image en est parfois diminuée
• Les bonnes performances du format GIF proviennent de :
 La limitation du nombre de couleurs de l'image à 256 au maximum.
 L'utilisation d'une technique de compression (LZW-Lempel-Ziv-Welch ).
• JPEG (Joint Photo Expert Group)
• Adapté aux nombreuses modifications de couleurs (exemple: photographies)
• La différence de rendu avec du GIF n'est sensible que lorsque le JPEG est affiché
sur 16 millions de couleurs. 64
LES TABLEAUX

1. CONSTRUIRE UN TABLEAU
2. LA BALISE <TABLE>
3. LA LIGNE ET LA CELLULE
[Link] LIGNES OU COLONNES
(COLSPAN ET ROWSPAN)
[Link] D’UN TABLEAU ET EN-TETE
DES COLONNES

65
CONSTRUIRE UN TABLEAU

• La balise <TABLE> (table = tableau) est l'une des plus utilisée : elle est à la base
de l‟organisation de presque toutes les pages Web

• La balise <TABLE> définit le tableau, elle contient deux autres balises :

 <TR> : décrit une ligne du tableau (tr = table row).


 <TD> : définit le contenu d‟une cellule du tableau (td = table data)

• Ces trois balises sont toujours imbriquées les unes dans les autres

• <TD> est contenue dans <TR> qui est imbriquée dans <TABLE>.

• Attention à la fermeture des balises

66
CONSTRUIRE UN TABLEAU (SUITE)

Construire un tableau revient à décrire chacune des lignes de haut en bas, puis
chaque cellule de la ligne de gauche à droite

Exemple:
<table border= « 1 »>
<tr>
<td>Cellule 1.1</td>
<td>Cellule 1.2</td>
</tr>
<tr>
<td>Cellule 2.1</td>
<td>Cellule 2.2</td>
</tr>
</table>

67
LA BALISE <TABLE>

La balise <TABLE> comporte différents attributs :


• WIDTH : Largeur du tableau en pixels ou pourcentage de la fenêtre du
navigateur.
• HEIGHT : Hauteur du tableau en pixels ou pourcentage de la fenêtre du
navigateur
• BORDER : Taille en pixels de la bordure du tableau.
• ALIGN (CENTER, RIGHT ou LEFT) : Position du tableau dans la page.
Le texte se place à coté du tableau, sauf s‟il est centré
• CELLPADDING : Espace en pixels entre la bordure des cellules et leur
contenu (“enrobage” du texte)
• CELLSPACING : Espace en pixels entre les cellules
• BGCOLOR : Couleur de fond du tableau
• VSPACE et HSPACE : Espace vertical ou horizontal entre le texte et le
tableau (en pixels)
• Un attribut (BACKGROUND) permet de définir une image en fond pour le
tableau.
68
LA BALISE <TABLE> (EXEMPLE)
Avec IE, l‟espace entre les cellules (cellspacing) prend la couleur de
fond du tableau, tandis qu‟il reste transparent avec NC.
Exemple:
<table width="200" align="right" bgcolor="#00FF00" cellspacing="10"
border="0">
<tr>
<td bgcolor="#FF0000" align="center">Rouge</td>
<td align="center">Transparent</td>
</tr>
<tr>
<td align="center">Transparent</td>
<td bgcolor="#FFFF00" align="center">Jaune</td>
</tr>
</table>

69
LA LIGNE <TR> ET LA CELLULE <TD>

Principaux attributs des balises <TR> et <TD>


• WIDTH : Largeur de la cellule en pixels (uniquement <TD>)
• HEIGHT : Hauteur de la cellule ou de la ligne en pixels
• BGCOLOR : Couleur de la cellule ou de la ligne
• ALIGN = LEFT (par défaut), RIGHT ou CENTER : Justification des
données dans la cellule ou la ligne
• VALIGN = MIDDLE (défaut), TOP ou BOTTOM : Alignement vertical des
données dans la cellule ou la ligne

En l‟absence de spécifications (WIDTH et HEIGHT), la hauteur et la largeur d'une cellule


s'adaptent aux dimensions de son contenu (texte ou image).

70
LA LIGNE ET LA CELLULE (EXEMPLE)

71
LA LIGNE ET LA CELLULE (EXEMPLE)
<table border="1">
<tr>
<td align="right" width="200">Cellule 1.1 <br>
justifiée à droite</td>
<td align="center" width="300">Cellule 1.2 centrée</td>
</tr>
<tr>
<td height="100" valign="top">Cellule 2.1 justifiée<br>
à gauche par d&eacute;faut<br>
et en haut</td>
<td align="center" valign="bottom">Cellule 2.2 <br>
centrée<br>
et en bas</td>
</tr>
<tr valign="middle">
<td height="150">Cellule 3.1 centrée verticalement</td>
<td>Cellule 3.2 centrée <br>
verticalement </td>
</tr>
<tr height="100">
<td>Texte Normal</td>
<td>Texte Normal</td>
</tr>
<tr >
<td height="100">Texte Normal</td>
<td>Texte Normal</td>
</tr> 72
</table>
FUSIONNER LIGNES OU COLONNES (COLSPAN
ET ROWSPAN)
• L'attribut COLSPAN=“n” indique que la cellule s’étend sur n colonnes :
<table border="1">
<tr>
<td colspan="2">Cellule 1</td>
</tr>
<tr>
<td>Cellule 2 </td>
<td>Cellule 3</td>
</tr>

• L'attribut ROWSPAN=“n” indique que


la cellule s’étend sur n lignes :
<table border="1">
<tr>
<td rowspan="2">Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
</tr> 73
</table>
TITRE D’UN TABLEAU ET EN-TETE DES
COLONNES

• Titre d‟un tableau <caption>


• Permet d‟ajouter un titre à un tableau
• Son attribut align = „„top (par défaut)| bottom‟‟ ajoute le titre au
dessus ou en dessous du tableau
• En-tête de colonnes <th> (th = table header)
• Identique à <td> mais est considéré comme en-tête, donc
automatiquement
 Centré
 Mis en gras
• Ses attributs sont identiques à ceux de <td>

74
TITRE D’UN TABLEAU ET EN-TETE DES
COLONNES (EXEMPLE)

<table border="2" width="50%" align="center">


<caption align="bottom">Titre du Tableau</caption>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
</tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>

75
Exercice

Donnez le code HTML du tableau suivant, sachant que le code de la couleur


d‟arrière plan est DDE6FF:

Modèle Vitesse Consommation


Marque Type Numéro de série en km/heure en litre/100 km

Peugeot 106 B2 234.34 132 5,7


Citroën AX AT67B8 6789 126 5,5

Tableau Comparatif de Voitures

76
Exercice (Correction):
<table border="1" bgcolor="#DDE6FF" align="center" >
<caption align="bottom" ><font color="#FF0000">Tableau Comparatif de Voitures</font>
</caption>
<tr>
<th colspan=3>Mod&egrave;le </th>
<th rowspan=2>Vitesse<br>en km/heure </th>
<th rowspan=2>Consommation<br>en litre/100 km </th>
</tr>
<tr>
<th>Marque</th>
<th>Type</th>
<th>Numero de s&eacute;rie</th>
</tr>
<tr>
<td>Peugeot 106</td>
<td>B2</td>
<td align="center" >234.34</td>
<td>132</td>
<td>5,7</td>
</tr>
<tr>
<td>Citro&euml;n AX</td>
<td>AT67B8</td>
<td align="center" >6789</td>
<td>126</td>
<td>5,5</td> 77
</tr>
</table>
LES FORMULAIRES

1. INTERET DES FORMULAIRES


2. EXEMPLE DE FORMULAIRE
3. LA BALISE DE BASE <FORM>
4. LA BALISE <INPUT>
5. LA BALISE <SELECT>
6. LA BALISE <TEXTAREA>

78
INTERET DES FORMULAIRES

• Les formulaires permettent aux auteurs des pages Web d‟instaurer une
communication avec les utilisateurs. Un formulaire peut servir à recueillir les
avis des visiteurs, leurs e-mails en vue d'une newsletter. Mais ça peut être
aussi un bon de commande, un sondage, un jeu, etc...
• Un formulaire définit en HTML peut contenir :
1. Des zones de saisie de texte
2. Des boîtes à cocher,
3. Des boutons radio
4. Des menus déroulants
5. Des boutons
• L‟utilisateur saisit des informations en remplissant des champs ou en cliquant
sur des boutons, puis appuie sur un bouton de soumission (submit ou envoyer)
pour l'envoyer soit à une adresse e-mail ou à un script CGI (Common
Gateway Interface) stocké sur un serveur et écrit dans un langage de
programmation comme PERL, PHP, ASP, ColdFusion, etc.

79
EXEMPLE DE FORMULAIRE

80
EXEMPLE DE FORMULAIRE : CODE HTML

<html> <head> <title>Exemple de formulaire de contact</title> <basefont face="georgia"> </head>


<body leftmargin= "100">
<H1 align="center" > Exemple de formulaire de contact</h1> <hr size="2" width="70%" >
<FORM NAME= "Contact" ACTION= "[Link] METHOD = "POST"
ENCTYPE= "text/plain">
<p><h3>Quel type de message voulez-vous envoyer ?</h3>
<!-- boutons radio -->
<input type="radio" value="infos" name="TypeMessage">Informations
<input type="radio" value="online" name="TypeMessage">Aide
<input type="radio" value="Suggestion" name="TypeMessage" checked>Suggestion
<input type="radio" value="merci" name="TypeMessage" > Remerciements
</p><p><h3>Quel est l'objet de votre envoi ?</h3>
<!-- Boîte d'options -->
<select size="1" name="Options">
<option selected>Choisissez une option s.v.p.</option>
<option>Entreprise</option>
<option>Produits</option>
<option>Fournitures</option>
<option>Employé</option>
<option>(Autre)</option>
</select>
Autre : <input maxLength="256" size="26" name="AutreObjet"> </p>
81
EXEMPLE DE FORMULAIRE : CODE HTML
<p>
<h3>Tapez vos commentaires dans l'espace ci-dessous :</h3>
<!-- Champ multi-ligne -->
<textarea name="Commentaires" rows="5" cols="50"></textarea></p>
<p>
<h3>Indiquez vos coordonnées :</h3>
<! champ de saisie mono-ligne -->
Nom :<input maxLength="256" size="35" name="NomUtilisateur"><br>
Adresse de messagerie :<input maxLength="256" size="35" name="EmailUtilisateur"> <br>
Téléphone :<input maxLength="256" size="35" name="TelephoneUtilisateur"><br>
Télécopie :<input maxLength="256" size="35" name="TelecopieUtilisateur"><br> </p>
<p><!-- case à cocher-->
<input type="checkbox" value="ContactRequested" name="DemandeDeContact" checked>
<b>Veuillez me contacter dès que possible...</b></p>
<p><!-- Boutons Envoyer et Annuler -->
<input type="submit" value="Envoyer les informations">
<input type="reset" value="Effacer le contenu du formulaire">
</p>
</FORM>
</body> </html> 82
LA BALISE <FORM>

Les formulaires sont délimités par la balise <FORM> ... </FORM>, une balise qui
permet de regrouper plusieurs éléments du formulaire (boutons, champs de saisie,...).
Syntaxe : <FORM NAME=.. ACTION=.. METHOD=.. ENCTYPE=.. >
• NAME : Nom du formulaire. Cet attribut permet de spécifier le nom du formulaire. Il
est nécessaire en cas d'utilisation de JavaScript pour le contrôle de saisie.
• ACTION : Adresse (URL ou e-mail) vers laquelle les données saisies vont être
envoyées.
Exemples :
1. ACTION = "[Link]
2. ACTION = "mailto :webmaster@[Link]“

• METHOD : Il existe deux types de méthodes d‟envoi du contenu du formulaire :


1. GET : Elle correspond à un envoi des données codées dans l'URL, et
séparées de l'adresse du script par un point d'interrogation.
2. POST : Le contenu du formulaire est envoyé au serveur en tant que
bloc de données pour y être traité par le CGI qui le recevra. Elle
correspond à un envoi de données stockées dans le corps de la re8q3uête.
LA BALISE <FORM>

GET est la méthode par défaut. Toutefois, la méthode POST est plus efficace et
permet le traitement d'une quantité plus importante de données. C'est donc cette
dernière qui est presque toujours utilisée. La méthode GET devrait n'être employée
que dans le cas de formulaires très simples et ne contenant pas un mot de passe.
• ENCTYPE : Spécifie l'encodage utilisé pour la forme que prendra le contenu du
formulaire. Ce paramètre ne peut être utilisé qu'accompagné par la méthode POST.
ENCTYPE peut prendre plusieurs valeurs, tel que décrit dans les lignes ci-dessous:
1. ENCTYPE="application/x-www-form-urlencoded"
Valeur par défaut; encode le contenu du formulaire selon une forme URL
qui est difficilement lisible par le destinataire.
1. ENCTYPE="text/plain"
Le contenu du formulaire sera retourné en format texte lisible par le
destinataire. Cette option accompagne ACTION="[Link]
1. ENCTYPE="multipart/form-data"
Permet d'expédier un fichier attaché au message.

84
LA BALISE FORM (SUITE)

La balise FORM constitue en quelque sorte un conteneur permettant de


regrouper des éléments qui vont permettre à l'utilisateur de choisir ou
de saisir des données, ensemble de données qui seront envoyées à
l'URL indiqué dans l'attribut ACTION de la balise FORM par la
méthode indiquée par l'attribut METHOD. Il est possible d'insérer
n'importe quel élément HTML de base dans une balise FORM (textes,
boutons, tableaux, liens,...) mais il est surtout intéressant d'insérer des
éléments interactifs. Ces éléments interactifs sont:

• La balise INPUT: un ensemble de boutons et de champs de saisie


• La balise TEXTAREA: une zone de saisie
• La balise SELECT: une liste à choix multiples

85
LA BALISE <INPUT>

La balise INPUT est la balise essentielle des formulaires, car elle permet de créer un
bon nombre d'éléments "interactifs".
Syntaxe :
<INPUT TYPE="Type du champ" VALUE="Valeur par défaut" NAME="Nom de
l'élément">
• L'attribut NAME est essentiel car il permettra au script CGI de connaître le champ
associé à la paire nom/valeur, c'est-à-dire que le nom du champ sera suivi du caractère
"=" puis de la valeur entrée par l'utilisateur ou dans le cas contraire de la valeur par
défaut repéré par l'attribut VALUE.
• L'attribut TYPE permet de préciser le type d'élément que représente la balise INPUT,
les valeurs que ce champ peut prendre sont : TEXT, CHECKBOX, HIDDEN, RADIO,
PASSWORD, FILE, RESET, SUBMIT, BUTTON, …

86
LA BALISE <INPUT> (SUITE)
• TEXT: il s'agit d'un champ de saisie de texte. La taille du champ peut être définie à l'aide de
l'attribut SIZE et la taille maximale du texte saisi grâce à l'attribut MAXLENGTH.
• Syntaxe :
<INPUT TYPE="text" NAME="nom_du_champ" SIZE="taille"
MAXLENGTH="taille_maximum" VALUE="texte_par_défaut">
• Exemple : Votre nom : Mohamed
Votre nom : <INPUT TYPE="text" NAME="nom" SIZE="40" MAXLENGTH="50"
Value= "Mohamed">

• CHECKBOX: il s'agit de cases à cocher pouvant admettre un état: CHECKED (coché). Par
défaut, la case est non cochée. Lorsque la case est cochée la paire nom/valeur est envoyée au
CGI.
Vos sports préférés : <BR>
<INPUT TYPE="checkbox" NAME=" Natation" VALUE="natation" CHECKED
> Natation <BR>
<INPUT TYPE="checkbox" NAME="Cyclisme"
VALUE="cyclisme">Cyclisme<BR>
<INPUT TYPE="checkbox" NAME=" ski " VALUE="ski">Ski<BR>
<INPUT TYPE="checkbox" NAME=" petanque" VALUE="petanque"
CHECKED>Pétanque<BR>
<INPUT TYPE="checkbox" NAME=" Basket" VALUE="basket">Basket 87
LA BALISE <INPUT> (SUITE)
• RADIO: il s'agit d'un bouton permettant un choix parmi plusieurs. L'ensemble des boutons
radios doivent porter la même valeur pour l‟attribut NAME. Un attribut CHECKED pour un des
boutons permet de préciser le bouton sélectionné par défaut.
• Syntaxe :
<INPUT TYPE="radio" NAME="nom_du_groupe" VALUE="valeur" [CHECKED]>
• Exemple :
Votre qualité : <BR>
<INPUTTYPE="radio" NAME="qualite" VALUE="M" CHECKED > Monsieur<BR>
<INPUT TYPE="radio" NAME="qualite" VALUE ="Mme"> Madame<BR>
<INPUT TYPE="radio" NAME="qualite" VALUE="Mlle">Mademoiselle

• PASSWORD: il s'agit d'un champ de saisie, dans lequel les caractères saisis
apparaissent sous forme d'astérisques ou de points afin de cacher la saisie.
• Syntaxe :
<INPUT TYPE="password" NAME="nom_du_champ" SIZE="taille" MAXLENGTH=
"taille_maximum">
• Exemple :
Votre mot de passe : <INPUT TYPE="password" NAME="secret" SIZE="8"
MAXLENGTH="8"> 88
LA BALISE <INPUT> (SUITE)

• HIDDEN: Il permet d'inclure des données cachées permettant de savoir de


quel formulaire viennent les données ou d'insérer des données issues de
calculs ou encore des données provenant de JavaScript indiquant le
navigateur, l'adresse IP, le nombre de visites ou tout autre renseignement sur le
visiteur...
Pour cela on utilise la balise <INPUT TYPE="hidden"> dont les attributs
sont NAME : nom du champ caché et VALUE le contenu du champ c'est-à-
dire sa valeur. Ce champ ne sera pas vu par l'internaute mais il sera inclus
parmi les données.
• Syntaxe :
<INPUT TYPE="hidden" NAME="nom_du_champ "
VALUE="valeur">
• Exemple :
[ invisible ] <INPUT TYPE="hidden" NAME="Origine"
VALUE="CyberZoïde">

89
LA BALISE <INPUT> (SUITE)

• FILE : Utilisé pour sélectionner un fichier afin de l‟envoyer.

• Syntaxe :
<FORM NAME="nom_du_formulaire" ACTION="[Link]
METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="nom_du_champ" SIZE="taille">
</FORM>
• L'attribut SIZE a pour valeur la taille (en caractères) du champ correspondant.
• Ce champ sera suivi d'un bouton qui permet d'ouvrir une boite de dialogue Open
pour choisir le fichier.
• Il faut changer la valeur de l'attribut ENCTYPE du conteneur FORM en
MULTIPART/FORM-DATA.

• Exemple :
<FORM NAME="cyberform“
ACTION="[Link] METHOD="post"
ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="fichier" SIZE=40>
</FORM>

90
LA BALISE <INPUT> (SUITE)

• RESET: il s'agit d'un bouton de remise à zéro permettant uniquement de rétablir


l'ensemble des éléments du formulaire à leurs valeurs par défaut.
• Syntaxe : <INPUT TYPE="reset" VALUE="texte_à_afficher">
• Exemple : <INPUT TYPE="reset" VALUE="Effacer">
• Résultat :

• SUBMIT: il s'agit du bouton de soumission permettant l'envoi du formulaire. Le


texte du bouton peut être précisé grâce à l'attribut value
• Syntaxe : <INPUT TYPE="submit" VALUE="texte_à_afficher">
• Exemple : <INPUT TYPE="submit" VALUE="Envoyer">
• Résultat :

91
LA BALISE <INPUT> (SUITE)

• BUTTON : Pour des besoins de contrôle du formulaire avec JavaScript, vous pouvez
être amené à créer un bouton qui ne soit dédié ni à l'envoi du formulaire ni à sa ré-
initialisation. L'utilisation de la balise <INPUT TYPE="button"> fera apparaître un bouton
simple qui peut appeler une fonction JavaScript.

• Syntaxe : <INPUT TYPE="button" VALUE="texte_à_afficher"


onClick="fonction_JavaScript()">
• Exemple :
<INPUT TYPE="button" VALUE="Cliquez ici !" onClick="functiontjs([Link])">
<INPUT TYPE="text" NAME="texte">
• Résultat :

92
LA BALISE <SELECT>

• Quand on a un choix à faire entre plusieurs valeurs différentes, il vaut


mieux utiliser les listes déroulantes avec le conteneur <SELECT> dont les
attributs sont NAME : le nom de la liste, SIZE (facultatif) dont la valeur
(unité par défaut) signifie qu'on a affaire à une liste déroulante sinon c'est
une liste normale mais avec barre de défilement, MULTIPLE (facultatif)
qui signifie qu'il est possible de sélectionner plusieurs valeurs. Si
MULTIPLE n'est pas spécifié, il ne sera possible de faire qu'un seul et
unique choix.
• Le conteneur <SELECT> en lui-même ne suffit pas, il faut lui rajouter
autant de balises <OPTION> qu'il y a de choix possibles. Les attributs de
cette dernière sont VALUE : valeur du choix sélectionnable c'est-à-dire le
texte qui sera inscrit dans le champ portant le nom de la liste et
SELECTED (facultatif) qui signifie que le choix correspondant sera
sélectionné par défaut.
Syntaxe :
<SELECT NAME="nom_de_la_liste" [SIZE] [MULTIPLE]>
<OPTION VALUE="valeur_1">Choix_1 </OPTION>
<OPTION VALUE="valeur_2">Choix_2 </OPTION>
<OPTION VALUE="valeur_X" [SELECTED]>Choix_X</OPTION> 93
</SELECT>
LA BALISE <SELECT>

CODE Résultat
<select name="menu">
<option value = "pomme" selected> Pomme</option>
<option value="banane"> Banane</option>
<option value="orange"> Orange</option>
<option value="citron" > Citron</option>
</select>

<select name="menu" size=3>


<option value = "pomme"> Pomme</option>
<option value="banane"> Banane</option>
<option value="orange"> Orange</option>
<option value="citron" selected> Citron</option>
</select>
<select name="menu" size=3 multiple>
<option value = "pomme"> Pomme</option>
<option value="banane"> Banane</option>
<option value="orange"> Orange</option>
<option value="citron" selected> Citron</option>
</select>
94
BALISE <TEXTAREA>

On utilise le conteneur <TEXTAREA> pour avoir un espace multi-lignes et écrire un


commentaire assez long.
• Attributs :
• NAME : le nom du champ,
• ROWS : le nombres de lignes,
• COLS : le nombres de colonnes,
• READONLY : le champs se trouve alors en mode lecture seule c'est-à-dire que le texte par
défaut qui s'y trouve ne peut en être effacé.
Si dans votre code vous insérez du texte entre les balises <TEXTAREA> et </TEXTAREA>,
alors il se trouvera par défaut dans le champ. Si le texte est plus grand que la zone de texte, des
barres de défilement apparaissent.
<TEXTAREA> se comporte comme la balise <PRE> à l'égard du texte par défaut, c'est-à-dire
que si dans le code vous sautez des lignes, alors ces sauts de lignes se répercuteront lors de
l'affichage dans le champ multi-ligne.
• Syntaxe :
<TEXTAREA NAME="nom_du_champ" ROWS="nombre_de_lignes"
COLS="nombre_de_colonnes" >
texte par défaut 95

</TEXTAREA>
BALISE <TEXTAREA> (EXEMPLE)

Code Résultat
Voici ce que je pense des Voici ce que je pense des formulaires :
formulaires :
<TEXTAREA
NAME="pense" C'est un outil génial pour les ventes de produits sur Internet
ROWS="5" COLS="50"
READONLY> C'est un
outil génial pour les
ventes de produits sur
Internet
</TEXTAREA>

96
LES FRAMES (CADRES)

1. UTILITE
2. JEU DE CADRES <FRAMESET>
3. LA BALISE <FRAME >
4. LIENS VERS D’AUTRES CADRES
5. UTILISATION DES CADRES

97
UTILITE

• Les cadres permettent une mise en page homogène


pour l‟ensemble du site.
1. Chaque cadre contient un fichier HTML spécifique.
2. Les différentes zones de la page peuvent donc être définies
de manière indépendante.
• Cette technique est très utile lors du prototypage du
site.
1. Elle permet de construire rapidement les différentes pages
et de tester la navigation dans le site.
• Mais elle est à éviter pour la version finale du site, car
elle pose de nombreux problèmes d‟utilisation

98
LE JEU DE CADRES <FRAMESET>

• Lorsque le site utilise un jeu de cadres, l‟entrée sur le site se fait par la page définissant le
positionnement des différents cadres.
1. Sur la page d'entrée, la balise <FRAMESET> prend la place du tag <BODY>.
• <FRAMESET> prend les arguments suivants :
1. ROWS et COLS définissent le type de cadre, horizontal (ROWS) ou
vertical (COLS). Ces attributs sont suivis les largeurs ou hauteurs des
cadres en valeur absolue (pixels), relative (% de la page) ou automatique
(*) :
a) <FRAMESET COLS="20%,80%"> : 2 colonnes de largeur 20% et
80% de la page
b) <FRAMESET ROWS="50,*"> : deux lignes, l'une d'une largeur de
50 pixels et l'autre s'ajustant automatiquement à la hauteur de la
fenêtre.
2. FRAMEBORDER : Bordure des cadres (valeur :YES ou NO)
3. BORDER=« n » : Taille de la bordure des cadres en pixels
4. BORDERCOLOR : Couleur de la bordure
5. FRAMESPACING : Espace entre les cadres en pixels
• Les balises <NOFRAME> et </NOFRAME> délimitent le code HTML interprété par les
navigateurs ne comprenant pas les cadres.
99
LE JEU DE CADRES (EXEMPLE)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
<html><head><title>Frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<frameset rows="100,*" cols="*" frameborder="yes" border="1" framespacing="0">
<frame src="[Link]" name="topFrame" scrolling="NO" noresize > <frameset
cols="80,*" frameborder="Yes" border="1" framespacing="0"> <frame
src="[Link]" name="leftFrame" scrolling="NO" noresize> <frame
src="[Link]" name="mainFrame">
</frameset>
</frameset>
<noframes>
<BODY>
<p>Votre navigateur ne reconnaît pas la technique
utilisée pour la mise en page de ce site.</p>
<p>Merci d‟utiliser cette
<a href=[Link]>autreversion.</a></p>
</BODY>
</noframes> 100
</html>
LA BALISE <FRAME>

La balise FRAME définit un cadre à l'intérieur d‟un jeu (<FRAMESET>)


Attributs :
1. SRC : indique l'URL (chemin) du document HTML qui sera affiché
dans le cadre
2. NAME : Définit le nom logique du cadre
3. MARGINWIDTH et MARGINHEIGHT : Marge du cadre en pixels.
4. FRAMEBORDER : Bordure du cadre (YES ou NO).
5. NORESIZE : Permet d‟empêcher le redimensionnement d‟un cadre.
6. SCROLLING : Associe une barre de défilement à un cadre. Il possède
trois valeurs :
a) YES : toujours visible.
b) NO : jamais visible
c) AUTO : apparaît si le contenu de la page dépasse la taille
du cadre

101
LIENS VERS D'AUTRES CADRES (TARGET)

L'attribut TARGET de la balise A HREF permet de préciser le cadre dans


lequel va s‟afficher le document :
• TARGET=« nom_du_cadre » : le document s‟affiche dans le cadre
appelé “nom_de_cadre”
• TARGET=« _self » : Affichage dans le même cadre que le lien
• TARGET=« _parent» : Affichage dans le cadre contenant le jeu de
cadres parent (cas des jeux de cadres imbriqués)
• TARGET=« _blank» : Le document s'affiche dans une nouvelle
fenêtre du navigateur
En l‟absence de cet attribut, les pages s'affichent dans le même cadre que le
lien.
Exemple: (jeu de cadres défini précédemment)
<a href="[Link]">lien 1</a>
<a href="[Link]" target="mainFrame">lien 2</a>

102
UTILISABILITE DES CADRES

• En règle générale, éviter les cadres (frames)


1. Problèmes de navigation (back), d'impression et de signets
• A utiliser lorsque :
1. les visiteurs sont familiers du Web
2. le contenu est susceptible d'être souvent modifié
• Exemple:

103
LES IMAGES CLIQUABLES
<IMG SRC= "images/[Link] " USEMAP= "#plan " >
<MAP NAME= "plan">
<AREA SHAPE="RECT" NOHREF COORDS=20,20,60,60>
<AREA SHAPE="CIRCLE" HREF="../../bookmark/[Link]"
COORDS=120,70,70>
<AREA SHAPE="RECT" HREF="../../bookmark/[Link]"
COORDS=130,100,270,250>
<AREA SHAPE="POLY" HREF="../../bookmark/[Link]"
COORDS=60,120,90,265,260,180,260,30,145,30>
<AREA SHAPE="DEFAULT" HREF="../../bookmark/[Link]">
</MAP>

104
LES IMAGES CLIQUABLES (SUITE)

• Image cliquable sous forme de plan


1. définition d‟un plan (<MAP> …. </MAP>)
2. chaque zone du plan (<AREA> </AREA>)
a) a une forme : rectangle, cercle ou polygone
b) est associée à une URL
3. plaquage du plan sur l‟image (<IMG USEMAP = "… ">)
• Les coordonnées à préciser
1. rectangle : coordonnées des coins supérieurs gauche et inférieur droit
2. cercle : coordonnées du centre et du rayon
3. polygone : coordonnées de tous les coins
• Définition d‟un lien (<A HREF= "… ") autour d‟une image (<IMG
SRC= "… "> )
L‟image acquiert un cadre bleu (<IMG BORDER=0 … > enlève le cadre).
Un clic sur l‟image provoque le chargement du lien

105

Vous aimerez peut-être aussi