Урок 36 Как сделать на сайте ссылку, гиперссылка, html якорь, как сделать картинку ссылкой

03.09.201618486

Всем привет на prosmo3.ru . Продолжаем серию как что где почем. Сегодня мы узнаем что такое ссылка, как сделать ссылку на сайте и как из картинки сделать ссылку, чтобы при клике на нее происходило перемещение на нужную статью или сайт.
как сделать на сайте ссылку


Как вы помните ссылки являются одним из трёх факторов, которые влияют на поисковой продвижение. Гиперссылка это по своему значению тоже самое, что и просто ссылка. Гиперссылка более научный термин который определяет адрес того или иного элемента в интернете, например адрес конкретного сайта.

Что такое ссылка (гиперссылка) и как сделать html якорь

Как я уже говорил гиперссылка это адрес, по которому мы во всемирной паутине интернете можем добраться до любого элемента, по ссылке можно найти картинку, видео, фотографию, музыку и любые другие элементы.

А количество, качество и анкоры ссылок помогают нам в продвижении, с помощью ссылок мы можем занимать топовые позиции выдачи. Если гиперссылка ведет на документы внутри одного домена, то такая гиперссылка будет называться внутренней. В противном случае гиперссылка ведущая на другие ресурсы в интернете будет являться внешней.

Если вы нажмете на ссылку (гиперссылку) вы попадете на страницу указанную в ссылке. Естественно ссылки на несуществующие документы приведут к странице ошибки 404 (Not found - не найдено) , которая вызывается если не найден никакой документ по указанной ссылке.

Для создания любых элементов сайта используется язык html, в этом языке есть различные теги. Для создания ссылок используется тег a, с атрибутом href, в котором указывается гиперссылка на документ или страницу сайта. Атрибут Href является обязательным для всех ссылок. Не забываем что о доходе сайта можно прочитать тут.

Если вы будете прописывать гиперссылку в визуальном редакторе, то вы не увидите ее настоящего вида, для просмотра полностью в html языке необходимо зайти в редактор html или просмотреть исходный код.

Для этого выделяете ссылку и правой кнопкой мыши нажимаете на нее, в выпавшем меню выбираете просмотреть исходный код. Таким образом можно просмотреть исходный код не только гиперссылок, но и любого другого элемента сайта.

При создании внутренних ссылок могут использоваться html якоря, которые позволяют мгновенно перенестись не к началу документа при нажатии на гиперссылку, а к месту в тексте где вы поставили метку или якорь.

Тем самым упрощается юзабилити сайта для пользователей, им будет очень удобно попадать сразу к необходимому месту в тексте. Очень хороший пример работы Html якорей вы можете посмотреть на сайте Википедии. Например по запросу заработок с правой стороны вы увидете содержание, при нажатии на любое меню которого гиперссылка перенесет вас конкретно к выбранному пункту в меню.

Как сделать на сайте ссылку (гиперссылку)

Итак для того, чтобы сделать ссылку воспользуемся тегом "a" с пропиской атрибута "Href" . Создание гиперссылки таким образом позволит нам ссылаться, как на внешние ресурсы, так и на ресурсы находящиеся на самом сайте. В атрибуте href прописывается гиперссылка в виде пути до сайта или конкретно к странице. Ссылка пример (ссылка html код):

<a href="путь до сайта, файла или страницы"> текст гиперссылки или по другому ссылки анкор</a>

Если после пути сайта или страницы стоит знак слеш "/" , то это будет означать, что адрес будет проходить через папку конкретного сайта, а если на конце будет расширения типа ".html" , то это означает, что гиперссылка ведет к конкретному файлу. Многих может интересовать как сделать регистрацию на сайте, не стесняемся, читаем в следующем уроке.

При создании ссылок всегда следует думать о том, в каком окне открывать данные ссылки. Можно открывать ссылки двумя способами:

  1. В том же окне, где вы нажали на ссылку.
  2. В новом окне, которое будет загружаться после нажатия на гиперссылки.

Изначально, открытие гиперссылок осуществляется в том же окне, если вы хотите открыть ссылку в новом окне, вам необходимо прописать атрибут ссылки Target.

<a href="http://prosmo3.ru" target="_blank">С помощью атрибута target="_blank гиперссылка откроется в новом окне"</a>

Как сделать html якорь для ссылки

Повторюсь еще раз html якорь позволяет нам перенестись в необходимое тематическое место в конкретной статье сайта. Для того чтобы нам использовать данную возможность необходимо 2 вещи:

  • Создать якорь в нужном месте.
  • Прописать ссылку на страницу с нужным якорем.

Данные ссылки еще называют хеш ссылками и прописываются они таким образом. В теге "а" после атрибута  "href" указывается метка якоря, которую предварительно мы должны вставить в нужное место. Для этого переходим в Html редактор и прописываем в нужном месте ссылку вида

<a name="якорь_метка"></a>

Данную якорь метку я прописал на этой странице, посвященной вопросу что такое гиперссылка? Давайте просмотрим как это работает, для этого мы указываем хеш ссылку, при нажатии на которую, мы перенесемся в желаемое место.

<a href="#якорь_метка"> просмотреть что такое ссылка </a>

Как видите в создании html якоря и ссылки для него ничего сложного нет. Для создания метки якоря можно использовать второй способ, который заключается в прописке атрибута ссылки "id" # для заголовков в статье, выглядит это так:

<h2 id="название_якоря_метки"> Текст заголовка </h2>

Прописывать названия якорей ссылок необходимо латиницей.

Как сделать картинку ссылкой и как поменять цвет ссылки

Для того чтобы картинка стала ссылкой необходимо перед выводом тега картинки прописать тег ссылки "a". Картинка в интернете это тот же самый кусочек текстовой информации, поэтому вид ссылки на картинку будет такой:

<img src="http://prosmo3.ru/wp-content/uploads/2012/08/seo-эксперимент.jpg" alt="На главную" title="Перейти на главную страницу блога http://prosmo3.ru"/></a>

указав адрес ссылки мы легко можем прописать адрес ссылки:

<a href="http://prosmo3.ru"><img src="http://prosmo3.ru/wp-content/uploads/2012/08/seo-эксперимент.jpg" alt="На главную" title="Перейти на главную страницу блога http://prosmo3.ru"/></a>

На главную

Как видите получился вот такая картинка ссылка. Для изменения цвета текста можно воспользоваться визуальным редактором, достаточно выделить текст и в панеле указать ее цвет. Если же вы хотите вручную указать цвет ссылки через html редактор, то вам необходимо знать следующие атрибуты:

  1. Link — говорит нам о том, как будет выглядеть не посещенная гиперссылка.
  2. Alink — цвет активной или выделенной гиперссылки.
  3. Vlink — цвет уже посещенной гиперссылки.

Для изменения цвета ссылки html вам необходимо указать эти теги в теге <body>, для этого надо открыть файл в котором этот тег прописан, согласно вашему шаблону, скорее всего это будет index.php. Найдя тег Body прописываем для него выше приведенные атрибуты:

<body link="#000000" alink="#eeeeee" vlink="#080808">

Как видите цвет гиперссылок у нас в зашифрованном виде, обозначен цифрами, для того чтобы узнать необходимый вам цвет воспользуйтесь специальными редакторами типа фотошоп или программами, которые определяют цвет и показывают его кодовое значение. Вторым вариантом для изменения цвета ссылок html, будет использование css в ссылках, и изменения необходимых параметров в файле style.css.

Надеюсь теперь вы точно знаете как сделать ссылку на сайт!