les applications hypermédia

MIAGE Larache Etab.Privé Cours Applications Hypermédia

Les Applications HypermédiaSommaire du cours :1- Introduction è l’Internet :2- Notions de Base de l’Internet3- Introduction au langage XHTML :4- Structure d’un Document Web :5- Les Titres d’un document XHTML :6- La mise en forme de texte :7- les Listes ordonnées et non Ordonnées :8- Instruction des fichiers multimédia (Images, Vidéos, Séquences audio…..) :9- Les Liens Hypermédia :10- Les Tableaux et les Formes :11- Les Formulaires :

Chapitre 1 : Introduction Générale 1- Définition de l’Internet :

L’interconnexion des Réseaux à l’échelle mondiale ou internationale estl’ensemble des (Services) protocoles basés sur la pile de la familleTCP/IP.L’ensemble de ces réseaux interconnectés est réalisé dans le but degaranti certain nombre de services (ex : navigation, téléchargement,travail à distance, discussion en groupe, messagerie…..) 1-1- Définition de l’Intranet :

Amal JBIRA Langage HTML


L’intranet c’est l’interconnexion de l’ensemble des réseaux locauxqui permet de rendre des Services Internet.

Intranet = Intra + Network A l’intérieur Réseau1-2- L’extranet : Extranet = extra + Network à l’ extérieur Réseaul’extranet est l’ensemble de Réseaux interconnéctés qui font partie del’internet, mais réservés seulement pour les client, les fournisseurs, lepersonnel ou en général pour les partenaires de l’entreprise.1-3- Principe de l’envirennement de l’internet :

- Le client Web : demande un service internet en formulant unerequête http, ftp….

- Le Serveur : qui se trouve à l’adresse indiqué dans l’en-tête de laRequête (paquet) envoyé examine la requête pour déterminer lanature du service demandé, si le service est disponible, le serveurenvoie une requête de repense au client.

1-4- Principe de fonctionnement de l’Internet :

Client Web Serveur WebExemples : Internet Explorer - Exemples : Apache

- Client Ftp - Serveur ftp


Client

Client

Serveur

Serveur

Serveur

Client

Internet

Client

ServeurRéseau Internet/ Intranet


- client telnet - terminal server

Chapitre 2 : Notions de Base1-Serveur Web :C’est un logiciel qui gère des sites web, il distribue à ses clients unensemble des fichiers appelés Pages Web, il utilise Le protocole httppour envoyer ces fichiers aux clients. - Exemples :

- Microsoft Internet Information Server (IIS) - APACHE (logiciel libre le plus utilisé dans le monde)- Web Sphere (de IBM le plus chère des Serveurs Web )

2- Site Web : L’ensemble de pages web mises à disposition des clients web.

3- Le client web : (navigateur/browser) [==>Client http]Le client Web est un logiciel utilisé pour afficher les pages Web

distribués par un serveur Web.Il s’appel aussi : Client Web.

Exemple : Internet Explorer, Netspace, opéra, Firefox……….4- URL : (Universal Resource Locator ) :

Localise les Ressources demandées sur InternetURL : Universal Resource Locator Unified Uniform

L’URL: c’est le format standard d’une adresse Internet, il sert à localiser le service demandé sur le Réseau Internet. - Syntaxe de l’URL : Protocole://[compte :mot de passe @]adresse server[ :Port][chemind’accès][nom du Document]a- Protocole : le nom du protocole utilisé pour rendre le servicedemandé.Exemple : http : hyperTexte Transfert Protocol : utilisé pour le transfertdes pages Web vers les clients Web.ftp : File Transfert Protocol : Utilisé pour le transfert des fichiers.b- Compte : mot de passe@: définit les éléments d’authenticité pourl’utilisation du service demandé.c- Adresse du Serveur : c’est l’adresse IP ou bien c’est l’adresse auFormat FQDN ( Full Qualified Domain Name ). - Pour résoudre un nom FQDN :

- En ligne de commande :



Nslookup (nom server look up)> www.hp.com>Adresse IP de (www.hp.com)

L’adresse du serveur : c’est une adresse numérique sur 32 bits quiidentifie un hôte sur un réseau IP, elle est organisé sous forme de 4octets séparés par des points « . »- Exemple :

