Какие виды гиперссылки

Компьютерная грамотность с Надеждой

Заполняем пробелы — расширяем горизонты!

Гиперссылки и их основные виды

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

p, blockquote 1,0,0,0,0 —>

p, blockquote 2,0,0,0,0 —>

Гиперссылка может быть в виде картинки или текста. Один клик по гиперссылке позволяет сделать внутренний переход на нужную страницу в том же документе (на том же сайте), либо – внешний переход на другой сайт, на другой объект в Интернете.

p, blockquote 3,0,0,0,0 —>

Чем отличается гиперссылка от простой ссылки

Простая ссылка выглядит, например, так:

p, blockquote 4,0,0,0,0 —>

p, blockquote 5,0,0,0,0 —>

А вот гиперссылка (та же ссылка, но теперь она оформлена как гиперссылка): https://www.compgramotnost.ru/tekstovyj-redaktor-word/kak-sdelat-giperssylku-v-word

p, blockquote 6,0,0,0,0 —>

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

1. выделить ссылку в адресной строке браузера (то есть, «закрасить синим цветом» адрес ссылки, например, закрасить такой адрес — www.compgramotnost.ru/tekstovyj-redaktor-word/kak-sdelat-giperssylku-v-word),
2. скопировать ссылку в оперативную память компьютера (точнее, в буфер обмена):

• нажав для этого горячие клавиши Ctrl+C,
• либо кликнуть по выделенной ссылке ПРАВОЙ кнопкой мыши, а в появившемся при этом контекстном меню кликнуть по вкладке «Копировать»,

1. открыть новую вкладку в браузере,
2. кликнуть мышкой в верхнюю строку браузера (это адресная строка браузера) , там появится курсор,
3. вставить ссылку из оперативной памяти компьютера в адресную строку ссылку:

• для этого нажать горячие клавиши Ctrl+V,
• либо кликнуть в пустой адресной строке браузера ПРАВОЙ кнопкой мыши, а в появившемся при этом контекстном меню кликнуть по вкладке «Вставить».

Такой же алгоритм действий из 5-и шагов, как описан выше, предполагается, когда пишут, что если Вам «не удалось перейти по гиперссылке, то скопируйте ее и вставьте в адресную строку браузера.»

p, blockquote 8,0,0,0,0 —>

А это, как Вы понимаете, не очень удобно. В случае с гиперссылкой переход от одного документа к другому осуществляется за один клик. Правда, переходить по гиперссылкам лучше только тогда, когда Вы уверены, что после перехода нет засады, например, в виде вируса.

p, blockquote 9,0,1,0,0 —>

Чаще всего гиперссылки используются для того, чтобы связать страницы одного сайта друг с другом. Для этой цели создается главное и второстепенное меню, карта сайта, система внутренней перелинковки. Также гиперссылки связывают друг с другом страницы разных сайтов (по ним передается так называемый «ссылочный вес»).

p, blockquote 10,0,0,0,0 —>

Иногда гиперссылки ведут на адрес электронной почты, в этом случае после клика по гиперссылке запускается почтовый клиент по умолчанию.

p, blockquote 11,0,0,0,0 —>

Теперь поговорим о трех классификациях гиперссылок:

1. внешние и внутренние гиперссылки,
2. текстовые и графические,
3. рабочие и битые.

1 Внешние и внутренние гиперссылки

Первая классификация связана с делением ссылок по зоне их действия:

1. на внешние и
2. внутренние.

Что касается внешних ссылок, то они ведут на страницу, относящуюся к другому сайту или к другому документу.

p, blockquote 14,0,0,0,0 —>

Рис. 1 Внешние и внутренние гиперссылки

Внутренние гиперссылки ведут на страницу, относящуюся к этому же сайту (то есть, связывают друг с другом документы, размещенные на одном домене), или на другую страницу в пределах одного документа.

p, blockquote 15,0,0,0,0 —>

2 Текстовые и графические гиперссылки

