Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса
должны начинаться с указания протокола (обычно http://) и содержать имя сайта.
Относительные ссылки ведут отсчет от корня сайта или текущего документа.
В примере 8.2 показано создание абсолютной ссылки на другой сайт.
Пример 8.2. Использование абсолютных ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Абсолютный адрес</title>
</head>
<body>
<p><a href="http://htmlbook.ru">Изучение HTML</a></p>
</body>
</html>В данном примере ссылка вида <a href=»http://htmlbook.ru»>Изучение
HTML</a> является абсолютной и ведет на главную страницу сайта htmlbook.ru.
При указании в качестве ссылки каталога сайта (например, http://htmlbook.ru/css/),
отображается индексный файл. Это файл, который загружается по умолчанию
при обращении к каталогу без явного указания имени файла. Обычно в качестве
индексного файла выступает документ с именем index.html.
Абсолютные ссылки обычно применяются для указания документа на другом сетевом
ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта.
Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные
и громоздкие. Поэтому внутри сайта преимущественно используются относительные
ссылки.
Ссылки относительно текущего документа
При создании относительных ссылок надо понимать, какое значение для атрибута
href следует указывать, поскольку оно зависит от исходного расположения файлов.
Рассмотрим несколько типичных вариантов.
1. Файлы располагаются в одной папке (рис. 8.4).
Рис. 8.4
Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае
код будет следующий.
<a href="Ссылаемый документ.html">Ссылка</a>Подобное имя файла взято только для образца, на сайте в именах файлов не следует
использовать русские символы с пробелами, да еще и в разном регистре.
2. Файлы размещаются в разных папках (рис. 8.5).
Рис. 8.5
Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта,
то перед именем файла в адресе ссылки следует поставить две точки и слэш (/),
как показано ниже.
<a href="../Ссылаемый документ.html">Ссылка</a>Две точки в данном случае означают выйти из текущей папки на уровень выше.
3. Файлы размещаются в разных папках (рис. 8.6).
Рис. 8.6
Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на
документ в корне сайта, требуется повторить написание предыдущего примера два
раза.
<a href="../../Ссылаемый документ.html">Ссылка</a>Аналогично обстоит дело с любым числом вложенных папок.
4. Файлы размещаются в разных папках (рис. 8.7).
Рис. 8.7
Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл,
на который необходимо сделать ссылку — в папке. В этом случае путь к файлу
будет следующий.
<a href="Папка/Ссылаемый документ.html">Ссылка</a>Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет.
Если файл находится внутри не одной, а двух папок, то путь к нему записывается
так.
<a href="Папка 1/Папка 2/Ссылаемый документ.html">Ссылка</a>Ссылки относительно корня сайта
Иногда можно встретить путь к файлу относительно корня сайта, он выглядит
как «/Папка/Имя файла» со слэшем вначале. Так, запись <a href=»/course/»>Курсы</a> означает,
что ссылка ведет в папку с именем course, которая располагается в корне сайта,
а в ней необходимо загрузить индексный файл.
Учтите, что такая форма записи не работает на локальном компьютере, а только
под управлением веб-сервера.
What would the web be without links?
Well, not much of a web at all — the World Wide Web is essentially a system of web pages.And how are those pages connected? Hyperlinks, or links from one document to another, usually appearing as hypertext. In fact, the “H” in HTTP/HTTPS stands “HyperText”. Simply put, there’s no web without links.
We all know hyperlinks when we see them, whether we’re perusing an online store or going down a Wikipedia rabbit hole. In essence, browsing the web is just clicking link after link.
So, in this guide, we’ll be peeking under the hood to see what these links look like in HTML. To write links into your web pages, you’ll need the <a> element, paired with the href attribute — let’s learn how to use both.
![Download Now: 50 Code Templates [Free Snippets]](https://no-cache.hubspot.com/cta/default/53/34adf7eb-7945-49c4-acb8-f7e177b323e5.png)
What is the HTML a href attribute?
In HTML, the inline a (anchor) element denotes a hyperlink from one web address to another. All functional a elements must contain the href (hypertext reference) attribute inside the opening a tag. The href attribute indicates the destination of the hyperlink. Without the href attribute, the a element won’t work.
For example, consider this link to the homepage of HubSpot. The HTML for that hyperlink looks like this:
<a href="https://www.hubspot.com/" rel="noopener" target="_blank" >homepage of HubSpot</a>
There are several things to note here, all important for the link to work:
- The link text is wrapped in an opening <a> tag and a closing </a> tag. All text between these tags is selectable and receives link styling.
- The href attribute, and its accompanying attributes, are placed inside the opening <a> tag.
- The attribute value of href (inside the quotation marks) is a URL that tells the browser where to go when the link is selected.
- Note the additional attributes target=“_blank” and rel=“noopener” — these tell the browser to open the web page in a new tab. Unlike href, these attributes are not necessary.
To be more precise, the link above uses an absolute URL to specify a destination on a different website. However, href can take on other values too, as we’ll see next.
a href Values
You’ll most often see the href attribute used to link to another web page on the same domain or a different domain. href can also be used for other things, like linking to a different part of the same page, or serving a different web protocol than HTTPS. Let’s review each of these possible values with examples.
Absolute URL
As discussed above, an absolute URL points to a file on another website. In other words, it’s a URL that contains a different domain name from the current page’s URL (e.g. hubspot.com).
Here’s another example: Go to Google search.
This hyperlink also contains an absolute URL:
<p>Here’s another example: <a href="https://www.google.com/">Go to Google search</a>.</p>
It doesn’t matter where this link is used — it always points to the same place, the Google homepage. That’s why it’s called an “absolute” URL.
Bonus tip: Notice how the link text describes what the link does. This makes your site more accessible to those using assistive technologies.
Relative URL
A relative URL references a file on the same website. For example, here’s a link to our Ultimate Guide to HTML.
And here’s what the code for that looks like:
<p>A relative URL references a file on the same website. For example, here’s a link to our <a href="/website/html">Ultimate Guide to HTML</a>.</p>
See how the href value looks different? It doesn’t include the protocol HTTPS or the domain name. When this part of the URL is left out, the browser assumes that the specified file is located on the same domain as the current page (in this case, hubspot.com).
We call these URLs “relative” because the destination of the link is specified relative to the current web page. If we pasted the HTML above on a page on a different website, it wouldn’t work.
Why use relative URLs in lieu of absolute URLs? The answer is that relative URLs come in handy if the file path of the linked file changes, such as in the case of a website restructuring or a domain change. If this happens, the relative URL will still work, since it only contains the name of the linked resource and not the entire file path.
URI Fragment
Use a URI fragment to link to a different part of the same web page. URI fragments begin with the hash (#) symbol, followed by the id of the desired page element.
For example, this link directs you to the H3 above this one.
<p>For example, <a href="#relative-url">this link directs you to the H3 above this one</a>.</p>
You can also use the value #top to send visitors back to the top of the page.
<p>You can also use the value <strong>#top</strong> to <a href="#top">send visitors back to the top of the page</a>.</p>
URI fragments are useful for chapter links, or any instance in which users can jump to an earlier/later section of a page.
Additional Protocols
The absolute URLs and relative URLs we’ve seen so far use the HTTP/HTTPS protocol, which serves pages on the World Wide Web. However, we can use other protocols with href too, like mailto: and file:.
For example, click this link to send an email to example@gmail.com (though we can’t guarantee you’ll hear back).
<p>For example, click this link to send an email to <a href="mailto:example@gmail.com">example@gmail.com</a> (though we can’t guarantee you’ll hear back).</p>
A Script
Lastly, you can create a link to trigger JavaScript code.
<a href="javascript:alert('Hi there!');">Click here for a nice greeting</a>.</p>
href: Creating Links on the Web
If you’re anything like me, you spend all day clicking various links to get around the web. And if you’re just learning HTML, the <a> element and its accompanying href attribute are central to understanding how web pages are tied together. By learning these concepts and how to write them, you’re a step closer to building websites on your own.
- Генератор
- href (адрес куда перейти)
- download (чтобы скачать файл, а не открыть его)
- target (где открыть страницу)
- rel (сохранить в закладки, запретить переходить по ссылке поисковому роботу)
- title (всплывающая подсказка)
- Что может быть анкором ссылки (в т.ч. изображение)
- Внешний вид ссылки с CSS
- Как запретить переход по ссылке
- Оптимизация URL адресов сайта
Простой генератор ссылок
Атрибут ссылки href
Элемент станет гиперссылкой, если тег a будет содержать атрибут href. В качестве значения href принимается адрес веб-страницы. Его называют URL. Он показан в адресной строке браузера.
Подробнее о том, что такое ссылка и где находится адресная строка браузера
<a href="URL">анкор</a>
|
|
| Пример: | <a href="http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-a-element">стандарт w3.org</a>
|
|---|---|
| Результат: | стандарт w3.org |
Всегда ли URL в ссылке начинаются с http://?
В теге a URL можно сокращать согласно установленным правилам. Сокращённую ссылку называют относительной. Она приведёт на страницу относительно точки отправления.
| Пример: | <a href="/2013/01/absolute-relative-links.html">подробнее про относительные ссылки</a>
|
|---|---|
| Результат: | подробнее про относительные ссылки Установленная на http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html приведёт на http://shpargalkablog.ru/2013/01/absolute-relative-links.html Установленная на https://ru.wikipedia.org/wiki/Ссылка приведёт на /2013/01/absolute-relative-links.html |
Когда используется слеш (символ /) в конце URL
Эти страницы для поискового робота являются разными. Они дублируют содержание друг друга (подробнее).
http://shpargalkablog.ru http://shpargalkablog.ru/
Из них выбирается основная. На Шпаргалке блоггера со слешем ( http://shpargalkablog.ru/ ), так как предполагается что будет продолжение, допустим, http://shpargalkablog.ru/2010/ . С второстепенной следует настроить перенаправление на основную с помощью 301 редиректа или rel="canonical". Если ссылка будет иметь вид
<a href="http://shpargalkablog.ru">Главная страница Шпаргалки блоггера</a>
то посетитель или, в случае rel="canonical" только поисковый робот, сначала попадёт на http://shpargalkablog.ru , а потом его перебросит на http://shpargalkablog.ru/.
Можно уменьшить время ожидания загрузки веб-документа, если пользователя сразу перемещать на нужную страницу. Чтобы не допускать ошибок, желательно копировать URL из адресной строки браузера.
Веб-документы, имеющие окончание, скажем, .html, .png, .css, считаются конечным файлом и косую черту после них писать не желательно. То есть
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html
Ссылка к заданному месту текста
На странице каждое значение идентификатора (id) должно употребляться только один раз. В CSS селектор id распознаётся благодаря хэшу (символ #) перед значением идентификатора.
<тег id="имя_закладки">анкор</тег>
|
|
| Пример: | <style>закладка №1</div>
|
|---|---|
| Результат: |
закладка №1 |
Если в адресной строке браузера к URL без пропусков добавить селектор идентификатора, то страница без перезагрузки сама прокрутится к тегу. С помощью скрипта можно сделать переход от ссылки до якоря (тег, к которому нужно перейти) плавным.
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut
<a href="URL#имя_закладки">анкор</a>
|
|
| Пример: | <a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut">ссылка к закладке №1</a>
|
|---|---|
| Результат: | ссылка к закладке №1 |
| Пример: | <a href="#tut">относительная ссылка к закладке №1</a>
|
| Результат: | относительная ссылка к закладке №1 |
| Пример: | <a href="http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#ul">ссылка к первому заголовку другой страницы «Как сделать список из вопросов, кликнув на один из которых, автоматически перемещаешься на его ответ»</a>
|
| Результат: | ссылка к первому заголовку другой страницы «Как сделать список из вопросов, кликнув на один из которых, автоматически перемещаешься на его ответ» |
В CSS есть псевдокласс :target, который отвечает за внешний вид элемента, чей селектор присутствует в URL.
| Пример: | <style>закладка №2</div><a href="#zdes">ссылка к закладке №2, которая (закладка) поменяет свой фон</a>
|
|---|---|
| Результат: |
закладка №2 ссылка к закладке №2, которая (закладка) поменяет свой фон |
Если нужно, чтобы страница перематывалась несколько выше якоря-закладки, то тегу, к которому следует перенестись, можно прописать следующий стиль
| Пример: | <style><div id="tam" class="hash">закладка №3</div><a href="#tam">ссылка перенесёт на 14em над закладкой №3</a>
|
|---|---|
| Результат: |
закладка №3 ссылка перенесёт на 14em над закладкой №3 |
Если в атрибуте href оставить только символ решётки, то при нажатии на ссылку человек попадёт к началу страницы. Сей элемент с помощью CSS стилей можно зафиксировать на экране и благодаря JavaScript показывать не сразу, а только после прохождения первого экрана (см. подробнее как это сделать).
<a href="#">анкор</a>
|
|
| Пример: | <a href="#">наверх</a>
|
|---|---|
| Результат: | наверх |
Поисковые системы не рассматривают дубликатами друг друга URL вида
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#zdes
Ссылка для отправки почты
В качестве URL следует указать mailto:адрес_электронной_почты. Несколько адресов можно перечислить через запятую. Параметры cc=копия, bcc=скрытая_копия, subject=тема, body=письмо не являются обязательными и объединены с помощью &.
<a href="mailto:email?cc=копия&bcc=скрытая_копия&subject=тема&body=письмо">анкор</a>
|
|
| Пример: | <a href="mailto:n.mitra@yandex.ru">n.mitra@yandex.ru</a>
|
|---|---|
| Результат: | n.mitra@yandex.ru |
| Пример: | <a href="mailto:n.mitra@yandex.ru,n.mitra@yandex.ru?subject=Вопрос по коду ссылки">служба поддержки</a>
|
| Результат: | служба поддержки |
| Пример: | <a href="mailto:?subject=Код ссылки в html&body=<a href='http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html'>http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html</a>">поделитесь ссылкой с друзьями</a>
|
| Результат: | поделитесь ссылкой с друзьями |
Звонок по телефону
Если нажать на ссылку, происходит набор номера на мобильных устройствах.
<a href="tel:номер">анкор</a>
|
|
| Пример: | <a href="tel:+79030000000">Позвонить</a>
|
|---|---|
| Результат: | Позвонить |
Ссылка на скачивание файла
<a href="URL" download="имя_файла">анкор</a>
|
|
| Пример: | <a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" download>скачать иконку смайлика</a>
|
|---|---|
| Результат: | скачать иконку смайлика |
| Пример: | <a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" download="smaylik">скачать иконку смайлика с именем файла «smaylik»</a>
|
| Результат: | скачать иконку смайлика с именем файла «smaylik» |
Открыть ссылку в новом окне, новой вкладке, фрейме
| * на странице есть указанный код ссылки | * на странице есть фрейм, который содержит другой фрейм со страницей, на которой есть указанный код ссылки |
<a href="URL" target="_self">анкор</a>
|
|
|---|---|
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_self">показать смайлик в текущей вкладке или текущем iframe</a>
|
|
| показать смайлик в текущей вкладке или текущем iframe | |
<a href="URL" target="_parent">анкор</a>
|
|
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_parent">показать смайлик в текущей вкладке или во фрейме-родителе</a>
|
|
| показать смайлик в текущей вкладке или во фрейме-родителе | |
<a href="URL" target="_top">анкор</a>
|
|
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_top">показать смайлик в текущей вкладке</a>
|
|
| показать смайлик в текущей вкладке | |
<a href="URL" target="_blank">анкор</a>
|
|
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_blank">показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя)</a>
|
|
| показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя) | |
<a href="URL" target="name">анкор</a>
|
|
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="raz">показать смайлик в iframe с указанным name</a>
|
|
| показать смайлик в iframe с указанным name |
Нельзя обязать браузер открыть ссылку в новой вкладке, а не в новом окне.
Игнорируя желания пользователя, с помощью JavaScript можно открыть ссылку в новом окне любого размера, а не в новой вкладке. Но в таком окне нельзя будет поменять URL в адресной строке браузера.
rel может иметь несколько значений, разделённых пробелом, например, rel="nofollow noreferrer". У whatwg.org список значений несколько больше. В таблице указаны только те, которые имеют практическое применение, так как часто устройства учитывают лишь тег link: rel="prefetch" в Mozilla Firefox [developer.mozilla.org] и Google Chrome [developers.google.com], rel="next" и rel="prev" для Google [support.google.com].
<a href="URL" rel="sidebar">анкор</a>
|
|---|
<a href="#" rel="sidebar">добавить страницу в закладках браузера</a>
|
| добавить страницу в закладках браузера |
<a href="URL" rel="noreferrer">анкор</a>
|
<a href="http://shpargalkablog.ru/" rel="noreferrer">не будет показан URL, с которого пришёл пользователь</a>
|
| не будет показан URL, с которого пришёл пользователь |
Закрыть ссылку в nofollow
Поисковые системы рекомендуют закрывать в nofollow
- ссылки на сайты с некачественным содержимым (нарушающие авторское право (плагиат), содержащие вредоносные программы (вирусы), материал только для взрослых, связанный с наркотиками, с элементами насилия и т.п.),
- платные ссылки.
Тех, кто ослушается ждёт понижение в выдаче. Поэтому ссылки, оставленные посетителями (например, в комментариях) или требуют проверки, или автоматически закрываются nofollow.
Не нужно закрывать в nofollow абсолютно все внешние ссылки. Не нужно закрывать в nofollow внутренние ссылки, допустим, расположенные в меню. Если есть необходимость, то их лучше скрыть от поисковиков с помощью Ajax.
<a href="URL" rel="nofollow">анкор</a>
|
|
| Пример: | <a href="https://support.google.com/webmasters/answer/96569?hl=ru" rel="nofollow">не передает ни PageRank, ни текст ссылки</a>
|
|---|---|
| Результат: | не передает ни PageRank, ни текст ссылки |
Поясняющий текст к ссылке при наведении курсора мышки
<a href="URL" title="всплывающая_подсказка_с_поясняющим_текстом">анкор</a>
|
|
| Пример: | <a href="http://shpargalkablog.ru/2013/12/title.html" title="про атрибут title: можно ли поменять его внешний вид, учитывается ли он поисковыми системами">наведи на меня</a>
|
|---|---|
| Результат: | наведи на меня |
Можно сделать свою всплывающую подсказку вместо той, что создаётся с помощью атрибута title.
HTML анкор ссылки
Ссылка может содержать как блочные, так и строчные элементы.
| Пример: | <a href="#"><div>блочный: ссылкой является вся строка</div></a>
|
|---|---|
| Результат: |
блочный: ссылкой является вся строка |
| Пример: | <a href="#"><span>строчный: ссылкой является только текст</span></a>
|
| Результат: | строчный: ссылкой является только текст |
Как сделать изображение ссылкой? Как сделать кликабельную картинку в HTML?
В качестве анкора нужно использовать HTML код картинки. Предварительно изображение нужно загрузить на хостинг сайта или в социальную сеть (ВКонтакте, Google+ и т.п.), чтобы у рисунка появился свой адрес в интернете — URL.
<a href="URL"><img src="URL" alt="описание изображения"/></a>
|
|
| Пример: | <a href="http://shpargalkablog.ru/2013/12/image-optimization.html"><img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик" title="HTML код картинки" height="32" width="32"/></a>
|
|---|---|
| Результат: | 
|
На одной картинке можно сделать несколько ссылок на разные страницы.
Ссылка в CSS коде
| Пример: | <style>
Что такое псевдоклассы в CSS</a>
|
|---|---|
| Результат: | Что такое псевдоклассы в CSS |
С помощью стилей CSS из ссылки можно сделать кнопку, из нескольких ссылок — меню.
Как изменить цвет ссылки
| Пример: | <a href="#" style="color: #ff0000;">ссылка красного цвета</a>
|
|---|---|
| Результат: | ссылка красного цвета |
В атрибуте style нельзя работать с псевдоклассами, то есть, скажем, нельзя изменить цвет конкретной ссылки при наведении курсора мышки. Поэтому нужно установить значение атрибута id (для одной ссылки) или class (для нескольких) и прописать стиль либо в отдельном файле .css либо в теге style.
| Пример: | <style>ссылка коричневого цвета, при наведении зелёного</a>
|
|---|---|
| Результат: | ссылка коричневого цвета, при наведении зелёного |
Значение свойства color может быть указано ключевым словом, например, red, green (список поддерживаемых [developer.mozilla.org]) или в форматах RGB и HSL. Узнать код цвета: #ff0000
Подчёркивание ссылки
За подчёркивание текста отвечает свойство text-decoration, элемента — border-bottom.
| Пример: | <a href="#" style="text-decoration: none; border-bottom: 1px dashed;">подчеркивание ссылки пунктиром</a>
|
|---|---|
| Результат: | подчеркивание ссылки пунктиром |
| Пример: | <style>подчеркивание ссылки появляется только после наведения на неё</a>
|
| Результат: | подчеркивание ссылки появляется только после наведения на неё |
| Пример: | <style>красивые текстовые ссылки</a>
|
| Результат: | трам-пам-пам красивые текстовые ссылки трам-пам-пам-пам-пам |
Ссылка — текст, кликая на который вы переходите на другую страницу. Иногда после клика открывается картинка, скачивается файл или вы переходите к другой части страницы.
В HTML ссылки создаются с помощью тега <a>. Например:
<a href="https://htmlacademy.ru">HTML Academy</a>
href — это атрибут, в котором мы прописываем адрес для перехода.
Тег <a> можно использовать вообще без адреса, то есть без атрибута href. Такой тег обозначает «ссылку-заглушку», которая в других условиях может стать обычной ссылкой. Ссылки-заглушки показывают, что мы находимся на текущей странице, и отсюда не нужно никуда уходить:
<ul>
<li><a>1 страница</a></li>
<li><a href="2">2 страница</a></li>
<li><a href="3">3 страница</a></li>
</ul>
В ссылке без href лучше оставить подсказку о том, почему мы это сделали. Подсказку можно добавить с помощью атрибута title. Подсказка появится, когда курсор задержится над ссылкой некоторое время.
Абсолютные ссылки
Если нужно сделать ссылку на другой сайт в интернете, используйте полный адрес сайта — он называется абсолютным. Выглядит он, например, так:
https://site.ru/blog/index.html
Абсолютные адреса содержат минимум три части: протокол, имя сервера и путь. В нашем случае это:
https:// — протокол, по которому мы обращаемся к сайту.
site.ru/ — имя сервера.
/blog/index.html — путь к файлу.
Если в адресе есть все эти части — это абсолютный адрес.
Относительные ссылки
Когда файл по ссылке лежит на вашем компьютере, используются относительные адреса. В отличие от «обычных» адресов, в них нет адреса сайта. Например:
day-2.html
Как написать и запустить HTML на компьютере
Относительные адреса иногда используют и для страниц в интернете. Если выложить два каких-то файла в интернет (не меняя их взаимное расположение), то их ссылка друг на друга всё равно будет работать.
Если в адресе нет имени сервера или протокола, то это относительный адрес.
Ссылки на файл
По ссылкам можно не только переходить на другие сайты, но и скачивать файлы. Для этого пропишите в атрибуте hrefссылку на этот файл. А чтобы предотвратить открытие файлов прямо в браузере, добавьте атрибут download у тега <a> .
<a href="file.pdf" download>Браузер скачает меня lt;/a>
Ссылки-якоря
Ссылка-якорь — это обычная ссылка, в адресе которой используется символ #, после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке.
<a href="#part1">Раздел 1</a>
Ссылка-якорь используется для прокрутки к заданной части страницы, в том числе используется и в абсолютных адресах.
Больше про ссылки
- Абсолютные и относительные ссылки
- Как ставить пустые ссылки
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
ТелеграмПодкастБесплатные учебники
Ссылки имеют важное значение в HTML, так как веб изначально задумывался как информационная сеть документов, связанных друг с другом.
Такая часть HTML как «Гипертекст» определяет, какой вид ссылок мы используем: гипертекстовые ссылки (или гиперссылки).
В HTML ссылки — это строчные элементы, написанные с помощью тега <a>.
Атрибут href (hypertext reference) используется для определения цели ссылки (куда вы переходите при щелчке по ней).
<p>
Чтобы найти что-либо, посетите <a href="http://www.google.com">Google</a>.
</p>Ссылки являются основным взаимодействием с веб-страницей: вы переходите от одного документа к другому, щёлкая по ссылкам.
Есть три вида цели, которые вы можете определить:
- ссылки с якорем для навигации в пределах одной страницы;
- относительные адреса, как правило, для навигации в пределах одного сайта;
- абсолютные адреса, как правило, для перехода на другой сайт.
Ссылки с якорем
Ссылки с якорем предназначены для навигации в пределах одной страницы. Предваряя значение атрибута href с #, вы можете настроить переход к элементу HTML с определённым атрибутом id.
Например, <a href=»#footer»> будет переходить к <div id=»footer»> в том же HTML-документе. Такой тип href часто используется, чтобы вернуться обратно к верхней части страницы.
Относительные адреса
Если вы хотите определить ссылку на другую страницу того же сайта, вы можете использовать относительные адреса.
Но по отношению к чему? Ну, относительно текущей страницы.
Давайте используем простой пример, в котором папка my-first-website содержит два файла HTML.
В home.html вы хотите определить ссылку на contact.html. Поскольку эти два файла находятся в одной папке, вы можете просто написать в home.html:
<p>
Перейти на <a href="contact.html">страницу контактов</a>.
</p>На реальном сайте процесс аналогичен.
Скажем, у вас есть сайт с именем http://ireallylovecats.com, на котором у вас есть две веб-страницы: index.html и gallery.html:
В index.html вы могли бы написать следующую ссылку:
<p>
Посетите <a href="gallery.html">галерею</a>!
</p>Помните: веб-сайты размещаются на компьютерах, таких же, что вы сейчас используете. Они просто называются «серверы», потому что их единственная цель состоит в том, чтобы хранить сайты. Но у них ещё есть файлы и папки, как на «обычных» компьютерах.
Абсолютные адреса
Если вы хотите поделиться с другом своей галереей кошек, то не можете просто отправить gallery.html, так как этот относительный адрес работает только для HTML-документов, которые находятся на том же компьютере или домене.
Вам нужен полный адрес вашего HTML-документа: http://ireallylovecats.com/gallery.html.
Этот URL может быть разбит на три части:
- протокол http://
- домен ireallylovecats.com
- путь к файлу gallery.html
Этот абсолютный адрес является самодостаточным: независимо от того, где вы используете ссылку, она содержит всю информацию, необходимую для поиска нужного файла на правильном домене с правильным протоколом.
Вы обычно используете абсолютные адреса для определения ссылки со своего сайта на другой сайт.
В файле http://ireallylovecats.com/gallery.html, вы могли бы написать:
<p>
Найти другие изображения кошек в моём <a href="https://twitter.com/ireallylovecats">Твиттере</a>!
</p>Относительные или абсолютные ссылки?
Допустим, вы хотите связать первую страницу со второй. Наиболее прямой подход заключается в использовании абсолютного адреса. Таким образом, вы добавляете <a href=»http://ireallylovecats.com/gallery.html»>Перейти на вторую страницу</a> в файл index.html.
Поскольку эти два файла находятся в той же папке, вы можете использовать относительный адрес с помощью <a href=»first-blog-post.html»>. Это полезно, если вы решите переместить папку: ваши ссылки не будут нарушены, так как цели ссылок относительны друг к другу, до тех пор, как вы перемещаете оба файла одновременно и держите их в одной папке. Этот относительный подход особенно полезен при переключении доменов.
Перейти к заданиям
Последнее изменение: 25.03.2016