128 . 1 . 1 . 1 : est une adresse IP de classe B. Adresse du adresse de Réseau l’hôte

- la conversion d’une Adresse FQDN à une adresse IP : est appelé : Résolution du nom FQDN

- les Ordinateurs qui servent à la résolution des noms FQDN s’appellent, les serveurs DNS (Domain Name Server).

d- le port : à chaque Service internet est associé un numéro unique compris entre 1 et (216-1) appelé : le Port. -Exemple :

- Le Service de navigation est ouvert sur le port : 80 - Le Service ftp est ouvert sur le port : 20 et 21- le service DNS est ouvert sur le port : 53.

-Exemple :1- http://www.menara.ma/= > http://www.menara.ma:80/2- ftp://ftp.microsoft.com= > ftp://ftp.microsoft.com:21/e- chemin d’accès :

C’est l’ensemble de répertoires à parcourir sur le serveur pour atteindre le document demandé.

Chapitre 3 : Langage HTML (Introduction)1-Histoire :

- Crée en 1990 au CERN- Crée par Monsieur : Tim Berner Lee, inventeur de HTML.- Version 4 en 1999 de HTML- Version 1 de XHTML

SGML

XML HTML (Standard)

XHTML


ftp://ftp.microsoft.com:21/

ftp://ftp.microsoft.com/

http://www.menara.ma:80/

http://www.menara.ma/

http://www.hp.com/


II- Structure d’un document HTML :

Un fichier HTML est un simple document texte, dans lequel sontinsérées des instructions du langage HTML.

Une instruction HTML est sous forme de deux marqueurs "<" et ">"entre eux placé le nom de l’instruction.

L’ensemble des marqueurs et le nom de l’instruction s’appelle :Balise ou Tag.

(*) La plupart des balises HTML sont paires (une balise dedébut et une balise de fin, son nom est précédé par un anti-slash. - Exemple : 1- La balise <B> est une balise paire qui nécessite la balise de fin </B>2- La balise <Br> est une balise orpheline (weise) qui n’a pas de balisede fin.(*)< ! DOCTYPE >le chemin de DTD utilisé pour la validation. Utilisé pour valider un document HTML qui contient la balise < !DOCTYPE>(*) L’en-tête d’un document HTML contient des informations sur la pageweb (*) le corps <body> et </body> contient les données à afficher sur lapage web.(*) Pour créer un document HTML il suffit d’avoir :

1- Un navigateur Web (ex : Netscape, Firefox……)2- Simple éditeur de texte.

Et l’enregistrement se fera avec l’extension « html » ou « hml ».- Optionnel :1- La connexion à Internet2- Editeur graphique HTML (comme : Webexpert, Frontpage,Dreamweaver….)


< ! DOCTYPE ??????>

<html><head><head>

<body></body></html>

L’en-tête du document

Le corps du document

Déclaration de DTD (Document Type) pour utiliser un standard HTML


- Exemple :Exe1.html<html>

<head> <b>Ceci est un test </b></head>

<body></body></html>

Exe2.html : déplacez la balise <b> et son contenu entre la balise<body> et </body>.Exe1.html et exe2.html donnent le même résultat mais exe1.html nerespect pas les règles de la structure HTML.- Les Commentaires :

Pour insérer des commentaires (qui sont les lignes HTML ignoréespar le navigateur) on utilise la balise HTML suivante :

< !--Commentaire -->

III- Titres et formatage de texte : III-1- Les titres des paragraphes :

La balise <hi>…..</hi> où i€ [1, 6] servent à insérer des titres pour les paragraphes, les sections ou pour les chapitres dans un document html.- Remarques :

Les balises <hi>…..< /hi> mettent le texte délimité en gras, en unetaille précise qui dépend de la valeur « i » et font une saute de ligne à lafin du texte.- Pour le XHTML il faut respecter les points suivants :

1. Toutes les balises doivent être fermées.2. les noms des balises et des attributs doivent être en minuscule.3. toutes les valeurs des attributs doivent être écrites entre des

guillemets ou des apostrophes.4. respecter l’ordre des balises imbriquées.

III-2- Mise en forme de texte et des paragraphes : A- Paragraphes :

<p>…….</p> : le texte délimité entre <p> et </p> est un nouveauparagraphe.

B- Les Balises de Présentation de texte :1) <b>…</b> : écrire en gras le texte délimité.



