Єдина Країна!

Головне меню

Наша кнопка

Українські уроки про ІТ

Друзі

Підтримка української армії


Головна Web-програмування - HTML Посилання і закладки на HTML сторінках

Посилання і закладки на HTML сторінках
Написав admin   
Вівторок, 05 лютого 2013 12:42
Переглядів: 34872

Сьогодні вирішив виділити час на написання невеликої статті, але тим не менш необхідної – HTML посилання і закладки. Не відносив її до уроків по HTML5, оскільки це стосується самих-самих основ Html загалом. Новачкам раджу(необхідно) прочитати цю статтю, тим хто вже займається версткою не перший день ліпше пропустити її.

 

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

<a href="http://programming.in.ua">Українське програмування</a>

Отримаємо:

Українське програмування

Гіперпосилання — це слово, речення, картинка абощо при натисканні на які вам відкриється інша сторінка. Все, що знаходиться між тегами <a> буде клікабельним і буде переносити вас на інший документ.

Тег <a> має кілька атрибутів, основний з них href відповідає за адресу документа, на який йде посилання. Атрибут target відповідає за те як відкрити документ (по замовчуванню сторінка завантажується в тій самій вкладці браузера), якщо ж надати атрибуту значення _blank, то стоірнка завантажиться в нові й вкладці, є також інші значення атрибуту — _self (по замовчуваню), _parent, _top, але вони орієнтовані для роботи з фреймами, а фрейми це застаріла технологія, їх не варто використовувати.

<a href="http://google.com" target="_blank">Перейти на Google</a>

Попробуйте натиснути:

Перейти на Google

Атрибут title задає спливаючу підказку, яка відображається при наведенні.

Атрибут rel визначає відношення між даним документом і документом на який посилається. Цей атрибут в більшості випадків використовують для пошукових систем, щоб вони не передавали PR або ТИЦ сайтам, на які зроблено посилання.

<a href="http://google.com" target="_blank" rel="nofollow">Перейти на Google</a>

Що таке PR та ТИЦ? Про це можна написати не одну статтю, в загальному це означає вагу вашої сторінки в пошукових системах Google і Яндекс, чим більша — тим краще.

Варто зауважити, що посилання в атрибут href можуть бути як абсолютними (http://programming.in.ua, http://translate.google.com.ua/) так і відносними (links.html). Абсолюні працюють завжди, відносні ж будуть працювати тільки коли збережена структура документів, тобто в попередньому випадку сторінка links.html повинна бути в тій самій папці, що й сторінка з якої посилаються.

Посилання в HTML мають три стани:

- не відвідане посилання (по замовчуванню, синій текст з підкресленням)

- відвідане посилання (пурпурний колір з підкресленням)

- активне посилання (затиснена клавіша миші над посиланням)

Звичайно все відображення посилань можна змінювати з допомогою стилів та CSS файлів, але це вже інша розмова.

 

Перейдемо тепер до внутрішніх закладок на сайті, їх ще називають «якорями» — це місця на сайті, які позначені певним іменем і до яких можна швидко переміститись. Закладки здебільшого потрібні, коли сторінка розтягнута по вертикалі (багато тексту, картинок), тоді стає зручним швидкий перехід до певного місця, розділу, картинки.

Спочатку вказуються усі закладки, вони ніяк не виділяють і не видимі користувачеві. Для  цього використовується атрибут id і вказується унікальне ім'я для закладки.

<a id="rozdil_1">Розділ 1</a>

А після цього створюється лінк на цю закладку з тої ж сторінки

<a href="#rozdil_1">Прочитайте розділ 1</a>

або посилання на закладку з іншої сторінки

<a href="http://programming.in.ua/links.html#rozdil_1">Прочитайте розділ 1</a>

Для прикладу наводжу сторінку з використанням закладок Сторінка з закладками.

 

Це і є всі основні премудрості для використання гіперпосилань, нічого складного. Рухаємось далі, буде цікавіше!


( 32 Проголосувало )
Коментарі
Добавити новий
Адольфіна  - ...   |2016-07-26 14:50:52
Дякую, так тримати.
Анонімно   |2019-03-15 13:03:30
Залишити коментар
Ім`я:
e-mail:
 
Тема:
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Введіть цей настирливий код
Русская редакция: www.freedom-ru.net & www.joobb.ru

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 

Підписка

Хто онлайн?

Немає
На даний момент 35 гостей на сайті

Український рейтинг
TOP.TOPUA.NET