наверх






Главное


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

<a href="URL документа, на который будет ввести ссылка">Здесь текст</a>


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

target


Этот атрибут отвечает за то, как открывать представленную нами ссылку. По умолчанию в качестве значения данного атрибута стоит значение _self . Для того, чтобы открыть ссылку в новом окне используется значение _blank:

<a href="http://yandex.ru/" target="_blank">Поисковая система Яндекс</a>


Другие значения:

_blankЗагружает страницу в новое окно браузера.
_selfЗагружает страницу в текущее окно. Значение стоит по умолчанию.
_parentЗагружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_topОтменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.


title


Это тоже один из немало важных атрибутов, который поможет нам сформировать ссылку. Указав атрибут title при наведении на ссылку посетитель увидит в подсказке то, что было написано в качестве значения данного атрибута. Пример:

<a href="http://yandex.ru/" target="_blank" title="Поисковая система Яндекс">yandex.ru</a>


Так же, ссылки можно использовать и вместе с изображениями (урок вставки изображений в HTML документ). Например, можно сделать так:

<a href="/" target="_blank" title="Перейти по ссылке"><img src="/img/apple.jpg" width="300px" height="148px" alt="Яблочный сад"></a>


Дополнительно


Давайте рассмотрим, что же еще можно делать с помощью данного элемента. Первым делом, с помощью элемента <a> можно создавать ссылку открывающую интерфейс почтового клиента посетителя, где уже будет указан адрес написанной почты. То есть можно создать ссылку на почту. Делается это просто: перед указанием значения атрибута href необходимо указать mailto:, а уже после указать саму почту.

<a href="mailto:mail@site.ru">Отправить письмо</a>


Так же, с помощью данного элемента можно создавать "якоря" веб-страницы.

Для того, что бы создать якорь необходимо в атрибуте href добавить знак хеша (#), а уже после него указать название нашего якоря. Пример:

<a href="#top">Наверх!</a>


Мы создали ссылку-якорь. Теперь нам нужно вверху нашей веб-страницы добавить любой элемент, который будет иметь идентификатор такой же, как и название якоря:

<div id="top"></div>


Якоря нужны для того, чтобы перебрасывать посетителей по веб-странице, то есть при клике на якорь посетителя перекинет на ту часть страницы, где расположен элемент, с таким же идентификатором.

Так же, можно создать якорь, который перекинет посетителя сайта на часть другой страницы вашего сайта. Это делается так:

<a href="rules.html#razdel">Правила раздела</a>


rules.html - это страница, на которую мы хотим, что бы посетитель зашел.
#razdel - это якорь, который так же должен стоять на странице rules.html.





Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.