Лекция 8. Ссылки в HTML » Электронный научный журнал "Вопросы профессионального развития персонала"

Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 499 409-39-69
  • 8 499 409-39-69
  • gghpi@inbox.ru
  • 95fb51c5c83e5a6e
  • Россия, г. Москва, ул. Садовая-самотечная, д.8

Лекция 8. Ссылки в HTML

Admin 15-10-2023, 20:30 59 Лекции по современным веб-технологиям


Хотя HTML содержит большое количество средств для форматирования текста и структурирования документов, его основной особенностью является возможность создания гипертекстовых документов. Гипертекстовыми являются документы, которые содержат гиперссылки на другие ресурсы сети Интернет. Особенность гиперссылки заключается в том, что она может указывать не только на другой HTML-документ или любой другой ресурс (текстовые файлы, файлы PDF, изображения, звуковые файлы и т.д.), но и на определенный раздел текущего HTML-документа.
Текст гиперссылки, как правило, помечается подчеркиванием и цветом, чтобы его было легко визуально отличить от обычного текста. При наведении курсора мыши на ссылку, курсор превращается в "руку", а в статусной строке браузера отображается путь к ресурсу, на который указывает ссылка.
Любая ссылка на веб-странице может находиться в одном из следующих пяти состояний:
  • непосещенная ссылка (link). Такое состояние характерно для ссылок, которые еще не открывали. По умолчанию, непосещенные ссылки имеют синий цвет и отображаются шрифтом с подчеркиванием;
  • активная ссылка (active). Ссылка помечается как активная в момент ее открытия, т.е. в тот короткий промежуток времени между нажатием на ссылку и началом загрузки нового документа. В некоторых браузерах этот стиль применяется, когда ссылка открыта в другом окне или вкладке. Цвет такой ссылки по умолчанию красный;
  • посещенная ссылка (visited). Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию;
  • фокус (focus). Ссылка находится "в фокусе", когда, например, она выделена с помощью клавиатуры пользователя. Браузер Internet Explorer не поддерживает в настоящее время состояние focus, и использует вместо него состояние active;
  • под указателем (hover). Состояние применяется, когда пользователь удерживает над ссылкой указатель мыши.
Следует помнить, что различные состояния ссылок в различных браузерах реализуются и оформляются по-разному.

Создание гиперссылок

Любой строковый элемент или изображение можно превратить в гиперссылку. Для этого необходимо сообщить браузеру, какой элемент является ссылкой, а также указать адрес ресурса, на который следует сделать ссылку. Оба эти действия выполняются с помощью элемента A.
Элемент A имеет несколько атрибутов, главным из которых являются href, задающий адрес ресурса, на который указывает ссылка. Адрес ссылки может быть абсолютным и относительным. Как правило, абсолютные адреса применяются для перехода на другой ресурс, а внутри текущего сервера применяются относительные адреса. Ниже представлены некоторые примеры создания ссылок:
<A href="../images/image.jpg">Изображение</A> <A href="http://www.microsoft.ru">сайт Microsoft</A> <A href="mailto:myname@gmail.com" title="Пишите письма"> myname@gmail.com</A>
Иногда оказывается полезным организовать ссылки не на другие HTML-документы, а на определенные места того же самого документа. Подобные ссылки еще называют закладками. Вначале следует задать в соответствующем месте HTML-документа закладку и установить ее имя с помощью атрибута name элемента A. Имя ссылки на закладку начинается с символа #, после чего идет название закладки. Можно также делать ссылку на закладку, находящуюся на другой веб-странице и даже другом сайте. Для этого в адресе ссылки надо указать ее адрес и в конце добавить символ решетки # и имя закладки. Между тегами <A name=..> и </A> текст писать необязательно, т.к. требуется лишь указать местоположение перехода по ссылке.
Приведенный фрагмент кода создает закладку и ссылку на нее:
<A name="top"></A>  ...    <A href="#top">Вверх!</A>
Ссылкой может быть не только строковый элемент, но и изображение. Изображение в этом случае надо поместить между тегами <A href=...> и </A>, как показано в примере:
<A href="sample.html"><img src="sample.gif" width="50" height="50" alt="Изображение-ссылка"></A>
Атрибут href элемента A задает путь к документу, на который указывает ссылка, а атрибут src элемента IMG - путь к графическому файлу, который используется в качестве ссылки.
Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок. Можно воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется свойство border cо значением none. На рисунке 8.1 представлены текстовая и графическая ссылки.
Вид текстовой и графической ссылок в браузере