Вторая классификация гиперссылок — по формату. Здесь есть два вида гиперссылок:

1. текстовые и
2. графические ссылки.

В первом случае речь идет об обычном тексте, в который вставлена ссылка (иначе говоря, URL-редирект или направление пользователя на конкретный URL-адрес).

p, blockquote 17,0,0,0,0 —>

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

p, blockquote 18,1,0,0,0 —>

Как понять, есть гиперссылка или нет?

Чтобы определить, содержит ли какая-либо картинка гиперссылку, нужно подвести курсор мыши к картинке. Если курсор при его наведении на картинку никак не меняется, то это значит, что картинка не содержит гиперссылки.

p, blockquote 19,0,0,0,0 —>

p, blockquote 20,0,0,0,0 —>

Если курсор примет, например, вид «пятерни» (или как-то еще изменится), тогда по картинке следует кликнуть, после чего произойдет перенаправление (переход) по гиперссылке.

p, blockquote 21,0,0,0,0 —>

Точно также можно выяснить, содержит ли гиперссылку текст. Если курсор мыши при его наведении на любую часть текста (например, на слово или на несколько слов подряд) принимает вид «пятерни» (или как-то изменится), то это явный признак, указывающий на наличие гиперссылки.

p, blockquote 22,0,0,0,0 —>

3 Рабочие и битые ссылки

Третья классификация гиперссылок – по их состоянию. Можно выделить два вида гиперссылок:

1. рабочие и
2. нерабочие (их еще называют «битыми ссылками»).

Рис. 2 Битая ссылка не позволяет никуда перейти

В первом случае документ, на который указывает ссылка, без проблем открывается и загружается. Во втором случае загрузка документа происходит с ошибками или не происходит вообще. Причин появления нерабочих («битых») ссылок может быть довольно много. Как правило, они связаны с изменением структуры сайта, удалением каких-то страниц или даже целых разделов, сменой стандартных URL на ЧПУ.

p, blockquote 24,0,0,0,0 —>

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

p, blockquote 25,0,0,0,0 —>

Внешний вид текстовых гиперссылок меняется от действий пользователя

Текстовая гиперссылка является интерактивным элементом, так как при совершении с ней определенных действий меняется ее состояние. Ниже перечислим основные состояния.

p, blockquote 26,0,0,0,0 —>

1) Неиспользованная гиперссылка – та, которую не трогали и по которой еще не нажимали (цифра 2 на рис. 3 ниже). Обычно она окрашена в синий цвет (но не всегда). Это позволяет контрастировать с окружающим текстом.

p, blockquote 27,0,0,1,0 —>

2) Гиперссылка, на которую наведен указатель мыши (до момента нажатия). Как правило, цвет в данном случае меняется с красного на синий. Также появляется нижнее подчеркивание (цифра 1 на рис. 3). Указатель мыши может принимать вид «пятерни». Благодаря этим эффектам пользователь понимает, что имеет дело именно со ссылкой, а не с простым текстом.

p, blockquote 28,0,0,0,0 —>

Рис. 3 Внешний вид гиперссылок

3) Гиперссылка при нажатии (до тех пор, пока пользователь удерживает левую кнопку мыши). При непосредственном нажатии цвет, например, с красного может меняться на какой-то другой. Также может убираться нижнее подчеркивание.

p, blockquote 29,0,0,0,0 —>

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

p, blockquote 30,0,0,0,0 —>

5) Ссылка, относящаяся к пункту меню, в котором человек находится в данный момент. Обычно такая ссылка выделяется жирным шрифтом. Это позволяет пользователю сориентироваться и понять, в каком именно разделе он находится сейчас.

p, blockquote 31,0,0,0,0 —>

P.S. Как сделать гиперссылку в Ворде, в презентации и не только:

p, blockquote 32,0,0,0,0 —>

p, blockquote 33,0,0,0,0 —>

p, blockquote 34,0,0,0,0 —>

