[PDF] Cours le marquage XHTML methodes et application | Cours xhtml

(1)

M

ODULE

: I

NFORMATIQUE APPLIQUÉE

Chapitre 1 :

Le langage HTML

Enseignant : Hatem Sandid

(2)

P

LAN DU COURS

Introduction

Définition

Structure d’un document

Les titres/Les listes

Fond de page et couleur du texte

La mise en forme du texte

Le lien hypertexte

Les images

Les tableaux

Les frames

Les formulaires

Exercice d’application

2

(3)

I

NTRODUTION

Internet offre un formidable moyen de communication à travers le monde en

interconnectant des millions d'ordinateurs. C’est un moyen d’accès à une masse

indescriptible d’informations, un outil de collaboration permettant l’apprentissage et

aussi le support des compétences de personnes à travers le monde.

Internet offre plusieurs services, parmi lesquels on trouve :

Echanger du courrier et des documents électroniques :

en utilisant le

protocole : Simple Mail Transfer Protocol (SMTP).

Transférer des fichiers d'une machine à une autre :

en utilisant le protocole

:

File Transfer Protocol (FTP).

Participer à des groupes de discussion :

en utilisant le protocole :

News Network Transfer Protocol (NNTP).

Accéder à des pages hypertexte et hypermédia :

Ce service, nommé World

Wide Web ou WWW, permet d'accéder à des sites Web en utilisant le protocole :

Hyper Text Transfer Protocol (HTTP).

(4)

I

NTRODUTION

Un site web est un ensemble de pages Web reliées par des liens hypertextes et gérées par une seule compagnie, organisation, ou par un individu.

Un site Web est identifié par son adresse, appelée URL. exemple: http://www.isetso.rnu.tn

http:// étant le protocole qui assure l’échange des pages entre les serveurs Web.

www.isetso.rnu.tn étant le Nom de domaine. La page est stockée sur un serveur web. Elle est repérée sur le réseau Internet par un nom de domaine. A chaque nom correspond une adresse IP. Les fournisseurs de services Internet (ou providers) disposent de serveurs DNS pour convertir les noms de domaine en adresses IP.

Une page Web est écrite en langage HTML (Hyper Text Mark-up Language) et peut contenir du texte, des images (statiques ou animées), des séquences vidéos, du son et des (hyper)liens. Ces liens permettent de passer d’une page Web à une autre (située éventuellement à l’autre bout du monde).

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

Exemple:

http://www.isetso.rnu.tn/index.html

4

(5)

I

NTRODUTION

De

ux méthodes sont possibles pour créer des fichiers HTML :

Avec un éditeur de texte (ex : Bloc-notes), dans lequel vous devrez tout saisir (les

balises et le texte) ;

Avec un rédacteur de page HTML WYSIWYG (What You See Is What You Get) (ex. :

FrontPage, DreamWeaver, etc.), qui utilise le principe de « drag & drop » pour insérer

des objets dans le document HTML comme un traitement de texte WYSIWYG (ex. :

MS Word) et ajoute donc automatiquement les balises HTML au fur et à mesure de

l’insertion.

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

ex.:

Opera,

Safari,

Mozilla Firefox, Netscape, Google Chrome, Internet

Explorer

(6)

HTML: D

ÉFINITION

HTML = Hypertext Markup Language – en anglais

(ou langage de balisage d’hypertexte - en français)

Hypertext :

contient des liens appelés liens hypertexte

ou hyperlien permettant de passer d’un document à un

autre.

Markup :

balisage

Une balise est un délimiteur de texte constitué d’un caractère

ou d’un mot encadré par les signes inférieur et supérieur (<, >).

Les navigateurs Web établissent une correspondance entre une

balise et des instructions de formatage.

Exemple:

(7)

HTML : S

TRUCTURE D

’

UN DOCUMENT

Un document HTML est composé de texte et de commandes (balise ou tag en anglais).

Ces commandes permettent de mettre en forme le texte (Titre, caractère gras,

italique, image, liens, etc...).

Chaque document HTML doit être écrit entre les balises

HTML

.

Entre les balises

HEAD

vous devez mettre tout ce qui concerne l'environnement de

votre page, le titre, les couleurs du texte, les liens et autres informations. Ces

éléments n'apparaissent pas directement dans la page.

Les balises

TITLE

permettent de faire apparaître dans la zone titre de votre

navigateur le texte que vous insérez entre ces balises.

Entre les balises

BODY

vous insérez les éléments qui constitueront votre page, les

informations texte, images, liens, le fond d'écran, les formulaires, etc.

(8)

HTML: S

TRUCTURE D

’

UN DOCUMENT

(9)

HTML: R

ÈGLES DE BALISAGES

o Deux types de balises :

o Autonome <…> (ex. <IMG src="image.jpg">) o Délimitant une zone

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

o Identifiants de balises non sensibles à la casse : ils peuvent être écrits en minuscules ou en majuscules.

(<BODY> = <Body>)

o Certaines balises sont associées à un ou plusieurs attributs ; Chaque attribut est un paramètre qui fournit des

indications à une balise. Il possède un nom et, très souvent, une valeur à préciser (nom=‘‘valeur’’),

9

indications à une balise. Il possède un nom et, très souvent, une valeur à préciser (nom=‘‘valeur’’),

exemple : <IMG src="photo.gif"> où le nom de l’attribut est « src » et sa valeur est « photo.gif »

o N.B. : Les espaces et les retours à la ligne dans un texte tapé ne sont pas interprétés par les navigateurs.

o Commentaires : 

o Les couleurs sont définies :

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

o soit par 6 chiffres hexadécimaux représentant 2 à 2 les tons de Rouge, de Vert et de Bleu tel que :

couleur="#RRVVBB" où R, V et B représentent respectivement un chiffre hexadécimal entre 0 et F

(10)

C

ODAGE DES COULEURS

Nom de la couleur Codage RVB Aperçu aqua #00FFFF black #000000 blue #0000FF fuchsia #FF00FF gainsboro #DCDCDC ghostwhite #F8F8FF

Caractère Code HTML

"

C

ODAGE DES

CARACTÈRES

SPÉCIAUX

Lorsque ces caractères sont utilisés