Рис. 8.1. Вид текстовой и графической ссылок в браузере

Как и большинство элементов HTML, элемент A может иметь атрибут title, который представляет некоторую дополнительную информацию. Браузеры показывают так называемую всплывающую подсказку, когда посетители проводят курсором своей мыши над ссылкой. Эта всплывающая подсказка сообщает информацию о ссылке. Например, можно дать небольшое введение в содержание и расположение присоединенного по ссылке документа.

Создание навигационного меню

Отличительной особенностью веб-сайтов является нелинейность их содержимого. А для перемещения и ориентации в этом нелинейном пространстве служит навигационная система сайта. Основными инструментами для создания навигационной системы в HTML являются ссылки, закладки и списки. Чтобы показать пользователю, что закладки и ссылки выполняют функцию навигационного меню, а не являются случайным набором ссылок, их необходимо структурировать и стилистически оформить. Если порядок страниц не имеет значения, можно использовать неупорядоченный список, как показано в примере ниже:
<ul id="mainmenu">      <li><a href="home.html">Домашняя страница</a></li>      <li><a href="projects.html">Наши проекты</a></li>      <li><a href="services.html">Наши услуги </a></li>      <li><a href="contact.html">Контакты</a></li>    </ul>
Если порядок, в котором посетители просматривают все документы, важен, то необходимо использовать упорядоченный список. Если, например, имеется онлайновый курс, состоящий из нескольких лекций, и учащиеся должны изучать его в определенном порядке, то можно было бы использовать упорядоченный список. Использование списков для создания меню очень удобно, т.к. весь код HTML содержится в одном элементе списка, что позволяет использовать CSS для различного оформления каждого элемента. Кроме того, списки могут быть вложенными, что позволяет легко создавать несколько уровней иерархии навигации. Даже без какого-либо стилевого оформления списка, представление в браузере кода HTML имеет смысл, и посетителю легче понять, что эти ссылки объединены и составляют одну логическую единицу.

Различные типы меню

Существует несколько типов меню. Большинство из них можно создавать с помощью списков. Меню, созданные на основе списков, чаще всего применяются для организации навигации по странице и по сайту, контекстной навигации, для организации схемы сайта и нумерации страниц. Ниже приведено краткое описание различных типов меню.
Примером организации навигации по странице может служить оглавление для одной страницы со ссылками, указывающими на различные разделы страницы.
Навигация по сайту является наиболее распространенным типом меню, в том или ином виде присутствующим практически на каждом сайте. Это меню для всего сайта, со ссылками, указывающими на различные страницы на этом сайте. Данное меню представляет пользователю как доступные варианты перехода, так и иерархию сайта. Важным вопросом при организации навигации по сайту является вопрос выделения текущего документа в меню, чтобы создать у пользователя ощущение присутствия в определенном месте.
Одно из золотых правил разработки и навигации в Интернете состоит в том, что текущий документ никогда не должен ссылаться на себя самого, однако должен явно отличаться от других записей в меню. Это важно, так как дает посетителям точку опоры и говорит им, где они находятся в своем путешествии по сайту.
Если пользователю предлагается ссылка, которая указывает на текущий документ, активация ее приведет к перезагрузке документа. По этой причине ссылка на текущую страницу никогда не должна присутствовать в меню ссылок. Данную ссылку лучше удалить или деактивировать.
Контекстная навигация представляет собой список ссылок, которые указывают на HTML-документы, связанные с темой просматриваемой страницы. Контекстные меню являются ссылками, которые создаются на основе содержимого текущего документа, и предлагают дополнительную информацию, связанную с текущей страницей. Классическим примером являются ссылки на связанные статьи, которые можно видеть в начале новостных лент.
Схема сайта является схемой всех страниц сайта или основных разделов крупных сайтов. Она позволяет посетителям сайта получить представление обо всей структуре сайта и быстро перейти в требуемое место, даже если оно находится где-то в иерархии страниц. Как схема сайта, наряду с поиском по сайту, дает возможность пользователю быстро и эффективно перемещаться по сайту.
Нумерация страниц необходима для организации быстрого перемещения в большом документе, разбитом на отдельные страницы. Можно встретить нумерацию страниц в больших архивах изображений или на страницах с результатами поиска, такими, как поисковые системы Яндекс, Google и т.п. Нумерация страниц отличается от других типов навигации тем, что она обычно соединяется с тем же документом, но с помощью ссылки, которая содержит дополнительную информацию, такую как номер страницы, с которой начинать. Меню нумерации страниц позволяют посетителям просматривать множество данных без потери представления о том, где они находятся.

