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

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 підтримує два види шляху: абсолютний і відносний.

Мал. 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> Мал. 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) — поднятие позиций сайта в результатах... 
    Читать полностью