Support de Cours HTML 5

(1)

TABLE DES MATIERES

PARTIE 2

Chapitre 1 : Le HTML

1.1Introduction

1.2Structure de base d’un document HTML 1.3Balises de structure

1.4Balises de formatage et mise en page 1.5Balises de listes 1.6Balises d’hyperliens 1.6.1 Les liens 1.6.2 Les ancres 1.7Les images 1.8Les tableaux 1.8.1 Balises de tableaux 1.8.2 Légende

1.8.3 Fusion des cellules 1.9Les cadres : Frames

1.10 Les formulaires

1.10.1 Création de formulaire 1.10.2 Composants des formulaires

1.10.2.1 Zones de texte 1.10.2.2 Cases à cocher 1.10.2.3 Boutons d’option 1.10.2.4 Zones de liste 1.10.2.5 Boutons de commande 1.11 Microsoft FrontPage

Chapitre 2 : Javascript

2.1 Introduction 2.2 Javascript le langage 2.2.1 Variables 2.2.2 Données 2.2.3 Opérateurs

2.2.4 Déclaration et appel des fonctions 2.2.5 L’expression de conditions if…else 2.2.6 L’expression For

2.2.7 L’expression While 2.3 Javascript et les objets

2.3.1 Définition d’objet 2.3.2 Objets dans Javascript

2.3.3 Objet document (objet de base) 2.4 Javascript et le HTML

2.4.1 Insertion d’une fonction dans un document HTML 2.4.2 Insertion du code de Javascript dans un fichier externe 2.4.3 Insertion d’un événement dans une balise HTML

(2)

2.5.1 Le contrôle ligne de texte 2.5.2 Le contrôle textarea 2.5.3 Les boutons radio

2.5.4 Les boutons case à cocher 2.5.5 Liste de sélection

(3)

Elément 2 : La programmation WEB

Chapitre 1 : Le HTML

1.1. Introduction

Le fonctionnement du Web consiste en un échange d’informations entre un ordinateur demandant des informations, appelé client, et un autre ordinateur qui les lui fournit, appelé serveur. Le logiciel client ou navigateur, demande des pages HTML à un serveur situé sur un intranet ou sur Internet.

Les documents disponibles sur le Web sont écrits en langage HTML (Hyper-text Markup Language). Un document est dit hypertexte lorsqu’il permet d’accéder à d’autres documents au moyen d’un simple clic de souris sur une partie de son texte.

Le navigateur ou browser est un logiciel qui permet d’afficher les pages écrites en langage HTML. Si vous êtes connectés à Internet, il vous permettra de naviguer sur le Web. Les logiciels navigateurs les plus utilisés sont : Microsoft Internet Explorer et Netscape

Navigator.

Une page HTML est un fichier Ascii (du texte) qui est composé par: Le contenu de la page à visualiser par le navigateur.

Un certain nombre de commandes appelées balises ou tags interprétés par le navigateur. Ces balises se distinguent du contenu de la page par les signes < et >, par exemple <html>.

Quand on écrit les balises d'une page HTML, Il faudra toujours garder à l'esprit qu'une balise marque une action pour le navigateur: ce qu'il doit faire.

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

Un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows ou tout autre éditeur équivalent.

(4)

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

Pour écrire, visualiser et mettre à jour une page HTML, on procédera comme suit: Utiliser un éditeur de texte pour créer le fichier HTML

Sauvegarder ce fichier avec l'extension .html ou .htm (ne pas fermer l'éditeur) Ouvrir le navigateur.

Afficher le document via le menu Fichier/Ouvrir… (ou File/Open file...)

Pour d’éventuelles modifications, il n'est pas nécessaire d’ouvrir à chaque fois le navigateur: Retourner dans l'éditeur de texte (sans fermer le navigateur).

Modifier les codes Html. Enregistrer le fichier.

Utiliser la commande Actualiser (Recharger ou Reload) du navigateur.

1.2. Structure de base d’un document HTML

La structure de base d'un document HTML est: <HTML>

<HEAD>

<TITLE> Titre du document </TITLE> </HEAD>

<BODY>

Le corps du document </BODY>

</HTML>

Le langage HTML est un langage utilisant des balises (délimiteurs) : Pour apporter une modification à une portion de texte, vous devez encadrer ce texte entre deux balises. Par exemple, pour souligner le texte la faculté des sciences, il faut délimiter ce texte par : <U> la faculté des sciences </U>. HTML utilise deux types de balises :

(5)

ligne).

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

comme <U>….</U>.

Les identifiants de balises ne sont pas sensibles à la casse. Certaines balises sont associées à un ou plusieurs attributs. Ces derniers précisent une autre action à exécuter par le navigateur. Chaque attribut à un identifiant et une valeur (entre "" et après =), par exemple :

<IMG SRC= "photo.gif">.

Vous pouvez insérer des commentaires dans vos pages HTML (ceux-ci seront invisibles lors de l’affichage de la page), en utilisant la balise < ! Commentaires>.

Remarque : Si vous voulez insérer deux balises dans une page HTML, il ne faut jamais

écrire : <BALISE1> texte1 <BALISE2> texte2 </BALISE1> texte3 </BALISE2>.

1.3. Balises de structure

• <HTML>…</HTML>: indique qu'il s'agit d'un document HTML. Tout le contenu et le

code HTML doivent être inclus entre <HTML> et </HTML>.

• <HEAD>…</HEAD>: Contient les balises qui composent l'en-tête du document

(titre,…).

• <TITLE>…</TITLE>: Donne un titre descriptif du document. Ce titre s'affiche sur la

barre de titre des navigateurs.

Exemple: <TITLE> Faculté des Lettres et Sciences Humaines, Kénitra </TITLE>.

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

