Як стварыць спасылку ў HTML-дакуменце. Тэг A - яго сінтаксіс і атрыбуты
- URL або «адрас» старонкі ў Інтэрнэт
- Тэг <A> і яго базавы сінтаксіс
- Абсалютная і адносная спасылка
- Адносная спасылка на каталог, узроўнем вышэй бягучага
- Атрыбуты тэга <A>. Як адкрыць дакумент па спасылцы ў новым акне
- Загаловак спасылкі. Атрыбут title для тэга <A>
- Атрыбут гіперспасылкі nofollow. Забарона перадачы «Траст» сайта па спасылцы
- Унутраная спасылка або якар ўнутры дакумента
- Якар спасылкі - карцінка
- працяг
Спасылкі (або гіперспасылкі) праймаюць Інтэрнэт як крывяносныя пасудзіны. Калi б не было спасылак - не было б Інтэрнэту.
Як стварыць спасылку ў HTML дакуменце і правільна прапісаць яе атрыбуты, што такое URL і як Пошукавыя Сістэмы ставяцца да спасылках - у гэтым чарговым ўроку для пачаткоўцаў вывучаць HTML.
URL або «адрас» старонкі ў Інтэрнэт
Кожны HTML дакумент у Сеткі мае свой «дакладны адрас». Яго называюць «УРЛом», ад англ. URL - Uniform Resource Locator
Структура URL часта бачная ў адраснай радку браўзэра. Ён уключае ў сябе:
- Назва пратакола - http: // або https: //
- Дамен сайта,
- папка або шлях да тэчцы, дзе гэты дакумент знаходзіцца,
- Імя файла (можа быць не заўсёды).
Дзякуючы такому «дакладнаму адрасе» і стала магчымым спасылацца на гэты дакумент з тэксту іншага дакумента.
Тэг <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;}
Гэта ўказанне зрабіць нулявую таўшчыню бардзюра ва ўсіх спасылак-малюнкаў.
працяг
У наступным пасце, я раскажу пра паштовыя спасылках, іх атрыбутах і метадах «засцярогі» ад зласлівых спамераў 🙂