Kako usidriti HTML. HTML sidro na stranici

Internet je odavno postao sastavni dio svakodnevnog života. Ljudi su rado posjećivali razne web-lokacije kako bi mogli čitati vijesti, dijeliti fotografije, provesti neko vrijeme gledajući zabavne videozapise ili kupovati.

I unatoč činjenici da dolazi doba mobilnih tehnologija i aplikacija, tehnike stvaranja prekrasnih i privlačnih web stranica nastavljaju se poboljšavati. Malo korisnika shvaća što se skriva iza kulisa svog omiljenog preglednika i što se događa kada plaćaju na web-lokaciji za kupnju kreditnim karticama. No, u stvari, iza svega toga, postoje tisuće linija koda koje su razvijene i poboljšane tijekom godina kako bi se osiguralo najpogodnije i ugodnije iskustvo od korištenja web usluge. HTML sidro, hiperveza, oznaka, naslovi - ovi i mnogi drugi koncepti bit će detaljnije opisani u ovom članku.

Osnova web stranice

Kako bi se stvorile web stranice i stranice na internetu koje bi se mogle otvoriti i izgledati isto u desetinama različitih preglednika na nekoliko platformi u isto vrijeme, bilo je potrebno stvoriti jednu specifikaciju za ovu vrstu dokumenata. Ova specifikacija je HTML (s engleskog jezika. HyperText Markup Language).
Prevedeno, to znači "hipertekstualni označni jezik". A ovaj pojam vrlo točno opisuje svoju svrhu. Struktura HTML dokumenta ne opisuje sadržaj same web stranice, već samo „označava“ različite odjeljke, dajući im određene atribute ili svojstva. Ova oznaka omogućuje da dokument izgleda jednako od preglednika do preglednika, a također je i ključ za trenutne protokole za prijenos podataka na Global Web - HTTP i HTTPS.

Struktura HTML dokumenta

Osnova bilo kojeg HTML dokumenta je paran broj oznaka. To su posebne bilješke koje sadržaju u sebi daju određena svojstva. Ključna značajka oznaka je da se moraju staviti u parove - prva oznaka je "otvaranje", a "zatvaranje" mora uvijek slijediti.

Dakle, preglednik točno zna koje su granice atributa koje određuje oznaka. Međutim, oznaka može biti prazna (ne sadrži sadržaj unutar njega). Primjer potonjeg je element novog reda. Oznake koje ne sadrže unutar bilo kojeg teksta ili drugih podataka, nije potrebno zatvoriti. Oznake se mogu koristiti za davanje teksta određenoj boji ili stilu, ili ugradnju posebnih elemenata (tablica, medijskih datoteka, veza) u dokument.

Veze za sidrenje i dokumente HTML-a

Da biste posjetiteljima web-lokacije omogućili navigaciju između različitih stranica ili unutar jedne stranice, možete koristiti veze. Za kretanje unutar jedne stranice ili nekoliko hiperveza. Obično se koriste za komunikaciju između dva potpuno različita područja resursa.

Jedno od pravila dobrog dizajna web stranice je pravilo o potrebi spajanja na jednom mjestu samo homogenog tipa ili svrhe sadržaja. Ako stranica postane vrlo velika ili je podijeljena na logičke dijelove, onda ima smisla dopustiti korisniku da se brzo kreće između dijelova stranice. I ovdje će takozvani HTML sidro biti vrlo korisno. Često se ova tehnika koristi u dizajnu zaglavlja, kako bi ga se povezalo s ciljnim dijelom informacije. Također, ova vrsta navigacije je izuzetno pogodna za korištenje u promotivne svrhe, usmjeravajući korisnika na određeni sadržaj, zaobilazeći sve ostale.

Da bi koristio HTML sidro uz glatko pomicanje, programer mora u strukturu dokumenta ugraditi vezu do JavaScript biblioteke.

Kako stvoriti

Da biste na stranicu stavili HTML sidro, koristi se standardna oznaka veze. To je jedna od glavnih oznaka u strukturi HTML dokumenta.
Može imati brojne atribute, kao što je href ili ime, koji označavaju vrstu veze opisane ovom oznakom. HTML veza sidra razlikuje se od hiperveze pomoću simbola "#". Nakon toga morate navesti jedinstveno ime sidra kako bi preglednik mogao jedinstveno odrediti cilj prijelaza. Iznimno je važno ne zaboraviti da unutar istog dokumenta ne možete dodijeliti dva identična imena, ali to je dopušteno na različitim stranicama stranice.

Primjer stvaranja sidra u strukturi dokumenta

Pa kako se usidri HTML na stranici? Prvo morate odabrati područje dokumenta koje će poslužiti. Može biti podnaslov unutar velikog teksta. Takvi podnaslovi obično su označeni.

Identifikator sidra se obično postavlja u početnoj oznaci, a id = atribut se koristi za opisivanje. Nakon toga slijedi jedinstveno ime samog sidra. Ovaj atribut može se nalaziti u gotovo svakoj početnoj oznaci. Nakon imenovanja HTML sidra na stranici, sve što trebamo je stvoriti vezu na nju u drugom dijelu dokumenta ili u drugom dokumentu.

Ti su podnaslovi obično označeni.

, Identifikator sidra se obično postavlja u početnoj oznaci, a atribut “id =” koristi se za opisivanje. Nakon toga slijedi jedinstveno ime samog sidra. Ovaj atribut može se nalaziti u gotovo svakoj početnoj oznaci. Nakon što je ime html sidra uspostavljeno, sve što trebamo učiniti je stvoriti vezu na njega u drugom dijelu dokumenta ili u drugom dokumentu. Veza na sidro unutar istog dokumenta često se naziva lokalnim, dok se veza s različitim dokumentima naziva apsolutna.

Međutim, korištenje HTML-a teško je postići glatkoću u prijelazima između sidara. No, ovaj pristup će dovesti do činjenice da je korisnik zapleten u navigaciju na stranici ili između stranica i time pokvariti njihov dojam korištenja resursa. U slučaju lokalnih sidara, mnogo je bolje koristiti HTML sidro s glatkim pomicanjem, tako da posjetitelj može vizualno pratiti smjer u kojem ga uprava vodi kroz resurs.

Da biste stvorili ovaj efekt, morate upotrijebiti JavaScript. Princip rada male skripte bit će sljedeći - prije svega moramo blokirati standardno ponašanje HTML sidra na stranici. To je potrebno da preglednik ne odluči preusmjeriti posjetitelja na vezu. Nakon toga, naša skripta obrađuje identifikator koji se nalazi u oznaci . Ime HTML sidra je sačuvano, u dokumentu se traži da se pronađe odredište za našu animaciju. Kada se pronađe cilj, skripta izračunava udaljenost od početka stranice do gornje točke elementa na koji smo se uputili. Ta će se udaljenost koristiti za glatko animiranje pomicanja stranice. Potrebno je samo odrediti brzinu pomicanja za sebe.

Posebno pravilo

Pri dizajniranju web stranica, dizajneri bi trebali uvijek imati na umu da je pogrešno preopteretiti stranicu s informacijama, jer to može umanjiti njezinu percepciju. A ako trebate dati korisniku mogućnost da brzo ode na važan dio stranice, onda ne postoji ništa jednostavnije i bolje za tu svrhu nego korištenje HTML sidra. Animacija prijelaza između različitih dijelova stranice provodi se kroz nekoliko redaka JavaScript koda, a učinak je značajan - korisnik će uvijek biti svjestan u kojem se dijelu dokumenta nalazi i kamo treba ići.