Як поставити якір HTML. HTML-якір на сторінці

Як поставити якір HTML. HTML-якір на сторінці

Інтернет давно став невід 'ємною частиною повсякденного життя. Люди із задоволенням заходять на різні сайти, щоб почитати новини, обмінятися фотографіями, провести деякі час за переглядом кумедних відеороликів або зробити покупки.

І незважаючи на те, що настає ера мобільних технологій і додатків, техніки створення красивих і захоплюючих увагу веб-сторінок продовжують вдосконалюватися. Мало користувачів усвідомлюють, що ховається за лаштунками їхнього улюбленого браузера і що відбувається, коли вони оплачують на сайті покупки за допомогою своєї кредитної картки. А насправді за всім цим стоять тисячі рядків коду, який розвивався і вдосконалювався роками, щоб забезпечити максимально зручний і приємний досвід від використання веб-сервісу. Якір HTML, гіперпосилання, розмітка, назви - ці та багато інших поняття будуть далі описані в цій статті.

Основа веб-сторінки

Для того щоб створювати сайти і сторінки в Інтернеті, які могли б однаково відкриватися і виглядати в десятках різних браузерів на декількох платформах одночасно, необхідно було створити єдину специфікацію для подібного роду документів. Цією специфікацією став HTML (від англ. hyperText Markup Language).
У перекладі це означає "мова гіпертекстової розмітки". І цей термін дуже точно описує своє призначення. Структура HTML-документа не описує сам вміст веб-сторінки - вона лише "розмічає" різні ділянки, надаючи їм певні атрибути або властивості. Така розмітка дозволяє документу виглядати однаково від браузера до браузера, а також є ключем до існуючих нині протоколів передачі даних у Глобальній павутині - HTTP і HTTPS.

Структура документа HTML

В основі будь-якого HTML-документа лежить парна кількість тегів. Це спеціальні позначки, які надають вмісту всередині себе певні властивості. Ключовою особливістю тегів є те, що вони обов 'язково ставляться парно - перший тег є "відкриваючим", а за ним завжди повинен слідувати "закриваючий".

Таким чином, браузер точно знає, які межі застосування атрибутів, які задаються тегом. Однак тег може бути порожнім (не містить у собі жодного контенту). Прикладом останнього є елемент перенесення рядка. Не обов 'язково закривати теги, які не містять тексту або інших даних. Ви можете використовувати теги, щоб додати тексту або певний колір, або стиль, або вставити в документ спеціальні елементи (таблиці, медіа-файли, посилання).

Якір HTML та посилання в документі

Щоб дати відвідувачам сайту можливість навігації між різними сторінками або ж у межах однієї сторінки, можна використовувати посилання. Для пересування у межах одного сайту або декількох гіперпосилань. Зазвичай вони служать для зв 'язку між двома абсолютно різними за своїм призначенням ділянками ресурсу.

Одним з правил хорошого дизайну вебсайту є правило необхідності об 'єднання в одному місці лише однорідного за своїм типом або призначенням контенту. Якщо сторінка стає дуже великою або поділена на логічні секції, то має сенс дати користувачеві можливість швидко переміщатися між секціями сторінки. І тут дуже корисними буде так званий якір HTML. Часто цей прийом використовують при оформленні заголовка, для зв 'язку його з цільовою ділянкою інформації. Також такий тип навігації вкрай зручно використовувати в рекламних цілях, направляючи користувача на певний контент, минаючи всі інші.

Щоб використовувати якір HTML з плавною прокруткою, розробнику необхідно впровадити в структуру документа посилання на JavaScript-бібліотеки.

Як створити

Для того, щоб поставити HTML-якір на сторінці, використовується стандартний тег посилання. Це один з основних тегів у структурі HTML-документа.
Він може мати ряд атрибутів, таких як href або name, які вказують на тип посилання, описаного цим тегом. Посилання-якір HTML відрізняється від гіперпосилання використанням символу "#". Після нього необхідно вказати унікальне ім 'я якір, щоб браузер однозначно міг визначити мету для переходу. Вкрай важливо не забувати, що в межах одного документа не можна присвоїти два однакових імені, однак це допустимо на різних сторінках сайту.

Приклад створення якору в структурі документа

Так як поставити якір HTML на сторінці? Для початку необхідно вибрати ділянку документа, яка буде служити. Ним може бути підзаголовок всередині великого тексту. Такі підзаголовки зазвичай виділяються тегом.

Ідентифікатор якоря зазвичай встановлюється у відкритому тезі, а для його опису використовується атрибут "id =". Після цього слід унікальне ім 'я самого якоря. Цей атрибут може міститися в практично будь-якому теге, що відкривається. Після того як HTML-якір на сторінці названий, все, що нам залишається - це створити посилання на нього в іншій частині документа або ж в іншому документі.

Такі підзаголовки зазвичай виділяються тегом < h2 >. Ідентифікатор якоря зазвичай встановлюється у відкритому тезі, і для його опису використовується аттрибут "id =". Після цього слід унікальне ім 'я самого якоря. Цей атрибут може міститися в практично будь-якому теге, що відкривається. Після того як ім 'я якір html встановлено, все, що нам залишається - це створити посилання на нього в іншій частині документа або ж в іншому документі. Посилання на якір у межах одного документа часто називається локальним, тоді як посилання на різні документи називається абсолютним.

Однак засобами одного лише HTML складно домогтися плавності в переходах між якорями. Адже такий підхід призведе до того, що користувач заплутається в навігації на сторінці або між сторінками і тим самим зіпсує своє враження від користування ресурсом. У випадку з локальними якорями набагато краще використовувати якір HTML з плавною прокруткою, щоб відвідувач сайту зміг візуально простежити за тим, в якому напрямку адміністрація веде його по ресурсу.

Для створення подібного ефекту необхідно вдатися до засобів JavaScript. Принцип роботи невеликого скрипту буде наступним - насамперед нам необхідно заблокувати стандартну поведінку HTML-якоря на сторінці. Це необхідно для того, щоб браузер не вирішив самостійно перенаправити відвідувача за посиланням. Після цього наш скрипт обробляє ідентифікатор, який міститься в тезі < a >. Ім 'я якір HTML зберігається, по ньому проводиться пошук у документі, щоб знайти пункт призначення для нашої анімації. Коли ціль знайдена, скрипт обчислює відстань від початку сторінки до верхньої точки елемента, на який ми посилалися. Ця відстань буде використана, щоб плавно анімувати прокрутку сторінки. Нам лише залишається визначити для себе швидкість прокрутки.

Особливе правило

При верстці веб-сторінок дизайнери повинні завжди пам 'ятати, що неправильно перевантажувати сторінку інформацією, оскільки це може погіршити її сприйняття. І якщо необхідно дати користувачеві можливість швидко перейти на важливу ділянку сторінки, то немає нічого простіше і краще для цієї мети, ніж використовувати якір HTML. Анімація переходу між різними ділянками сторінки реалізовується кількома рядками JavaScript-коду, а ефект від неї істотний - користувач буде завжди обізнаний, в якій частині документа він знаходиться і куди йому потрібно перейти далі.