2) <i>…</i> : écrire le texte délimité en italique.3) <u>…</u> : souligne le texte.4) <sup>…</sup> : écrire le texte comme « exposant »5) <sub>…</sub> : écrire le texte comme indice.6) <strike>….<strike> : barre le texte.7) <font size=" n " face="pol ice" color="#$$$$$$" | "couleur" >

…..</font> : sert à changer certaines caractéristiques visuelles dutexte délimité.

-Exemple :Ecrire le code HTML qui affiche le texte suivant : H2O<p> H<sub> 2 </sub> O </p>

Les attributs de la balise <font> :Size="n" : cet attribut sert à indiquer la taille du texte qui est un entierpositif compris entre 1 et 7.Face="police" : sert à définir la police de caractères pour le texte.Exemple :

<font face="arial"> Texte </font> : Color="#$$$$$$" | "couleur" : sert à définir la couleur du texte soit parle code Hexadécimal ou bien par le mot anglais du couleur.- Le format Hexadécimal :

R G B Color= "# $$ $$ $$" red-green-blue

Chaque $ est un chiffre hexadécimal € [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A,B, C, D, E, F].

Les deux premiers chiffres à gauche représentent la couleurRouge.

Les deux suivants représentent la couleur verte.Les deux derniers chiffres représentent la couleur bleu.

Exemple :Color="#FF0000" couleur rougeColor="#00FF00" couleur verte Color="#0000FF" couleur blueColor="#000000" couleur noireColor="#FFFFFF" couleur blanche

<font size="6" face="arial" color="red"> ceci est un texte de taille 6 decouleur rouge et de police arial </font>la balise <br /> : retour à la lignela balise <pre> </pre> : affiche le contenu délimité tel qu’il est mis surl’éditeur de texte, elle permet d’appliquer les tabulations, les sautes deligne.La balise <center> </center> : centrer le texte délimité sur la ligne.



<hr /> : dessiner une ligne séparatrice. L’alignement d’un paragraphe :

On peut écrire le texte d’un paragraphe soit à gauche de la fenêtredu navigateur (left), au centre de la fenêtre (center) ou bien à droit de lafenêtre du navigateur (right).

Pour cela on utilise l’attribut appelé « align » à l’intérieur de la balise<p> comme suite :

<p align="left(*)" | "center" | "right" >(*): valeur par défaut

IV- Les Listes Ordonnées et les listes à puces: IV-1- Balise des listes Ordonnées :

- Syntaxe :<ol [type="type"]>

<li>élément 1</li>………<li>élément n</li>

</ol>- Exemple :

<h2>Systèmes d’exploitation</h2><ol>

<li>Microsoft Windows</li><li>Mandriva linux</li><li>Mac OS</li><li>Norell Netware</li><li>Sun Solaris</li>

</ol>Pour changer l’apparence de la liste (pour afficher les nombres en

Romain par exemple).- L’attribut type sert à indiquer la méthode à suivre pour ordonner la

liste.- Exemple :

1- Liste ordonnée Alphabétique :<ol type="a" | "A" >

2- Utilisation des chiffres Romains.<ol type="i" | "I" >

IV-2- Balise à puces :Syntaxe :<ul [type="type"]>

<li>élément 1</li><li>élément 2</li>



…………………………</ul>Types de puces :

1- Carrée<ul type="square">

2- Cercle<ul type="circle">

3- Disque<ul type="disc">

V- Insertion des fichiers multimédia : A- Les Images :

Pour insérer une image dans un document HTML, on emploi labalise <img />-Syntaxe :

<img src="URL de l’image"[width="n"][height="m"][alt="texte"][bordr="p"] />

Dans l’internet il y a deux formats d’images utilisées1- Le format jpeg2- Le fromat gif

Qui sont des formats compressés des images.A-1- Les attributs de la balise <img /> :

L’attribut src="URL de l’image" : cet attribut indique l’adresse Web où se trouve le fichier qui contient l’image.

L’attribut width="n" : indique la largeur de l’image affiché exprimé soit en nombre de pixels de la carte graphique, ou bien en pourcentage par rapport à la largeur de la fenêtre du navigateur.

- Exemple : 1- <img src="test.gif" width="400" /> : la largeur de test.gif est égal

à 400 pixels.2- <img src="test.gif" width="50%" /> : la largeur de test.gif est

égal à 50% de celle de la fenêtre du navigateur. L’attribut height="m" : indiquer la hauteur de l’image soit en nombre

de pixels ou bien en pourcentage par rapport à la hauteur de la fenêtre du navigateur.

L’attribut alt="texte" : réalise une "Info bulle" pour l’image.



L’attribut border : pour appliquer un cadre pour l’image, dont l’épaisseur est exprimé par la valeur entier "n".

Autres Attributs : Vspace="n" : le nombre des espaces à laisser en haut et en bas de

l’image. Hspace="m" : le nombre des espaces à laisser à gauche et à droit

de l’image.

B- Les séquences Audio et vidéo : On utilise la balise <embed> : <embed src="URL du fichier"

[width="n"][height="m"][alt="texte"][autostart="true" | "false"][loop="true" | "false"] > </embed>

Autostart="true" | "false" ( * ) [valeur par défaut] : permet aunavigateur de lire automatiquement la séquence au momentd’affichage du document HTML.Loop="true" | "false" : sert à reprendre la lecture de la séquence dufichier.

Note : <embed> n ’ e s t p a s r e c o m m a n d é p a r « W3C »http://www.w3.org W3C recommande d’utiliser la balise <object>.


Image

Vspace

Vspace

hspacehspace

http://www.w3.org/


- Syntaxe :<object data="URL" type="type d’objet" paramètres > </object>

VI- Les liens hypertextes et les l ienshypergraphiques :

: Lien internet entre les pages web du même serveur. : Lien internet à la même page web. : Lien externe au serveur.

Définition : les liens hypertextes sont des raccourcis ajoutés dans undocument HTML qui pointe vers d’autres documents Web situés soit surle même serveur Web (on parle ici des liens Internes) ou sur un autreserveur Web (il s’agit des liens externes).

A- les liens externes : En HTML, on utilise la balise : <a> </a>

- Syntaxe : <a href="URL du document Web" > texte présentatif du lien </a>


Réseau à Internet

World Wide Web

Serveur web 1 (Site 1)http://www.site1.com

Serveur web 2 (Site 2)http://www.site2.com


L’attribut href : sert pour indiquer l’adresse internet où se trouve ledocument Web sollicité par le lien.

- Exemple :- <a href="http://www.google.com/ " >Recherche Google </a>- Note : les liens externes ont toujours le format "URL" absolue

c'est-à-dire, URL qui commence par le FQDN du serveur.

B- Les Liens Internes au Serveur : 1-Notion de l’étiquette : l’étiquette est réalisée par un lienhypertexte pour savoir l’emplacement du paragraphe ou bien la partie dudocument Web sollicité à l’intérieur d’un document HTML.

2. Définition de l’internet

3. Services d’Internet :

Pour réaliser une étiquette en HTML, on utilise la balise <a> dont la syntaxe : <a name="nom de l’étiquette" > …. </a>

2- Liens Internes : - -Syntaxe : - <a href="[chemin d’accès au document [#étiquette]]" > Texte </a>

C- Les liens hypergraphiques :


Page Web

1……………………….2……………………….3……………………….

1. Introduction :

Liens Internes

Etiquettes

http://www.google.com/


Sont des pointeurs vers d’autres documents web, réalisés à l’aidedes Images à la place du texte.

- Syntaxe : - <a href="URL" > <img src="URL de l’image" [attributs] /> </a>

1- Liens Réalisées à l’aide des images mappées :On utilise la balise <map>……</map>

- Syntaxe :<map name="nom de la mappe" >

<area shape="form" cords="x, y, …" href="URL" alt="texte" ><area ………………>

</map>

L’attribut “shape” définit la forme de la zone cliquable. Shape="rect" rectangleShape="circle" cercleShape="poly" polygone

L’attribut « coords » définit l’emplacement de la zone par rapport à l’image


Area 1

Area 2

Area3

Area 4

Area 5

Area 6

Zonescliquables

Imagemappée

Y2

Y0 Image mappée

X10X2 X (XO, 0)

