Linkovi i adrese

Kako linkovi rade u pretraživačuHiprelinkovi se prave tako što se neki element na strani okruži kotvom, odnosno oznakom a. Atribut href, što je skraćenica za hypretext reference, definiše odredište linka.

Tekst na kome je postavljen link se u pretraživaču označava na neki način, tako da se može jasno razlikovati od okolnog teksta. Obično je link podvučen i obojen plavom bojom. Nakon što ste posetili adresu na koju taj link upućuje, linkovi obično postaju purpurne boje. Podrazumevano je da se slike na kojima je postavljen link prikazuju sa okvirom u istim bojama, premda mnogi web dizajneri definišu svoje boje. Kada prelazi preko linka, kursor menja oblik u šaku sa kažiprstom upretim u nešto, člme se ukazuje da se taj link može kliknuti.

Apsolutne ili relativne putanjeURL je skraćenica za universal resource locator. URL ili web adresa je u suštini pokazivač na određeni dokument ili objekat koji se nalazi negde na Internetu, sa datom putanjom koja opisuje kako da dođete do tog dokumenta. URL putanja može biti apsolutna, relativna u odnosu na dokument, ili relativna u odnose na koren.

Apsolutna adresa je adresa na Internetu koja sadrži sve informacije koje su računaru potrebne u vezi lokacije koja se traži. Tu spadaju informacije o tome kako se vraćaju informacije, uključujući protokol, domen, fasciklu i ime datoteke.http://www.mfa.org/exhibitions/upcoming.htmZašto je protokol tako bitan? Svim vrstama web adresa se može pristupiti preko apsolutnog URL-a, uključujući i web strane, adrese elektronske pošte, FTP sajtove, itd. Protokol ukazuje na to koja vrsta resursa se traži.

Relativna putanja je skraćeni oblik adrese kod koje se razlčiti delovi adrese, kao što je protokol, adresa sajta ili fascikla, mogu predvideti na osnovu ostalih informacija koje stoje na raspolaganju.

Putanje relativne u odnosu na dokument daju samo informacije koje su potrebne da iz tekućeg dokumenta odete na željenu stranu. Ako želite da povežete dve strane koje se nalaze u istoj fascikli, potrebno je da zadate samo ime datoteke, na primer (sa strane mojastrana.html) :mojadrugastrana.html.

Ako želite da link postavite na neku stranu koja je dublje u strukturi fascikle, u odnosu na stranu sa koje se link poziva, onda treba da navedete i ime fascikle i ime datoteke (ako je link na strani mojastrana.html) mojafascikla/mojatrećastrana.html.

Ako želite da link ukazuje na drugu stranu koja je u fascikli koja je iznad fascikle u kojoj se trenutno nalazite, onda preko ../ ukazujete na to da treba da se popnete jedan nivo naviše Iza ovog sledi ime datoteke (linka sa strane mojastrana.html)

: ../index.html.

Ako želite da se u hijrearhiji fascikli krećete naviše ili naniže za više nivoa, onda treba da navodite sva imena fascikli ili indikatore ../ više puta, po jednom za svaki nivo.pages/myfolder/mythirdpage.html ../../index.html

Putanja relaitvna u odnosu na koren uspostavlja vezu između datoteke i korena celog sajta. Koren sajta je ono što smatrate generalnim imenom sajta, kao što je na primer www.macromedia.com ili www.mfa.org:

/index.html/pages/mypage.html/pages/myfolder/mythirdpage.html

Putanje koje se zadaju relativno u odnosu na koren uvek ispred same putanje imaju kosu crtu (/), što možete videti i u primerima koje smo dali.

Zašto biste koristili putanje relativne u odnosu na koren sajta? Ove putanje kasnije mogu da uštede vreme, ako je potrebno da promenite organizaciju dokumenata na svom sajtu. Ako imate vesti u nekom preduzeću, koje ste postavili onlajn i ako mesečne članke prebacujete u fasciklu Archive, kada započne novi mesec onda putanje koje se zadaju relativno u odnosu na koren sajta mogu da uštede vreme koje biste proveli u prepravljanju linkova koji sada treba da budu u skladu sa novom strukturom.