p, blockquote 35,0,0,0,0 —> p, blockquote 36,0,0,0,1 —>

Разбираемся с веб ссылками

В данной статье мы узнаем, что такое ссылки и почему они важны.

Предварительно:	Вы должны знать как работает интернет и иметь представление о разнице между веб-страницей, веб-сайтом, веб-сервером и поисковой системой. (en-US)
Цель:	Изучить, что такое веб-ссылки и почему они важны.

Коротко

Гиперссылки, в народе ссылки, являются фундаментальной основой Веба. Чтобы объяснить, что такое ссылки, мы должны обратиться к основам Веб-архитектуры.

В 1989 году Тим Бернерс-Ли (Tim Berners-Lee), создатель Веба, говорил о трёх китах, на которых стоит Веб:

1. URL, система адресов, которая отслеживает веб-документы.
2. HTTP, транспортный протокол, помогающий найти документы по заданным URL
3. HTML, формат документа, позволяющий встраивать гиперссылки

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

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

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

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

Активно изучаем

Глубокое погружение

Как мы определили, ссылка — это строка, которая связана с URL. Мы используем ссылки, чтобы с лёгкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть:

Типы ссылок

Ссылка между двумя веб-страницами, принадлежащими к одному веб-сайту. Без внутренних ссылок нет такого понятия как веб-сайт (конечно, если это не одностраничный сайт).

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

Ссылка с чьей-либо веб-страницы на ваш сайт. Это внешняя ссылка наоборот. Имейте в виду, что вам не обязательно отвечать тем же кому-то, кто ссылается на ваш сайт.

Когда вы создаёте веб-сайт, фокусируйтесь на внутренних ссылках, так как они делают ваш сайт возможным и удобным для использования. Найдите нужный баланс между большим и недостаточным количеством ссылок. Мы поговорим о дизайне навигации сайта в другой статье, но в качестве правила, каждый раз когда вы создаёте веб-страницу, убедитесь, что хотя бы одна из ваших страниц ссылается на неё. С другой стороны, если на вашем сайте более чем десять страниц, добиваться того, чтобы каждая страница ссылалась друг на друга, может быть весьма контрпродуктивно.

Когда вы начинаете, вам не имеет смысла сильно волноваться о наличии внешних и входящих ссылок, но они важны, если вы хотите, чтобы поисковые системы находили ваш сайт. (См. более детальное объяснение ниже.)

Якоря (Anchors)

В большинстве случаев ссылки связывают две страницы вместе. Якоря (Anchors) же связывают две области одного документа. Когда вы следуете по ссылке указывающей на якорь, ваш браузер переходит с одной части текущего документа на другую, вместо загрузки нового документа. Хотя вы создаёте и используете якоря точно так же, как любые другие ссылки.

Ссылки и поисковые системы

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

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

• Текст ссылки влияет на то, какой поисковый запрос выдаст URL.
• Чем больше существует входящих ссылок на сайт, тем выше он будет в результатах поиска.
• Внешние ссылки влияют на оценку и сайта источника, и сайта, на который они ссылаются, но в какой степени, — неизвестно.

SEO (поисковая оптимизация) — это комплекс мер для «поднятия» позиции сайтов в поисковой выдаче. Оптимизация использования ссылок на сайте является одной из ключевых в SEO.

Следующие шаги

Так что теперь, конечно, вы захотите создать несколько веб-страниц со ссылками!

