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

Определения и обозначения

Гиперссылка — активный элемент документа или веб-страницы, переход по которому открывает другой ресурс или место в текущем документе. В отличие от обычного текста, она связана с адресом назначения и реагирует на щелчок. Ссылкой может быть не только слово, но и изображение или другой элемент страницы. Гиперссылки нужны, чтобы соединять материалы и давать читателю возможность перемещаться между ними.

Адрес гиперссылки — указание на ресурс, куда ведёт ссылка. Для веб-страницы это обычно полный веб-адрес, включающий протокол, например https://example.com/. Для файла адресом служит путь к нему в файловой системе или на сайте. Различие важно: полный веб-адрес задаёт ресурс целиком, а путь к файлу зависит от того, где расположен документ со ссылкой.

Якорь — отмеченное место документа, на которое можно перейти по ссылке. Метка ставится в нужном фрагменте страницы, например у заголовка раздела. Затем ссылка указывает на эту метку, и браузеру не приходится открывать отдельный документ. Якоря особенно полезны в длинных материалах, где читателю нужно быстро перейти к разделу или вернуться к оглавлению.

Относительный адрес — путь к ресурсу, заданный относительно расположения текущего документа. Например, если страницы лежат в одной папке, путь от index.html к about.html можно записать как about.html. Такой адрес удобен при переносе всего сайта на другой сервер, поскольку не привязан к конкретному домену. Но если переместить отдельные файлы или изменить папки, относительный путь может перестать указывать на нужный ресурс.

Как это устроено

Гиперссылки связывают отдельные страницы и документы в единую сеть переходов. Когда пользователь выбирает ссылку, браузер читает адрес назначения и открывает указанный ресурс или перемещается к нужной части уже открытого документа. Это избавляет от необходимости вручную искать следующую страницу и позволяет выстроить удобную навигацию по гипертексту. Связи могут вести как наружу, так и между материалами одного сайта.

В HTML ссылку создают элементом a: адрес назначения записывают в атрибут href, а между открывающим и закрывающим тегами размещают текст или объект, по которому можно перейти. Схематично запись выглядит так: <a href="адрес">текст ссылки</a>. Браузер использует значение href для перехода, а содержимое элемента показывает пользователю как активную область. Если забыть закрывающий тег или поместить внутрь не тот фрагмент, вид ссылки и её работа могут оказаться не такими, как задумано.

Для ссылки на внешний ресурс указывают его полный адрес, например https://example.com/. Протокол в начале сообщает браузеру, как обращаться к ресурсу, поэтому неполный адрес может быть истолкован неверно. Затем в элемент ссылки помещают понятный текст, например «Открыть сайт». Такой текст помогает решить, стоит ли переходить, ещё до щелчка.

Для файла или страницы того же сайта часто применяют относительный путь. Браузер отсчитывает его от папки, в которой находится текущий документ, а не автоматически от корня сайта. Если две страницы лежат рядом, достаточно имени файла; если нужный файл в соседней папке, путь должен учитывать переход между папками. Поэтому перед созданием ссылки нужно выяснить расположение файлов, а после изменений структуры сайта — проверить адреса заново.

Чтобы связать оглавление с разделом, сначала отмечают место назначения якорем, например задают элементу идентификатор section. Затем в адресе ссылки указывают имя метки после знака #, например #section. Имена должны совпадать, иначе браузер не найдёт нужное место. Для обратного перехода к оглавлению создают отдельную метку у оглавления и ссылку на неё в конце раздела.

Виды гиперссылок и особенности их задания

Сначала определите, куда должен вести переход: на внешний ресурс, файл сайта, фрагмент страницы или почтовый адрес. Затем выберите подходящий тип адреса и проверьте, что он соответствует расположению и назначению ресурса. Понятный текст ссылки помогает пользователю заранее представить результат перехода.

Разбор задач

Задача 1. Создать на HTML-странице текстовую ссылку на главную страницу указанного сайта. Нужно использовать полный адрес ресурса и выбрать текст, который ясно сообщает о переходе. Адрес для примера — https://example.com/.

1. Уточните полный адрес главной страницы, включая протокол https://. Это позволяет браузеру правильно определить внешний веб-ресурс.
2. Выберите короткий и понятный текст ссылки, например «Главная страница сайта». Поместите его внутрь элемента a, а адрес задайте в href.
3. Проверьте запись: после открывающего тега должен идти текст, затем закрывающий тег. Откройте страницу в браузере и щёлкните ссылку, чтобы убедиться, что она ведёт по нужному адресу.