corps du document.

Syntaxe:

(6)

Link="couleur des liens non visités" VLink="couleur des liens visités" ALink="couleur des liens activés" Text="couleur du texte">

…Corps du document

</BODY>

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

Exemple:

Contenu et code HTML du corps de document… </BODY>

Il existe d'autres balises de structure particulières qu'on verra par la suite.

1.4. Balises de formatage et mise en page

Ces balises permettent d'utiliser divers attributs de police, de style et de mise en forme. • <B>…</B>: Affiche le texte en gras.

Exemple: <B> Sommaire </B>

• <I>…</I>: Affiche le texte en italique.

Exemple: Avez-vous vu <I>La planète des Singes </I>? • <U>…</U>: Affiche le texte en souligné.

Exemple: Il est <U>strictement interdit</U> de manger ou de boire dans cette salle.

• <STRIKE>…</STRIKE>: Affiche le texte en barré (barré). Exemple: Les éléments rejetés sont présentés sous le forme: . • <SUB>…</SUB>: Affiche le texte en indice.

Exemple:

soient a<SUB>1</SUB>, a<SUB>2</SUB> et a<SUB>3</SUB> trois entiers.

Résultat: soient a1, a2 et a3 trois entiers.

• <SUP>…</SUP>: Affiche le texte en exposant.

Exemple: Les 1<SUP>ers</SUP> jours du XXI<SUP>ème</SUP> siècle. Résultat: Les 1ers jours du XXIème siècle.

(7)

document. La taille du caractère décroît pour chaque niveau de titre, <H1> étant le plus élevé. Les titres s'affichent en gras.

Syntaxe: <Hn ALIGN = "LEFT/RIGHT/CENTER/JUSTIFY"> texte </Hn> Où n=1,2,3,4,5 ou 6.

Exemple: <H1 ALIGN = "CENTER"> Tables des matières </H1> <H2>Introduction</H2><BR>

<H2>Chapitre 1</H2><BR> …..

• <BR>: Insère un saut de ligne dans le document. Les retours chariot dans le code HTML

n'étant pas interprétés par le navigateur, les sauts de lignes doivent être alors exprimés explicitement par la balise <BR>.

Exemple: <H2> Les 10 meilleurs films </H2><BR> Hanibal<BR>

Nés pour danser<BR> …

• <CENTER>…<CENTER>: Centre tous les textes et les éléments contenus dans la

balise

Exemple: <CENTER> <B> Les meilleurs films de la semaine</B></CENTER> • <DIV>…</DIV>: Applique un alignement spécial à une partie du document. Syntaxe: <DIV ALIGN = "LEFT/RIGHT/CENTER/JUSTIFY">….</DIV>

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

Exemple: <DIV ALIGN = "RIGHT"> Cette section est entièrement alignée à droite. …….

</DIV>

• <HR>: Insère une ligne horizontale. Les lignes horizontales permettent de scinder la page

en plusieurs sections.

Syntaxe:

(8)

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

- NOSHADE: Supprime l'ombrage 3D et n'affiche qu'une ligne simple. - SIZE: Spécifie l'épaisseur (en pixels) de la ligne.

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

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

Exemple: <HR WIDTH=80% SIZE=4>

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

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

Syntaxe:

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

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

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

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

Exemple:

<BASEFONT SIZE=5 COLOR="Navy" FACE="Arial, Times, Helvetica"> • <P>…</P>: Définit un paragraphe.

Syntaxe: <P ALIGN= "alignement"> paragraphe

</P>

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

Exemple: <P ALIGN="CENTER"> <H1> BIENVENUE </H1> </P>

• <PRE>…</PRE>: Indique au navigateur qu'il faut afficher le texte dans une police à pas

fixe et prendre en compte les espaces, les tabulations et les retours chariot inclus entre <PRE> et </PRE>.

(9)

Syntaxe: <PRE WIDTH= largeur maximale> texte

</PRE>

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

Exemple:

Matricule Nom Salaire

1004 Sohail Khalid 5000

1005 Samih Omar 6500

2006 Ayyach Said 7000

</PRE>

1.5. Balises de listes

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

Il existe deux types de listes : Listes numérotées Listes à puces

• <LI> texte </LI>: Définit un élément de liste. Exemple: <LI> Rabat</LI>

<LI> Casablanca</LI> <LI> Agadir</LI>

Remarque: Bien que <LI> soit une balise conteneur (avec un début et une fin), on l'emploie

souvent de façon autonome (sans </LI>).

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

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

<LI> texte </LI> <LI> texte </LI> <LI> texte </LI> …..

(10)

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

A: pour les lettres capitales, dans l'ordre alphabétiques (A, B, C, …). a: pour les lettres minuscule, dans l'ordre alphabétiques (a, b, c, …). I pour les chiffres romains en capitales (I, II, III, IV, …).

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

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

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

Exemple: Plan

<LI> JAVASCRIPT </LI>

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

• <UL>…</UL>: Formate une liste à puces. Syntaxe:

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

<LI> texte </LI> <LI> texte </LI> <LI> texte </LI> ….

</UL>

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

DISC : cercle avec fond. SQUARE : carré avec fond. CIRCLE : cercle sans fond. - COMPACT: A la même fonction que dans <OL>.

Exemple:

Navigateurs:

(11)

<LI> Mozilla </LI> </UL>

1.6. Balises d’hyperliens

1.6.1. Les liens

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

vers un autre endroit du document.

vers un autre fichier HTML situé sur votre ordinateur. vers un autre fichier HTML situé sur le Web.

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

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

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

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

http://serveur/chemin.../fichier Pour accéder à des pages Web ftp://serveur/chemin.../fichier Pour faire un transfert de fichiers mailto:utilisateur@hôte Pour envoyer un mail

