Гипперссылки

1. Гиперссылки

2.

Гиперссылки в HTML
Гиперссылки — одно из самых интересных нововведений Интернета. Они были
особенностью Сети с самого начала, но именно они превращают Интернет в
Интернет.
Они позволяют нам связывать наши документы с любым другим документом
(или ресурсом), с которым мы хотим. С их помощью мы также можем связывать
документы с их конкретными частями, и мы можем сделать приложения
доступными на простом веб-адресе (сравните это с локальными приложениями,
которые должны быть установлены, и другими такими же вещами).
Почти любой веб-контент может быть преобразован в ссылку, так что когда вы
кликаете по ней (или иным образом активируете), она заставляет веб-браузер
перейти на другой веб-адрес (URL)
URL-адрес может указывать на файлы HTML, текстовые файлы, изображения,
текстовые документы, видео и аудиофайлы и все остальное, что может жить в
Интернете.
Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит
вас, хотите ли вы открыть файл (в этом случае обязанность открытия или
обработки файла передаётся в соответствующее локальное приложение на
устройстве) или загрузить файл (в этом случае вы можете попытаться
разобраться с ним позже).

3.

Анатомия гиперссылки
Простая ссылка создаётся путём обёртывания текста (или другого
содержимого), который вы хотите превратить в ссылку, в элемент <a>, и
придания этому элементу атрибута href (который также известен
как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на
который вы хотите указать ссылку.
Другим атрибутом, который вы можете добавить к своим ссылкам, является —
title. Он предназначен для хранения полезной информации о ссылке.
Например, какую информацию содержит страница или другие вещи, о которых
вам нужно знать.
Описание из атрибута title отображается только при наведении курсора, значит
люди, полагающиеся на клавиатурные элементы управления для навигации по
веб-страницам, будут испытывать трудности с доступом к информации,
которую содержит title.
3

4.

Гиперссылки-блоки
Как упоминалось ранее, вы можете превратить любой элемент в ссылку,
даже блочный элемент. Если у вас есть изображение, которые вы хотели бы
превратить в ссылку, вы можете просто поместить изображение между
тегами <a></a>.
Ссылками возможно сделать любой элемент на странице, нужно лишь вставить
тег, что даёт возможность создавать панели навигации, переходы по странице,
открытие других страниц с нужной информацией или даже получить какую-то
информацию из других источников.
4

5.

Адреса и пути гиперссылок
Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей
про URL-адреса и пути к файлам. Этот раздел даст вам информацию,
необходимую для достижения этой цели.
URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так
его никто не называет) — это просто строка текста, которая определяет, где
что-то находится в Интернете.
URL-адреса используют пути для поиска файлов. Пути указывают, где в
файловой системе находится файл, который вас интересует.
Корень структуры —при работе на локальном веб-сайте у вас будет один
каталог, в который входит весь сайт. В корне у нас есть файл — index.html (на
настоящем веб-сайте index.html был бы нашей домашней, или лендингстраницей (веб-страницей, которая служит точкой входа для веб-сайта или
определённого раздела веб-сайта)).
5

6.

Адреса и пути гиперссылок
В корне могут быть ещё два каталоги. У каждого из них есть минимум один
файл внутри.
Обратите внимание на то, что вы можете довольно успешно иметь
два index.html файла в одном проекте, пока они находятся в разных местах
файловой системы. Многие веб-сайты так делают. Второй index.html,
возможно, будет главной лендинг-страницей для связанной с проектом
информации.
Особенности структуры:
• Тот же каталог: Если вы хотите подключить ссылку
внутри index.html (верхний уровень index.html), указывающую
на дополнительную страницу, вам просто нужно указать имя файла, на
который вы хотите установить ссылку, так как он находится в том же
каталоге, что и текущий файл.
• Перемещение вниз в подкаталоги: Если вы хотите подключить ссылку
внутри index.html (верхний уровень index.html), указывающую на
«папка»/«страница», вам нужно спуститься ниже в директории «папка» перед
тем, как указать файл, который вы хотите. Это делается путём указания имени
каталога, после которого идёт слеш и затем имя файла.
6

