La création de pages WEB

Pour aller directement à une étape de votre travail, utilisez un des liens suivants :

• Quelques considérations introductives
  • L'utilisation des frames
    • Qu'est-ce qu'un frame ?
    • Comment est structurée une page contenant des frames ?
    • Comment faire des frames avec Claris Home Page ?
    • Quelques points à ne pas perdre de vue lors de l'utilisation des frames…
  • Utilisation d'un formulaire
    • La création d'un formulaire
    • Emploi spécifique de quelques éléments
    • Récupération des données émises par l'utilisateur

Quelques considérations introductives

Nous avons vu jusqu'ici quelques principes qui nous permettent de mettre en page nos informations.

• Jouer sur la taille, la couleur et l'alignement du texte;
• modifier la couleur de l'arrière-plan;
• insérer une image en arrière-plan;
• insérer une images dans la page;
• insérer un tableau et jouer sur ses paramètres (taille du tableau, des cellules; couleur du tableau, des cellules, des lignes; dimension des séparations et de l'espace entre le texte et la bordure; etc…).

A cela s'ajoute la possibilité de créer des liens entre deux fichiers à partir d'un mot, d'un texte ou d'une image. Sans oublier la création des ancres qui permettent de se déplacer sur un point précis d'une page.

Sans vouloir faire de vous des professionnels de la création de pages Web, il reste encore deux techniques à aborder. L'utilisation des "frames" (aussi appelés cadres) ainsi que la création d'un formulaire.

L'utilisation des frames

Concernant cette technique, je me bornerai à vous en faire une présentation théorique, car il me semble utile d'en comprendre le principe (simple) que vous pourrez appliquer par la suite de votre propre chef.

Qu'est-ce qu'un frame ?

Il est possible de partager votre écran en plusieurs parties qui peuvent interagir les unes avec les autres. Le cas le plus classique est l'utilisation d'un index qui contrôle un frame principale qui affichera différentes pages Web, le tout accompagné par un frame qui affiche le titre du site (voir l'exemple de la Figure 40).



Figure 40 : Page incluant 3 frames

Comment est structurée une page contenant des frames ?

En fait dans sa construction, une page du type de celle présentée dans la Figure 40 nécessite au minimum 4 pages HTML.

1. Une 1^ère page qui contient la description de l'ensemble et qui indique quels sont les fichiers qui seront affichés dans chaque frame lors du premier chargement de l'ensemble (voir la Figure 41). Appelons-la pour l'exercice "mon_frame.html".



Figure 41 : Page qui contient l'ensemble

La description est plus ou moins la suivante :

• Je suis une page constituée par trois zones (frames) d'affichage;
• la première zone se nommera "monindex" (nom arbitraire) et affichera le fichier "index_frame.html" (voir la Figure 42);



Figure 42 : zone "monindex"

• la deuxième zone se nommera "montitre" et affichera le fichier "titre_frame.html" (voir la Figure 43);



Figure 43 : zone "montitre"

• la troisième zone se nommera "monmain" et affichera le fichier "page_perso.html" (voir la Figure 44).



Figure 44 : zone "monmain"

2. Une 2^ème page qui contient l'index. Appelons-la pour l'exercice "index_frame.html". Les liens internes que contient cet index seront affichés dans la zone "monmain". Par correction, les liens externes seront soit renvoyés à un étage supérieur, à la place de la page "mon_frame.html" ou bien alors affichés dans une nouvelle fenêtre.
3. Une 3^ème page qui contient le titre. Appelons-la pour l'exercice "titre_frame.html".
4. Une 4^ème page qui affiche le contenu de la première page qui sera affichée à l'ouverture de notre ensemble. Appelons-la pour l'exercice "page_perso.html".

J'ai mentionné que cet ensemble contenait au minimum 4 pages car il y aura en fait autant de pages que de liens internes dans mon index.

Comment faire des frames avec Claris Home Page ?

Le plus simple pour faire des frames dans Claris Home Page est d'utiliser l'Assistant Cadres. Ce dernier est joignable au n° suivant : 705 93 87 entre 23h00 et 00h30. ;-)

Non! On peut le lancer depuis l'option "Nouvelle…" du menu Fichier. Choisir ensuite l'option "utiliser un assistant", puis sélectionner l'Assistant Cadres. Il vous prend en main et si vraiment vous êtes perdus envoyez-moi un e-mail!

Mais attention!!! Claris Home Page nomme automatiquement la page qui contient la description du système "index.html" en écrasant tout fichier ayant le même nom. Donc travaillez dans un nouveau répertoire, quitte à changer le nom des fichiers par la suite et à les déplacer.

Quelques points à ne pas perdre de vue lors de l'utilisation des frames…

• Pensez à ceux qui ont encore des petits écrans et ne multipliez pas trop les frames!
• Libérez les fichiers qui ne vous appartiennent pas! Ne les gardez pas dans votre système de frames. L'utilisateur aime savoir où il est. De plus si le fichier externe que vous affichez contient aussi des frames, vous retombez dans la cas du point cité ci-dessus.
• Proposez une version de votre site sans frame. Il existe en effet encore certaines personnes qui utilisent des browsers qui ne les supportent pas (des fois c'est même les personnes qui ne supportent pas les frames).
• Est-ce bien utile de faire un système de frames dans votre cas particulier? Je vous avoue que dans le cas de mon ancienne page personnelle (http://tecfa.unige.ch/~strasser/), c'était plus pour montrer que je savais les faire; c'était promotionnelle :-) Par contre dans le cas de notre travail pour ce cours, on voit aussi que mes pages sont efficaces sans avoir de frames. Et c'est quand même cela qui est important :

clarté de l'information

rapidité d'accès

efficacité!



Utilisation d'un formulaire

Le deuxième point que nous traiterons est le formulaire. Sa création est assez simple; son utilisation est un peu plus problématique, mais elle reste abordable dans le cadre de ce cours.

La création d'un formulaire

Créer un formulaire avec Claris Home Page est assez simple puisque ce logiciel le gère de la même manière qu'il gère le texte et les images.

Pour ce programme, un formulaire est une zone spécifique dans une page HTML. Cette zone peut contenir les champs suivants (voir les Figures 45 et 46) :



Figure 45 : Eléments d'un formulaire dans Claris Home Page

 



Figure 46 : Eléments d'un formulaire dans Netscape Communicator

• Les cases à cocher permettent à l'utilisateurs de sélectionner plusieurs choix en même temps.
• Les entrées cachées permettent au concepteur d'utiliser des variables cachées. Ne mettez pas n'importe quoi car il est très facile de lire les valeurs qui ne sont pas cachée dans l'affichage de la source de la page HTML.
• Le Mot de Passe est une zone de texte dont les caractères sont remplacés à l'affichage par un unique caractère de masquage.
• Un menu déroulant permet de proposer une longue liste de choix.
• Les boutons radio (aussi appelés "cases à option") permettent à l'utilisateur de choisir une possibilité parmi plusieurs. Soit "A", soit "B", mais pas "A" et "B".
• Le bouton RAZ permet à l'utilisateur de réinitialiser le formulaire. Tous les champs sont remis à zéro.
• Le bouton "envoi" envoie le questionnaire selon une méthode spécifiée dans l'élément "zone de formulaire".
• La fenêtre de texte permet la saisie de texte, sans limite (ou presque).
• Le champ de texte est utilisé pour saisir du texte plus court et sans retour chariot. Son emploi type est la saisie de nom, prénom, e-mail, etc…




Emploi spécifique de quelques éléments

• Les cases à cocher sont indépendantes les unes des autres. On ne peut que difficilement restreindre le nombre des éléments qui seront sélectionnables.
• Les boutons RAZ et Envoi peuvent figurer en plusieurs exemplaires sur une page (par exemple un en français, un autre dans une autre langue).
• Les différentes propositions d'un menu déroulant sont définies en tant qu'option. On peut autoriser la sélection multiple ou limiter à la sélection unique. Si la limite est 1, le menu est déroulant, tel qu'il apparaît dans la Figure 46.
• Les boutons radio fonctionnent par groupe. On regroupe des boutons radio en leur attribuant le même nom dans les options de cet objet (un double-clic sur le bord de l'objet). On les distinguera alors par leur valeur. De plus, cliquer sur un bouton d'un groupe, désélectionnera tous les autres bouton du groupe.




Récupération des données émises par l'utilisateur

Il y a deux manières de récupérer les informations laissées par l'utilisateur.

1. Dans le cas le plus simple, celui que nous utiliserons, les données sont stockées dans un fichier virtuel qui vous est envoyé en document attaché à l'aide du module de e-mail du navigateur utilisé par votre visiteur.

Cette méthode à un grand défaut : vous devez récupérer le fichier attaché que vous recevez par courrier et ensuite vous devez l'ouvrir avec un éditeur de texte avancé (MS Word / demandez lui de vous afficher tous les types de fichier). De plus, le texte qui vous est renvoyé est quelque peu abscons :

Demande+d%27Info=Demande+d%27Info&Sujet+de+l%27info=Section+Secondaire+Inf*rieure&
Sujet+de+l%27info=Section+Secondaire+Sup*rieure&Adresse+e-mail=webmaster%40florimont.ch&Envoi=Envoi
(sur une ligne)

Si vous êtes un tant soit peu à l'aise avec Word, vous pouvez transformer ce texte en quelque chose de plus compréhensible en procédant à des remplacements de caractères. Vous obtenez alors :

Demande d'Info = Demande d'Info

Sujet de l'info = Section Secondaire Inférieure

Sujet de l'info = Section Secondaire Supérieure

Adresse e-mail = webmaster@florimont.ch

Envoi = Envoi

2. Pour la deuxième possibilité, il faut déjà avoir des dispositions favorables à la programmation et, en plus, il faut bénéficier d'un droit d'utilisation des cgi-bin sur le serveurs qui vous héberge.

En fait, il s'agit non plus d'envoyer le résultat par e-mail, mais directement à un serveur qui va analyser le résultat du formulaire et le traiter selon votre souhait. La présentation des réponses de votre visiteur dépendra alors de vos prouesses en programmation. Vous pourrez soit générer une page Web, soit vous envoyer un e-mail, soit encore envoyer directement par e-mail la documentation demandée à l'utilisateur.

Comme nous allons rester simple, nous choisirons d'aborder la première manière. J'imagine des sourcils qui se lèvent !?! Non, Monsieur, ne vous grattez pas la tête! Ce n'est qu'un exercice…

Retour à la page du cours