• Чтобы получить более теоретическое обоснование, узнайте об URL-адресах и их структуре, поскольку каждая ссылка указывает на URL-адрес.
• Хотите что-нибудь более практичное? В статье Создание гиперссылок нашего модуля Введение в HTML подробно объясняется, как реализовывать ссылки.
• Приступите к изучению HTML. Научитесь создавать HTML-документы и связывать их между собой. (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Гиперссылка

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

Гиперссылка позволяет также открывать приложения, установленные на компьютере (например, почтовый клиент). В текстах на сайтах гиперссылки выглядят, как подчеркнутые фразы. Они могут представлять собой картинки, кнопки и другие графические элементы.

SEO продвижение в ИТ

Разновидности гиперссылок

Можно выделить 3 главных типа гиперссылок:

• Безанкорные и анкорные. Первый вариант гиперссылки оформлен в виде обычного URL-адреса. Анкорные ссылки относятся к части текстового контента на странице и имеют графическое оформление в виде гиперссылки.
• Внутренние и внешние. Внутренние ссылки используются для перелинковки на сайте и позволяют перемещаться по его страницам. Внешние создаются для перенаправления пользователя на сторонние сайты или какие-либо документы, файлы, расположенные в сети.
• Якорные ссылки. Создаются для того, чтобы пользователь мог максимально удобно перемещаться в рамках одного документа на странице. Например, к якорным ссылкам относятся оглавления, где каждый пункт и будет якорной гиперссылкой, открывающей определенный раздел статьи.

Для чего используются гиперссылки

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

Использование внешних гиперссылок, которые ссылаются на конкретный сайт, позволяет значительно повысить авторитет этого сайта. Такой подход часто используется в SEO-оптимизации.

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

Как создать гиперссылку

Для создания гиперссылки необходимо иметь адрес ссылки и знать, как правильно ее прописывать в HTML-коде страницы (если есть графический редактор кода страницы, ссылку можно прописать в 2 клика без каких-либо проблем).

В HTML-документе гиперссылка будет иметь следующий вид:

Гиперссылка может иметь дополнительные возможности, которые можно изменить при помощи атрибута target:

В качестве зарезервированных имен могут использоваться следующие:

• _blank — открывает страницу в новом окне браузера;
• _self — открывает страницу в этом же окне (значение по умолчанию);
• _parent — загружает окно в фрейм (если фрейма нет, значение будет работать так же, как и _self);
• _top — открывает страницу в полноэкранном режиме, отменяя все фреймы (если фреймы отсутствуют, значение будет работать как _self).

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

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

Предварительные требования:	Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.
Задача:	Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе.

Что такое гиперссылка?

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

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

Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.

Анатомия ссылки

Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите Ссылки-блоки), который вы хотите превратить в ссылку, в элемент , и придания этому элементу атрибута href (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.

p> Я создал ссылку на a href="https://www.mozilla.org/ru/">домашнюю страницу Mozillaa>. p> 

Это дало нам следующий результат:

Добавляем информацию через атрибут title

Другим атрибутом, который вы можете добавить к своим ссылкам, является — title . Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:

p> Я создал ссылку на a href="https://www.mozilla.org/ru/" title="Лучшее место для поиска дополнительной информации о миссии Mozilla и о том, как внести свой вклад" >домашнюю страницу Mozilla a >. p> 

Вот что получилось (описание появится, если навести курсор на ссылку):

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

Активное изучение: создаём собственную ссылку

Время упражнения: мы хотели бы, чтобы вы создали любой HTML-документ в текстовом редакторе на своём компьютере (наш базовый пример подойдёт.)

• Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.
• Теперь превратите некоторые фрагменты документа в ссылки.
• Добавьте ссылкам атрибут title .

Ссылки-блоки

Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже блочный элемент. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами .

a href="https://www.mozilla.org/ru/"> img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу" /> a> 

Примечание: вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.

Краткое руководство по URL-адресам и путям

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

URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу https://www.mozilla.org/ru/ .

URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)

Корень структуры — каталог creating-hyperlinks . При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html и contacts.html . На настоящем веб-сайте index.html был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).

В корне есть ещё два каталога — pdfs и projects . У каждого из них есть один файл внутри — project-brief.pdf и index.html , соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы. Многие веб-сайты так делают. Второй index.html , возможно, будет главной лендинг-страницей для связанной с проектом информации.

Тот же каталог: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html ), указывающую на contacts.html , вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — contacts.html :