Exemples: <A HREF="http://www.microsoft.com/acceuil.htm > Microsoft </A> <A HREF="mailto:amine@caramail.com" > Ecrire à Amine </A>

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

Exemple: <A HREF="info.html" > Pour des Informations cliquer ici </A>

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

file:///lecteur:/répertoire/fichier.htm (en adressage absolu). ../../../fichier.htm (en adressage relatif).

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

(12)

Dans le deuxième exemple, si le fichier contenant le lien se trouve dans le répertoire c:\formation\supports, alors, pour que le lien marche, le fichier astuces.html doit se trouver dans le répertoire c:\formation\astuce Il faut noter donc que "../ " vous ramène "d'un répertoire en arrière" (vers le répertoire parent du répertoire courant).

Dans le troisième exemple, si le fichier contenant le lien se trouve dans le répertoire c:\formation\supports, alors il faut que:

- Le répertoire exercices soit un sous répertoire du répertoire supports c’est à dire on doit avoir le répertoire c:\formation\supports\exercices

- Le fichier exercices.html se trouve dans c:\formation\supports\exercices

1.6.2. Les ancres

Des liens peuvent aussi pointer vers un endroit précis du même ou d'un autre document. C'est ce qu'on appelle les ancres [Anchor], ancrages ou pointeurs

Pour définir l'endroit vers lequel on veut pointer (ou point d'ancrage), on utilise la balise <A> avec l'attribut NAME: <A NAME="nom de l'ancre"> cible </A>

Exemple: <A NAME= "activ"> Programme de formation: </A>

Ce programme vise à former des experts en génie logiciel et …..

L'ancre "activ" peut donc être utilisé par un lien pour accéder directement à l'endroit déterminé. Deux situations se posent:

1) Si le lien se trouve dans le même document que l'ancre alors la syntaxe de ce lien est: <A HREF="#nom de l'ancre">texte et/ou images</A>

Exemple: <H1 ALIGN="Center"> SOMMAIRE</H1> * Introduction

* Ressources humaines

* <A HREF= "#activ"> Programme de Formation </A>

2) Si le lien se trouve dans un autre document que l'ancre, la syntaxe du lien est:

<A HREF="URL du fichier contenant l'ancre #nom de l'ancre">texte et/ou images</A>

Exemple:

Soit etude.html un fichier contenant un ancre "info" défini par: <A NAME="info"> Information Pratique </A>

…

(13)

1.7. Les images

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

Mais avant d'insérer une image sur une page Web, il faut: Cerner l'idée à exprimer.

Trouver l'image qui l'exprime le mieux.

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

Généralement, il y a quatre types d'utilisations des images sur des pages WEB: Les photos de personnes, de produits, de lieux, …

Les bandeaux, et les logotypes. Les boutons ou icônes.

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

La balise <IMG>

Cette balise permet de placer une image sur une page Web. C'est une balise qui peut recevoir les attributs suivants:

Attribut Fonction

SRC Spécifie l'URL (chemin) du fichier qui contient l'image. WIDTH Spécifie la largeur de l'image en pixels.

HEIGHT Spécifie la hauteur de l'image en pixels. BORDER Définit l'épaisseur du cadre de l'image

ALT Spécifie le texte de remplacement de l'image destiné pour les navigateurs Non graphiques ou dans lesquels l'utilisateur a désactivé le chargement des images.

ALIGN Gère l'alignement du texte adjacent à l'image.

HSPACE Définit l'espace qui sera réservé à droite et à gauche de l'image. VSPACE Définit l'espace qui sera réservé en haut et en bas de l'image.

Syntaxe de <IMG>:

<IMG SRC= "URL du fichier image"

WIDTH= largeur HEIGHT= hauteur

ALT= "texte de remplacement" BORDER= épaisseur du cadre ALIGN= "TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT"

(14)

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

• HEIGHT et WIDTH: En spécifiant ces attributs de l'image, on accélère l'affichage de la

page. En effet, le navigateur se sert des valeurs de ces attributs pour réserver l'emplacement de l'image, qu'il viendra occuper au terme de son chargement. En l'absence de ces informations, le navigateur charge en mémoire l'image entière, calcule ses dimensions, la place sur la page et alors continue ensuite d'afficher le reste du document. Ainsi l'absence de ces attributs peut rend lent l'affichage de la page.

• ALT: Cet attribut spécifie un texte de remplacement destiné au navigateurs non

graphiques. Ce texte sera affiché à la place de l'image. Il est également utilisé par les moteurs d'indexation qui n'interprètent pas les images et doivent par conséquent se référer au contenu de ALT.

Une balise <IMG> devrait ressembler à cela:

<IMG SRC= "URL du fichier graphique" ALT= "texte de remplacement" WIDTH= largeur en pixels HEIGHT= hauteur en pixels >

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

Les autres attributs:

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

provoque un affichage de l'image sans cadre.

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

BORDER=5>

• HSPACE et VSPACE: Définissent l'espace qui sera laissé autour de l'image ce qui permet

de la placer mieux et disposer sur la page. HSPACE prend pour valeur le nombre de pixels qui seront réservés à droite et à gauche de l'image. VSPACE prend pour valeur le nombre de pixels qui seront réservés en haut et en bas.

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

• ALIGN: Gère l'habillage de l'image par le texte et prend les valeurs indiquées dans le

(15)

Valeur Fonction

TOP Aligne le haut du texte adjacent sur le sommet de l'image. MIDDLE Aligne la ligne de base du texte adjacent sur le milieu de l'image.

BOTTOM Aligne la ligne de base du texte adjacent sur la base de l'image.(valeur par défaut)