Ответ. Элемент ссылки можно записать так: <a href="https://example.com/">Главная страница сайта</a>. Адрес назначения находится в href, а видимый текст — между тегами a. При нажатии браузер открывает указанный сайт.

Задача 2. В одной папке сайта находятся index.html и about.html. Нужно создать на первой странице ссылку на вторую. Поскольку оба файла расположены рядом, путь к странице назначения задаётся от папки текущего документа и состоит из имени файла.

1. Определите, где лежит файл about.html относительно index.html. Они находятся в одной папке, поэтому переходить между каталогами не нужно.
2. Запишите в href относительный адрес about.html и добавьте видимый текст, например «О странице». Закройте элемент ссылки.
3. Откройте index.html в браузере и перейдите по ссылке. Если открылась нужная страница, путь задан верно; если нет, проверьте имя файла и его расположение.

Ответ. Подходящая запись: <a href="about.html">О странице</a>. Если файлы переместить в разные папки, путь придётся изменить с учётом нового расположения. В условии они лежат рядом, поэтому дополнительная часть пути не нужна.

Задача 3. На длинной странице нужно создать переход из оглавления к разделу и ссылку обратно к оглавлению в конце раздела. Для этого требуются две метки: одна у оглавления, другая у раздела. Адрес каждой ссылки должен указывать на соответствующее имя после знака #.

1. Назначьте оглавлению имя, например contents, а заголовку раздела — section. Убедитесь, что каждое имя уникально на этой странице.
2. В оглавлении создайте ссылку с адресом #section и текстом, называющим раздел. Она направит читателя к месту с меткой section.
3. В конце раздела добавьте ссылку с адресом #contents. Проверьте оба перехода и сравните имена в ссылках с метками назначения.

Ответ. Метки можно задать через идентификаторы элементов, а адреса ссылок записать как #section и #contents. В результате оглавление ведёт к разделу, а обратная ссылка возвращает к оглавлению. Если имена различаются хотя бы одним символом, переход может не сработать.

Типичные ошибки

В полном адресе внешнего ресурса иногда пропускают протокол, например пишут только имя сайта. Так делают, считая, что браузер всегда сможет догадаться о недостающей части, но адрес может быть истолкован как путь к локальному ресурсу. Проверьте, начинается ли адрес с нужного протокола и открывается ли он в браузере. Для надёжности сравните его с адресом страницы, который отображается в адресной строке.

Относительный путь порой задают так, будто отсчёт начинается от корня сайта. Это происходит, когда расположение текущего HTML-файла не учитывают, хотя браузер строит путь относительно папки этого файла. Проверьте адрес, мысленно пройдя от текущей папки к файлу назначения, или откройте ссылку после сохранения страницы. При переносе файлов повторите проверку.

Имя якоря в ссылке может не совпасть с именем метки назначения. Ошибку легко допустить из-за опечатки или разного регистра букв, особенно если имена вводили в разных местах. Сверьте символ за символом значение после знака # и имя идентификатора у нужного элемента. Если имена совпадают, проверьте, что метка действительно есть в документе.

Незакрытый тег ссылки или неверно выбранный фрагмент текста меняет область, по которой можно перейти, либо нарушает отображение соседнего содержимого. Часто закрывающий тег забывают при редактировании разметки или добавляют его не в том месте. Проверьте, что каждому открывающему тегу соответствует закрывающий, а внутри находится именно тот текст, который должен быть активным. Затем посмотрите результат в браузере и щёлкните ссылку.

Связь с другими темами

Для создания гиперссылок нужно знать основы HTML-разметки: назначение тегов и атрибутов. Также пригодятся навыки работы с файлами и папками, потому что относительный путь зависит от их расположения. Понимание этих тем помогает не только записать ссылку, но и разобраться, почему она ведёт не туда после перемещения документов.

Гиперссылки используют при создании сайтов и электронных документов, а также для навигации по большим информационным материалам. С их помощью соединяют разделы, страницы и внешние источники, выстраивая удобный маршрут чтения. Поэтому ясные подписи ссылок и проверка адресов важны для любого гипертекстового документа.

Что запомнить

• Гиперссылка задаёт переход к ресурсу или месту в документе.
• Внешний ресурс обычно указывают полным адресом.
• Относительный адрес зависит от расположения текущего файла.
• Для перехода к части документа используют якорь и ссылку на него.
• Текст ссылки должен ясно подсказывать, куда ведёт переход.