dans un texte contenu dans une page

web, il est donc impératif de les coder en

HTML, au risque sinon de provoquer une

erreur d'affichage dans le navigateur.

10 ghostwhite #F8F8FF gold #FFD700 goldenrod #DAA520 gray #808080 green #008000 greenyellow #ADFF2F honeydew #F0FFF0 mediumsea green #3CB371 yellow #FFFF00 yellowgreen #9ACD32

"

&

‹

<

›

>

&

espace

 

ç

è

é

à

ù

(11)

HTML :

BALISES DE TITRE

Les balises

H1

,

H2

,

H3

,

H4

,

H5

et

H6

sont

des styles de mise en forme du texte.

La balise

H1

a la valeur la plus importante

(écriture plus large ...) et la balise

H6

a la

valeur la moins importante.

<html>

<head> <title> test des titres </title> </head>

Format Résultat

<H1>Taille 1</H1> Taille 1

<H2>Taille 2</H2>

_{Taille 2}

<H3>Taille 3</H3> _{Taille 3} <H4>Taille 4</H4> _{Taille 4} <H5>Taille 5</H5> _{Taille 5} <H6>Taille 6</H6> Taille 6

<body bgcolor="pink ">

<h1>Bienvenue sur ma page !</h1>

<p>Petite introduction sur ce site.</p>

<h2>Première partie</h2>

<p>Un paragraphe intéressant</p>

<p>Un autre paragraphe.</p>

<h3>Première sous-partie</h3>

<p>Un paragraphe court.</p>

<p>Un autre plus long.</p>

etc.

</body>

</html>

(12)

B

ALISES DE STYLE

Balise de style Effet Visuel

<B> ou <strong> Met la police en gras (bold)

<I> Italique (italic)

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

<SAMP> Exemple

<SMALL> Police plus petite

Les balises de style modifient la typographie du texte. Elles peuvent être imbriquées

dans d'autres balises de style de la même façon qu'on le ferait avec un traitement de

texte.

12

<BIG>

Police plus grande

Texte souligné (underline)

<SUB> Texte en _Indice

<SUP> Texte en Exposant

<TT> Caractère de machine à écrire

<VAR> Nom d'une variable

écrire une adresse en dessous de la ligne

<CITE> Citation

<CODE> Instruction

(13)

M

ISE EN FORME DU TEXTE

Saut de paragraphe <P> … </P>

A la ligne [Line break] <BR>

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

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

Style du texte: < FONT >

et

</ FONT >

pour modifier l'apparence du texte

Style du texte: < FONT >

et

</ FONT >

pour modifier l'apparence du texte

Taille de caractère [Font size]: de 1 à 7 ou bien de -2 à +4

<FONT SIZE=4>…</FONT>

Couleur du caractère [Font color]:

<FONT COLOR="#$$$$$$ "> … </FONT>

Police [Font face]:

<FONT FACE ="Arial, Times New Roman" > … </FONT>

Texte pré-formaté : <PRE>

et

</PRE> :

PRE affiche le texte contenu dans ses

balises tel qu'il est écrit en respectant les espaces, les tabulations et les sauts à la

ligne.

N.B. : Il n'est pas possible d'afficher des images à l'intérieur du tag PRE.

(14)

D

IFFÉRENCE D

’

AFFICHAGE ENTRE LES NAVIGATEURS

Internet Explorer

Opera

14

(15)

M

ISE EN FORME DU TEXTE

Les couleurs

<HTML>

<HEAD>

<TITLE>Texte en couleurs</TITLE>

15

<TITLE>Texte en couleurs</TITLE>

</HEAD>

<BODY>

<FONT color="red">Rouge</FONT> <BR>

<FONT color="#FF0000">Rouge</FONT> <BR>

<FONT color="green">Vert</FONT> <BR>

<FONT color="#008000">Vert</FONT> <BR>

<FONT color="blue">Bleu</FONT> <BR>

<FONT color="#0000FF">Bleu</FONT> <BR>

<FONT color="yellow">Jaune</FONT> <BR>

<FONT color="#FFFF00">Jaune</FONT> <BR>

</BODY>

</HTML>

(16)

M

ISE EN FORME DU TEXTE

Les tailles et les polices

<TITLE>Taille et police du textes</TITLE> </HEAD>

<BODY>

<FONT size=7>Taille 7</FONT> <BR> <FONT size=6>Taille 6</FONT> <BR> <FONT size=5>Taille 5</FONT> <BR> <FONT size=4>Taille 4</FONT> <BR>

<FONT size=3>Taille 3 (par défaut)</FONT> <BR> <FONT size=2>Taille 2</FONT> <BR>

<FONT size=2>Taille 2</FONT> <BR> <FONT size=1>Taille 1</FONT> <BR> <BR>

<FONT size="+4">Taille +4</FONT> <BR> <FONT size="+3">Taille +3</FONT> <BR> <FONT size="+2">Taille +2</FONT> <BR> <FONT size="+1">Taille +1</FONT> <BR> Taille par défaut ( => 3 ) <BR>

<FONT size="-1">Taille -1</FONT> <BR> <FONT size="-2">Taille -2</FONT> <BR>

<FONT size=4 face="Verdana">Taille 4 en Verdana</FONT> <BR>

<FONT size=3 face="Comic sans MS">Taille 3 en Comic sans MS</FONT> <BR> <FONT face="Arial, Times New Roman" color="#336699">Taille normal en Arial si la police existe sinon en Times New Roman en couleur #336699</FONT> <BR> </BODY>

</HTML>

(17)

M

ISE EN FORME DU TEXTE

Position, soulignement, forme du texte

<TITLE>Texte en gras, italique, centré</TITLE> </HEAD> <BODY> <B>texte en gras</B> <BR> <I>texte en italique</I> <BR> <U>texte souligné</U> <BR> <CENTER>texte centre</CENTER> <BR>

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

<BR>

<B> <CENTER> <FONT color="red" size=2> texte en rouge, gras, centré de taille 2 </FONT> </CENTER> </B> <BR>

</BODY> </HTML>

(18)

M

ISE EN FORME DU TEXTE

: P

ARAGRAPHE ET RETRAIT

<p> … </p>

avec l'attribut

