Как создать гиперссылку

Рубрика: Основы HTML
7 декабря 2013

Здравствуйте уважаемые читатели блога webcodius.ru. Сегодня мы поговорим о том как создавать гиперссылки в html, узнаем как использовать тег <a> и его атрибуты href и target, научимся делать картинку ссылкой.

Гиперссылки являются ключевыми элементами web-страницы. Они связывают разрозненные html-страницы воедино, в полноценный web-сайт. Обычно ссылки отображаются как подчеркнутый фрагмент текста, при наведении на который, курсор мыши приобретает вид указывающего пальца. Кроме того, гиперссылка может иметь вид графического изображения или его фрагмента. При щелчке по ссылке, браузер загружает web-страницу, адрес которой указан в атрибутах данной ссылки. Гиперссылки позволяют ссылаться как на внутренние страницы вашего сайта, так и на любые другие ресурсы в интернете.

Создание текстовых гиперссылок

Бесплатный курс по HTML5 и CSS3 для начинающих

Начнем с простого и рассмотрим создание обычных текстовых ссылок. Для создания текстовой гиперссылки достаточно любой фрагмент текста, который должен стать ссылкой, заключить в парный тег <a>. И в атрибуте href этого тега необходимо указать адрес целевой web-страницы в интернете:

 giperssylka

Тег <a> или гиперссылка представляет собой встроенный элемент html-страницы, т.е. ссылка должна быть частью блочного элемента, например абзаца. Например:

<p><a href="http://www.site.ru/catalog/page15.html">страница 15</a></p>

В этом фрагменте html-кода создается абзац, который содержит ссылку. Ссылка указывает на web-страницу page15.html, которая находится в папке catalog, хранящейся в корневой папке сайта www.site.ru.

Текст, являющийся ссылкой, можно оформлять используя любые строчные теги оформления текста:

<a href="http://www.site.ru/catalog/page15.html">страница <strong>15</strong></a>

Можно создавать пустые гиперссылки, которые никуда не ведут. Для этого достаточно в атрибут href добавить знак #:

<a href="#">Ссылка никуда не ведет</a>

Если щелкнуть по такой ссылке ничего не произойдет. Обычно пустые гиперссылки применяются если необходимо при щелчке по ней запустить какой-нибудь javascript-код.

Если на странице не используются стили CSS и не применяются дополнительные атрибуты, то гиперссылки на странице по умолчанию отображаются следующим образом:

  • обычные ссылки отображаются синим цветом;
  • посещенные ссылки выделяются фиолетовым цветом;
  • активная гиперссылка (по которой щелкнули в данный момент) отображается красным цветом, но поскольку время между нажатием на ссылку и началом загрузки нового документа достаточно мало, подобное состояние ссылки весьма кратковременно;
  • текст ссылок выводится с подчеркиванием.

Интернет адреса

Бесплатный курс по HTML5 и CSS3 для начинающих

Далее рассмотрим виды интернет-адресов применяемых в атрибуте href. В коде html применяются полные и сокращенные интернет адреса.

Полный адрес содержит содержит интернет-адрес web-сервера, и путь к файлу, который необходимо получить. Например:

http://www.site.ru/catalog/page15.html

Здесь www.site.ru адрес web-сервера, а /catalog/page15.html — путь к файлу на этом сервере. Вообще, обычно полные интернет-адреса используют только если необходимо создать гиперссылку, указывающую на какие-либо ресурсы находящиеся на другом web-сайте.

При создании гиперссылок указывающих на файлы, входящих в состав того же сайта, что и текущая web-страница, лучше использовать сокращенные интернет-адреса. Сокращенный адрес содержит только путь к файлу на сервере, т.к. адрес web-сервера итак уже известен браузеру.

Сокращенные интернет-адреса бывают абсолютными и относительными.  Абсолютный адрес задает путь к целевому файлу относительно корневой папки сайта. Такой адрес начинается с символа /(слэш), который и обозначает корневую папку. Например, адрес «/page15.html» указывает на файл page15.html, который хранится в корневой папке сайта. Или адрес «/catalog/page.html» указывает на файл page.html, который помещен в папку catalog, вложенной в корневую папку сайта.

Относительный адрес задет путь к файлу относительно файла текущей веб-страницы. Относительные адреса не содержат в начале символа слэш. Рассмотрим несколько примеров.

Например адрес «page.html» указывает на файл, который находится в той же папке, что и файл текущей web-страницы. А адрес «catalog/page.html» откроет файл page.html, хранящийся в папке catalog, вложенной в папку, в которой хранится текущая страница. С помощью двух точек вначале адреса можно указывать папки предыдущего уровня вложенности. Так, например адрес «.../page.html» указывает на страницу page.html, хранящуюся в папке, в которую вложена папка с текущей веб-страницей.

Ссылка на почту

Бесплатный курс по HTML5 и CSS3 для начинающих

С помощью языка html можно создавать почтовые гиперссылки, щелчок по которым запускает программу почтового клиента. При указании адреса в атрибуте href перед email необходимо поставить «mailto:», т.е. примерно так: href="mailto:user@mail.ru". Причем после двоеточия перед почтовым адресом не должно быть пробелов.

Например, я хочу создать  ссылку указывающую на почтовый адрес webcodius@gmail.com. Тогда моя почтовая ссылка в html-коде будет выглядеть так:

<a href="mailto:webcodius@gmail.com">написать письмо</a>

написать письмо

