TP 2 Liens, listes et images

Licence QCI
TP 2 Liens, listes et images
1.Création de liens hypertexte
Dans le premier TP, vous avez créé une page que vous avez enregistré dans le répertoire
public_html de votre compte sous le nom index.html.
a. Sachant que le serveur web de lʼIUT se trouve sur la machine pipit.u-strasbg.fr
quelle est lʼURL publique permettant de visualiser votre page web?
b. Créez une nouvelle page nommées liens.html dans laquelle vous ajouterez les
liens suivants:
i) un lien vers le moteur de recherche www.google.fr
ii) un lien vers un document se trouvant sur un serveur ftp. Par exemple, sur le
serveur ftp.debian.org vous trouverez dans le répertoire /debian/doc, le fichier
constitution.txt qui est la constitution du projet Debian (v1.0).
iii) un lien vers un fichier de votre répertoire personnel (avec le schéma file:).
iv) un lien vers votre adresse mail, dont le sujet sera prédéfini par “test de lʼURL
mailto”.
c. Validez votre page par lʼutilitaire du W3C.
2.Créer un sommaire
Dans cet exercice, nous allons créer une page web servant de sommaire à une autre page
à lʼaide des ancres.
a. Récupérez le document XHTML à lʼURL suivante :
http://master-info.u-strasbg.fr/~arnaud/enseignement/IUT/tp2.html
b. Modifiez le code source pour délimiter les sections correspondantes aux grands
titres. Testez ensuite le résultat en modifiant lʼURL du document de façon à faire
apparaître la section désirée en haut de la fenêtre.
c. Validez cette page avec lʼutilitaire du W3C.
d. Créez une nouvelle page XHTML dans laquelle vous rédigerez le sommaire de la
page précédente sous forme de liste des grands titres, puis validez par le W3C.
e. Ajoutez des liens aux titres du sommaire afin que lorsquʼon clique sur un titre, la
page XHTML sʼouvre et sʼaligne automatiquement à la section correspondante.
3.Les listes
Reproduisez les exemples ci-dessous dans une page XHTML.
a. Liste à puce
• Adresse : EPFL, CH-1015 Lausanne
• Tél : +41 (0)21 693 27 73
• Fax : +41 (0)21 693 27 27
• E-mail : [email protected]
Licence QCI
b. Combinaison de listes numérotées et à puce
1. Ecole primaire :
 1ère : Yverdon
 2e-3e : Echallens
2. Ecole secondaire :
 1ère-3e : Echallens
 4e-6e scient. : Lausanne, Béthusy
3. Gymnase :
 Lausanne, La Cité
4. Université :
 Lausanne, faculté Physique
c. Liste de définitions
1990
1993
1998
Certificat de fin d'études secondaires
Maturité scientifique
Licence en physique. Travail de mémoire...
4.Images et images sensibles
a. Créez une page web ou vous intégrerez une image de la France (lʼURL de lʼimage
est http://master-info.u-strasbg.fr/~arnaud/enseignement/IUT/carte_france.gif).
b. Rajoutez un titre à la page web “Les régions de France”.
c. Aidez vous dʼInternet pour trouvez des descriptions de quelques régions que vous
rajouterez en dessous de lʼimage (par exemple sur wikipedia).
Remarque : Lorsque vous reprenez du texte dʼun autre site, la loi vous oblige à citer le
site en question (droits dʼauteur). Pensez à le faire systématiquement.
d. Lʼobjectif est ensuite de pouvoir cliquer sur chaque région contenant une
description pour être redirigé au sein de la page vers la section correspondante.
e. Rajoutez un lien après chaque section qui permette de revenir au début de la
page. Peu important pour la compréhension, ce lien devra paraître plus petit que le
reste du texte.