Title: Hiperveze
Course: Osnove HTML-a > Section: Hiperveze

Hiperveze, veze, hiperlinkovi ili linkovi - samo je to u ovom poglavlju. No, posebno se govori o apsolutnim i relativnim linkovima, te linkovima na dijelove dokumenta. Linkovi mogu biti na dijelu teksta, na slici ili na dijelu slike.

O ovom poglavlju

O ovom poglavlju
Poglavlje o vezama omogućit će vam da svoje stranice povežete u web sjedište, te da sa svojih stranica uputite posjetitelje na sadržaje na webu za koje smatrate da ih je korisno posjetiti.

Veze među stranicama naučit ćete ostvarivati na nekoliko načina, pomoću teksta i pomoću slika. Tako ćete na svojim web stranicama moći postaviti linkove koji će zaista moći privući pažnju posjetitelja.

Ishodi učenja

Nakon ovog poglavlja moći ćete:

- postaviti hiperveze na stranice drugih web sjedišta i to tako da polazišna točka veze bude tekst ili slika
- povezati svoje stranice hipervezama s polaznišnim točkama po izboru
- postaviti knjiške oznake u dokument
- postaviti hiperveze na knjiške oznake istog i drugog dokumenta
- postaviti sliku s različitim linkovima na pojedinim njezinim područjima
- postaviti hipervezu na adresu elektroničke pošte.

Aktivnosti u ovom poglavlju

U ovom vas poglavlju očekuje vrlo malo priče i jako puno rada. Naime, puno je različitih mogućnosti za postavljanje veza, pa ih sve treba isprobati.

Isprobavanje je važno jer prije stvaranja vlastitog web sjedišta trebate poznavati razne vrste linkova da biste točno znali koja vam vrsta linkova treba i da biste mogli efikasno povezati svoje stranice međusobno, ali i s drugim web sjedištima.

Hiperveze (hiperlinkovi)

Hiperveze (hiperlinkovi)
Hiperveze ili hiperlinkovi (engl. hyperlink, link) elementi su koji čine obične tekstne dokumente hipertekstualnima. One služe za povezivanje web stranica s web stranicama unutar njihova web sjedišta ili izvan njega.

Hiperveze tako mogu voditi na bilo koju vrstu dokumenta – neki drugi (hiper)tekstualni dokument (txt, doc, html,...), sliku (jpg, gif, png,...), video zapis (wmv, rm, mov,...), zvučni zapis (wav, mp3, ra,...), komprimiranu (zip, rar,...) ili izvršnu datoteku (exe) i druge vrste datoteka.

Također mogu voditi i na adresu elektroničke pošte (e-mail adresu), kao i na mjesto unutar stranice (knjiška oznaka, engl. bookmark).

Hipervezu označavamo oznakom <a>, što dolazi od engleske riječi anchor (sidro). Ona ima i svoj završni dio, </a> te atribute kojima definiramo njezina svojstva.

Tekst koji se nalazi unutar početne i završne oznake elementa a bit će u pregledniku u pravilu podvučen, dok će boja ovisiti o tome je li posjetitelj naših stranica već posjetio stranicu na koju vodi link. Ako ju je posjetio, hiperveza će imati rub plave boje, ako nije, onda ljubičaste, a link će biti crvene boje dok se na njemu nalazi miš s pritisnutom tipkom.

Posjetitelj može u svom pregledniku promijeniti te boje, kao i isključiti podvlačenje.

Budući da je tekst linka istaknut, dobro je da on bude informativan, tj. da ga posjetitelj može lako povezati sa sadržajem na koji vodi link.

Tako je bolje napisati „Informirajte se o mogućnostima obrazovanja na web sjedištu CARNeta” nego „Kliknite ovdje za informacije o obrazovanju u CARNetu.”.

Najčešći su atributi elementa a: href, name i title.

href

(engl. hyperlink reference) definira kamo vodi hiperveza.

<a href="http://www.carnet.hr/">CARNet</a>

title

