Весь интернет связан ссылками. Любая страница сайта, которую вы когда-либо видели, содержит множество ссылок. При чем, ссылки html могут быть совершенно разными — текстовая ссылка на внутреннюю страницу сайта, на страницу другого сайта, ссылка-картинка, на что либо.
Для начала, давайте определимся, что такое гиперссылка:
Гиперссылка — это часть html кода страницы, которой может быть что угодно (анимация, текст, картинка). Этот код (ссылка) ведет на какой-то объект или страницу сайта, расположенного в интернете. По умолчанию, гиперссылка выделяется синим цветом.
Если вам необходимо создать html ссылку на другой сайт, используйте тег <a> с атрибутом href. Выглядеть это должно так:
<a href=»URL внешнего ресурса, на который вы хотите сослаться»>Анкор ссылки</a>
<a> — это тег html, который сообщает браузеру, что начинается ссылка.
href=»URL» — это атрибут тега <a>, которому присваивается значение url (вместо url, должен стоять адрес ресурса, на который необходимо сослаться). В нашем примере, после значения этого атрибута закрывается тег <a>.
Анкор ссылки — это часть, которую видит пользователь.
</a> — закрывающий тег ссылки. Если забыть его поставить, то весь текст на странице, после открывающего тега, будет являться гиперссылкой.
Теперь к практике: допустим, вы хотите сослаться на главную страницу этого блога с анкором Free-Webmaster. Тогда следует прописать такой html код:
<a href=»http://free-wester.ru»>Free-Webmaster</a>
Выглядеть это будет так:
Free-Webmaster
Как видите, всё довольно просто. И дальше будет не сложней.
Как сделать картинку ссылкой в html
Довольно часто, у нас появляется необходимость создать ссылку в виде картинки. Например, баннер на сайте. Ниже опишем, как это выглядит и некоторые тонкости картинок как ссылок.
Так выглядит картинка ссылка в коде html:
<a href=»URL»><img src=»URL картинки, загруженной на хостинг»></a>
Как и в текстовой ссылке, тег <a> и его атрибут href означают то же самое.
<img> — тег, который отображает картинку на веб-странице.
src — атрибут тега <img>, в значении этого атрибута должен быть указан путь к графическому файлу.
Давайте сошлемся на главную этого блога, как в прошлом примере, только вместо надписи Free-Webmaster, в качестве ссылки будет выступать картинка:
<a href=»http://free-wer.ru»><img src=»ssilka_ls.jpg»></a>
Небольшая фишка: если вам нужно, чтобы в качестве ссылки выступал и текстовый анкор, и картинка — просто вставьте анкор:
<a href=»URL»><img src=»URL картинки, загруженной на хостинг»> АНКОР</a>
HTML ссылки внутри страницы
Наверняка, путешествуя по различным веб-страницам, вы видели внутренние ссылки. После нажатия на ссылку, ваш экран перемещается на определенную область страницы. Это и есть внутренние ссылки html.
Механизм создания таких гиперссылок похож на закладки в книге. Ничего сложного, сейчас вы в этом убедитесь.
Алгоритм создания.
1-ое действие. Создаем якорь (закладку, чтоб было понятнее) и размещаем его в то место страницы, в которое хотите чтобы перемещало пользователя:
<a name=»NazvanieYakoria»></a>
Желательно создавать понятные названия якорей, чтобы в будущем не запутаться.
2-ое действие. Теперь можно создать внутреннюю ссылку:
<a href=»#NazvanieYakoria»>Анкор ссылки</a>
Как видите, атрибут href приобретает значение необходимого якоря. Чтобы браузер понимал, что в ссылке не ошибка, а название якоря, добавляется символ #. Анкор внутренней ссылки не отличается от обычной.
Приведем некоторый пример. Создадим ссылку, которая переместит вас в начало этой страницы:
Небольшая фишка: когда вы переходите по внутренней html ссылке, если посмотрите в адресную строку браузера, заметите что к обычному адресу веб-страницы добавилось название якоря. На примере этой страницы:
Как это можно использовать в своих целях? Просто скопируйте адрес с анкором и отправьте другу, на форум, в соц сеть и т.д. И все, кто перейдет по такой ссылке, попадут на то место, где проставлен анкор.
На страницах, где пользователю предоставлено очень много информации, без внутренних ссылок не обойтись.
HTML ссылка в файле
Иногда необходимо создать ссылку в файле. Довольно редко, но кому-то может пригодиться. Суть в том, что того, кто открывает файл, перебрасывает по ссылке из него.
Алгоритм создания такого файла:
В текстовом редакторе создаем документ
В этом документе пишем:
[InternetShortcut]
URL=http://Ардес сайта
Присваиваем документу расширение .url
Файл-ссылка готов.
HTML ссылка на электронную почту
Гораздо удобней не заставлять пользователя копировать почтовый адрес, затем вставлять его в строку «Получатели», а просто предоставить ему ссылку.
Чтобы сделать и разместить html ссылку на почту, воспользуйтесь таким кодом:
<a href=»mailto:почтовый адрес»>Анкор ссылки</a>
После нажатия на такую ссылку, у пользователя открывается окно почтового клиента, а в строке получателя указан почтовый адрес из ссылки.
Абсолютные и относительные ссылки в html
Различать и использовать абсолютные и относительные ссылки очень важно. Ведь, если нету навыка использования хотя бы одного их вида, вы теряете много возможностей. Про абсолютные ссылки вы всё узнали из информации выше. Чтобы понять/вспомнить, что такое абсолютная ссылка html, посмотрите на этот код:
<a href=»адрес сайта»></a>
Это и есть абсолютная ссылка.
Из названия «относительная ссылка» должно быть понятно, что такая ссылка указывает объект, который находится по адресу относительно другого объекта/объектов. Такие ссылки придется использовать, если вы занимаетесь разработкой на локальном сервере (или просто на компьютере).
Давайте представим, что мы создали небольшой сайт (несколько страниц). Это сайт визитка небольшой юридической фирмы. У нас есть несколько папок:
Основная папка с сайтом, где находятся все файлы, в том числе glavnaya.html и папки со страницами.
Папка KontaktnayaInfo , в которой размещены страницы o-kompanii.html, kontakty.html
Папка Uslugi, в которой размещены страницы услуг, размещена папка OformlenieFirmy, и в папке OformlenieFirmy размещена страница registraciya.html
У нас есть файл в основной папке. И с этого файла мы будем размещать ссылки.
Если нам нужно разместить ссылку на главную страницу, она будет выглядеть так:
<a href=»/glavnaya.html»>Анкор ссылки</a>
Если необходимо создать ссылку на страницу о компании, пишем:
<a href=»/KontaktnayaInfo/o-kompanii.html»>Анкор ссылки</a>
Теперь представим, что мы хотим поставить ссылку со страницы o-kompanii.html на страницу kontakty.html:
<a href=»kontakty.html»></a>
Ccылка со страницы glavnaya.html на страницу registraciya.html будет выглядеть следующим образом:
<a href=»../../registraciya.html»></a>
Давайте разберем эту ссылку: нам необходимо указать путь к странице registraciya.html. Относительно папки со страницей glavnaya.html, нам нужно зайти в папку Uslugi, потом в папку OformlenieFirmy. В ссылке мы указываем это так: ../ — выйти из основной папки, второй раз ../ показывает, что необходимо выйти из папки услуги и просканировать все папки, которые находятся в папке Uslugi на наличие страницы registraciya.html.
На самом деле, ничего сложного, всё банально просто. Советуем внимательно отнестись к механизму создания относительных ссылок html. Чтобы понять и применить этот механизм, уйдет максимум 40-60 минут.
Оформление ссылок на сайт
css1
Оформление ссылок происходит при помощи CSS стилей. То есть, механизм следующий:
В теге <style> присваеваем html тегу ссылки <a> некоторые атрибуты. Выглядеть это будет так:
<style>
a {
color: #667387
font-size: 5em
}
</style>
Тег <style> должен находиться в теге <head>. Атрибутов, которые вы можете присвоить ссылке, довольно много. Но, чтобы овладеть ими и понять возможности CSS, необходимо немного поучиться.
Также, в ссылка можно присвоить удобный атрибут title. Выглядеть в коде он будет так:
<a href=»URL сайта» title=»Текст, который увидит пользователь при наведении на ссылку»>Анкор ссылки</a>
Суть этого атрибута в том, что когда пользователь наводит курсор на ссылку, он увидит небольшую подсказку, которую вы впишете в значение title.
Как открыть html ссылку в новой вкладке
Если вы хотите, чтоб при нажатии на ссылку, у пользователя она открывалась в новой вкладке (что очень удобно), необходимо задать ей атрибут _blank. Например, код ссылки на главную этого сайта будет выглядеть так:
<a href=»http://free-webmaster.ru» target=»_blank»>Анкор ссылки</a>
Если вы работаете в интернете, научиться работать с html ссылками очень важно. Так как всё в интернете построено на ссылках. Обязательно, после изучения каждого абзаца этой статьи, делайте эксперименты. Для этого вам понадобится текстовый редактор, желательно notepad++. В нем очень удобно создавать html страницы.
В сфере инвестиций в недвижимость выбор типа недвижимости может существенно повлиять на доходность и долгосрочную…
1 000 000 человек уже занимаются ГОРЯЧИМ майнингом, и мы рады сообщить, что открываем новый…
NEAR Wallet — это мини-приложение в Telegram для хранения NEAR, USDT и добычи HOT. Майнинг…
Аренда коммерческой недвижимости — это ключевой элемент успешного бизнеса в любом городе, включая Энгельс. Это не просто…
В наше время все больше предпринимателей обращают внимание на перспективы покупки готового бизнеса, особенно в…
Новый 2024 год в криптосообществе начался с ажиотажа по поводу новой игры и потенциально будущей…