La principale caractéristique d'un document HTML est la présence hyperliens(ou simplement des liens) vers d'autres documents, sites, fichiers, images, etc. C'est la possibilité d'insérer des liens dans des pages vers des objets extérieurs qui a rendu Internet si populaire et si pratique à utiliser. Par conséquent, lors de la création de votre site Web, n’oubliez jamais la « magie » des liens.

Dans cette leçon, nous parlerons de comment créer un lien au site, à sa page ou à son fichier séparé. Vous apprendrez comment modifier le texte d'un lien, comment l'ouvrir dans une nouvelle fenêtre, comment créer un lien vers une image, ce que sont les liens externes et internes, et bien plus encore. De plus, vous disposez déjà d'informations sur l'utilisation des liens, que nous avons abordées dans les leçons précédentes (par exemple, nous avons expliqué comment changer la couleur d'un lien).

Dans l’ensemble, ce tutoriel rendra votre compréhension de la création de liens complète et suffisante. Vous comprendrez comment créer un lien hypertexte en HTML et pourquoi. Et vous apprendrez à contrôler ses propriétés.

Termes

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

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

Pour ne pas laisser libre cours à mes pensées, je vais tout vous montrer avec un exemple.

Dans le navigateur, nous verrons 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 adresse l'objet à référencer. Passons maintenant à la partie principale de la leçon.

§ 2. Création de liens externes

Les liens diffèrent les uns des autres par externe Et interne, ainsi que sur texte Et graphique. Les liens externes mènent en dehors de la page html, les liens internes mènent à différentes parties le même pages. Les liens texte sont du texte (par défaut, il est surligné en bleu et souligné) et les liens graphiques contiennent une 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 ancre). Regardons-le de plus près.

Pour créer un lien externe vers un site, une page ou un fichier, utilisez l'attribut tag - href. La valeur de cet attribut est URL site, page ou fichier (nous en avons parlé plus haut). Entre les balises se trouve la partie visible du lien (ancre de lien), c'est-à-dire ce que l'on voit sur l'écran du navigateur. L'ancre du lien peut être soit du texte brut (lien texte), soit une image graphique (lien image). Un lien d'image est créé en insérant une balise familière entre les balises et . En général, la syntaxe de création d'un lien ressemble à ceci :

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

http://www.seoded.ru/"> Page d'accueil du site internet

Dans le 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 de . De manière générale, vous pouvez appliquer au texte des liens les mêmes règles qu'au texte principal de la page, c'est à dire le surligner en gras, en italique, utiliser des titres, etc.

§ 2.1 Liens graphiques (liens images)

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

Et le navigateur affichera :

Par défaut, le navigateur entoure l'image d'un lien graphique avec un cadre. Si cela n'est pas souhaitable, alors l'attribut frontièreétiqueter IMG vous devez attribuer la valeur 0 :

bordure="0">

Page d'accueil

§ 3. Liens internes

Les liens internes sont utilisés pour naviguer confortablement dans des pages contenant beaucoup de contenu. C'est avec leur aide que j'ai réalisé le « Contenu des cours » (voir au début de cette page). Les liens internes sont créés selon le même principe que les liens externes. Uniquement dans la valeur d'attribut href l’« ancre » du lien est indiquée. "Anchor" est créé par l'attribut nom:

name="nom de l'ancre">texte

Et le nom de « l’ancre » est fixé arbitrairement. Il convient de dire ici que tous les navigateurs ne comprennent pas les noms russes des « ancres », je recommande donc d'utiliser l'alphabet latin. Le texte entre les balises pour créer une « ancre » est facultatif et, le plus souvent, non spécifié.

« Je suis la rougeole » se trouve aux endroits de la page où l'utilisateur doit se rendre après avoir cliqué sur le lien.

Comme je l'ai dit plus haut, dans l'attribut href d'un lien interne, au lieu d'une adresse, le nom de « l'ancre » souhaitée est indiqué avec le symbole dièse obligatoire ( # ) devant lui. Regardons cela avec un exemple.

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

nom="zagolovok">

href="#zagolovok">Vers le titre

Et dans le navigateur comme ceci :

Si vous avez remarqué qu'après avoir cliqué sur le lien interne vers le titre, l'URL dans la barre d'adresse du navigateur a changé :

À l'adresse d'origine :

http://www..html

http://www..html#zagolovok

Et grâce à cette fonctionnalité, vous pouvez créer un lien vers un emplacement spécifique de la page à partir de n'importe quelle ressource sur Internet ! Autrement dit, disons que vous avez créé une page avec un long article sur quelque chose (ou que vous avez publié un grand nombre de photographies sur la page) et que vous l'avez marquée avec des liens internes. Dans , vous deviez créer un lien non seulement vers la page contenant l'article (ou les photographies), mais vers un endroit spécifique de celui-ci (ou une photographie spécifique). En utilisant l'option avec un lien interne dans l'adresse, vous pouvez facilement réaliser ce dont vous avez besoin.

