Copyright: CODExpert 2001© Tous droits réservés


Accueil & Introduction
CODExpert 1.66

Apprentissage du langage HTML

Introduction:

Aujourd'hui, la création de pages Web est simplifiée grâce à la mise au point de nombreux logiciels vous permettant d'éditer des documents complets sans même être en contact avec le langage de programmation HTML.  L'utilisation de telles applications n'est pas la solution la plus économique.  En effet, il est possible de créer les pages d'aspect professionnel sans le moindre outil spécialisé, uniquement en connaissant les rudiments de base du HTML.

CODExpert - Apprentissage du langage HTML est un guide complet conforme à la norme HTML 4.0 adoptée par le World Wide Web Consortium.  Certaines fonctions traitées ici ne sont pas officiellement adoptées, mais comme elle sont supportées par les principaux navigateurs, nous avons cru bon les intégrer au guide.

Ce guide d'apprentissage est indépendant CODExpert et ne couvre pas l'utilisation du logiciel.  Il est destiné à tout futur utilisateur de CODExpert qui désire approfondir ses connaissances en programmation.  Les éléments théoriques sont regroupés en 16 leçons faciles à lire.  Nous vous conseillons fortement de mettre en application, au fur et à mesure, les éléments présentés en vous servant de CODExpert ou, si vous n'êtes pas encore familier avec ce logiciel, en vous servant du Bloc-Notes de Windows.

Table des matières

Bases d'un document HTML

Attributs de caractères

Mise en forme de paragraphes

Intégration de listes

Insertion d'images

Liens hypertextes

Relations entre dossiers

Règles horizontales

Fond et couleurs de la page

Tableaux

Formulaires

Images Map

Cadres

Multimédia

Applet Java

Javascript

CODExpert et ses composantes périphériques sont protégés par la loi du copyright et les conventions internationales.  Il est strictement interdit de dupliquer, de transformer, d'adapter, de traduire ou de publier sous toute forme le présent ouvrage sans le consentement de ses auteurs.  Il n'est pas permis de distribuer ce document séparément du logiciel CODExpert.

Pour toute information ou commentaire, contactez l'auteur:  info@codexpert.com

Révisé le 12 février 2001

CODExpert 2001 © Tous droits réservés.


Table des matières
CODExpert 1.66

Table des matières

Bases d'un document HTML

Attributs de caractères

Mise en forme de paragraphes

Intégration de listes

Insertion d'images

Liens hypertextes

Relations entre dossiers

Règles horizontales

Fond et couleurs de la page

Tableaux

Formulaires

Images Map

Cadres

Multimédia

Applet Java

Javascript

CODExpert et ses composantes périphériques sont protégés par la loi du copyright et les conventions internationales.  Il est strictement interdit de dupliquer, de transformer, d'adapter, de traduire ou de publier sous toute forme le présent ouvrage sans le consentement de ses auteurs.  Il n'est pas permis de distribuer ce document séparément du logiciel CODExpert.

Pour toute information ou commentaire, contactez l'auteur:  info@codexpert.com

Révisé le 12 février 2001

CODExpert 2001 © Tous droits réservés.


Bases d'un document HTML
Première Leçon

Bases d'un document HTML

Les pages Web sont des fichiers de texte en format ASCII 7 bits, c'est à dire sans caractères accentués.  Ils portent l'extension (*.htm) mais ils peuvent être lus dans un petit éditeur de texte, tel le Bloc-Notes de Windows.

Les commandes en langage HTML sont dites balisées et se démarquent par leur format:

<marqueur> texte </marqueur>

Pour être détectés par les navigateurs comme Netscape ou Internet Explorer, ces fichiers doivent comporter une structure de base propre aux pages Web.

Voici les marqueurs de base:

<HTML> (début du document)

