Kako zasidrati HTML. Sidro HTML na strani

Internet je že dolgo postal sestavni del vsakdanjega življenja. Ljudje z veseljem obiščejo različna spletna mesta in preberejo novice, izmenjujejo fotografije, nekaj časa gledajo smešne videoposnetke ali kupujejo.

In kljub temu, da prihaja obdobje mobilnih tehnologij in aplikacij, se tehnike ustvarjanja lepih in privlačnih spletnih strani še naprej izboljšujejo. Le malo uporabnikov se zaveda, kaj se skriva v zakulisju svojega najljubšega brskalnika in kaj se zgodi, ko na spletnem mestu plačajo za nakupe s svojimi kreditnimi karticami. Toda v resnici, za vsem tem, je na tisoče vrstic kode, ki je bila razvita in izboljšana v preteklih letih, da se zagotovi najbolj priročno in prijetno izkušnjo z uporabo spletne storitve. HTML sidro, hiperpovezava, označevanje, naslovi - ti in številni drugi koncepti bodo podrobneje opisani v tem članku.

Osnova spletne strani

Da bi ustvarili spletne strani in strani na internetu, ki bi se lahko odprle in izgledale enako v več deset različnih brskalnikih na več platformah hkrati, je bilo treba ustvariti eno samo specifikacijo za to vrsto dokumentov. Ta specifikacija je bila HTML (iz angleščine. HyperText Markup Language).
Prevedeno pomeni „hipertekstni označevalni jezik“. In ta izraz natančno opisuje njegov namen. Struktura dokumenta HTML ne opisuje vsebine same spletne strani, temveč zgolj »označuje« različne odseke in jim daje določene lastnosti ali lastnosti. Ta oznaka omogoča, da je dokument videti iz brskalnika v brskalniku, in je tudi ključ do trenutnih protokolov prenosa podatkov na globalnem spletnem - HTTP in HTTPS.

Struktura dokumenta HTML

Osnova vsakega dokumenta HTML je sodo število oznak. To so posebne opombe, ki vsebini v sebi dajejo določene lastnosti. Ključna značilnost oznak je, da jih je treba postaviti v paru - prva oznaka je »odpiranje« in »zapiranje« mora vedno slediti.

Tako brskalnik natančno ve, kakšne so meje atributov, ki jih določa oznaka. Oznaka je lahko prazna (v njej ni vsebine). Primer slednjega je element novega reda. Oznake, ki ne vsebujejo nobenega besedila ali drugih podatkov, ni treba zapirati. Oznake lahko uporabite, da besedilu dodelite določeno barvo ali slog ali pa vstavite posebne elemente (tabele, predstavnostne datoteke, povezave) v dokument.

Povezave HTML sidra in dokumenta

Da bi obiskovalcem mesta omogočili navigacijo med različnimi stranmi ali znotraj ene strani, lahko uporabite povezave. Za premik znotraj enega mesta ali več hiperpovezav. Ponavadi se uporabljajo za komunikacijo med dvema povsem različnima področjema vira.

Eno od pravil dobrega oblikovanja spletnih strani je pravilo, da je treba združiti na enem mestu le homogeno vrsto ali namen vsebine. Če postane stran zelo velika ali je razdeljena na logične dele, je smiselno, da se uporabniku omogoči, da se hitro premika med deli strani. In tukaj tako imenovani HTML sidro bo zelo koristno. Pogosto se ta tehnika uporablja pri oblikovanju glave, da jo povežemo s ciljnim podatkom. Tudi ta vrsta navigacije je izjemno priročna za uporabo v promocijske namene in usmerja uporabnika na določeno vsebino, mimo vseh ostalih.

Če želite uporabiti sidro HTML z gladkim drsenjem, mora razvijalec v strukturo dokumenta vdelati povezavo do knjižnice JavaScript.

Kako ustvariti

Za postavitev sidra HTML na stran se uporablja standardna povezovalna oznaka. To je ena glavnih oznak v strukturi dokumenta HTML.
Lahko ima številne atribute, kot je href ali ime, ki označujejo vrsto povezave, ki jo opisuje ta oznaka. Povezava HTML sidra se razlikuje od hiperpovezave s simbolom "#". Za njim morate določiti edinstveno ime sidra, tako da lahko brskalnik enolično določi cilj prehoda. Zelo pomembno je, da ne pozabimo, da v istem dokumentu ne morete dodeliti dveh enakih imen, vendar je to dovoljeno na različnih straneh spletnega mesta.

Primer ustvarjanja sidra v strukturi dokumenta

Kako torej zasidrati HTML na stran? Najprej morate izbrati območje dokumenta, ki bo služil. Lahko je podnaslov znotraj velikega besedila. Takšne podštevilke so običajno označene.

Identifikator sidra je ponavadi nastavljen v začetni oznaki, za opis pa se uporablja atribut id =. Sledi edinstveno ime sidra. Ta atribut lahko vsebuje skoraj vsaka začetna oznaka. Po poimenovanju sidra HTML na strani, moramo le ustvariti povezavo do nje v drugem delu dokumenta ali v drugem dokumentu.

Te tarifne podštevilke so običajno označene.

. Identifikator sidra je ponavadi nastavljen v začetni oznaki, za opis pa se uporablja atribut “id =”. Sledi edinstveno ime sidra. Ta atribut lahko vsebuje skoraj vsaka začetna oznaka. Ko je ime html sidra vzpostavljeno, moramo le ustvariti povezavo do njega v drugem delu dokumenta ali v drugem dokumentu. Povezava na sidro v istem dokumentu se pogosto imenuje lokalna, medtem ko se povezava z različnimi dokumenti imenuje absolutna.

Vendar pa je uporaba HTML-ja težko doseči gladkost prehodov med sidri. Toda ta pristop bo privedel do dejstva, da je uporabnik zapleten v navigaciji na strani ali med stranmi in s tem pokvari njihov vtis o uporabi vira. Pri lokalnih sidrih je bolj zaželeno uporabljati HTML sidro z gladkim drsenjem, tako da lahko obiskovalec vizualno spremlja smer, v kateri ga uprava vodi skozi vir.

Če želite ustvariti ta učinek, morate uporabiti JavaScript. Načelo delovanja malega skripta bo sledeče - najprej moramo blokirati standardno vedenje HTML sidra na strani. To je potrebno, da se brskalnik ne odloči za preusmeritev obiskovalca na povezavo. Po tem, naš skript obdeluje identifikator, ki je v oznaki . Ime sidra HTML je ohranjeno, v dokumentu se išče iskanje cilja za našo animacijo. Ko je cilj najden, skript izračuna razdaljo od začetka strani do zgornje točke elementa, na katerega smo se nanašali. Ta razdalja se bo uporabljala za nemoteno animiranje drsenja po straneh. Hitrost drsenja moramo določiti samo za nas.

Posebno pravilo

Pri oblikovanju spletnih strani morajo oblikovalci vedno vedeti, da je napačno preobremeniti stran z informacijami, saj bi to lahko poslabšalo njeno dojemanje. In če morate uporabniku dati možnost, da hitro odide na pomemben del strani, potem ni nič enostavnejšega in boljšega za ta namen kot uporaba HTML sidra. Animacija prehoda med različnimi deli strani se izvaja z več vrsticami JavaScript kode in učinek je pomemben - uporabnik se bo vedno zavedal, v katerem delu dokumenta je in kje mora iti naprej.