Самое важное о ссылках в HTML
Для добавления ссылки в HTML документ, используют тег a (anсhor) вместе с атрибутом href. В данном атрибуте прописывается адрес, ведущий на внешний ресурс или внутреннюю страницу сайта. При клике на ссылку, пользователь будет перенаправлен по указанному адресу.
Цвет ссылки
По умолчанию браузеры отображают ссылки подчеркнутыми и синего цвета, а посещенные ссылки окрашивают в фиолетовый цвет.
<a href=»https://myrusakov.ru/»>Как создать свой сайт</a>
Абсолютная ссылка
Абсолютная ссылка указывает полный путь до HTML страницы или до файла. На практике их используют, когда нужно сослаться на внешний ресурс.
Относительная ссылка
Относительные ссылки, как правило используют в пределах одного сайта и указывают путь от корня сайта или от текущего документа.
Ссылка на файл
Кроме основной задачи (переадресации), с помощью ссылки запускается механизм на скачивание файлов. В атрибуте href указывается путь до файла и атрибут download. Наличие данного атрибута, предлагает браузеру не переходить по адресу, а скачать файл, указанный в адресе ссылки.
<a href=»file.doc» download>Ссылка скачать файл</a>
Открытие ссылки
По умолчанию ссылка открывается (осуществляется переход пользователя) на другую страницу или сайт в том же окне браузера. Открытие ссылки в текущем окне в пределах одного сайта не является проблемой. Но все меняется, если мы имеем дело с ссылкой на внешний ресурс. Пользователь уходит по ссылке на другой сайт и не всегда потом может вернуться назад. Поэтому удобнее, когда внешняя ссылка открывается в новом окне. Для этого существует атрибут target. С помощью него можно указать, как будет открываться страница, на которую осуществляется переход. Значение _blank у атрибута target открывает страницу в новой вкладке.
<a href=»https://myrusakov.ru/» target=»_blank»>Myrusakov.ru</a>
Ссылка на телефон
Одно нажатие по ссылке на телефон сработает (произойдет вызов номера) при заходе на сайт с мобильного телефона. Пользователю не нужно копировать или куда-то записывать номер телефона. Достаточно в атрибуте tel прописать номер телефона в международном формате.
Ссылка на почту
Кликнув по ссылке на адрес электронной почты, в браузере откроется программа для отправки писем с адресом получателя.
Ссылка якорь
Ссылка якорь нужна для навигации в пределах одной страницы. Обычно якоря используют на длинных одностраничниках и размещают в верхней панели навигации. Пользователь кликает на пункт меню и поисходит автоматический скролл до выбранной секции.
Пользователь кликает на ссылку-якорь в навигационной панели.
и его перебрасывает в footer.
Как кнопку сделать ссылкой?
Тег button не может быть ссылкой, если он не находится внутри формы. Кроме того расположение ссылки как внутри тега button, так и снаружи не валидно.
Так что же делать? Отказаться от тега button и стилизовать класс, как у обычной ссылки.
<a href=»url» >Кнопка со ссылкой</a>
.btn <
display: inline-block; /* Строчно-блочный элемент */
background: #d81b6b; /* Красный цвет фона */
color: #fff; /* Белый цвет текста */
>
Активная ссылка
Ссылка, на которую нажал пользователь, является активной. Чтобы как-то её выделить среди остальных ссылок, можно в CSS стилях задать ей другой цвет через псевдокласс active.
Ссылка при наведении
Чтобы изменить внешний вид ссылки (как правило цвет), при наведении на неё курсора, следует задать ей псевдокласс hover.
Ссылка на изображение
Если поместить изображение внутри ссылки, то оно само станет ссылкой.
В сайтостроении, как и в большинстве темах, теория не работает без практики. Лучше всего смотреть, как делают верстку профессионалы и повторять за ними. Мой видеокурс «Вёрстка сайта с нуля 2.0» нацелен именно на такой формат обучения.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
HTML :: Гиперссылки
Для создания гиперссылок в HTML используется элемент «a» , который формируется парным тегом <a> (от англ. anchor – якорь). Все, что находится внутри элемента «a» является гиперссылкой.
(от англ. hyperlink – гиперссылка) – это часть гипертекстового документа, которая ссылается на другие элементы в самом документе (текст, изображение и т.д.) или другие объекты вне данного документа (другой документ, видеофайл и т.д.).
Атрибут href гиперссылки
Чтобы указать адрес объекта, на который будет совершен переход по ссылке, используется атрибут href . В качестве значения он принимает абсолютный или относительный адрес документа. Примерами абсолютных адресов могут служить https://www.google.com или https://yandex.ru . Абсолютные адреса действительны в любом месте, независимо от сайта, на котором расположена ссылка. А вот относительные адреса формируются относительно текущей папки документа, в котором прописана данная ссылка, или корня сайта. Примеры относительных адресов мы рассмотрим в конце пункта.
Напомним, что в случае использования сборки Xampp для размещения создаваемых в ходе изучения веб-страниц на локальном сервере, их нужно помещать в папку /xampp/htdocs . А еще лучше создать в htdocs отдельную рабочую папку, например, test , и уже в ней сохранять тестируемые страницы. Тогда абсолютный адрес, например, для страницы page_1.html будет иметь вид http://localhost/test/page_1.html . Указывать нужно именно http://localhost/. , а не фактическое расположение файла на компьютере, иначе могут возникнуть проблемы с отображением страницы.
Атрибут target гиперссылки
По умолчанию, при переходе по ссылке браузер открывает документ в текущем окне или фрейме. Чтобы изменить такое поведение браузера, используется атрибут target , который в качестве значения принимает одно из зарезервированных значений «_self | _blank | _parent | _top» или имя целевого окна или фрейма, которое устанавливается их атрибутом name . Если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне. Значение «_self» установлено по умолчанию. Если использовать значение «_blank» , то браузер откроет документ в новом окне или фрейме; если «_parent» – в родительском фрейме, а в случае отсутствия такового, в текущем окне; если «_top» – в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как «_self» .
Атрибут download гиперссылки
В HTML 5 был введен еще один полезный атрибут download, который не принимает значений, а служит индикатором того, что браузер не совершит переход по ссылке, а предложит закачать файл, указанный в атрибуте href в качестве значения.
Также в элементе «a» могут использоваться атрибуты rel , hreflang и type . Мы их использовать скорее всего не будем. Однако, если информация о них все таки понадобится, то можно обратиться к нашему справочнику здесь.
Рассмотрим применение гиперссылок на примере №1 .
Пример №1. Использование гиперссылок
Использование гиперссылок для создания якорей на странице
Элемент «a» может использоваться и в качестве гиперссылки для перехода внутри страницы. Для этого в нужном месте документа необходимо создать (от англ. anchor), т.е. закладку, и указать ее в качестве цели в гиперссылке. Создается якорь при помощи пустого элемента «a» , в открывающем теге которого указывается атрибут id. В качестве якоря можно также использовать и требуемый элемент разметки, к которому в дальнейшем будет вести внутренняя гиперссылка. Для этого нужно просто указать в нем атрибут id. Далее в атрибуте href самой гиперссылки в качестве значения указывается символ решетки # и значение атрибута id якоря. Чтобы стало понятнее, рассмотрим все на примере №2 .
Пример №2. Использование внутренних гиперссылок
Обратите внимание на наличие якоря в абсолютном адресе, указанном в качестве значения атрибута href во втором абзаце примера. При использовании такой гиперссылки, браузер сначала перейдет по указанному адресу, а затем прокрутит страницу до места расположения указанного якоря. Если якоря на странице не окажется, страница будет показана с самого начала.
Относительные гиперссылки и построение относительной адресации
В заключение пункта рассмотрим принцип построения относительных адресов. Пусть наша гиперссылка находится в документе, расположенном на сервере по адресу https://site.name/ doc_1/ doc_2/ . /doc_n/ web_page.html , где doc_n – папка n -го уровня вложенности. В этом случае папка doc_n , в которой находится наш документ с гиперссылкой, автоматически принимается за основу, относительно которой и строится вся адресация. Итак:
- Если нужно, чтобы ссылка вела на целевой документ new_page.html , расположенный в той же папке doc_n , что и наш исходный документ с гиперссылкой, то в качестве значения атрибута href ссылки нужно просто задать имя целевого документа: href=»new_page.html» .
- Для перехода к целевому документу new_page.html , расположенному в папке https://site.name/ doc_1/ doc_2/ . /doc_n/ doc_n_1/ . doc_n_k/ , значение атрибута href ссылки должно включать только папки, вложенные в doc_n , и, конечно же, имя целевого документа: href . Таким образом, мы указываем браузеру, что он должен зайти в папку doc_n_1 , расположенную в папке doc_n с исходным документом, в котором прописана гиперссылка, затем в папку doc_n_2 и так далее, пока не попадет в папку doc_n_k с находящимся там целевым документом, который он и должен открыть.
- Чтобы попасть в папку на уровень выше исходной, используется специальная комбинация символов ../ . Для перехода на n уровней вверх нужно записать комбинацию ../ n раз подряд. Так в нашем случае, чтобы перейти по ссылке к целевому документу https://site.name/ doc_1/ doc_2/ . /doc_n-3/ new_page.html атрибут href ссылки должен иметь значение «../../../new_page.html» . Тем самым мы сообщаем браузеру, что он должен подняться в папку doc_n-1 , затем doc_n-2 и doc_n-3 , после чего открыть находящийся там целевой документ new_page.html .
- Если же необходимо не просто подняться на несколько уровней вверх, но и зайти там в папку (или несколько вложенных папок), для получения доступа к целевому документу, то в значении атрибута href ссылки сперва нужно прописать требуемое количество уровней поднятия вверх при помощи символов ../ , а затем дописать путь из полученной папки к целевому документу. Например, если целевой документ расположен в папке new_doc и адресный путь к нему имеет вид https://site.name/ doc_1/ doc_2/ . /doc_n-3/new_doc/ new_page.html , то атрибут href ссылки должен иметь значение «../../../new_doc/new_page.html» . Т.е. мы указываем браузеру, что он должен подняться на три уровня вверх относительно исходной папки doc_n , в которой находится документ с гиперссылкой, а затем зайти в папку new_doc и открыть целевой документ new_page.html
В качестве примера вы можете скачать учебный минисайт, построенный полностью на основе относительной адресации. После просмотра поэкспериментируйте, изменяя и создавая новые ссылки, папки и страницы.
Относительные гиперссылки очень удобны при разработке браузерных офф-лайн приложений, например, справочных руководств. Однако следует помнить, что при переносе документа из текущей папки в другую, все относительные ссылки в нем перестанут работать. Поэтому их придется переписывать. Если же относительные ссылки указывают на файлы, которые также находятся внутри текущей папки либо во вложенных папках, то после переноса данной папки в другое место все ссылки в документе останутся рабочими.
Урок 8: Ссылки
В этом уроке вы научитесь создавать ссылки — переходы с одной страницы на другую.
Что необходимо для создания ссылки?
Для создания ссылки вы используете то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом — и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на HTML.net:
Пример 1:
будет выглядеть в браузере:
Элемент a обозначает «якорь/anchor». Атрибут href это сокращение от «hypertext reference/гипертекстовая ссылка», специфицирующий место, на которое выполняется переход по данной ссылке — обычно это internet-адрес и/или имя файла.
В примере атрибут href имеет значение «http://www.html.net», которое является полным адресом HTML.net и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что»http://» всегда должно входить в состав URLов. Слова «Это ссылка на HTML.net» это текст, который показывается в браузере как ссылка. Не забудьте закрыть тэг </a> .
Как насчёт ссылок между моими собственными страницами?
Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:
Пример 2:
Если page 2 помещена в подпапку «subfolder», ссылка выглядит так:
Пример 3:
В обратную сторону ссылка со страницы page 2 (в подпапке subfolder) на page 1 будет такой:
Пример 4:
Сочетание «../» указывает на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка. Следуя этой логике, вы можете также указать на два уровня выше «../../» или более.
Разобрались? Альтернативно вы всегда можете указать полный адрес файла (URL).
А ссылки внутри страницы?
Вы можете также создавать ссылки-переходы внутри самой страницы — например, оглавление со ссылками на главы. Всё, что вам необходимо, — использовать атрибут id и символ «#».
Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:
Теперь можно создать ссылку на этот элемент с помощью знака «#» в атрибуте ссылки. Знак «#» сообщает браузеру, что это переход на той же самой странице. После «#» должен следовать id тэга, на который выполняется переход. Например:
HTML Button Link Code Examples – How to Make HTML Hyperlinks Using the HREF Attribute on Tags
In this article, we are going to explore three different ways you can make an HTML button act like a link.
These are the methods we’ll go over:
- Styling a link to look like a button
- Using the action and formaction attributes in a form
- Using the JavaScript onclick event
But first, let’s take a look at the wrong approach.
Why doesn’t this approach with the a element work?
The code snippet below leads to the freeCodeCamp website when it is clicked.
However, this is not valid HTML.
This is considered bad practice because it makes it unclear as to the user’s intent.
Links are supposed to navigate the user to another part of the webpage or an external site. And buttons are supposed to perform a specific action like submitting a form.
When you nest one inside the other, it makes it confusing as to what action you want performed. That is why it is best to not nest a button inside an anchor tag.
How to style a link to look like a button with CSS
This first approach does not use the button at all. We can style an anchor tag to look like a button using CSS.
This is the default HTML styling for an anchor tag.
We can add a class to the anchor tag and then use that class selector to style the element.
If you wanted the link to open up a new page, you can add the target=»_blank» attribute like this:
Then, we can add a background color and change the font color like this:
The next step would be to add some padding around the text:
Lastly, we can use the text-decoration property to remove the underline from the text:
Now we have an anchor tag that looks like a button.
We can also make this «button» be a little more interactive by changing the background color depending on the state of the link.
We could get more intricate with the design, but this is just to show you the basics of styling a link like a button.
You could also choose to use a CSS library like Bootstrap.
If your project already includes Bootstrap, then you can use the built-in button styles. But I would not import Bootstrap just to style one link.
What are the issues with this approach?
There is some debate whether it is good practice to style links as buttons. Some will argue that links should always look like links and buttons should look like buttons.
In the web book titled Resilient Web Design, Jeremy Keith states that
Why did I bother to bring up this debate?
My goal is not to make you choose one side of the debate over another. I just want you to be aware of this ongoing discussion.
How to use the action and formaction attributes to make a button in a form
How to use the action attribute
Another alternative would be to nest the button inside a form and use the action attribute.
This would be the default button style.
We could use the same styles as earlier, but we would have to add the cursor pointer and set the border to none, like this:
How to use the formaction attribute
Similar to the previous approach, we can create a form and use the formaction attribute.
You can only use the formaction attribute with inputs and buttons that have type=»image» or type=»submit» .
Is this semantically correct?
While this appears to be a working solution, there is a question if this is semantically correct.
We are using the form tags but this does not function like a real form. The purpose of a form is to collect and submit user data.
But we are using the submit button to navigate the user to another page.
When it comes to semantics, this is a not a good way to use the form tags.
Side effects for using the action and formaction attributes
When you click on the button, something interesting happens with the URL. The URL now has a question mark at the end of it.
The reason for this change is because the form is using the GET method. You could switch to the POST method, but there might be cases where that is not ideal either.
While this approach is valid HTML, it does come with this unintended side effect.
How to use the JavaScript onclick event to make a button
In the previous approaches, we have looked at HTML and CSS solutions. But we can also use JavaScript to achieve the same result.
The location.href represents the location of a specific URL. In this case, Window.location.href will return https://www.freecodecamp.org/.
Drawbacks to this approach
While this solution does work, there are some potential issues to consider.
If the user has decided to disable JavaScript in their browser, then clearly this solution would not work. Unfortunately, that could lead to a poor user experience.
Conclusion
The goal of this article was to show you three different ways you can make buttons act like links.
The first approach was to design a link to look like a button. We also looked into the debate whether it is a good idea to change the appearance of links to look like another element.
The second approach used the form and formaction attributes. But we also learned that this approach has some side effects with the URL and is not semantically correct.
The third approach used the JavaScript onclick event and the Window.location.href. But we also learned that this approach might not work if the user decides to disable JavaScript in their browser.
As a developer, it is really important to look at the pros and cons of a particular approach before incorporating it into your project.