<HEAD> (ouverture de la zone d'en-tête)

<TITLE> (titre de la page) </TITLE>

</HEAD> (fermeture de la zone d'en-tête)

<BODY> (ouverture du corps du document)

Mettre le contenu de la page ici

</BODY> (fin du corps du document)

</HTML> (fin du document)

Titre d'une page Web

<TITLE> Titre de la page </TITLE>

Le titre de la page apparaît dans la barre de titre du logiciel de navigation.  Vous n'êtes tenu de donner un titre à votre page, mais comme certains outils de recherche cataloguent les sites à partir de ce renseignement, il n'est pas conseillé de négliger cet aspect de votre page.

Leçon suivante: Attributs de caractères

CODExpert 2001 © Tous droits réservés.


Attributs de caractères
Deuxième Leçon

Attributs de caractères

Il est possible de formater le texte d'une page Web pour le rendre plus agréable à l'oeil.  Voici les principales commandes et leur syntaxe:

Caractères gras:<B>texte</B>

Caractères italiques: <I>texte</I>

Caractères soulignés: <U>texte</U>

Exemple 2.1

Le <B>langage HTML</B> 1.0 a été <U>développé</U> par <I>Dan Connolly</I>.

Donne:

Le langage HTML 1.0 a été développé par Dan Connolly.

Caractères Le Type: <TT>texte</TT>

Caractères clignotants: <BLINK>texte</BLINK>

Caractères rayés: <STRIKE>texte</STRIKE>

Caractères en exposant:<SUP>texte</SUP>

Caractères en indice: <SUB>texte</SUB>

Caractères centrés: <CENTER>texte</CENTER>

Exemple 2.2

<CENTER>Formules chimiques: H<SUB>2</SUB>O et SO<SUB>4</SUB><SUP>-2</SUP></CENTER>

Donne:

Formules chimiques:

Suite de ce chapitre:

Tailles, polices et couleurs

Leçon suivante: Mise en forme de paragraphes

CODExpert 2001 © Tous droits réservés.


Taille ,polices, couleurs
Deuxième Leçon

Taille des caractères

Il est possible de modifier la dimension des caractères.

Taille des caractères:

<FONT SIZE=val>texte</FONT>

La valeur doit être comprise entre -2 et +4. Par défaut la valeur est zéro.

Exemple 2.3

<FONT SIZE=+3>CODExpert</FONT> est un outil en <FONT SIZE=-2>programmation</FONT>

Donne:

CODExpert est un outil en programmation

Police d'affichage

Vous pouvez aussi utiliser des polices TrueType pour remplacer la police d'affichage par défaut de Netscape.  Par contre, si le visiteur qui télécharge votre page ne possède pas les mêmes polices que vous, l'apparence de la page veut varier.  Si vous utilisez cette fonction, limitez vous à des polices connues et couramment utilisées.

Polices de caractère:

<FONT FACE="nom_police">texte</FONT>

Notez:

Avec le paramètre FACE, vous pouvez lister plusieurs noms de police dans un même marqueur.  Ainsi, si Netscape, ne trouve pas la première police sur l'ordinateur, il tentera d'utiliser les autres polices que vous avez spécifiées.  Lorsque vous listez des polices, séparez-les par une virgule.

Exemple 2.4

<FONT FACE="Arial,Times NewRoman,Courier">texte</FONT>

Couleur des caractères

Il est possible de modifier la couleur d'une portion de texte uniquement.

Couleur des caractères:

<FONT COLOR=FF0000>texte</FONT>

Notez:

Les couleurs sont codés en valeurs Hexadécimales.  Cliquez ici pour en savoir plus!

Notez:

Il est possible de combiner les paramètres 'COLOR', 'FACE' et 'SIZE' dans le même marqueur <FONT>. N'oubliez pas d'associer la balise de fermeture </FONT> à chacun des marqueurs <FONT>.

Leçon suivante: Mise en forme de paragraphes

CODExpert 2001 © Tous droits réservés.


Mise en forme de paragraphes
Troisième Leçon

Mise en forme de paragraphes

Dans cette leçon, vous apprendrez comment aligner des paragraphes, définir des marges latérales, etc.

Changement de paragraphe: <P> en début de paragraphe

Alignement de paragraphe: <P ALIGN=Left | Center | Right> en début de paragraphe

Bloc en retrait: <BLOCKQUOTE>paragraphe</BLOCKQUOTE>

Exemple 3.1

<P ALIGN=right>CODExpert a été créé avec le langage de programmation Basic.

Donne:

CODExpert a été créé avec le langage de programmation Basic.

Retour à la ligne: <BR>

Sans retour à la ligne: <NOBR> en début de paragraphe

Texte préformaté: <PRE>paragraphe</PRE>

Exemple 3.2

CODExpert est optimisé pour Netscape 4.0.<BR>Bon travail!

Donne:

CODExpert est optimisé pour Netscape 4.0.

Bon Travail!.

Mise en forme rapide

Pour afficher les lignes d'en-tête d'une page, il est possible d'utiliser des marqueurs qui ajustent automatiquement la grosseur les caractères en fonction de l'importance du titre:

<H1>texte</H1>Gros caractères (titre principal)

<H2>texte</H2>

<H3>texte</H3>

<H4>texte</H4>

<H5>texte</H5>

<H6>texte</H6>Petits caractères

Exemple 3.3

<CENTER><H1>Bienvenue sur ma page Web</H1>

<H3>Dernière mise à jour: 99-12-18</H3></CENTER>

Donne:

Bienvenue sur ma page Web

Dernière mise à jour: 99-12-18

Commentaires invisibles

Vous pouvez insérer des commentaires dans votre document qui ne seront pas visibles dans le navigateur:

Commentaires invisibles: <!--Commentaires-->

Exemple 3.4

<CENTER>Bienvenue sur ma page Web</CENTER>

<!--Dernière mise à jour: 96-12-18-->

Donne:

Bienvenue sur ma page Web

Leçon suivante: Intégration de listes

CODExpert 2001 © Tous droits réservés.


Intégration de listes
Quatrième Leçon

Intégration de listes

L'utilisation de listes permet la diffusion de l'information de façon hiérarchisée.

Les listes ordonnées:

Ouverture liste: <OL>

Ligne: <LI>

Fermeture liste: </OL>

Exemple 4.1

<OL>

<LI>Premier point

<LI>Deuxième point

<OL>

<LI>Premier point secondaire

<LI>Deuxième point secondaire

</OL></OL>

Donne:

1.  Premier point

2.  Deuxième point

1.  Premier point secondaire

1.  Deuxième point secondaire

Notez:

Vous pouvez utiliser une numérotation différente en ajoutant le paramètre TYPE à la commande d'ouverture de liste.  Voici les variantes:

<OL TYPE=1>

<OL TYPE=a>

<OL TYPE=I>

<OL TYPE=i>

Notez:

En utilisant le paramètre NB, vous pouvez spécifier le numéro d'une ligne.

<LI NB=3>

Les listes non ordonnées:

Ouverture liste: <UL>

Ligne: <LI>

Fermeture liste: </UL>

Exemple 4.2

<UL>

<LI>Premier point

<LI>Deuxième point

<UL>

<LI>Premier point secondaire

<LI>Deuxième point secondaire

</UL></UL>

Donne:

Premier point

Deuxième point

Premier point secondaire

Deuxième point secondaire

Notez:

Vous pouvez utiliser des puces différentes en ajoutant le paramètre TYPE à la commande d'ouverte de liste.  Voici les variantes:

<OL TYPE=disc>

<OL TYPE=circle>

<OL TYPE=square>

Leçon suivante: Insertion d'images

CODExpert 2001 © Tous droits réservés.


Insertion d'images
Cinquième Leçon

Insertion d'images

Pour embellir vos pages Web vous pouvez y inclure des images.  Seuls les formats GIF et JPG sont acceptés sur Internet.  Il n'est pas recommandé de diffuser des images gourmandes en espace disque, car elle ralentissent l'affichage de la page et découragent les visiteurs.

Commande principale:

<IMG SRC="image.gif ou jpg">

Afin d'accélérer le processus de chargement de votre page dans le navigateur, il est recommandé de spécifier les dimensions de l'image avec les paramètres WIDTH et HEIGHT.

<IMG SRC="image" WIDTH=val HEIGHT=val> (valeur 1 à ...)

Il est aussi possible d'aligner les images sur la page. Voici les variantes:

<IMG SRC="image" ALIGN=LEFT | RIGHT | TOP | MIDDLE | BOTTOM>

Autres commandes d'alignement particulières:

<IMG SRC="image" ALIGN=TEXTTOP | ABSMIDDLE | BASELINE | ABSBOTTOM>

Alignement du texte avec l'image:

<IMG SRC="image" ALIGN= LEFT | RIGHT HSPACE=val VSPACE=val>

HSPACE définit l'espace horizontal entre le texte et l'image.

VSPACE définit l'espace vertical entre le texte et l'image.

Exemple 5.1

<IMG SRC="timbre.gif" ALIGN=LEFT HSPACE=4>

Grâce à son Assistant, CODExpert crée le code de base de votre page web.

Donne:

Grâce à son Assistant, CODExpert crée le code de base de votre page web

Notez:

Utilisez la commande <BR CLEAR> pour passer à la ligne sous l'image lorsque vous utilisez le paramètre HSPACE avec une image.

<BR CLEAR>

Expressions alternatives

Certains internautes préfèrent ne pas télécharger automatiquement les images d'une page et n'activent pas l'option “Auto Chargement des Images” de leur navigateur.  Dans ce cas, à la place de l'image, apparaît une petite icône.  Vous pouvez rajouter à côté de cette icône un court texte décrivant l'image et sa fonction.  Dans le cas, utilisez le paramètre ALT.

Exemple 5.2

<IMG SRC="timbre.gif" ALT="Timbre">

Donne: (si Auto Chargement Images n'est pas activé dans Netscape)

Leçon suivante: Liens hypertextes

CODExpert 2001 © Tous droits réservés.


Liens hypertextes
Sixième Leçon

Liens hypertextes

Les liens hypertextes permettent de passer d'une page à une autre, d'un site à un autre.

Commande principale:

<A HREF="fichier.htm">Nom du lien</A>

Liens avec d'autres sites:

<A HREF="http://www.autre.site.ca">Nom du lien</A>

Les pointeurs hypertextes ne se limitent pas à des portions de texte comme nous vous l'avons présenté ci-dessus.  Les images peuvent, elles aussi, servir de pointeur. Pour ce faire, il suffit de substituer le texte entre les marqueurs par la commande <IMG>.

Exemple 6.1

<A HREF="fichier.htm"><IMG SRC="timbre.gif"></A>

donne:

Notez:

Avec la commande de l'exemple précédent, l'image s'entoure d'une bordure pour indiquer qu'elle cache un lien hypertexte.  Il est possible d'éliminer cette bordure en ajoutant le paramètre BORDER à la commande <IMG>

<A HREF="fichier.htm"><IMG SRC="timbre.gif" BORDER=0></A>

Sans la commande BORDER:

Avec la commande BORDER=0

Adresse de courrier électronique

Commande principale: (MAILTO)

<A HREF="mailto:nom@fournisseur.ca">Votre adresse</A>

Exemple 6.2

<A HREF="mailto:daniel@starnet.ca">Écrivez-moi!</A>

donne:

Ecrivez-moi!

Renvois internes

Les renvois internes permettent de créer des liens entre différentes parties d'une même page à des emplacements précis.  Deux marqueurs sont utilisés.  Il faut premièrement insérer un repère où l'on désire que le renvoi aboutisse, puis créer un lien hypertexte qui amènera le visiteur à cet emplacement.

Commande du repère:

<A NAME="nom_repère">

Le marqueur <A NAME> doit être inséré à l'emplacement précis où vous désirez que lien aboutisse.  Toute expression alphanumérique peut servir de repère.  Si votre page comporte plusieurs repères, assurez-vous qu'ils soient bien distincts.

Lien hypertexte avec renvoi:

<A HREF="fichier.htm# nom_repère">

Utilisez la commande habituelle du lien hypertexte mais ajoutez le symbole # suivit du nom du repère.

Leçon suivante: Règles horizontales

CODExpert 2001 © Tous droits réservés.


Relation entre dossiers
Septième Leçon

Relations entre dossiers

Il est possible de créer des sous dossiers sur le serveur qui accueillera vos pages web.  Vous pouvez, par exemple, placer toutes les images dans un sous dossier afin de gérer plus facilement votre espace serveur.

Lien vers un fichier d'un dossier enfant :

Vous travaillez dans le document index.html et vous désirez insérer l'image image.gif qui se trouve dans le sous dossier img.  Il faudra indiquer au navigateur l'endroit où se trouve votre image ce cette façon :

Exemple 7.1

<IMG SRC="img/image.gif">

Lien vers un fichier d'un dossier parent :

Vous travaillez dans le document index.htm et vous désirez faire un lien vers des pages se trouvant dans les autres dossiers.

Exemple 7.2

Lien vers la page outils.htm qui se trouve dans le dossier section2 :

<A HREF="../outils.htm">Outils</A>

Lien vers la page moteurs.htm qui se trouve dans le dossier section1 :

<IMG SRC="../../section1/moteurs.htm">Moteurs</A>

Notez:

La notation "../" indique au navigateur de remonter d'un niveau dans la hiérarchie des dossiers.  Par exemple, pour remonter de trois niveaux, on utilise simplement la notation "../../../fichier.htm".

Notez:

La notation "./" indique au navigateur le dossier courant.  Mais par défaut, on ne l'indique jamais.  Ainsi, <IMG SRC="./image.gif"> est équivalent à <IMG SRC="image.gif">.

Leçon suivante: Règles horizontales

CODExpert 2001 © Tous droits réservés.


Règles horizontales
Huitième Leçon

Règles horizontales

Commande principale: <HR>

Alignement:

<HR ALIGN=Left | Center | Right>

Ajustement de la longueur:

<HR WIDTH=val | %>

Ajustement de l'épaisseur:

<HR SIZE=val>

Sans effet de profondeur:

<HR NOSHADE>

Exemple 8.1

<HR ALING=CENTER SIZE=2 WIDTH=50%>

donne:

Leçon suivante: Fond et couleurs de la page

CODExpert 2001 © Tous droits réservés.


Couleurs et fond de page
Neuvième Leçon

Image de fond d'une page Web

Commande principale:

<BODY BACKGROUND="image">

Notez:

Afin de respecter la norme HTML 3.2, le marqueur <BODY> ne doit apparaître qu'à un seul endoit dans le document.  Pour ajouter une image de fond, il faut simplement ajouter le paramètre BACKGROUND au marqueur <BODY> qui délimite le corps de la page (voir l'exemple 8.1).

Exemple 9.1

<HTML>

<HEAD>

<TITLE>Ma Page</TITLE>

</HEAD>

<BODY BACKGROUND="nuages.jpg">

</BODY>

</HTML>

Couleurs d'une page Web

Couleur de fond: (unie)

<BODY BGCOLOR=000000>

Couleur du texte:

<BODY TEXT=FFFFFF>

Couleur des liens hypertextes:

<BODY LINK=0000FF>

Couleur des liens déjà visités:

<BODY VLINK=FF00FF>

Couleur des liens en cliquant avec la souris:

<BODY VLINK=FFFFFF>

Code des principales couleurs:

Blanc: FFFFFF

Jaune: FFFF00

Rouge: FF0000

Noir: 000000

Magenta: FF00FF

Vert: 00FF00

Bleu: 0000FF

Cyan: 00FFFF

Notez:

Il est possible de définir les couleurs de plusieurs structures pour une même page Web.  Pour de faire, il suffit de combiner les paramètres présentés ci-haut en une seule ligne de commande:

<BODY BGCOLOR=12FF00 LINK=0000FF VLINK=345600>

Notez:

Comme pour l'image de fond, il faut ajouter ces paramètres au marqueur <BODY> qui délimite le corps du document.

Notez:

Il est possible de combiner la commande de l'image de fond avec les autres paramètres:

<BODY BACKGROUND="Nuages.jpg" BGCOLOR=12FF00 TEXT=0000FF>

Notez:

Les couleurs sont codés en valeurs Hexadécimales.  Cliquez ici pour en savoir plus!

Leçon suivante: Tableaux

CODExpert 2001 © Tous droits réservés.


Tableaux
Dixième Leçon

Tableaux

L'utilisation de tableaux facilite la disposition des informations sur une page Web.

Commande principale:

<TABLE>zone tableau</TABLE>

Largeur globale du tableau:

<TABLE WIDTH=val | %>...</TABLE>

Bordure du tableau:

<TABLE BORDER=val>...</TABLE>

Espace entre le contenu des cellules et les côtés:

<TABLE CELLPADDING=val>...</TABLE>

Épaisseur des lignes séparatrices des cellules:

<TABLE CELLSPACING=val>...</TABLE>

Chacune des lignes du tableau est définie par les marqueurs:

<TR>...</TR>

Chacune des cellules est définie par les marqueurs:

<TD>...</TD>

Exemple 10.1

<TABLE BORDER=1>

<TR><TD>Cellule1</TD><TD>Cellule2</TD></TR>

<TR><TD>Cellule3</TD><TD>Cellule4</TD></TR>

</TABLE>

donne:

Paramètres pour cellules:

Alignement horizontal: (du contenu de la cellule)

<TD ALIGN=Left | Center | Right>...</TD>

Alignement vertical: (du contenu de la cellule)

<TD VALIGN=Top | Middle | Bottom>...</TD>

Largeur de la cellule:

<TD WIDTH=val | %>...</TD>

Fusion de cellules:

Fusion à l'horizontale:

<TD COLSPAN=val>...</TD>

Fusion à la vertical:

<TD ROWSPAN=val>...</TD>

Exemple 10.2

<TABLE BORDER=1 CELLPADDING=3>

<TR><TD COLSPAN=2>Cellule1</TD></TR>

<TR><TD>Cellule2</TD><TD>Cellule3</TD></TR>

</TABLE>

donne:

Couleur de fond:

Couleur de fond d'une cellule:

<TD BGCOLOR=FF0000>...</TD>

Le code de la couleur est en Hexadécimal.

Notez:

Les cellules des tableaux peuvent contenir du texte, des images et des liens hypertextes.

Leçon suivante: Formulaires

CODExpert 2001 © Tous droits réservés.


Formulaires - Introduction
Onzième Leçon

Formulaires

Les formulaires vous donnent la possibilité de recueillir des informations auprès des visiteurs de votre site.  Divers éléments s'offrent à vous: champs de texte, boîtes à cocher, boutons radio, listes déroulantes et zones de texte.

Notez:

Les formulaires nécessitent l'utilisation d'un script pour recueillir les informations contenues dans les champs.  Renseignez-vous auprès de votre fournisseur afin de déterminer si un script est disponible sur le serveur.

Commande principale:

<FORM METHOD=POST | GET ACTION="url_script">...</FORM>

Nom d'un formulaire:

<FORM NAME="nom_formulaire">...</FORM>

Il est souvent utile de donner un nom à un formulaire pour le jumeler à un Javascript.

Les champs d'un formulaire:

Champ de texte

Boîte à cocher

Bouton Radio

Liste déroulante

Zone de texte

Boutons d'envoi/effacement

Notez:

Toutes lignes de commandes des champs doivent êtres incluses dans la zone <FORM>...</FORM>.

Leçon suivante: Images Map

CODExpert 2001 © Tous droits réservés.


Formulaires - Champs texte
Onzième Leçon

Champs texte

Note: cliquez sur les paramètres en vert pour de plus amples détails

Description: ce champ sert principalement à la cueillette d'informations succinctes (nom, adresse, etc)

Commande de base:

<INPUT TYPE=TEXT NAME="nom" SIZE=val>

Autres paramètres:

... VALUE="texte">

... MAXLENGTH=val>

Exemple 11.1

<B># de téléphone:</B><BR>

<INPUT TYPE=TEXT NAME="No_tel" SIZE=12 VALUE="514-" MAXLENGTH=12>

donne:

# de téléphone:

Les champs d'un formulaire:

Boîte à cocher

Bouton Radio

Liste déroulante

Zone de texte

Boutons d'envoi/effacement

Leçon suivante: Images Map

CODExpert 2001 © Tous droits réservés.


Formulaires - Boîtes à cocher
Onzième Leçon

Boîtes à cocher

Note: cliquez sur les paramètres en vert pour de plus amples détails

Description: ce champ permet au visiteur de choisir une ou plusieurs options parmi celles qui s'offrent à lui.

Commande de base:

<INPUT TYPE=CHEKBOX NAME="nom" VALUE="expression">

Autres paramètres:

... CHECKED>

Exemple 11.2

<B>Cartes de crédit:</B><BR>

<INPUT TYPE=CHECKBOX NAME="CARTES" VALUE="MASTER_C" CHECKED>MASTER CARDE<BR>

<INPUT TYPE=CHECKBOX NAME="CARTES" VALUE="VIZA">VIZA<BR>

<INPUT TYPE=CHECKBOX NAME="CARTES" VALUE="AM_EX">AMERICANE EXPRESSE<BR>

donne:

Cartes de crédit:

 MASTER CARDE

 VIZA

 AMERICANE EXPESSE

Notez:

Les boîtes à cocher d'une même série (comme dans l'exemple précédent) doivent avoir de même paramètre NAME.

Les champs d'un formulaire:

Champ de texte

Bouton Radio

Liste déroulante

Zone de texte

Boutons d'envoi/effacement

Leçon suivante: Images Map

CODExpert 2001 © Tous droits réservés.


Formulaires - Boutons radio
Onzième Leçon

Boutons Radio

Note: cliquez sur les paramètres en vert pour de plus amples détails

Description: ce champ permet au visiteur de choisir une option parmi celles qui s'offrent à lui.

Commande de base:

<INPUT TYPE=RADIO NAME="nom" VALUE="expression">

Autres paramètres:

... CHECKED>

Exemple 11.3

<B>Mode de paiement:</B><BR>

<INPUT TYPE=RADIO NAME="PAIEMENT" VALUE="MON_ELEC" CHECKED>Monnaie Électronique<BR>

<INPUT TYPE=RADIO NAME="PAIEMENT" VALUE="CHEQUE">Chèques<BR>

<INPUT TYPE=RADIO NAME="PAIEMENT" VALUE="CREDIT">Cartes de crédit<BR>

donne:

Mode de paiement:

 Monnaie Électronique

 Chèques

 Cartes de crédit

Notez:

Les boutons radio d'une même série (comme dans l'exemple précédent) doivent avoir de même paramètre NAME.

