phpjsJqueryhtmlcssblog

как сделать якорь на странице

Что такое якорь html или зачем нужен якорь html на странице? Сколько видов якорей существует!?

Подробно о якорях в html

1. Якорь на определенную часть страницы -> href + # + name
2. Якорь на определенную часть страницы -> href + # + id
3. Как сделать якорь на другую страницу

Скопировать ссылку



Якорь на определенную часть страницы -> href + # + name

В первом пункте повторим определение - "что такое якорь":

Якорь html на странице - это как и морской термин выполняет определенную задачу!


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

Внимание!
Все ещё поддерживаемый атрибут name(считается устаревшим).


Обязательное условие для якоря

Имя у якоря должно быть уникальным.

В данный момент существует два вида якорей.

Синтаксис якоря name

Создаем ссылку вида:

<a href="#yakor">Перейдем к якорю.</a>

Располагаем в требуемом месте якорь:

<a name=yakor></a>



Результат исполнения якоря в html

Для того, чтобы протестировать работу якоря в html нажмите по ссылке:

Перейдем к якорю.

Скопировать ссылку



Якорь на определенную часть страницы -> href + # + id

Второй пример якоря на определенную часть текста - всё тоже самое. что и в первом пункте, только с той разницей, что вместо name используется id.


Как вы знаете, условие использования id - аналогичные, что и для name - уникальное имя.

Синтаксис якоря id

Создаем ссылку вида:

<a href="#yakor_2">Перейдем к якорю 2.</a>

Располагаем в требуемом месте якорь:

<a id =yakor_2></a>



Результат исполнения якоря в html

Для того, чтобы протестировать работу якоря в html нажмите по ссылке:

Перейдем к якорю.





---






Пример реализации работы якоря в html

здесь может быть текст

Выше вы видите такую конструкцию:
<a name=yakor>здесь может быть текст</a>
Теперь давайте вернемся в ту часть страницы, с которой мы сюда пришли вернуться к первой ссылки на которую только что нажали.




Пример реализации работы якоря в html

Выше вы сможете увидеть такую конструкцию если нажмете исследовать элемент:

<a id=yakor_2></a>

Мы можем вернуться в то место, откуда пришли вместо name опять id

Скопировать ссылку



как сделать якорь на другую страницу

Чтобы сделать якорь на другую страницу нам понадобится :

Тег ссылки

Сам адрес, возьмем предыдущую тему и якорь на первую тему. После html добавляем решетку и якорь paragraph_1

https://dwweb.ru/page/css/property/005_width_css.html#paragraph_1

Соберем весь якорь на другую страницу вместе:

Html :
<a href=https://dwweb.ru/page/css/property/005_width_css.html#paragraph_1 target=_blank>Якорь на другую страницу</a>
Результат: Якорь на другую страницу

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =

---