7.

Адреса и пути гиперссылок
• Перемещение обратно в родительские каталоги: Если вы хотите подключить
ссылку внутри «папка»/«файл», указывающую на «папка2»/«файл2», вам нужно
будет подняться на уровень каталога, затем спустится в каталог «папка2».
"Подняться вверх на уровень каталога" обозначается двумя точками — .. — так,
URL-адрес, который вы используете ../«папка2»/«файл2»
Вы можете объединить несколько экземпляров этих функций в сложные URLадреса, если необходимо, например: ../../../сложный/путь/к/моему/файлу.html.
Можно ссылаться на определённую часть документа HTML (известную
как фрагмент документа), а не только на верхнюю часть документа. Для этого
вам сначала нужно назначить атрибут id элементу, с которым вы хотите
связаться. Обычно имеет смысл ссылаться на определённый заголовок
id – Определяет идентификатор (ID), который должен быть уникален для всего
документа. Он предназначен для идентификации элемента при создании ссылок
на него, исполнении скриптов или применении стилей (посредством CSS).
7

8.

Адреса и пути гиперссылок
Затем, чтобы связаться с этим конкретным id, вы должны включить его в конец
URL-адреса, которому предшествует знак решётки.
Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки
на другую часть того же документа.
8

9.

Абсолютный и относительный URL
• Абсолютный URL:
Указывает на местоположение, определяемое его абсолютным
местоположением в Интернете, включая протокол и доменное имя.
Например, если страница index.html загружается в каталог,
называемый projects, который находится внутри корня веб-сервера, а домен
веб-сайта — http://www.example.com, страница будет доступна по
адресу http://www.example.com/projects/index.html (или даже
просто http://www.example.com/projects/), так как большинство веб-серверов
просто ищет целевую страницу, такую как index.html, для загрузки, если он не
указан в URL-адресе).
• Относительный URL
Указывает расположение относительно файла, с которого вы связываетесь, это
больше похоже на случай, который мы рассматривали в предыдущей секции. Для
примера, если мы хотим указать со
страницы http://www.example.com/projects/index.html на PDF файл, находящийся в
той же директории, наш URL может быть просто названием файла — projectbrief.pdf — никакой дополнительной информации не требуется. Если PDF
расположен в поддиректории pdfs внутри каталога projects, относительная ссылка
будет pdfs/project-brief.pdf (аналогичный абсолютный URL был
9
бы http://www.example.com/projects/pdfs/project-brief.pdf).

10.

Абсолютный и относительный URL
Абсолютный URL всегда будет указывать на одно и то же местоположение,
независимо от того, где он используется.
Относительный URL будет указывать на различные места, в зависимости от
того, где находится файл, в котором он используется, — например, если мы
переместим наш файл index.html из каталога projects в корневой каталог вебсервера (верхний уровень, не в директорию) , то относительный
URL pdfs/project-brief.pdf будет вести на http://www.example.com/pdfs/projectbrief.pdf, а не на http://www.example.com/projects/pdfs/project-brief.pdf
Помимо этого, формировать ссылку следует чётко, ясно и по существу. Ниже
представлены примеры.
Хороший вариант:
Плохой вариант:
10

11.

Якоря
Якоря, или внутренние ссылки, создают переходы на различные разделы
текущей веб-страницы, позволяя быстро перемещаться между разделами. Это
оказывается очень удобным в случае, когда на странице слишком много текста.
Внутренние ссылки также создаются при помощи элемента <a> с разницей в
том, что атрибут href содержит имя указателя — так называемый якорь, а не
URl-адрес.
Перед именем указателя всегда ставится знак #.
11

12.

Атрибуты
• target
По умолчанию, при переходе по ссылке документ открывается в текущем окне
или фрейме. При необходимости, это условие может быть изменено
атрибутом target тега <a>. Синтаксис следующий:
В качестве значения используется имя окна или фрейма, заданное атрибутом «name».
Если установлено несуществующее имя, то будет открыто новое окно. В качестве
зарезервированных имен применяются следующие:
1. _blank — загружает страницу в новое окно браузера.
2. _self — загружает страницу в текущее окно (это значение задается по умолчанию).
3. _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это
значение работает как _self.
4. _top — отменяет все фреймы и загружает страницу в полном окне браузера, если
фреймов нет, то это значение работает как _self.
12

13.

Атрибуты
• title
Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая
подсказка отображается, когда курсор мыши задерживается на ссылке, после
чего подсказка через некоторое время пропадает.
• link
Определяет отношения между текущим документом и внешним ресурсом;
позволяет создать ссылку на внешний ресурс, а также для создания иконок
сайта (а также для подключения таблицы стилей css).
• type
Указывает MIME-тип файлов ссылки, т.е. расширение файла, носит больше
справочную информацию.
13

14.

Атрибуты
• download
Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен
в момент, когда пользователь щелкает по ссылке.
• media
Определяет, для каких типов устройств файл будет оптимизирован. Значением
может быть любой медиа-запрос
1. all – все устройства.
2. braille – устройства, основанные на системе Брайля, предназначены для
слепых людей.
3. handheld – наладонники, смартфоны, устройства с малой шириной экрана.
4. print – печатающее устройство вроде принтера.
5. screen – экран монитора.
6. speech – речевые синтезаторы, а также программы для воспроизведения
текста вслух. Сюда же входят речевые браузеры.
7. projection – проектор.
8. tty – Телетайпы, терминалы, портативные устройства с ограниченными
возможностями экрана.
9. tv – Телевизор
14

15.

Атрибуты
• rel
Дополняет атрибут href информацией об отношении между текущим и
связанным документом.
1. alternate — ссылка на альтернативную версию документа (например,
печатную форму страницы, перевод или зеркало).
2. author — ссылка на автора документа.
3. bookmark — постоянный URL-адрес, используемый для закладок.
4. help — ссылка на справку.
5. license — ссылка на информацию об авторских правах на данный вебдокумент.
6. next/prev — указывает связь между отдельными URL.
7. nofollow — запрещает поисковой системе переходить по ссылкам на данной
странице или по конкретной ссылке.
8. noreferrer — указывает, что переходе по ссылке браузер не должен посылать
заголовок HTTP-запроса (Referrer), в который записывается информация о том,
с какой страницы пришел посетитель сайта.
9. prefetch — указывает, что целевой документ должен быть кэширован, т.е.
браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
10. search — указывает, что целевой документ содержит инструмент для поиска.
15
11. tag — указывает ключевое слово для текущего документа.

16.

Задания
Ответьте на вопросы (проверяем память и понимание):
1.
2.
3.
4.
5.
6.
7.
8.
Возможно ли на страницу сайта добавить ссылку на мультимедийные
объекты (изображения, видео, музыку)?
Назовите тэги для создания ссылки;
Назовите основные атрибуты для ссылки;
Возможно ли создать ссылку на другой ресурс? Как?
Объясните: когда лучше использовать абсолютный и относительный пути?
Возможно ли превратить изображение на сайте в ссылку? Как?
Что такое гиперссылки-блоки?
Возможно ли сделать гиперссылку на абзац в странице?

17.

Задания
Выполните практическое задание:
1. Создайте html файлы для трёх-четырёх страниц сайта;
2. Дайте страницам названия, связанные с: едой, транспортом, профессиями,
играми, одеждой, инженерией, напитками, кафе, кино, животными, или
компаниями;
3. Создайте каркас сайта для каждой страницы;
4. Наполните страницы контентом (добавьте текст, изображения,
отформатируйте текст, напишите название сайта сверху слева, можете
добавить логотип перед названием сайта);
5. Создайте навигацию по странице – ссылки на каждую тему контента (пример,
если транспорт – сделать ссылки на каждую указанную модель авто);
6. Создайте переходы на другие страницы – сверху страницы под названием (и
логотипом) в одну строку;
7. Стилизуйте контент (измените фон, цвет текста где необходимо, сделайте
подчёркивания, размеры и стиль шрифта);
17

18. Благодарю за внимание