Création de Liens Complexes en HTML

Créer des liens complexes
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont :

  • Comprendre la structure des dossiers et des fichiers en HTML.
  • Apprendre à créer des liens complexes pour naviguer entre différentes pages.
  • Maîtriser les techniques pour sortir et entrer dans des dossiers via les liens HTML.

Cette leçon vous montre comment créer des liens complexes en HTML, incluant l'accès à des fichiers situés dans différents dossiers.

Dans cette leçon, nous explorons la création de liens HTML vers des fichiers situés dans différents dossiers. À partir d'un fichier index, vous apprendrez comment naviguer vers d'autres pages comme bleu.html et rouge.html situées dans leurs dossiers respectifs. Vous verrez également comment retourner à la page d'accueil et comment accéder à des ancres spécifiques sur ces pages. Nous couvrons les étapes pour sortir des dossiers avec l'utilisation des ../ et comment cette technique permet une navigation fluide entre les pages.

Cette leçon est essentielle pour toute personne cherchant à maîtriser la création de sites web complexes où la structure de dossier est utilisée pour organiser les fichiers HTML et autres ressources. Vous serez à même de créer des sites web bien structurés et faciles à naviguer, améliorant ainsi l'expérience utilisateur et le référencement SEO.

Voir plus
Questions réponses
Comment créer un lien vers une page située dans un sous-dossier ?
Pour créer un lien vers une page située dans un sous-dossier, utilisez la structure <a href='nom_dossier/nom_page.html'>.
Comment revenir à la page d'accueil depuis une page située dans un dossier ?
Pour revenir à la page d'accueil depuis une page située dans un dossier, utilisez <a href='../index.html'>.
Comment créer un lien vers une ancre spécifique sur une autre page ?
Pour créer un lien vers une ancre spécifique sur une autre page, combinez le chemin de la page et l'identifiant de l'ancre, comme <a href='page.html#ancre_id'>.
Nous allons maintenant étudier la réalisation de liens, ce que l'on pourrait appeler complexes, c'est-à-dire des liens qui vont faire appel à des éléments qui sont situés dans des dossiers, mais dossiers desquels nous allons sortir pour revenir sur la page. Alors voici l'environnement de travail, le lien complexe il est là, donc on a un fichier index, toujours pareil, c'est notre fichier de base, à l'intérieur du dossier qui s'appelle bleu, il y a une page qui s'appelle également bleu.html, mais donc elle est située à l'intérieur du dossier, pareil pour le rouge, il y a une page qui s'appelle rouge. Alors qu'est-ce que nous allons faire, nous allons prendre ce fichier index, enfin l'utiliser, et aller ouvrir la page qui est là. Normalement, ça vous devriez savoir le faire, puisque c'est le même principe que pour les images. Là où ça devient plus compliqué, c'est qu'à partir de cette page bleue, nous souhaitons d'une part revenir sur la page index, et d'autre part, à partir de cette même page bleue, aller ouvrir la page rouge. Je vais prendre mon fichier index, qui est là, alors j'ai déjà ouvert mes différentes pages, ce qui va nous permettre de gagner du temps, et j'ai également commencé à réaliser les fichiers ul et li, qui nous permet également de travailler uniquement les li qui nous intéressent. Premier objectif, nous allons aller chercher la page qui se nomme bleue. Alors à href, on va marquer ici, page bleue, et le href, il est situé dans le dossier qui s'appelle bleue, et ma page s'appelle bleue.html. Nous allons simplement voir si ça correspond, donc index, un dossier bleu, et une page bleue. Hop, voilà, donc ça, a priori, l'ensemble est correctement écrit. J'enregistre, et nous regardons dans un navigateur, j'ouvre index, voici ma page index, page bleue, celui que je viens de créer, je clique. Nous arrivons bien sur la page qui s'appelle page avec l'image bleue. Tout à l'heure, nous reviendrons. Deuxième petite chose à réaliser, depuis ici, je vais accéder à cette zone, en bas de ma page. Ça, nous l'avons déjà fait, donc c'est très simple. À href, dièse, titre, 2. On va écrire simplement, aller au titre du bas de cette page. Nous regarderons dans un second temps. Enfin, je vais maintenant aller dans la page rouge. Ah, et puis, rouge, dossier rouge, slash, page rouge, donc rouge.html. Sans oublier le texte sous lequel on va cliquer, page rouge. Voilà, nous avons terminé pour cette première page. Alors, on va vérifier. Page bleue, nous y sommes déjà allés. Au bas de la page, nous y sommes avec le même problème que ce que nous avons vu avec les liens ancrés, c'est-à-dire que nous ne sommes pas tout à fait en bas, mais on pourrait créer un lien pour retourner en haut de la page, tout simplement. Ce lien était déjà fait, situé là, donc c'est dièse, titre, 1, qui nous permet de revenir ici, et en fait, page rouge, nous sommes bien sur la page rouge. Alors, à présent, je vais prendre ma page bleue, qui est là, et nous allons faire un retour vers la page d'accueil, donc avec la page qui s'appelle lien. Donc, à href, et puis, alors là, regardons encore une fois notre config. Nous sommes ici. Donc, il va falloir que je sorte du dossier bleu et que j'accède au fichier qui s'appelle index. Alors, sortir. Pour sortir d'un dossier, deux petits points slash, cela permet de sortir du dossier. Donc, à partir du moment où j'ai écrit deux petits points slash, je suis à l'extérieur du dossier. Donc, finalement, l'extérieur du dossier signifie que je suis à côté de ce fichier index.html. Je suis en mesure, à présent, de trouver ce fichier. On va faire la même chose avec le rouge. Alors, le rouge, c'est pareil. Il suffit simplement de copier-coller, puisque la configuration, et même si la page est différente, la configuration est la même. Nous sommes dans rouge, nous voulons sortir de rouge et aller sur index. Essayons. Je reviens sur ma page d'index, j'actualise, page bleue. Voilà, retour à l'accueil. Je reviens bien sur ma page d'accueil rouge. Retour à l'accueil et je reviens ici. Alors, maintenant, on va faire un peu plus compliqué. Depuis notre page bleue, par exemple, nous allons aller sur la page rouge. Je vais créer un autre lien. Je vais le mettre dans un paragraphe, puisque nous ne l'avons pas encore fait. Nous avons toujours travaillé ça dans des listes. Voilà, alors, à présent, on est sur la page bleue, on va sur la page rouge. Page rouge. Pour y aller, regardons encore une fois. On est là. On veut sortir de bleu, on veut rentrer dans rouge et aller chercher la page qui s'appelle rouge. Allons-y. Donc, je sors de bleu. Ça y est, je suis sorti de bleu. À présent, je rentre dans le dossier rouge. Voilà, et ensuite, je vais chercher la page qui se nomme rouge.html. Et ça y est, nous sommes sur le fichier rouge. Allons-y. Page bleue. Notre nouveau lien est situé là. Page rouge. Ça fonctionne. Un petit dernier. Nous allons vouloir accéder au titre 2 de la page rouge. Depuis notre page bleue. Je copie-colle comme tout à l'heure, c'est plus simple. Le lien qui est situé là nous amène à la page rouge. Ça, c'est déjà fait. Pour aller au titre 2, nous allons nous mettre après le point html puisque finalement, là, nous avons quitté la page bleue, le dossier. Nous sommes rentrés dans le dossier rouge. Nous sommes arrivés dans le fichier rouge et maintenant que nous y sommes, nous allons aller sur le titre 2 grâce au dièse comme nous l'avons fait pour les liens ancrés. Ainsi, le titre 2 de la page va se placer en haut de notre page. Allons-y. Remettons-nous sur l'index. Voilà, on est sur l'index. On va sur la page bleue. Nous avons déjà testé ces différents liens. Allons sur la page rouge, mais à ce moment-là, allons sur le titre 2. Et voilà. Notre page ne s'est pas placée tout en haut, c'est bien placé au maximum qu'elle pouvait pour aller nous chercher le titre 2 de la page. Je retourne à l'accueil. Si je retourne sur ma page bleue et que je vais sur la page rouge, vous voyez, elle arrive en haut de la page rouge qui est différente de ce que nous a fait ici. Nous avons réalisé différents types de liens réalisables avec sortie d'un dossier, rentrée dans un dossier et aller sur une encre particulière à l'intérieur d'un fichier. Vous allez donc pouvoir travailler et vous organiser comme vous le voulez pour placer vos différentes pages, puisqu'à présent, vous savez sortir et rentrer dans un dossier.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ?&nbsp;Le fonctionnement des sites web ainsi que la structure d'une page HTML.&nbsp; Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre&nbsp;la structure du CSS, les tableaux, boutons et formulaires en CSS.&nbsp; Vous suivez la&nbsp;méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de&nbsp;mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5