Показать Меню
falbar Основы HTML

Урок 14. Виды гиперссылок в HTML, создание якорей

Основы HTML

Одной из самых важных особенностей HTML это наличие в нём гиперссылок. В этой статье мы рассмотрим их разновидности и способы применения.

В HTML существует всего два вида ссылок: служебные и обычные. Служебные ссылки не видны пользователю и используются для нужд браузера. Они указываются в шапке сайта и формируются при помощи элемента link. В то время как обычные делаются с помощью элемента a и применяются для перехода по файлам.

Пример служебной ссылки:

<link href="путь_до_подключаемого_файла" type="text/css" rel="stylesheet" />

Пример обычной ссылки:

<a href="путь_до_файла">Пример ссылки</a>

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

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

Итак, давайте рассмотрим пример якоря и для начала надо написать простой HTML код:

<!DOCTYPE html>
<html>
<head>
	<title>Якоря</title>
</head>
<body>
	<a name="top"></a> <!-- Метка -->
	<h1>Название №1</h1>
	<p>Контетнт</p>
	<h1>Название №2</h1>
	<p>Контетнт</p>
	<h1>Название №3</h1>
	<p>Контетнт</p>
	<a href="#top">На верх</a> <!-- Ссылка на Метку -->
</body>
</html>

Потом помещаем сам якорь в нужное место, к которому будем ссылаться с атрибутом name. В нашем случае это после открывающего элемента body:

<body>
	<a name="top"></a> <!-- Метка -->
	<h1>Название №1</h1>

Далее ставим ссылку в конец документа в атрибуте href указываем через хэш название якоря к которому ссылаемся (все что следует за хешом считается названием метки):

<a href="#top">На верх</a> <!-- Ссылка на Метку -->
</body>

Вот и всё якорь готов. При нажатии на него браузер перенесёт пользователя к метке.

Выше был описан первый из способов создания якорей, который не совсем хороший, так как мы создаем пустые элементы. Есть гораздо удобней и без мусора вариант. В нём мы используем атрибут id, к которому будем ссылаться, а остальной принцип такой же.

В id могут содержаться латинские буквы a-z, A-Z,0-9, -, _, ., : и все. Так же id должен быть уникальным для элемента на всей странице.

<h1 id="top">Название №1</h1><!-- Метка -->

На практике точка и двоеточие не используются. Так же важное замечание то, что id должен начинаться с буквы.

Спасибо за внимание, в следующей статье мы завершим разбираться с HTML ссылками и рассмотрим более подробно их атрибуты, а также такие понятия как "Абсолютный путь" и "Относительный путь".

Подписаться на обновления

Комментариев еще не оставлено