Как да закрепим HTML. HTML котва на страницата

Интернет отдавна е неразделна част от ежедневието. Хората са щастливи да посетят различни сайтове, за да четат новини, да споделят снимки, да прекарват известно време в гледане на забавни видеоклипове или да правят покупки.

И въпреки факта, че ерата на мобилните технологии и приложения идва, техниките за създаване на красиви и привличащи вниманието уеб страници продължават да се подобряват. Малко потребители осъзнават какво се крие зад кулисите на любимия си браузър и какво се случва, когато плащат на сайта за покупки с кредитните си карти. Но всъщност зад всичко това има хиляди редове от код, които са разработени и подобрени през годините, за да осигурят най-удобния и приятен опит от използването на уеб услугата. HTML котва, хипервръзка, маркиране, заглавия - тези и много други понятия ще бъдат подробно описани в тази статия.

Основата на уеб страницата

За да се създадат уебсайтове и страници в Интернет, които могат да се отварят и да изглеждат еднакво в десетки различни браузъри на няколко платформи едновременно, беше необходимо да се създаде единна спецификация за този вид документи. Тази спецификация е HTML (от английски. HyperText Markup Language).
Преведено, това означава „език за маркиране на хипертекст”. И този термин описва неговата цел доста точно. Структурата на HTML документ не описва съдържанието на самата уеб страница, а само „маркира“ различни раздели, като им дава определени атрибути или свойства. Това маркиране позволява на документа да изглежда по същия начин от браузъра към браузъра, а също така е и ключът към текущите протоколи за пренос на данни в Global Web - HTTP и HTTPS.

Структура на HTML документа

В основата на всеки HTML документ има четен брой маркери. Това са специални бележки, които придават на съдържанието в себе си определени свойства. Ключовата характеристика на етикетите е, че те трябва да бъдат поставени по двойки - първият етикет е „отваряне“, а „затварянето“ трябва винаги да го следва.

По този начин браузърът знае точно какви са границите на атрибутите, зададени от маркера. Въпреки това маркерът може да е празен (не съдържа съдържание отвътре). Пример за последния е елемент от нов ред. Тагове, които не съдържат никакви текстове или други данни, не е необходимо да се затварят. Етикетите могат да се използват за придаване на текст на определен цвят или стил или за вграждане на специални елементи (таблици, мултимедийни файлове, връзки) в документа.

Връзки за HTML и документи

За да дадете на посетителите на сайта възможност за навигация между различни страници или в рамките на една страница, можете да използвате връзки. За преместване в рамките на един сайт или няколко хипервръзки се използват. Обикновено те се използват за комуникация между две напълно различни области на ресурса.

Едно от правилата за добър дизайн на уебсайта е правилото за необходимостта от сливане на едно място само хомогенно по вид или цел на съдържанието. Ако страницата стане много голяма или е разделена на логически секции, тогава има смисъл да се позволи на потребителя бързо да се движи между разделите на страницата. И тук така наречената HTML котва ще бъде много полезна. Често тази техника се използва в дизайна на заглавната част, за да се свърже с целевата част от информацията. Също така, този тип навигация е изключително удобен за използване за рекламни цели, насочвайки потребителя към определено съдържание, заобикаляйки всички останали.

За да използвате HTML котва с плавно превъртане, разработчикът трябва да вгради връзка към библиотека на JavaScript в структурата на документа.

Как се създава

За да поставите HTML котва на страницата, се използва стандартен маркер за връзка. Това е един от основните етикети в структурата на HTML документ.
Тя може да има редица атрибути, като href или име, които указват вида на връзката, описана от този маркер. Връзката за HTML котва се различава от хипервръзката, използвайки символа "#". След това трябва да посочите уникалното име на котвата, така че браузърът да може уникално да определи целта за прехода. Изключително важно е да не забравяме, че в рамките на един и същ документ не можете да зададете две идентични имена, но това е допустимо на различни страници на сайта.

Пример за създаване на котва в структурата на документа

И така, как да закрепите HTML на страница? Първо трябва да изберете областта на документа, която ще служи. Тя може да бъде субтитър в голям текст. Такива подпозиции обикновено се маркират.

Идентификаторът на котва обикновено се задава в началния маркер, а id = атрибутът се използва за него. Това е последвано от уникалното име на самата котва. Този атрибут може да се съдържа в почти всеки отварящ маркер. След назоваването на HTML котвата на страницата, всичко, което трябва да направим, е да създадем връзка към нея в друга част на документа или в друг документ.

Тези подпозиции обикновено са маркирани.

, Идентификаторът на котва обикновено се задава в началния маркер и атрибутът "id =" се използва за него. Това е последвано от уникалното име на самата котва. Този атрибут може да се съдържа в почти всеки отварящ маркер. След като името на html котвата бъде установено, трябва само да създадем връзка към нея в друга част на документа или в друг документ. Връзката към котвата в същия документ често се нарича локален, а връзката с различни документи се нарича абсолютна.

Въпреки това, използването на HTML е трудно да се постигне гладкост в преходите между котвите. Но този подход ще доведе до факта, че потребителят е заплетен в навигацията на страницата или между страниците и по този начин разваля впечатлението им от използването на ресурса. В случая с местните котви е много по-добре да се използва HTML котва с плавно превъртане, така че посетителят на сайта да може да наблюдава визуално посоката, в която администрацията го води през ресурса.

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

Специално правило

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