Як стварыць спасылку ў HTML-дакуменце. Тэг A - яго сінтаксіс і атрыбуты

1. URL або «адрас» старонкі ў Інтэрнэт
2. Тэг <A> і яго базавы сінтаксіс
3. Абсалютная і адносная спасылка
4. Адносная спасылка на каталог, узроўнем вышэй бягучага
5. Атрыбуты тэга <A>. Як адкрыць дакумент па спасылцы ў новым акне
6. Загаловак спасылкі. Атрыбут title для тэга <A>
7. Атрыбут гіперспасылкі nofollow. Забарона перадачы «Траст» сайта па спасылцы
8. Унутраная спасылка або якар ўнутры дакумента
9. Якар спасылкі - карцінка
10. працяг

Спасылкі (або гіперспасылкі) праймаюць Інтэрнэт як крывяносныя пасудзіны. Калi б не было спасылак - не было б Інтэрнэту.

Як стварыць спасылку ў HTML дакуменце і правільна прапісаць яе атрыбуты, што такое URL і як Пошукавыя Сістэмы ставяцца да спасылках - у гэтым чарговым ўроку для пачаткоўцаў вывучаць HTML.

URL або «адрас» старонкі ў Інтэрнэт

Кожны HTML дакумент у Сеткі мае свой «дакладны адрас». Яго называюць «УРЛом», ад англ. URL - Uniform Resource Locator

Структура URL часта бачная ў адраснай радку браўзэра. Ён уключае ў сябе:

1. Назва пратакола - http: // або https: //
2. Дамен сайта,
3. папка або шлях да тэчцы, дзе гэты дакумент знаходзіцца,
4. Імя файла (можа быць не заўсёды).

Дзякуючы такому «дакладнаму адрасе» і стала магчымым спасылацца на гэты дакумент з тэксту іншага дакумента.

Тэг <A> і яго базавы сінтаксіс

Спадзяюся, слова «сінтаксіс» вас ужо не палохае 🙂

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"> тэкст спасылкі </a>

Як бачыце, пасля пачатку тэга <A>, павінен ісці абавязковы атрыбут href, які задае адрас дакумента, на які варта перайсці.

Ўнутры самога тэга-кантэйнера <A> варта тэкст (хоць можа быць і карцінка), які і з'яўляецца тэкстам спасылкі. Яго яшчэ называюць «Анкор» або проста - Якар.

Абсалютная і адносная спасылка

У прыкладах вышэй, былі выкарыстаныя абсалютныя спасылкі. Такія, якія ўтрымліваюць поўны URL дакумента.

У некаторых выпадках, атрыбут href не ўтрымлівае поўнага URL з назвай пратаколу і дамена сайта. Калі дакумент, на які вядзе спасылка, знаходзіцца на тым жа сайце - можна выкарыстоўваць адносную спасылку, вядучую ад таго месца, дзе знаходзіцца сам дакумент.

Схема, калі прыменена адносная спасылка

Прыклад: спасылка з дакумента first.html вядзе на файл second.html, які знаходзіцца ў тэчцы news

Адносная спасылка на каталог, узроўнем вышэй бягучага

код:

<a href="../first.html"> гэта - адносная спасылка на файл у каталогу, узроўнем вышэй </a>

Гэтая спасылка вядзе на файл first.html ў «бацькоўскай» каталогу, г.зн. на адзін узровень вышэй.

Спалучэнне ../ паказвае на тэчку, размешчаную на адзін узровень вышэй ад дадзенай пазіцыі файла, з якога робіцца спасылка.

Атрыбуты тэга <A>. Як адкрыць дакумент па спасылцы ў новым акне

Для таго, што б дакумент па спасылцы адкрываўся ў новай ўкладцы браўзэра, трэба выкарыстоўваць атрыбут target = "_ blank"

Атрыбут спасылкі target = "_ blank»

Не злоўжывайце ім. Не трэба рабіць ўнутраныя спасылкі сайта з гэтым атрыбутам. Карыстальніка будуць раздражняць «плодящиеся вокны».

Наогул, з гэтым атрыбутам target - цэлая гісторыя. Ёсць яшчэ цэлы шэраг яго значэнняў, але ўсе яны выкарыстоўваюцца сёння вельмі рэдка.

