Comment définir correctement une ancre HTML. Ancres - création de signets Placer une ancre sur une autre page

Une ancre est un signet avec un nom unique à un certain endroit sur une page Web, destiné à être accessible via un lien. Les ancres sont pratiques à utiliser dans les documents volumineux afin que vous puissiez passer rapidement à la section souhaitée.

Pour créer une ancre, vous devez d'abord créer un signet à l'endroit approprié et lui donner un nom unique à l'aide de l'attribut id (exemple 1). Il est permis d'écrire des lettres et des symboles russes, latins dans le nom, mais seul un espace n'est pas autorisé. La valeur href pour accéder à cette ancre est la valeur id avec un symbole dièse (#) devant.

Exemple 1 : Création d'une ancre

Haut

Le nom du lien vers l'ancre commence par un dièse (#), suivi du nom de l'ancre ; vous pouvez en choisir un qui correspond au sujet. L'essentiel est que les valeurs des attributs id et href correspondent (le symbole dièse ne compte pas).

Une fonctionnalité du navigateur est associée aux ancres. Après être passé à l'ancre spécifiée, cliquer sur le bouton « Retour » ne revient pas à la page précédente consultée, mais au lien à partir duquel la transition vers l'ancre a été effectuée. Il s'avère que pour accéder au document précédent, vous devez appuyer deux fois sur le bouton « Retour ».

Le lien peut également être fait vers une ancre sur une autre page web et même sur un autre site. Pour cela, dans l'attribut href de l'élément vous devez indiquer l'adresse complète du document et ajouter un symbole dièse et le nom de l'ancre à la fin (exemple 2).

Exemple 2. Navigation rapide sur Wikipédia

HTML5.1

Il existe deux manières de créer une étiquette. Dans le premier cas, une balise permet de créer une étiquette avec l'attribut name. L'entrée HTML ressemblera à ceci :

Section 1

Le texte entre les balises d'ouverture et de fermeture n'est pas obligatoire, mais est, à mon avis, souhaitable. Le nom de l'étiquette doit être unique sur la page et peut contenir des lettres et des chiffres latins.

Dans le deuxième cas, c’est encore plus simple. Un attribut ID est ajouté à n'importe quelle balise HTML, par exemple :

Section 2

Vous pouvez utiliser l'une des méthodes décrites ci-dessus.

Comment référencer les ancres HTML ?

Afin de se rendre à l'endroit souhaité marqué d'une ancre, un lien est organisé. Il s’agit d’un cas particulier d’un lien hypertexte classique, mais qui présente quelques nuances. Par exemple:

Section 4

Comme vous l'avez déjà compris, au nom du label spécifié dans les attributs name ou ID, il est ajouté dièse - # .

Accéder à une étiquette d'ancrage HTML sur une autre page

Ancres. Section 4

Au début

alors la transition se fera au début de la page Web.

Utiliser les ancres HTML dans WordPress

Le processus de placement d’ancres dans le CMS WordPress n’est pas automatisé. Mais si vous le souhaitez, vous pouvez facilement les déposer en utilisant Éditeur HTML. La syntaxe d'écriture n'est pas différente des méthodes décrites ci-dessus.

Ancre1

Ancre1

C'est en fait tout ce dont je voulais te parler Ancres HTML. Je souhaite à tous le meilleur et bien plus encore.

Matériel utile :

Bonne journée à tous, chers lecteurs !

Je me dépêche au mieux de mes capacités avec du nouveau matériel utile - aujourd'hui, nous allons apprendre à créer des liens d'ancrage vers une page, nous allons le mettre en œuvre techniquement à l'aide d'un exemple simple et pas compliqué.

Tout ce dont nous avons besoin est de créer deux pages, dont l'une aura une ancre vers un fragment spécifique de l'autre page.

C'est très pratique, l'utilisateur n'aura pas besoin de faire défiler jusqu'à une certaine section de votre message, il y arrivera immédiatement.

Alors, commençons par créer deux articles de blog.

Disons que notre première entrée s'intitule « Qu'est-ce que l'été ? » Appelez-le comme vous voulez.

Donc, d'abord, nous avons créé la première note, maintenant nous en créons une autre, sur le soleil. Et maintenant la partie la plus intéressante. Dans l’article sur le soleil, nous nous concentrerons sur l’expression « spectre solaire ».

Commençons par créer une ancre de lien

http://ustanovka.site/?p=41#sun

faites attention à la queue à la fin de #sun, ce n'est pas un hash tag comme on pourrait le penser. Il s'agit d'un identifiant nommé soleil. Lorsque vous cliquez sur un tel lien, nous nous rendons à l'endroit où nous indiquons cet identifiant.

Passons au code de la deuxième entrée concernant « soleil » et indiquons notre id= »sun » dans le paragraphe requis comme indiqué dans cette capture d'écran :

Sauvons maintenant les modifications et lorsque nous passerons du premier enregistrement au deuxième, nous nous retrouverons exactement à l'endroit où se trouve notre identifiant. Bingo ! Vous avez maintenant appris à créer une ancre de lien dans le texte. Il y aura une leçon vidéo un peu plus tard. Merci à tous!

Tout récemment, nous avons ajouté nouvelle fonctionnalité, ce qui rendra l'interaction avec votre site Web non seulement plus pratique, mais aussi intéressante. Alors c'est quoi? Ancres, ou " Liens d'ancrage" est une méthode de navigation sur le site qui permet de passer rapidement d'un endroit à un autre de la page.

Pourquoi est-ce pratique ?

Si vous utilisez fréquemment Internet, vous avez probablement déjà rencontré la navigation simple offerte par les liens d'ancrage sur des sites à défilement long comme Pinterest ou Flickr.

Avec un site avec des liens d'ancrage, vous n'avez pas à perdre de temps à faire défiler la page ou à parcourir les pages pour trouver les informations dont vous avez besoin. Cliquez simplement une fois sur le lien d'ancrage et vous serez immédiatement redirigé exactement là où vous devez être : en haut de la page, en bas ou vers une autre page. Cette fonctionnalité est particulièrement utile pour naviguer et se déplacer dans de longues pages, ainsi que pour créer un bouton « Retour en haut ».

Comment créer un lien d'ancrage dans l'éditeur Wix

Pour ajouter un lien d'ancrage à un site, vous devez suivre deux étapes simples : Tout d'abord, vous devez « déposer une ancre », c'est-à-dire marquer la destination où un visiteur du site doit se rendre en cliquant sur le lien. Ensuite, vous devez ajouter un lien vers le point de départ à partir duquel l'utilisateur « voyagera » jusqu'à l'ancre prévue. Cela semble compliqué ? Dans l'éditeur Wix, cela peut être fait en quelques clics :

Ouvrez l'éditeur et cliquez sur Ajouter au menu.

Cliquez sur Boutons et menus et sélectionnez l'option Ancre.

Dans les paramètres « Ancres », précisez le nom de l'ancre en fonction de sa position sur la page.

Faites glisser l'ancre là où vous souhaitez qu'elle mène.

Une fois que vous avez toutes vos ancres en place, créez des liens pour elles. Vous pouvez créer un menu qui vous permet de passer d'une ancre à l'autre, ou d'utiliser des icônes et d'autres éléments cliquables.

Cliquez sur l'élément que vous souhaitez lier à l'ancre et cliquez sur Lié à.

Si vous écrivez votre propre site Web, vous auriez dû réfléchir à la façon de rendre la navigation sur le site plus pratique. Pour que l’utilisateur n’ait pas à chercher l’information dont il a besoin parmi toutes les pages de votre site, il est préférable d’utiliser la technique de « l’ancre ». Il créera un lien vers n’importe quelle information ou document n’importe où sur votre site.

Théorie

Pour créer une ancre, vous avez besoin de deux éléments :

• Un morceau de code qui précise un lien vers notre ancre, laissé dans une autre partie du site.
• Toute partie du code dans laquelle vous pouvez spécifier un identifiant est notre ancre.

Vous devez d'abord créer la première partie de l'ancre - un lien vers celle-ci. Un lien d’ancrage se compose de deux parties : le lien de page et le lien d’ancrage.

1. Créez une balise "a" ou toute autre balise prenant en charge l'attribut "href"
2. Créez un attribut "href" dans cette balise
3. Dans la valeur de l'attribut, spécifiez un lien vers la page du site.
4. Après le lien, indiquez un lien vers l'ancre en utilisant le symbole "#" et n'importe quel nom pour l'ancre (écrit ensemble, exemple : "#anchor")

Il reste à créer la deuxième partie de l'ancre - l'identifiant. Il est spécifié pour toute balise du code du site prenant en charge l'attribut id. Pour créer une ancre, vous avez besoin de :

1. Créez un attribut "id" dans la balise souhaitée.
2. Dans l'attribut "id", spécifiez la valeur du nom d'ancre spécifié à l'étape précédente. (exemple : id="ancre")

Après ces deux étapes, un lien apparaît sur le site qui vous mènera vers l'ancre spécifiée.

Pratique

Voyons comment créer une ancre à l'aide d'un exemple spécifique.

Nous avons une page simple comme celle-ci :

Nous avons du texte en haut et en bas de la page, beaucoup de balises "br" qui créent de la distance entre les textes. Nous devons créer une ancre afin de pouvoir consulter rapidement le texte en bas.

Pour ce faire, créez une nouvelle balise après l'inscription « texte en haut » - « a ». Nous y créons l'attribut « href ». Pour rendre l'ancre plus pratique, nous écrirons « vers le bas » dans le lien.

Maintenant, nous spécifions la valeur « #yakor » dans l'attribut - ce sera un lien vers le nom de l'ancre.

La première partie de l'ancre - le lien vers celle-ci - est prête. Il ne reste plus qu'à créer l'ancre elle-même. Passons à la partie souhaitée de la page. Dans ce cas, il s'agit du "texte en bas". Puisqu'il s'agit d'un simple texte sans balise, nous devons le créer. Pour ce faire, nous enfermons le texte dans un « paragraphe » - la balise « p ».

Dans cette balise, nous créons l'attribut « id » et y entrons la valeur « yakor ». La valeur "yakor" correspond au nom de l'ancre qui a été précisé dans le lien.

Maintenant, notre ancre fonctionne comme il se doit.