§ 4. Références absolues et relatives

Page d'accueil

Mais avec les liens relatifs, c'est un peu plus compliqué. Dans ces liens, l'adresse est indiquée soit relativement le dossier racine du site (celui dans lequel se trouve la page principale), ou relatif à la page source. De tels liens sont nécessaires, par exemple, si le site se trouve sur votre ordinateur personnel. Or ce n'est pas un site, mais une page pointant vers d'autres documents.

Laissons cela de côté, nous devons créer un lien vers la page cliente.html quels mensonges dans un dossier avec la page principale du site. Ensuite, le code du lien relatif ressemblera à :

/klienty.html">Clients

Supposons maintenant que dans le même dossier que la page principale se trouve dossier zakazy et déjà dedans se trouve la page klienty.html Ensuite, le code du lien relatif ressemblera à ceci :

/zakazy/klienty.html">Clients

Voyons maintenant la création d'hyperliens par rapport à la page originale. Disons que nous avons une page prix.html(page source) et à partir de celle-ci, vous devez créer un lien vers la page cliente.html Il existe les options typiques suivantes :

1. Les pages price.html et clienty.html se trouvent dans un dossier.

klienty.html">Clients




2. dans le dossier racine du site, prix de la page.html est dans le dossier zakazy un niveau plus haut).

Le code ressemblera à ceci :

../klienty.html">Clients

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




3. La page klienty.html et le dossier zakazy se trouvent dans le dossier racine du site, dossier mebel est dans le dossier zakazy, prix de la page.html est dans le dossier mebel(c'est-à-dire que la page klienty.html par rapport à la page price.html d'origine se trouve deux niveaux plus haut).

../../klienty.html">Clients

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




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

zakazy/klienty.html">Clients

Dans ce cas, les points et les barres obliques ne sont pas utilisés.




