Как сделать ссылку в HTML
К обязательным атрибутам стоит отнести href (адрес ссылки). Адрес ссылки может быть как абсолютным (например, “http://nubex.ru”), так и относительным (к, примеру, “/we/”). Относительный путь указывается относительно главной страницы (чтобы сослаться на главную страницу сайта, используйте “/”).
Между открывающим тегом и закрывающим пишется текст, который будет выводиться в виде гиперссылки (такой текст еще называют анкором или якорем). В качестве анкора может выступать не только текст, но и картинка.
Таким образом, самая простая ссылка в тексте HTML Nubex будет выглядеть так:
Необязательные атрибуты тега
К основным необязательным атрибутам гиперссылок относятся:
- title — служит для добавления всплывающей подсказки к ссылке;
- name — используется для определения якоря внутри страницы;
- target — указывает браузеру, куда загружать документ;
- accesskey — дает возможность активации ссылки с помощью определенных горячих клавиш.
Рассмотрим более актуальный способ, как сделать ссылку на страницу в HTML с использованием основных атрибутов:
Теперь посмотрим на нашу ссылку: Нубекс
Текст, указанный в атрибуте title будет всплывать при наведении курсора на ссылку. Атрибут target=»_blank» означает, что ссылка будет открываться в новом окне. accesskey=»n» позволяет активировать ссылку комбинацией клавиш (для Google Chrome – это Alt+N), где n — это указанная в теге клавиша. Чтобы определить, как работает тег name, рассмотрим его более подробно.
Атрибут name
Атрибут name используется для определения якоря внутри страницы. Это означает, что можно ссылаться на определенные области внутри одной страницы. Рассмотрим на примере:
Большое-большое полотно текста. Прокрути вниз и нажми «Вверх».
Вверх
В конструкторе сайтов «Нубекс» есть удобный механизм для вставки ссылок при редактировании ссылки. Для более подробной информации читайте статью Как сделать ссылку.
Адреса в HTML
Адреса в HTML
Относительный и абсолютный путь
Адреса в HTML могут указывать путь: на сайт, страницу сайта или файл расположенный на сайте. Обычно адрес HTML выступает в качестве значений у атрибутов, тега a (ссылки) или img (изображения):
— адрес сайта,
— адрес страницы сайта,
— адрес файла изображения расположеного на сайте.
Где в качестве имяСайта , выступает название сайта, например gabdrahimov.ru
Адреса в языке HTML бывают трёх видов:
1. Адрес сайта,
2. Абсолютный адрес (абсолютный путь к странице или файлу),
3. Относительный адрес (относительный путь к странице или файлу).
Адрес сайта
Адрес сайта в HTML это просто имя сайта c приставкой http:// , например:
http://ya.ru — Яндекс
http://google.ru — Гугл
http://vk.com — Вконтакте и т.д.
Абсолютный адрес
Абсолютный адрес — это абсолютный путь к странице или файлу. Абсолютный адрес начинается с адреса сайта, на котором находится страница или файл.
Примеры абсолютных адресов (абсолютных путей):
- — абсолютный адрес страницы about.html , сайта имяСайта
- — абсолютный адрес страницы online.html , находящейся в папке service , сайта имяСайта
- — абсолютный адрес страницы editor.html , находящейся в папке soft , сама папка soft находится в папке product , сайта имяСайта
Точкой отсчета абсолютного адреса является адрес сайта, на котором расположена страница или файл.
то веб-сервер постарается открыть файл index.html расположенный в папке catalog , если данного файла нет, то обычно появляется ошибка 404 . —>
Относительный адрес
Относительный адрес — это относительный путь к странице или файлу. От абсолютного он отличается тем, что точкой отсчета является не имя сайта, а то место, где находится страница в которой нужно разместить ссылку на другую страницу или файл.
Допустим в папке product находится страница list.html , её абсолютный адрес выглядит следующим образом:
http://имяСайта/product/list.html — страница list.html расположена в папке product
Есть еще одна страница, чей абсолютный адрес выглядит следующим образом:
http://имяСайта/about.html — страница about.html находится в корне (на одном уровне с главным файлом index.html) сайта.
На странице list.html нужно поставить ссылку, которая будет ссылаться на страницу about.html находящуюся на том же сайте. Сослаться на неё можно двумя способами:
1. — используя абсолютный путь,
2. — используя относительный путь.
Символ ../ означает, что нужно подняться на одну папку вверх (на один уровень),
Символ ../../ означает, что нужно подняться на две папки вверх (на два уровня).
Если страница list.html тоже будет находится в корне сайта:
http://имяСайта/list.html , то для того чтобы сослаться на страницу about.html , нужно будет в HTML-документе list.html прописать следующий код:
— относительный путь.
Далее, если страница list.html будет находится в папке soft :
http://имСайта/product/soft/list.html , то для того чтобы сослаться на страницу about.html , нужно будет в HTML-документ файла list.html прописать следующий код:
— т.е. два раза подняться вверх по папкам.
Чтобы сослаться на страницу online.html , которая находится по адресу:
http://имяСайта/service/online.html , нужно в HTML-документе файла list.html , который находится по адресу:
http://имяСайта/product/soft/list.html , прописать следующий код:
— два раза подняться вверх по папкам, затем «зайти» в папку service и написать имя файла online.html
Точкой отсчета относительного адреса является то место, где находится ссылающаяся страница.
Также, в качестве точки отсчета относительного адреса может выступать корень сайта / , пример:
Разница между абсолютным и относительным путями
Рассмотрим различия между абсолютным и относительным путями:
- Точка отсчета абсолютного адреса начинается с адреса сайта, точка отсчета относительного адреса начинается с места где находится страница, которая хочет сослаться на другую страницу или файл.
- Абсолютный путь чётко задан и никогда не меняется, относительный путь может изменяться в зависимости от того, где находится ссылающаяся страница.
- Абсолютные пути можно ставить на страницы и файлы разных сайтов, относительный путь можно использовать только в пределах одного сайта.
: 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.