LEFT Aligne l'image sur la marge gauche et permet son habillage par le texte sur sa droite.

RIGHT Aligne l'image sur la marge droite et permet son habillage par le texte sur sa gauche.

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

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

Exemple: Comment centrer une image

<DIV ALIGN="CENTER"> <IMG SRC="terre.gif" WIDTH= 50 HEIGHT= 60> </DIV> Exemples: Utilisation de ALIGN

1- Différence entre TOP, MIDDLE et BOTTOM:

<IMG SRC="terre.gif" ALT="la terre tourne" ALIGN= TOP WIDTH= 50 HEIGHT= 60> "Et pourtant elle tourne …" avait <BR> dit le sage Galilée.

<br>

<IMG SRC="terre.gif" ALT="la terre tourne" ALIGN= MIDDLE WIDTH= 50 HEIGHT= 60> "Et pourtant elle tourne …" avait <BR> dit le sage Galilée.

<br>

<IMG SRC="terre.gif" ALT="la terre tourne" ALIGN= BOTTOM WIDTH= 50 HEIGHT= 60> "Et pourtant elle tourne …" avait <BR> dit le sage Galilée.

(16)

ALIGN= TOP ALIGN= BOTTOM ALIGN= MIDDLE

2- Utilisation de LEFT pour l'habillage de l'image par du texte:

<IMG SRC="terre.gif" ALT="la terre tourne" ALIGN= LEFT WIDTH= 50 HEIGHT= 60> "Et pourtant elle tourne …" avait <BR> dit le sage Galilée.

(17)

4- Utilisation de LEFT et RIGHT conjointement pour entourer le texte par deux images.

<IMG SRC="terre.gif" ALT="la terre tourne" ALIGN= LEFT WIDTH= 50 HEIGHT= 60> <IMG SRC="terre.gif" ALT="la terre tourne" ALIGN= RIGHT WIDTH= 50 HEIGHT= 60> "Et pourtant elle tourne …" avait <BR> dit le sage Galilée.

1.8. Les tableaux

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

Les cellules sont les éléments constituant un tableau. Elles contiennent soit des données, soit des entêtes de colonnes.

(18)

Les lignes composent le tableau.

1.8.1. balises de tableaux

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

<TABLE> <TR>

<TH> En-tête 1 </TH> En-tête 1

<TH> En-tête 2 </TH> En-tête 2

… Ligne 1 pour les en-têtes

<TH> En-tête n </TH> En-tête n

</TR> <TR>

<TD> Elément de colonne 1 </TD> Cellule 1

<TD> Elément de colonne 2 </TD> Cellule 2 Ligne 2

…

<TD> Elément de colonne n </TD> Cellule n

</TR> … <TR>

<TD> Elément de colonne 1 </TD> Cellule 1

<TD> Elément de colonne 2 </TD> Cellule 2 Ligne m

…

<TD> Elément de colonne n </TD> Cellule n

</TR> </TABLE>

Règle à respecter:

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

Exemple de tableau

(19)

© 46 <TH> Trimestre </TH> <TH> Volume Horaire </TH> </TR> <TR> <TD> HTML </TD> <TD> 1 </TD> <TD> 20 </TD> </TR> <TR> <TD> JavaScript </TD> <TD> 2 </TD> <TD> 30 </TD> </TR> <TR> <TD> ASP </TD> <TD> 2 </TD> <TD> 40 </TD> </TR> </TABLE>

Ce tableau sera affiché sur le Web comme suit :

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

• Les balises <TABLE> et </TABLE> spécifient le début et la fin du tableau. Le tableau est justifié à gauche par défaut.

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

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

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

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

(20)

spécifié par les balises appropriées à l'intérieur de chaque pair <TD></TD>.

• Chacune des balises de tableau dispose d'un ensemble d'attributs qu'on examinera ci-dessous

• Le contenu des cellules peut être: du texte des images

d'hyperliens (ou liens)

des arrière-plans

et même des tableaux

1.8.2. Légende

Pour ajouter une légende au tableau, on insère le texte correspondant entre les balises

<CAPTION> et </CAPTION>. La légende sera centrée au-dessus du tableau. Le texte de la

légende peut être mis en forme en utilisant les différentes balises de formatage. Les balises <CAPTION> et </CAPTION> doivent être placées entre <TABLE> et </TABLE> :

<TABLE>

<CAPTION> texte de légende </CAPTION>

… </TABLE>

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

<CAPTION>

<FONT SIZE=4 COLOR="BLUE"> Nouvelles Matières Introduites </FONT>

</CAPTION> <TR ALIGN= LEFT> <TH> Matière </TH> <TH> Trimestre </TH> <TH> Volume Horaire </TH> </TR> <TR> <TD> HTML </TD> <TD> 1 </TD> <TD> 20 </TD> </TR> <TR> <TD> JavaScript </TD> <TD> 2 </TD> <TD> 30 </TD> </TR> <TR> <TD> ASP </TD> <TD> 2 </TD> <TD> 40 </TD>

(21)

</TABLE>

1.8.3. Fusion des cellules

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

Fusion Horizontale :

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

Exemple :

<TD ALIGN= CENTER COLSPAN= 2 > <IMG SRC= "images/telephone1.gif"> </TD> <TD> <IMG SRC= "images/telephone2.gif"> </TD> </TR> <TR>

<TD> Première série <BR> En octobre 2000 </TD> <TD> Deuxième série <BR> En septembre 2001 </TD> <TD> Sortie en 1999</TD>

</TR> </TABLE>

(22)

Fusion verticale :

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

Exemple :

<TD ALIGN= CENTER ROWSPAN= 2 > <IMG SRC= "images/telephone1.gif"> </TD>

<TD> Première série <BR> En octobre 2000 </TD> </TR>

