UJF Licence Sciences INF 112. TP8 : notions avancées de HTML

Transcription

1 UFR IMA Informatique & Mathématiques Appliquées UNIVERSITE JOSEPH FOURIER Sciences, Technologie, Médecine Grenoble 1 : notions avancées de HTML Les fichiers.html, testapplet.html, plan-5-9.jpg à récupérer sur la page : sur le BV ou sur le serveur sur sarado. 1 Applet Java Exercice 1 : découverte d une Applet Java Lancez Internet Explorer. Ouvrez la page le Tic-tac-toe ou morpion est un jeu : il s'agit d'aligner trois croix en ligne ou en diagonale sur la grille. Essayez le jeu... mais pas trop longtemps, le TP vient de commencer. Sauvegardez la page.html sur votre espace disque. A l'aide de WebExpert, visualisez ce fichier. (1.1) Où se trouvent les «instructions» HTML qui correspondent au jeu : (1.2) A votre avis, le programme du jeu est-il dans le fichier.html (code HTML ci-dessus), ou dans un autre fichier? dans le fichier HTML dans un autre fichier Explications : TicTacToe.class est un fichier qui contient un programme exécutable. Ce type de programme s appelle une applet Java. Java est un langage de programmation qui permet de produire des programmes facilement interprétables («exécutables») par les ordinateurs. Dans le fichier HTML, on indique que la page utilise l applet TicTacToe.class. Lorsque le fichier HTML est téléchargé par un butineur, l applet accompagne de manière automatique la page HTML. Exercice 2 : Utiliser et modifier les paramètres d'une Applet Java Avec IE, ouvrez la page Cette page fait appel à une applet Java qui affiche un bouton contenant un titre. Lorsque l'on clique sur le bouton, un texte est affiché dans le cadre associé. Sauvegardez le fichier testapplet.html sur Z : choisissez l option «Page Web HTML uniquement» Quittez Internet Explorer. Ouvrez à nouveau Internet Explorer pour visualiser le fichier testapplet.html que vous venez de sauvegarder o Cliquez sur le menu «Fichier» de IE, puis «Ouvrir» o Cliquez sur le bouton «Parcourir» o Recherchez le fichier sur Z : o Cliquez sur le bouton «Ouvrir» (2.1) Est-ce que le bouton apparaît encore sur la page testapplet.html que vous venez d ouvrir? Oui Non (2.2) Et à votre avis pourquoi?

2 Sauvegardez le fichier au même endroit que le fichier testapplet.html (sur Z:). Il s agit du code de l applet. Avec Internet Explorer, ouvrez la page testapplet.html de votre home. (2.3) Est-ce que le bouton apparaît encore sur la page testapplet.html que vous venez d ouvrir? Oui Non (2.4) Que faut-il en conclure? Nous allons maintenant modifier l'apparence et le comportement de cette applet JAVA. Pour cela, nous allons modifier le fichier testapplet.html. Ouvrez le fichier testapplet.html avec Web Expert. Observez le code associé à l applet Bouton : <applet code="bouton.class" height="100" width="300"> <param name="titre" value="cliquez SUR MOI!"> <param name="taille" value="40"> <param name="message" value="bonjour!!!"> </applet> (2.5) Quel est le paramètre à modifier pour changer le message affiché par le bouton suite à un clic souris? Faites les modifications nécessaires pour afficher «Salut» au lieu de «Bonjour». (2.6) Quel est le paramètre à modifier pour changer le titre du bouton? Faites les modifications nécessaires pour modifier ce titre. On souhaite que la page testapplet.html affiche maintenant simultanément deux boutons : l un avec le titre «Entrée» et le message «Bonjour», l autre avec le titre «Sortie» et le message «A bientôt». (2.7) Décrivez rapidement les modifications que devez faire. Faites les modifications nécessaires sur testapplet.html 2 Bouton dynamique et Java script Nous allons maintenant voir comment il est possible de créer des boutons graphiques dynamiques, pour rendre nos pages HTML plus attractives. Un tel bouton a deux apparences selon que la souris est, ou n est pas, sur le bouton. Le travail à faire consiste à insérer un bouton dynamique dans chacun des deux CVs. Lorsque l on cliquera sur le bouton, cela ouvrira le CV de l'autre membre du binôme (i.e. lien sur le CV à l aide du bouton). Pour faire ce travail, il faut 1. Créer un bouton dynamique 2. Mettre dans les fichiers CV le code adéquat

3 Pour créer un bouton dynamique, il nous faut tout d abord 2 images. La première représentera le bouton «au repos» (pointeur souris hors image), la seconde représentera le bouton «attractif» (pointeur souris sur image). Pour créer ces deux images, vous allez utiliser le logiciel de traitement d'image GIMP (cf Guide chapitre 9). GIMP vous permet de réaliser toutes sortes d'images et vous fournit de nombreux outils. Parmi ceux-ci se trouvent ce qu'on appelle des «scripts_fu», sortes de petits programmes qui créent des images selon les paramètres fournis. Exercice 3 : Création des images nécessaires Dans la fenêtre principale du GIMP, regardez le contenu du menu Exts -> Script-Fu. Sélectionnez l'outil Thème Web -> Alien glow -> Bouton... La fenêtre qui apparaît permet de sélectionner le texte, la police de caractère et les couleurs utilisées pour créer un nouveau bouton. Créez une image pour le bouton «au repos». Le titre du bouton sera «Mon binôme» (ou son prénom). Enregistrez le résultat dans un fichier «brepos.png» au format PNG 1 que vous placerez dans CV/Images. Puis de la même manière, créez un bouton «attractif» en jouant avec les couleurs. Enregistrez le résultat dans un fichier «battract.png» dans CV/Images. Exercice 4 : Insertion du bouton dynamique dans la page Ouvrez votre fichier HTML avec WebExpert. Positionnez le curseur d édition à l'endroit du code HTML où le bouton doit apparaître. Cliquez sur l'onglet «Javascript» puis sur le bouton «Images alternatives sur lien» :. Sélectionnez a. l image à afficher lorsque le pointeur souris est hors image (bouton au repos), b. l'image à afficher lorsque le pointeur souris est sur l'image (bouton attractif), c. le lien vers lequel va nous mener ce bouton (lien sur le fichier du CV de l autre membre du binôme). Validez. Notez que le code suivant (aux noms de fichiers près) a été inséré par WebExpert dans votre fichier : <a href="cv2.htm" onmouseover="if (VersionNav(3.0,4.0)) img1.src='images/battract.png' " onmouseout="img1.src=' Images/Brepos.png' "> <img name="img1" WIDTH=114 HEIGHT=44 border=0 src=" Images/Brepos.png" onload="tempimg=new Image(0,0); tempimg.src=' Images/Battract.png'"></a> Observez le résultat avec Internet Explorer et testez le fonctionnement du bouton. (4.1) Le langage utilisé est-il uniquement du HTML? (4.2) Expliquez brièvement comment marche, à votre avis, cet effet. 1 Pour enregistrer une image, cliquez sur celle ci avec le bouton droit de la souris. Un menu apparaît, sélectionnez fichier enregistrer sous Pour enregistrer en format PNG, sélectionnez dans le menu «Déterminer le type de fichier» l option «PNG». Dans la zone «Répertoire», sélectionnez le disque Z, puis le dossier souhaité. A droite du mot «sélection», en bas de la fenêtre, vérifiez que le chemin d accès indiqué correspond bien au répertoire sélectionné (sinon, recommencez la sélection). Donnez un nom au fichier, cliquez sur «OK», puis dans la fenêtre suivante «Validez»

4 3 Taille d une image Exercice 5 : Taille des images et couleurs Le but de cet exercice est de sauvegarder une image à l aide du logiciel «Paint», sous différents formats, et d observer les variations de tailles de l image. Appuyez sur la touche «Impr écran» de votre clavier ; cette action mémorise l image de votre écran dans le presse papier 2. Lancez Paint (menu Démarrer Programmes Accessoires) Dans le menu édition de Paint, choisissez l action Coller ; (il faut accepter d agrandir la bitmap). Cette action permet de récupérer l image qui était mémorisée dans le presse-papier et de la coller dans Paint. Sauvegardez l image (menu Enregistrer Sous ) sous le format Bitmap 24 bits, sous le nom ecran1, dans Z: Sauvegardez l image une nouvelle fois sous le format Bitmap 256 couleurs, sous le nom ecran2 dans le même répertoire. Il faut accepter de perdre des informations de couleurs. Sauvegardez l image une nouvelle fois sous le format Bitmap 16 couleurs, sous le nom ecran3. Sauvegardez l image une nouvelle fois sous le format Bitmap monochrome, sous le nom ecran4. Quittez Paint. (5.1) A l aide de l Explorateur Windows, recherchez la taille des fichiers ecran et reportez la dans le tableau ci dessous. Nom ecran1.bmp ecran2.bmp ecran3.bmp ecran4.bmp Taille (5.2) Commentez vos observations, concernant les relations entre la taille des images par rapport à leur format et/ou leur «qualité», en prêtant particulièrement attention aux nuances des couleurs. Exercice 6 : Taille des images et mécanismes de compression JPEG Lancez GIMP Ouvrez l image ecran1.bmp Sauvegardez cette image au format jpeg (donnez le nom d image ecran75), en choisissant une qualité de 0.75 Recommencez l opération (donnez le nom d image ecran50) et choisissez une qualité de 0.50 Recommencez l opération (donnez le nom d image ecran25) et choisissez une qualité de 0.25 Recommencez l opération (donnez le nom d image ecran10) et choisissez une qualité de 0.10 A l aide de l Explorateur Windows, recherchez la taille des fichiers ainsi créés, examinez la qualité et les couleurs, et commentez. 2 Presse-papier : zone mémoire recevant les textes (ou autres objets) copiés ou coupés

5 4 Création d images avec GIMP Exercice 7: Création d une image composite (multi-calques) sous GIMP Nous allons réaliser le gribouillis suivant avec GIMP (cf Guide chapitre 9) : Pour cela, Lancez GIMP, ouvrez une nouvelle image (menu Fichier nouveau de la fenêtre principale). Sélectionnez une nouvelle couleur, une forme de pinceau appropriée et l outil pinceau. Réalisez des gribouillis (vous avez le droit de faire quelque chose de plus joli!!). Réalisez les 3 textes CV1 (ou le prénom de l un d entre vous), CV2 (ou le prénom du second membre de votre binôme) et mini-site, en utilisant des couleurs différentes et des tailles de polices différentes (cf Guide) o Chaque texte devra être contenu sur un calque différent. o Pour cela, il vous faut réaliser un texte sur le calque de fond, ce nouveau texte apparaîtra dans la fenêtre de Calques sous forme d un nouveau calque provisoire nommé sélection flottante. o Double-cliquez sur ce calque et donnez-lui un nom pour le rendre permanent (sinon, dès que vous désélectionnerez ce texte, il sera ajouté définitivement au calque de fond). Ne vous inquiétez pas trop, la commande Edition Annuler peut vous aider Sauvegardez cette image au format GIMP (.xcf). Une fois le gribouillis réalisé et sauvegardé dans le format GIMP (.xcf : le seul format qui sauvegarde les images multi calques), il nous faut sauvegarder cette image dans un des formats propre à la diffusion sur le web : le format png. Ré-enregistrez cette image sous le format png (en lui donnant le nom griboullis.png). 5 Image à zones cliquables multiples (MAP) On appelle «MAP» la cartographie d'un masque posé sur une image pour la rendre sensible et «cliquable». Ce masque peut contenir autant de zones sensibles différentes que nécessaire pointant vers autant de liens et/ou actions voulus. Exercice 8 : étude d un exemple de MAP A l aide d Internet Explorer, visualisez la page suivante (annuaire de l Enseignement Supérieur et de la Recherche) : http :// Sélectionnez : «recherche par carte». La page web ainsi obtenue présente une carte de la France avec les régions. Promenez la souris sans cliquer sur les différentes régions et notez (en regardant l URL de destination dans la barre d état en bas à gauche de la fenêtre Internet Explorer) qu à chaque région correspond une URL différente. Allez à présent visiter quelques unes de ces pages. Revenez sur la page de la carte et des régions (http :// Affichez le code source (cf Guide 6.5). A l aide de la commande «Rechercher» du menu «Edition», localisez le code HTML de cette MAP. Une partie de ce code vous est donnée ci-dessous. (8.1) Complétez les «espaces» à compléter figurant dans l encadré ci-dessous : <map NAME="à compléter"> <area SHAPE="POLYGON" COORDS="238, 41, 225, 6, 314, 0, 381, 54, 381, 72, 341, 70, 317, 64, 276, 49" HREF="/annuaire/index.fcgi?req=lcommunes&re=NORD+-+PAS+DE+CALAIS»> <area SHAPE="POLYGON" COORDS="270, 67, 284, 85, 283, 119, 297, 123, 339, 129, 352, 144, 358, 127, 364, 122, 371, 115, 373, 110, 381, 71, 341, 71, 327, 70, 275, 49, 270, 67" HREF="/annuaire/index.fcgi?req=lcommunes&re=PICARDIE"> <area SHAPE="POLYGON" COORDS="245, 156, 222, 106, 179, 85, 204, 48, 271, 67, 286, 86, 283, 119, 265, 148, 245, 156" HREF="/annuaire/index.fcgi?req=lcommunes&re=HAUTE+NORMANDIE"> </map> <img border="0" src="/annuaire/cartes/carte_france.gif" usemap="à compléter" WIDTH="608" HEIGHT="632">

6 (8.2) Expliquez ce codage HTML : Exercice 9 : réalisation d ume image MAP (voir aussi Guide 9.9) Dans une nouvelle page html, on se propose de réaliser une image sensible du plan du campus. Les 2 zones cliquables seront le DSU et la Bibliothèque des sciences. On accédera au site de la bibliothèque en cliquant sur le polygone représentant celle-ci, et à DSU-net en cliquant sur le DSU. (9.1) Préliminaires : Récupérez l'image du plan du campus à l adresse : Enregistrez-la dans Z : (bouton droit de la souris : «enregistrer la cible sous.») (9.2) Création du code HTM des zones sensibles à l aide de GIMP : Ouvrez l image avec GIMP Positionnez la souris sur l'image puis cliquez sur le bouton droit, sélectionnez dans le menu déroulant «Filtre Web images cliquable Web». L'image est alors copiée dans une nouvelle fenêtre : Repérez le DLST et la Bibliothèque des Sciences sur ce plan Dans la palette le long de l image à gauche, sélectionnez la forme la plus adaptée pour délimiter la zone d intérêt : le rectangle pour le DLST (on englobera l ensemble des ailes du bâtiment), le polygone pour la bibliothèque, afin de suivre cette fois précisément son contour. Utilisez la loupe pour travailler avec plus de précision. Ensuite, complétez le champ URL dans la fenêtre «paramètres de la zone #XX» où XX représente le numéro de la zone sur laquelle vous travaillez. L URL du DSU est Recommencez pour la Bibliothèque des Sciences ( Enregistrez l'image "map" que vous venez ainsi de réaliser sous le nom : plan-5-9m.htm, dans Z : Remarquez que vous venez de créer avec GIMP, non pas une image, mais du code HTML permettant de rendre une image sensible. (9.3) Observation du code HTML obtenu : Avec Web Expert, ouvrez ce fichier afin d'examiner le code ainsi produit. Vous devez obtenir un code similaire à celui ci-après. <IMG SRC="Z:\SVSTU2\plan-5-9m.jpg" WIDTH=727 HEIGHT=511 BORDER=0 USEMAP="#map"> <MAP NAME="map"> <!-- #$-:Image Map file created by GIMP Imagemap Plugin -->