Если щелкнуть по этой ссылке, то у вас запустится установленная по умолчанию почтовая программа и откроется диалог создания нового письма, в котором в поле «кому» будет вставлен адрес  webcodius@gmail.com.

Как сделать картинку ссылкой

Так как тег img для вставки изображения является строчным элементом html-страницы, то просто вставляем этот тег внутрь тега <a> вместо текста:

<a href="http://webcodius.ru"><img src="image.png"></a>

изображение ссылка

Этот html-код создаст изображение-ссылку.  В результате на странице отобразится картинка, вся область которой станет кликабельной и при щелчке по ней произойдет переход по указанному в коде адресу.

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

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

Изображение-карта создается в три этапа:

  1. Создание самого изображения с помощью тега img: <img src="map.jpg">;
  2. Создание карты с помощью парного тега <map>. С помощью обязательного атрибута name этого тега задается уникальное в пределах страницы имя карты. Далее необходимо привязать карту к изображению с помощью атрибута usemap тега img, значением которого должно состоять из символа # и имени карты:
    <img src="map.jpg" usemap="#mapname"><map name="mapname"></map>;
  3. Создание описаний областей гиперссылок с помощью одинарных тегов area. Данные тег должен содержать атрибуты: shape — форма области, coords — координаты области и href — адрес гиперссылки. Эти описания помещают внутрь тега map.

Примерно так выглядит полный html-код, создающий карту изображения:

<img src="map.png" usemap="#mapname">
<map name="mapname">
<area shape="rect" coords="0, 0, 100, 100" href="http://webcodius.ru" target="_blank">
<area shape="circle" coords="150, 50, 50" href="http://webcodius.ru/vse-stati-bloga" target="_blank">
<area shape="poly" coords="0, 100, 200, 100, 200, 200, 0, 200" nohref>
</map>

изображение карта

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

Якоря

Якорь или метка — это такой вид гиперссылки, которая помечает отдельный фрагмент html-страницы и  позволяют перемещаться по содержимому документа.

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

Якоря создают, как и обычные гиперссылки, с помощью парного тега <a>, только вместо атрибута href в него помещают атрибут name или id, значение которых задает уникальный идентификатор метки. При этом сам тег <a> обычно не имеет никакого содержимого:

<a name="metka"></a>

Есть второй способ создания якоря, при котором не надо создавать пустые элементы <a>. А можно использовать уже имеющиеся в веб-странице элементы, например теги html заголовков и абзацев. Для этого в нужный элемент добавляем универсальный атрибут id:

<h1 id="metka">Заголовок</h1>

Далее необходимо сделать ссылку на созданный якорь. Для этого используется обычный тег <a>  с обязательным атрибутом href, значение которого формируется из знака решетки (#) и названия метки:

<a href="#metka">Перейти к якорю с именем metka</a>

При нажатии по такой ссылке, браузер не открывает новую страницу, а прокручивает текущую до тех пор пока html-элемент с якорем не займет позицию в верху экрана. Соответственно, чтобы все правильно работало, все метки на одной странице имели уникальные имена.

 Если при создании ссылки на якорь в значении атрибута href после знака решетки # не поставить никакого значения, то щелчок по такой ссылке прокрутит страницу к началу.  Таким образом можно создать простейшую кнопку «Наверх»:

<a href="#">НАВЕРХ</a>

НАВЕРХ

На этом рассказывать о создании гиперссылок я заканчиваю, напомню только основные моменты:

  1.  Для создания ссылок используется парный тег <a> с обязательным атрибутом href, в значении которого помещается адрес целевой страницы: <a href="адрес">Текст</a>;
  2. При создании ссылки на почту в атрибуте href перед адресом почты необходимо поставить «mailto:»: <a href="mailto:webcodius@gmail.com">написать письмо</a>;
  3. Если надо создать ссылку изображение, то просто помещаем тег img внутрь тега <a>:  <a href="http://webcodius.ru"><img src="image.jpg"></a>.

На этом все, не забывайте подписываться на обновления блога! До новых встреч!

Получай статьи почтой:

Похожие статьи:


Комментарии
  1. lisa

    Спасибо!Долго не получалось!Сейчас все работает :-D :-D :-D

    13 апреля 2015 22:32
  2. Марина

    Полезный материал. А как сделать, чтобы изображение менялось (цвет) при наведения курсора, а при нажатии уменьшалось, не используя тегов типа <button> ?  :(

    17 апреля 2015 16:55
  3. alex

    Изменить изображение при наведении можно с помощью css-стилей и псевдокласса hover. Вот статья как изменить изображение при наведении курсора. А изменять размер изображения можно с помощью javascript используя атрибут onclick.

    20 апреля 2015 07:26
  4. newJS

    Map-карту можно и в спец программе сделать, намного проще и точнее.

    _http://newjs.my1.ru/load/generator_kart_html/1-1-0-4

    1 октября 2015 07:57
  5. Алексей

    Все делаю по интсрукции и НИЧЕГО не получается.Откуда только эти восторженные отзывы,не пойму

    6 февраля 2016 03:35
  6. alex

    Алексей: отзывы проплачены.

    Вы поконкретней, что не получается расскажите.

    6 февраля 2016 13:48
  7. newJS

    Ну, восторженных отзывов не заметил, нормальные отзвы.

    Так что давайте конкретику, что вы делаете и что не получается.

     

    7 февраля 2016 07:13

Оставить комментарий




Подписаться, не комментируя -