"align"

: permet de créer un paragraphe avec du texte aligné

soit à gauche

("left"),

à droite

("right"),

au centre

("center")

ou en justifié

("justify").

<blockquote>…</blockquote>

: permet de décaler un bloc de texte par rapport au bord

gauche

<HTML>

<HEAD> <TITLE> Paragraphes et retraits</TITLE>

</HEAD> <BODY>

Paragraphes : <BR>

Vous pouvez former des paragraphes si vous le

souhaitez avec des alignements différents

<P align="right">texte aligné à droite</P> <BR>

<P align="center">texte aligné au centre</P> <BR>

<P align="left">texte aligné à gauche</P> <BR>

<P align="justify">texte justifié : Ceci est un texte

justifié suivi de deux lignes vides</P> <BR><br>

retrait de texte : <BR>

<BLOCKQUOTE>votre texte</BLOCKQUOTE><br>

</BODY> </HTML>

(19)

F

OND DE PAGE ET COULEUR DU TEXTE

1. Le fond d’une page

: vous pouvez mettre un fond uni en codant la couleur grâce à l'option BGCOLORou bien une image grâce à l'option BACKGROUND.

L'option BGCOLOR : la balise à utiliser est <BODY BGCOLOR =

#nombre_héxadécimal>; exemple : <BODY BGCOLOR=#808080> ou <BODY BGCOLOR="red">

N.B. : La couleur peut être aussi définie avec un mot clé précisant le nom d’une couleur en anglais.

L'option BACKGROUND : la balise à utiliser est <BODY BACKGROUND = "image"> ; exemple : <BODY BACKGROUND="bgr.jpg">

2. La couleur du texte

: comprend plusieurs options, à savoir :

L'option TEXT : cette option permet de positionner la couleur du texte standard (hors lien). L'option TEXT : cette option permet de positionner la couleur du texte standard (hors lien). Par défaut la couleur est noire. Syntaxe : <BODY TEXT = "#nombre_héxadécimal"> L'option LINK : cette option permet de positionner la couleur d'un lien ou ancre qui n'a pas encore été visité. Par défaut la couleur est bleue. Syntaxe :

<BODY LINK = "#nombre_héxadécimal">

N.B. : Les liens permettent de faire la liaison entre les pages web et de naviguer dans un site web.

L'option VLINK (Visited Link) : cette option permet de positionner la couleur d'un lien ou ancre qui a déjà été visité. Par défaut la couleur est violette. Syntaxe :

<BODY VLINK = "#nombre_héxadécimal">

L'option ALINK (Active Link) : cette option permet de positionner la couleur

d'un lien ou ancre au moment où l'on clique dessus. Par défaut la couleur est rouge. Syntaxe: <BODY ALINK = "#nombre_héxadécimal">

(20)

HTML: L

ES

L

ISTES

HTML définit 3 types de liste : ordonnée, non ordonnée et de définition.

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

2. Liste ordonnée [Ordered list] : <OL>…</OL>

Elles utilisent toutes les deux des éléments de liste [List items] : <LI>

Exemple :

<H1>Les mois du printemps</H1>

<UL>

<LI> avril

<LI> mai

<LI> juin

</UL>

<H3>Les mois d’automne</H3>

<OL>

<LI> octobre

<LI> novembre

<LI> décembre

</OL>

20

(21)

HTML: L

ES

L

ISTES

Conteneur

Effet Visuel

<dl>

<dt>Terme</dt>

<dd>Définition</dd>

</dl>

article 1

définition 1

article 2

définition 2

Attribut

Valeur

Effet Visuel

TYPE (pour les listes ordonnées)

1 A

a

numérotation chiffrée (par défaut)

numérotation en capitales

numérotation en bas de casse

Il existe des attributs spécifiques aux listes

3. Liste de définition

<DL>…</DL> : Definition List

<DT>…</DT> : Definition Term

<DD>…</DD> : Definition Data

21

TYPE (pour les listes ordonnées)

a

I

i

numérotation en bas de casse

numérotation en chiffres romains (I, II, III, IV ...)

numérotation en chiffres romains en bas de casse

TYPE (pour les listes non-ordonnées)

circle

square

disc

o

puce circulaire

puce carrée

•

puce en disque

Exemple : <dl> <dt>clavier</dt>

<dd>un périphérique d’entrée de l’ordinateur composé de touches envoyant des instructions à la machine une fois actionnées.</dd>

<dt>écran</dt>

<dd>un périphérique de sortie qui permet la communication visuelle avec l'utilisateur </dd> </dl>

(22)

HTML: L

E LIEN HYPERTEXTE

C’est un texte établissant un lien vers un autre document.

Il permet de faire la liaison entre les pages web et de naviguer

dans un site web.

Trois types de liens existent :

- Les liens

internes à un site

(utilisation très fréquente des

chemins relatifs car plus court à taper).

- Les liens

internes à une page (ou ancre)