Zone Rectangulaire limité par les coordonnées (X0, 0, X1,

CR

X1, Y0


Zone circulaire limité par (X2, Y2, R) : L’attribut « href » de la balise <area> définit l’URL où se trouve le document Web à charger quand on clique sur la zone.

- Exemple :

<map name="test" ><area shape="circle" coords="30, 40, 25" href="http://www.hp.com/

"/> </map>Image mappée: Syntaxe:<img src="URL de l’image" usemap="#nom de la mappe" />

VII- Les Paramètres de la balise <body> :A- Les Attributs de base :

<body text="couleur du texte" Background="image de fond" Bgcolor="couleur du fond" Link="couleur d’un nouveau lien" Alink="couleur d’un lien ative" Vlink="couleur d’un lien visité" >

Text : Définit la couleur de l’affichage du texte de la page HTMLBackground : indiquer l’URL de l’image à mettre comme image defond de la page Web.Bgcolor : définit la couleur de fond de la page Web.Link : définit la couleur d’un nouveau lien hypertexte.Alink : définit d’un lien hypertexte activé.


http://www.hp.com/


Vlink : définit la couleur d’un lien hypertexte visité.- Exemple : <body text="red"

Bgolor="blak" Link="yellow" Alink="red" Vlink="green" >

VII- Informations de base de la page web :1- le Titre d’une page web : <title> le contenu du titre à afficher </title> : affiche le titre sur la barrede titre du navigateur.

2- L’URL de base pour une page Web :Il s’agit de la racine de tous les URLS à chemin relatif qui sont

insérés dans le document HTML.- Syntaxe :

<base href="URL" />

IX- Les Tableaux :Les tableaux dons un document HTML sont utilisées pour :

1- Afficher les données et les informations statiques ou dynamiques(extraites à partir des sources de données comme les bases dedonnées ou les fichiers).

2- Organiser l’affichage de certains objets (exemple : les images, lesarticles….) sur une page Web.

En HTML pour construire un tableau, on utilise la balise <table>- Syntaxe :

<table [attributs] >[<caption> le titre du tableau </caption> ]

<tr><td>……..</td><td>……..</td><td>……..</td>……………………

</tr><tr>

<td>……..</td><td>……..</td><td>……..</td>…………………..

</tr>



………………….</table>

- Exemple : <table border=1 >

<tr> <td> 1 </td> <td> 2 </td> </tr><tr> <td> 3 </td> <td> 4 </td> </tr>

</table>

<caption> titre du tableau </aption>

Tableau <table>

Lignes <tr>

Cellules <td>

1- les attributs de la balise <table>a) border="n" : définit l’épaisseur de la bordure du tableau, exprimé en"n" où n>=0.b) bgcolor="#$$$$$$" | "mot anglais" : couleur du fond de tableau.c) background="URL de l’image" : définit l’image du fond de tableau.d) bordercolor="#$$$$$$" | "mot anglais" : la couleur du cadre detableau.e) align="left(*)" | "center" | "right" : définit l’alignement du tableau.f) width="n" | "p%" : où n, p>=0, définit la largeur du tableau, exprimé soiten nombre de pixels "n" ou en pourcentage par rapport à la largeur de lafenêtre du navigateur.g) cellspacing="n" : pour indiquer l’espace à laisser entre les cellulesd’un tableau.h) cellpadding="n" : la marge à laisser entre le code de la cellule et soncentre.

2- les attributs de la balise <tr> : <tr [attributs]>


Cellules<td>

Lignes<tr></tr>


<tr> : est une balise HTML qui permet de construire une ligne dans untableau.- Les Attributs de base :a) align : s’applique sur le contenu des cellules : alignement horizontal.b) bgcolorc) backgroundd) valign="top" | "middle" | "bottom" : aligner verticalement le contenu dechaque cellule de la ligne

3- Les Attributs de la balise <td> : <td [attributs]>

<td> : sert à dessiner une cellule dans un tableau En plus des attributs : align, valign, bgcolor, width s’ajoutent les attributssuivants : a) height="n" | "p%" : définit la hauteur de la cellule.

b) colspan="n" : définit le nombre de colonnes à fusionner dans la même cellule.- Exemple :

<table border=1><tr> <td colspan="2" > ???</td> </tr><tr> <td>????</td> <td>????</td> </tr>