opisuje hipervezu, a prikazuje se u obliku savjeta (engl. tip) kada pokazivač miša postavimo iznad hiperveze. Vrlo je koristan slijepim osobama, jer njihovi preglednici tada čitaju i opis hiperveze (npr. kod slikovnih hiperveza).

<a href="http://www.carnet.hr/"
    title="Posjetite CARNet">CARNet</a>

name

upotrebljavamo za definiranje mjesta unutar dokumenta koje nazivamo knjiškim oznakama (engl. anchor, u Microsoftovim editorima bookmarks).  Više riječi o njima bit će u lekciji Knjiške oznake.

<a name="vrh">Sadržaj</a>

Sada, kad ste upoznali osnove, a prije zadataka, vrijeme je da malo pobliže upoznate hiperlinkove. U sljedeće ćemo se dvije lekcije baviti važnim detaljem hiperlinkova – različitim oblicima atributa href.

Apsolutne hiperveze

Apsolutne hiperveze
Apsolutne hiperveze su one koje vode na isti resurs s bilo kojeg mjesta. Na primjer, isti link na CARNetove stranice se može nalazi na web stranicama nekog fakulteta, škole, a i na vašim probnim stranicama koje razvijate na svom računalu.

Apsolutne vrijednosti atributa href moraju sadržavati oznaku protokola koji će preglednik upotrijebiti da bi došao do željenog resursa, naziv domene, te sve ostale podatke za dolazak do resursa.

U lekciji Osnovni pojmovi spomenuli smo neke od protokola kojima se služimo na Internetu, pri čemu nam HTTP najčešće omogućuje dobavljanje web stranica i drugih sadržaja dostupnih s weba. Tako ćemo za kreiranje veza na neku drugu stranicu izvan našeg web sjedišta u pravilu upotrebljavati protokol HTTP, pa ćemo to definirati i u našoj hipervezi:

<a href="http://www.carnet.hr/">CARNet</a>

Tekst koji omeđuje ova oznaka, „CARNet”, polazište je hiperveze, te je preglednici prikazuju u pravilu podvučeno.

Izostanak oznake protokola i kosih crta znači neispravnu hipervezu. Kao što ćete vidjeti u sljedećoj lekciji, umjesto web stranice koja se nalazi na adresi www.carnet.hr preglednik će zatražiti nepostojeći dokument www.carnet.hr unutar našeg web sjedišta!

U dijelovima adrese koji se odnose na smještaj resursa na poslužitelju mogu se razlikovati velika i mala slova. Zato je najjednostavnije paziti na pisanje velikim i malih slova u cijeloj adresi.

Ne završava li adresa imenom neke određene datoteke (npr. kontakt.htm), na kraj adrese uvijek dodajemo znak „/”. U protivnom nepotrebno opterećujemo poslužitelj, koji ne zna odmah odnosi li se naš zahtjev na datoteku ili mapu.

href="http://www.carnet.hr" href="http://www.carnet.hr/"

U novom dokumentu koji ćete nazvati zadaci.htm kreirajte dvije globalne hiperveze.

Spremite datoteku, otvorite je u web pregledniku te provjerite hiperlinkove klikovima na svaki od njih.

Sjećate li se da smo vam obećali da ćete uskoro naučiti u svoje dokumente slike koje se ne nalaze u istoj mapi kao dokument? Vrijeme je za ispunjenje tog obećanja.

Pronađite na ovoj stranici logo sustava u kojem se nalazi ovaj tečaj, desnim klikom na njega otvorite okvir sa svojstvima slike te kopirajte adresu.

Uključite tu sliku u dokument zadaci.htm.

Relativne hiperveze

Relativne hiperveze
Kod relativnih se hiperveza mjesto datoteke koja će se otvoriti klikom na hipervezu određuje ovisno o mjestu datoteke u kojoj se link nalazi.

Takve hiperveze uvijek vode na resurse unutar istog web sjedišta na kojem se nalazi stranica na kojoj se nalaze, a razlikuju se od apsolutnih po tome što ne sadrže oznaku protokola, kao niti ime domene.