Карты-изображения

Для организации большинства навигационных меню вполне достаточно использовать упорядоченные или неупорядоченные списки. Существуют, однако, ситуации, которые могут потребовать другие методы организации меню.
Одним из таких методов являются клиентские карты-изображения. Карты-изображения превращают изображение в меню, задавая в нем интерактивные области, которые можно соединить с различными документами. Например, следующий ниже код превращает изображение легендарной ливерпульской четверки в меню, на котором можно щелкать мышью.
Изображения участников группы "Beatles" являются ссылками

Рис. 8.2. Изображения участников группы "Beatles" являются ссылками
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Карта-изображение</TITLE> </HEAD> <BODY> <img src="map.gif" width="400" height="100" usemap="#map"> <MAP name="map"> <AREA shape="poly" title="Пол" coords="57,47, 40,29, 53,10, 74,5, 95,9, 106,34, 95,55" href="paul.html"> <AREA shape="poly" title="Ринго" coords="144,87, 120,68, 122,45, 155,38, 176,49, 176,76, 161,86" href="ringo.html"> <AREA shape="poly" title="Джордж" coords="212,62, 192,56, 176,41, 177,26, 206,15, 226,25, 227,48" href="george.html"> <AREA shape="poly" title="Джон" coords="332,71, 300,63, 280,40, 298,17, 334,25, 347,60" href="john.html"> </MAP> </BODY> </HTML>
Любое изображение можно превратить в меню, определяя карту с различными областями, называемыми также горячими точками. Для указания браузеру на то, что изображение является картой, используется атрибут usemap. Он является ссылкой на описание конфигурации карты, которая задается элементом MAP. Значение атрибута name данного элемента должно соответствовать имени в usemap. Для задания активной области, являющейся ссылкой на документ HTML, используется элемент AREA.
Каждая область должна иметь несколько атрибутов.
Атрибут href определяет URL-адрес ресурса, с которым должна соединяться ссылка.
Атрибут shape определяет форму активной области. Область может быть задана в виде окружности (значение circle ), прямоугольника (значение rect ) или многоугольника (значение poly ).
Атрибут coords определяет координаты в изображении, которые должны стать горячими точками. Значения координат отсчитываются от верхнего левого угла изображения и могут измеряться в пикселях или процентах. Для прямоугольных областей необходимо определить только верхний левый и нижний правый углы; для окружностей необходимо определить центр окружности и радиус; для многоугольников необходимо предоставить наиболее полный список всех угловых точек.
Использование карт-изображений наглядней, чем обычные текстовые ссылки, и позволяет применять всего один графический файл для организации ссылок. Однако не нужно считать, что карты-изображения следует включать везде, где требуются графические ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть альтернативные варианты.

Практическое занятие 3

Целью практического занятия является закрепление материала лекций 7 и 8. В ходе практического занятия слушатель осваивает основные приемы организации навигации на сайте.
Слушателю предлагается организовать навигацию по странице page2.html и создаваемому сайту с помощью списков и ссылок. В качестве навигации по странице page2.html можно создать иерархическое меню, содержащее разделы "Дела конструкторские" и "Дела машинные" с соответствующими подразделами, позволяющее пользователю перемещаться не только к данным разделам, но и к содержащимся в них законам. Для реализации навигации по сайту предлагается создать меню, позволяющее пользователю перемещаться между созданными на предыдущих практических занятиях страницами page1.html, page2.html и page3.html. Для реализации навигации по сайту предлагается также создать карту ссылок. Изображение-основа карты ссылок может быть создано в любом графическом редакторе.

Похожие новости

  • Лекция 14. Оформление списков и ссылок с помощью CSS
  • Лекция 7. Списки и изображения в HTML
  • Лекция 6. Разметка текста в HTML
  • Лекция 5. DOCTYPE и раздел документа HEAD
  • Лекция 4. Введение в HTML