</table>c) rowspan="n" : définit le nombre de lignes à fusionner dans la même cellule.

- Exemple : <table border="1" >

<tr> <td rowspan="2" > ? </td> <td> ? </td> </tr><tr> <td> ? </td> </tr>

</table>- Exercice:

Ecrire le code HTML qui permet d’afficher le tableau suivant:


A B

CD E

G

F H

height

4 colonnes

3 lignes


- Résultat : <html> <head>

<title> tableau </title> </head> <body>

<table align="center" border="2" width="50%" > <tr align="center" > <td colspan="2" > A </td> <td > B </td> <td rowspan="2" > C </td> </tr> <tr align="center" > <td> D </td> <td> E </td> <td rowspan="2" > G </td> </tr> <tr align="enter" > <td colspan="2" > F </td> <td> H </td> </tr>

</table> </body></html>

- Note: les entêtes d’un tableau:

N° Article Désignation Prix Unitaire Quantité

AB 5003 Ecran 500.00 50

CU050 Clavier 100.000 40

D1234 UC 400.000 100

Pour réaliser un en-tête pour un tableau, on construit la première ligne de ce tableau à l’aide des balises <th> ….. </th> ou bien de <tr>…..</tr>.

X- les Frames :


Les lignesDe données

En-tête


Utilisés en HTML pour partager la fenêtre du navigateur Web ensous-fenêtres appelées : frames ou cadres.

Sont utilisées pour charger plusieurs documents web sur la mêmefenêtre du navigateur.

Utilisées aussi pour réaliser des fenêtres de la navigation.Pour construire les frames, on emploi l’instruction HTML

<frameset> dont la syntaxe : <frameset rows="n1, n2, ……" | cols="m1, m2, ……" >

<frame src="URL" ><frame src="URL" >...

</frameset>- Exemple :

<frameset cols="25%, 75%" ><frame><frame>

</frameset>

-Note: la balise <frameset> remplace la balise <body>

A- les attributs de la balise <frameset> :1) rows="n1, n2, ….." : pour indiquer le nombre et la dimension desframes horizontales à construire.

n1, n2, ………… sont des nombres entiers définissant la hauteurde chaque frame, soit en nombre de pixels (si le symbole % est omis),ou bien en pourcentage par rapport à la hauteur de la fenêtre dunavigateur.2) cols="m1, m2, ….." : indique le nombre et les dimensions des framesverticales à afficher (idem à 1).

B- Attributs de la balise <frame> :1) src="URL" : indique l’adresse où se trouve le document Web àcharger dans la frame.2) scrolling="auto" | "yes" | "no" : active ou désactive l’affichage desbarres de défilement par la frame.3) noresize : interdit l’utilisateur de la page Web de Redimensionner leframe à l’exécution.4) marginwidth="n" : les marges du frame à gauche et à droite.5) marginheight="m" : les marges en haut et en bas du frame.- Utilisation du caractère * dans les attributs rows et cols :

<frameset cols="30%, 25%, * " ><frame ?>



<frame ?><frame ?>

</frameset>Le troisième frame occupe l’espace qui reste de la fenêtre du navigateurc'est-à-dire « * » représente : (100-30-25= 45%)- Exercice :

Cols="*, 2* " : cette instruction va créer 2 frames dont la dimensionde la deuxième est égal à la double de la dimension de la première.

Cols="50%, *, 4* " = "50%, 10%, 40%" - Rédigera le contenu d’un lien vers un frame:

<a href="URL" target="nom du frame">…</a>L’attribut target sert à indiquer le nom du frame dans laquelle le contenude l’URL sera chargé.

-Exercice d’application :1) créer un document HTML nommée "index.html" qui contient 2 framesverticales, le premier frame à gauche occupe 20% de l’espace dunavigateur.

Interdire à l’utilisateur de modifier la dimension des deux frames.2) créer un fichier "menu.html" contenant un menu vertical sous formedes liens pointant sur les pages d’accueil des sites suivants :

Google, Yahoo, Menara, hp et IBMLes URLS référencés dans les liens doivent être rédigés vers la

deuxième frame de "index.html".3) Modifier "index.html" pour que le contenu de la page "menu.html" soitchargé dans le premier frame.