Nadalje, relativne hiperveze mogu biti relativne u odnosu na trenutačno otvorenu stranicu ili u odnosu na korijen (engl. root) našeg web sjedišta. U nastavku poglavlja naučit ćete pisati i čitati obje vrste relativnih hiperveza.

Hiperveze relativne u odnosu na trenutačno otvorenu stranicu

Hiperveze relativne u odnosu
na trenutačno otvorenu stranicu
Uzmimo za primjer dolje prikazano web sjedište.

Prikaz mapa i datoteka na jednom web sjedištu.

Korijenska mapa web sjedišta je www.primjer.hr i u njoj se nalaze svi ostali dokumenti i mape. Želimo li stvoriti vezu koja sa stranice index.htm vodi na neku drugu stranicu unutar korijenske mape, učinit ćemo to ovako:

<a href="kontakt.htm">Kontakt</a>

Gornja veza vodit će na stranicu kontakt.htm, koja se nalazi u istoj mapi kao i stranica na kojoj se trenutačno nalazimo (index.htm). Riječ „Kontakt” bit će polazište hiperveze i u pravilu izgledom izdvojena od okolnog teksta.

Želimo li stvoriti vezu koja vodi na resurs unutar neke mape, moramo definirati putanju do tog resursa, navodeći ime mape u koje moramo „ući”. Tako ćemo, ako stvaramo vezu iz dokumenta koji se nalazi u korijenskoj mapi (npr. index.htm) na stranicu pero.htm, koja se nalazi u mapi zaposlenici, definirati putanju na sljedeći način:

<a href="zaposlenici/pero.htm">Pero Perić</a>

Pretpostavimo sad da se nalazimo na stranici pero.htm koja je smještena u mapi zaposlenici. Kako bismo „izašli” iz te mape i vratili se u korijensku mapu, stvarajući pritom vezu na stranicu index.htm, koristit ćemo oznaku ../.

<a href="../index.htm">Početna stranica</a>

Oznaku ../ koristimo svaki puta kada „izlazimo” iz trenutačne mape. Da smo se u gornjem primjeru nalazili u mapi stari, za povratak u korijensku mapu koristili bismo ../../ i naziv dokumenta na koji veza vodi.

<a href=”../../index.htm">Početna stranica</a>

Postoji još jedna mogućnost – izlaz iz trenutačne mape (npr. zaposlenici) i ulaz u neku drugu mapu (npr. suradnici). U tom slučaju koristit ćemo kombinaciju gore navedenih koraka:

<a href=”../suradnici/ivana.htm">Ivana Ivić</a>

U dokumentu zadaci.htm, ispred linkova koje ste stvorili u prethodnoj lekciji, kreirajte hiperveze na sve dosad napravljene vježbe.

Između jedne i druge skupine linkova možete staviti i neki tekst ili stranici možete dodati odgovarajuće podnaslove. Ako želite, linkove možete složiti i u oblik nenumeriranog popisa.

Spremite datoteku, otvorite je u web pregledniku, te isprobajte sve veze. Prije otvaranja veze zadržite pokazivač miša iznad linka te u traci stanja, pri dnu prozora preglednika, uočite kamo će vas odvesti link.

Hiperveze mogu voditi na bilo koju vrstu datoteke. Ako web preglednik nije u mogućnosti prikazati datoteku unutar svog prozora, ponudit će posjetitelju njezino preuzimanje (engl. download).

U svojoj mapi sa zadacima stvorite podmapu imena razno te u nju smjestite po jednu sliku, pjesmu, video snimku, PDF dokument i dokument bilo koje vrste koje se možete sjetiti.

U dokumentu zadaci.htm stvorite linkove na svaki od ovih dokumenata.

Spremite datoteku, otvorite je u web pregledniku, te isprobajte sve veze.

Kamo će voditi link kod relativnih veza ne ovisi samo o vrijednosti atributa href, nego i o smještaju datoteke iz koje se poziva.

Tako će isti link voditi na datoteku s vašeg računala dok razvijate web stranice, a na datoteku na poslužitelju kad ih objavite.

U dokumentu zadaci.htm stvorite link na datoteku zadatak.htm. Spremite datoteku, otvorite je u pregledniku i kliknite na link. Što se dogodilo?