5. La page price.html (page d'origine) et le dossier zakazy se trouvent dans le dossier racine du site, dossier mebel est dans le dossier zakazy, page client.html est dans le dossier mebel(c'est-à-dire que la page klienty.html est désormais relative à la page price.html d'origine se trouve deux niveaux en dessous).

zakazy/mebel/klienty.html">Clients




6. Dans le dossier racine du site il y a deux dossiers: zakazy et oplata. Page client.html est dans le dossier zakazy, prix de la page originale.html est dans le dossier oplata(c'est-à-dire que les deux pages se trouvent dans différents dossiers un niveau plus basà partir du dossier racine du site).

../zakazy/klienty.html">Clients

§ 5. Lien vers l'e-mail

Pour créer un lien vers un e-mail, nécessaire à la place de l'URL dans la valeur de l'attribut href rédiger une adresse email indiquant le protocole ( mail à :). Et puis lorsque vous cliquez sur un tel lien, une fenêtre du programme de messagerie s'ouvrira avec l'adresse e-mail saisie dans le champ « À ». En code HTML, cela ressemble à ceci :

mail à : [email protégé]">Mon courrier

Et dans le navigateur, c'est comme ça.

Lien hypertexte est une indication au navigateur à quel objet à l'intérieur ou à l'extérieur du document HTML il doit accéder. À l'aide d'hyperliens, les utilisateurs peuvent passer d'une page à une autre, télécharger des fichiers, etc. Un fragment de texte ou une image (fichier graphique) peut être conçu comme un hyperlien. Lorsqu'une page Web est affichée dans une fenêtre de navigateur, le lien texte est généralement surligné en bleu et souligné. Cependant, ce n'est pas toujours le cas. Pour se rendre à l'endroit pointé par un lien, il suffit à l'utilisateur de cliquer sur son texte.

Pour créer un lien hypertexte vous devez utiliser des balises Et, définissant pour la balise attribut HREF. Sa valeur doit être l'URL vers laquelle pointe le lien. Le texte du lien est placé entre les balises Et.

Si la page Web vers laquelle pointe le lien se trouve sur un autre site, alors la valeur de l'attribut HREF doit être une URL complète incluant le nom du protocole ; ces liens sont appelés liens externes. Si le lien hypertexte pointe vers une autre page du même site, alors pour rechercher un document il suffit de préciser uniquement un chemin relatif ; un tel lien est appelé lien interne.

Un lien hypertexte peut pointer vers un emplacement spécifique dans une page si une balise d'ancrage y est d'abord intégrée. Les balises sont également utilisées pour définir une ancre Et, mais au lieu d'un attribut HREF définir l'attribut NOM, dont la valeur doit être le nom de l'ancre. Il peut être composé de lettres et de chiffres, mais ne doit pas contenir d'espaces. S'il y a plusieurs étiquettes sur une page, elles doivent toutes porter des noms différents.

Pour créer un lien vers l'ancre installée dont vous avez besoin dans la balise mettre son nom à la fin de l'URL après le nom du document, séparé par # . Symbole # signifie qu'il est suivi du nom de la balise et non du nom du fichier.

[email protégé]

Voici à quoi ressemblera le document HTML une fois lu par le navigateur :

Les nouvelles versions des programmes standards pour le système d'exploitation Windows et les pilotes sont disponibles sur le site Web de Microsoft.

Vous pouvez utiliser les documents publiés dans ce document texte.

Dans cet exemple, le mot « Microsoft » est contenu dans la balise de lien hypertexte externe et le texte "page d'accueil du site"- dans la balise de lien interne. Texte "à la fin de cette page" placé dans la balise de lien d'ancrage, et "dans ce document texte"- dans une balise hyperlien avec un attribut HREF, dans lequel nous avons spécifié un lien non pas vers une page Web, mais vers un document texte enregistré dans le même dossier que le document HTML actuel. Texte " [email protégé] " se trouvent dans la balise décrivant le label d'ancrage, et dans l'attribut HREF adresse e-mail fournie.

Si un visiteur de la page utilise un lien externe Microsoft, la page s'ouvrira à l'adresse : http://www.microsoft.com/. Après avoir cliqué sur un lien hypertexte "page d'accueil du site" La page principale du site s'ouvrira. Cliquer sur un lien interne dans un document texte ouvrira une fenêtre avec le document texte texte.doc contenu dans le dossier courant. Si vous utilisez le lien d'ancrage à la fin de cette page, l'image de la page actuelle se déplacera de manière à ce que le texte de l'étiquette " [email protégé] ", auquel l'ancre est associée, sera placée dans la partie visible du document à l'écran.

Placez le texte " [email protégé] " est un lien hypertexte, à l'aide duquel l'utilisateur pourra envoyer une lettre en utilisant l'e-mail configuré sur l'ordinateur à celui spécifié dans l'attribut HREF adresse - [email protégé] .

Regardons un autre exemple de création de liens hypertextes textuels. Supposons que deux documents HTML soient enregistrés dans un certain dossier, décrivant deux domaines du travail de l'entreprise - 1.html Et 2.html.

Créons une liste d’hyperliens dont chacun illustre un des domaines de travail de l’entreprise :

Notre production

Nos clients

Résultat:

Notre production

Nos clients

Dans cet exemple, les balises de lien hypertexte sont contenues dans les balises de titre de premier niveau. Les textes des hyperliens seront situés sur des lignes distinctes et conçus comme des titres de premier niveau.

Par défaut, les hyperliens texte sont affichés en bleu et soulignés, et s'ils ont déjà été utilisés, en rouge foncé. Pour changer ces couleurs, ajoutez les attributs correspondants dans la balise : . Cela signifie qu'après le premier chargement de la page, tous les hyperliens seront violets et si un visiteur en utilise un, la couleur de son texte deviendra jaune. Ceci est pratique lorsqu'il y a de nombreux liens sur la page, et que le visiteur souhaite les visualiser un par un : alors substituer une couleur différente aux hyperliens visités permet de systématiser cette visualisation.

Bonne journée à tous, mes chers amis et lecteurs. J'espère que vous avez décidé de participer à mon concours et que vous écrivez déjà sur votre parcours de blogueur. Eh bien, j'aimerais continuer notre étude du langage HTML et aujourd'hui je voudrais vous parler de l'un des composants les plus importants, à savoir les hyperliens.

Oui, sans ces hyperliens, Internet ne serait pas aussi pratique. Non, je mens. Ce ne serait pas du tout facile de s’y retrouver. Pouvez-vous imaginer Internet sans eux ? Personnellement, non.

Et aujourd'hui, nous allons apprendre à insérer un lien hypertexte en HTML. Mais d’abord, je voudrais vous demander : savez-vous ce qu’est un lien hypertexte et en quoi il diffère d’un lien classique ? Tout est en fait simple ici : un lien est une simple information qui renvoie à un document. En même temps, vous ne pouvez pas cliquer sur ce texte (rien ne se passera), mais vous savez où chercher des informations.

Exemple : vous pouvez découvrir comment mettre en valeur les cheveux dans Photoshop sur //site/adobe-photoshop/kak-vydelit-volosy/

Un lien hypertexte est le même texte, seule son essence est que vous pouvez cliquer sur ce texte et accéder à la page, au site ou à tout autre objet souhaité. De plus, le texte lui-même peut être n'importe quoi, tandis que l'adresse est écrite séparément à l'intérieur et peut être complètement différente. Quoi qu'il en soit, dans le langage courant, ils sont encore simplement appelés liens. Voici un exemple de lien hypertexte :

Vous pouvez découvrir comment mettre correctement en valeur les cheveux dans Photoshop dans l'un de mes tutoriels.

De toute façon. Bonne théorie. Passons maintenant à la pratique et voyons lesquels sont responsables de toutes ces questions.

La balise appariée est responsable du lien hypertexte, mais en elle-même elle ne représente rien. Cela va toujours en conjonction avec un attribut. Et dans ce cas, nous devons constamment écrire ce même href. Dans la valeur de l'attribut, nous mettons le lien vers la ressource souhaitée elle-même. Et dans le contenu lui-même, nous écrivons le texte lui-même, qui doit devenir cliquable (fonctionner lorsqu'on clique). Regardez l'exemple et je pense que vous comprendrez tout.

Moteur de recherche Yandex

Comme vous le comprenez, dans cet exemple, j'ai écrit que lorsque vous cliquez sur un morceau de texte "Moteur de recherche Yandex", une personne sera dirigée vers l'adresse écrite dans la valeur de l'attribut href.

Je pense que beaucoup d’entre vous savent qu’il existe des liens internes et externes. Les liens internes sont effectués au sein d'un seul répertoire, c'est-à-dire le site, et les liens externes mènent à une ressource tierce. Et maintenant, je vais vous montrer comment faire les deux.

Transitions internes

Fichier dans le même dossier

Mais une telle transition fonctionnera à condition que le fichier vers lequel vous créez un lien se trouve dans le même dossier que le fichier dans lequel vous placez le lien. Pour les autres options, tout est un peu différent.

Fichier dans un autre dossier

1. Ouvrez le fichier pushkin.html dans Notepad++
2. Trouvez maintenant le mot photo et enveloppez-le dans des balises<un href> .
3. Maintenant attention ! Dans la valeur de l'attribut, nous spécifions le chemin relatif au fichier en cours d'édition, c'est-à-dire pushkin.html lui-même. Vous devriez vous retrouver avec quelque chose comme ceci :

Qu'avons-nous fait maintenant ? Et nous avons fait ce qui suit : puisque le chemin d'accès à la photo se trouve dans un dossier img séparé, qui se trouve dans le même dossier que le fichier pushkin.html, alors dans la valeur de l'attribut, nous devons d'abord écrire le nom du dossier, et puis par une barre oblique (/) le nom complet du document (dans notre cas des photographies).

Maintenant, enregistrez et exécutez le fichier pushkin.html dans votre navigateur. Vous verrez que le mot « Photo » est devenu surligné en bleu et est devenu cliquable, ce qui signifie qu'en cliquant sur ce lien, nous serons redirigés vers le fichier fofo.jpg, qui se trouve dans le dossier img.

Alors comment ? Tout est clair? Si quelque chose arrive, n’hésitez pas à demander.

Transitions externes

Et bien sûr, nous ne pouvons manquer de mentionner des liens externes, après avoir cliqué sur lesquels nous serons redirigés vers un tout autre site. Mais il n'y a rien de compliqué ici. Le fait est que vous mettez l'adresse complète du site ou de la page Web dans la valeur href. J'ai montré un exemple avec Yandex ci-dessus. Mais voici un autre exemple :

J'étudierai pour devenir maître des projets sociaux.

Ici, nous arrivons à une page spécifique d’un site spécifique.

Ouvre dans une nouvelle fenêtre

Par défaut, lorsque vous cliquez sur un lien, le document s'ouvre dans la même fenêtre que votre page, c'est à dire votre page va se fermer brusquement. Et ce n'est pas bon. En particulier, pour les projets de contenu promus ou les blogs, il est recommandé que lorsque vous cliquez sur un lien, le document s'ouvre dans une nouvelle fenêtre ou un nouvel onglet sans fermer votre page.

L'attribut cible avec la valeur « _blank » nous y aidera. Il n'y a rien de compliqué ici. Il vous suffira de l'insérer dans la balise d'ouverture après la valeur de l'attribut href. Prenons cet extrait du fichier lukomorye.html, où nous avons fait un lien vers la page pushkin.html, ce n'est que maintenant que nous écrirons cet attribut même. Ça devrait ressembler à ça:

Extrait du poème Ruslan et Lyudmila (Auteur - A.S. Pouchkine)