(=> utilisation

- Les liens

internes à une page (ou ancre)

(=> utilisation

de chemins absolus ou relatifs).

- Les liens

externes

(uniquement des chemins absolus !)

<a>

et

</a>

: permettent de créer un lien hypertexte.

Son attribut indispensable est "

href

" : il spécifie

l’emplacement (ou URL «Uniform Resource Locator ») du

document à afficher. Il peut spécifier l'URL d’une image, d'un

fichier ZIP, d'une vidéo MPEG ou tout simplement d'un autre

document HTML.

(23)

S

YNTAXE D

’

UN LIEN

Il faut savoir qu'un lien est tout d'abord composé d'un protocole :

http:\\ est utilisé pour accéder au contenu d’un serveur web

...

mailto: permet d'ouvrir la messagerie du lecteur.

ftp:\\ est utilisé pour accéder au contenu d’un serveur de

transfert de fichiers.

file:/// sert à chercher un fichier sur sa propre machine, sans

pour autant être connecté à l'Internet.

…

Exemple : ajout d’une adresse électronique

<A HREF = "mailto:

contact@compagnie.com"

>

Commentaires

</A>

lorsque vous cliquerez sur "Commentaires" une fenêtre vous

permettant d'envoyer un courrier électronique s'affichera

contenant l'adresse électronique spécifiée après le « mailto ».

23

(24)

S

YNTAXE D

’

UN LIEN

URL absolue et URL relative :

On parle d’URL absolue, c'est lorsque vous indiquez la totalité de l'adresse du lien.

Les URL relatives sont indiquées par rapport au dossier contenant le document source.

Si vous établissez un lien vers une page Web n'appartenant pas à votre site, vous devez spécifier une URL absolue.

En théorie, une URL absolue est beaucoup plus longue à se charger. On emploiera donc le plus possible des URL relatives.

Exemples :

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

En utilisant une URL absolue :

<a href="file:///C:/TI11/Programmation-Web/TP1/poisson/poisson.html"> <h3> poisson </h3></a>

En utilisant une URL relative :

<a href="poisson/poisson.html" ><h3> poisson </h3></a> Pour créer un lien de la page « poisson.html » vers la page « index.html »

En utilisant une URL absolue :

<a href="file:///C:/TI11/Programmation-Web/TP1/index.html"> <h3> retour à la page d’accueil /h3></a>

En utilisant une URL relative :

<a href="../index.html"> Retour à la page d'accueil </a>

(25)

HTML: L

ES LIENS HYPERTEXTES

Lien externe

<HTML>

<HEAD>

<TITLE>Les liens hypertextes</TITLE>

</HEAD>

<BODY>

<BR><BR>

<A href="http:\\www.google.tn"> Lien vers le site google

</A>

<BR><BR><BR>

</BODY>

</HTML>

(26)

HTML: L

ES LIENS HYPERTEXTES

Liens internes (ancres) exemple

On peut créer un signet (ancre) dans une page c'est-à-dire marquer un endroit précis

d'une page pour s'y rendre par hypertexte. Cela se fait grâce à l'attribut NAME ou ID

<HTML>

<HEAD> <TITLE> Les liens hypertextes </TITLE> </HEAD> <BODY>

<A href="

#

ancre1"> Lien vers l'ancre 1 </A>

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<A

name

="ancre1"> Texte </A>

<BR><BR>

Pour finir, on peut très bien accéder à un ancre d'une page située sur un

autre site en utilisant donc une URL suivie d'un ancre.

<A href="http:\\www.un-autre-site.com/repertoire/fichier.html#nom_ancre">

lien vers un ancre sur une page d'un site extérieure </A>

</BODY> </HTML>

(27)

HTML: L

ES LIENS HYPERTEXTES

Liens internes (ancres) :

on peut marquer un paragraphe avec autre chose que la balise <A>,

c'est la qu'intervient l'attribut commun id détaillé comme suit :

Exemple :

<H2 id="TitrePage"> Les liens </H2>

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

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

Vous l'aurez compris, cliquer sur ce lien aura pour effet de retourner

(28)

HTML: L

ES IMAGES

<img>

: insère une image dans votre page (N.B. : pas de balise de fin pour l’image.)

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

Height="h" Width="w" TITLE="titre_img" VSPACE="vv" HSPACE="hh">

F el h i, G a ll a s, H a m ed & K er k en i

Attribut Valeur _Résultat

SRC Adr_img (attribut obligatoire) précise le chemin (l’URL ou l’adresse) de

l'image.

ALIGN Center, right ou left

bottom, middle ou top Définit l’alignement de l'image dans la page.

28 F el h i, G a ll a s, H a m ed & K er k en i ALIGN

bottom, middle ou top Définit l’alignement de l'image dans la page.

ALT titre_abs Texte alternatif qui sera affiché si l'image n’est pas trouvée.

BORDER bb est un nombre entier

Désigne la taille du bord à afficher autour de l'image (par défaut = 0).

HEIGHT h est un nombre entier Définit la hauteur de l'image en pixels.

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

TITLE titre_img Texte qui s’affiche lorsqu’on passe la souris sur l’image.

VSPACE vv est un nombre entier

Définit le nombre de pixels d'ajustement entre l'image et le texte adjacent verticalement (par défaut = 0).

HSPACE hh est un nombre entier

Définit le nombre de pixels d'ajustement entre l'image et le texte adjacent horizontalement (par défaut = 0).

(29)

HTML: L

ES IMAGES

<HTML><HEAD> <TITLE> Images </TITLE> </HEAD><BODY>

Voici une première image sans attribut particulier

<BR> <Center> <IMG src="fleur.jpg" > </Center> <BR> une image avec un bord de taille 3 : <BR> <IMG src="fleur.jpg" border=3 align=center> <BR> Il est souvent utile de préciser la taille de

F el h i, G a ll a s, H a m ed & K er k en i

<BR> Il est souvent utile de préciser la taille de l'image pour que le navigateur connaisse la taille de l'emplacement à réserver

</CENTER> <BR> Si l'image n'est pas trouvée par le navigateur, on utilise alt pour un texte <BR> <CENTER>

<IMG src="papillon.gif" width=88 height=31 hspace=20 alt="papillon"> </CENTER> </BODY></HTML> 29 F el h i, G a ll a s, H a m ed & K er k en i

(30)

L

ES IMAGES CLIQUABLES OU RÉACTIVES

Une image peut servir d'ancre comme nous l'avons vu mais dans ce cas quelque soit

la partie de l'image sur laquelle vous cliquez vous irez toujours vers une seule

destination.

Cependant, la balise

MAP

peut vous permettre de définir sur la même image

différentes zones cliquables qui vous renverront vers des destinations variées.

Pour cela, vous devez utiliser l'option

USEMAP

avec la balise

IMG

pour indiquer

Pour cela, vous devez utiliser l'option

USEMAP

avec la balise

IMG

pour indiquer

que vous définissez une image cliquable :

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

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

coordonnées des zones cliquables :

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

Vous devez définir le type des différentes zones cliquables de votre image en

utilisant la balise AREA, en indiquant le lien sur lequel cette zone pointe et les

coordonnées définissant l'élément.

(31)

E

XEMPLE D

’

IMAGE

RÉACTIVE

Découpons cette image en plusieurs parties :

Le clavier

La souris

L’unité centrale

Le moniteur

<map name="ordinateur">

<

area shape="RECT"

coords=" 97,81,123,97" href="souris.html" alt="Souris" >

<

area shape="CIRCLE"

coords=" 56,32,37" href="moniteur.html"

alt="Moniteur" >

<

area shape="RECT"

coords=" 100,9,147,78" href="uc.html" alt="Unité

centrale" >

<

area shape= "RECT"

coords=" 4,71,88,95" href="clavier.html" alt="Clavier" >

<

area shape="DEFAULT"

href="defaut.html">

</map>

<IMG SRC="ordinateur.gif" ALT="Figure d’un ordinateur"

USEMAP="#ordinateur">

(32)

L

ES IMAGES CLIQUABLES OU RÉACTIVES

Balise Attribut Valeur Effet Exemple

MAP NAME nom_map <map name="ordinateur">

SHAPE

RECT

Rectangle

(ses coordonnées sont :

X1,Y1,X2,Y2)

<AREA shape=rect coords="5,10,20,25"> <!-- Coin supérieur gauche: 5 pixels sur X, 10 pixels sur Y

Coin inférieur droit: 20 pixels sur X, 25 pixels sur Y -->

CIRCLE

Cercle

X,Y,R)

