Наука + Бизнес = $$$

Карта Сайта

Среда, 13.12.2017, 08:35
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №6: создание ссылок в HTML

Создание ссылок в HTML

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

  • <а> - этот парный тег используется для создания и оформления ссылок. Имеет главный параметр 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>

В итоге в браузере появится такая ссылка: К началу этой странички, которая, при нажатии, перенесет вас в начало данного урока.


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru