Главным признаком HTML-документа является наличие в нем гиперссылок (или просто ссылок) на другие документы, сайты, файлы, картинки и т.д. Именно возможность вставлять в страницы ссылки на объекты вне неё и сделала Интернет столь популярным и удобным для использования. Поэтому при создании своего сайта всегда помни про «магию» ссылок.
В этом уроке мы поговорим о том, как создать ссылку на сайт, на его отдельную страницу или файл. Ты узнаешь о том, как изменить текст ссылки, как открыть её в новом окне, как сделать ссылкой картинку, что такое внешние и внутренние ссылки и многое другое. Плюс, у тебя уже есть информация о работе с ссылками, которой мы касались в прошлых уроках (например, о том, как можно поменять цвет ссылки мы говорили в уроке про тег body).
В общем, этот урок сделает твоё представление о создании ссылок законченным и достаточным. Ты поймёшь, как создать гиперссылку в HTML и зачем. И научишься управлять её свойствами.
§ 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 Тут бывают следующие типовые варианты:
- Страницы price.html и klienty.html находятся в одной папке
Тогда код ссылки будет таким:< a href="klienty.html">Клиенты< /a> - Страница klienty.html и папка «zakazy» находятся в корневой папке сайта, страница price.html лежит в папке «zakazy»(т.е. страница klienty.html относительно исходной страницы price.html лежит на один уровень выше)
Код станет таким:< a href="../klienty.html">Клиенты< /a>Две точки показывают, что нужно выйти из текущей папки на уровень выше. - Страница klienty.html и папка «zakazy» находятся в корневой папке сайта, папка «mebel» лежит в папке «zakazy», страница price.html лежит в папке «mebel» (т.е. страница klienty.html относительно исходной страницы price.html лежит на два уровня выше)
Код ссылки примет вид:< a href="../../klienty.html">Клиенты< /a>Т.е. каждый уровень обозначается двумя точками и слешем «/». - Страница price.html (исх. страница) и папка «zakazy» находятся в корневой папке сайта, страница klienty.html лежит в папке «zakazy» (т.е. теперь страница klienty.html относительно исходной страницы price.html лежит на один уровень ниже)
Теперь код ссылки будет таким:< a href="zakazy/klienty.html">Клиенты< /a>В этом случае точки и слеши не ставятся. - Страница price.html (исх. страница) и папка «zakazy» находятся в корневой папке сайта, папка «mebel» лежит в папке «zakazy», страница klienty.html лежит в папке «mebel» (т.е. теперь страница klienty.html относительно исходной страницы price.html лежит на два уровня ниже)
Код ссылки такой:< a href="zakazy/mebel/klienty.html">Клиенты< /a> - В корневой папке сайта лежат две папки: «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». Он имеет следующие значения:Это не все значения атрибута target, но это самые основные. Пример использования этого атрибута:
- _blank — открывает ссылку в новом окне (в современных браузерах в новой вкладке);
- _parent — загружает ссылку в родительском окне;
- _self — по умолчанию. Открывает ссылку в этом же окне.
< 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.
И это уже будет первый шаг на пути к превращению личной странички в серьезный ресурс.