Как да закотвите HTML

Съдържание:

Как да закотвите HTML
Как да закотвите HTML

Видео: Как да закотвите HTML

Видео: Как да закотвите HTML
Видео: Веб-разработка - Компьютерные науки для лидеров бизнеса 2016 2024, Ноември
Anonim

Котвата на сайта е много полезна, ако искате статиите на вашия сайт да имат удобен преход между елементите от списъка. Те обръщат страницата до желаната точка или отварят желаната страница, помагайки на потребителя бързо да намери информацията, от която се нуждае.

Как да закотвите HTML
Как да закотвите HTML

Ако пишете свой собствен сайт, трябва да сте помислили как да направите навигацията на вашия сайт по-удобна. За да не се налага потребителят да търси информацията, от която се нуждае, сред всички страници на вашия сайт, най-добре е да използва техниката „закотвяне“. Той ще създаде връзка към всяка информация или документ навсякъде на вашия сайт.

Теория

За да създадете котва, са ви необходими два елемента:

  • Частта от кода, която показва връзката към нашата котва, останала в друга част на сайта.
  • Всяка част от кода, в която може да бъде посочен идентификатор, е нашата котва.

Първо трябва да създадете първата част на котвата - връзка към нея. Котва връзката има две части: връзка към страница и котва връзка.

  1. Създайте таг „a“или друг маркер, който поддържа атрибута „href“
  2. В този таг създайте атрибута "href"
  3. Посочете връзка към страницата на сайта в стойността на атрибута.
  4. След връзката посочете връзката към котвата, като използвате символа "#" и всяко име за котвата (написано заедно, например: "#anchor")

Ако пропуснете точка 3 и не посочите връзка към страницата на сайта, котвата ще бъде търсена на текущата страница. Тоест, ако искате да създадете връзка към котва, разположена на същата страница, можете да пропуснете връзката към самата страница.

Остава да се създаде втората част на котвата - идентификатора. Той се отнася до всеки таг в кода на сайта, който поддържа атрибута id. За да създадете котва, трябва:

  1. Създайте атрибут "id" в необходимия таг.
  2. В атрибута "id" посочете стойността на името на котвата, посочена в предишната стъпка. (пример:)

След тези две стъпки на сайта се появява връзка, която ще ви отведе до посочената котва.

Практика

Нека разгледаме как да създадем котва, като използваме конкретен пример.

Имаме проста страница като тази:

Изображение
Изображение

Имаме текст в горната и долната част на страницата, много "br" тагове, които създават пространство между текстовете. Трябва да създадем котва, за да можем бързо да разгледаме текста отдолу.

За да направите това, създайте нов таг - „а“след надписа „текст отгоре“. В него създаваме атрибута "href". За да направим котвата по-удобна, ще запишем "в линка".

Изображение
Изображение

Сега посочваме стойността "#yakor" в атрибута - това ще бъде връзка към името на котвата.

Изображение
Изображение

Първата част на котвата - връзката към нея - е готова. Сега остава само да създадем самата котва. Преминаваме към желаната част от страницата. В този случай това е „текст отдолу“. Тъй като това е прост текст без таг, трябва да го създадем. За да направите това, затворете текста в "абзац" - таг "p".

В този таг създаваме атрибута "id" и въвеждаме стойността "yakor" в него. Стойността "yakor" съответства на името на котвата, посочено в връзката.

Изображение
Изображение

Сега нашата котва работи както трябва.

Препоръчано: