L'essentiel du HTML5

Décrire le chemin relatif à la racine ou au document

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Analysez la manière de définir les chemins d'accès aux ressources et travaillez sur des balises ancres. Cela va affecter l'intégralité des ressources, aussi bien les fichiers externes, les images, les styles, les scripts, etc.
07:05

Transcription

Nous allons nous attarder maintenant sur la manière de définir le chemin d'accès à la page de destination. Prenons un exemple tout simple ici, avec une premère page qui serait un lien externe absolu. Dès qu'on doit pointer quelque part sur le web de manière absolue, le plus simple, c'est d'utiliser le protocole http. De ne pas laisser le navigateur venir caler lui tout seul le http. Définir s'il y a un domaine, un sous-domaine. Tapez directement http://www.puce-et-media, par exemple, pour aller sur le serveur. En plus avec vos css, vous allez pouvoir renifler que le href qui commence par http, c'est forcément externe et vous pourrez mettre un petit indicateur à côté du lien pour dire attention, vous allez quitter le site. Ensuite, alors, on va faire fi des attributs target pour l'instant. Deuxième type de lien, ça va être le lien interne absolu. Alors ici, on va se dire, j'ai une page qui est située juste à côté de moi sur le dossier où je me trouve. Mais je voudrais atteindre cette page, c'est la page 03-02 qui ne contient simplement qu'un lien de retour ici. Et j'aimerais pointer vers elle mais de manière absolue. Alors là, le plus simple, c'est de se rendre sur la page de départ. De lancer dans le navigateur, l'adresse url absolue. Ici, faites bien attention, je suis en serveur de thèse, donc je suis sur du localhost. Forcément, vous, vous seriez sur http://lenomdedomaine, etc... Sur lequel vous allez pointer. Vous copiez cette adresse là. Donc, là ici, en l'occurence, c'est du localhost et je vais venir, ici, taper directement en dur, avec http://localhost, etc... Alors, faites attention, par contre, vous êtes bien en interne mais en utilisant le protocole http, l'astuce de la css ne fonctionnera plus. Vous avez aussi la possiblité de faire un lien relatif à la racine du document. C'est-à dire que je voudrais faire un lien par rapport à là où mon document de départ se trouve. Eh bien, il suffit, puisque là, en l'occurence, l'image se trouve juste à côté, de taper le nom du lien de la page à atteindre. Si la page à atteindre se situait dans un dossier qui s'appelerait html, par exemple, il aurait fallu que je tape html/lenomdelélément, ici. Donc, on va continuer l'exploration, on pourrait dire maintenant, je veux relier un relatif à la racine du site, cette fois-ci. Donc, ça veut dire, comme si j'étais une page de départ. Eh bien là, il va falloir connaître son arborescence et dire que la racine du site se trouve à FR_1157-les-fondamentaux-du-HTML5, dans un dossier qui s'appelle Fichiers_d_exercice, dans un dossier qui s'appelle Chapitre_05, dans un dossier qui s'appelle. Et regardez le départ ici, ça commence par un /. Dès que vous commencez par un / sur votre nom de référence, automatiquement, vous pointez sur la racine du site, et non plus la racine du document. Enfin, une autre possibilité, on va se dire, je voudrais travailler par rapport à une racine de base. Alors, qu'est ce que c'est que la racine de base ? Alors, on va prendre deux secondes ici, on va venir explorer la manière dont tout est structuré. Vous voyez dans le chapitre 5, ici, j'ai un document qui s'appelle ressources, FR_1157_05_03 J'ai exactement le même document que ce que j'ai ici à côté du document de base, du document de départ, mais qui se trouve dans un dossier qui s'appelle ressources. Si je pointe ici, regardez. Je vais faire quelque chose qui n'est pas cohérent. Je vais dire que je voudrais pointer ce document. Donc, ce document, théoriquement, puisque là, il n'y a pas de /, ça va être par rappot à la racine du document. Donc si je suis ici, je suis dans le document 01. Je suis ici. Il va venir chercher le document_02. C'est celui-là, il va venir le chercher ici. Donc, juste à côté de moi. Sauf qu'en html, je vais pouvoir venir définir ici, une balise base. Et cette balise base va me dire, c'est quoi ta référence ? Et si ma référence, je lui dis, c'est le dossier ressources. Alors là, je parle en pur et dur. Si je lui dit ressources/. Très important de ne pas oublier le / de la fin. Je fais Ctrl S, Et là, regardez. Si, alors, bien entendu, j'ai un document ici, que j'ouvre. Vous voyez, ce document se trouve ici dans ressources. on le voit bien, c'est pas le même. Et lui dit, pages situées dans le dossier ressources. Et là pour le retour, puisque je suis à l'intérieur, c'est ../ Je sors d'un dossier. Je reviens dans le dossier maitre, ici, parent. Et 03-1, je reviens avec ma page de départ mais avec le ../ pour faire un retour en arrière dans l'arborescence. Eh bien, regardez ici maintenant, si j'actualise ma page ici, de départ. Et que j'actualise, on voit bien maintenant que j'ai un lien relatif à la racine de base. Et quand je clique, on voit bien que je viens dans la page située dans le dossier ressources alors que je n'aurais pas dû revenir là, puisque le lien est bien relatif, ici dans ce sens là. Mais dès lors que vous avez défini un document de base, ici, dans la balise d'en-tête, c'est lui qui va primer pour tous les liens. Même si je clique sur le lien relatif à la racine du document, je vais forcément aller sur le lien ressources. Ici, j'actualise ma page, racine du document, le lien ressources. On peut aller un tantinet plus loin dans la partie de href, ici. Petit détail, c'est qu'ici, j'ai défini par rapport à mon document mais ce qui serait préférable, surtout quand on joue avec la base comme ça, ça peut être très local pour ce document, vous pouvez l'écrire de cette manière là. Alors, je vais le commenter comme ça vous pouvez le garder dans le code et pouvez le retrouver ultérieurement. Mais ce que je vous préconiserais de faire, c'est d'utiliser un véritable lien relatif à la racine du site, pointant le dossier ressources, qui sera pareil. Et ce sera beaucoup plus sûr. Si vous déplacez la page, vaus savez que votre ressource sera toujours placée là où vous voulez l'indiquer parce que vous n'êtes pas relatif au document. Et enfin, dernière possiblité, c'est la balise base. On peut définir l'attribut target. Et vous voyez, ici dans target, j'ai défini new. Rappelez-vous, aucun des liens n'a d'attribut target, ici. Maintenant, si je reviens dans ma page de départ, et que je prends le lien absolu, vous voyez, je l'ouvre dans un target new. Pourquoi ? Parce que j'ai défini ça comme étant une base de référence. Dernier petit détail sur cette base de référence, c'est que si je déplace ma feuille de style css après la définition de la base. J'enregistre. Ce lien va maintenant se baser sur la base. Et donc, il ne trouvera plus ma feuille de style css puisque je n'en ai pas dans le dossier ressources, ici. Et si je viens donc actualiser ma page ici, je perds le css. Pourquoi ? Parce que ma base a été redéfinie. Donc, faites attention quand vous manipulez les bases, de bien être sûr, déjà, d'avoir la nécessité de manipuler la base. Et puis, de bien tenir compte de cette nouvelle référence maintenant, que vous avez, pour l'intégralité de vos liens. Ce qui marche pour le href de balise a, marche pour les liens, donc pour les parties href des link. Mais également pour les src des images et tout ce qui va pointer maintenant vers un chemin d'accès à un fichier ou à un contenu ou une ressource.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !