<
  • Главная
Статьи

HTML-спасылкі

  1. 1. Структура спасылкі
  2. 2. Абсалютны і адносны шлях
  3. 2.1. абсалютны шлях
  4. 2.2. адносны шлях
  5. 3. Якары
  6. 4. Як зрабіць малюнак-спасылку
  7. 5. Як зрабіць спасылку на тэлефонны нумар, скайп або адрас электроннай пошты
  8. 6. Атрыбуты спасылак

HTML-спасылкі ствараюцца з дапамогай элементаў <a>, <area> і <link>. Спасылкі ўяўляюць сабой сувязь паміж двума рэсурсамі, адным з якіх з'яўляецца бягучы дакумент.

Спасылкі можна падзяліць на дзве катэгорыі:
спасылкі на знешнія рэсурсы - ствараюцца з дапамогай тэга <link> і выкарыстоўваюцца для пашырэння магчымасцяў бягучага дакумента пры апрацоўцы браўзэрам;
гіперспасылкі - спасылкі на іншыя рэсурсы, якія карыстальнік можа наведаць або загрузіць.

1. Структура спасылкі

Гіперспасылкі ствараюцца з дапамогай парнага тэга <a> </a>. Ўнутр тэга змяшчаецца тэкст, які будзе адлюстроўвацца на вэб-старонцы. Тэкст спасылкі адлюстроўваецца ў браўзэры з падкрэсьліваньнем, колер шрыфта - сіні, пры навядзенні на спасылку курсор мышы мяняе выгляд.

Абавязковым параметрам тэга <a> з'яўляецца атрыбут href, які задае URl-адрас вэб-старонкі.

<a href="http://site.ru"> паказальнік спасылкі </a>

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

Адрасная частка спасылкі складаецца з URl. URl (Uniform Resource Locator) - уніфікаваны адрас рэсурсу. Пры стварэнні адрасоў для падзелу слоў паміж сабой рэкамендуецца выкарыстоўваць злучок, а не сімвал падкрэслення. У агульным выглядзе URl які мае наступны фармат:

метад доступу: // імя сервера: порт / шлях

Метад доступу, ці пратакол, ажыццяўляе абмен дадзенымі паміж працоўнымі станцыямі ў розных сетках. Найбольш распаўсюджаныя пратаколы перадачы дадзеных:

file забяспечвае чытанне файла з лакальнага дыска:

file: /gallery/pictures/summer.html

http прадастаўляе доступ да вэб-старонцы па пратаколе HTTP:

http://site.ru/

https - спецыяльная рэалізацыя пратаколу HTTP, якая выкарыстоўвае шыфраванне (як правіла, SSL ці TLS)

https://site.ru/

ftp ажыццяўляе запыт да FTP-серверу на атрыманне файла:

ftp: // pgu / directory / library

mailto запускае сеанс паштовай сувязі з паказаным адрасатам і хастом:

mailto: [email protected]

Імя сервера апісвае поўнае імя машыны ў сеткі, напрыклад, site.ru. Калі імя сервера не пазначана, то спасылка лічыцца лакальнай, г.зн. яна ставіцца да той жа машыне, на якой знаходзіцца HTML-дакумент, які змяшчае спасылку.

Нумар порта ТСР, на якім функцыянуе вэб-сервер. Ўяўляе сабой лік, якое неабходна паказваць, калі метад патрабуе нумар порта (асобныя сервера могуць мець свой адметны нумар порта). Калі порт не паказаны, па змаўчанні выкарыстоўваецца порт 80. Стандартнымі партамі з'яўляюцца:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP

Шлях ўтрымлівае імя папкі, у якой знаходзіцца файл.

2. Абсалютны і адносны шлях

Калі ў спасылцы паказваецца толькі імя файла, браўзэр мяркуе, што файл знаходзіцца ў той жа тэчцы, што і дакумент, які змяшчае спасылку. На практыцы вэб-сайты ўтрымліваюць сотні дакументаў, якія размяшчаюць у асобныя папкі, каб імі было лягчэй кіраваць. Каб стварыць спасылку на файл, які знаходзіцца па-за тэчкі, якая змяшчае бягучы дакумент, неабходна ўказаць размяшчэнне файла або шлях. HTML падтрымлівае два выгляду шляхі: абсалютны і адносны.

HTML падтрымлівае два выгляду шляхі: абсалютны і адносны

Мал. 1. Прыклад структуры тэчак

2.1. абсалютны шлях

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

Існуе два выгляду запісу абсалютнага шляху - з указаннем пратаколу і без яго:

http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

Калі файл знаходзіцца ў каранёвай тэчцы, то шлях да файла будзе наступным:

http://site.ru/index.html

Пры адсутнасці імя файла будзе загружацца вэб-старонка, якая зададзена па змаўчанні ў наладах вэб-сервера (так званы індэксны файл).

http://site.ru/

Звычайна ў якасці індэкснага файла выступае дакумент з імем index.html. Наяўнасць завяршальнага слеша / азначае, што зварот ідзе да тэчцы, калі яго няма - напрамую да файла.

2.2. адносны шлях

Адносны шлях апісвае шлях да згаданага дакумента адносна бягучага. Шлях вызначаецца з улікам месцазнаходжаньня вэб-старонкі, на якой знаходзіцца спасылка. Адносныя спасылкі выкарыстоўваюцца пры стварэнні спасылак на іншыя дакументы на адным і тым жа сайце. Калі браўзэр не знаходзіць у спасылцы пратакол http: //, ён выконвае пошук названага дакумента на тым жа серверы.

Адносны шлях змяшчае наступныя кампаненты:
1) тэчка (імя тэчкі, якая паказвае шлях да файла);
2) файл (імя файла).

Шлях для адносных спасылак мае тры спецыяльныя абазначэнні:
/ Паказвае на каранёвай і кажа пра тое, што трэба пачаць шлях ад каранёвага каталога дакументаў і ісці ўніз да наступнай тэчкі
./ паказвае на бягучую тэчку
../ падняцца на адну тэчку (дырэкторыю) вышэй

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

3. Якары

Якара, ці ўнутраныя спасылкі, ствараюць пераходы на розныя раздзелы бягучай вэб-старонкі, дазваляючы хутка перамяшчацца паміж часткамі. Гэта аказваецца вельмі зручным у выпадку, калі на старонцы занадта шмат тэксту. Унутраныя спасылкі таксама ствараюцца пры дапамозе тэга <a> з розніцай у тым, што атрыбут href зьмяшчае назву паказальніка - так званы якар, а не URl-адрас. Перад імем паказальніка заўсёды ставіцца знак #.

Наступны разметка створыць змест з хуткімі пераходамі на адпаведныя раздзелы:

<H1> Часы года </ h1> <h2> Змест </ h2> <a href="#p1"> Лета </a> <! - ствараем якар, паказаўшы #id элемента -> <a href = " # p2 "> Восень </a> <a href="#p3"> Зіма </a> <a href="#p4"> Вясна </a> <p id =" p1 "> ... </ p> <! - дадаем адпаведны id элементу -> <p id = "p2"> ... </ p> <p id = "p3"> ... </ p> <p id = "p4" > ... </ p>

Калі трэба зрабіць спасылку з адной старонкі сайта на пэўны раздзел іншай старонкі, то неабходна задаць id для гэтага падзелу старонкі, а затым дадаць яго да абсалютнага адрасе спасылкі:

<Th id = "about-color"> color </ th> <a href="https://html5book.ru/css-shrifty/#about-color" class="site" target="_blank"> color < / a>

4. Як зрабіць малюнак-спасылку

Каб зрабіць клікабельнасць малюнак, неабходна змясціць элемент <img> ўнутр тэга <a>. Каб спасылка адкрывалася ў іншым акне, трэба дадаць атрыбут target = "_ blank" для спасылкі.

<a href="http://www.fast-torrent.ru/film/gran-za-granyu-tv.html" target="_blank"> <img src = "// html5book.ru/wp-content/ uploads / 2014/07 / Fringe.jpg "alt =" Fringe "> </a> <a href=http://www Мал. 2. Малюнак-спасылка

5. Як зрабіць спасылку на тэлефонны нумар, скайп або адрас электроннай пошты

У спасылак з'явіліся новыя магчымасці - па кліку можна не толькі пераходзіць на іншыя старонкі і спампоўваць файлы, але і здзяйсняць званкі на тэлефоны, адпраўляць паведамленні або тэлефанаваць па скайпе.

спасылка на тэлефонны нумар <a href="tel:+74951234567"> +7 (495) 123-45-67 </a> спасылка на адрас электроннай пошты <a href="mailto:[email protected]"> example @ mail.ru </a> спасылка на скайп (патэлефанаваць) <a href="skype:имя-пользователя?call"> Skype </a> спасылка на скайп (адкрыць чат) <a href = "skype: імя-карыстальніка? chat "> Skype </a> спасылка на скайп (дадаць у спіс кантактаў) <a href="skype:имя-пользователя?add"> Skype </a> спасылка на скайп (адправіць файл) <a href =" skype: імя-карыстальніка? sendfile "> Skype </a>

