Это очень интересная тема, а так же очень важный урок, так как гиперссылки используются повсеместно. Наверное, интернет не смог бы существовать без них. Из этого урока вы узнаете как создавать гиперссылки, расскажу, какие они бывают, какие у них есть свойства.
Гиперссылки 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, в общем материал достаточно несложный, я думаю для вас все будет просто и понятно, будут вопросы пишите.
Видеокурс по фреймворку Laravel
Профессиональный видеокурс с примером создания сайта на Laravel
Разрешается републикация материалов сайта с обязательным указанием ссылки на автора
материала (указание автора, его сайта), ссылки следующего содержания:
https://for-net.ru - Как сделать сайт самому
