Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Гиперссылки html

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

Создание простой гиперссылки

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>Применяем гиперссылки на сайте</title>
</head>
<body>
<a href="page2.html" title="Вторая страница сайта">Перейти на другую страницу</a>
</body>
</html>

Здесь все просто, для создания гиперссылки мы используем тег <a> где href=”” это адрес страницы, на которую будет осуществлен переход, в нашем случае эта страница расположена в той же директории. Вы так же можете вставлять сюда адрес типа href=”http://site.ru/page.html“ или же это может быть ссылка на архив который расположен в другой папке на вашем сайте href=”arj/arhiv.zip” или же на любой другой документ, что собственно без разницы. Так же обязательным атрибутом любой гиперссылки является title это описание ссылки, это очень важный элемент в поисковой оптимизации и здесь вы прописываете ключевые слова той страницы или документа, на который ссылаетесь. Текст который расположен между тегом <a> </a> называется анкором, и так же является очень важным.

Открытие ссылки в новой странице

Существует еще один интересный атрибут который вам может пригодится:

<a href="page2.html" title="Вторая страница сайта" target=”_blank">Перейти на другую страницу</a>

Атрибут target со значением _blank открывает ссылку в новом окне, это часто применяется, если вы не хотите чтобы человек потерял ваши страницу и при этом получил необходимую ему информацию просто в новой вкладке или окне.

Ссылки изображения

Идем дальше, давайте теперь рассмотрим, как сделать изображение ссылкой:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>Применяем гиперссылки на сайте</title>
<style type="text/css">
 .img {
border: 0px;
 }
</style>
</head>
<body>
<a href="http://for-net.ru" title="Как сделать сайт"><img src="proba.png" alt="Это изображение шляпы" class="img" /></a>
<a href="http://for-net.ru" title="Как сделать сайт"><img src="proba.png" alt="Это изображение шляпы" /></a>
</body>
</html>

Результат в браузере:

Ссылка изображение

По сути здесь все просто, я поместил тег изображения между открытием и закрытием тега гиперссылки <a>, но я опять таки не просто вставил два изображения, к одному я присвоил класс img в котором обнулил рамку вокруг изображения, так как когда оно становится гиперссылкой она появляется, но не во всех браузерах, например IE вы увидите, а в Google Chrome нет.

Подчеркивание в ссылках

Примерно та же ситуация и с текстовыми ссылками, только они подчеркнуты во всех браузерах и снять подчеркивание можно достаточно просто:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>Применяем гиперссылки на сайте</title>
<style type="text/css">
 .no {
text-decoration: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="page2.html" title="Вторая страница сайта">Перейти на другую страницу</a>
<a href="page2.html" title="Вторая страница сайта" class="no">Перейти на другую страницу</a>
</body>
</html>

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

Ссылки внутри документа

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

<a name="razdel">< /a>

Тег используется такой же, как и в ссылке, только прописывается один атрибут name. Затем после того, как вы расставите все метки можно делать меню ссылок, которые должны будут выглядеть так:

<a href="#zagolovok">Раздел….< /a>

И последнее, что нам необходимо знать о гиперссылках, это ссылки на электронные почтовые ящики, реализуется очень просто, достаточно добавит в атрибут href запись вида mailto: и адрес почтового ящика:

<a href="mailto:sample@mail.ru">Моя почта< /a>

На этом я заканчиваю урок «Создание гиперссылок в html», как вы могли заметить у нас здесь не обошлось и без CSS, в общем материал достаточно несложный, я думаю для вас все будет просто и понятно, будут вопросы пишите.

Дата публикации:2014-04-23


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

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget