UFR IMA Informatique & Mathématiques Appliquées UNIVERSITE JOSEPH FOURIER Sciences, Technologie, Médecine Grenoble 1 : découverte de HTML Les fichiers cookie.html, exemple.html, exemple2.html, MerDeGlace.jpg, tableaux.html, petite.jpg et grande.jpg à récupérer sur la page : http://www-lsr.imag.fr/inf112/tp07 ou sur le serveur sur le BV. 1 Observer les structures du HTML : bases, liens, tableaux Une page web est écrite dans un langage qui s appelle HTML. Le fichier correspondant à une page web est lu par votre butineur, qui se charge de l afficher de façon «lisible». Dans un premier temps, vous allez observer le code HTML d une page web existante à l aide d un éditeur de page web qui s appelle WebExpert (plus de détails sur ce logiciel vous sont donnés dans le Guide de l environnement et des logiciels chapitre 8). Puis, vous créerez votre première page web. Exercice 1 : Observation d une page Web existante simple Ouvrez la page www-lsr.imag.fr/inf112/tp07/exemple.html avec Internet Explorer Enregistrez cette page sur le disque Z (home sur Sarado), dans le répertoire Internet/Essais 1 : (voir aussi 6.2 du Guide) Nommez le fichier exemple.html Choisissez l option "Page Web HTML uniquement" Cliquez sur le bouton "Enregistrer" Ouvrez le fichier exemple.html avec WebExpert (WE) (voir 8.3.2 du Guide) Dans la fenêtre Source, WE affiche le contenu du fichier exemple.html. Ce que vous voyez est le code HTML de la page Web exemple.html Visualisez la page exemple.html avec le butineur interne de WE (cf guide 8.4). Quittez le butineur interne Dans la fenêtre source de WE, observez le code HTML de exemple.html Repérez la structure du document Repérez en particulier les mots entre les caractères "<" et ">". On les appelle des balises. 1.1 A quoi servent les balises? : Devinez à quoi servent les (couples de) balises suivant(e)s? (Vous pouvez modifier le contenu du fichier exemple.html si vous le souhaitez et utiliser le butineur de WE pour vous aider) <title></title> < body></body> <h1> </h1> et <h2> </h2> <p> </p> <ul> </ul> <li> </li> 1 Internet/Essais est l un des sous répertoires que vos deviez créer dans Home sur Sarado (Z :) lors du TP1. S il n est pas présent sur le login que vous utilisez, créez-le maintenant. 2007-2008 1
<b> </b> et <i> </i> 1.2 Couples de balises : La plupart des balises sont en couple (par exemple <body> et </body>). Pouvez-vous donner une explication à cela? Exercice 2 : Image et lien dans une page Web Dans cet exercice, nous nous proposons d observer comment le langage HTML permet d insérer une image, puis un lien, dans une page Web existante. Avec Internet Explorer, ouvrez la page www-lsr.imag.fr/inf112/tp07/exemple2.html Enregistrez cette page sur le disque Z (home sur Sarado), dans le répertoire Internet/Essais sous le nom exemple2.html, avec l option "Page Web HTML uniquement" Ouvrez le fichier exemple2.html avec WE Visualisez cette page avec le butineur interne de WE 2.1 Est-ce que l image apparaît? oui, non 2.2 A votre avis, le contenu l image est-il «décrit» dans le code HTML ou est-ce juste une référence? 2.3 Observez plus particulièrement les balises définissant l image. Expliquez le principe de cette balise. 2.4 Observez plus particulièrement les balises définissant un lien vers l université J. Fourier. Expliquez le principe de cette balise. Exercice 3 : Réalisation d un tableau simple L1, semestre 1 L1, semestre 2 L2, semestre 3 L2, semestre 4 BIO110 BIO121 BIO232 BIO241 INF111 INF120 INF231 BIO242 MAT110 MAT121 INF232 INF241 CHI110 CHI120 MAT234 MAT244 Réalisez le plus fidèlement possible cette table avec les outils de WebExpert (voir Guide 8.5.6). Vous noterez bien que le trait de séparation des cellules est le plus fin possible, que le texte de la première ligne est aligné à gauche et celui des autres lignes est aligné à droite. La taille totale de la table n'est pas importante. Observez le code HTML qui a été généré. Expliquez brièvement la signification des balises suivantes : <TABLE> <TR> <TD> Exercice 4 : Observation de tables complexes Nous allons maintenant observer des tables un peu plus complexes. Pour cela, téléchargez à l aide d Internet Explorer les 2 fichiers (MerDeGlace.jpg, tableaux.html) contenus dans : http://www-lsr.imag.frinf112/tp07/ Visualisez le fichier tableaux.html à l aide d Internet Explorer, puis examinez le code HTML avec WE. 2007-2008 2
4.1 Premier tableau : Que remarquez-vous concernant la structure de cette table? Quel est le codage HTML qui a permis ceci? 4.2... Deuxième tableau : Que remarquez-vous concernant la structure de cette table? Précisez le rôle joué ici par les attributs COLSPAN et ROWSPAN : Dans : <table BORDER=1 CELLSPACING=3 CELLPADDING=10 > quelle est la fonction de l attribut CELLSPACING? Pour répondre, comparez avec le premier tableau, et n hésitez pas à faire des tests sur le code HTML. Toujours dans : <table BORDER=1 CELLSPACING=3 CELLPADDING=10 > quelle est la fonction de l attribut CELLPADDING? Pour répondre, comparez avec le premier tableau. Toujours dans : <table BORDER=1 CELLSPACING=3 CELLPADDING=10 > quelle est la fonction de l attribut BORDER? Pour répondre, comparez avec le troisième tableau. 3... Troisième tableau : Que remarquez-vous concernant l apparence de cette table? Quel est le codage HTML qui a permis ceci? Dans : <table border=0 width=100%> quelle est la fonction de l attribut WIDTH? Pour répondre, comparez avec les 2 premiers tableaux. Dans : <table border=0 width=100%> supprimez le % de «width=100%» et visualisez la page. Quel est l effet? 2007-2008 3
Exercice 5 : Création d une table complexe Transformez le tableau produit à l exercice 9 pour obtenir le tableau suivant. Un Parcours de Biologie L1, semestre 2 L2, semestre 3 L2, semestre 4 Licences possibles BIO110 BIO121 BIO232 BIO241 INF111 INF120 INF231 BIO242 Biologie MAT110 MAT121 INF232 INF241 CHI110 CHI120 MAT234 MAT244 Vous devez modifier directement le code HTML (n utilisez PAS les fonctions de WebExpert). 2 Notion de cookie Exercice 6 : Cookie Les cookies sont des mécanismes utilisés par certains sites Web pour mémoriser de l information sur vos actions. L exercice 1 vise à faire découvrir ce mécanisme et de comprendre sa mise en œuvre à l aide de petites expériences. L exercice consiste à formuler des hypothèses pour expliquer ce qu est un cookie. L important est d exprimer votre idée (on n attend pas de vous que vous trouviez la bonne réponse du premier coup). Les questions de cet exercice ont été prévues pour vous aider à confirmer ou infirmer vos hypothèses. 2.1 Première manipulation Lancer Internet Explorer Ouvrez la page http://www-lsr.imag.fr/inf112/tp07/cookie.html Cliquez sur le lien "Enregistrez-vous" et remplissez le champ en indiquant votre nom complet : Prénom et Nom de famille. Cliquez maintenant sur le lien "Affichage de l information" (6.1) Qu observez-vous? Quittez IE, puis relancez-le Rechargez la page http://www-lsr.imag.fr/inf112/tp07/cookie.html Re-cliquez sur le lien "Affichage de l information" (6.2) Le site vous indique-t-il le nom que vous lui avez indiqué précédemment? oui, non 2.1 Première hypothèse (6.3) A votre avis, où est conservée l information que vous avez entrée sur ce site lors de votre première connexion? Sur le site Web? oui, non Quelque part sur le PC? oui, non Ailleurs? (Où?) 2.2 Manipulation complémentaire Quittez Internet Explorer (IE) et ouvrez l Explorateur Windows Suivez le chemin c:\winnt\profiles\votrelogin\cookies\ ("c" désigne le disque dur et votrelogin est à remplacer par le login utilisé lorsque vous vous êtes connecté sur ce PC aujourd hui) 2. Repérez le fichier se terminant par @TP07[1] Renommez ce fichier en temporaire.txt Relancez IE et rechargez la page http://www-lsr.imag.fr/inf112/tp07/cookie.html Re-cliquez sur le lien "Affichage de l information" (6.4) Le site vous indique-t-il le nom que vous lui avez indiqué précédemment? oui, non 2 Il est possible que le répertoire c:\winnt\profiles\votrelogin\ soit inaccessible, en particulier si vous avez choisi d utiliser une copie de votre environnement au moment de la connexion (si le réseau était surchargé). Dans ce cas, choisissez le répertoire c:\winnt\profiles\votrelogin.000\ 2007-2008 4
2.3 Deuxième explication Cliquez sur le lien " Enregistrez-vous" et remplissez à nouveau le champ en indiquant votre nom. Cliquez maintenant sur le lien "Affichage de l information" (6.5) Que constatez-vous? Visualisez le contenu du dossier c:\winnt\profiles\votrelogin\cookies\ avec l Explorateur Windows (6.6) Que pouvez-vous dire par rapport au fichier que vous avez précédemment renommé? (6.7) A votre avis, où est conservée l information que vous avez entrée sur ce site lors de votre première connexion? Sur le site Web? oui, non Quelque part sur le PC? oui, non Ailleurs? (Où?) Comparez le contenu des deux fichiers (le nouveau fichier et le fichier renommé précédemment en temporaire.txt) par un double clic gauche sur leurs noms respectifs. (6.8) Sont-ils similaires? oui, non (6.9) Quelles sont les informations remarquables que l on peut trouver dans ces fichiers? 2.4 Explication finale Un cookie est un fichier contenant de l information, déposée puis utilisée par certains sites Web. Les fichiers-cookies sont conservés sur le PC, dans un répertoire particulier. Nous reviendrons sur cette notion en TD. Vous pouvez observer le code HTML de la page http://www-lsr.imag.fr/inf112/tp07/cookie.html pour repérer comment le cookie est crée. (Pour voir le code, sur IE, menu Affichage source). 3 Créer sa première page web : un CV Exercice 7 : Réalisation d une première page Web représentant votre CV 7.1 Création de la page avec son texte mis en forme : Créez une nouvelle page avec WebExpert Repérez le corps du document HTML (balises <BODY> </BODY>) Inscrivez votre nom et votre prénom entre les balises <BODY> </BODY> Enregistrer ce fichier dans le répertoire Internet/CV sur Z :, sous le nom cv1.html Visualisez la page En dessous de votre nom et de votre prénom, tapez votre lieu et date de naissance. Puis tapez votre adresse. N insérez aucune balise pour le moment. Sauvegardez votre fichier Visualisez la page Dans la page affichée par le butineur, votre texte apparaît-il avec des sauts de lignes? oui, non Pour introduire un ou des sauts de ligne, il faut utiliser la balise <br>. Il existe trois solutions pour le faire : 2007-2008 5
(a) Tapez le code de la balise vous-même (après votre nom et votre prénom, tapez les caractères <br>) (b) Utilisez le bouton "Nouvelle Ligne " dans l onglet "Commun" (c) Utilisez le raccourci clavier proposé par WE (Ctrl+B) Sauvegarder votre fichier Visualisez la page. Vous devez obtenir un résultat similaire à celui donné ci-dessous. Avec Web Expert, il y a deux manières d introduire des balises qui fonctionnent en couple dans WE (cf. Guide 8.5.1). (a) Tapez le texte puis insérez les balises en sélectionnant le texte à modifier, (b) Insérez les balises puis tapez le texte entre les balises introduites. Utilisez la première méthode pour mettre vos nom et Prénom en Titre taille 1, votre adresse en Italique Utilisez la seconde méthode pour ajouter un texte du type : Mon binôme : Nom Prénom 7.2 Listes à puce, ligne horizontale Insérez les sous-titres (taille2) Etudes et Divers, la description de vos 2 ou 3 dernières années d étude, des informations diverses (vos activités favorites, permis, langues ), les balises permettant de faire apparaître les listes à puce., et les lignes horizontales 7.3 Liens (cf Guide 8.5.3) Faites apparaître un lien sur le texte Université J. Fourier permettant d ouvrir la page www.ujf-grenoble.fr Faites apparaître un lien sur les deux premiers chiffres du code postal permettant d accéder au conseil général du département. 7.4 Image Avec Explorateur Windows, créez un répertoire nommé Images dans le répertoire où vous travaillez Avec Internet Explorer, allez dans la rubrique trombinoscope du site de DSU-net (http://dsu-net.ujfgrenoble.fr/trombinoscope/). 3 Suivez les instructions pour vous connecter et retrouvez votre photo et celle de votre binôme. Remarquez qu il y a 2 photos par personne : une petite photo basse définition dans la page commune de votre groupe, un agrandissement détaillé auquel on accède en cliquant sur la petite photo. Enregistrez vos 2 photos (petite et grande) et celles de votre binôme par clic droit de la souris dans le répertoire Images, soit 4 photos en tout. (cf Guide 6.4) Avec WebExpert, insérez votre photo (la petite) dans la page web de votre CV. La faire apparaître en haut à droite de votre CV, à côté de votre nom (cf Guide 8.5.4). 7.5 Lien sur image On voudrait pouvoir accéder à la grande photo en cliquant sur la petite photo du CV, de manière similaire au trombinoscope du DSU (mais sans texte sous la grande photo). Pour cela, insérez un lien sur image (cf Guide 8.5.5). 7.6 Table 3 Si celui-ci est toujours "en reconstruction", utilisez les photos petite.jpg et grande.jpg du serveur http://wwwlsr.imag.frinf112/tp07/, ou encore toute autre paire de photo de votre choix. 2007-2008 6
Dans la rubrique «Etudes» de votre page, ajoutez la table suivante à la suite du texte, en adaptant l intitulé des modules et de la licence à votre cas particulier. 7.7 2 ème CV du binôme et lien entre les 2 CV Nous allons à présent faire le CV de la 2 ème personne du binôme sur le même modèle. La démarche que nous vous proposons ci-dessous consiste à dupliquer le 1 er CV, puis à faire les modifications de texte adéquates sur cette copie, et enfin de mettre les liens permettant aux deux pages de communiquer. Copie du CV (voir Guide 8.3.6) : Enregistrez votre CV Copiez le sous un autre nom, puis ouvrez les 2 CVs simultanément dans WE Modifications : Faites les modifications de base sur le texte du 2 ème CV (au moins les nom et prénom de la 2ème personne du binôme, les autres modifications pourront se faire plus tard en travail personnel ; si vous êtes seul, inventez un personnage fictif). Liens : Insérez un lien interne sur ce CV au niveau du nom du binôme pour ouvrir le CV du binôme Faites la même chose sur l autre CV Test des 2 pages : Vérifiez le bon fonctionnement des liens sous Internet Explorer. 4 Moteurs de recherche Vous devez maintenant avoir une certaine idée des possibilités d un "butineur" comme Internet Explorer. Mais pour l instant, vous n avez eu accès qu à des informations que nous vous avons indiquées. Maintenant se pose le problème : «Comment trouver une information sur Internet?». Il existe pour cela des sites qui fournissent des «moteurs de recherche». Voici quelques adresses de moteurs : Moteur généraux : http://www.fr.altavista.com http://www.excite.fr http://www.google.fr http://www.voila.fr http://www.lycos.fr http://www.yahoo.fr Moteur spécialisé sur les documents scientifiques : http://www.scirus.com Exercice 8 : Découverte des moteurs de Recherche (Allez sur le site lycos (www.lycos.fr). Tous les moteurs de recherche présentent une petite boîte de saisie de texte où l on peut entrer une "requête". Il est possible de faire une recherche sur tout Internet ou uniquement sur les pages françaises. (8.1) Comment cela est-il possible sur ce site? 2007-2008 7
(8.2) A votre avis, si vous faîtes une requête avec le mot Darwin, qu allez-vous trouver? Tapez maintenant la requête : Darwin et lancez la recherche sur les pages françaises. (8.3) Combien de résultats le moteur de recherche a-t-il trouvé? Consultez les 10 premiers résultats. (8.4) Sont-ils conformes à ce que vous vous attendiez à trouver? Allez sur le moteur voila (www.voila.fr). Faites la même requête. (8.5) Les résultats sont ils identiques? Sont-ils présentés de la même façon que par lycos? Allez sur le moteur scirus (www.scirus.com). Faites la même requête. (8.6 ) Les résultats sont ils identiques? Sont-ils présentés de la même façon que par lycos et Voila? Exercice 9 : Comparaison des moteurs de recherche Comme nous l avons écrit plus haut, il existe plusieurs moteurs de recherche. Ils diffèrent entre eux par : - leur stratégie de recherche de résultats, - leur façon d afficher ces résultats. Nous vous proposons d effectuer les requêtes suivantes sur quelques moteurs de recherche afin de comparer leur mode de fonctionnement. sept nains Sept Nains SEPT NAINS nains sept les sept nains "nains sept" (avec des guillemets) sept n* sept nains -blanche Sur les moteurs de recherche Google et Altavista, effectuez les requêtes précédentes. A partir de vos observations et éventuellement de l aide proposée sur le site, répondez aux questions suivantes : On obtient les mêmes résultats pour des requêtes avec ou sans majuscule L ordre des mots influe le résultat obtenu La présence d articles (le, la, les ) dans la requête influe le résultat obtenu La présence de guillemets dans la requête influe le résultat obtenu Il est possible de rechercher des mots qui commencent par un préfixe On obtient toujours des pages qui contiennent tous les mots de la requête Il est possible de personnaliser le mode de recherche Google Altavista Oui Non Oui Non Exercice 10 : Utilisation des moteurs de recherche Recherche de sites particuliers : 2007-2008 8
(10.1) Donnez l URL permettant d accéder directement (i.e. sans avoir à cliquer sur d autres liens) au site du «Petit Bulletin», l'hebdo gratuit des spectacles de la région grenobloise. Notez les mots clés et le moteur qui vous ont permis de trouver l URL. (10.2) Faire de même pour le site de la mairie de Grenoble : (10.3) Quelle est la surface de la terre (toute entière, pas seulement des continents)? Réponse : NB. : on peut vérifier le résultat par le calcul : rayon terre : R=6400 km. Surface d une sphère : 4πR 2 (10.4) Comment s appelle l avion qui s est écrasé en Amérique du Sud autour des années 50 et qui a été retrouvé 50 ans plus tard (dans un glacier)? Réponse : 5 Préparation du CC2 Pour le contrôle continu numéro 2, vous devrez réaliser un site web sur le thème scientifique de votre choix. Les consignes sur le mini-site sont les suivantes : La page d accueil doit s appeler index.html (ou index.htm) Les noms des fichiers et répertoires ne doivent pas contenir d espace ou de caractère accentué ;.il ne doit pas contenir d extension superflue (pas de nom du type page.html.html), le mieux est de les écrire en minuscules. Votre site doit contenir au moins o 3 pages sur le thème choisi (hors index) o une feuille de style qui assure la cohérence de la présentation de ces 3 pages, o une liste (numérotée ou non), o un tableau, o une image simple, une image cliquable, une image map, o des liens internes et externes (en particuliers vers d autres pages de votre site et vers des sites autres sur le même thème). Les liens doivent être avec des adresses relatives. o un formulaire avec au moins 3 objets de saisie différents (boutons, cases, menus,..) et le calcul du score en Javascript o un répertoire image dans lequel toutes les images seront regroupées o des liens sur l adresse électronique des auteurs d une part et leur CV d autre part. Toutes les sources utilisées (livres, sites, cours, ) doivent être citées. Votre site doit être cohérent sur le contenu et la forme ; il doit être signé. Votre site doit respecter des critères ergonomiques classiques, tels que ceux proposés à la page http://www.ext.upmc.fr/urfist/html/ergonomie.htm Certaines des consignes tiennent compte des connaissances qui seront acquises dans les semaines 8, 9 et 10. 2007-2008 9
Mode opératoire : Créez un répertoire «CC2» sur Sarado et un répertoire «images» dans CC2. Tous les fichiers concernant votre mini-site seront rangés dans ces répertoires. Veillez à bien respecter les consignes de réalisation (nom des fichiers, chemins d accès) Sauvegardez votre travail régulièrement Vérifiez le résultat régulièrement Pour la semaine 8, vous devez Choisir votre thème votre thème, Commencer la collecte d informations (via Internet et/ou la bibliothèque) et des images. 6 Pour aller plus loin Exercice 11 : Limule (11.1) Qu est-ce qu une limule? Réponse : (11.2) Pendant quelle période les limules ont-elles existé sur terre? Réponse : (11.3) Quel est/était le milieu et les conditions de vie des limules sur terre? Réponse : (11.4) Trouvez une image ou une photo de limule Exercice 12 : Suite des CVs 12.1.. Finissez la mise à jour du second CV (photos et textes) 12.2.. Complétez le code HTML pour mettre en valeur l apparence de vos CV en ajoutant : une couleur de fond de la page au choix (Guide 8.6) des couleurs sur la table de votre parcours, par exemple une par matière pour les matières obligatoires, et une autre couleur pour l ensemble des matières au choix. Des liens vers des sites ou documents externes en rapport avec les thèmes de la rubrique «divers» Des images, animées ou non, que vous irez chercher sur le web, qui pourront servir de lien. Votre adresse électronique à la suite de votre adresse postale, sur laquelle vous mettrez un lien de type mailto vers votre adresse électronique. Une bannière défilante en haut de votre page (onglet «spécialisé», bouton «bannière») 2007-2008 10