<AREA shape=polygon

AREA POLYGON

Polygone

X1,Y1,...,X_n-1,Y_n-1,X_n,Y_n )

<AREA shape=polygon

coords="0,15,5,10,10,15,5,20">

DEFAULT Pour les points non définis

HREF URL Lien vers l'URL (la page de destination)

COORDS "XX,XX,XX, XX"

Contient les coordonnées de la zone cliquable.

(33)

HTML: L

ES TABLEAUX

Balises :

<table>

et

</table>

: création d'un tableau.

<tr>

(table row) : crée une nouvelle ligne dans le tableau.

<td>

(table data) : crée une nouvelle cellule dans un tableau. Cette cellule doit

être contenue dans une ligne et donc une balise "TR" doit être déjà ouverte. Une

cellule peut contenir du texte, des images, etc.

<TH>

(table header) : crée une cellule d’en-tête du tableau (gras et centré)

<CAPTION>

et

</CAPTION>

: Titre du tableau.

<TABLE border=1>

<caption> TAB <br> entier </caption>

<TR> <Th> A </Th> <Th> B </Th> </TR>

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

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

</TABLE>

(34)

HTML: L

ES TABLEAUX

Les attributs du tableau :

bgcolor

: fixe la couleur de fond d’un tableau ou d’une cellule.

border

: fixe l’épaisseur du bord du tableau

width

: fixe la largeur d'un tableau ou d'une cellule en pixels ou en % (par

width

: fixe la largeur d'un tableau ou d'une cellule en pixels ou en % (par

rapport à la page).

height

: fixe la hauteur d'un tableau ou d'une cellule en pixels ou en % (par

rapport à la page).

align :

précise l'alignement sur un axe horizontal du tableau ou du contenu

d’une cellule. (valeur possible : "left" par défaut, "right", "center").

valign :

précise l'alignement du contenu des cellules sur un axe vertical.

(valeur possible : "middle", "bottom", "top").

34

(35)

HTML: L

ES TABLEAUX

"colspan"

permet de fusionner des cellules d'une même

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

<TABLE width=60% border=1>

<TR>

<TD colspan=3>cellule 1</TD>

</TR>

<TR>

<TD width=33%>cellule 1</TD>

<TD width=33%>cel 2</TD>

<TD width=34%>3</TD>

</TR>

</TABLE>

35

(36)

HTML: L

ES TABLEAUX

• "rowspan"

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

colonne. Il faut préciser le nombre de cellules.

<TABLE width=60% border=1>

<TR>

<TD width=33% rowspan=3>cellule 1</TD>

<TD width=33%>cel 2</TD>

<TD width=34%>3</TD>

</TR>

<TR>

<TD width=33%>cel 2</TD>

<TD width=34%>3</TD>

</TR>

<TR>

<TD width=33%>cel 2</TD>

<TD width=34%>3</TD>

</TR>

</TABLE>

36

(37)

HTML: L

ES TABLEAUX

"cellpadding"

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

<TABLE border=2 cellpadding=10>

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

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

</TABLE>

"cellspacing"

définit l’espace entre les cellules ou l’épaisseur des lignes du quadrillage

<TABLE border=2 cellspacing=10>

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

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

</TABLE>

(38)

F

RAME

& F

RAMESET

Les frames permettent de fragmenter la page du navigateur en plusieurs zones (ou cadres) qui peuvent contenir des informations différentes.

Les balises:

<FRAMESET>

: Début de zone avec des fenêtres

</FRAMESET>

: Fin de zone avec des fenêtres

cette balise définit les cadres par leur dimension en pixels ou en pourcentage (%)

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

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

<HTML>

<HEAD> </HEAD>

<FRAMESET ROWS="30%,70%">

<FRAME SRC="frame1.html" NAME="haut">

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

</FRAMESET>

</HTML>

(39)

L

ES ATTRIBUTS DE LA BALISE

<FRAMESET>

L'attribut

ROWS="hauteur1,hauteur2,...,hauteurN"

définit la hauteur

des différentes fenêtres en cas de division horizontale. La hauteur s'exprime

en nombre de pixels ou en % de l’écran (dans ce cas, on veillera à ce que le

total soit égal à100%) ou en * pour désigner le reste ; ex. Rows = ‘‘120, 50%,

*’’

L'attribut

COLS="largeur1,largeur2,...,largeurN"

définit la largeur des

différentes fenêtres en cas de division verticale. Elle s’exprime comme dans

rows ; ex. Cols = ‘‘120, 50%, *’’

Pour les 2 attributs précédents, il suffit de fixer une seule des valeurs et de

donner à l'autre la valeur *, alors cette dernière s'ajuste automatiquement.

L’attribut

FRAMEBORDER

: peut prendre les valeurs 1 (ou YES) s’il y a

une bordure) ou 0 (ou NO) s’il n’y a pas de bordure.

L’attribut

Border=n

avec n une valeur définissant la taille de la bordure

L’attribut

Bordercolor ="#nombre_héxadécimal"

(ou

=‘‘mot_clé_anglais_d’une_couleur’’

) indique la couleur de la bordure

L’attribut

