Ссылки в HTML-документах
После того, как мы научились помещать в HTML-страницу изображения, пора изучить основу гипертекстового пространства — ссылки.
Ссылки бывают разные: ссылка с одной страницы сайта на другую, ссылка на страницу другого сайта, ссылка на ящик электронной почты, ссылка на закачку файла, ссылка в виде картинки.
Тег A
Для создания и использования гипертекстовых ссылок используется тег <a>. Этот тег является самым необходимым элементом. Без него гиперткст (HTML) и, собственно, Интернет просто немыслим.
Гипертекстовая ссылка
Но, как и все в HTML, сделать ссылку довольно просто. Используем тег <a> с одним единственным атрибутом href (сокр. от hypertext reference - гипертекстовая ссылка).
Пример:
Результат в браузере:
Как видете, все, что расположено внутри тега <a>, становится видно в окне браузера. Этот текст называется анкор (ancor) или, в переводе, якорь. А атрибут href задает адрес ресурса и\или имя файла, который браузер должен открыть.
Обратите внимание: закрывающий тег обязателен.
Ссылка на страницу в пределах одного сайта
Сделать ссылку на страницу Вашего сайта еще проще. Но давайте вначале сделаем две не сложные вещи.
Если Вы делали все так, как я вам советовал, то сейчас у Вас в папке www находятся папка images и файл index.html.
Давайте в папке www создадим еще один файл с именем page_1.html (пользуясь инструкцией по ссылке выше). Впишите в него минимальный набор тегов. Между тегами <title> напишите к примеру "Тестовая страница", а между тегами <body> —"Проверка ссылок". Это первая не сложная вещь.
Вторая — в папке www создадим еще одну папку с именем archives (архивы) и поместим в нее какой нибудь архив (с расширением rar или zip).
А теперь, собственно , ссылка. Если страница, на которую ведет ссылка, расположена в одной папке с исходной, то код выглядет так:
Т.е. в значении атрибута href просто пишем имя файла.
Если мы создадим подпапку subfolder и в нее поместим нашу Тестовую страницу (файл page_1.html), то в значении атрибута href нужно будет указать еще и имя папки. Т.е прописать путь к файлу:
Обратная ссылка на нашу Первую страницу с Тестовой страницы, находящейся в папке subfolser будет выглядеть так:
Таким образом, две точки и слеш "../" перед именем файла указывают на то, что файл находится в папке, расположенной на уровень выше от позиции файла, с которого делается ссылка.
Очень полезен атрибут target. По умолчанию страница, на которую ведет ссылка, открывается в том же самом окне браузера. Но очень часто нужно, чтобы страница открывалась в новом окне или новой вкладке (в зависимости от настроек Вашего браузера). Для этого ссылке нужно придать атрибут target со значением _blank.
И еще один не обязательный атрибут title. Он добавляет поясняющий текст к ссылке в виде всплывающей подсказки при наведении на нее курсора.
Пример кода:
<br>
<a href="http://www.ulotrix.ru" title="Создаем сайт и ...зарабатываем">Ссылка на сайт Ulotrix.ru, при наведении курсора появится заголовок.</a>
Результат:
Ссылка на сайт Ulotrix.ru, при наведении курсора появится заголовок.
Ссылка в виде картинки (или картинка в виде ссылки)
А как сделать ссылку в виде картинки? Тоже очень просто. Для этого пишем тег ссылки со всеми неоходимыми атрибутами, а на место анкора (текста ссылки) вставляем изображение. Например:
Результат:
Когогда делается картинка в виде ссылки, то по умолчанию вокруг картинки появляется не очень красивая рамка. Чтобы эту рамку убрать, прописываем атрибут border со значением ноль.
Ссылка на закачку файла
Ссылка на закачку файла ничем не отличается от обычной ссылки. В арибуте href просто прописываем путь к файлу, который мы хотим дать для скачивания. Такой файл обычно архивируют.
Пример:
Если Вы в атрибуте href укажете имя файла, который Вы поместили в папку archives (как я Вам советовал), то после клика по этой ссылкеу Вас начнется скачивание этого файла.
Ссылка на адрес электронной почты
Если Вы хотите чтобы у Вас на сайте была ссылка, нажимая на которую у пользователя сразу загружается почтовая программа и он сможет написать Вам письмо, то нужно сделать ссылку вот с таким, примерно, кодом:
В раузере мы будем видеть:
Как видите, в значении атрибута href нужно написать mailto, двоеточие и адрес получателя. При нажатии на такую ссылку запустится почтовая программа, в поле "Кому" будет стоять указанный в ссылке адрес.
Цвета ссылок
По умолчанию браузеры непосещенные ссылки показывают синим цветом, посещенные — фиолетовым, а активные ссылки (в момент нажатия на нее) — красным.
Если такие цвета не подходят под основной дизайн сайта или страницы, цвета ссылок можно изменить.
Для этого нужно придать специальные атрибуты тегу <body>.
link — цвет непосещенной ссылки;
vlink (visited link) — цвет посещенной ссылки;
alink (active link) — цвет активной ссылки.
Цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
Таблица базовых цветов. В скобках — RGB-значение цвета.
| black (#000000) |
maroon (#800000) |
green (#008000) |
navy (#000080) |
| silver (#C0C0C0) |
red (#FF0000) |
lime (#00FF00) |
blue (#0000FF) |
| gray (#808080) |
purple (#800080) |
olive (#808000) |
teal (#008080) |
| white (#FFFFFF) |
fuchsia (#FF00FF) |
yellow (#FFFF00) |
aqua (#00FFFF) |
Если Вам этих цветов недостаточно, более точно подобрать RGB-значение можно .
Например, если тегу <body> придать следующие атрибуты и их значения:
то все ссылки на данной странице будут красного цвета, уже посещенные — черными, а активные ссылки — зелеными.
Ну вот, на этом с ссылками закончим. Эксперементируйте, и Вы очень быстро все поймете.
Про атрибут rel со значением nofollow, а также тег <noindex> читайте в отдельной статье.
На следующей странице будем разбираться с таблицами в HTML >>
Поиск по сайту