Nadopišite sad uz taj link tekst „nepostojeća stranica” i krenite dalje: u istom dokumentu stvorite link u kojem atribut href ima vrijednost "../osnovni_kod.htm" te jedan s vrijednošću "razno/osnovni_kod.htm".

Spremite stranicu, te testirajte linkove u pregledniku. Što primjećujete? Vratite se u editor i uz linkove napišite svoja zapažanja.

Sjetimo se na kraju pravila pisanja apsolutnih hiperveza i prekršimo ih! Stavite kao vrijednost atributa href pogrešnu adresu CARNetovih stranica, "www.carnet.hr". Kamo vas vodi ta adresa? Zapišite i to zapažanje uz link u svoj dokument zadaci.htm.

Hiperveze relativne u odnosu na korijen web sjedišta

Hiperveze relativne u odnosu na korijen web sjedišta
Uzmimo ponovno za primjer isto web sjedište kao u prethodnoj lekciji.

Prikaz mapa i datoteka na jednom web sjedištu.

Odlučimo li definirati hipervezu relativnu u odnosu na korijensku mapu web sjedišta, u svim slučajevima ćemo je započeti znakom /, a ostatak navesti kao da se nalazimo u korijenskoj mapi. Tako nikada nećemo imati potrebu upotrebljavati oznaku ../, jer iz korijenske mape ne možemo (niti trebamo) izaći.

Primjer veze sa stranice index.htm:

<a href="/suradnici/ivana.htm">Ivana Ivić</a>
<a href="/zaposlenici/pero.htm">Pero Perić</a>

Primjeri veza sa stranice ivana.htm:

<a href="/index.htm">Naslovnica</a>
<a href="/zaposlenici/pero.htm">Pero Perić</a>

Otvorite dokument oblikovanje_teksta.htm te na njegov kraj stavite link na datoteku zadaci.htm. Učinite to prvo tako da adresa bude relativna u odnosu na trenutačno otvorenu stranicu, te isprobajte svoj link.

Nakon toga promijenite adresu tako da bude relativna u odnosu na korijen web sjedišta. Ponovno otvorite stranicu i isprobajte link.

Ponovno je vrijeme za primjenu naučenog na umetanje slika!

U mapi u kojoj se nalazi vaše web sjedište stvorite novu mapu, slike. Stavite u tu mapu sve slike koje imate na svom web sjedištu. Otvorite stranice zivotopis.htm i zivotopis-1.htm u kojima bi se trebale nalaziti slike. Budući da ste slike premjestili, atribut src više nije valjan i slike nisu prikazane.

Ispravite atribute src tako da oni, kao relativne veze bilo kojeg oblika, pokazuju na sliku ili slike u novoj mapi.

Provjerite svoje stranice.

Ako ne vidite neku sliku, desnim klikom na prostor na kojem bi se trebala nalaziti i otvaranjem okvira sa svojstvima slike vidjet ćete adresu, mjesto na kojem je preglednik tražio sliku, te ćete sigurno lako uočiti i ispraviti pogrešku.

Knjiške oznake

Knjiške oznake
Knjiške oznake (engl. anchor) imenuju određeni dio dokumenta. Najčešće se koriste u dugim dokumentima, koji na svom vrhu imaju poglavlje „Sadržaj” s popisom poglavlja na stranici. Klikom na ime poglavlja u sadržaju dokument se pomakne na dio gdje to poglavlje počinje.

Definiranje knjiških oznaka i
hiperlinkovi na knjiške oznake
u istom dokumentu

Da bismo upotrebljavali knjiške oznake, moramo ih prvo definirati. Drugim riječima, moramo imenovati dijelove dokumenta. To činimo uporabom atributa name oznake <a>.

<a name="vrh">Sadržaj</a>

