Centre d'aide en web 1

Chemins d'accès (URL)

Dans la section "navigation", nous avons identifié les problèmes pouvant affecter la façon de naviguer entre les différentes pages d'un site. Bien que nous effectuions un rappel de certaines notions ici, le principe d'adresse se prolonge aussi aux chemins d'accès des différents éléments intégrés à une page : feuille de style, images, etc. L'image ci-dessous servira de référence pour les différentes problématiques en lien avec les chemins d'accès.

mauvais exemple

Le chemin d'accès aux fichiers CSS

[ La feuille de style doit être lié adéquatement au site ]

Vous êtes très nombreux à avoir cette erreur dans vos productions. Il est essentiel de s'assurer que la feuille de style est liée adéquatement à votre page. Vérifiez d'une part si la feuille de style est à l'intérieur d'un dossier ou non. Si c'est le cas, le nom du dossier doit être présent dans l'adresse. Comme nous le constatons dans l'exemple ici, l'adresse pointe directement à la racine du dossier. Comment est-ce possible? La page nautique.html est présente à la racine du dossier. En n'indiquant aucun dossier à l'intérieur de l'attribut href, nous sommes en mesure de dire que l'étudiant pointe son lien sur la racine du dossier.

Dans la majorité des cas, vous trouverez les feuilles de style à l'intérieur d'un dossier CSS. Avant d'inclure automatiquement le dossier CSS à votre adresse, assurez-vous que ce dossier est présent dans le dossier fourni ou que vous avez inclus en dossier CSS dans votre dossier de travail.

astuces ASTUCES

Assurez-vous d'avoir installé EMMET, car il fait les liens avec le dossier automatiquement avec votre projet. Si le fichier est existant, vous avez qu'à taper dans ce cas-ci css/ dans l'attribut href et EMMET va vous proposer des suggestions. En procédant de la sorte, vous vous assurez d'avoir de la qualité de vos adresses. Nous prenons en exemple les feuilles de style CSS, mais c'est aussi applicable pour les scripts de programmation ou vos médias.

Mauvais exemple :
mauvais exemple
Correctif :
correctif

L'adresse des pages pour la navigation

[ Assurez-vous d'avoir les bonnes adresses relatives ]

L'erreur suivante s'est reproduite à quelques reprises. Il s'agit d'une erreur majeure en termes de développement web. L'adresse inscrite dans l'attribut href pointe sur le disque dur de l'étudiant. Comment sommes nous certains de cette information ... D:. L'étudiant pointe sur un disque dur, donc le tout est fonctionnel uniquement si le projet est stocké localement sur l'ordinateur de l'étudiant. Un site web par définition doit être accessible à une masse d'usagers. Le problème ici c'est qu'il sera fonctionnel uniquement pour son concepteur.

Comme nous voulons passer ici d'une page à une autre (en considérant que toutes les pages sont à la racine du dossier de travail), alors il faut simplement pointer dans l'adresse vers le fichier et son extension sans mettre de dossier devant par exemple :

  • href="nautique.html"
  • href="camping.html"
  • href="randonnee.html"
astuces
MISE EN GARDE

Vous devez vous donner de la latitude dans l'accessibilité de vos pages ou de vos médias. C'est pour cela que vous devez opter pour soit des liens relatifs à la page ou au site tout dépendant de la situation et de ce que vous voulez faire.

Mauvais exemple :
mauvais exemple
Correctif :
correctif

[ Ne pas mélanger l'attribut class et href ]

Il ne faut pas confondre l'attribut class et l'attribut href. L'attribut href sert à indiquer adresse adresse de destination. Afin de corriger cette erreur, il suffit d'ajouter le bon lien (selon toujours l'emplacement des éléments dans le dossier) et d'ajouter à la balise un attribut supplémentaire afin d'y ajouter la classe CSS menu.

Mauvais exemple :
mauvais exemple
Correctif :
correctif

[ Respectez la structure des fichiers du dossier de travail ]

Il est important de garder à l'esprit qu'une navigation ne se résume pas à mettre des balises <a>. Il faut aussi voir l'envers du décor afin de s'assurer que les liens seront fonctionnels au final. C'est important que les liens utilisés puissent refléter la réalité du positionnement des fichiers à l'intérieur du dossier où l'on retrouve l'ensemble des fichiers nécessaire à la conception du site. Il est question plus spécifiquement du principe d'adresse relative au fichier ou au site.

Bien qu'il s'agisse d'une production étudiante, vous n'avez pas à faire un fichier particulier pour y mettre votre code SAUF si c'est une consigne directe du devis de projet ou des consignes d'un examen. Le fait de mettre l'ensemble du code prévu pour la page nautique.html à l'intérieur de la page TEST1234567_ExamenMiSession.html constitue une erreur majeure sur le plan de la navigation. En procédant ainsi, dès que l'on sort de la page TEST1234567_ExamenMiSession.html pour se rendre sur camping.html par exemple, il est IMPOSSIBLE de revenir à la page TEST1234567_ExamenMiSession.html. La structure du schéma ne permettait pas la création d'une page TEST1234567_ExamenMiSession.html. Dans l'image de l'exemple du code de la navigation attendu lors de l'examen, on voit très bien que les liens mènent vers les pages camping, nautique ainsi que randonnée.

astuces
MISE EN GARDE

La relation entre le positionnement des fichiers et les liens est importante. Il faut bien comprendre le principe d'adresse relative au fichier et relative au site. Afin de parfaire vos compétences au sujet des liens, nous vous suggérons de retourner à l'exercice de l'arborescence que nous avons vu en classe.

Exercice d'arborescence
Mauvais exemple :
mauvais exemple
Exemple :
correctif

La gestion des fichiers pour la navigation

[ Toujours travailler à l'intérieur du dossier de projet ]

L'exemple suivant est similaire au précédent, cependant le fichier de travail est à l'extérieur du dossier de projet. C'est important ce que celui-ci (le dossier) soit identifié adéquatement selon les standards du département (3 premières lettres de votre nom de famille + la première lettre de votre prénom + votre matricule + le nom du dossier). Comme nous l'indiquons dans l'image du correctif, vous n'avez pas besoin d'un fichier supplémentaire pour votre projet. Vous avez qu'à identifier adéquatement votre dossier de travail.

Mauvais exemple :
mauvais exemple
Correctif :
correctif
keyboard_arrow_up