Partie HTML TD 4 : Chemins d`accès et images

TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
Partie HTML
TD 4 : Chemins d’accès et images
1. Les chemins d'accès
Un site Web est constitué de multiples fichiers comme par exemple des fichiers images (*.gif, *.jpg),
ou d'autres pages web (pour les liens hypertextes),...
Pour accéder à l'un de ces fichiers, il y a 3 questions à se poser :
1.
Le fichier est -il sur la même machine que la page Web qui l'appelle ?
2.
Dans quel dossier se trouve le fichier ?
3.
Quel est le "chemin" à parcourir à travers les différents dossiers pour accéder à ce fichier ?
Il y a deux types de chemins d'accès :
−
−
les chemins absolus
les chemins relatifs
1.1.
Chemins relatifs
Les chemins relatifs permettent d'accéder à des fichiers qui se trouvent sur la même machine que
le fichier (la page web) qui les appelle. Il faut indiquer le chemin qui mène au fichier en partant du dossier
qui contient la page web qui l'appelle.
- Pour utiliser un fichier image qui se trouve dans le même dossier que la page web, il suffira simplement de préciser le nom de ce fichier : nom_du_fichier.
- Si le fichier se trouve dans un sous-dossier du dossier qui contient la page web, il faudra accéder
au fichier comme ceci : nom_du_sous_rep/fichier.
(si c'est un sous-sous-dossier => sous_rep/sous_sous_rep/fichier)
Si le fichier se trouve dans une autre branche, on indiquera :
../nom_autre_rep/fichier
Le "../" permet de remonter d'un "étage" dans l'arborescence des dossiers.
Si vous devez remonter de 2 "étages" => ../../nom_du_rep/fichier
Si le fichier se situe dans un sous-dossier d'un autre dossier : ./autre_rep/sous_rep/fichier.ext
Page 1 sur 4
TD Informatique Semestre 2 : Réseaux - HTML
Exemple :
Université Stendhal, Grenoble III
Supposons que l'on veuille insérer l'image toto.gif dans la page web page.html qui est
enregistrée dans le Dossier 1
Cas Π:
L'image est aussi enregistrée dans le Dossier 1
Code : <img src="toto.gif">
Cas • : L'image est enregistrée dans Dossier 2
Code : <img src="Dossier 2/toto.gif">
Cas Ž : L'image est enregistrée dans Dossier 3
Code : <img src="../toto.gif">
Remarque : La notation
dans Dossier 3
.. permet de remonter d'un étage dans l'arborescence, donc ici d'aller
Cas • : L'image est enregistrée dans le Dossier 4
Code : <img src="../Dossier 4/toto.gif">
on remonte d'abord dans Dossier 3 par la notation
1.2.
.. puis on redescend dans Dossier 4
Chemins absolus
Les chemins absolus permettent d'accéder à des fichiers qui se trouvent sur une autre machine que le fichier (la page web) qui les appelle (des sites extérieurs par exemple).
Il faut alors utiliser des URLs (adresse de site web) complètes :
ex : http://www.un-site.com/un_dossier/sous_dossier/fichier
Page 2 sur 4
TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
2. Les images
•
<IMG SRC="nom_fichier_image" />
Le nom du fichier doit être fourni avec
Il n'y a pas de balise de fin mais la balise s’achève par />
le
chemin
d'accès
relatif
au
fichier.
Attributs :
border = épaisseur d'un cadre autour de l'image
width, height = largeur et hauteur de l'image
align = "center" ou "left" ou right" " définit l'alignement de l'image par rapport à un paragraphe adjacent (pour placer une image au centre ou à droite indépendamment d'un texte faire :
<P align="right"><IMG SRC="…"/></P>
alt = "légende" définit un message qui apparaît dans une infobulle quand on survollera
avec la souris l'image.
ex : <IMG SRC="photo.jpg" border="2" alt="australie" align="right">
3. Exercices
3.1.
Exercice 1
Vous allez créer une page, appelée Images.html, qui fera apparaître plusieurs mises en forme
d'images.
La page comprendra 3 parties. Il est conseillé d’aller vérifier dans le navigateur votre travail
entre chaque partie. Pour cela, enregistrez votre fichier avec le bloc-notes et réactualiser la page dans
le navigateur. Vous allez créer un dossier _images qui contiendra toutes vos images
Description de la page à créer :
•
•
•
Le fond de la page sera de la couleur "palegoldenrod" et le texte sera "marroon".
Le titre de la page sera : Les images
un titre de niveau 1, centré : LES IMAGES
ère
1
•
•
•
partie :
une image à gauche de l'écran, sans bordure, que vous aurez préalablement choisi dans le
diaporama proposé dans la page d'accueil du site de l'Université Stendhal et copié dans le
dossier _images
Un paragraphe donnant les caractéristiques de mise en place de l'image.
Une ligne séparatrice
ème
2
•
•
•
partie :
une image au centre, avec bordure, avec légende, que vous aurez préalablement choisi dans
le diaporama proposé dans la page d'accueil du site de l'Université Stendhal et copié dans le
dossier _images
Un paragraphe donnant les caractéristiques de mise en place de l'image.
Une ligne séparatrice
Page 3 sur 4
TD Informatique Semestre 2 : Réseaux - HTML
ème
3
•
Université Stendhal, Grenoble III
partie :
une image à droite, avec bordure plus épaisse, avec légende, que vous aurez préalablement
choisi dans le diaporama proposé dans la page d'accueil du site de l'Université Stendhal et
copié dans le dossier _images
3.2.
Exercice 2
Vous allez créer un dossier page Souris-Chat, à l’intérieur de ce dossier vous allez copiez
l’image ChatSouris.jpeg qui se trouve sur le poste enseignant. Récupérez sur le poste enseignant le
fichier TexteSourisChat.doc. Ce fichier contient le texte de la page
Ouvrez le logiciel SciTE et créez une page nommée ChatSouris.html
Sur cette page, vous allez faire les modifications suivantes :
1- Le titre de la page est « Gare aux matous ! »
2- Définir les styles suivants (ces styles sont définis dans la page) :
Pour le corps de texte (BODY)
Police : Verdana,sans-serif
Couleur de fond d’écran : #d2b48c
Couleur de la police : violet (purple)
H1
Le texte est aligné au centre
H2
Police : Georgia, « Times New Roman », serif
3- Toujours dans la définition des styles, vous allez créer 2 classes de style :
.centre
Le texte est aligné au centre
.attention
Le texte est aligné au centre
Le texte est en gras
Le texte est en italique
La couleur de fond est : #fff8dc
4- Mettre la phrase « Page à l'attention des petites souris malines... » en titre de niveau 1
5- Sous le titre, vous allez placer l’image ChatSouris.jpeg en utilisant la classe centre
6- Mettre la phrase « Comment dresser son chat ?» en titre de niveau 2
7- En utilisant la classe attention, mettre la phrase « L'auteur ne se considère pas comme
responsable si les astuces présentées ne sont pas fiables »
8- Créez 2 paragraphes espacés entre par un saut de ligne. Le texte de chaque des paragraphes est indiqué dans le fichier TexteSourisChat.doc
9- En utilisant la classe attention, mettre la phrase « N'oubliez pas, mesdames les Souris,
d'offrir un présent à votre chat domestique !»
Page 4 sur 4