HTML Linkovi (nastavak)

LINKOVI (nastavak mogućih referenciranja lokacija)

Referenciranje na istoj strani – ovo je ujedno najkomplikovaniji način referenciranja jer uključuje kreiranje dva a taga. Prvi tag izgleda vrlo slično po strukturi već pomenutim slučajevima s tom razlikom što href atribut počinje znakom # koji označava da je link na koji želimo da odemo na istoj HTML strani.Ovde se ne radi o tome da će klikom na link biti učitana druga web strana, već će praktično, klik na link izazvati skrolovanje sadržaja strane do mesta na kome se nalazi drugi a tag.

Sintaksa tog drugog taga je različita u odnosu na prethodno prikazanu. Razlika je u tome što taj a tag nema href atribut već umesto njega ima atribut id. Sintaksa oba taga je prikazana ispod.

<a id=”link_na_istoj_strani”></a> – ovaj kod je nevidljiv na strani, tj. ne prikazuje se nikakav tekst (vidite da izmedju otvarajucćeg i zatvarajućeg dela nema nikakvog sadržaja). Ovaj kod se umeće na mesto na koje želimo da pretraživač dodje skrolovanjem sadržaja kada se klikne na link prikazan ispod.

<a href=”#link_na_istoj_strani”>Link</a>klik na ovaj link inicira skrolovanje strane do mesta na kome se nalazi a tag sa atributom id=link_na_istoj_strani.

Primer:

<!DOCTYPE html>

<html>

<head>

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

<title>Link na istoj strani</title>

</head>

<body>

Sadrzaj<br>

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

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

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

<p>Iskopirajte prethodni paragraf 10 puta kako bi videli efekat skrolovanja!!!</p>

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

<h1>Stavka 1</h1>

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

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

<h1>Stavka 2</h1>

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

</body>

</html>

Pojašnjenje. Odmah nakon otvaranja body taga, imate kod

<body>

Sadrzaj<br>

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

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

On označava mesto unutar strane na koje ćete otići kada kliknete na tekst Stavka 1 ili Stavka 2. Dole u kodu imate <a id=”stavka1″></a> koje služi kao odrednica mesta na koje dolazite nakon što kliknete na Stavka 1. Isto se dešava i u slučaju klika na Stavka 2

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