FAQ по HTML - Учимся делать ссылки | Блог Алексея Фомичева

Учимся делать ссылки — FAQ по HTML

Ссылка – ради нее и создавалось все. Весь язык HTML без ссылок — это всего лишь набор отформатированного текста. Ссылка же позволяет связать два документа одинаковой тематики, что увеличивает значимость как первого, так и второго документа.

Но и это еще не все. Главной особенностью ссылки является то, что она может ссылаться на любой документ (страницу) находящиеся в сети. Так же стоит отметить о многоликости ссылки. Она может быть текстовой, изображением, невидимой областью.

Для того чтобы обозначить ссылку существует тег «a» и его параметр href, в котором указывается адрес страницы на которую ссылаются.

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equin="Content-Type" content="text/html; charset=utf-8">
<title>Учимся делать ссылки</title>
</head>
 
<body>
<p>Эта ссылка ведущая на <a href="https://elitalcoshop.ru">мой блог</a></p>
</body> 
</html>

 

Запомните, тег «a» парный, требует обязательное закрытие.

При переходе по ссылке, по умолчанию, страница открывается в текущем окне браузера. Иногда это неудобно, например, когда необходимо сделать ссылку на другой сайт.

У ссылки существует параметр target, с помощью которого можно изменить переход в другом окне.

  • _blank — загружает страницу в новое окно браузера;
  • _self — загружает страницу в текущее окно;
  • _parent — загружает страницу во фрейм-родитель;
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера.
1

<p>Эта ссылка ведущая на <a href="https://elitalcoshop.ru" target="_blank">мой блог</a></p>

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

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

Для того чтобы влиять на цвет ссылки используют следующее параметры тега «a»:

  • link — определяет цвет ссылок на веб-странице.
  • alink — цвет активной ссылки, который меняется при нажатии на нее мышкой.
  • vlink — цвет уже посещенных ссылок.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equin="Content-Type" content="text/html; charset=utf-8">
<title>Учимся красить ссылки</title>
<style type="text/css">
a{color:red;/*Цвет ссылок*/}
a:visited {color:#000000; /*Цвет посещенных ссылок*/}
a:active {color:#cccccc; /*Цвет посещенных ссылок*/}
</style>
</head>
 
<body>
<p>Учимся красить ссылки в  <a href="https://elitalcoshop.ru">серый цвет</a></p>
</body> 
</html>

 

Как видите в примере, стили задаются в разделе заголовка документа и разделяются тегами «style».

Цвета каждого параметра ссылки прописывается параметром color.

Если же есть необходимость задать или изменить цвет ссылке в тексте то это можно сделать так:

1

<p>Учимся красить ссылки <a href="https://elitalcoshop.ru" style="color:0000CC">моя ссылка</a></p>

Но и это еще не все что можно сделать ссылками. С помощью каскадных таблиц стилей возможно убрать подчеркивание ссылки. Для этого применяем параметр text-decoration,
который задается свойством none.

Смотрим пример.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equin="Content-Type" content="text/html; charset=utf-8">
<title>Убираем подчеркивание ссылки</title>
<style type="text/css">
a{text-decoration:none;}
a:hover {text-decoration:underline;color:#cc0000;}
</style>
</head>
 
<body>
<p>Убираем подчеркивание в ссылки <a href="https://elitalcoshop.ru">серый цвет</a></p>
</body> 
</html>

 

Как вы видите, ссылка убирается с помощью свойства none и появляется, при наведении мыши окрашиваясь, в красный цвет. Для ее выделения существует свойство underline.

Если у вас возникло желание сделать из изображения на странице ссылку, то нет нечего сложного. Достаточно заключить тег изображения «img» в тег «a»

1
2

<p><a href="https://elitalcoshop.ru">
<img src="avatar.gif" widtn="50" height="50" alt="Аватар к статье"></a></p>

 

Вот и все что вам понадобиться в работе. Конечно, я не затронул такую возможность как создания карт изображений. Думаю их применение необходимо только в единичных случаях.

У карт изображений есть очень хорошее достоинство – это создание ссылки определенной формы. Но есть и недостатки, которые перекрывают данное достоинство.
Самым главным недостатком является объемный код, так как для каждой точки сложной геометрической ссылки необходимо задать свои координаты.

Поэтому я не советую их применять вам на страницах своих сайтов.

Ну что закончим ссылками.

С уважением, Алексей Фомичёв

Из жизни веб-мастеров:
Пользователи Internet Explorer как избиратели Единой России:
их вроде бы много, но среди моих друзей нет ни одного такого идиота.

 

Содержание FAQ по HTML:
Что такое HTML или история возникновения гипертекстовой разметки
Введение
Форматирование текста
Учимся делать ссылки
Работаем со списком
Изучаем таблицы
Форма, как средство взаимодействия с пользователем сайта



Поделись с друзьями в социальных сетях!




22.10.2013 / Создание блога / Теги: , / Комментарии: 2
Похожие записи
Комментарии: 2
  1. 22.10.2013 в 22:03 – Ответить

    Только у тебя тег a закрыт тегом b :) Как бы, не красиво :)

Оставить комментарий