Slušaj robot čitača
Kako napraviti link na web stranici
U HTML-u postoji i <link> tag, međutim on se ne koristi za linkove na koje će posetilac vašeg sajta moći da klikne. <link> tag se koristi za resurse koje vaš sajt koristi da bi radio. O <link> tagu će kasnije biti više reči. Ovde i sada pričamo o <a> tagu.
Ovo možda na prvi pogled deluje kao nesrećan slučaj, ali toliko često ćemo koristiti <a> tagove da će ovo vrlo brzo da nam postane jedini logičan način.
Kada hoćemo da ubacimo link na naš web sajt, koristimo <a>…</a>, od anchor. Linkovi mogu da vode ka drugim stranicama, fajlovima, drugim lokacijama na istoj strani, email adresama, i slično. Od tagova koje smo do sad videli se razlikuje po tome, što mora da ima atribute, inače gubi svaki smisao. I ostali tagovi mogu imati atribute, ali ovaj tag ne vrši nikakvu funkciju, bez njih. Ovde ćemo obraditi samo dva najvažnija atributa, a ostali atributi <a> taga će biti ovde obrađeni.
Dodavanje linka u a tag pomoću href atributa
Glavni atribut u <a> tagu je href="" gde u navodnike stavljamo url koji hoćemo da se otvori klikom na link, i ako se url izostavi, imamo "placeholder" link koji ne vodi nigde. Sad sve zajedno:
<a href="url">
klikabilan tekst
</a>
Ako linkujete kao spoljnom resursu, dakle ka nekom drugom sajtu koji nije sajt na kome trenutno radite, obavezno pišite i https:// deo, u suprotnom, browser će misliti da tražite ovaj resurs lokano, i link neće raditi.
Ove linkove koji sadrže i protokol (https://) i domen (kodiranje.in.rs), kao i putanju do željenog fajla, nazivamo apsolutnim linkovima.
Već sada možemo da završimo naš prvi sajt.
Najlakši način da pokupite gde vodi neki link na web stranici, jeste da kliknete desnim klikom na link, pa na "copy link" odnosno "copy link address", u zavisnosti od browsera.
Sada možemo ovaj link insertovati između "" href atributa. Sve zajedno, treba da izgleda ovako:
<a href="http://info.cern.ch/hypertext/WWW/WhatIs.html">hypermedia</a>
Sada ćemo ponoviti ceo proces, za sve ostale linkove na stranici:
<p>Everything there is online about W3 is linked directly or indirectly to this document, including an executive summary of the project, <a href="http://info.cern.ch/hypertext/WWW/Administration/Mailing/Overview.html">Mailing lists</a> , <a href="http://info.cern.ch/hypertext/WWW/Policy.html">Policy</a> , November's <a href="http://info.cern.ch/hypertext/WWW/News/9211.html">W3 news</a> , <a href="http://info.cern.ch/hypertext/WWW/FAQ/List.html">Frequently Asked Questions</a> .</p>
<p><a href="http://info.cern.ch/hypertext/DataSources/Top.html">What's out there?</a></p>
<p>Pointers to the world's online information, <a href="http://info.cern.ch/hypertext/DataSources/bySubject/Overview.html">subjects</a> , <a href="http://info.cern.ch/hypertext/DataSources/WWW/Servers.html">W3 servers</a>, etc.</p>
<p><a href="http://info.cern.ch/hypertext/WWW/Help.html">Help</a></p>
<p>on the browser you are using</p>
<p><a href="http://info.cern.ch/hypertext/WWW/Status.html">Software Products</a></p>
<p>A list of W3 project components and their current state. (e.g. <a href="http://info.cern.ch/hypertext/WWW/LineMode/Browser.html">Line Mode</a> ,X11 <a href="http://info.cern.ch/hypertext/WWW/Status.html#35">Viola</a> , <a href="http://info.cern.ch/hypertext/WWW/NeXT/WorldWideWeb.html">NeXTStep</a> , <a href="http://info.cern.ch/hypertext/WWW/Daemon/Overview.html">Servers</a> , <a href="http://info.cern.ch/hypertext/WWW/Tools/Overview.html">Tools</a> , <a href="http://info.cern.ch/hypertext/WWW/MailRobot/Overview.html">Mail robot</a> ,<a href="http://info.cern.ch/hypertext/WWW/Status.html#57"> Library</a> )</p>
<p><a href="http://info.cern.ch/hypertext/WWW/Technical.html">Technical</a></p>
<p>Details of protocols, formats, program internals etc</p>
<p><a href="http://info.cern.ch/hypertext/WWW/Bibliography.html">Bibliography</a></p>
<p>Paper documentation on W3 and references.</p>
<p><a href="http://info.cern.ch/hypertext/WWWPeople.html">People</a></p>
<p>A list of some people involved in the project.</p>
<p><a href="http://info.cern.ch/hypertext/WWW/History.html">History</a></p>
<p>A summary of the history of the project.</p>
<p><a href="http://info.cern.ch/hypertext/WWW/Helping.html">How can I help</a> ?</p>
<p>If you would like to support the web..</p>
<p><a href="http://info.cern.ch/hypertext/README.html">Getting code</a></p>
<p>Getting the code by<a href="http://info.cern.ch/hypertext/WWW/LineMode/Defaults/Distribution.html"> anonymous FTP</a> , etc.</p>
I time smo završili prvu internet stranicu. Boza limunada .
Zapazite kako se <a> tag nalazi unutar <p> taga. Ovo nazivamo ugnježdenim tagovima. Već smo videli ugnježdene tagove, recimo <title> je ugnježden u <head> tagu, <body> i <head> su oba ugnježdeni u <html> tagu, i sl. Ugnježdeni tagovi se često nazivaju detetom, dok se tagovi u koje su ugnježdeni, nazivaju roditeljima. Ako u <a> tag ugnezdite sliku, cela slika postaje link. Slično važi i za bilo koji drugi HTML element.
Kada linkujete ka spoljnim sajtovima, poželjno je url zatvoriti s /. Bez / postoji mogućnost da napravite dva poziva ka vanjskom serveru. Mnogi serveri sami dodaju kosu crtu, i onda ponavljaju poziv.
Ako mislite da vam treba još vežbe, možete rekreirati i neku od stranica na koje ova osnovna stranica linkuje.
Naravno, pošto smo mi u naš kôd prekopirali linkove sa originalnog CERN-ovog sajta, čak iako bismo rekreirali neku od bočnih stranica, naša glavna stranica bi i dalje linkovala ka CERN-ovom sajtu. Da bismo linkovali ka našim lokalnim fajlovima, koristićemo ne samo lokalne linkove, nego i "relativne linkove". Hajde da vidimo zašto su relativni linkovi bolji od apsolutnih?
Uporedimo svoj kôd, sa originalnim kôdom TimBL-a
Sada kad smo ovaj mini projekat završili, zanimljivo bi bilo da otvorimo ponovo originalnu CERN stranicu, i kliknemo desnim klikom na nju. U meniju koji se otvori, kliknućemo na view page source ili samo Ctrl+U. Ovo će otvoriti originalni kôd TimBL-a. Primetićete da se taj kôd dosta, skoro pa u celosti razlikuje od našeg. Ali oba daju skoro istovetan rezultat. Naravno, TimBL je koristio prvobitnu verziju HTML-a, razvijanu 1989-e. Mi smo rekreirali stranicu u nešto modernijem HTML-u. Brauzer svejedno zna kako obe da otvori ispravno zahvaljujući doctype deklaraciji.
Kako da se linkovan sadržaj otvori u novom tabu? target="_blank"
Drugi najkorišćeniji atribut <a> taga je target. Ovaj atribut je predviđen da otvori link u tekućem, ili u nekom drugom frame-u, iz kog razloga ima neke neočekivane vrednosti. Danas se frame-ovi ne koriste mnogo, ali atribut je opstao, jer jedna od njegovih vrednosti ima efekat otvaranja linka u novom tabu.
Podrazumevano ponašanje je da se link otvori u istom tabu u kome se nalazimo. To je super za linkove ka drugim delovima našeg sajta, ali je problem za spoljne linkove. Kada posetilac klikne na link ka spoljnom resursu, mi ne želimo da posetilac napusti naš sajt, a to je upravo ono što će se desiti po podrazumevanom ponašanju.
-
Ako postavimo vrednost target="" atributa na "_blank", link će se otvarati u novom tabu, ili prozoru.
<a href="#" target="_blank">Otvori u novom tabu</a> -
"_self" otvara link u prozoru iz kog ste kliknuli, dakle ovo je podrazumevano ponašanje. Ako se link nalazi u frejmu, link će se otvoriti u tom istom frejmu umesto u celom prozoru.
-
"_parent" će otvoriti link u roditeljskom frejmu. Osim ako nemamo frejm u frejmu, frejmception, ovo znači da će se link otvoriti u samom prozoru brauzera, dakle ako ne koristimo frejmove na strani, ne bismo videli nikakvu razliku između ove opcije i podrazumevane "_self".
-
"_top" otvara stranicu u vrhovnom frejmu, dakle u prozoru brauzera. I u ovom slučaju ako ne koristimo frejmove, nećemo zapaziti razliku u odnosu na "_self".
-
"ime_frejma" precizira ime ciljnog frejma u kome želimo da se link otvori.
Dakle, od ovih 5 atributa, najviše ćemo koristiti target="_blank". _self nema potrebe da se navodi, jer je u pitanju podrazumevana vrednost, a preostala tri se odnose isključivo na frejmove, i na sajtu bez frejmova imaju isti efekat kao i podrazumevana vrednost.
Donja crta ispred ove tri vrednosti atributa jeste neobična, i ni jedan drugi atribut ne prima ovakve vrednosti. Ideja ovde je da pošto je već moguće precizirati naziv frejma u kome link treba da se otvori, to je onda potrebno na neki način razlikovati, standardom definisanu vrednost "_blank", od imena frejma "blank". Donja crta u nazivu frejma ne bi bila ispravno ime, pa bi se imena frejmova i predefinisanih vrednosti time sigurno razlikovala. Ovo međutim nije tako strogo, i ako biste izostavili _ ispred blank, i dalje bi vam se otvorio novi tab. Osim ako ne biste takođe imali i frejm s imenom blank.
videti još
Članak prvi put objavljen: 18.1.2022.
Poslednje izmene: 3.2.2022.
Autor: k.