<TR>

<TD> Deuxième série <BR> En septembre 2001 </TD> </TR> <TR> <TD ALIGN= CENTER> <IMG SRC= "images/telephone2.gif"> </TD> <TD> Sortie en 1999</TD> </TR> </TABLE>

(23)

1.9. Les cadres : Frames

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

1.9.1. Quelques utilisations des frames:

Les frames ne doivent pas être employés uniquement parce qu'ils offrent un joli design au site WEB. Ils doivent répondre aux besoins et aux caractéristiques du visiteur du site, et améliorer de façon significative la présentation du contenu.

L'application la plus courante consiste à fournir un contenu statique (une table de matières par exemple) dans un frame et un contenu variable dans un autre. A cet effet, deux frames seulement sont nécessaires: L'un situé à gauche de la fenêtre, l'autre occupant l'espace restant et chargé d'afficher les documents. Dans les frames statiques, on trouve souvent des:

Liens de navigation vers d'autres pages. Tables de matières

Bannières et logos Outils de recherche

Le visiteur interagit dans le frame statique (clique un lien, saisie d'un critère de recherche, etc.), et les résultats s'affichent dans le frame variable.

(24)

1.9.2. Création des frames

Avant de commencer le codage HTML, il est conseillé de faire un croquis de la page finale. Cela permet de décider de la construction la plus efficace du document contenant des cadres.

La balise <FRAMESET>

Il faut donc commencer par diviser la page en zones indépendantes; c'est le rôle des balises

<FRAMESET> et </FRAMESET>. Les attributs que reçoivent ces balises sont essentiels à

la définition des cadres.

La balise <FRAMESET> requiert l'un des deux attributs suivants :

Attribut Fonction Valeurs Possibles

ROWS

Divise l'écran en zones horizontales (en lignes)

Des nombres, des pourcentages ou des astérisques (*) séparés par des virgules (,) qui indiquent les tailles des cadres.

L'astérisque indiquant que la carde occupe tout l'espace restant.

COLS Divise l'écran en zones verticales (en colonnes)

(Identiques à ROWS)

Remarque : Généralement, on utilise des pourcentages et des astérisques (*) pour indiquer

la taille de chaque cadre.

La structure de base du document HTML, où on définit des cadres, est la suivante : <HTML> <HEAD> <TITLE> titre de la page </TITLE> </HEAD>

<FRAMESET ROWS="tailles de zones horizontales" OU COLS="tailles de zones verticales">

Définition du contenu de chaque cadre

</FRAMESET>

</HTML>

Remarques: 1) On note que dans la structure de base d'un document contenant des cadres,

les balises <FRAMESET> et </FRAMESET> ne sont pas mises entre les deux balises <BODY> et </BODY>

2) On ne doit utiliser que l'un des attributs ROWS ou COLS dans la balise

<FRAMESET>. Si les deux sont présents dans la même balise <FRAMESET>, le navigateur n'interprétera que le premier attribut rencontré.

(25)

Bordure des cadres:

On peut modifier l'épaisseur des bords des cadres ou de supprimer les bords. Les documents se présentent comme une page Web ordinaire, sans les bords des cadres. On utilise pour cela les deux attributs:

Attribut Fonction Valeurs Possibles

FRAMEBORDER Affiche ou masque la bordure du cadre.

1 pour afficher la bordure. 0 pour masquer la bordure.

BORDER Spécifie l'épaisseur de la bordure Un entier

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

Définition des contenus des cadres: <FRAME>

La balise <FRAMESET> ne fait que définir les différents cadres (ou frames). Il reste à placer dans chaque frame le contenu qui lui convient. C'est le rôle de la balise <FRAME> et de ses nombreux attributs.

L'attribut important et obligatoire de la balise <FRAME> est SRC qui indique au navigateur l'URL du document à charger dans le frame. Cette balise peut recevoir les attributs suivants:

Attribut Fonction

SRC Indique l'URL du document à charger dans le frame (attribut obligatoire)

NAME="nom" Attribue au frame un nom unique, qui servira de référence à l'attribut TARGET

NORESIZE Interdit le redimensionnement du frame par l'utilisateur.

SCROLLING=YES/NO/AUTO Gère l'apparition des barres de défilement, la valeur par défaut est AUTO:

- YES : Affiche les barres de défilement. - NO : Masque les barres de défilement.

- AUTO : Affiche les barres de défilement si nécessaire.

MARGINHEIGHT=n Spécifie n pixels comme marge intérieure à réserver en haut et en bas du frame

MARGINWIDTH=n Spécifie n pixels comme marge intérieure à réserver à droite et à gauche du frame

Exemples

1) Division de la fenêtre du navigateur en deux cadres verticaux pour afficher respectivement

les deux documents HTML tabmat.html et accueil.html. Le premier cadre occupera 30% de la fenêtre, et le deuxième occupera le reste. On suppose que les trois fichiers HTML de l'exemple sont stockés dans le même dossier.

(26)

tabmat.html

<HTML> <HEAD> <TITLE> Sommaire </TITLE> </HEAD> <BODY>

<H3 ALIGN=CENTER>Tables des Matières </H3> <BR>

….. </BODY> </HTML>

accueil.html

<HTML> <HEAD> <TITLE> Accueil </TITLE> </HEAD> <BODY>

<H3 ALIGN=CENTER>Bienvenue sur notre site</H3> <BR>

….. </BODY> </HTML>

index.html : Utilisé pour la décomposition de la fenêtre du navigateur pour afficher les deux

documents précédents.

<HTML> <HEAD> <TITLE> Index </TITLE> </HEAD>

<FRAMESET COLS="30% , *">

<FRAME SRC="tabmat.html">

