TP 3 : Les cadres, les images mapées et les formulaires

M. K RAJECKI, DESS IAS
Programmation Web
TP 3 : Les cadres, les images mapées et
les formulaires
EXERCICE 1 : LES CADRES
Étudier les différentes balises nécessaires pour mettre en place des frames :
– <frameset> et ses attributs rows et cols ;
– les attributs frameborder, border, bordercolor également associés à la balise <frameset> ;
– la balise <frame> et son attribut <frame src> ;
– les attributs <noresize>, et <scrolling> de la balise frame ;
– les balises <noframe> et </noframe>.
Dans un premier temps, reprendre tous les exemples présentés dans le cours.
Puis, réaliser les opérations suivantes :
1. Collectez cinq images sur Internet ( assez grandes : pas des timbres postes...). Stockez
les dans un répertoire seance07 que vous créerez sur votre disque dur.
2. Créez une page haut.html qui affiche ces images en plus petit horizontalement dans
un tableau avec une ligne et cinq colonnes ( hauteur des images 100 ) avec sur chaque
image un lien direct sur la véritable image.
3. Testez votre page.
4. Créez un autre document html frame.html qui va contenir deux cadres horizontaux
(25%,75%) :
– celui du haut sera basé sur la page haut.html précédemment créée ;
– et celui du bas affichera l’image sélectionnée en grandeur réelle ;
La figure 1 vous donne une idée du résultat attendu.
F IG . 1 – clic de la troisième image
Les cadres, les images mapées et les formulaires
1/ 5
M. K RAJECKI, DESS IAS
Programmation Web
EXERCICE 2 : DES CADRES ET DES IMAGES (ENCORE)
Voici un petit exercice très proche du précédent. Ici, on utilise non plus deux cadres mais
quatre.
Réaliser un ensemble de cadres A,B,C,D. Le cadre A est en haut de la page. Le cadre B à
gauche et C est à droite. Enfin, le cadre D est en bas de page.
Cadre A
Cadre B Cadre C
Cadre D
Le cadre A contiendra une image. Il ne sera pas possible de modifier ses dimensions et
aucun ascenseur ne sera disponible.
Le cadre B contiendra une liste de liens. Chaque lien sera ouvert dans le cadre C sauf le
dernier qui sera ouvert dans une nouvelle fenêtre.
Enfin, le cadre D contiendra deux images à l’origine de liens :
– la première image affichera le lien correspondant dans le cadre B ;
– la deuxième ouvrira le lien dans le cadre C.
F IG . 2 – Exercice 2
Les cadres, les images mapées et les formulaires
2/ 5
M. K RAJECKI, DESS IAS
Programmation Web
EXERCICE 3 : LES BALISES ASSOCIÉES AUX IMAGES MAPÉES
Commencez par étudier les balises <map> (ainsi que son attribut name) et </map>. Pour
une image mapée, vous disposez également de l’attribut usemap de la balise <img>, voici
comment on l’utilise :
<img src="***" usemap="#***">
Il nous vous reste plus qu’à comprendre comment fonctionne l’attribut shape. Il peut prendre
quatre valeurs : rect, circle, polygon ou default qui n’est supportée que par netscape
(à vous de le vérifier !).
F IG . 3 – La page tous.html
Voici le travail demandé :
1. Créez avec votre éditeur graphique préféré une image au format gif (nommée tous.gif)
qui contient un rectangle bleu, un cercle rouge et un triangle vert (voir figure 3). N’oubliez
pas de relever les coordonnées de chaque figure.
2. Créez également trois images (rectangle.gif, cercle.gif et triangle.gif) contenant seulement une des trois figures géométriques : une image pour le rectangle, une
seconde contenant un cercle et une dernière contenant un triangle.
3. Commencez par préparer quatre pages html (tous.html, rectangle.html, cercle.html,
triangle.html) contenant les instructions nécessaires pour afficher chacune l’image
correspondante.
4. Ajoutez une map sur l’image tous.gif de telle sorte que lors d’une désignation du rectangle, la page rectangle.html soit affichée dans votre navigateur. Procéder de même
pour le triangle et le cercle.
Les cadres, les images mapées et les formulaires
3/ 5
M. K RAJECKI, DESS IAS
Programmation Web
5. Bien sûr, quand votre navigateur affiche une des pages rectangle.html, cercle.html
ou triangle.html, un clic sur l’image entraine l’affichage de la page tous.html
EXERCICE 4 : UN FORMULAIRE POUR SAISIR UNE ADRESSE
Étudier les différentes balises nécessaires pour mettre en place des formulaires :
– <form> et ses attributs <method="xxx">, <enctype="text/plain"> et <action="xxx">;
– <input type="text"> indique un champ défini sur une ligne ;
– <textarea> autorise la définition d’une zone de texte ;
– Les boutons submit et reset.
Prévoir une page contenant un petit formulaire permettant la saisie d’une adresse complète
plus une zone pour laisser une remarque.
Vous définirez au moins les champs nom,prénom ,adresse1,adresse2,ville,code postal,
et téléphone (voir figure 4).
F IG . 4 – À vous de jouer ! (exercice 4)
Les cadres, les images mapées et les formulaires
4/ 5
M. K RAJECKI, DESS IAS
Programmation Web
EXERCICE 5 : LISTES DÉROULANTES, BOUTONS D’OPTION ET LES
CASES À COCHER
Étudier les différentes balises :
– les listes déroulantes : <select> et <option> ;
– Les boutons d’option : <input type="radio">;
– Les cases à cocher : <input type="checkbox">.
Compléter votre formulaire :
1. Ajouter la saisie de la date de naissance :
– le jour est une liste déroulante contenant les valeurs comprises entre 1 et 31 ;
– le mois est un bouton à option (c’est pas très joli, mais c’est pour l’exercice) ;
– l’année est une zone de texte définie sur 4 caractères.
2. Prévoir quelques questions qui appellent des réponses sous formes de cases à cocher.
Par exemple : quels sont vos centres d’intérêts ?, les réponses étant choisies parmi plusieurs possibilités : musique, sport, cinéma, théâtre, jeux vidéo, littérature...
EXERCICE 6 : PAR ICI LES BONNES INFOS
Je vous conseille de visiter le site de la CNIL (Commission Nationale de l’Informatique et
des Libertés, http ://www.cnil.fr/). En particulier, le document je monte un site (http://www.cnil.fr/
thematic/docs/monte1c.pdf) dans la rubrique dossiers thématiques, internet est très instructif...
Une présentation rapide des images mapées est disponible sur SelfHTML : http://selfhtml.
selfhtml.com.fr/tcgh.htm#a1.
Trouvez sur le web, trois pages qui utilisent les images mapées comme par exemple : http:
//www.meteoconsult.fr/index.php?langue=fr.
Pour terminer, je vous propose de découvrir un site consacré au langage HTML, il s’agit
du site HTMLHELP. La FAQ ( de l’anglais Frequently Asked Questions) est particulièrement
intéressante.
N’hésitez pas à la consulter, en particulier pour les formulaires : http://www.htmlhelp.com/fr/
faq/html/forms.html ou bien http://colorweb.free.fr/captures/aides/faq_wdg.htm
F IG . 5 – FAQ sur HTMLHELP
Les cadres, les images mapées et les formulaires
5/ 5