7 <!-- #$-:GIMP Imagemap Plugin by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:1.3 --> <!-- #$AUTHOR:letregua --> <AREA SHAPE="RECT" COORDS="222,307,342,376" HREF=" <AREA SHAPE="POLY" COORDS="543,223,544,244,562,245,583,232,579,268,592,286,516,302,514, 296,523,277,512,275,507,266,519,254,492,239,497,222,539,221" HREF=" </MAP> A quoi servent les lignes suivantes? <!-- #$-:Image Map file created by GIMP Imagemap Plugin --> <!-- #$-:GIMP Imagemap Plugin by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:1.3 --> <!-- #$AUTHOR:letregua --> A quoi sert la la ligne suivante? <IMG SRC="Z:\SVSTU2\plan-5-9m.jpg" WIDTH=727 HEIGHT=511 BORDER=0 USEMAP="#map"> A quoi sert la balise suivante et son attribut? <MAP NAME="map"> </MAP> A quoi sert la ligne suivante, et comment peut-on l analyser? <AREA SHAPE="RECT" COORDS="222,307,342,376" HREF=" A quoi sert la ligne suivante, et comment peut-on l analyser? <AREA SHAPE="POLY" COORDS="543,223,544,244,562,245,583,232,579,268,592,286,516,302,514, 296,523,277,512,275,507,266,519,254,492,239,497,222,539,221" HREF=" Le mot «map» des expressions USEMAP="#map"> et <MAP NAME="map"> est-il : Un mot-clé du langage HTML? Un nom que le concepteur de la page peut choisir lui-même? A quoi sert-il? (9.4) Réalisation de la page Web contenant la MAP : Avec WebExpert, créez une nouvelle page web dans le même dossier que votre image. Copier le code HTML de l image MAP dans cette page. Visualisez la page avec le butineur, et vérifiez le fonctionnement de la MAP

8 6 Votre propre image à zones sensibles dans le mini-site «CV» Exercice 10 : Réalisation d une MAP Reprenez vos deux CVs Copiez l image gribouillis.png dans le dossier images Avec GIMP, créez une MAP avec les liens vers vos 2 CVs respectifs. Avec WebExpert, créez une page index.html dans laquelle vous insérerez l image à zones sensibles que vous venez de réaliser. Vérifiez le fonctionnement de votre page index contenant l image MAP. 7 CC2 Le thème de votre site doit être choisi. Vous avez du aussi collecter les informations nécessaires. Au, vous devez réfléchir à la structuration du site. Le cœur du site doit contenir une page d index et 3 pages de contenu «scientifique». Quelles informations allez-vous mettre dans chacun de ces pages? Réfléchir aux choix ergonomiques (présentation) du site. Consulter le site 8 Pour aller plus loin Faites les parties optionnelles du site CV («pour aller plus loin» des séances précédentes) si elles n ont pas déjà été faites. Dans un TP ultérieur, il vous sera demandé d ajouter une page quizz.html à votre site. Créez provisoirement une nouvelle page quizz.html contenant le texte «Fantôme». Reprenez l image MAP de votre page d accueil pour lui ajouter une zone cliquable avec le texte «quizz» permettant d accéder à cette page. Ajoutez une page supplémentaire à votre site CV décrivant votre loisir favori. Cette page devra comporter du texte, des images, et des liens vers des sites de référence. On accèdera à cette page à la fois par le texte correspondant de votre page CV, et par une zone cliquable (à faire) de la MAP de votre page d accueil. Boutons cliquables A l aide de «TestApplet», insérez des boutons cliquables dans vos CV faisant apparaître des petits messages ou des blagues. Création et retouches de dessin à l aide de GIMP Testez les possibilités graphiques de GIMP en concevant une image à l aide de ce logiciel. Sur une image graphique, un schéma, ou une image d animal récupérée sur le Web, ajoutez flèches et textes décrivant les différentes parties. Sur un portrait récupéré sur le Web, dessinez des lunettes, changez la couleur des cheveux