Како усидрити ХТМЛ. ХТМЛ сидро на страници

Интернет је одавно постао саставни дио свакодневног живота. Људи су срећни да посете различите сајтове да читају вести, деле фотографије, проводе неко време гледајући забавне видео снимке или купују.

И упркос чињеници да долази доба мобилних технологија и апликација, технике стварања прекрасних и привлачних веб страница настављају да се побољшавају. Мало корисника схвата шта се скрива иза сцене свог омиљеног претраживача и шта се дешава када плаћају на сајту за куповину кредитним картицама. Али, у ствари, иза свега тога, постоје хиљаде линија кода које су развијене и побољшане током година како би се осигурало најпогодније и пријатније искуство у коришћењу веб сервиса. ХТМЛ сидро, хипервеза, маркуп, наслови - ови и многи други концепти ће бити детаљније описани у овом чланку.

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

Да би се креирали сајтови и странице на Интернету које би се могле отворити и изгледати исто у десетинама различитих претраживача на више платформи у исто време, било је потребно креирати једну спецификацију за ову врсту докумената. Ова спецификација је ХТМЛ (са енглеског језика. ХиперТект Маркуп Лангуаге).
Преведено, то значи „језик за хипертекстуално означавање“. А овај термин прилично прецизно описује његову сврху. Структура ХТМЛ документа не описује садржај саме веб странице, већ само „означава“ различите дијелове, дајући им одређене атрибуте или својства. Ова ознака дозвољава документу да изгледа исто од претраживача до претраживача, а такође је и кључ за тренутне протоколе за пренос података на Глобал Веб - ХТТП и ХТТПС.

Структура ХТМЛ документа

Основа сваког ХТМЛ документа је паран број ознака. То су посебне напомене које садржају у себи дају одређена својства. Кључна карактеристика ознака је да се морају ставити у парове - прва ознака је “отварање”, а “затварање” мора увијек слиједити.

Дакле, претраживач тачно зна које су границе атрибута које одређује ознака. Међутим, ознака може бити празна (не садржи садржај унутра). Пример потоњег је елемент новог реда. Ознаке које не садрже унутар било којег текста или других података, није потребно затворити. Ознаке се могу користити за давање текста одређеној боји или стилу, или за уградњу посебних елемената (табеле, медијске датотеке, везе) у документ.

ХТМЛ сидро и везе за документе

Да бисте посетиоцима сајта омогућили кретање између различитих страница или унутар једне странице, можете користити линкове. За кретање унутар једног сајта или неколико хиперлинкова се користи. Обично се користе за комуникацију између два потпуно различита подручја ресурса.

Једно од правила доброг дизајна веб сајта је правило о потреби спајања на једном месту само хомогеног типа или сврхе садржаја. Ако страница постане веома велика или је подијељена на логичке дијелове, онда има смисла допустити кориснику да се брзо креће између дијелова странице. И овде ће такозвани ХТМЛ сидро бити веома корисно. Често се ова техника користи у дизајну заглавља, да би се повезала са циљним делом информације. Такође, овај тип навигације је изузетно погодан за употребу у промотивне сврхе, усмеравајући корисника на одређени садржај, заобилазећи све остале.

Да би користио ХТМЛ сидро са глатким скроловањем, програмер треба да угради линк у ЈаваСцрипт библиотеку у структуру документа.

Како створити

Да би се ХТМЛ страница ставила на страницу, користи се стандардни линк линк. Ово је једна од главних ознака у структури ХТМЛ документа.
Може имати број атрибута, као што је хреф или име, који указују на тип везе описане овом ознаком. ХТМЛ веза за сидрење разликује се од хипервезе користећи симбол "#". Након тога, морате навести јединствено име сидра тако да претраживач може јединствено одредити циљ преласка. Изузетно је важно не заборавити да у истом документу не можете да доделите два идентична имена, али то је дозвољено на различитим страницама сајта.

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

Па како онда усидрити ХТМЛ на страници? Прво морате одабрати подручје документа које ће послужити. То може бити титл унутар великог текста. Такви поднаслови су обично означени.

Идентификатор сидра се обично поставља у почетној ознаци, а ид = атрибут се користи за описивање. Након тога слиједи јединствено име самог сидра. Овај атрибут се може налазити у скоро свакој почетној ознаци. Након именовања ХТМЛ сидра на страници, све што треба да урадимо је да креирамо везу до ње у другом делу документа или у другом документу.

Ови поднаслови су обично означени.

. Идентификатор сидра се обично поставља у почетној ознаци, а атрибут “ид =” се користи за описивање. Након тога слиједи јединствено име самог сидра. Овај атрибут се може налазити у скоро свакој почетној ознаци. Након што је име хтмл сидра успостављено, све што треба да урадимо је да креирамо везу до ње у другом делу документа или у другом документу. Веза на сидро унутар истог документа често се назива локална, док се веза са различитим документима назива апсолутна.

Међутим, коришћење ХТМЛ-а је тешко постићи глаткоћу у прелазима између сидара. Али овај приступ ће довести до чињенице да је корисник заплетен у навигацију на страници или између страница и тиме покварити њихов утисак о кориштењу ресурса. У случају локалних сидара, много је боље користити ХТМЛ сидро са глатким помицањем, тако да посјетитељ може визуално пратити смјер у којем га администрација води кроз ресурс.

Да бисте креирали овај ефекат, потребно је да употребите ЈаваСцрипт. Принцип рада мале скрипте ће бити следећи - прво морамо блокирати стандардно понашање ХТМЛ сидра на страници. Ово је неопходно како би се претраживач одлучио да преусмери посетиоца на линк. Након тога, наша скрипта обрађује идентификатор који се налази у ознаци . Име ХТМЛ сидра је сачувано, у документу се тражи да се пронађе одредиште за нашу анимацију. Када се пронађе циљ, скрипта израчунава удаљеност од почетка странице до горње тачке елемента на који смо се позивали. Ова удаљеност ће се користити за глатко анимирање помицања странице. Потребно је само одредити брзину свитка за себе.

Посебно правило

При дизајнирању веб страница, дизајнери би требали увијек имати на уму да је погрешно преоптеретити страницу с информацијама, јер то може нарушити њену перцепцију. Ако вам је потребно да кориснику пружите могућност да брзо оде на важан део странице, онда не постоји ништа једноставније и боље за ову сврху него коришћење ХТМЛ сидра. Анимација прелаза између различитих делова странице реализује се по неколико линија ЈаваСцрипт кода, а ефекат је значајан - корисник ће увек бити свестан у ком се делу документа налази и где треба да иде.