<FRAME SRC="accueil.html" NAME= "contenu"> </FRAMESET>

(27)

<FRAMESET> dans index.html. index.html

<FRAMESET ROWS="30% , *">

</HTML>

L'attribut TARGET

L'une des applications courantes des frames est l'utilisation d'un cadre dont le contenu est statique et un ou plusieurs autres cadres dont le contenu change. Ce changement peut être fait suite à un clic sur un lien par exemple. Pour cela, il faut spécifier dans le lien:

Le document HTML à charger (valeur de l'attribut HREF de la balise <A>)

Le cadre dans lequel on doit faire l'affichage du document, c'est le rôle de l'attribut

TARGET de la balise <A>.

L'attribut TARGET prend comme valeur le nom du cadre vers lequel on veut rediriger le document indiqué dans l'attribut HREF:

<A HREF=" URL du document HTML" TARGET= "Nom de cadre" > Exemple

(28)

chapitre1.html qui sera chargé dans la frame "contenu". tabmat.html

<HTML> <HEAD> <TITLE> Sommaire </TITLE> </HEAD> <BODY>

<H3 ALIGN=CENTER>Tables des Matières </H3> <BR>

……….. <BR>

<A HREF="chapitre1.html" TARGET= "contenu"> <B> CHAPITRE I </B></A>

</BODY> </HTML>

accueil.html

<HTML> <HEAD> <TITLE> Accueil </TITLE> </HEAD> <BODY>

<H3 ALIGN=CENTER>Bienvenue sur notre site</H3> <BR> ………….

</BODY> </HTML>

index.html : Utilisé pour la décomposition de la fenêtre du navigateur pour afficher les deux

documents précédents.

<FRAMESET COLS="30% , *">

(29)

Balises <FRAMESET> imbriquées

On peut élaborer des mises en page complexes en imbriquant des balises <FRAMESET> et </FRAMESET>. Supposons, par exemple, qu'on veuille diviser la page en huit régions égales. On commence par définir quatre frames horizontaux, comme cela:

<FRAMESET ROWS="25%, 25% ,25%, 25%"> ….

</FRAMESET>

Il faut ensuite diviser en deux colonnes chacune de rangées. Le code pour chaque frame vertical serait:

<FRAMESET COLS="50%, 50%"> ….

</FRAMESET>

Reste donc à imbriquer ces balises dans le premier code, comme suit:

<FRAMESET ROWS="25%, 25% ,25%, 25%">

<FRAMESET COLS="50%, 50%">  ….

</FRAMESET>

</FRAMESET> </FRAMESET>

Exemple

On va diviser la fenêtre du navigateur en deux rangées verticales. La première, dont le contenu sera statique, sert à charger le fichier tabmat.html (voir l'exemple précédent). La deuxième rangée sera divisée en deux rangées horizontales. La première, dont le contenu sera statique, sert à charger le fichier entete.html, et la deuxième sert à charger en premier lieu le

(30)

entete.html

<HTML> <HEAD> <TITLE>Algorithmique & Programmation </TITLE> </HEAD> <BODY>

<H3 ALIGN=CENTER>Maîtriser Algorithmique et Programmation en QBasic</H3> <HR>

</BODY> </HTML>

index2.html : Sert à diviser la fenêtre du navigateur en trois rangées et charger dans chacune

un fichier HTML. On utilise l'attribut NORESIZE de la balise <FRAME> pour empêcher le redimensionnement du cadre contenant le fichier entete.html. <HTML> <HEAD> <TITLE> Index </TITLE> </HEAD>

<FRAMESET COLS="20%, *">

<FRAME SRC="tabmat.html"> <FRAMESET ROWS="30%, *">

<FRAME SRC="entete.html" NORESIZE> <FRAME SRC="accueil.html" NAME="contenu"> </FRAMESET>

(31)

1.10. Les formulaires

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

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

Les données transmises par un formulaire sont traitées par un programme CGI, un script ASP ou PHP.

1.10.1. Création de formulaire

Les balises permettant de spécifier les composants du formulaire doivent être placées entre les conteneurs <FORM> et </FORM>. Ces composants peuvent être: des champs de saisie, des listes de sélection, des cases à cocher, des boutons de commandes ou d'options, …etc.

La balise <FORM>

La balise ouvrante <FORM> définit également l'en-tête du formulaire à l'aide des attributs cités ci-dessous. Seul la propriété ACTION est obligatoire.

Attribut Fonction

ACTION

Spécifie l'URL du script qui doit traiter les données du formulaire.

METHOD

Indique la méthode HTTP employée pour transmettre les données au serveur. Les valeurs possibles sont: GET (valeur par défaut) ou

POST. TARGET

Indique le cadre vers lequel la réponse du script doit être chargée.

NAME Spécifie le nom du formulaire.

ENCTYPE Spécifie le type du fichier envoyé.

ACCEPT Spécifie la liste des contenus acceptables par le serveur de traitement.

(32)

ACCEPT-CHARSET Spécifie la liste des jeux de caractères acceptables par le script de traitement.

ACTION indique l'URL du script de traitement, de sorte que le navigateur sache où

envoyer les données après validation. L'URL peut être donnée:

Sous forme absolue: ACTION="protocole://serveur/chemin/fichier de script"

Exemple: ACTION="HTTP://www.ensias.ac.ma/traitement/biblio/consulter.asp" Sous forme relative: Cette forme est utilisée dans le cas où le script de traitement

se trouverait sur le même serveur que le formulaire.

Exemple: ACTION= "consulter.asp"

METHOD: spécifie la méthode HTTP employée pour passer les données au script. Les

valeurs possibles sont:

GET: le navigateur concatène les données du formulaire à l'URL du script de

traitement. L'emploi de cette méthode limite la taille des données envoyées à environ 1 Ko. Cette limitation pose problème lorsqu'on désire envoyer une grande quantité de données. Les données concaténées à l'URL, la chaîne résultante peut être trop longue. Dans ce cas, on privilégie la méthode POST.

POST: les données sont transmises au serveur via une transaction HTTP distincte. TARGET: permet d'envoyer la réponse du script vers un cadre donné.

NAME: indique le nom du formulaire. Cette propriété est utilisée, surtout, dans les scripts

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

ENCTYPE: employé dans le cas où les données transmises seraient constituées par un ou

plusieurs fichiers que le serveur doit traiter. Il prend pour valeur le type MIME du fichier de données transmis par le formulaire. Cet attribut renseigne le navigateur sur le type de fichier qu'il envoie. Pour permettre l'envoi d'un fichier au serveur, on doit utiliser la balise <INPUT> avec l'attribut TYPE= "File" (Voir la balise <INPUT>).

Exemple:

<FORM ACTION = "trait_logo.cgi" METHOD = POST ENCTYPE = "image/gif"> Indiquez le nom de votre fichier GIF contenant votre logo:

(33)

</FORM>

L'en-tête de ce petit formulaire indique au serveur que les données seront traitées par le script trait_logo.cgi, que la méthode POST est employée, et que le type du fichier transmis est image/gif.

ACCEPT: indique les types MIME reconnus par le serveur. Ainsi, lorsque plusieurs

fichiers sont transmis via le formulaire, on peut assurer qu'ils relèvent tous de types acceptables.

Exemple: ACCEPT = "image/gif,image/jpeg".

ACCEPT-CHARSET: indiquent les tables de caractères reconnues par le serveur. Exemple: ACCEPT-CHARSET = "EUC-JP"

La valeur EUC-JP spécifie que les données transmises au serveur sont en caractères Japonais.

Exemple Général:

<FORM ACTION = "trait_logo.cgi" METHOD = POST TARGET = "frame1" NAME="form1" ENCTYPE = "image/gif" ACCEPT = "image/gif,image/jpeg"

ACCEPT-CHARSET = "EUC-JP" >

Indiquez le nom de votre fichier GIF contenant votre logo: <INPUT TYPE="FILE" NAME="logo">

</FORM>

1.10.2. Composants des formulaires

Ces composants peuvent être des: Zones de texte.

Cases à cocher. Boutons d'options. Zones de liste.

(34)

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

Type de Champ Balise HTML

Champ de saisie <INPUT TYPE = "TEXT">

Champ de mot de passe <INPUT TYPE = "PASSWORD"> Zone de texte multilignes <TEXTAREA> ….</TEXTAREA>

Fichier <INPUT TYPE = "FILE">

Champ masqué <INPUT TYPE = "HIDDEN">

Case à cocher <INPUT TYPE = "CHECKBOX"> Bouton d'option <INPUT TYPE = "RADIO">

Zone de liste <SELECT>…<OPTION>…</SELECT> Bouton de commande de validation <INPUT TYPE = "SUBMIT">

Bouton de commande d'initialisation <INPUT TYPE = "RESET"> Bouton de commande "scripté" <INPUT TYPE = "BUTTON">

Comme le montre le tableau ci-dessus, la balise <INPUT> gère la plupart des types de champs; cela grâce aux multiples valeurs que prend son attribut TYPE. Selon le type de champ, <INPUT> devra également recevoir d'autres attributs qu'on indiquera dans les sections suivantes.

Les balises citées dans le tableau précédent ne font que produire les champs eux-mêmes. C'est au concepteur de la page HTML de précéder chaque champ d'un libellé qui indique à l'utilisateur quelle information entrer.

Généralement, on utilise un tableau (souvent sans bordure) pour justifier ces libellés et les composants du formulaire.

1.10.2.1 Zones de texte 1) Zone de texte monoligne:

Ce type de composant permet de saisir un texte sur une seule ligne.

Pour produire un champ de saisie, on se sert d'un code comme celui-ci (les attributs entre crochets sont facultatifs):

(35)

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

L'attribut NAME est obligatoire en ce qu'il identifie les données reçues par le champ. L'attribut facultatif VALUE prend pour valeur la chaîne de caractères qui apparaîtra par

défaut dans le champ. Ainsi, on épargne à l'utilisateur de saisir le texte lui-même lorsque les données sont prévisibles. Le texte par défaut sert aussi à indiquer le type d'information attendu.

L'attribut SIZE indique la longueur (en caractères) qu'occupera le champ c à d le nombre de caractères visibles du champ. La valeur par défaut est de vingt caractères.

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

Exemple:

Nom d'utilisateur: <INPUT TYPE = TEXT NAME = "nom_login" SIZE = 20 MAXLENGTH= 15>

2) Champ de mot de passe:

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

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

