• RSS
✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов 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». Можно использовать любой вариант, какой больше нравится. Вот по такому принципу и формируется ссылка внутри страницы.

Поделиться ссылкой:


« 
 »

Читайте также:

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


  • RSS

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

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