Atribut targetKada kliknete link, podrazumeva se da se novi dokument otvara u istom prozoru pretraživača u kome je prethodno bio otvoren tekući dokument. Sa druge strane, HTML omogućava da zadate gde link treba da se otvori u novom prozoru pretraživača, ili ako se radi o frejmovima, onda u određenom frejmu. Ovo se zadaje putem opcionalnog atributa oznake anchor <a>, a to je target. Ako želite da se novi dokument otvori u posebnom prozoru pretraživača, onda atribut target treba da podesite na _blank.

Kaskadne liste stilova (CSS)

Osnove CSS-aIako je CSS sjajan alat, ipak može biti zastrašujuć, ako ga nikad ranije niste upotrebljavali. Ovaj kratak pogled se bavi osnovama CSS-a, objašnjavajući odakle on dolazi, šta i kako radi, a pokazali smo i osnovne alate koji u Dreamweaveru MX 2004 postoje za rad sa njime.

Kratak osvrtIzvorni koncept HTML-a je bio da je to jezik koji se koristi za označavanje teksta, odnosno za opisivanje različitih strukturnih elemenata u dokumentu. Oznake iz HTML-a identifikuju koji deo dokumenta je zaglavlje, gde su pasusi, koji deo je lista, a koje reči treba istaći. Pretraživači su tako napravljeni da interpretiraju ove strukturne elemente i prikazuju sve to na ekranu. Neće svaki pretraživač prikazati tekst na isti način. Neki će tekst označen kao emphasize prikazati kurzivom, neki masnim slovima, ali je tekst u svakom slučaju istaknut. Cilj je dobiti čitljiv dokument koji će se prikazivati preko strukturnih definicija na različitim platformama.

Prezentacioni markup jezik i problemi koji tu postojeSa pojavom grafičkih pretraživača i brzom ekspanzijom Weba, javili su se i zahtevi autora koji su se bavili HTML-om, da se naprave nove oznake koje će se baviti i prezentacijom, a ne samo strukturom. Dizajneri nisu više bili zadovoljni samo mogućnošću da zadaju da reč treba da se istakne, oni su želeli da definišu i kako ta reč treba da se istakne (na primer, putem masnih slova). Kao odgovor na ovaj pritisak, u jezik su ubačeni fizički elementi kao što su oznake b i i. Uskoro je strukturni jezik prerastao u prezentacioni, a oznaka font je počela da se široko primenjuje za definisanje stila teksta. Dizajneri web sajtova su bili srećni da imaju izvesnu kontrolu nad prezentacijom, ali kako su prestali da koriste strukturno formatiranje, više nije bilo moguće odrediti strukturne informacije na osnovu izvornog koda. To je dovelo do negativnih posledica, kao što su:

Kod koji se pravio nije ništa govorio o značenju teksta koji se prikazuje. Strukturno, ove strane predstavljaju samo niz slova. Pretraživač sa sintezom govora, na primer, tekst koji je označen oznakom <hl> prepoznaje kao glavno zaglavlje. On zna da taj tekst treba da prikaže velikim i masnim slovima, ali je to za njega običan tekst.

Markup koji nema strukturu je mnogo teže održavati. tekst koji je logički označen prema značenju sadržaja dovodi do čistijeg koda, koji ima smisla.

Nestruktuirane strane je vrlo teško indeksirati. Ako su zaglavlja strana i odeljaka jasno označena, mašine za pretraživanje mogu da ih koriste da omoguće korisniku da pronađe relevantne informacije.