Exemple:

3) Zone de texte multilignes:

Les champs de saisie et de mot de passe ne peuvent contenir qu'une seule ligne de texte. Pour créer des zones de texte multilignes, on utilise les balises <TEXTAREA> et

</TEXTAREA>. En voici la syntaxe:

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

(36)

</TEXTAREA>

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

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

Le texte inclus entre <TEXTAREA> et <TEXTAREA> apparaîtra comme contenu par défaut.

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

Exemple:

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

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

<FORM ACTION = "URL d'un script" ENCTYPE = "type MIME du fichier"> Fichier à Envoyer: <INPUT TYPE = "FILE" NAME = "nom">

…

</FORM>

Le fichier transmis peut être un fichier Word, une image, etc. Les champs de transfert de fichiers sont accompagnés d'un bouton Parcourir, qui permet à l'utilisateur d'aller chercher le fichier sur son disque. Ce bouton Parcourir est automatiquement inséré par le navigateur. 5) Champ masqué:

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

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

Les champs masqués permettent notamment d'exploiter un seul script général pour le traitement de différents formulaires. Le script doit savoir de quel formulaire particulier lui parvient les données; un champ masqué peut livrer cette information cette information

(37)

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

1.10.2.2. Cases à cocher

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

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

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

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

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

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

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