Гэта таму, што яны прызначаны для працы з сайтам на фрэймах, якія цяпер не папулярных і, з прыходам HTML5, якія бяруць пачатак у мінулае.

Загаловак спасылкі. Атрыбут title для тэга <A>

Яшчэ адзін карысны атрыбут - title = "Тэкст, які тлумачыць куды вядзе гэтая спасылка"

сінтаксіс:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="всплывающая подсказка"> гэта - спасылка з падказкай </a>

Як бачыце, браўзэр выводзіць яго як ўсплывальную падказку. А яшчэ, яго ўлічваюць і пошукавыя сістэмы.

Падказка з атрыбуту для спасылкі title

Атрыбут гіперспасылкі nofollow. Забарона перадачы «Траст» сайта па спасылцы

Ёсць яшчэ адзін неадназначны атрыбут для спасылак rel = "nofollow"

Ён кажа пошукавыя сістэмы, што дакумент па спасылцы, магчыма, не заслугоўвае даверу. Пры гэтым паказчыкі даверу ( «Траст») з сайта Крыніцы, не перадаюцца на сайт па спасылцы.

Тэма пра «Траст» і спасылачныя ранжыраванні яшчэ наперадзе, але калі коратка, то «лёс» сайтаў у выдачы пошукавых сістэм залежыць таксама і ад колькасці спасылак, якія вядуць на гэты сайт. Чым іх больш, чым больш аўтарытэтныя сайты спасылаюцца - тым больш давер да сайта па спасылцы.

У некаторых выпадках, варта «экраніровать» спасылкі гэтым атрыбутам. Напрыклад, калі вы пішыце адмоўны водгук пра які-небудзь сэрвісе.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> дрэнны сайт </a>

Унутраная спасылка або якар ўнутры дакумента

У вялікіх па аб'ёме тэкстах, часта патрабуецца ўстаноўка так званых «якароў» у лагічных частках дакумента. Потым, менавіта на гэтае месца, можна спаслацца.

Самы просты спосаб выкарыстання - стварэнне лакальнага зместа з гіперспасылак, якія вядуць на гэтыя якара. Такія зместа звычайна змяшчаюць у самым пачатку артыкула.

Пры стварэнні такога якара замест атрыбуту href выкарыстоўваюць атрыбут name

Сінтаксіс пры стварэнні якара:

<a name="top"> </a>

Пры стварэнні спасылкі, у канцы URL дадаюць праз знак # - імя «якара»:

<P> <a href="#top"> Наверх </a> </ p>

Пераход будзе дакладна да гэтага месца, г.зн. браўзэр змесціць гэта месца ў сваёй верхняй бачнай часткі.

Часта, у доўгіх дакументах, у самым нізе ставяць такую ​​спасылку «Наверх».

... здзейсніўшы падарожжа па свеце духмяных зерня, знайшлі самыя высакаякасныя з тых, якімі славяцца Афрыка, Азія, Цэнтральная і Паўднёвая Амерыка. Таму сёння ў кавярнях брэнда Coffee bean вы сустрэнеце лепшыя кававыя гатунку ад прызнаных сусветных вытворцаў.

? наверх ?

З іншага дакумента можна таксама выйсці да гэтага месца, калі дадаць у канцы URL праз знак # имя_якоря

<a href="http://domen-saita.ru/dokument.html#top"> тэкст спасылкі вядзе да якара "top" у гэтым дакуменце </a>

Якар спасылкі - карцінка

Спасылкай можа быць і любая карцінка.

код:

<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg "width =" 100 "height =" 131 "/> </a>

Па змаўчанні, спасылкі падкрэсліваюцца браўзэрам суцэльны сіняй рысай, а спасылкі-карцінкі набываюць сінюю рамку.

Спасылкі-карцінкі набываюць сінюю рамку

Што б пазбавіцца ад яе - у файл CSS для сайта дадаюць простае правіла:

a {border: 0px;}

Гэта ўказанне зрабіць нулявую таўшчыню бардзюра ва ўсіх спасылак-малюнкаў.

працяг

У наступным пасце, я раскажу пра паштовыя спасылках, іх атрыбутах і метадах «засцярогі» ад зласлівых спамераў 🙂