В этом браке нас было трое. А я не люблю толпы.
Принцесса Диана.

    Главным признаком HTML-документа является наличие в нём гиперссылок (или просто ссылок) на другие документы, сайты, файлы, картинки и т. д. Именно возможность вставлять в страницы ссылки на объекты вне неё и сделала Интернет столь популярным и удобным для использования. Поэтому, при создании своего сайта, всегда помни про «магию» ссылок.

    В этом уроке мы поговорим о том, как создать ссылку на сайт, на его отдельную страницу или файл. Ты узнаешь о том, как изменить текст ссылки, как открыть её в новом окне, как сделать ссылкой картинку, что такое внешние и внутренние ссылки и многое другое. Плюс, у тебя уже есть информация о работе с ссылками, которой мы касались в прошлых уроках (например, о том, как можно поменять цвет ссылки мы говорили в уроке про тег body).

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

 

§0. Термины

§1. Ссылка на файл, ссылка на сайт, ссылка на страницу

    Многочисленные вопросы о том, чем в HTML отличается ссылка на файл от ссылки на сайт или его отдельную страницу, вынудили меня вынести ответ на него в самое начало этого урока. Ответ такой: ничем. Все перечисленные ссылки являются внешними по отношению к исходной странице и создаются одним и тем же способом.

    Дабы не растекаться мыслью по древу, покажу всё на примере.

    Итак, код ссылки на сайт выглядит так:

    В браузере мы увидим вот, что:

 

    А код ссылки на страницу выглядит так:

    В браузере мы увидим такое:

 

    Ну, а код ссылки на файл выглядит так:

    В браузере мы увидим:

 

    Как видишь, в HTML все типы ссылок создаются абсолютно одинаково. Разница только в адресе объекта, на который нужно сослаться. А теперь перейдём к основной части урока.

§2. Создание внешних ссылок

    Между собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за «пределы» html-страницы, внутренние — на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по умолчанию, он выделен синим цветом и подчёркнут), а графические, в качестве объекта, по которому нужно щёлкнуть для перехода, содержат какую-либо картинку.

    Все эти разновидности ссылок создаются в HTML с помощью тега < A>< /A> (сокращение от англ. anchor — якорь). Рассмотрим его поподробнее.

    Для создания внешней ссылки на сайт, страницу или файл, служит атрибут тега < A> — href. В качестве значения, этот атрибут принимает URL-адрес сайта, страницы или файла (об этом мы говорили выше).

    Между тегами < A> и < /A> располагается видимая часть ссылки (анкор ссылки), т. е. то, что мы видим на экране браузера. Анкор ссылки может быть как обычным текстом (текстовая ссылка), так и графическим изображением (ссылка-картинка). Ссылка-картинка создаётся вставкой знакомого нам по прошлому уроку тега < IMG> между тегами < A> и < /A>.

    В общем, синтаксис создания ссылки в HTML выглядит так:

 

    Например, чтобы создать текстовую ссылку на главную страницу этого сайта, нужно написать следующий HTML-код:

 

    В браузере это будет выглядеть так:

 

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

§2.1 Графические ссылки (ссылки-картинки)

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

 

    А браузер покажет:

 

    По умолчанию, браузер окружает картинку в графической ссылке рамкой. Если это нежелательно, то атрибуту border тега IMG нужно присвоить значение 0:

 

    Текстовые и графические ссылки в HTML можно комбинировать. Если написать:

 

    То ссылкой будет как картинка, так и текст «Главная страница»:

§3. Внутренние ссылки

    Для комфортного перемещения по страницам с большим количеством контента, в HTML используются внутренние ссылки. Именно с их помощью я сделал «Содержание урока» (см. в начале этой страницы). Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается «якорь» ссылки. «Якорь» создаётся атрибутом name:

 

    Имя «якоря» задаётся произвольно. Тут стоит сказать, что не все браузеры понимают русские имена «якорей», поэтому рекомендую использовать латиницу. Текст между тегами < A>< /A> для создания «якоря» не обязателен и, чаще всего, не указывается.

    «Якорь» располагается в тех местах страницы, в которые должен попасть пользователь после щелчка по ссылке.

    Как я уже сказал выше, в атрибуте href внутренней ссылки вместо адреса указывается имя нужного «якоря» с обязательным символом решётки (#) перед ним. Разберём на примере.

    Я создал «якорь» с именем «zagolovok» и разместил его в коде страницы рядом с заголовком этого урока («Гиперссылки в HTML»). Код «якоря» следующий:

 

    HTML-код внутренней ссылки будет выглядеть так:

 

    А в браузере так:

 

    После щелчка по этой ссылке, ты попадёшь к заголовку этого урока.

    Если ты заметил, то, после перехода по внутренней ссылке к заголовку, изменился URL-адрес в адресной строке браузера:

    К изначальному адресу:

 

    Добавилась внутренняя ссылка:

 

    Используя эту особенность, можно ссылаться на определённое место страницы с любого ресурса в Интернете! Т. е., допустим, ты создал страницу с объёмной статьёй о чём-то (или выложил на странице большое число фотографий) и разметил её внутренними ссылками. Находясь в социальной сети «ВКонтакте», тебе потребовалось сослаться не просто на страницу со статьёй (или фотографиями), а на определённое место на ней (или определённую фотографию). Используя вариант с внутренней ссылкой в адресе, ты с лёгкостью добьёшься нужного.

§4. Абсолютные и относительные ссылки

    Также ссылки в HTML бывают абсолютными и относительными. Абсолютная ссылка — это обычная ссылка вида:

    А вот с относительными ссылками немного посложнее. В таких ссылках адрес указывается либо относительно корневой папки сайта (той, в которой лежит главная страница), либо относительно исходной страницы. Такие ссылки нужны, например, в том случае, если сайт лежит на домашнем компьютере. Или если это — не сайт, а страница-указатель на другие документы.

    Разберём сначала создание ссылки относительно корневой папки сайта.

    Допустим, нам нужно сослаться на страницу klienty.html, которая лежит в одной папке с главной страницей сайта. Тогда код относительной ссылки примет вид:

 

    А теперь предположим, что в одной папке с главной страницей лежит папка zakazy и уже в ней лежит страница klienty.html Тогда код относительной ссылки станет таким:

    Т. е., при формировании ссылки относительно корневой папки сайта, мы опускаем начальную часть адреса https://www.seoded.ru и оставляем всё остальное. Использование слеша «/» в начале — обязательно!

    Теперь рассмотрим создание гиперссылок относительно исходной страницы.

    Допустим, у нас есть страница price.html (исходная страница) и с неё нужно сослаться на страницу klienty.html. Тут бывают следующие типовые варианты:

 

• 1. Страницы price.html и klienty.html находятся в одной папке.

  Тогда код ссылки будет таким:

      < a href="klienty.html">Клиенты< /a>

• 2. Страница klienty.html и папка zakazy находятся в корневой папке сайта, страница price.html лежит в папке zakazy (т. е. страница klienty.html относительно исходной страницы price.html лежит на один уровень выше).

  Код станет таким:

      < a href="../klienty.html">Клиенты< /a>

  Две точки показывают, что нужно выйти из текущей папки на уровень выше.

• 3. Страница klienty.html и папка zakazy находятся в корневой папке сайта, папка mebel лежит в папке zakazy, страница price.html лежит в папке mebel (т. е. страница klienty.html относительно исходной страницы price.html лежит на два уровня выше).

  Код ссылки примет вид:

      < a href="../../klienty.html">Клиенты< /a>

  Т. е. каждый уровень обозначается двумя точками и слешем «/».




• 4. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта, страница klienty.html лежит в папке zakazy (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на один уровень ниже).

  Теперь код ссылки будет таким:

      < a href="zakazy/klienty.html">Клиенты< /a>

  В этом случае точки и слеши не ставятся.

• 5. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта, папка mebel лежит в папке zakazy, страница klienty.html лежит в папке mebel (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на два уровня ниже).

  Код ссылки такой:

      < a href="zakazy/mebel/klienty.html">Клиенты< /a>

• 6. В корневой папке сайта лежат две папки: zakazy и oplata. Страница klienty.html лежит в папке zakazy, исходная страница price.html лежит в папке oplata (т. е. обе страницы лежат в разных папках на уровень ниже от корневой папки сайта).

  Код ссылки станет следующим:

      < a href="../zakazy/klienty.html">Клиенты< /a>

  По аналогии создаются относительные ссылки и в том случае, если страницы лежат на разных уровнях относительно корневой папки. Будет меняться лишь количество указателей уровня (две точки и слеш) и адрес страницы, на которую ставится ссылка.

§5. Ссылка на электронную почту

    Для того, чтобы в HTML создать ссылку на электронную почту, нужно вместо URL-адреса в значении атрибута href написать адрес электронной почты с указанием протокола (mailto:). И тогда при щелчке по такой ссылке откроется окно почтовой программы с вписанным в поле «Кому» адресом электронной почты. В HTML-коде это выглядит так:

 

    А в браузере так:

§6. Атрибуты тега «A»

    У тега < A>, как и у остальных тегов в HTML, есть свои атрибуты. Рассмотрим некоторые из них.

§6.1 Атрибут target

    По умолчанию, браузер, при переходе по ссылке, открывает страницу в этом же окне. Чтобы изменить это, используется атрибут тега A target. Он имеет следующие значения:

 

    Это — не все значения атрибута target, но это — самые основные. Пример использования этого атрибута:

 

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

§6.2 Атрибут title

    В теге < A> можно также использовать атрибут title. С его помощью создаётся всплывающая подсказка, которая появляется при наведении мыши на ссылку.

 

 

    При наведении мыши на ссылку, теперь всплывает подсказка «Перейти на главную страницу».

§6.3 Атрибут rel="nofollow"

    У атрибута rel есть несколько значений, но самым используемым является значение «nofollow». Это значение указывает роботам поисковых систем, что эту ссылку не нужно использовать в поисковом ранжировании. Подробнее — в разделе о продвижении сайтов.

    Исходный код:

 

    В браузере:

 

    То есть чисто внешне — гиперссылка никак не изменилась. Но поисковики теперь оповещены о том, что в формуле ранжирования её показатели учитывать не нужно.

§7. Заключение

    Это — основные сведения о создании ссылок в HTML. На этом, данный урок можно считать законченным. А сей факт говорит о том, что большую часть основ HTML ты уже освоил.

    Рекомендую тебе сейчас ещё раз пробежаться по предыдущим разделам, а затем создать полноценную HTML-страницу, посвящённую, например, тебе любимому. По твоему дизайну и сообразно твоим желаниям. После чего выложить её на какой-нибудь бесплатный хостинг (конечно, если у тебя есть платный хостинг, то на него) и уже полноценно полюбоваться на свой первый сайт.

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

    И это уже будет первый шаг на пути к превращению личной странички в серьёзный ресурс.

 

    Автор и эксперт: Алексей Востров.

 

Ещё материалы по этой теме:

• Создание своего сайта
• Создание тематического сайта
• Как заработать в Интернете деньги
• Заработок в Интернете
• Покупка продажа ссылок

Комментарии:

Сергей Нулёвый
3 мар 2015
А в html url какого вида лучше для seo? Ну, там, относительные ссылки или абсолютные?

Seoded.ru
3 мар 2015
Если коротко, то абсолютные.

Самиздат
18 июн 2016
В html внешняя ссылка чем то отличается от внутренней?

Seoded.ru
18 июн 2016
Нет. С точки зрения HTML, все ссылки — одинаковые.

Самиздат
21 июн 2016
Спасибо. А в html создание гиперссылки возможно только руками. Ну, то есть, допустим, я просто пишу список слов и хочу, чтобы они стали ссылками на страницы. Это только вручную или можно какой-то программой сделать?

Seoded.ru
21 июн 2016
Откуда программа знает, какое слово на какую страницу должно стать ссылкой? В такой формулировке вопроса, ответом будет: да, только вручную.
Другое дело, если вам нужно поменять (или указать) ссылку (или ссылки) сразу на нескольких (или всех) страницах сайта. Если вы создаёте сайт самостоятельно, без использования «движков», то вам помогут вставки на PHP https://www.seoded.ru/webmaster/sozdanie-saita/vstavka-php-koda.html. Если используете «движки», то там сами программы вставят (или поменяют) ссылки во все заранее обозначенные места.

Самиздат
21 июн 2016
Ещё раз спасибо.