Ovo je posao za CSSW3C je brzo prepoznao da se priroda HTML-a promenila sa povećanom upotrebom prezentacionog označavanja i da je potrebno neko rešenje. Kao odgovor na to, počeo je rad na kaskadnim listama stilova (cascading style sheets - CSS), a 1996. godine je CSS postao preporuka W3C konzorcijuma. CSS je napravljen tako da dizajneru web strane omogući puno kontrole nad prikazivanjem strane, a da HTML ostane strukturni jezik. CSS omogućava mnogo kompleksniju i raznovrsniju prezentaciju teksta nego što je HTML ikad mogao da uradi, omogućavajući takve stvari, kao što je kreiranje okvira, definisanje razmaka oko elemenata, varijacije u velikim i malim slovima, dekoraciju (kao što je podvlačenje), definisanje razmaka između slova i puno toga drugog. Verovatno je najlepša stvar, koja je smanjila opterećenje web dizajnera, mogućnost da se koriste povezane liste stilova, tako da promenom stila na jednom mestu, možete da promenite

izgled celog sajta. CSS je nešto što web dizajneri moraju poznavati, tako da svaki ozbiljan dizajner mora ovaj alat imati u svom arsenalu.

Osnovni elementi CSS-aCSS je u osnovi skup instrukcija koje definišu kako neki HTML dokument treba da se prikaže. Najbolja stvar kod CSS-a je da se on može deflnisati u spoljašnjoj datoteci, ili listu (sheet). Pretraživač onda može da pročita ovaj spoljašnji list i da primeni sadržaj na određeni sadržaj datoteke. Na taj način se stil i formatiranje strane odvajaju od samog sadržaja. Ovo je vrlo bitan koncept kod dizajna web strana. Ovo Vam pruža moćan i detaljan način da ažurirate svoj web sajt. U datoteci sa stilovima možete definisati da se za tekst primenjuje font Arial, da je veličina slova 12 piksela, da su slova crvene boje, da su masna, da je tekst levo poravnat i da je pozadina plava. Ako ovu datoteku pridružite svim stranama na svom sajtu, tekst će se uvek prikazivati na taj način. Ako promenite mišljenje, možete da promenite jednu datoteku i da zadate da font bude Times, da veličina slova bude 28 piksela, da su zelene boje, pisana kurzovim i desno poravnata. Upamtite tu novu datoteku i ceo web sajt se automatski ažurira. CSS takođe omogućava da radite neke stvari koje u HTML-u nisu moguće. Za svoju stranu možete definisati nivo kroz koji ćete se kretati klizačem. Na taj način možete da imate prozor u sredini strane sa sadržajem kroz koji se možete kretati uz pomoć klizača. Za svaku ivicu u okviru tabele možete definisati različitu boju. Možete podesiti da se kod oznaka za nabrajanje koristi korisnički definisana grafika, ili možete obrisati podvlačenje hiperlinkova. Premda se sa svakom novom verzijom pretraživača poboljšava podrška koju oni imaju za CSS, ipak neće svi pretraživači prikazati sve elemente CSS-a, niti će sve elemente prikazati na isti način. Uvek je dobro da svoju stranu testirate u različitim pretraživačima. Jedna od bitnih ideja u vezi CSS-a je da ako pretraživač ne podržava neki stil, informacije su i dalje tu, ali se ne koriste stilovi koji nedostaju. IE 5 i Netscape 6 i novije verzije uglavnom prikazuju većinu CSS elemenata. Izvesna ograničenja postoje u verziji Netscape 4. CSS Vam daje neverovatnu kontrolu nad stranama. W3C sada preporučuje da za formatiranje strana koristite CSS. Trebalo bi da pažljivo razmotrite mogućnosti primene CSS-a kod dizajna.

Napomena o semanticiStil (style, ili style rule) generalno definisan kao skup parametara za neku oznaku ili klasu.List (sheet) je datoteka koja sadrži stilove. List može da sadrži više stilova.

Anatomija stilaU srcu CSS-a je stil. Ako shvatite kako stilovi rade i kakve mogućnosti donose, onda možete i da ih korisite na pravi način.

