Linkovi na istoj strani

Kako da definišete link koji vas vodi na početak web strane?

U slučaju dugačkih web strana, nakon odlaska na željeno mesto, potrebno je na neki način definisati i povratak na mesto sa koga smo došli. Ono je obično početak web strane ali može biti i neko drugo.

U tom cilju potrebno je definisati link ispod teksta na mestu na koje smo otišli sa tekstom koji indikativno govori korisniku da se klikom na njega vraća na vrh strane:

<a href=”#top”>Povratak na sadrzaj</a>

Ono što još dodatno treba da uradimo je da odmah nakon otvarajućeg body taga kreiramo nevidljivi a link koji će izgledati ovako

<a id=”top”></a>

Primer koda nalazi se ispod.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<title>Link na istoj strani</title>

</head>

<body>

<a id=”top”></a>

Sadrzaj<br>

<a href=”#stavka1″>Stavka 1</a><br>

<a href=”#stavka2″>Stavka 2</a>

<a id=”stavka1″></a>

<h1>Stavka 1</h1>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

<a href=”#top”>Idi na vrh</a>

<a id=”stavka2″></a><h1>Stavka 2</h1>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

<a href=”#top”>Idi na vrh</a>

</body>

</html>

Pojašnjenje koda

Odmah nakon otvarajućeg body taga stavljate kod predstavljen na liniji <a id=”top”></a>

koji govori pretraživaču gde želite da odete nakon što korisnik klikne na link naveden dole u tekstu <a href=”#top”>Idi na vrh</a>

Referenciranje tačno odredjene pozicije na drugoj strani – ovo je specijalan slučaj u kome klik na tag otvara drugu stranu I skroluje sadržaj na mesto na kom se nalazi link sa id-jem odredjeni_deo.

<a href=”druge_strana.html#odredjeni_deo”>Link</a>

Na mesto na koje želimo da odemo, umeće se tag

<a id=”odredjeni_deo”></a>

Logičko povezivanje ova dva taga u celinu se, kao i u prethodnom slučaju, dešava preko definisanog imena, tj vrednosti atributa id.

U prošlosti je umesto atributa id bio korišćen atribut name ali od HTML verzije 5 to više nije dozvoljeno, tj. koristi se isključivo atribut id.

Referenciranje maila – ova modifikacija a taga koristi se u situaciji kada ne želimo da adresa bude javno prikazana u okviru web strane.

<a href=”mailto:bratimir@it4you.rs”>Pisite nam</a>

Klik na ovaj link otvara predefinisanu mail klijent aplikaciju na računaru (na Windows platformi to je obično Outlook) i polje To: novog maila se automatski popunjava mail adresom zadatom u href atributu (u ovom slučaju bratimir@it4you.rs)

Za slučaj da, pored popunjavanja polja primaoca i Subject: polje maila želimo da popunimo, sintaksa izgleda ovako:

<a href=”mailto:bratimir@it4you.rs?subject=Poruka%20sa%20sajta”>Pisite nam</a>

Tada će se, nakon klika na link, otvoriti nova mail poruka sa popunjenim poljem primaoca a Subject polje biće popunjeno tekstom “Poruka sa sajta”. Ovde primećujete specijalan znak %20 koji ustvari predstavlja HTML kod za prazno mesto. U slučaju da space ne napišete na ovaj način već kao “Poruka sa sajta” može se desiti da neki mail klijenti to protumače pogrešno. Stavljanje %20 umesto praznine osigurava ispravnost sintakse.

20-mailto-a-tag-html

Referenciranje dokumenata/aplikacija

Ukoliko želite da korisnik klikom na link download-uje ili otvori file koji se nalazi na serveru, najsigurniji način je kreiranje dokumenta u pdf formatu jer većina pretraživača ima ugradjen Adobe Acrobat Reader engine pa može da otvori dokument unutar prozora pretraživača. Ukoliko želite da korisnik dobije mogućnost čuvanja umesto automatskog otvaranja, najsigurniji način je da fajl upakujete kao .zip arhivu i linkujete nju. Svi ostali načini u nekim pretraživačima rade, a u nekima ne.

<a href=”uputstvo.zip”>Preuzmite uputstvo</a>

21-zipovanje-a-tag

Ovim smo iscrpeli sve moguće scenarije koje ćete sretati u praksi.

Pretpostavljam da će neki od vas pomisliti kako je prilično dosadno kliktati na tekst i da je mnogo uzbudljivije kliknuti na sliku. Ovo nas dovodi do taga <img> .

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn