docTP07 - DLST
download 
Plainte Transcription
TP07 - DLST
UJF – Licence Sciences – INF 112
TP7
Grenoble
UFR
IMA
1
UNIVERSITE
JOSEPH FOURIER
Informatique & Mathématiques Appliquées
Sciences, Technologie, Médecine
TP7 : 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/Essais1 : (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
UJF – Licence Sciences – INF 112
TP7
<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
oui, F non
2.1
Est-ce que l’image apparaît ?
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.
F
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
UJF – Licence Sciences – INF 112
TP7
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
UJF – Licence Sciences – INF 112
TP7
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
Biologie
INF111
INF120
INF231
BIO242
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 ? F oui, F 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 ?
F oui, F non
• Sur le site Web ?
• Quelque part sur le PC ?
F oui, F 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"
F oui, F non
(6.4) Le site vous indique-t-il le nom que vous lui avez indiqué précédemment ?
•
•
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
UJF – Licence Sciences – INF 112
TP7
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 ?
F oui, F non
• Sur le site Web ?
• Quelque part sur le PC ?
F oui, F 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.
F oui, F non
(6.8) Sont-ils similaires ?
(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 ?
F
oui, F 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
UJF – Licence Sciences – INF 112
TP7
(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
UJF – Licence Sciences – INF 112
TP7
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 1er 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
UJF – Licence Sciences – INF 112
TP7
(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 :
Google
Altavista
Oui Non Oui Non
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
Exercice 10 : Utilisation des moteurs de recherche
Recherche de sites particuliers :
2007-2008
8
UJF – Licence Sciences – INF 112
TP7
(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.
Moteur :
URL :
Mots clés :
(10.2) Faire de même pour le site de la mairie de Grenoble :
URL :
Mots clés :
Moteur :
(10.3) Quelle est la surface de la terre (toute entière, pas seulement des continents) ?
Réponse :
Moteur :
URL :
Mots clés :
NB. : on peut vérifier le résultat par le calcul : rayon terre : R=6400 km. Surface d’une sphère : 4πR2
(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 :
Moteur :
URL :
Mots clés :
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
UJF – Licence Sciences – INF 112
TP7
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 :
URL :
Mots clés :
Moteur :
(11.2) Pendant quelle période les limules ont-elles existé sur terre ?
Réponse :
URL :
Moteur :
Mots clés :
(11.3) Quel est/était le milieu et les conditions de vie des limules sur terre ?
Réponse :
Moteur :
URL :
Mots clés :
(11.4) Trouvez une image ou une photo de limule
URL :
Mots clés :
Moteur :
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
