Возможность переходить с одной страницы веб-сайта на другую страницу или веб-сайт, является важным фактором такой популярности глобальной сети Интернет. Такое перемещение стало возможным благодаря ссылкам (гиперссылкам, гипертекстовым ссылкам).
- <а> - этот парный тег используется для создания и оформления ссылок. Имеет главный параметр href, в котором нужно указать URL - страницу, на которую будет ссылаться ваша ссылка. Синтаксис: <a href="http://phantomx5.ucoz.ru/">На главную</а>. Между тегами пишется текст, который будет служить вашей ссылкой.
Данный код в браузере имеет такой вид: На главную
Изображение в качестве ссылки
В качестве ссылки необязательно использовать только текст, можно также использовать картинку или графику. Также на многих страницах в качестве ссылок используются кнопки (Вперед, Назад, Домой и т.д) для лучшей ориентации посетителей по сайту. Для создания такой ссылки необходимо между тегами <а> и </а> вставить тег <img>
Например:
<а href="http://PhantomX5.ucoz.ru"> <img src="http://phantomx5.ucoz.ru/22.gif" border="0" alt="На Главную" title="На Главную"></а>
|
Написав этот код, в браузере мы получим такую кнопку:
В результате данная кнопка является ссылкой на главную страницу данного сайта.
Ссылка в новом окне
Содержимое ссылки может открываться не только в текущем, но и в новом окне. Такое окно создается автоматически, если кликнуть по соответствующей ссылке, это очень полезно и удобно. Для этого необходимо в тег <а> вставить значение target="_blank".
Допусти нам необходимо сделать ссылку на Mail.ru, которая будет открыта в новом окне. Задаем:
<a href="http://mail.ru/" target="_blank">Mail.ru</а>
|
И получаем такой результат: Mail.ru
Подсказки для ссылок
Тег <а> имеет параметр title, значение которого служит подсказкой, если навести курсор мышки на такую ссылку.
Например, зададим ссылку на упрощенную поисковую систему Яндекс, с подсказкой "Лучшая поисковая система":
<а href="http://ya.ru/" target="_blank" title="Лучшая поисковая система">ya.ru</а>
|
Наводим на ссылку и смотрим результат - ya.ru
Если ссылкой является изображение тогда подсказку следует вводить в теге <img>, также параметром title.
Редактирование цвета ссылки
Обычно внешний вид ссылок создают с помощью CSS: Оформление ссылок в CSS. Однако, цвета ссылок исключительно в HTML задаются атрибутами тега <body>. Такие атрибуты необязательно задавать, так как, если они не указаны цвета ссылок будут заданы по умолчанию.
- link - цвет ссылок на веб-странице (по умолчанию синий)
- alink - определяет цвет активной ссылки (по умолчанию красный)
- vlink - задает цвет посещенных ссылок (по умолчанию фиолетовый)
Если необходимо задать цвет одной отдельной ссылки, тогда можно воспользоваться параметром тега <а> - style. Также можно редактировать шрифт текста ссылки, обычными тегами форматирования текста. Например, напишем такой код ссылки:
<a href="http://www.youtube.com/" target="_blank" style="color:orange"><strong><em>YouTube.com</strong></em></а>
|
В браузере получится - YouTube.com -
Цвет ссылки оранжевый, также ссылка имеет вид жирного курсива.
Для подбора необходимо вам цвета можно воспользоваться: Таблицой кодов цветов
Создание ссылки на электронную почту
После щелчка на такую ссылку, открывается программа электронной почты, с уже заполненным полем вашего адреса электронной почты. Это поможет посетителю сайта быстро набрать сообщение и отправить на вашу электронную почту. Для добавления такой ссылки в теге <a> вместо URL, указывается параметр mailto: и ваш адрес электронной почты. Например:
<a href="mailto:PhantomX5@mail.ru"> Свяжитесь с нами </a> .
|
Вид в браузере: Свяжитесь с нами
Всплывающая почтовая программа, при нажатии на такую ссылку, зависит от вашей операционной системы, а также от настроек браузера. В Windows обычно встроена "Microsoft Outlook".
Ссылки для перемещения в пределах страницы
Ссылки не всегда ссылаются на другую страницу. На длинной странице, где статья разбита заголовками на несколько частей, ссылки создаются на верхней, средней и нижней части страницы. Это дает возможность посетителям быстро переходить на нужные им фрагменты страницы, что очень удобно. Для создания ссылки в каком-либо месте на такой странице, необходимо создать два тега: первый (его называют якорем) - отмечает место перехода по ссылке, второй добавляет ссылку, с помощью которой посетитель сможет перейти к нужному ему месту.
Метка (якорь) на которую будет осуществлен переход по ссылки, задается с помощью тега <a> и его параметра name, к которому задается любое имя. Ссылка на такой объект создается также с помощью тега <a> и его параметра href, значение которого должно являться именем вашей метки, перед которым обязательно ставится решетка #.
Например, создадим ссылку, которая будет перемещать нас на начало данной страницы. Ставим метку в название данной статьи таким образом:
<a name="metka1">Создание ссылок в HTML</a>
|
Теперь назначаем ссылку для данной метки:
<a href="#metka1">К началу этой странички</a>
|
В итоге в браузере появится такая ссылка: К началу этой странички, которая, при нажатии, перенесет вас в начало данного урока.
|