Kreiranje
linkova u HTML5 je sasvim jednostavno zahvaljujući HTML tag-u <a… ></a>
koji se naziva anchor – sidro. Ovaj tag vam omogućava da pravite tri vrste
linkova. Možete kreirati linkove koji će vas prebacivati na druge veb stranice
vašeg sajta; možete kreirati linkove koji vode na druge veb stranice na
Internetu ili možete koristiti tag sidro da povezujete određena mesta na istoj
veb stranici. Međutim, pre nego što počnete da kreirate linkove, odlično bi
bilo da nešto znate i o URL adresi i razumete razliku između apsolutnih i
srodnih putanja. URL – Uniform Resource Locator je jedinstvena adresa resursa.
Sastoji se od specijalnih znakova od izvora prema resursu pa možemo reći da je URL takođe i adresa putanje prema veb stranici, datoteci ili određenom delu
teksta. URL adresa se uglavnom sastoji od protokola, naziv domena ili
direktorijuma; ili naziva datoteke. Naravno, URL adresa može biti i duža i
komplikovanija jer se kroz nju mogu prosleđivati razni parametri. URL ovog
bloga u address bar-u vašeg pretraživača možete otkucati skraćeno.
Kako to sve izgleda možete pogledati i na video-u:
ali
možete i ovako:
međutim, URL možete izgledati i komplikovanije:
Kada
surfujete Internetom vi uglavnom koristite veb adrese koje se sastoje od HTTP –Hyper Text Transfer Protocol – protokol za prenos hiperteksta koji komunicira
sa serverom koji mora da podržava isti protokol i domen; ili će te dobiti HTML grešku
400 ili 404 o neispravnom linku.
( Sa linkovima povezuje veb stranice i pravite sidra )
Postoje
i drugi protokoli poput HTTPS - Hyper Text Transfer Protocol Security, što je isto
i kao HTTP ali je komunikacija između klijenta i servera enkriptovana; zatim FTP –File Transfer Protocol – protokol za prenos datoteka vam omogućava da download-ujete
datoteke sa servera i drugi protokoli. Posle protokola, sledeći deo veb adrese je domen. Domen je
adresa računara na kome se nalazi neka veb stranica. Domen možete da pronađete
i besplatno preko provajdera koji to nude besplatno, ali to ne preporučujem.
Najbolje da pronađete nekog lokalnog provajdera i kod njega zakupite domen i to
na 2 godine. Vaš domen može da sadrži i broj porta. Podrazumevani port za HTTP
protokol je 80 i zbog toga što je podrazumevan nema potrebe da ga pišete. Ali
ako programirate neku veb aplikaciju npr. u Visual Studio .Net-u videćete da kada
pokrenete veb aplikaciju u address bar-u vašeg pretraživača i broj porta
koji je rezervisan za vaše lokalne veb aplikacije. Posle domena URL se može sastojati
od putanje direktorijuma i sa nazivom datoteke ili da koristi samo naziv
datoteke. Čak i tada URL može biti nastavljen i da sadrži i specijalne karaktere
koji su tu sa razlogom.
Šta
je srodna a šta apsolutna putanja?
Srodna
putanja je nešto što uvek treba da koristite kada pravite linkove. Sa njima će
te uvek biti sigurni da nećete imati komplikacije čak i ako se vaš veb sajt premesti
u neki drugi direktorijum servera gde se vaš veb sajt hostuje. Nećete morati
posle prepravljati vaše veb stranice.
Naziv
srodne putanje može da označava datoteku koja se nalazi u istom direktorijumu
kao i veb sajt.
href
= ”index.html”
Takođe
može da označava putanju datoteke koja se nastavlja od direktorijuma veb sajta.
href
= “family/album.html
Naziv
srodne putanje može da predstavlja jedan gornji deo direktorijuma veb sajta.
href
= “../album.html”
Ili
može da predstavlja dva gornja dela direktorijuma. Može i više ali se ne
preporučuje da tako pravite veb sajtove.
href
= “../../album.html”
Apsolutne
putanje uglavnom predstavljaju datoteke kada hoćete da koristite njihovu
apsolutnu lokaciju i direktorijume u sistemu računara ili u lokalnoj mreži iz
sigurnosnih razloga. Apsolutne putanje za razliku od srodnih putanja se kreću
od najvišeg nivoa direktorijuma do naziva datoteke. Uvek počinju kosom crtom.
Loša praksa je da se prvo koriste apsolutne putanje pre izrade veb sajta da bi
se zatim linkovi prepravljali za hostovanje veb stranica na Internetu. Npr. u
Linux-u stranica album.html se koristi u direktorijumu home, samo za upotrebu
na lokalnom operativnom sistemu. Tada ima smisla koristiti apsolutnu putanju.
href
= “home/family/album.html”
Međutim
ako bi se ista stranica nalazila u direktorijumu C na Windows operativnom sistemu,
onda bi se apsolutna putanja pisala ovako:
href
= “/c|/family/album.html”
Ili
ako koristite Macintosh računar:
href
= “/Macintosh%20Manuel/family/album.html”
Sad
kad ste upoznati sa URL i putanjama, možemo preći na praktični nivo da
vidite kako se prave linkovi.
Kako
da pravimo sidra i linkove?
Već
smo naveli da postoje tri vrste linkova. Anchor linkovi ili sidra koje nam
služe da sa jednog mesta veb stranice skočimo na drugi deo iste stranice.
Vi možete skakati sa jedne stranice na određeni deo druge stranice takođe
upotrebom sidra. Druga vrsta linkova je kada linkujete na veb stranicu druge
stranice veb sajta i treća vrsta linkova je kada linkujete neki udaljeni
veb sajt na Internetu. Pogledajte i iskodirajte primer koji prikazuje kako se pravi sve tri vrste linkova.
Pokrenite Visual Studio .Net ; kliknite na New zatim na Web Site… i izaberite
ASP .NET Empty Web Site šablon. Nazovite vaš veb sajt Links. Otvorite Solution
Explorer i kliknite desnim tasterom miša na direktorijum Links; zatim na
padajućem meniju kliknite na Add i na HTML Page. Ako u meniju ne vidite HTML
Page, idite na Add New Item … i tu izaberite HTML Page šablon. Nazovite je index.html
Zatim na isti način ubacite i drugu veb stranicu u vaš projekat i nazovite je page2.html.
Zatim
otvorite vaš pretraživač. Ukucajte veb adresu www.lipsum.com
i generišite 5 paragrafa teksta. Ovaj veb sajt služi programerima i dizajnerima
prilikom kreiranja veb sajta da generišu i koriste privremeni tekst kad god
vam je potreban. Samo kliknite na dugme Generate Lorem Ipsum.
Selektujte
svih 5 paragrafa i pritisnite na vašoj tastaturi CTRL + C kako bio ste kopirali
tekst. Zatim se vratite u vaš Visual Studio .Net. U Solution Explorer-u
kliknite na datoteku index.html. U editoru za pisanje HTML-a, pronađite sledeći
code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Pastujte
sa CTRL + V vaš tekst između tagova <body> … </body> . Svaki
paragraf odvojite sa <p> … </p> tagom.
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam vehicula eu metus lacinia consequat. Mauris ullamcorper
tincidunt massa, eu fringilla orci porttitor eleifend. Maecenas dictum turpis
et porta gravida. Nullam dignissim turpis malesuada felis blandit, quis
accumsan urna tristique. Praesent faucibus quam ac arcu ultrices egestas.
Mauris dictum lorem a sodales iaculis. Fusce volutpat ante quis lorem laoreet
feugiat. Nulla venenatis, tellus sollicitudin iaculis sagittis, mi mi
vestibulum arcu, a sollicitudin odio ex at leo. Nulla neque nulla, vulputate eu magna id,
iaculis dignissim elit. Vestibulum suscipit pretium bibendum. Etiam id commodo justo.
</p>
<p>
Vivamus eu magna sit amet nunc hendrerit
maximus. Curabitur posuere finibus gravida. Aenean convallis id velit laoreet
tristique. Mauris nunc diam, vehicula auctor nibh ut, consectetur auctor lorem.
Cras dui dolor, eleifend vitae accumsan a, lacinia in sem. Sed non est
fermentum, lobortis dui id, malesuada dui. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vitae
pretium tellus. Integer hendrerit eget magna aliquam pellentesque. Donec
ullamcorper convallis suscipit. Vivamus bibendum, neque in tempor posuere,
velit nibh consequat sapien, a consequat enim quam eu ligula.
</p>
<p>
Phasellus non pulvinar diam. Maecenas
vestibulum nunc eu tincidunt consectetur. Maecenas malesuada aliquet ligula sit
amet tempus. Vivamus quis diam ex. Aliquam porttitor, purus vel posuere
consectetur, lorem elit iaculis velit, sed vehicula purus dolor quis nisl.
Proin felis nisi, condimentum volutpat suscipit a, auctor sit amet sem. In
commodo lacus eu imperdiet dictum. Pellentesque ac bibendum eros. Proin
tincidunt pulvinar ex, in dictum diam. Mauris nec porta enim. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p>
Nullam id urna purus. Suspendisse sed
enim egestas, varius augue ut, interdum nulla. Aenean sit amet neque arcu.
Nulla quis tincidunt leo. Pellentesque id augue enim. Maecenas vehicula ligula
a urna ullamcorper, ut vestibulum risus vehicula. Donec feugiat, velit at
eleifend volutpat, mauris orci vestibulum metus, eu lacinia tellus ipsum
convallis ipsum. Sed tortor metus, sollicitudin quis nulla lobortis, viverra
volutpat augue. Suspendisse at imperdiet magna. Vivamus at dolor a elit
hendrerit cursus ut nec tellus. Etiam libero purus, finibus nec lobortis at,
eleifend non velit. Donec mollis lorem lectus, eget tincidunt tellus dictum
nec.
</p>
<p>
Donec in nunc nec est condimentum
hendrerit. Sed ac nisl eget dolor viverra vestibulum. Proin id risus non diam
volutpat venenatis. Quisque fringilla nulla ligula, a porttitor ligula
sollicitudin quis. Nam sapien lectus, aliquet ac rhoncus at, blandit et felis.
Phasellus non diam velit. Pellentesque ac gravida turpis. In diam ipsum,
finibus non tempus quis, vestibulum pretium tellus. Quisque eu ultrices dolor.
</p>
Vratimo
se na početak stranice i ukucajte sledeći naslov:
<title>Bookmarks
and Links in HTML5</title>
Napišimo
nešto teksta na veb stranici. Ispod taga <body> pre naših
paragrafa:
<h1>Bookmarks
and Links in HTML5</h1>
<h3>Bookmarks
can be useful if your webpage is very long.</h3>
<h3>To make a
bookmark, you must first create the bookmark, and then add a link to it.</h3>
<h3>When the
link is clicked, the page will scroll to the location with the bookmark.</h3>
Prvu
vrstu linkova koju ćemo praviti su anchor ili sidra. Znači hoćemo kada kliknete
na jedan link da skočite tačno na određen paragraf na istoj stranici. Imamo 5
paragrafa i zato pravimo 5 linkova za svaki.
<ul>
<li><a href="#s1">Section 1</a></li>
<li><a href="#s2">Section 2</a></li>
<li><a href="#s3">Section 3</a></li>
<li><a href="#s4">Section 4</a></li>
<li><a href="#s5">Section 5</a></li>
</ul>
Tagovi
za HTML neuređenu listu nebi trebalo da vas zbunjuju. Ukoliko ih ne razumete HTML
liste pročitajte prethodni post ovde. Akcenat je na atribut href – skraćenica za
Hypertext Reference – hipertekst referenca; i tekst između <a> … </a>
tagova koji su ugnježdeni u HTML neuređenu listu. Znači
link se sastoji od URL-a ili ID-a kad pravimo sidra i teksta između <a> …
</a> tagova. Imajte u vidu da između navedeni tagova ne mora stojati samo
tekst. Tu može stojati i slika ili neka animacija. Kad smo napravili linkove i
odredili odakle ćemo da skačemo, potrebno je navesti i gde skačemo. Ispred
svakog paragrafa, pasusa; umetnite sidra. Imate 5 linkova i za svaki trebate napraviti
po jedno sidro.
<h2 id="s1">Section 1</h2>
Sidra
se prave jednostavno, navedete atribut ID i kad kliknete na veb stranicu link
sa atributom, u ovom primeru s1; na taj deo stranice će te i skočiti. Ispred
drugog paragrafa stavite sidro za drugi paragraf.
<h2 id="s2">Section 2</h2>
Uradite isto
tako za svih 5. Obratite pažnju da ID uvek mora biti jedinstven i takav naziv
ne sme biti neka reč koja se spominje negde u tekstu na veb stranici. To je sve
što vam je potrebno da bi sidra funkcionisala.
Sad
pogledajte kako se kreira druga vrsta linkova; to jest kako se povezuje druga veb
stranica sa stranicom istog veb sajta. Ispod zadnjeg pasusa, dodajte
sledeći code:
<h2>Local
Link</h2>
<h3>A local
link is the link to the same web site. It is specified with a relative URL.</h3>
<p><em>For more
information about links, please click <a href="page2.html"> here</a>.</em></p>
Kao
što možete videti, da bi ste linkovali drugu veb stranicu vašeg sajta
jednostavno navedete za atribut href srodnu putanju veb stranice koju hoćete da
povežete. U ovom primeru je umetnut link u rečenicu i on obuhvata samo jednu reč “here“. Vi možete umetati anchor tagove u bilo koji deo teksta. Kad kliknete
na link, otvoriće vam se vaša druga veb stranica page2.html iz vašeg projekta. Pređite
sada na page2.html. Ukucajte sledeći code na navedenoj stranici:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page 2</title>
</head>
<body>
<h1>Useful
information</h1>
<p>To visit
my blog, please click <a href="http://www.manuelradovanovic.com" target="_blank"> here.</a></p>
</body>
</html>
Na
ovoj stranici možete videti kao se pravi link koji vam otvara neku stranicu na
Internetu. U ovom slučaju to je veb adresa ovog bloga. Postavite URL na atribut
href i umetnete tekst ili sliku na koju hoćete da korisnik vašeg veb stranice
klikne kako bi otišao na drugi veb sajt. To je sve toliko jednostavno. Atribut
target označava da će se blog otvoriti u novom tab-u korisnikovog
pretraživača.
Kako to sve izgleda možete pogledati i na video-u:
( HTML5 & CSS3 - #3. Bookmarks and Links )
Nema komentara:
Objavi komentar