Les champs d'un formulaire:

Champ de texte

Boîte à cocher

Liste déroulante

Zone de texte

Boutons d'envoi/effacement

Leçon suivante: Images Map

CODExpert 2001 © Tous droits réservés.


Formulaires - Listes déroulantes
Onzième Leçon

Listes déroulantes

Note: cliquez sur les paramètres en vert pour de plus amples détails

Commande principale:

<SELECT NAME="nom" SIZE=val>...</SELECT>

Items de la liste:

<OPTION>texte</OPTION>

Item sélectionné par défaut:

<OPTION SELECTED>texte</OPTION>

Exemple 11.4

<SELECT NAME="PRODUIT">

<OPTION SELECTED>CODExpert 1.1 WIN 95</OPTION>

<OPTION>CODExpert 1.1 WIN 3.x</OPTION>

<OPTION>CODExpert 1.2 WIN 95</OPTION>

<OPTION>CODExpert 1.2 WIN NT</OPTION>

</SELECT>

donne:

Les champs d'un formulaire:

Champ de texte

Boîte à cocher

Bouton Radio

Zone de texte

Boutons d'envoi/effacement

Leçon suivante: Images Map

CODExpert 2001 © Tous droits réservés.


Formulaires - Zones de texte
Onzième Leçon

Zones de texte

