25.02.2012, 20:10

Подробно о ссылках в html


В этой статье я расскажу вам о ссылках. Для создания ссылок используется тег <a>.
Пример самой простой ссылки:
Code

<a href="http://infoscript.ru" title="Всё для веб-мастреа"></a>

Закрытие тега <a> обязательно, если вы его не закроете, то браузер не сможет понять где конец ссылки. То, что вы напишите между <a> и </a> выводится вместо открытой ссылки.
Пример:
Code

<a href="http://infoscript.ru" title="Всё для веб-мастреа">infoscript</a>  

А вот что из этого получится:

Основные атрибуты:

  • href- В качестве значения атрибута href используется url на который будет ссылаться ваша ссылка. Так же хотелось отметить что адреса ссылок бывают абсолютные, которые работаю везде и относительные, которые работают относительно текущего документа.
  • title - Всплывающая подсказка, которая появляется при наведении на ссылку. Отмечу, что этот атрибут очень полезен, он сможет помочь вашему сайту занять лидирующие позиции в выдачи поисковиками, так как хорошо индексируется.

  • alt - Значение этого атрибута будет выводится на месте вашей картинки, до того как ваш браузер прогрузит её.


Как сделать картинку ссылкой?

Думаю многие когда-то задавались этим вопросом, на самом деле всё очень легко.
Берем ссылку на картинку, которая нам нужна и вставляем её между тегом <a> и </a>.
Вот какой код у нас должен получится:
Code
<a href="http://infoscript.ru" title="Всё для веб-мастреа"><img src="http://infoscript.ru/imgs/logo.png"></a>

Вместо http://infoscript.ru/imgs/logo.png использовать свою ссылку на картинку.
Вот что у должно получится:

Как сделать, чтобы ссылка открывалась в новом окне.

Чтобы ссылка открывалась в новом окне, надо в каждый те <a> добавлять target="_blank".
Code

<a href="http://infoscript.ru" title="Всё для веб-мастреа"target="_blank">Infoscript</a>

Как дать ссылку на электронную почту.
Пример ссылки на электронный адрес:
Code

<a href="mailto:danil_nikishkin@inbox.ru">

Изменение вида ссылок с помощью css.
Изначально внешний вид ссылок задается браузером и OS, но их вид можно изменить с помощью css. Можно применять свойства ко всем ссылкам на странице или же к отдельным, для этого надо задать ссылке класс.
Вот пример обычной не посещенной ссылки в Windows:

А теперь давайте попробуем поменять внешний вид ссылки с помощью css.
Зададим внешний вид ссылок на всём сайте.  
Code

a {
}

И применим вот такие свойства:
Code

a {
  background: black; /*Чёрный фон*/
  color: white; /*Белый цвет ссылки*/
  padding: 10px; /*Внешний отступ в 10px*/
}

Вот что получится:


Конечно свойства, которые мы задали очень простые. Поэкспериментируйте и у вас получится намного лучше.

На этом я заканчиваю свою статью. Всем спасибо за внимание!

Источник/Автор: infoscript.ru | Danil | Silver

Категория: HTML, CSS, JS, JQ | Добавил: Danil (25.02.2012) Просмотров: 854 | Рейтинг: 4.6/5
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]