Conseils utiles

Hyperliens HTML

Pin
Send
Share
Send
Send


Balise de rencontre (de anchor anchor), vous pouvez y insérer du texte ou une image, qui deviendra un lien vers certains documents. Attribut de balise href définit le nom et le chemin du document vers lequel le lien pointe.

Tout est écrit ensemble comme ça:

Comme vous l'avez probablement compris, amorce.html est le nom de notre deuxième document html, ainsi que l'inscription "Voici mes photos !!" c'est un morceau de texte du fichier index.html.

Par analogie avec les images, le chemin d'accès au document en cours d'ouverture est enregistré de la même manière:

Voici mes photos !! - Un tel enregistrement implique que, dans le répertoire où se trouve notre premier document html, se trouve un dossier stranica dans lequel se trouve le fichier primer.html.
Voici mes photos !! - Et cela signifie que le fichier primer.html est placé un niveau plus haut que le document
Voici mes photos !! - le document se trouve sur le site www.site.ru ..

Eh bien, essayons? Vous trouverez ci-dessous un exemple de deux documents contenant des liens pointant l'un vers l'autre.



Faire un lien un morceau de texte


Dis-moi, cher enfant: à quelle oreille mon bourdonnement?

Contenu de la leçon:

  • Termes
  • § 1. Lien vers le fichier, lien vers le site, lien vers la page
  • § 2. Création de liens externes
    • § 2.1 Liens graphiques (liens d'image)
  • § 3. Liens internes
  • § 4. Références absolues et relatives
  • § 5. Lien vers l'email
  • § 6. Attributs de la balise «A»
    • § 6.1 Attribut cible
    • § 6.2 L'attribut title
    • § 6.3 L'attribut rel = "nofollow"
  • § 7. Conclusion

Liens d'ancrage (de l'anglais "Ancre" - "Ancre") Est ce qui est dans le code de lien hypertexte entre les balises et. Par exemple, il pourrait y avoir:

§ 1. Lien vers le fichier, lien vers le site, lien vers la page

Les nombreuses questions sur la différence entre le lien vers le fichier et le site ou sa page distincte m'ont obligé à y répondre au tout début de la leçon. La réponse est: rien. Tous les liens listés sont externes à source page et sont créés de la même manière.

Afin de ne pas répandre la pensée sur l'arbre, je vais tout montrer avec un exemple.

Et ainsi code de lien de site ressemble à ceci:

Dans le navigateur, nous verrons ceci:

Code de lien de page ressemble à ceci:

Dans le navigateur, nous verrons ceci:

Code de lien de fichier ressemble à ceci:

Dans le navigateur, nous verrons ceci:

Comme vous pouvez le constater, tous les types de liens sont créés exactement de la même manière. La seule différence est l'adresse l'objet à référencer. Passons maintenant à la partie principale de la leçon.

§ 2. Création de liens externes