Note: cliquez sur les paramètres en vert pour de plus amples détails

Commande principale:

<TEXTAREA NAME="nom" ROWS=val COLS=val>texte par défaut</TEXTAREA>

Exemple 11.5

<TEXTAREA NAME="COMMENTAIRES" ROWS=3 COLS=4>Vos commentaires ici</TEXTAREA>

donne:

Les champs d'un formulaire:

Champ de texte

Boîte à cocher

Bouton Radio

Liste déroulante

Boutons d'envoi/effacement

Leçon suivante: Images Map

CODExpert 2001 © Tous droits réservés.


Formulaires - Bouton d'envoi/effacement
Onzième Leçon

Bouton d'envoi

Commande:

<INPUT TYPE=SUBMIT VALUE="texte bouton">

Bouton d'effacement

Commande:

<INPUT TYPE=RESET VALUE="texte du bouton">

Notez:

Ces boutons sont généralement situés à la fin d'un formulaire.  Comme pour les autres champs, il est essentiel d'inclure ces commandes dans la zone <FORM>...</FORM>.

Les champs d'un formulaire:

Champ de texte

Boîte à cocher

Bouton Radio

Liste déroulante

Zone de texte

Leçon suivante: Images Map

CODExpert 2001 © Tous droits réservés.


Images Map CSIM
Douzième Leçon

Images Map CSIM

Une image map est une image graphique dont certaines zones, que vous déterminez, constituent des hyperliens vers d'autres pages web dans le même site ou ailleurs sur Internet.

La ligne de commande d'une image map est semblable à une image normale. Seul, un paramètre est ajouté.

Commande principale:

<IMG SRC="image.gif" USEMAP="#reference_map">

Notez:

Il faut ajouter une autre série de commandes pour délimiter les zones cliquables de l'image.  Cette série de coordonnées est généralement placée à la fin du document.

Il existe sur Internet un logiciel avec une interface graphique qui vous permet de délimiter les zones cliquables sur une image très facilement. Ce petit utilitaire gratuit se nomme MAPTHIS.

Vous pouvez obtenir ce logiciel à partir du site web de CODExpert dans la section 'Boîte à outils':

http://www.codexpert.com

Voici un exemple de coordonnées pour images Maps:

<MAP NAME="nom_map">

<AREA SHAPE=RECT COORDS="213,296,289,336" HREF="fichier.htm" TARGET="cadre">

<AREA SHAPE=CIRCLE COORDS="499,355,14" HREF="fichier.htm" TARGET="cadre">

<AREA SHAPE=POLY COORDS="637,362,637,362,551,366" HREF="fichier.htm" TARGET="cadre">

<AREA SHAPE=DEFAULT HREF="fichier.htm" TARGET="cadre">

</MAP>

Notez:

CODExpert ne supporte que les images map CSIM.  Par conséquent, les autres types de map ne sont pas présentées dans ce document.

Leçon suivante: Multi-fenestration

CODExpert 2001 © Tous droits réservés.


Cadres - Introduction
Treizième Leçon

Cadres

Le procédé de cadres (FRAME) peut être comparé au concept du tableau (TABLE), mais il a l'avantage d'offrir un contenu dynamique, c'est-à-dire qu'on peut modifier le contenu d'une section de l'écran au fur et à mesure que le visiteur explore le site.

Tout d'abord, il est essentiel de visualiser la structure de pages web nécessaire à l'utilisation du procédé de cadres.

Une page web doit être spécialement créée pour définir la partition de l'écran.  Ce document ne contient que des marqueurs spéciaux qui indiquent au Navigateur comment définir les cadres.  C'est de ce document que nous discuterons dans ce chapitre.

À chacun des cadres définis, on associe ensuite une page Web "normale" qui contient le texte et les éléments graphiques.  Ainsi pour un site qui comporte deux cadres distincts (A & B), il faudra trois pages dès de départ.  (Voir le schéma ci-dessous)  Il est possible de greffer ensuite d'autres pages qui pourront être affichées au fur et à mesure que le visiteur explore le site.

Dans ce chapitre:

Structure de base

Cadres mixtes

Liens hypertextes entre les cadres

Fonctions hypertextes avancées

Leçon suivante: Multimédia

CODExpert 2001 © Tous droits réservés.


Cadres - Structure de base
Treizième Leçon

Structure de base

La page qui informera le navigateur de la disposition des cadres doit présenter la structure suivante:

Voici les marqueurs de base:

<HTML> (début du document)