Framespacing=n

avec n une valeur définissant l'espace entre

les cadres.

(40)

L

ES ATTRIBUTS DE LA BALISE

<FRAME>

Attribut

Valeur

Action

Src

URL

Définit l'emplacement de la page à afficher dans le

cadre

Name

"nom"

Définit un nom qui permettra d'afficher un autre

document dans le cadre grâce à l'attribut Target qui

s’utilise avec la balise a href

Marginwidth=n

n est un entier spécifiant

le nombre de pixels

Taille des marges latérales

40

le nombre de pixels

Marginheight=n

n est un entier spécifiant

le nombre de pixels

Taille des marges du haut et du bas

Frameborder

YES ou 1

NO ou 0

Détermine si les cadres auront ou non une bordure

Border=n

n est un entier spécifiant

le nombre de pixels

Taille de l'espace entre les cadres (uniquement pour

Netscape)

Noresize

(Aucune)

Interdit à l'utilisateur de redimensionner les cadres

(Ce n'est pas la valeur par défaut)

Scrolling

YES

NO

AUTO

Permet ou non l'affichage d'une barre de défilement

(Auto laisse le navigateur décider de son utilité)

(41)

F

RAME

& F

RAMESET

Pour afficher des liens dans un des cadres, il suffit d'utiliser l'attribut TARGET dans la balise <A HREF …> pour spécifier le nom du cadre qui a été spécifié dans la balise <FRAME> par l'attribut NAME.

Code de la page « index.html »

<A HREF="f3.html" TARGET="gauche">Hello</a> </Body>

</HTML>

Lorsque l’utilisateur clique sur le lien hypertexte « Hello » contenu dans la page « f2.html », la page « f3.html » remplacera la page « f1.html » dans la zone « gauche »

(42)

HTML: A

TTRIBUT

TARGET

DES LIENS

HYPERTEXTES

target : (cible) cet attribut sert à déterminer l'endroit

où sera ouvert le document précisé par l'URL. On s'en

sert surtout dans un site composé de cadres. Sachez

seulement que cet attribut contient le nom de l'endroit

où ouvrir le lien.

42

Valeur

Action

_self

Affiche la cible dans le même cadre que le lien

_parent

Affiche la cible dans le cadre de niveau supérieur

_blank

Affiche la cible dans une nouvelle fenêtre

_top

Affiche la cible dans la fenêtre entière du navigateur

Valeurs prédéfinies de l’attribut TARGET

(43)

F

RAME

& F

RAMESET

Index.html

</frameset>

Remarque: On utilise les balises <NOFRAMES> et </NOFRAMES> permettant de spécifier un texte HTML à afficher en cas où le B.html <HTML><BODY> <H1>B</H1> </BODY></HTML> A.html <HTML><BODY> <H1>A</H1> </BODY></HTML> C.html <HTML><BODY> <H1>C</H1> </BODY></HTML>

Remarque: On utilise les balises <NOFRAMES> et </NOFRAMES> permettant de spécifier un texte HTML à afficher en cas où le navigateur ne permet pas d'afficher les frames. Le texte entre les balises <NOFRAMES> et </NOFRAMES> doit donc

contenir les balises <BODY> ... </BODY>.

<HTML>

<BODY> Cette page HTML nécessite un navigateur supportant les frames, veuillez nous en excuser. </BODY> </NOFRAMES>

</HTML>

(44)

F

ORMULAIRES

Les formulaires permettent de générer des zones de "dialogue" avec

le lecteur, ils lui offrent une fiche à remplir.

Ces zones ou champs peuvent être des :

Zones de saisie de texte

Boîtes à cocher

Boutons radio

Menus déroulants

Boutons

…

Les formulaires n'ont aucun intérêt si vous ne pouvez pas récupérer

l'information fournie par le lecteur et ensuite la traiter. C'est

pourquoi les formulaires nécessitent d'être associés à un

programme, par exemple pour interroger une base de données,

réaliser une enquête via le web, …

(45)

F

ORMULAIRES

:

BALISES

Déclaration d’un formulaire

<FORM> …</FORM>

Attributs principaux (<FORM Action=… Name=… Target=… Method=… >

ACTION

: URL du programme exécutable vers lequel les données saisies sont

envoyés

NAME

: nom du formulaire

TARGET

: nom de la frame dans laquelle le résultat doit être affiché.

METHOD

: commande HTTP à utiliser pour effectuer l’envoi (=POST ou =GET)

METHOD

: commande HTTP à utiliser pour effectuer l’envoi (=POST ou =GET)

Exemple : METHOD="POST" ou METHOD="GET". La première (POST) envoie

les données sans l'adresse indiquée dans l'option ACTION tandis que la deuxième

(GET) envoie aussi l'adresse. Cette option n'est pas obligatoire, par défaut GET sera

positionné.

Remarques :

Toutes les balises HTML (des images, tableaux, …) sont permises entre <FORM >… </FORM>

Des formulaires peuvent être insérés à l’intérieur d’un autre formulaire web.

Trois classes de zone de dialogue avec l'utilisateur sont à distinguer :

INPUT, SELECT et TEXTAREA.

(46)

L

ES FORMULAIRES

:

BALISE

INPUT

Déclaration des champs de saisie (exclusivement entre <FORM>…</FORM>)

NAME

: nom du champ de saisie (unique à l’intérieur d’un formulaire)

TYPE

: type du champ de saisie

Les types possibles sont : CHECKBOX, HIDDEN, IMAGE, PASSWORD, RADIO,

RESET, SUBMIT, TEXT, etc.

A. Le TYPE="CHECKBOX"

permet la création de cases à cocher. Lorsque vous

A. Le TYPE="CHECKBOX"

permet la création de cases à cocher. Lorsque vous

cochez une case, l'autre ne réagit pas. Les cases à cocher sont indépendantes les unes

des autres.

Exemple :

<FORM ACTION="pgm.php">

<INPUT NAME="choix" TYPE="CHECKBOX"> Choix 1 <BR>

<INPUT NAME="choix" TYPE="CHECKBOX"> Choix 2

</FORM>

Avec ‘‘choix’’ le nom de la variable qui référence les données

et ‘‘pgm.php’’ le programme qui recevra les données à traiter.

N.B. : L’attribut

CHECKED

est optionnel et permet d'activer une case à cocher.

(47)

L

ES FORMULAIRES

:

BALISE

INPUT

B.

Le TYPE="RADIO"

Il permet la création d'un élément de saisie sous la forme d'un bouton radio. Les boutons radio sont liés les uns aux autres par le même nom de variable. Vous ne pouvez faire qu'un choix, lorsque vous cliquez sur l'un d'eux, qui prend la valeur oui ou non, les autres sont mis à non ou off.

Vous pouvez, bien évidemment, proposer plus que deux choix.

Remarque : L'attribut VALUE est obligatoire avec le type RADIO, il permet d'initialiser la valeur Remarque : L'attribut VALUE est obligatoire avec le type RADIO, il permet d'initialiser la valeur

de l'élément de saisie. Exemple :

<FORM ACTION="pgm.php">

<INPUT NAME="radio1" TYPE="RADIO" VALUE="1"> oui

<INPUT NAME="radio1" TYPE="RADIO" VALUE="0"> non

</FORM>

Avec ‘‘radio1’’ le nom de la variable qui référence les données et ‘‘pgm.php’’ le programme qui recevra les données à traiter.

N.B. : L’attribut CHECKED est optionnel et permet d'activer un bouton radio.

(48)

L

ES FORMULAIRES

:

BALISE

INPUT

C. Le TYPE="TEXT"

crée une zone de saisie de texte. Ce type a 2 attributs

facultatifs : l’attribut

MAXLENGTH

qui définit la taille du texte à saisir et l'attribut

SIZE

qui définit la taille de la zone du texte qui sera saisi.

D. Le TYPE="RESET"

lorsque l'utilisateur clique sur ce bouton, toutes les valeurs

qu'il a saisi seront remplacées par les valeurs par défaut définies grâce à l'attribut

VALUE.

E. Le TYPE="SUBMIT"

permet de créer un bouton qui, lorsque l'utilisateur clique

dessus, déclenche l'envoi des données au programme référencé dans le champ ACTION

.

Exemple :

<FORM ACTION="pgm.php">

<INPUT NAME="texte" TYPE="TEXT" SIZE="20" VALUE="Le texte"> <BR> <INPUT TYPE="SUBMIT" VALUE="Soumettre">

<INPUT TYPE="RESET" VALUE="Effacez"> </FORM>

Avec « pgm.php » le programme qui recevra les données à traiter.

et

VALUE=

"Le texte" représente le texte par défaut de la zone de saisie.

(49)

L

ES FORMULAIRES

:

BALISE

INPUT

E

NVOI DES DONNÉES AU SERVEUR WEB

(

WWW

)

Lorsque l’utilisateur appuie sur le bouton SUBMIT, le navigateur :

Construit une chaîne de caractère contenant toutes les données du formulaire

Envoie cette chaîne au programme référencé dans le champ ACTION.

Cette chaîne :

Ensemble de couples séparés par le caractère &

Chaque couple est de la forme : nom de champ= valeur saisie

N.B. : Les espaces sont remplacés par le caractère +

(50)

L

ES FORMULAIRES

:

BALISE

INPUT

E. Le TYPE="FILE"

permet d'uploader des fichiers.

F. Le TYPE="PASSWORD"

permet la création d'une zone de saisie dans

laquelle les caractères tapés par l'utilisateur sont remplacés par des étoiles, offrant ainsi

une plus grande confidentialité. Les données récupérées par le programme sont, quant

à elles, en clair.

50

Exemple :

<FORM ACTION="prog.exe" METHOD="POST">

<br> Mot de passe <INPUT TYPE=PASSWORD NAME="pass"> <br> Sélectionner un fichier <INPUT TYPE=FILE NAME="fichier">

<br> <INPUT TYPE=SUBMIT VALUE="Envoi"> <INPUT TYPE=RESET VALUE="Remise à zéro"> </FORM>

(51)

L

ES FORMULAIRES

:

BALISE

INPUT

G. Le TYPE="IMAGE"

permet la création d'une image cliquable comme

nous l'avons vu précédemment. Les éléments transmis au programme sont alors les

coordonnées x et y de la zone où a eu lieu le clic. Si la variable se nomme "zone",

le programme recevra zone.x=coord_x et zone.y=coord_y.

Remarque : L’attribut SRC="adresse" est obligatoire avec le TYPE="IMAGE" et

permet d'indiquer le lieu où se trouve l'image à insérer dans le formulaire.

Exemple: <INPUT type="image" name="envoyer" src="logo.jpg">

avec « envoyer » le nom de la variable qui référence les données.

H. Le TYPE="BUTTON"

permet la création d’un bouton à associer avec un

traitement javascript ou vbscript. Exemple :

<INPUT TYPE=BUTTON VALUE="Cliquez" onClick="fonctionJavaScript() ">

I. Le TYPE="HIDDEN"

permet la création d'un élément de saisie non visible à

l'écran mais son contenu sera transmis au programme. C'est à dire que les attributs

name et value sont pris en compte lors du traitement du formulaire.

Exemple: <INPUT type="hidden" name="Sondage" value=100>

(52)

E

XERCICE D

’

APPLICATION

1

er

_{cas : envoi avec bouton « envoyer »}

<html>

<head> <title> Exemple de HTML </title> </head>

<Body link=blue alink=red vlink=black>

Q. : Donner le code

correspondant à la figure

ci-contre ainsi que le résultat de

son envoi avec des données

fictives.

52

<Body link=blue alink=red vlink=black>

<FORM action="mailto:test@isetkr.rnu.tn" method="post" name="petitsondage">

<H3>Petit sondage...</H3>

<INPUT type="hidden" name="SondageEtudiants" value=23102011>

<br> Login : <INPUT type="text" name="login" maxlength="21">

<br> E-Mail : <INPUT type="text" name="email">

<br> Mot de passe : <INPUT type="password" name="pass" size="10" maxlength="10">

<br> <INPUT type="submit" value="envoyer">

<INPUT type="reset" value="Remise à zéro"><br>

</FORM>

</Body>

</html>

Envoi du formulaire par la méthode « POST » avec les données fictives suivantes : Login = JeSuis21CaracteresMax

E-Mail = test@isetkr.rnu.tn

Mot de passe = 1234567890

Envoi à travers le bouton « envoyer » SondageEtudiants=23102011

&login=JeSuis21CaracteresMax &email=test%40isetkr.rnu.tn &pass=1234567890

(53)

E

XERCICE D

’

APPLICATION

2

ème

_{cas : envoi avec bouton image « flèche à droite »}

<html>

<head> <title> Exemple de HTML </title> </head>

<Body link=blue alink=red vlink=black>

<FORM action="test.php" method="get" name="petitsondage">

<H3>Petit sondage...</H3>

<INPUT type="hidden" name="SondageEtudiants" value=23102011>

Login : <INPUT type="text" name="login" maxlength="21">

<br> E-Mail : <INPUT type="text" name="email">

<br> Mot de passe : <INPUT type="password" name="pass" size="8" maxlength="8">

53

<br> Mot de passe : <INPUT type="password" name="pass" size="8" maxlength="8">

<br> <INPUT type="image" name="envoiPARimage" src="right.gif">

<INPUT type="reset" value="Remise à zéro"><br>

</FORM>

</Body>

</html>

Envoi du formulaire par la méthode « GET »

avec les données fictives suivantes : Login = essai

E-Mail = essai@isetkr.rnu.tn

Mot de passe = essai

Envoi à travers l’image « flèche à droite » test.php?SondageEtudiants=23102011 &login=JeSuis21CaracteresMax

&email=test%40isetkr.rnu.tn &pass=12345678

(54)

L

ES FORMULAIRES

:

BALISE

SELECT

Elle permet de créer des listes avec des menus déroulants.

Son attribut principal est

NAME

qui permet d'associer un nom de

variable aux données sélectionnées par l'utilisateur.

Son élément principal est

OPTION :

permet de définir chaque

élément texte du menu. Il précède chaque ligne de texte.

Un attribut facultatif de la balise OPTION peut être ajouté, qui est

‘‘

SELECTED

’’ et qui permet de définir un élément sélectionné par

‘‘

SELECTED

’’ et qui permet de définir un élément sélectionné par

défaut. Il n'est pas obligatoire.

Exemple :

<FORM ACTION=“pgm.php” method = “POST”>

<SELECT NAME=“list_choix">

<OPTION value=1 >Premier choix

<OPTION value=2 SELECTED>Deuxième choix

<OPTION value=3 >Troisième choix

<OPTION value=4 >Quatrième choix

<OPTION value=5 >Cinquième choix

</SELECT>

</FORM>

(55)

L

ES FORMULAIRES

:

BALISE

SELECT

La balise SELECT permet aussi de créer des listes à ascenseurs.

Dans ce cas, vous devez associer à cette balise d’autres attributs que ceux vu précédemment, à savoir :

SIZE : l'attribut SIZE="chiffre" permet d’afficher à l'écran "chiffre" lignes.

MULTIPLE: cet attribut vous donne la possibilité de sélectionner plusieurs choix dans la liste.

Exemple : comme précédemment, le choix "Deuxième choix" est celui par défaut grâce à l'attribut SELECTED. - L'attribut MULTIPLE permet de réaliser plusieurs choix dans la liste. Sélectionner votre premier choix, ensuite, cliquer sur la combinaison « CTRL + un autre choix » si vous voulez sélectionner ce dernier choix en plus ou bien l’éliminer.

plus ou bien l’éliminer.

- L’attribut « Size = 3 » permet d’afficher 3 lignes à l’écran. <FORM ACTION=“pgm.php” method = “POST”>

<SELECT NAME=“list_choix" SIZE="3" MULTIPLE> <OPTION value=1 >Premier choix

<OPTION value=2 SELECTED>Deuxième choix <OPTION value=3 >Troisième choix

<OPTION value=4 >Quatrième choix <OPTION value=5 >Cinquième choix </SELECT>

</FORM>

(56)

L

ES FORMULAIRES

:

BALISE

TEXTAREA

Cette balise permet de créer une zone de saisie de texte sous forme

de bloc. La zone de saisie est délimitée par les attributs

ROWS

(lignes) et

COLS

(colonnes).

Si vous entrez un texte plus long ou plus large que la zone de saisie,

cette dernière positionnera alors des ascenseurs pour vous déplacer.

Le texte compris entre les balises

<TEXTAREA>

et

</TEXTAREA>

sera affiché dans la zone de saisie.

Exemple :

<FORM ACTION=“pgm.php” method =“POST”>

<TEXTAREA NAME="commentaire" COLS="30" ROWS="5">

Entrez votre texte

</TEXTAREA>

(57)

L

ES

F

ORMULAIRES

F el h i, G a ll a s, H a m ed & K er k en i 57 F el h i, G a ll a s, H a m ed & K er k en i

(58)

E

XERCICE D

’

APPLICATION

Q. : Donner le code correspondant à la figure ci-contre ainsi que le

résultat de son envoi avec des données fictives.

(59)

E

XERCICE D

’

APPLICATION

<HTML> <head> <title> Exemple de HTML </title> </head> <BODY>

<FORM action="mailto:test@isetks.rnu.tn" method="post" name="petitsondage"> <H3> Petit sondage... </H3>

<INPUT type="hidden" name="SondageLoisirs" value=10122011> <TABLE> <TR> <TD> <PRE>Nom et Prénom :

Votre image : <INPUT type="file" name="photo"> </PRE> </TD> </table> Votre langage préféré en programmation :

<INPUT type="checkbox" name="langage" value="VB">Visual Basic <INPUT type="checkbox" name="langage" value="P">Turbo Pascal <INPUT type="checkbox" name="langage" value="D">Delphi

59

<INPUT type="checkbox" name="langage" value="D">Delphi

<INPUT type="checkbox" name="langage" value="C" checked>C++ <br> Quel sont vos activités de loisirs ? <BR>

<OPTION value="Natation">Natation</OPTION> <OPTION value="Lecture" selected>Lecture</OPTION> <OPTION value="Tennis">Tennis</OPTION>

<OPTION value="Web" >Navigation Web</OPTION> </SELECT>

<br> Commentaires <br>