Здравствуйте, мои постоянные и новые читатели! Возможно, для кого-то сделаю открытие, а кто-то скажет, что это очевидно – веб-страницы в сети Интернет связываются между собой. Сегодня я хочу рассказать об этой связи, без которой сложно представить Всемирную паутину.
Итак, из данной статьи вы узнаете, что такое ссылка на страницу, как ее создать на сайте, как из картинки сделать гиперссылку, чтобы при клике по изображению происходило перемещение на нужную web-страницу.
Что такое ссылка и ее виды?
Связь между страницами в сети Интернет осуществляется посредством веб-ссылок. Они представляют собой некую команду, которая отсылает пользователя на другую веб-страницу, сайт или просто перемещает к нужной части читаемого текста.
Следовательно, различают два вида web-ссылок: внутренние и внешние.
Первые – связывают контент в рамках одного сайта, просто перемещая на другую страницу, а вторые – перенаправляют пользователя на иной ресурс сети.
Таким образом, они облегчают переход от одной страницы к другой во Всемирной паутине и являются своего рода паутинками, которые плетут Глобальную сеть.
Выявить гиперссылку очень легко, она на веб-странице обозначается по-особому, как правило, подчеркнутым шрифтом синего цвета (если по ней еще не переходили, или иным цветом, если переход уже осуществлялся ранее).
Различают прямые и анкорные веб-ссылки. Первые представляют собой url-адрес страницы, на которую попадет пользователь после нажатия на нее. А вторые подразумевают использование анкоров (якорей). В них урл-адрес веб-ресурса явно не отображается, вместо него пользователь видит обычный текст (анкор), который выделен особым образом, но об этом позже.
Как создать?
Для того, чтобы создать любой элемент сайта используется язык html (Hypertext Markup Language), в нем предусмотрены различные теги (команды), с помощью которых можно создавать и веб-ссылки. Для их создания используют тег «a» с атрибутом «href», в котором прописывается адрес, куда необходимо перенаправиться.
Реализуется это следующим образом:
<a href = «url»>анкорная часть</a>
Где «url» – адрес в Интернете, к которому ведет гиперссылка, а «анкорная часть» – это текст (фрагмент статьи), прописанный в браузере по-особому (цветом, шрифтом).
Как уже говорилось, при использовании анкорной ссылки пользователь не видит адрес ресурса (url), на который он будет перенаправлен при нажатии на нее, а видит только текст анкора. Для создания прямой web-ссылки вместо анкорной части прописывают урл.
Есть еще ссылки с относительным адресом, они считаются сокращенными и ведут на веб-страницу относительно точки отправления. Приведу пример:
<a href = «пример.html»>пример</a>
Если такая web-ссылка будет прописана на странице http://мой_блог.ru/2015/новый_пример.html, то она приведет на http://мой_блог.ru/2015/пример.html.
Таким образом можно прописывать все внутренние ссылки.
Каждая веб-ссылка может открываться как в текущей вкладке браузера, так и в новом окне. Для того, чтобы осуществить второй вариант, к коду нужно добавить атрибут target="_blank". Тогда код будет выглядеть так:
<a href = «name.ru» target="_blank">смотреть здесь</a>
Уже было сказано, что чаще всего веб-ссылки выделяют синим цветом, но можно задать и любой другой. Чтобы вручную прописать нужные параметры с помощью html-кода, вам понадобятся следующие атрибуты:
- Link — цвет не посещенной гиперссылки;
- Alink — активной или выделенной ссылки;
- Vlink — уже посещенной web-ссылки.
Они указываются в теге <body>:
<body link="#000000" alink="#111111" vlink="#080808">
Как видно из примера, цвета задаются в шифрованном виде (16-ричный код). Для того, чтобы узнать какой числовой шифр соответствует выбранному вами цвету, можно воспользоваться редакторами изображений (например, фотошопом) или же специальными программами для определения цветового кода.
Как сделать из картинки гиперссылку?
Язык HTML позволяет любое изображение в статическом (фото, рисунок и пр.) или динамическом (видео или анимация) формате превратить в web-ссылку, чтобы при нажатии на него пользователь перенаправлялся туда, куда нужно.
Итак, чтобы добиться желаемого результата, нужно перед тегом изображения прописать тег гиперссылки. То есть используется картинка вместо анкора. Выглядит это таким образом:
<a href="url"> <img src="адрес картинки"/></a>
Если заинтересовались командами html языка, то рекомендую к прочтению еще одну статью «как создать простую web-страничку».
Надеюсь, что данная статья вам принесла пользу и знания, и отныне вы наверняка знаете, как сделать ссылку на любую web-страницу сети на своем ресурсе. Делитесь полученной на блоге информацией с друзьями в социальных сетях, думаю, им тоже будет интересен изложенный материал. Подписывайтесь на обновления, до встречи!
С уважением! Абдуллин Руслан
Загрузка...
РегРу 
SendPuls 
Seolib 
Спасибо за подробную инструкцию! Очень важно уметь прописывать ссылки, а не только использовать команды Вордпресса. Теперь можно самостоятельно связывать страницы на сайте, просто указав a href.
Если у вас вордпресс, то это может, конечно, и не пригодиться. Но мне пригождается. Я очень люблю понимать, как всё устроено
Это очень правильно — вникать во всё и всегда. Тогда для Вас не будет проблемы исправить на блоге всё, что нужно. Или проверить мастера, сделавшего это.
Для тех, кто не использует Вордпрес такая пошаговая инструкция то, что надо, вы правы. Все очень подробно и доступно — любой разберется.
Опять же — спасибо Вордпрессу, что в чем-то сократил работу блогерам. Не нужно заниматься вручную прописыванием ссылок. Но знать надо всё равно.
По крайней мере, прочитаешь вот такую статью с разъяснениями — как создаются ссылки , и, хотя бы отчасти становится понятно, что «не боги горшки обжигают».
Да и тегами как-то привычнее. В свое время я получала базовые знания по html, потом забросила. И когда создавала блог, даже не замечала этих кнопок для создания ссылок.
Хорошо, что есть базовые знания — они очень быстро восстановятся с практикой, вот увидите!
Создание собственного блога и столкновение со всеми встречающимися трудностями — это и есть самая настоящая практика.
У Дили уже, значит, есть преимущетва перед обычными пользователями. Она знает html, и ей уже легче.