✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов e-mail siteblogger@inbox.ru icq 353-724-370

Главная ›› Уроки по HTML, HTML5 ›› Ссылка внутри страницы HTML

Ссылка внутри страницы HTML

Иногда на практике возникает необходимость сделать ссылку на определенную область внутри одной страницы HTML. Это очень полезный «прием», ведь с его помощью мы всегда можем направить читателя по клику в ту область страницы, в которую нам необходимо. Таким образом, в данном уроке я расскажу, как делается ссылка внутри страницы.

Ссылка внутри страницы HTML

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

1) Ссылка внутри страницы с помощью атрибута «name»:

<html>
<head>
<title>Структура HTML документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<p> <a href="#link">Перейти к разделу 5</a></p>
<h1> Заголовок раздела 1</h1>
<p>Текст раздела 1</p>
<h2>Заголовок раздела 2</h2>
<p>Текст раздела 2</p>
<h2>Заголовок раздела 3</h2>
<p>Текст раздела 3</p>
<h2>Заголовок раздела 4</h2>
<p>Текст раздела 4</p>
<h2><a name="link">Заголовок раздела 5</a></h2>
<h2>Заголовок раздела 6</h2>
<p>Текст раздела 6</p>
<h2>Заголовок раздела 7</h2>
<p>Текст раздела 7</p>
<h2>Заголовок раздела 8</h2>
<p>Текст раздела 8</p>
<h2>Заголовок раздела 9</h2>
<p>Текст раздела 9</p>
<h2>Заголовок раздела 10</h2>
<p>Текст раздела 10</p>
</body>
</html>

В данном примере мы прописали ссылку (строка 7) и непосредственно сам атрибут «name» с параметром «link» (строка 16). В результате чего, при нажатии по ссылке «Перейти к заголовку раздела 5» нас перебросит к 5 заголовку, т.к. именно для него мы и задали метку.

2) Ссылка внутри страницы с помощью атрибута (идентификатора) «id»:

<html>
<head>
<title>Структура HTML документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<p> <a href="#link">Перейти к разделу 5</a></p>
<h1>Заголовок раздела 1</h1>
<p>Текст раздела 1</p>
<h2>Заголовок раздела 2</h2>
<p>Текст раздела 2</p>
<h2>Заголовок раздела 3</h2>
<p>Текст раздела 3</p>
<h2>Заголовок раздела 4</h2>
<p>Текст раздела 4</p>
<div id="link"><h2>Заголовок раздела 5</h2></div>
<p>Текст раздела 5</p>
<h2>Заголовок раздела 6</h2>
<p>Текст раздела 6</p>
<h2>Заголовок раздела 7</h2>
<p>Текст раздела 7</p>
<h2>Заголовок раздела 8</h2>
<p>Текст раздела 8</p>
<h2>Заголовок раздела 9</h2>
<p>Текст раздела 9</p>
<h2>Заголовок раздела 10</h2>
<p>Текст раздела 10</p>
</body>
</html>

Данный пример практически аналогичен первому. Вместо атрибута «name» здесь используется идентификатор «id». Можно использовать любой вариант, какой больше нравится. Вот по такому принципу и формируется ссылка внутри страницы.

Поделитесь ссылкой! Подпишитесь на обновления, чтобы получать новые публикации!

Оставить комментарий

Siteblogger.ru – проект, охватывающий достаточно широкий круг вопросов: создание сайтов и блогов на WordPress, поисковые системы, поисковая оптимизация и продвижение сайтов, способы заработка в сети, эффективные инструменты работы в Интернете и другое. Кроме того, мы оказываем услуги создания сайтов и блогов на WordPress с последующим их продвижением, а также занимаемся настройкой и ведением контекстной рекламы Яндекс.Директ и Google Adwords. По поводу сотрудничества просьба обращаться через контакты, все заявки и предложения будут обязательно рассмотрены. При использовании материалов данного сайта, пожалуйста, указывайте прямую индексируемую ссылку на Siteblogger.ru.

«Как создать и продвинуть свой сайт»

2011–2016 © Siteblogger.ru
Рейтинг@Mail.ru