Utiliser les liens relatifs pour construire l'arborescence d'un site web
Objectif:
Manipuler les liens relatifs.
Travail à faire
L'objectif de cet exercice est de construire l'arborescence suivante en utilisant les liens relatifs :
- Créer les différents dossiers et fichiers de cette arborescence.
- Utiliser les liens relatifs afin de réaliser ce qui suit :
- la page index.html dans le dossier racine, contenant un sommaire vers les différentes pages comme illustré dans la figure ci-dessus.
-
la page "qui-somme-nous.html" contient une description de l'équipe et deux liens :un lien vers la page "list-produits" et un lien vers la page contact comme suit :
Page Equipe -
La page "list-produits" affiche des liens vers les 3 produits :
Page Liste des produits -
Les pages "produit-1.html" ,"produit-2.html","produit-3.html" contiennent les détails du produit et un lien qui renvoie vers la page "list-produits" . Exemple de la page "produit-1.html" :
Page Produit -
La page "contact.html" contient un formulaire simple composé d'un champ email , un champs textarea pour saisir un message et un bouton pour envoyer les données.
Les liens à utiliser pour construire l'arborescence:
<ul>
<li><a href="/">index.html</a></li>
<li>
<img src="/images/folder.png"/> societé
<ul><li><a href="/societe/qui-sommes-nous.html"> Qui sommes nous</a></li></ul>
</li>
<li><img src="/images/folder.png"/> Nos Produits
<ul><li><a href="/Nos Produits/list-produits.html"> Liste Produits </a></li>
<li><img src="/images/folder.png"/> Détails Produits</li>
<li>
<ul><li>Produi1</li>
<li> Produi2 </li>
<li>Produi3</li>
</ul>
</li>
</ul>
</li>
<li> <img src="/images/folder.png"/> images
<ul><li>folder icon</li></ul>
<li><a href="/contact.html">Contact</a></li>
</ul>
|
Sélectionnez le fichier à afficher.
|