XI- Les Formulaires :Technique ajoutée à HTML pour interagir avec l’internaute.Constitué d’un ensemble d’olyets (zones de saisie, cases à cocher,

boutons radio…………) à travers desquelles l’utilisateur de la page peutexécuter des actions sur la page (saisie des données, sélection desvaleurs d’une liste……..).

Pour créer un formulaire en HTML, on utilise la balise<form>..</form>-Syntaxe :

<form action="URL" [methode="get" | "post" ] >Les objets constituants le formulaire

</form>



1) l’attribut action : sert à indiquer l’URL du programme ou du script quiva traiter les informations.2) l’attribut "methode" : indique la méthode utilisée par le navigateur pourenvoyer les données du formulaire au programme spécifié dans l’attribut"action".- Il ya deux méthodes :

- get : le navigateur avant d’envoyer les données du formulaireajoute celles-ci à la fin de l’URL indiqué comme valeur de l’attribut"action".

- post : avec cette méthode, le navigateur envoie les données duformulaire dans une autre requête http invisible à l’utilisateur.

-Note : il est recommandé d’utiliser la méthode "post" à cause de lalimite de la méthode "get" en taille des informations autorisés à l’envoie.

1- Zone de texte/de mot de passe : <input type=" t e x t " | "password" [size="n"][maxlength="m"]

name="nom" [value="valeur par défaut" ]>

- type : indique le type de la zone de saisie.- Size : la largeur de la zone de saisie n>0 (longeur).- Maxlength : le nombre maximum de caractères autorisées à taper

dans la zone de texte.- Name : identifie la zone de saisie.- Value : valeur par défaut affiché sur la page Web.

- Exemple : Log in <input type="text" name="log" > <br />Password <input type="password" name="pass" >

2- case à cocher : <input type="checkbox" name="nom" value="valeur" [checked] >

L’attribut checked sert à cocher la case à l’affichage.La valeur de la case ne sera envoyée que dans le cas où la case estcochée.

-Exemple : <h3>Systèmes d’exploitation </h3>

<input type="checkbox" name="case1" value="Win" > Windows<br />

<input type="checkbox" name="case2" value="Unix" > Unix <br />



<input type="checkbox" name="case3" value="Mac" > Mac Os <br/>

<input type="checkbox" name="case4" value="bsd" > Free BSD<br />

<input type="checkbox" name="case5" value="Linux" > Linux<br />

3- Bouton Radio: <input type="radio" name="nom" value="valeur" [checked] >

4- Zone de Texte Multiligne : <textarea name="nom" cols="n" rows="m" > Le texte </textarea>

5- La Liste déroulante (menu) : <select nom="nom" size="n" [multiple] >

<option value="valeur1" selected > Option1<option value="valeur2" selected > Option2..

</select>

6- Zone pour sélectionner un fichier:<input type="file" src="URL local" name="nom" >

Sert pour sélectionner sur la machine locale le fichier à envoyer.

7- Les boutons : a) si le formulaire sera examiné par un script placé sur le serveur Web,deux types de boutons à envoyer :

Un bouton qui sert à envoyer les données du formulaire : "submit"Un deuxième bouton qui initialise les valeurs des champs duformulaire : le bouton : "reset".

b) si les données du formulaire seront examinés par un script local(nécessite seulement un navigateur (à l’aide de javascrit par exemple)).

Dans ce cas le bouton est de type "button" et le script à exécuterpar le bouton est placé comme valeur de l’attribut : "onclick".-Syntaxe :

<input type="submit" | "reset" | "button" value="titre du bouton" >-Exemple :Formulaire envoyé vers un script externe :

<form action="test.exe" methode="get" >Log in : <input type="text" name="log" > <br />



Mot de passé : <input type="password" name="pass" ><br />

<input type="submit" value="connexion" >< /form>

-Exemple 2 :Même script que le dernier sauf : l’après dernière ligne du script qui seraremplacé par la ligne suivante :

<input type="button" value="fermer" onclick="window.close( )" >

8- Groupement des champs:À l’aide de la balise <fieldset>, on peut grouper un ensemble de

champs d’un formulaire :-Syntaxe :

<fieldset><legend align=" ?" > texte </legend>

La partie du formulaire à grouper</fieldset>


les applications hypermédia

Documents