6. Атрыбуты спасылак

Элемент <a> падтрымлівае глабальныя атрыбуты і ўласныя.

Табліца 1. Атрыбуты тэга <a> Навык Апісанне, якое прымаецца значэнне download Дапаўняе атрыбут href і паведамляе браўзэру, што рэсурс павінен быць загружаны ў момант, калі карыстальнік пстрыкае па спасылцы, замест таго, каб, напрыклад, папярэдне адкрыць яго (як PDF-файл ). Задаючы імя для атрыбуту, мы такім чынам задаем імя загружалася аб'екту. Дазваляецца выкарыстоўваць атрыбут без ўказанні яго значэння:

<a href="/images/logo.png" download> <img src = "/ images / logo.png" alt = "logo"> </a>

<a href="/images/logo.png" download="logo"> <img src = "/ images / logo.png" alt = "logo"> </a>

<a href="files/20022014.pdf" download="Отчет Люты 2014.pdf"> Загрузіць справаздачу за люты 2014 </a>

href Значэннем атрыбуту з'яўляецца URL-адрас дакумента, на які паказваецца спасылка. hreflang Вызначае мова звязанага вэб-дакумента. Выкарыстоўваецца толькі разам з атрыбутам href. Якія прымаюцца значэння - абрэвіятура, якая складаецца з пары літар, якія абазначаюць код мовы , Напрыклад:

<a href="http://www.anysite.ru" hreflang="en"> Anysite </a>

media Вызначае, для якіх тыпаў прылад файл будзе аптымізаваны. Значэннем можа быць любы медыя-запыт. ping Адсочвае URL-адрасы рэсурсаў, па якіх пераходзіў карыстальнік. rel Дапаўняе атрыбут href інфармацыяй пра адносіны паміж бягучых і звязаным дакументам. Якія прымаюцца значэння:
alternate - спасылка на альтэрнатыўную версію дакумента (напрыклад, друкаваную форму старонкі, пераклад ці люстэрка).
author - спасылка на аўтара дакумента.
bookmark - пастаянны URL-адрас, які выкарыстоўваецца для закладак.
help - спасылка на даведку.
license - спасылка на інфармацыю аб аўтарскіх правах на дадзены вэб-дакумент.
next / prev - паказвае сувязь паміж асобнымі URL. Дзякуючы гэтай разметцы Google можа вызначыць, што колькасць названых старонак звязана ў лагічнай паслядоўнасці.
nofollow - забараняе пошукавай сістэме пераходзіць па спасылках на гэтай старонцы або па канкрэтнай спасылцы.
noreferrer - паказвае, што пераходзе па спасылцы браўзэр не павінен пасылаць загаловак HTTP-запыту (Referrer), у які запісваецца інфармацыя аб тым, з якой старонкі прыйшоў наведвальнік сайта.
prefetch - паказвае, што мэтавай дакумент павінен быць кэшаваць, г.зн. браўзэр ў фонавым рэжыме загружае змесціва старонкі да сябе ў кэш.
search - паказвае, што мэтавай дакумент змяшчае інструмент для пошуку.
tag - паказвае ключавое слова для бягучага дакумента. target Паказвае на тое, у якім акне павінен адкрывацца дакумент, да якога вядзе спасылка. Прымае наступныя значэння:
_self - старонка загружаецца ў бягучае акно;
_blank - старонка адкрываецца ў новым акне браўзэра;
_parent - старонка загружаецца ць фрэйм-з бацькоў;
_top - старонка загружаецца ў поўнае акно браўзэра. type Паказвае Тып MIME файлаў спасылкі, г.зн. пашырэнне файла. На дадзены момант носіць больш даведачную інфармацыю.

Ru </a> спасылка на скайп (патэлефанаваць) <a href="skype:имя-пользователя?
Call"> Skype </a> спасылка на скайп (адкрыць чат) <a href = "skype: імя-карыстальніка?
Chat "> Skype </a> спасылка на скайп (дадаць у спіс кантактаў) <a href="skype:имя-пользователя?
Add"> Skype </a> спасылка на скайп (адправіць файл) <a href =" skype: імя-карыстальніка?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью