Ссылки на странице

Ссылки

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

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

Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера является ссылкой. Текст, расположенный между тегами и , по умолчанию становится синего цвета и подчеркивается. В примере 8.1 показано создание нескольких ссылок на разные веб-страницы.

Пример 8.1. Добавление ссылок

      
Собаки
 
Кошки
  

В данном примере создаются две ссылки с разными текстами. При щелчке по тексту «Собаки» в окне браузера откроется документ dog.html, а при щелчке на «Кошки» — файл cat.html.

Результат примера показан на рис. 8.1. Обратите внимание, что при наведении курсора мыши на ссылку, в строке состояния браузера отображается полный путь к ссылаемому файлу.

Рис. 8.1. Вид ссылок на странице

Если указана ссылка на файл, которого не существует, например, его имя в атрибуте href набрано с ошибкой, то такая ссылка называется битая . Битых ссылок следует категорически избегать, поскольку они вводят посетителей сайта в заблуждение. Так, при щелчке по ссылке из примера 8.1 в браузере Safari откроется не сам документ, а окно с предупреждением (рис. 8.2).

Рис. 8.2. Результат при открытии битой ссылки

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

Файл по ссылке открывается в окне браузера только в тех случаях, когда браузер знает тип документа. Но поскольку ссылку можно сделать на файл любого типа, то браузер не всегда может отобразить документ. При этом выводится сообщение, как следует обработать файл — открыть его или сохранить в указанную папку. Например, в браузере Firefox выводится следующее окно (рис. 8.3).

Рис. 8.3. Окно для выбора действия с файлом в Firefox

Источник

: The Anchor element

The HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

Try it

Attributes

This element’s attributes include the global attributes.

Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:

• Without a value, the browser will suggest a filename/extension, generated from various sources:
  • The Content-Disposition HTTP header
  • The final segment in the URL path
  • The media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)
  • download only works for same-origin URLs, or the blob: and data: schemes.
  • How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.
  • If the Content-Disposition header has different information from the download attribute, resulting behavior may differ:
    • If the header specifies a filename , it takes priority over a filename specified in the download attribute.
    • If the header specifies a disposition of inline , Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline.

    The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

    • Sections of a page with document fragments
    • Specific text portions with text fragments
    • Pieces of media files with media fragments
    • Telephone numbers with tel: URLs
    • Email addresses with mailto: URLs
    • While web browsers may not support other URL schemes, websites can with registerProtocolHandler()

    Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

    A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.

    How much of the referrer to send when following the link.

    • no-referrer : The Referer header will not be sent.
    • no-referrer-when-downgrade : The Referer header will not be sent to origins without TLS (HTTPS).
    • origin : The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
    • origin-when-cross-origin : The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
    • same-origin : A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
    • strict-origin : Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don’t send it to a less secure destination (HTTPS→HTTP).
    • strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
    • unsafe-url : The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

    The relationship of the linked URL as space-separated link types.

    Where to display the linked URL, as the name for a browsing context (a tab, window, or ). The following keywords have special meanings for where to load the URL:

    • _self : the current browsing context. (Default)
    • _blank : usually a new tab, but users can configure browsers to open a new window instead.
    • _parent : the parent browsing context of the current one. If no parent, behaves as _self .
    • _top : the topmost browsing context (the «highest» context that’s an ancestor of the current one). If no ancestors, behaves as _self .

    Note: Setting target=»_blank» on elements implicitly provides the same rel behavior as setting rel=»noopener» which does not set window.opener .

    Hints at the linked URL’s format with a MIME type. No built-in functionality.

    Deprecated attributes

    Hinted at the character encoding of the linked URL.

    Note: This attribute is deprecated and should not be used by authors. Use the HTTP Content-Type header on the linked URL.

    Used with the shape attribute. A comma-separated list of coordinates.

    Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on , as long as they had identical values.

    Note: Use the global attribute id instead.

    Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.

    The shape of the hyperlink’s region in an image map.

    Источник

    HTML Ссылки

    Ссылки встречаются почти на всех веб страницах. Ссылки позволяют пользователям переходить со страницы на страницу.

    HTML Ссылки — Гиперссылки

    HTML ссылки — это гиперссылки.

    Вы можете нажать на ссылку и перейти к другому документу.

    Когда вы наведете курсор мыши на ссылку, стрелка мыши превратится в маленькую руку.

    Примечание: Ссылка не обязательно должна быть текстовой. Ссылка может быть изображением или любым другим HTML элементом!

    HTML Ссылки — синтаксис

    Текст ссылки это та часть, которая будет видна читателю.

    Нажав на текст ссылки, читатель отправится на указанный URL-адрес.

    Пример

    В этом примере показано, как создать ссылку на Schoolsw3.com:

    По индексу ссылки будут отображаться следующим образом во всех браузерах:

    • Не посещенная ссылка подчеркнута синим цветом
    • Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
    • Активная ссылка подчеркнута красным цветом

    Совет: Ссылки, конечно, можно стилизовать с помощью CSS, чтобы получить другой вид!

    HTML Ссылки — атрибут target

    По индексу связанная страница будет отображаться в текущем окне браузера. Чтобы изменить это, необходимо указать другой целевой объект для ссылки.

    Атрибут target указывает, где открыть связанный документ.

    Атрибут target может иметь одно из следующих значений:

    • _self — По умолчанию. Открывает документ в том же окне / вкладке, в котором он был нажат
    • _blank — Открывает документ в новом окне или вкладке
    • _parent — Открывает документ в родительском фрейме
    • _top — Открывает документ во всем теле окна

    Пример

    Используйте target=»_blank» , чтобы открыть связанный документ в новом окне браузера или на новой вкладке:

    Абсолютные и относительные ссылки

    В обоих приведенных выше примерах используется абсолютный URL (полный веб-адрес) в атрибуте href .

    Локальная ссылка (ссылка на страницу внутри того же веб-сайта) указывается с помощью относительного URL (без «https://www») :

    Пример

    Абсолютные URLы

    sw3C

    Google

    Относительные URLы

    HTML Изображения

    CSS Учебник

    HTML Ссылки — использование изображения в качестве ссылки

    Чтобы использовать изображение в качестве ссылки, просто поместите тег внутри тега :

    Пример

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

    Используйте mailto: внутри атрибута href , чтобы создать ссылку, которая открывает пользователя программы электронной почты (чтобы позволить им отправить новое сообщение электронной почты):

    Пример

    Кнопка как ссылка

    Чтобы использовать HTML кнопку в качестве ссылки, вы должны добавить некоторый код JavaScript.

    JavaScript позволяет указать, что происходит при определенных событиях, таких как нажатие кнопки:

    Пример

    Совет: Узнайте больше о JavaScript в разделе JavaScript Учебник.

    Названия ссылок

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

    Пример

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

    Пример

    Используйте полный URL-адрес для ссылки на веб страницу:

    Пример

    Ссылка на страницу, расположенную в папке html на текущем веб сайте:

    Пример

    Ссылка на страницу, расположенную в той же папке, что и текущая страница:

    Подробнее о путях к файлам вы можете прочитать в этой главе HTML Пути к файлам.

    Краткое содержание главы

    HTML Упражнения

    HTML Ссылки теги

    Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

    Мы только что запустили
    SchoolsW3 видео

    Сообщить об ошибке

    Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

    Ваше предложение:

    Спасибо Вам за то, что помогаете!

    Ваше сообщение было отправлено в SchoolsW3.

    ТОП Учебники

    ТОП Справочники

    ТОП Примеры

    SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

    Источник