Sadržaj se nalazi na vrhu stranice, pa smo taj dio nazvali „vrh”. Definicija hiperveze koja će voditi s dna na vrh stranice izgledat će ovako (obratite pažnju na znak #!):

<a href="#vrh">Povratak na Sadržaj</a>

Da bi sadržaj imao smisla, trebamo još definirati knjišku oznaku na početku svakog poglavlja, te na svaki naslov u sadržaju postavili link na odgovarajuću knjišku oznaku.

Ako stvorimo hipervezu koja vodi na nepostojeću knjišku oznaku, web preglednik neće prijaviti grešku. Prikazat će se stranica od vrha, kao da knjiška oznaka u hipervezi i nije definirana.

Postavljanje hiperveza na knjiške oznake
u drugim dokumentima

Možemo definirati i hipervezu koja vodi na knjišku oznaku neke druge stranice. To činimo tako da iza adrese dokumenta dodamo naziv knjiške oznake. Na primjer:

<a href="http://www.tv.hr/program.htm#petak">
Raspored programa za petak
</a>

Hiperveze na adresu e-pošte

Hiperveze na adresu e-pošte
Posjetiteljima možemo omogućiti da nam pišu elektroničkom poštom postavljanjem jednostavne hiperveze.

Za definiranje hiperveze na adresu elektroničke pošte bit će nam potreban atribut href, a umjesto oznake protokola koristit ćemo oznaku mailto: ispred adrese e-pošte na koju veza vodi. Klikom na hipervezu korisniku će se otvoriti prozor za pisanje poruke zadanog klijenta za slanje i primanje elektroničke pošte.

Budući da danas većina korisnika nema namješten posebni klijentski program za elektroničku poštu, nego se služi webmailom, ovakav način slanja elektroničke pošte često više nije prikladan.

Zato se obično upotrebljavaju obrasci za kontakt udruženi sa skriptama na strani poslužitelja, što je tema za neki od naprednih tečajeva.

<a href="mailto:edupoint@carnet.hr">Pišite nam</a>

Kao i kod ostalih hiperveza, i ovdje možemo definirati njihov opis dodavanjem atributa title. Želimo li pak definirati predmet poruke (engl. subject), učinit ćemo to tako da iza definirane adrese e-pošte dodamo ?subject=Predmet poruke.

<a href="mailto:edupoint@carnet.hr?
subject=Pitanje">Pišite nam</a>

U dokumentu zadaci.htm, ispod hiperveza na vježbe stvorite hipervezu na svoju adresu elektroničke pošte.

Postoji još jedan problem ovako definiranih veza. Naime, postoje programi zlonamjernih vlasnika koji bi htjeli dobiti što više adresa elektroničke pošte da bi na njih mogli slati razne neželjene poruke. Takvi programi mogu s vaših web stranica preuzeti adrese koje ste postavili kao običan link i obasipati vas neželjenim materijalom.

To je još jedan, konačni, razlog zbog kojeg se ovakav način povezivanja danas upotrebljava samo iznimno, kad smo potpuno sigurni da će dovesti do rezultata, a neće napraviti štetu.

Slikovne hiperveze

Slikovne hiperveze
Slikovne hiperveze postavljamo tako da oznakom hiperveze omeđimo sliku koju želimo pretvoriti u hipervezu, baš kao što kod „običnih” tekstnih hiperveza omeđujemo odabrani tekst.

<a href="http://www.carnet.hr/">
<img src="images/logo.gif">
</a>

Kao što vidimo u prethodnom primjeru, slika ima rub u boji koji odgovara boji hiperveze. Da bismo izbjegli prikazivanje ruba oko slike koja predstavlja hipervezu, moramo posegnuti za sredstvima izvan strogog HTML-a kojim se sad bavimo, tj. trebamo HTML dokumentu dodati stilove.

U dokumentu zadaci.htm kreirajte slikovnu hipervezu na svoju omiljenu web stranicu koristeći jednu od slika koje smo pripremili za vas.

Polazišta hiperveza mogu se postaviti na jedan ili više dijelova neke slike. Tako možemo definirati više različitih hiperveza na jednoj slici, no o tome više u sljedećoj lekciji.

Slikovne mape

Slikovne mape
Slikovnim mapama definiramo dio ili više dijelova slike koji postaju polazištima hiperveza. Na ovoj slici, primjerice, imamo definirane tri hiperveze. Isprobajte ih!

Kliknite na svaki od likova!

Klikom na dio slike na kojem se nalazi plavi kvadrat otići ćete na naslovnicu službenog CARNetovog web sjedišta, crveni krug odvest će vas na Nacionalni portal za učenje na daljinu „Nikola Tesla”, a žuta zvijezda na katalog web stranica stranice lijepe naše.

HTML oznaka ove slike sadrži jedan novi atribut, a izgleda ovako:

<img border="0” src="images/mape.png"
      width="356” height="88” usemap="#mapa">

Novi atribut je, naravno, usemap. Njime definiramo mapu u kojoj su opisana područja slike koja su polazišta hiperveza. Obratite pozornost na znak # ispred imena mape.

Postoje tri vrste područja koja možemo definirati: kvadrat, krug i poligon. Njihove koordinate navedeni su u mapi, koju definiramo oznakom <map>:

<map name="mapa">

  <area shape="rect" coords="9, 37, 106, 66"
   alt="www.carnet.hr"
   href="http://www.carnet.hr/">

  <area shape="circle" coords="185, 48, 35"
   alt="LMS Nikola Tesla"
   href="http://lms.carnet.hr/">

  <area shape="poly" coords="291, 27, 303, 2,
   316, 29, 346, 34, 324, 53, 329, 83, 304, 68,
   277, 83, 283, 53, 263, 33"
   alt="www.hr"
   href="http://www.hr/">

</map>

Oznaka <map> dolazi uz atribut name kojim čija vrijednost odgovara imenu mape definiranom u oznaci <img>. Unutar mape definiramo svako područje na slici koje je polazište hiperveze. To činimo oznakom <area> (engl. područje). Ona nema svog završnog dijela, a uz atribut href i title, poznatih iz elementa a, te atributa alt, poznatog iz elementa img, sadrži i dva nova atributa:

shape
definira oblik područja. Vrijednosti ovoga atributa mogu biti rect (pravokutnik), circle (krug) ili poly (poligon).
coords
određuje koordinate područja na slici, koje definiramo na poseban način za svaku vrstu područja.

Redoslijed definiranja područja unutar mape nije bitan. No ako se definirana područja preklapaju, prednost će imati ono područje čije koordinate su u mapi prije definirane.

Pri definiranju koordinata za sve vrste područja vrijedi isto pravilo: ishodište koordinatnog sustava je gornji lijevi kut slike, gdje os x raste udesno, a os y prema dolje. Mjerna jedinica su, naravno, pikseli.

shape="rect"
Koordinate kvadrata određujemo tako da prvo definiramo gornju lijevu, a zatim donju desnu točku kvadrata.
shape="circle"
Krug će definirati koordinate središta kružnice, te njezin polumjer.
shape="poly"
Izgled poligona definirat ćemo koordinatama svake njegove ključne točke. Koordinate točaka definiramo onim redoslijedom kojim njihovo spajanje čini naš poligon.

U dokument zadaci.htm postavite sliku sa četiri raznobojna CARNetova znaka. Na svaku od njih postavite link na neku od CARNetovih stranica odgovarajućeg sadržaja, pri čemu za prve tri kao ključ upotrijebite boje iz navigacije na vrhu naslovnice (zeleno su škole, ljubičasto fakulteti i instituti, plavo ustanove članice), dok na sivu postavite link na naslovnicu CARNetovog web sjedišta.

Pregledajte svoju stranicu i isprobajte linkove. Jeste li postavili atribut title?

Prethodni se zadatak mogao jednostavnije riješiti tako da se slika razlomila na četiri slike i da se na svaku od njih postavio po jedan link. Zato kao dodatni izazov možete riješiti još jedan zadatak: postavite iste linkove na CARNetov logotip, ali tako da najmanji krug vodi na škole, malo veći na ustanove članice, sljedeći na fakultete i institute, a posljednji na naslovnicu CARNeta. Krugove ćete moći postaviti samo približno, no bit će dovoljno da korisnici uoče naslove linkova i kliknu na odgovarajući link. Koordinate izmjerite u nekom od grafičkih programa.