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.
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 Code ili IDE - integrisano razvojno okruženje koje vi koristite. Otvorite projekat ili direktorijum html_css_tutorial i kreirajte novu HTML5 datoteku. Nazovite je lesson3.html.
( Projekat html_css_tutorial u izgradnji )
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.
( Lorem Ipsum veb sajt za generisanje teksta prema vašim potrebama )
Selektujte svih 5 paragrafa i pritisnite na vašoj tastaturi CTRL + C kako bio ste kopirali tekst. Zatim se vratite u vašu datoteku lesson3.html U editoru za pisanje HTML-a, unesite sledeći kôd.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<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.
( Uspešno prikazivanje veb stranice ako ste uneli navedeni html kôd pravilno )
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 kôd:
<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 page1.html iz vašeg projekta. Pređite sada na page1.html. Ukucajte sledeći kôd na navedenoj stranici:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page 1</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.
( Veb stranica Page1 posle uspešnog otvaranja pritiskom na link here )
Kako to sve izgleda možete pogledati i na video-u:
( HTML5 & CSS3 - 3. Bookmarks and Links in HTML5)
Nema komentara:
Objavi komentar