CSS selektoriCSS stil koji je najlakše razumeti je CSS selektor. Selektor je bilo koji HTML element ili oznaka. Ako želite da utičete na izgled oznake, onda morate da primenite niz pravila koja definišu kao se ta oznaka prikazuje u pretraživaču. Osnovni format selektora je:

selector {osobina:vrednost}

Selector je oznaka koja se menja. Osobina je ime osobine koja se podešava. Vrednost je vrednost osobine koja se zadaje. Evo jednostavnog primera:

p {color: green}

Ovim se zadaje da tekst koji se nalazi između oznaka <p></p> treba da bude zelene boje. To važi za svaku stranu koja koristi taj stil. Možete i da u okviru jednog stila zadate nekoliko osobina:

p{color: green;text-align: right }

Ovim se zadaje da tekst treba da bude zelene boje i da bude desno poravnat. Ako želite da isti stil dodelite različitim oznakama, onda možete da ih u okviru selektora sve navedete:

p,div,H2{color: green;text-align: right}

Obratite pažnju na zareze koji odvajaju oznake, kao i na dve tačke koje odvajaju ime osobine od vrednosti, kao i na tačku i zarez koji odvajaju osobine.

Kontekstualni selektoriDrugi način za primenu stilova na određenu stranu su kontekstualni selektori. Ovde postoji malo više specijalizacije, pošto se selektor primenjuje samo ako je zadovoljen određeni uslov ili ako je prisutan niz oznaka. Možete, na primer, napraviti CSS selektor koji se primenjuje na oznake anchor, ali samo ako su one u okviru liste. To znači da treba da napravite selektor koji traži kombinaciju oznaka li a (stavka u listi i kotva) i da onda primeni stil. Ovaj stil se ne primenjuje na linkove koji nisu u listi.

li a{color: red;font-weight: bold;text-decoration: none;}

KlaseZa neku oznaku možete definisati više stilova. Najfleksibilniji metod da se to uradi je da se zada klasa. Klasa je skup pravila za stilove koji se može primeniti na bilo koji element.

Ovo je različito u odnosu na promenjenu definiciju oznake iz HTML-a, koja se automatski primenjuje na zadati element. Ova oznaka izgleda ovako:

.red {color: red} h2.green {color: green}

Ako za neku oznaku želite da zadate klasu, mogli biste da napišete:

<h2 class="green">Ovo je zeleni tekst</h2>

Ovim se oznaci nalaže da treba da koristi klasu green. Pošto se stil primenjuje direktno na oznaku, to i utiče samo na tu oznaku. Ovo ne utiče na <h3 class="green"> Ovo nije zeleni tekst </h3> pošto je klasa.green direktno povezana sa oznakom <h2>. Klasu red možete da koristite sa bilo kojom oznakom. Ona će se na tu oznaku primeniti, pošto nije dodeljena nijednoj konkretnoj oznaci. To znači da će se sledeće primeniti na pravi način:

<h2 class="red">Ovo je crveni tekst</h2> <h3 class="red">Ovo je crveni tekst</h3>

Pseudo klaseOvakve klase se najviše koriste za prikazivanje linkova u različitim stanjima. To su stanja Link, Visited, Hover i Active. U pitanju su unapred podešene definicije za stilove linkova, koje razlikuju linkove, aktivne linkove (oni koji se mogu kliknuti), Hover (kada miša postavite iznad linka), kao i Visited (linkove na kojima ste već bili). Preko selektora možete definisati stilove za svako od ovih stanja. Ovde je bitan redosled definicija u CSS datoteci. Taj redosled mora biti Link, Visited, Hover, Active, ili ovo neće raditi kako očekujete. Evo primera:

a:link{text-decoration:underline} a:visited{text-decoration:overline} a:hover{text-decoration:none} a:active{text-decoration:none;cursor:wait}

Pseudo klase funkcionišu u verzijama IE 4+ i Netscape 4+, ali se efekat a:hover ne prikazuje kako treba u verziji Netscape 4.

Stilovi i datoteke sa stilovima i gde ih treba čuvatiStilovi se mogu definisati u okviru dokumenta, kao pojedinačni stilovi koji su postavljeni direktno u kod, a mogu se definisati i u okviru lista sa stilovima. List sa stilovima može biti interni ili eksterni, u zavistnosti od toga gde je smešten u odnosu na dokument koji formatira. U narednim odeljcima ćemo razmotriti prednosti i nedostatke inlajn stilova, internih lista sa stilovima i spoljašnjih lista.

Inlajn stilovi

Inlajn stilovi se definišu direktno u okviru oznake na strani. CSS se piše direktno u oznaku, kao atribut. Evo kako to izgleda:

<input type="text" style="width:150px; border:1px solid #000000; ">

Iako inlajn stil ima prioritet u odnosu na ostale stilove, on utiče samo na oznaku kojoj je pridružen. Prethodni CSS ne utiče ni na jednu drugu oznaku input. Ovo je najmanje efikasan način za upotrebu CSS-a na web strani.

Interni listovi stilova

Interni listovi stilova se defmišu u okviru HTML strane u delu head. Koristi se block style. Na ovaj način se stilovima može da pristupi sa cele strane, ali ne utiču na druge datoteke. Tipični interni stil izgleda ovako:

<head><style type="text/css">body {background-color: red}p {text-align: right; color: white}</style></head><body><p>Ovaj paragraf je bele boje.</p> <p>I ovaj paragraf je bele boje.</p>

Kao što vidite, ako želite da prebacite sve pasuse u dokumentu na levo ravnanje i da im promenite boju, samo treba da promenite CSS u zaglavlju. Promene se automatski primenjuju na sve pasuse u dokumentu.

Spoljašnje liste sa stilovimaSpoljašnje liste stilova omogućavaju da u potpunosti iskoristite mogućnosti CSS-a. U ovakvim datotekama se nalaze svi stilovi i definicije. Datoteka ima ekstenziju.css. Ovo je nesporno najbolji način za skladištenje stilova. Na ovaj način su informacije o stilovima potpuno nezavisne od HTML koda. Promenom samo jedne datoteke možete da promenite izgled celog sajta. Sajt se automatski ažurira u zavisnosti od informacija u datoteci sa stilovima. Ako naučite sve opcije koje pruža CSS, onda možete da u potpuosti iskoristite ovu funkciju. Tipična spoljašnja datoteka sa stilovima je povezana sa stranom preko sledećeg koda:

<link href="styles.css" rel="stylesheet" type="text/css">

Može i da se uveze preko sledećeg koda:

<style type="text/css"><!--@import url("styles.css");- -></style>

Datoteka sa stilovima sadrži listu selektora i klasa. Evo kako to izgleda:

P

{color: green;text-align: right}.red {color: red}h2.green {color: green}

Kaskadnost i nasleđivanjeJedna od prednosti koje nudi CSS je da stilovi rade zajedno i da ako je potrebno možete da preklopite jedan stil drugim. Kaskadnost i nasleđivanje funkcionišu zajedno. Kaskadnost predstavlja upotrebu više stilova i listova sa stilovima, kao i redosled po kojem se oni čitaju. Redosled u kojem se stilovi pojavljuju u kodu određuje koja se konkretna osobina prikazuje. Ako spoljašnja datoteka sa stilovima kaže da tekst u oznaci h2 treba da bude plave boje, ali postoji inlajn stil koji kaže da konkretna oznaka treba da bude žuta, onda žuta pobeđuje, pošto se nalazi bliže aktuelnom kodu. Inheritance znači da će u kaskadi stilova, bliži stil preklopiti samo one parametre koji su zajednički za oba stila. U prethodnom primeru, ako spoljašnji stil kaže da oznaka h2 treba da bude desno poravnata, inlajn stil neće to da preklopi, pošto u njemu nema parametra koji kontroliše ravnanje. To znači da će oznaka h2 biti žute boje, pošto je to boja definisana u inlajn stilu. Ali će naslediti desno ravnanje od spoljašnjeg stila.