Язык HTML
Ссылкти
Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к документу, на который делается ссылка, был доступ. Иными словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт, то на него можно сделать ссылку.
Для создания ссылки необходимо сообщить браузеру, ЧТО является ссылкой, а также указать АДРЕС документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <a>.
Общий синтаксис создания ссылок следующий:
<a href="URL (адрес)">объект ссылки</a>
Атрибут href определяет URL (Universal Resource Locator - универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое тэга <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается.
Например:
<a href="http://limonmalina.com"> Это ссылка на сайт с лекциями. </a>
Практическое задание:
Создать документ, содержащий ссылки на поисковые системы google и yandex (адреса:
https://www.google.ru
http://www.yandex.ru), протестировать.
Если указана ссылка на файл, которого не существует, например, его имя в атрибуте href набрано с ошибкой, то такая ссылка называется битая. Битых ссылок следует категорически избегать. Так, при щелчке по битой ссылке в браузере откроется не сам документ, а окно с предупреждением. Чтобы не возникало подобных ошибок, тестируйте все ссылки на их работоспособность и сразу же устраняйте имеющиеся погрешности.
Файл по ссылке открывается в окне браузера только в тех случаях, когда браузер знает тип документа. Но поскольку ссылку можно сделать на файл любого типа, то браузер не всегда может отобразить документ. При этом выводится сообщение, как следует обработать файл — открыть его или сохранить в указанную папку.
Адрес ссылки может быть как абсолютным, так и относительным.
Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта.
Относительные ссылки ведут отсчет от корня сайта или текущего документа.
Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
При указании в качестве ссылки каталога сайта (например, http://htmlbook.ru/css/), отображается индексный файл. Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html.
Практическое задание:
Создать документ (личный сайт), содержащий ссылки на все свои web-страницы (использовать один из табличных дизайнов).
Виды ссылок
Любая ссылка на веб-странице может находиться в одном из следующих состояний.
Непосещенная ссылка. Такое состояние характеризуется для ссылок, которые еще не открывали. По умолчанию непосещенные текстовые ссылки изображаются синего цвета и с подчеркиванием.
Активная ссылка. Ссылка помечается как активная в момент ее открытия. Поскольку время между нажатием на ссылку и началом загрузки нового документа достаточно мало, подобное состояние ссылки весьма кратковременно. Активной ссылка становится также, при ее выделении с помощью клавиатуры. Цвет такой ссылки по умолчанию красный.
Посещенная ссылка. Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию.
Атрибуты ссылок
Рассмотрим еще несколько полезных, но необязательных параметров тега <a>.
target - По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>.
В качестве значений применяются следующие:
_blank — загружает страницу в новое окно браузера;
_self — загружает страницу в текущее окно (это значение задается по умолчанию);
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self;
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
Например:
<a href="https://www.hermitagemuseum.org/wps/portal/hermitage?lng=ru" target="_blank"> Посетите Эрмитаж. </a>
Учтите, что не всегда логично, когда ссылки открываются в новых окнах, поэтому используйте подобную возможность осмотрительно без навязывания пользователю лишних окон.
Следующий параметр - title.
Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время пропадает.
Цвета и оформления всплывающей подсказки зависят от настроек операционной системы и браузера, и меняться разработчиком не могут.
Например:
<a href="https://www.hermitagemuseum.org/wps/portal/hermitage?lng=ru" target="_blank" title="Официальный сайт музея Эрмитаж"> Посетите Эрмитаж. </a>
Практическое задание:
дополнить задание с поисковыми системами так, чтобы они открывались в новом окне браузера, а ссылки на них содержали пояснения.
Якоря
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке.
Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.
Например:
<p><a name="top"> Здесь верх </a></p>
....
....
<p><a href="#top"> Перейти наверх </a></p>
Между тегами <a name="top"> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы.
Имя ссылки на якорь начинается с символа #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения атрибутов name и href совпадали (символ решетки не в счет).
С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку «Назад» возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку «Назад» два раза.
Cсылку можно также сделать на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в атрибуте href тега <a> надо указать адрес документа и в конце добавить символ решетки (#) и имя закладки.
Например:
<a href="text1.html#bottom"> Перейти к нижней части текста 1. </a>
В данном примере показано создание ссылки на файл text1.html, при открытии этого файла происходит переход на якорь (закладку) с именем bottom.
Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет.
Практическое задание:
Создать документ из шаблона по теме «Таблицы» по видам растений, (по 5 видов) на выбор: ромашка, зверобой, алоэ, береза, боярышник, рябина. Переход по документу вид – меню и меню - вид по якорям. В описании – общая информация по растению, по видам – описание, использование, распостранение.
Основа:
| ← Язык HTML. Создание таблиц. | Язык HTML. Списки. → |