---

• Заработать



---

• Новичку



---

• Вебмастеру



---

• Статьи



---

• Психология



---

• История



---

• Скачать



---

• Каталог



---

• Источники



---

Гиперссылки в HTML

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

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

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

Содержание урока:

• § 0. Ссылка на файл, ссылка на сайт, ссылка на страницу
• § 1. Создание внешних ссылок
  • § 1.1 Графические ссылки (ссылки-картинки)
• § 2. Внутренние ссылки
• § 3. Абсолютные и относительные ссылки
• § 4. Ссылка на электронную почту
• § 5. Атрибуты тега «A»
• § 6. Заключение

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

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

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

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

    Выглядит так:

    Код ссылки на страницу:

    Выглядит так:

    Код ссылки на файл:

    Выглядит так:

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

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

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

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

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

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

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

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

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

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

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

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

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

Главная страница

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

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

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

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

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

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

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

, а в браузере так

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

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

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

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

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

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

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

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

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

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

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

    Т.е. при формировании ссылки относительно корневой папки сайта мы опускаем начальную часть адреса http://www.site.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>
   По аналогии создаются относительные ссылки и в том случае, если страницы лежат на разных уровнях относительно корневой папки. Будет меняться лишь количество указателей уровня (две точки и слеш) и адрес страницы, на которую ставится ссылка.

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

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

, а в браузере так

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

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

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

• _blank — открывает ссылку в новом окне (в современных браузерах в новой вкладке);


• _parent — загружает ссылку в родительском окне;


• _self — по умолчанию. Открывает ссылку в этом же окне.

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

< a href="http://www.seoded.ru/" target="_blank">Главная страница< /a>

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

< a href="http://www.seoded.ru/" title="Перейти на главную страницу">Главная страница< /a>

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

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

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

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

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

    С уважением, Алексей Востров (+ Алексей Востров).

---

• Книги



---

• Программы



---

• Платный хостинг



---

• Сделать сайт



---

• Заработать на сайте



---

• Каталог магазинов



---

• Реклама в Интернете



---

• Как раскрутить сайт



---