<HEAD> (ouverture de la zone d'en-tête)

<TITLE> (titre de la page) </TITLE>

</HEAD> (fermeture de la zone d'entêté)

<FRAMESET> (ouverture zone de cadres)

Définir les cadres ici

</FRAMESET> (fermeture zone de cadres)

</HTML> (fin du document)

Marqueur <FRAMESET>...</FRAMESET>

C'est par le biais de ce marqueur que l'on spécifie au navigateur le nombre et la dimension des cadres.

Ligne de commande:

<FRAMESET COLS|ROWS="(dimensions)">

Exemple 13.1

<FRAMESET COLS="20%,80%">

(definir les cadres ici)

</FRAMESET>

donne:

Deux cadres, l'un occupant 20% (A) de la largeur de l'écran, et l'autre 80% (B).

Exemple 13.2

<FRAMESET ROWS="20%,60%,20%">

(definir les cadres ici)

</FRAMESET>

donne:

Trois cadres, le premier occupant 20% (A) de la hauteur de l'écran, le suivant 60% (B) et le dernier 20% (C).

Marqueur <FRAME>

Pour chacun des cadres définis avec la commande <FRAMESET>, il faut ajouter le marqueur <FRAME> pour ainsi indiquer au Navigateur les propriétés des cadres.

Notez:

Ces marqueurs doivent êtres insérés entre <FRAMESET> et </FRAMESET>

Commande principale:

<FRAME SRC="page.htm" NAME="nomcadre" MARGINWIDTH=val MARGINHEIGHT=val>

Barre de défilement:

Vous pouvez ajouter le paramètre SCROLLING=YES | NO | AUTO.  Ce paramètre indique au navigateur la disposition des barres de défilement.

Valeurs acceptées:

YES:  les barres horizontales & verticales apparaissent en permanence.

NO: les barres de défilement sont masquées en permanence.

AUTO:  les barres horizontales & verticales apparaissent au besoin.

Cadre non redimentionables:

Par défaut, les visiteurs peuvent redimentionner les cadres de la page avec la souris.  Vous pouvez les empêcher de modifier les cadres en ajoutant le paramètre NORESIZE au marqueur <FRAME>.

Exemple 13.3

<FRAMESET ROWS="20%,60%,20%">

<FRAME SRC="accueil.htm" NAME="sup" NORESIZE>

<FRAME SRC="index.htm" NAME="princ" MARGINWIDTH=20>

<FRAME SRC="pub.htm" NAME="bas">

</FRAMESET>

donne:

Dans ce chapitre:

Cadres mixtes

Liens hypertextes entre les cadres

Fonctions hypertextes avancées

CODExpert 2001 © Tous droits réservés.


Cadres - Présentations avancées
Treizième Leçon

Cadres mixtes

Il est possible de combiner des cadres horizontaux et verticaux afin d'obtenir des résultats plus attrayants.  Dans ce tels cas, il suffit de porter une attention particulère à l'agencement des marqueurs.

Observez attentivement l'exemple ci-dessous et détectez l'ordre logique des marqueurs.  Si vous comprenez le principe, vous pourrez alors faire vos propres combinaisons.

Exemple 13.4

<HTML>

<HEAD>

<TITLE>Ma page web</TITLE>

</HEAD>

<FRAMESET COLS="20%,80%">

<FRAME SRC="fonction.htm" NAME="Navigation" SCROLLING=NO NORESIZE>

<FRAMESET ROWS="20%,60%,20%">

<FRAME SRC="titre.htm" NAME="Sup" SCROLLING=NO MARGINWIDTH=10>

<FRAME SRC="Accueil" NAME="Principal" SCROLLING=YES MARGINWIDTH=10 MARGINHEIGHT=5>

<FRAME SRC="pub.htm" NAME="bas" SCROLLING=NO NORESIZE>

</FRAMESET>

</FRAMESET>

<NOFRAMES>

<BODY>

(contenu sans cadre)

</BODY>

</NOFRAMES>

</HTML>

donne:

Section sans cadres

Bien que la plupart des internautes possèdent des navigateurs récents, vous pouvez tout de même ajouter la section <NOFRAMES>...</NOFRAMES> pour que les anciens navigateurs puissent lire votre page sans utiliser les cadres.  Dans cette section, avertissez les visiteurs que ces lieux nécessitent un navigateur récent, ou encore, insérez une page d'accueil spéciale pour ceux qui ne pourraient lire les cadres adéquatement.

L'exemple 12.4 contient une section <NOFRAMES>.  Observez bien la structure à respecter.

Notez:

À partir de la version 2.02, Netscape est en mesure de détecter les cadres.

Dans ce chapitre:

Structure de base

Liens hypertextes entre les cadres

Fonctions hypertextes avancées

CODExpert 2001 © Tous droits réservés.


Cadres - Liens hypertextes
Treizième Leçon

Liens hypertextes entre les cadres

L'intérêt du concept des cadres réside dans le fait que le contenu de certaines parties de l'écran peut être modifié alors que certaines sections demeurent inchangées.

Afin de préciser au navigateur dans quel cadre la page visée par le lien hypertexte apparaîtra, on ajoute le paramètre TARGET au marqueur de lien hypertexte.

Ligne de commande:

<A HREF="page.htm" TARGET="nomducadre">...</A>

(cliquez ici pour revoir la leçon sur les liens hypertextes)

Notez:

L'expression qui apparaît dans le paramètre TARGET doit correspondre au nom que vous avez donné au cadre lors de la déclaration des cadres avec le marqueur <FRAME>.

Notez:

Si vous omettez le paramètre TARGET, la page sera chargée dans le cadre où se trouve le lien hypertexte.

Dans ce chapitre:

Structure de base

Cadres mixtes

Fonctions hypertextes avancées

CODExpert 2001 © Tous droits réservés.


Cadres - Hypertexte avancé
Treizième Leçon

Fonctions hypertextes avancées

Si vous avez conçu les pages web complexes pour lesquels des cadres viennent s'insérer dans des cadres existants à mesure que le visiteur explore le site, vous trouverez utiles les fonctions suivantes:

TARGET="_top":  Force le navigateur à charger la page visée par le lien hypertexte par-dessus la structure de cadres existants.  Cette fonction est très utile pour sortir des cadres lorsque vous faites un lien avec un autre site, par exemple.

TARGET="_self":  Force le navigateur à charger la page visée par le lien hypertexte dans le cadre où le lien a été cliqué.

TARGET="_parent":  Force le navigateur à charger la page visée par le lien hypertexte dans le cadre parent du cadre où le lien a été cliqué.  (Utile pour revenir en mono fenêtre)

TARGET="_blank" :  Force l'appel d'une nouvelle page.

Utilisez ces fonctions les Hyperliens:

ex: <A HREF="fichier.htm" TARGET="_parent">

Dans ce chapitre:

Structure de base

Cadres mixtes

Liens hypertextes entre les cadres

CODExpert 2001 © Tous droits réservés.


Champs Multimédia
Quatorzième Leçon

Champs Multimédia

Ajoutez de la musique de fond à votre page Web afin de rendre la visite de votre site le plus agréable possible.  La technique présentée ici n'est compablible qu'avec le navigateur Netscape.  CODExpert supporte aussi cette fonction.

Commande principale:

<EMBED SRC="fichier_son/video">

Insérez ce marqueur dans le corps du document, c'est-à-dire entre des balises <BODY>...</BODY>.

Dans le cas d'une séquence vidéo, une région de la page sera aménagée à l'endroit indiqué pour son visionnement.  Dans le cas d'un fichier sonore, une console Audio apparaîtra avec les fonctions de base (volume, pause, stop, play).

Dimension: du champ Multimédia:

<... WIDTH=valeur HEIGHT=valeur>

Notez:

Il est préférable de toujours spécifier les dimensions du champ multimédia pour éviter des affichages imprévisibles.

Démarrage automatique après chargement:

<... AUTOSTART=true | false>

Jouer en boucle infinie:

<... LOOP=true | false>

Masquer la console Audio:

<... HIDDEN=true | false>

Notez:

N'utilisez pas le paramètre HIDDEN avec un fichier vidéo.

Notez:

Si vous utilisez le paramètre HIDDEN=TRUE, ajouter aussi le paramètre AUTOSTART=TRUE car le visiteur ne pourra pas accéder à la console pour activer le son.

Changer la console:

<... CONTROLS=SmallConsole>

donne:

Leçon suivante: Applet Java

CODExpert 2001 © Tous droits réservés.


Applet Java
Quinzième Leçon

Applet Java

Les applets sont de petits programmes indépendants des pages web écrits en langage Java.  Vous devez créer un lien vers l'applet pour qu'il s'intègre à votre page.  Cette leçon a pour objectif de vous montrer comment intégrer un applet à votre page.

Comment créer des applets ?

Il ne faut pas confondre applet Java et Javascript.  Deux choses complètement différentes.  L'applet est un programme compilé.  La conception de ces programmes est beaucoup plus complexe que l'écriture de page web.  Vous pouvez télécharger gratuitement le compilateur JDK de Sun Microsystems à http://www.javasoft.com.

Comment réutiliser les applets existants ?

Il existe sur Internet des sites qui vous proposent des applets prêts à êtres utilisés.  Un applet est contenu dans un fichier portant l'extension class. (ex: mon_applet.class).  Il suffit de copier le fichier de votre applet dans le même répertoire que votre page web et et d'insérer le code suivant sur votre page.

Commande principale:

<APPLET CODE="fichier.class" NAME="nom" WIDTH=val HEIGHT=val"> ... </APPLET>

Options d'alignement:

<APPLET ALIGN="BOTTOM|MIDDLE|TOP|LEFT|RIGHT|ABSBOTTOM|ABSMIDDLE|BASELINE|TEXTOP"> ... </APPLET>

Définition des marges:

<APPLET HSPACE=val VSPACE=val> ... </APPLET>

Chemin d'accès:

On ajoute le paramètre CODEBASE lorsque l'on place les fichiers class dans un autre dossier (ou un autre serveur) pour indiquer au navigateur où aller chercher l'application.

<APPLET CODEBASE="java/classes"> ... </APPLET>

<APPLET CODEBASE="http://www.compagnie.com/mon_site"> ... </APPLET>

Variables d'environnement:

Le marqueur PARAM est utilisé pour passer à l'applet des paramètres d'initialisation à partir du code HTML. Les valeurs de ces variables sont récupérés par la méthode Java getParameter().

<PARAM NAME="nom" VALUE=val>

<PARAM NAME="nom" VALUE="texte">

Notez:

Les marqueurs PARAM sont facultatifs. C'est le programmeur de l'applet qui vous indiquera le nombre de paramètres à utiliser ainsi que leur nom.

Exemple 15.1

<APPLET CODE="ImgWarp.class" WIDTH=210 HEIGHT=200>

<PARAM NAME="image" VALUE="ma_photo.jpg">

<PARAM NAME="mode" VALUE=34>

</APPLET>

Leçon suivante: Javascript

CODExpert 2001 © Tous droits réservés.


Javascript
Seizième Leçon

Javascript

Le javascript est un langage de programmation dérivé du Java et simplifié. Il est facile à apprendre et à utiliser pour les personnes qui ne sont pas expérimentées en programmation.  On utilise le Javascript en complément avec le HTML pour ajouter des fonctionnalités aux pages web.

Le principe du Javascript

Un Javascript peut être directement écrit sur une page web avec le code HTML.  Vous n'avez besoin d'aucun outil particulier pour créer vos scripts.  Lorsque le navigateur charge la page web et qu'il rencontre du code Javascript il compile le code et l'exécute au besoin.

Comment insérer du code Javascript ?

Le marqueur SCRIPT est utilisé pour délimiter le code Javascript dans une page web.  Les scripts sont placés dans la section HEAD de la page.

Exemple 16.1

<SCRIPT LANGUAGE="JavaScript">

code Javascript ici

</SCRIPT>

Il est possible de placer vos fonctions Javascript dans un fichier indépendant de la page web.  Pour indiquer au navigateur où trouver le code Javascript, on utilise le marqueur suivant placé dans la section HEAD.

Exemple 16.2

<SCRIPT LANGUAGE="JavaScript" SRC="source.js"></SCRIPT>

Notez:

Le fichier contenant le code Javascript doit porter l'extension js. Certains navigateurs ne supportent pas cette fonction.

Le langage Javascript

Ce document ne couvre pas l'apprentissage du langage Javascript.  Il existe des livres complets sur le sujet.  Par contre, vous trouverez ci-dessous quelques exemples documentés afin de vous donner un aperçu de la programmation en Javascript.

Message d'accueil

Lien interactif

Menu de navigation

CODExpert 2001 © Tous droits réservés.


Message d'accueil en Javascript
Seizième Leçon

Message d'accueil en Javascript

Ce script affiche un court message dans une boîte de dialogue lorsque le chargement de la page est complété dans le navigateur.

Les événements :

Les événements permettent au programmeur de déclencher l'exécution d'un script lorsque l'usager exécute une action dans la fenêtre d'affichage de la page.  Par exemple, lorsque l'utilisateur clique sur un lien hypertexte, il déclenche un événement.

Dans notre cas, on utilise l'événement onLoad=() qui se produit quand l'utilisateur charge la page dans son navigateur.  On inscrit cet événement dans le marqueur <BODY>.

Exemple 16.3

<HTML>

<HEAD>

<TITLE>Ma page</TITLE>

</HEAD>

<BODY onLoad="alert('Bienvenue sur ma page Web!')">

(contenu de ma page)

</BODY>

</HTML>

Notez:

Dans un événement, il faut utiliser les doubles guillemets " pour délimiter la commande, mais l'apostrophe simple ' pour délimiter les chaînes de caractères à l'intérieur.

Notez:

L'exemple 16.3 montre que l'on peut programmer du Javascript directement dans les événements.

L'exemple 16.4 illustre une manière plus standard d'utiliser le Javascript en regroupant le code sous forme de fonctions dans la section SCRIPT.  La création de fonctions (function) permet de réutiliser ce code à plusieurs endroits de la page.

Exemple 16.4

<HTML>

<HEAD>

<TITLE>Ma page</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

function message( affiche )

{

alert(affiche);

}

//-->

</SCRIPT>

</HEAD>

<BODY onLoad="message('Bienvenue sur ma page Web!')">

Cliquez

<A HREF="page.htm" onClick="message('Vous avez cliqué sur le lien...')">ici</A>!

</BODY>

</HTML>

Dans cet exemple, au chargement de la page, l'événement onLoad=() appelle notre fonction message en passant la chaîne de caractères à afficher en paramètre.  Lorsque l'on clique sur le lien hypertexte, l'événement  onClick=() appelle à nouveau notre fonction message en passant une autre chaîne de caratères en paramètre.

Notez:

Il est conseillé de mettre les Javascripts en commentaires HTML <!--...//-> au cas où le navigateur ne supporterait pas le javascript.  Les scripts seraient alors ignorés.

Notez:

Les liens hypertextes supportent les événements onClick=(), onMouseOver=() et onMouseOut=().

Exemples de Javascripts:

Lien interactif

Menu de navigation

CODExpert 2001 © Tous droits réservés.


Lien interactif en Javascript
Seizième Leçon

Lien interactif en Javascript

Ce script anime vos liens hypertextes en modifiant l'image du lien lorsque la souris de l'usager passe au dessus de la zone définie par ce lien.

Lien ordinaire :

<A HREF="fichier.htm"><IMG SRC="image1.gif" BORDER=1></A>

donne:

Ajout de Javascripts :

Les événements onMouseOver=() et onMouseOut=(). permettent de détecter le mouvement de la souris au-dessus du lien et de changer l'image selon le cas.

Il faut créer deux images pour chacun des liens.  Dans notre exemple, nous avons nommé nos images  image1.gif et image2.gif.

Scripts :

Ensuite, il faut créer deux objets de type image et charger les fichiers  image1.gif et  image2.gif.  Nous avons nommé ces objets  liena et lienb.

if (document.images){

var liena = new Image();

liena.src = "image1.gif";

var lienb = new Image();

lienb.src = "image2.gif";

}

Les objets  liena et  lienb nous permettent ensuite de manipuler les images dans les fonctions Javascript.  Ainsi, la fonction activer() remplace l'image du lien lorsque la souris passe au dessus du lien hypertexte et la fonction inactiver() remet l'image d'origine lorsque la souris quitte le lien.

function activer(imgName){

document[imgName].src = eval(imgName + 'b.src');

}

function inactiver(imgName){

document[imgName].src = eval(imgName + 'a.src');

}

Finalement, il faut modifier le lien hypertexte pour y ajouter les événements  onMouseOver=() et  onMouseOut=() et donner un nom à l'image avec l'ajout du paramètre NAME pour son identification dans le Javascript.

<A HREF="fichier.htm" onMouseOver="activer('lien')" onMouseOut="inactiver('lien')">

<IMG SRC="image1.gif" NAME="lien" BORDER=1></A>

Par défaut le lien se présente ainsi avec image1.gif:

Lorsque le pointeur de la souris est au-dessus du lien, c'est image2.gif qui s'affiche:

L'exemple 16.5 présente le code HTML complet du script.

Exemple 16.5

<HTML>

<HEAD>

<TITLE>Ma page web</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

if (document.images){

  var liena = new Image();

  liena.src = "image1.gif";

  var lienb = new Image();

  lienb.src = "image2.gif";

}

function activer(imgName){

  document[imgName].src = eval(imgName + 'b.src');

}

function inactiver(imgName){

  document[imgName].src = eval(imgName + 'a.src');

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<A HREF="fichier.htm" onMouseOver="activer('lien')" onMouseOut="inactiver('lien')">

<IMG SRC="image1.gif" NAME="lien" BORDER=0></A>

</BODY>

</HTML>

Exemples de Javascripts:

Message d'accueil

Menu de navigation

CODExpert 2001 © Tous droits réservés.


Lien interactif en Javascript
Seizième Leçon

Menu de navigation

Ce script permet de rediriger vos visiteurs en fonction du choix qui est fait dans une liste déroulante.

Présentation de l'interface:

L'usager choisit un site web dans la liste et clique sur le bouton  GO! Pour accéder au site.

Le formulaire :

Ce script implique l'emploi d'un formulaire lié à un Javascript.  On utilise l'événement  onClick=() du bouton du formulaire pour activer le Javascript.

<FORM NAME="sysChoix">

<SELECT NAME="nav">

<OPTION SELECTED VALUE="http://www2.sympatico.ca">Sympatico</OPTION>

<OPTION VALUE="http://www.wanadoo.fr">Wanadoo</OPTION>

<OPTION VALUE="http://www.aol.com">American Online</OPTION>

</SELECT>

<INPUT TYPE=BUTTON NAME="Valider" VALUE="Go!" onClick="acceder()">

</FORM>

Script :

Pour récupérer la valeur de la sélection dans la liste déroulante, il faut comprendre la structure des objets d'une page.  En donnant un nom aux objets de notre page web, on peut ensuite accéder directement à ces objets à l'intérieur d'un Javascript.

Notez dans l'extrait de code ci-dessus que nous avons donné le nom "sysChoix" au formulaire en utilisant le paramètre NAME="sysChoix" dans le marqueur FORM, et le nom "nav" à la liste déroulante.

En Javascript, on accède à la liste découlante ainsi en suivant la hiérarchie des objets:

document.sysChoix.nav.option

Le script récupère le paramètre  value de l'item sélectionné dans la liste déroulante et le passe à la fonction window.location.href() du navigateur.

<SCRIPT LANGUAGE="JavaScript">

<!--

function acceder(){

window.location.href=document.sysChoix.nav.options[document.sysChoix.nav.selectedIndex].value;

}

//-->

</SCRIPT>

Notez:

Référez-vous à un manuel de référence de Javascript pour découvrir les autres options de la liste déroulante ainsi que les autres fonctions associées aux formulaires.

L'exemple 16.6 présente le code HTML complet du script.

Exemple 16.6

<HTML>

<HEAD>

<TITLE>Ma page web</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

function acceder(){

window.location.href=document.sysChoix.nav.options[document.sysChoix.nav.selectedIndex].value;

}

//-->

</SCRIPT>

</HEAD>

<BODY>

Selectionnez le fournisseur de votre choix:<BR>

<FORM NAME="formulaire">

<SELECT NAME="nav">

<OPTION SELECTED VALUE="http://www3.sympatico.ca">Sympatico</OPTION>

<OPTION VALUE="http://www.wanadoo.fr">Wanadoo</OPTION>

<OPTION VALUE="http://www.aol.com">American Online</OPTION>

</SELECT>

<INPUT TYPE=BUTTON NAME="Valider" VALUE="Go!" onClick="acceder()">

</FORM>

</BODY>

</HTML>

Exemples de Javascripts:

Message d'accueil

Lien interactif

CODExpert 2001 © Tous droits réservés.


Ceci est une simulation!

Ce pointeur hypertexte mène au document HTML fichier.htm.


Ceci est une simulation!

Ce pointeur hypertexte mène à la fenêtre de courrier de votre navigateur.


Pour en savoir un peu plus...

En langage HTML, on utilise le code de couleur RGB.  La plupart des logiciels de dessin font de même.  Les couleurs sont définies par trois valeurs qui déterminent la proportion de Rouge, de Vert et de Bleu.

En système décimal, ces valeurs sont comprises entre 0 et 255.

EX:

Rouge: (255,0,0)

Vert: (0,255,0)

Jaune: (255,255,0)

Blanc: (255,255,255)

En langage HTML, on utilise le même système de couleur, mais avec des valeurs en Hexadécimal.  C'est un système de numération de base 16. Symboles acceptés sont des chiffres de 0 à 9 et les lettres A à F.  Une calculatrice de type Scientifique peut faire les conversions à votre place.

Si vous utilisez CODExpert, vous n'avez pas à vous préoccuper de ce détail, puisque le logiciel fait les conversions à votre place automatiquement!


Paramètre NAME: (requis)

Spécifiez le nom du champ.  Ce paramètre n'est pas visible sur la page Web, mais il est utilisé par le script pour traiter l'information.


Paramètre SIZE: (requis)

Ce paramètre détermine la longueur de la boîte de texte qui sera affichée dans le navigateur. Valeurs acceptées: 1 et plus.

La longueur du texte n'est pas limitée à la dimension de la boîte.


Paramètre VALUE: (optionnel)

Ajoutez ce paramètre pour inscrire une expression apparaissant par défaut dans la boîte de texte.


Paramètre MAXLENGTH: (optionnel)

Ajoutez ce paramètre limiter le nombre de caractères pouvant être inscrits dans la boîte de texte.  Valeurs acceptées: 1 et plus.


Paramètre VALUE: (requis)

Précisez la valeur (expression) que prendra le champ lorsque le visiteur sélectionnera cette option.  Cette information n'est pas visible sur la page Web.


Paramètre CHECKED: (requis)

En ajoutant ce paramètre à la commande, la boîte sera cochée par défaut.


Paramètre CHECKED: (requis)

En ajoutant ce paramètre à la commande, le bouton radio sera sélectionné par défaut.


Paramètre SIZE: (optionnel)

Ce paramètre indique le nombre d'éléments qui seront affichés dans la liste en même temps. Les autres seront accessibles au moyen de l'ascenseur. Valeurs acceptées: 1 et plus...


Paramètre ROWS: (requis)

Ce paramètre spécifie la largeur de la zone de texte. Valeurs acceptées: 1 et plus...


Paramètre COLS: (requis)

Ce paramètre spécifie la hauteur de la zone de texte. Valeurs acceptées: 1 et plus...


Paramètre SHAPE: (requis)

Spécifiez la forme de la zone cliquable. Valeurs acceptées:

Zone rectangulaire: RECT

Zone circulaire: CIRCLE

Polygone: POLY

Zone de fond: DEFAULT


Paramètre NAME: (requis)

Ce paramètre spécifie le nom de la zone Map dont les coordonnées sont définies plus bas.  Pour qu'une image Map reflète les zones définies dans la commande <MAP>...</MAP>, il faut que le paramètre USEMAP de l'image corresponde à ce nom.


Paramètre USEMAP: (requis)

Ce paramètre spécifie la commande <MAP> à laquelle l'image doit se rapporter pour définir les zones cliquables.

IMPORTANT:  il faut utiliser le symbole # avant d'écrire l'expression de la référence UseMap.

Ex: ... USEMAP="#navigation">

IMPORTANT:  Si vous utilisez CODExpert, il ne faut pas ajouter le symbole # avant l'expression de référence puisque le logiciel l'écrit automatiquement à votre place.


Paramètre TARGET: (optionnel)

Ajoutez ce paramètre uniquement si vous utilisez le procédé de Multi-fenestration.  Spécifiez le nom du cadre dans le lequel s'affichera la page visée par ce lien.


Paramètre COLS ou ROWS: (requis)

Utilisez COLS diviser l'écran verticalement:

Utilisez ROWS diviser l'écran horizontalement:


Dimension des cadres: (requis)

Définissez à cet endroit les cadres et leur dimension.  Séparez chacune des dimensions par une virgule.

Exemple:  Pour définir deux cadres ayant des dimensions équivalentes (en pourcentage d'espace écran)

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

ou

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

Exemple:  Pour définir trois cadres ayant des dimensions bien précises (en pixels)

<FRAMESET COLS="230,400,100">

ou

<FRAMESET ROWS="230,400,100">


Paramètre SRC: (requis)

Indiquez le chemin d'accès à la page Web qui sera affichée dans ce cadre lors du téléchargement initial.


Paramètre NAME: (requis)

Ce paramètre détermine le nom du cadre.  Ce nom n'est pas apparent pour le visiteur mais il est utilisé pour les liens hypertextes.

Note: L'utilisation de liens hytertextes avec des cadres est présentée plus loin dans cette leçon.


Paramètre MARGINWIDTH: (optionnel)

Ce paramètre détermine les marges latérales (entre les bords et le contenu du cadre).

Valeurs acceptées: 1 et plus.


Paramètre MARGINHEIGHT: (optionnel)

Ce paramètre détermine les marges d'en-tête et de pied de page (entre les bords et le contenu du cadre).

Valeurs acceptées: 1 et plus.


Paramètre HSPACE: (optionnel)

Ce paramètre détermine les marges horizontales qui sont réservées autour l'applet.

Valeurs acceptées: 0 et +.


Paramètre VSPACE: (optionnel)

Ce paramètre détermine les marges verticales qui sont réservées autour l'applet.

Valeurs acceptées: 0 et +.


Fonction  alert( message )

Cette fonction affiche une boîte de dialogue avec un message destiné à l'usager.  Pour fermer cette boîte, il faut cliquer sur le bouton OK.

Exemple

alert("Veuillez prendre note que notre site sera mis à jour jeudi prochain.\nBonne navigation!");

Notez:

La séquence \n force le retour à la ligne.


Evénement  onMouseOver=( )

Cet événement est généré lorsque l'usager passe le pointeur de sa souris au-dessus du lien hypertexte.


Evénement  onMouseOut=( )

Cet événement est généré lorsque le pointeur de la souris de l'usager quitte la zone définie par le lien hypertexte.