18 октября 201809:07

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

1 комментарий
Юрий
VitrinaWorld7 ноября 2018 15:22
Убедительная просьба - не размещать рекламных объявлений мимо обсуждаемой темы.
Написать комментарий