Les liens entre eux diffèrent sur externe et domestiqueainsi que textuel et graphique. Les liens externes mènent au-delà des "limites" de la page html, internes à diverses parties le même pages. Les liens de texte sont du texte (par défaut, il est mis en surbrillance en bleu et souligné), et les liens graphiques contiennent un type d'image en tant qu'objet sur lequel vous devez cliquer pour accéder. Tous ces types de liens sont créés en HTML à l'aide d'une balise. (abréviation de l'anglais anchor - anchor). Voyons cela plus en détail.

Pour créer un lien externe vers un site, une page ou un fichier, utilisez l'attribut tag. - href. En tant que valeur, cet attribut prend URL site, page ou fichier (nous en avons parlé ci-dessus). Entre les tags et La partie visible du lien (ancre du lien) est située, c'est-à-dire ce que nous voyons sur l'écran du navigateur. L'ancre de lien peut être du texte brut (lien de texte) ou une image graphique (image de lien). Link-picture est créé en insérant une balise familière à la dernière leçon. entre les tags et . En général, la syntaxe pour créer un lien ressemble à ceci:

Par exemple, pour créer un lien texte vers la page principale de ce site, vous devez écrire le code HTML suivant:

Dans un navigateur, cela ressemblera à ceci:

Comme je l'ai écrit au tout début de cette leçon, la couleur du texte du lien (ancre) peut être modifiée à l'aide des attributs de la balise BODY. En général, toutes les mêmes options de formatage peuvent être appliquées au texte des liens comme pour le texte principal de la page, c'est-à-dire gras, italique, titres, etc.

§ 2.1 Liens graphiques (liens d'image)

Comme je l'ai dit plus haut, pour créer un lien d'image, vous devez utiliser une image au lieu d'un texte. Un exemple d'un tel lien ressemble à ceci:

Et le navigateur affichera:

Par défaut, le navigateur entoure l'image dans le lien graphique. Si cela n'est pas souhaitable, alors l'attribut border Tag IMG vous devez attribuer la valeur 0:

Les liens texte et image peuvent être combinés. Si vous écrivez:

, alors le lien sera à la fois une image et le texte "Home"

§ 3. Liens internes

Des liens internes sont utilisés pour une navigation confortable dans des pages contenant beaucoup de contenu. C'est avec leur aide que j'ai rédigé le «Contenu de la leçon» (voir le début de cette page). Les liens internes sont créés sur le même principe que les liens externes. Seulement dans la valeur de l'attribut href indique "l'ancre" du lien. Anchor est créé par l'attribut name:

Et l '"ancre" me est posée arbitrairement. Il est intéressant de noter ici que tous les navigateurs ne comprennent pas les noms russes d '"ancres". Je recommande donc d'utiliser l'alphabet latin. Texte entre les balises créer une "ancre" est facultatif et, le plus souvent, n’est pas spécifié.

"Je rougeole" se trouve à ces endroits sur la page où l'utilisateur devrait se trouver après avoir cliqué sur le lien.

Comme je l'ai dit plus haut, dans l'attribut href au lieu de l’adresse, le nom de «l’ancre» souhaitée avec le symbole de dièse requis (#) devant lui. Prenons un exemple.

J'ai créé une "ancre" avec le nom zagolovok et l'a placé dans le code de page à côté du titre de cette leçon («Hyperliens en HTML»). Le code d'ancrage est le suivant:

H Le code TML du lien interne ressemblera à ceci:

, et dans le navigateur comme ceci:

Après avoir cliqué sur ce lien, vous serez amené au titre de cette leçon.

Si vous avez remarqué, après avoir cliqué sur le lien interne à l'en-tête, l'URL dans la barre d'adresse du navigateur a changé:

À l'adresse d'origine:

D lien interne ajouté:

Et en utilisant cette fonctionnalité, vous pouvez créer un lien vers un endroit spécifique de la page à partir de n’importe quelle ressource sur Internet! C'est-à-dire, disons que vous avez créé une page avec un article volumineux sur quelque chose (ou posté un grand nombre de photos sur la page) et que vous l'avez marqué avec des liens internes. Étant sur le réseau social VKontakte, vous deviez vous référer non seulement à la page contenant l'article (ou les photos), mais également à un endroit spécifique (ou une photo). En utilisant l'option avec un lien interne dans l'adresse, vous pouvez facilement obtenir ce dont vous avez besoin.

§ 4. Références absolues et relatives

Il y a aussi des liens absolu et parent. Un lien absolu est un lien régulier de la forme:

Mais avec des liens relatifs un peu plus compliqué. Dans ces liens, l'adresse est indiquée soit en ce qui concerne le dossier racine du site (celui dans lequel se trouve la page principale) ou relatif à la page d'origine. De tels liens sont nécessaires, par exemple, si le site est sur un ordinateur personnel. Ou ce n'est pas un site, mais un pointeur de page vers d'autres documents.

Tout d'abord, créons un lien. par rapport au dossier racine site.

D omettez nous devons nous référer à la page klienty.htmlqui se trouve dans un dossier avec la page principale du site. Alors le code du lien relatif prendra la forme:

Supposons maintenant que le dossier zakazy se trouve dans le même dossier que la page principale. et déjà en elle la page klienty.html se trouve alors le code du lien relatif deviendra comme ceci:

T E. Lors de la création d'un lien relatif au dossier racine du site, nous omettons la partie initiale de l'adresse http://www.seoded.ru et laisser le reste. Utiliser la barre oblique "/Au début nécessairement!

Maintenant, envisagez de créer des hyperliens. par rapport à la page d'origine. Disons que nous avons une page price.html (la page d'origine) et à partir de là, vous devez créer un lien vers la page klienty.html Voici les options typiques suivantes:

1. Les pages price.html et klienty.html sont dans un dossier.

Ensuite, le code du lien sera comme ceci:

2. La page klienty.html et le dossier zakazy sont dans le dossier racine du sitepage price.html se trouve dans le dossier zakazy (c.-à-d. la page klienty.html par rapport à la page price.html d’origine est un niveau).

Le code deviendra comme ceci:

Deux points indiquent que vous devez quitter le dossier actuel d'un niveau supérieur.

3. La page klienty.html et le dossier zakazy sont dans le dossier racine du sitedossier mebel se trouve dans le dossier zakazypage price.html se trouve dans le dossier mebel (c.-à-d. la page klienty.html par rapport à la page price.html d’origine est deux niveaux plus haut).

Le code de lien prendra la forme:

C'est-à-dire que chaque niveau est indiqué par deux points et une barre oblique "/».

4. La page price.html (la page d'origine) et le dossier zakazy sont dans le dossier racine du site, klienty.html page se trouve dans le dossier zakazy (c’est-à-dire maintenant, la page klienty.html par rapport à la page price.html d’origine est un niveau plus bas).

Maintenant, le code du lien sera comme ceci:

Dans ce cas, les points et les barres obliques ne sont pas définis.

5. La page price.html (la page d'origine) et le dossier zakazy sont dans le dossier racine du sitedossier mebel se trouve dans le dossier zakazy, klienty.html page se trouve dans le dossier mebel (c'est-à-dire maintenant la page klienty.html par rapport à la page price.html d'origine se trouve deux niveaux ci-dessous).

Le code du lien est le suivant:

6. Dans le dossier racine du site deux dossiers mentent: zakazy et oplata. Klienty.html page se trouve dans le dossier zakazy, la page originale price.html se trouve dans le dossier oplata (c.-à-d. les deux pages sont dans différents dossiers d'un niveau inférieur depuis le dossier racine du site).

Le code de lien sera comme suit:

Par analogie, des liens relatifs sont également créés si les pages se trouvent à des niveaux différents par rapport au dossier racine. Seuls le nombre d'indicateurs de niveau (deux points et une barre oblique) et l'adresse de la page vers laquelle le lien est placé changeront.

§ 5. Lien vers l'email

À créer un lien email, need à la place de l'URL dans la valeur de l'attribut href écrire une adresse e-mail indiquant le protocole (mailto:) Et ensuite, lorsque vous cliquez sur un tel lien, une fenêtre du programme de messagerie s'ouvre avec l'adresse électronique entrée dans le champ «À». En HTML, cela ressemble à ceci:

, et dans le navigateur comme ceci:

§ 6.1 Attribut cible

Par défaut, lorsque vous cliquez sur le lien, le navigateur ouvre une page dans la même fenêtre. Pour changer cela, utilisez l'attribut de balise A cible. Il a les significations suivantes:

_blank - ouvre le lien dans une nouvelle fenêtre (dans les navigateurs modernes dans un nouvel onglet).

_parent - charge le lien dans la fenêtre parente.

_me - ouvre un lien dans la même fenêtre. C'est la valeur par défaut pour tous les liens (autrement dit, si l'attribut cible n'est pas spécifié, cette valeur fonctionnera).

Ce ne sont pas toutes les valeurs d'attribut ciblemais ce sont les plus élémentaires. Un exemple d'utilisation de cet attribut:

§ 7. Conclusion

Ce sont des informations de base sur Création de liens HTML. Cette leçon peut être considérée comme terminée. Et cela suggère que vous avez déjà maîtrisé la plupart des bases du HTML.

Je vous recommande de consulter à nouveau les sections précédentes, puis de créer une page HTML complète dédiée, par exemple, à votre bien-aimée. Selon votre conception et selon vos envies. Ensuite, mettez-le sur un hébergement gratuit (bien sûr, si vous avez un hébergement payant, puis sur celui-ci) et profitez déjà pleinement de votre premier site.

Vous pouvez le montrer à des amis ou à quelqu'un d'autre. En général, sentez-vous comme un propriétaire de site. Ensuite, après une petite fête à l’occasion d’un tel événement, passez à la section suivante, dans laquelle je vais vous parler de la création de tableaux en HTML.

Et ce sera la première étape pour transformer une page personnelle en ressource sérieuse.

Attributs d'hyperlien de base

Dans HTML, les hyperliens peuvent avoir les paramètres suivants:

1. titre - vous permet de créer un texte d'info-bulle qui apparaît lorsque vous survolez un lien hypertexte.

Il peut prendre les valeurs suivantes:

  • _blank - le lien doit être ouvert dans un nouvel onglet,
  • _self - le lien hypertexte en HTML doit être ouvert dans l'onglet en cours. Valeur par défaut
  • _parent - le navigateur devrait charger le lien dans la fenêtre parente,
  • _top - le lien hypertexte est chargé dans tout l'espace de la fenêtre du navigateur (la division en images disparaît dans ce cas).

Ainsi, la réponse à la question «Comment insérer un lien hypertexte en HTML» est souvent posée par les webmasters débutants.

Nous vous souhaitons du succès dans l'apprentissage de la programmation Web!

Regarde la vidéo: Apprendre l'HTML : Chapitre 9, Les liens hypertextes (Octobre 2021).

Pin
Send
Share
Send
Send