Exemple:

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

<INPUT TYPE = CHECKBOX NAME = "MT" VALUE = "1"> Maintenance <BR>

1.10.2.3. Boutons d’options

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

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

(38)

<INPUT> avec le même nom (NAME).

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

Exemple:

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

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

1.10.2.4. Zones de liste

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

<SELECT NAME = "nom" [SIZE = nombre d'éléments affichées] [MULTIPLE] > <OPTION VALUE = "valeur1" [SELECTED] > texte d'option 1 </OPTION> <OPTION VALUE = "valeur2" [SELECTED] > texte d'option 2 </OPTION>

…

<OPTION VALUE ="valeurN" [SELECTED] > texte d'option N </OPTION> </SELECT>

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

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

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

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

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

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

(39)

défaut.

Exemple:

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

<OPTION VALUE ="autre" > Autre </OPTION> </SELECT>

1.10.2.5. Boutons de commande

La balise <INPUT> permet également de générer des boutons de commande. Ces boutons sont réparties en trois types:

SUBMIT (valider): Lorsque l'utilisateur clique sur ce bouton, les données du formulaire sont rassemblées et envoyées au serveur.

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

BUTTON: C'est un bouton "scripté" utilisé, généralement, pour déclencher un traitement en utilisant un script côté client (en JavaScript, VBScript…).

1) Bouton de validation:

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

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

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

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

Exemple:

(40)

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

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

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

3) Bouton "scripté":

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

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

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

L'événement OnClick spécifie le script (une fonction en JavaScript ou VBScript,…) à exécuter suite à un clic sur le bouton.

Exemple:

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

1.11. Microsoft FrontPage

Lors de l’élaboration de ce cours consacré à la création de pages Web, notre souci était de présenter les bases du langage HTML bien qu’il existe des éditeurs de pages Web qui ne nécessitent nullement la connaissance du langage HTML. Un exemple de tels éditeurs est le Microsoft FrontPage. Nous avons préféré qu’il soit la partie concluante de ce chapitre. Nous donnons ici une présentation à titre informatif et le plus brièvement possible.

(41)

© 68 Microsoft FrontPage fait partie de la suite de logiciels Office et a une interface commune avec ceux-ci. Il ressemble en quelque sorte à Word avec des différences majeures : Le but de FrontPage est d’éditer et de publier des pages web. Ces pages sont seulement accessibles avec l’utilisation d’un navigateur. FrontPage enregistre ses documents dans le format HTML.

.

La barre des affichages permet de voir votre site Web de différentes perspectives. Elle contient des icônes permettant de gérer des informations importantes sur votre site. L’affichage Page montre la page en cours. L’affichage Dossiers permet de visualiser les dossiers de votre site. L’affichage Rapport génère un rapport avec des informations utiles voire des statistiques sur votre site. Le mode Navigation aide à structurer et à organiser les pages du site. L’affichage Liens Hypertexte permet de voir tous les liens d’une page vers d’autres destinations. La vue tâches permet d’enregistrer les tâches à accomplir pour vous ou d’autres personnes.

Temps de chargement de la page Barre d’affichage 3 différentes vues d’une page

(42)

Un site Web est un ensemble de pages HTML reliées entre elles par des liens Hypertextes. Un site comprend les pages ainsi que les images référencées dans chaque page de ce site.

Lorsque vous commencez une nouvelle page, il est recommandé de commencer par la saisie du texte. Une fois terminée, vous pouvez appliquer la mise en forme.

Mise en forme et enregistrement

Pour faire de la mise en forme, utilisez les boutons de la barre d’outils Mise en forme ainsi que les commandes disponibles dans le menu Format.

La boîte de dialogue d’enregistrement comporte deux options supplémentaires : Titre de la

page et Modifier. Ces deux derniers permettent d’attribuer un titre de page pour la page Web

en cours d’enregistrement. Lors de l’enregistrement d’une page Web, FrontPage affiche parfois une boîte de dialogue signifiant que le mode page a un objet en mémoire et qu’il ne sait pas où l’enregistrer.

Les listes

FrontPage vous permet de créer plusieurs sortes de listes comme dans Word. Il y’a des listes à puce et numérotées. Pour créer une liste, cliquez sur la commande Puces et numéros du menu Format.

(43)

Les liens Hypertextes

Les liens Hypertextes sont le fondement de la navigation sur internet. FrontPage rend la tâche de création de toutes sortes de liens hypertextes très facile.

Pour créer un lien vers une autre page dans votre site : sélectionnez le texte, puis cliquer sur la commande lien hypertexte du menu Insertion, la boîte de dialogue suivante s’ouvre :

La barre lien hypertexte permet de créer quatre types de liens : Un lien vers un fichier sur votre disque dur ou votre site.

Un lien externe vers une autre page Web sur Internet ou dans votre site.

Un lien vers une page vierge qui sera créée quand vous confirmerez la création du lien.

Un lien de courrier électronique.

La procédure de création de liens hypertextes est la même si vous utilisez du texte ou une image.

Insertion de tableaux, images et cadres.

Pour insérer un tableau, déplacez le point d’insertion à l’endroit où vous voulez créer le tableau, puis sélectionnez Tableau/Insérer/Tableau.

Pour insérer une image, cliquer sur le bouton Insertion/Image/A partir du fichier. Atteindre le dossier contenant l’image et cliquez sur OK.