p> Хотите связаться с конкретным сотрудником? Найдите подробную информацию на нашей a href="contacts.html">странице контактовa>. p> 

p> Посетите мою a href="projects/index.html">домашнюю страницу проектаa>. p> 

p> Ссылка на a href="../pdfs/project-brief.pdf">краткое описание моего проектаa>. p> 

Примечание: вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: ../../../сложный/путь/к/моему/файлу.html .

Фрагменты документа

Можно ссылаться на определённую часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут id элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

h2 id="Почтовый_адрес">Почтовый адресh2> 

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

p> Хотите написать мне письмо? Используйте наш a href="contacts.html#Почтовый_адрес">почтовый адресa>. p> 

Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:

p> a href="#Почтовый_адрес">Почтовый адрес компанииa> можно найти в нижней части этой страницы. p> 

Абсолютные и относительные URL-адреса

Два понятия, с которыми вы столкнётесь в Интернете, — это абсолютный 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 может быть просто названием файла — project-brief.pdf — никакой дополнительной информации не требуется. Если PDF расположен в поддиректории pdfs внутри каталога projects , относительная ссылка будет pdfs/project-brief.pdf (аналогичный абсолютный URL был бы http://www.example.com/projects/pdfs/project-brief.pdf .).

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

Советуем вам основательно разобраться в этой теме!

Практика написания хороших ссылок

При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.

Используйте чёткие формулировки описания ссылок

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

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

Взгляните на этот пример:

Хороший текст ссылки: Скачать Firefox

p>a href="https://firefox.com/"> Скачать Firefox a>p> 

Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox

p>a href="https://firefox.com/"> Нажми сюда a> чтобы скачать Firefoxp> 

• Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
• Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
• Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
• Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.

Используйте относительные ссылки, где это возможно

Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах одного сайта (при ссылке на другие сайты необходимо использовать абсолютную ссылку):

• Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
• Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System (DNS; также прочтите Как работает web), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.

Создавая ссылки на не HTML ресурсы — добавляйте описание

Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:

• Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.
• Если у вас нет установленного Flash-плеера и вы нажмёте ссылку, то внезапно перейдёте на страницу с Flash-контентом.

Посмотрите на примеры, чтобы увидеть, как добавить описание:

p> a href="http://www.example.com/large-report.pdf"> Скачать отчёт о продажах (PDF, 10MB) a> p> p> a href="http://www.example.com/video-stream/"> Посмотреть видео (видео откроется в отдельном окне, HD качество) a> p> p> a href="http://www.example.com/car-game"> Играть в гонки (необходим Flash) a> p> 

Используйте атрибут download, когда создаёте ссылку

Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download , чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:

a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" download="firefox-39-installer.exe"> Скачать Firefox 39 для Windows a> 

Активное изучение: создание меню навигации

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

Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):

1. Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
2. Создайте ссылки каждому элементу списка, ведущие на эти страницы.
3. Скопируйте созданное меню в каждую страницу.
4. На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.

Когда закончите задание, посмотрите, как это должно выглядеть:

Примечание: Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.

Ссылки электронной почты

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

Самыми простыми и часто используемыми формами mailto: являются subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:

a href="mailto:nowhere@mozilla.org">Отправить письмо для nowherea> 

В результате получим ссылку вида: Отправить письмо для nowhere.

Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле href оставить только «mailto:»), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки «Поделиться».

Особенности и детали

Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу mailto . Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.

Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):

a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body a> 

Примечание: Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля mailto: URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.

Вот несколько примеров использования mailto URLs:

• mailto:
• mailto:nowhere@mozilla.org
• mailto:nowhere@mozilla.org,nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject

Заключение

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

В этом модуле

• Начало работы с HTML
• Что такое заголовок? Метаданные в HTML
• Основы редактирования текста в HTML
• Создание гиперссылок
• Углублённое форматирование текста
• Структура документа и веб-сайта
• Отладка HTML
• Разметка письма
• Структурируем страницу

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.