lightanddesign.ru
You might also like
Ссылки являются основой гипертекстовых документов, поскольку они позволяют пользователям переходить с одного сайта на другой простым щелчком мыши. Ссылки структурируют веб-страницу и связывают ее с другими частями документа, позволяя пользователям быстро и легко получать информацию. В языке HTML для создания ссылок используются элементы, называемые якорями. Чтобы преобразовать выделенный текст в ссылку, поместите его между начальным и конечным тегами и используйте атрибут href (сокращение от hypertext reference) для указания URL (Universal Resource Locator), или адреса. страницы, на которую необходимо перейти. URL должен быть заключен в кавычки. Если вы не хотите, чтобы это происходило, когда пользователь нажимает на ссылку (что может понадобиться в процессе обучения), вы можете добавить знак фунта (#) к свойству href.
В следующем примере показано создание ссылки на сайт ‘wm-school’.
Пример HTML:.
В большинстве браузеров текст ссылки будет синего цвета и подчеркнут. Когда вы наводите курсор мыши на гиперссылку, указатель превращается в кисть. Посещаемые ссылки обычно имеют фиолетовый цвет.
Абсолютные и относительные ссылки
Браузеры должны быть информированы о связанном документе. Атрибут href (гипертекстовая ссылка) содержит URL (адрес) страницы и сообщает браузеру, на какой документ указывает ссылка. Большинство ссылок указывают на другие документы HTML, но ссылки могут указывать и на другие объекты, такие как изображения, файлы или видео. Адреса ссылок могут быть абсолютными или относительными.
Абсолютный URL-адрес
Абсолютные URL включают имя протокола (http:// или https://), имя сайта (например, wm-school.ru), путь к файлу и имя файла (например, file.html). Между протоколом и именем сайта может быть вставлен префикс www.
Как правило, ссылки с префиксом www и без него ведут на одну и ту же страницу. Однако бывают случаи, когда открывается ссылка без префикса www, а браузер вообще не обнаруживает страницу с префиксом www. Обратное также может быть верным. Это может быть связано с умышленной или неправильной настройкой веб-сервера.
В следующем примере показано, как создать абсолютную ссылку на сторонний веб-ресурс.
Пример HTML:.
В данном примере ссылка в форме Go to wm-school является абсолютной и ведет на главную страницу сайта wm-school.ru. Если имя домена не указано в качестве ссылки, по умолчанию отображается индексный файл (обычно index.html).
Относительный URL-адрес
Относительные ссылки можно использовать только для создания ссылок на страницы одного и того же сайта, в то время как абсолютные ссылки обычно используются для создания ссылок на другие сайты. Относительные URL являются сокращенной версией абсолютных URL и не требуют указания доменного имени в URL для ссылки на другие страницы того же сайта. Относительные URL описывают путь к ссылающемуся документу с учетом местоположения связанной веб-страницы. Возможны следующие варианты
Создание ссылок в пределах одного каталога
Если требуемый веб-сайт находится в той же папке, что и страница, содержащаяся в ссылке, имя файла должно быть указано в URL. Например, если сайт по адресу http: //mysite.ru/animals/home/edit.html находится по адресу http://mysite.ru/animals/home/default.html, то ссылка будет выглядеть так
Создание ссылки на документ, находящийся одним каталогом ниже
http://mysite.ru/animals/home/edit.htmlhttp://mysite.ru/animals/home/wild/message.html, ссылка: http://mysite.ru/animals/home/edit.htmlhttp://mysite.ru/animals/home/wild/message.html, ссылка. :.
Создание ссылки на вышестоящий каталог
http://mysite.ru/animals/home/edit.htmlhttp://mysite.ru/animals/index.html, ссылка есть: http://mysite.ru/animals/home/edit.htmlhttp://mysite.ru/animals/index.html, ссылка есть: http://mysite.ru/animals/home/edit.htmlhttp://mysite.ru/animals/index.html, ссылка есть: http://mysite.ru/animals/home/edit.htmlhttp://mysite.ru/animals/index.html, ссылка есть: http://mysite.ru/animals/home/edit.htmlhttp://mysite.ru/animals/index.html, ссылка есть: http://mysite.ru/animals/home/edit.htmlhttp://mysite.ru/animals/index.html.
Чтобы создать ссылку на файл на два уровня выше
http://mysite.ru//home/wild/message.htmlhttp://mysite.ru/animals/index.html, ссылка есть: http://mysite.ru//home/wild/message.htmlhttp://mysite.ru/animals/index.html, ссылка есть: http://mysite.ru//home/wild/message.htmlhttp://mysite.ru/animals/index.html, ссылка есть: http://mysite.ru//home/wild/message.htmlhttp://mysite.ru/animals/index.html, ссылка есть: http://mysite.ru//home/wild/message.htmlhttp://mysite.ru/animals/index.html, ссылка есть: http://mysite.ru//home/wild/message.htmlhttp://mysite.ru/animals/index.html.
Совет: глядя на рисунок 1, легко заметить, что при переходе от "родителя" к "дочери" нужно поставить точку на каждой из них. При переходе к "внукам" необходимо дважды установить эти точки.
Ссылка на адрес электронной почты
Mailo & #8212 это особый тип ссылки, которая помогает пользователям отправлять электронные письма. При использовании протокола MailTo в ссылке можно установить соединение с адресом электронной почты. Подключение к адресу электронной почты осуществляется так же, как и подключение к веб-сайту. Свойство HREF должно начинаться со слова mailto. Далее следует адрес электронной почты, на который посетитель должен отправить сообщение.
В следующем примере показано создание ссылки на адрес электронной почты.
Пример HTML:.
Для запуска программы электронной почты необходимо настроить соответствующие параметры в браузере. Поэтому ссылка на электронную почту не будет работать должным образом для всех пользователей. Однако ввод адреса электронной почты в качестве текста ссылки может быть использован посетителями, не имеющими на своих компьютерах возможности работы с электронной почтой.
Правила написания URL
При создании ссылки важно соблюдать следующие правила, чтобы избежать обычных ошибок
- Не используйте обратные косые черты (?) при создании ссылок, так как ссылка не будет работать. На сайтах URL используется только вертикальный форвард (/). Windows использует обратные слеши при ссылке на файлы на вашем компьютере (например, ? Images Elefant.png).
- Не используйте имя дискового накопителя компьютера (например, C:, D:) для запуска URL ссылки. Пока документ находится на локальном сервере, ссылки между страницами будут работать, но если вы разместите сайт на удаленном веб-сервере, ссылки работать не будут.
- Конечный URL должен начинаться с протокола имени http:// или https://.
- Не используйте файлы в качестве URL-адресов. Файловые протоколы (например, file:////themes/lessons.html) можно использовать для создания ссылок на файлы на вашем компьютере. Однако эта ссылка не будет работать в Интернете или на других компьютерах.
- Не используйте пробелы или специальные символы в именах файлов и папок, даже если это допустимые символы. Например, если вы запросите документ под именем файла ‘Web Master.html’, браузер преобразует пробел в специализированный код (%), то есть Web%20master.html. Используйте в имени файла только цифры, буквы, тире (-) и подчеркивания (_).
- Поскольку каждая ссылка & #8212 это построенный элемент, вы не можете размещать блоки внутри элемента, но вы можете размещать ссылки в контейнере блока.
Открытие ссылок в новом окне
Для создания ссылки, открывающей страницу в новом окне браузера, можно использовать цель открывающего ярлыка элемента. Значение этого признака должно быть _blank. В большинстве случаев ссылки такого типа размещаются при перенаправлении посетителей на сторонний сайт. В этом случае автор сайта хочет, чтобы посетитель вернулся на сайт после просмотра страницы. В этом случае сайт остается открытым в первоначальном окне посетителя, поскольку не заставляет его забыть вас. Некоторым пользователям нравится появляться в другом окне, в то время как другие могут считать новое окно скорее раздражающим, чем приятным. Поэтому рекомендуется применять этот прием экономно и использовать только несколько ссылок, заранее предупреждая посетителей о том, что страница откроется в новом окне.
В следующем примере показано, как создать ссылку, которая открывает страницу в новом окне браузера
Пример HTML:.
Если вы установите _blank для всех ссылок на вашем сайте, каждая из этих ссылок будет открываться в новом окне для посетителя, в результате чего перед пользователем будет множество открытых окон. Чтобы избежать этого, в целевом окне может быть отображено другое имя. В ссылке его можно заменить на _blank. Следующая ссылка открывается в новом окне с именем _window
Пример HTML:.
Если для сайта вместо _blank для каждой ссылки установлено значение _Window, все подключенные документы будут открываться в том же втором окне, но сайт останется открытым в своем исходном окне.
Атрибут target может принимать следующие значения
| Пустое место. | Открывает страницу в новом окне или вкладке. |
| _self | Открывает страницу в том же окне (это значение используется по умолчанию). |
| _Родитель | Используется при работе с фреймами, позволяя открывать страницу в родительском фрейме. Если текущая страница не имеет фрейма, это значение работает как _Self. |
| О. | Используется при работе с ящиками, позволяет открыть страницу в полном окне браузера, заменяя все ящики на странице. Если на текущей странице нет ни одного поля, это значение действует как _Self. |
| Рама. | Открывает страницу в новом окне, используя имя фрейма. |
Всплывающая подсказка для ссылки
Еще одним полезным подспорьем для ссылок является заголовок. Это позволяет пользователю создать всплывающую подсказку для ссылки. Это дает пользователю больше информации о том, что ждет его под ссылкой. Подсказки появляются, когда бегунок мыши остается на ссылке и исчезает через некоторое время.
Пример HTML:.
Создание ссылки на определенную позицию страницы
Внутренние ссылки особенно полезны для обеспечения быстрого доступа к определенному тексту в нижней части страниц большого объема или для возврата к верхней части страницы одним щелчком мыши. Ссылки могут быть созданы на различные разделы текущего веб-сайта или на определенные места на разных веб-сайтах. Место на сайте, на которое вы отправляете посетителей, называется отрывком. Создание ссылки, ведущей на определенную область страницы, включает два этапа. Прежде чем создавать ссылку на определенный участок страницы, необходимо выделить этот участок страницы (создать закладку) с помощью атрибута ID. Это позволит отобразить уникальное имя для каждого HTML-элемента на странице.
Шаг 1: Создайте закладку на странице
Закладки на определенные разделы страницы определяются с помощью атрибута id. В терминологии веб-разработчиков это называется id фрагмента. Значение атрибута id должно начинаться с латинского символа или символа подчеркивания (цифры или другие символы не допускаются). Кроме того, несколько закладок на веб-странице не могут иметь одинаковое значение атрибута id. Предположим, вы хотите отправить читателей к заголовку второго уровня на веб-странице. Дайте заголовку уникальное имя (в данном случае имя: absolut).
Закладка будет выглядеть следующим образом
По сути, вы создали закладку под названием "абсолютный URL".
Шаг 2: Создайте ссылку на закладку.
Чтобы создать ссылку на элемент с заданным значением атрибута id, необходим элемент, значение атрибута href которого должно начинаться с символа хэша (#), за которым следует значение атрибута id элемента закладки. Затем создайте ссылку, которая отправляет читателя на закладку под названием absolut на текущей странице.
Эта ссылка указывает на элемент в другой части веб-страницы и имеет атрибут idabsolut. Перед именем требуется косая черта (#), чтобы указать, что это сегмент, а не имя файла.
Далее, нажав на ссылку, вы перейдете к "абсолютному URL". Браузер переведет вас в раздел, начинающийся с заголовка "Абсолютный URL".
Создание ссылки на фрагмент другого документа
Чтобы сослаться на определенную часть другой страницы в другом документе (сайте или стороннем сайте), добавьте значение атрибута id нужного элемента в конец URL страницы и символ (#). Например, ссылка на страницу в другом документе в том же каталоге под заголовком "Все о слонах" будет выглядеть следующим образом
Вы также можете сослаться на конкретный сниппет на другой странице сайта, добавив символ решетки в конец абсолютного URL-адреса, чтобы указать идентификатор сниппета, как показано ниже
Невозможно установить идентификаторы на страницах чужих сайтов. Идентификаторы могут быть созданы самим автором. Чтобы узнать, есть ли на чужой странице закладка и где она находится, можно, конечно, посмотреть исходный код, чтобы найти соответствующую разметку. Если выделенный раздел во внешнем документе был удален, связанная страница все равно загрузится, но браузер отобразит страницу с самого начала, как и в случае с обычной ссылкой.
Пример создания ссылки-закладки с другого сайта:.
Пример HTML:.
В этом примере первая ссылка указывает на файл html_code_elements.html на сайте в том же каталоге. Открыв этот файл, вы перейдете к закладке с именем kbd. Вторая ссылка указывает на сайт nature.html на другом сайте (worldanimals.com). Открыв этот файл, вы попадете на закладку с именем hippo.
Изображения-ссылки
Графические изображения можно использовать как иллюстрации, так и ссылки. Это означает, что при нажатии на изображение откроется новая страница. Чтобы сделать изображение ссылкой на другой онлайн-ресурс, просто поместите его в элемент следующим образом
Пример HTML:.
Наведите курсор на изображение в ссылке, и указатель превратится в кисть.
