95132283 uvod u html i css skripta

Uvod u HTML i CSSVredi kredita:3400 | Ukupno osvojeno: 13%Opis kursa

Ovaj kurs sadrži osnovne i napredne tehnike rukovanja HTML-om i CSS-om. Obrađuje kompletan proces kreiranja dokumenata, poštujući html-validaciona i Internet pravila. Zastupljeni su najbitniji HTML elementi i najčešće korišćena CSS pravila kroz konceptualni pristup jezicima.

Cilj kursa

Upoznavanje polaznika sa tehnologijom izrade veb stranica kroz jezike HTML i CSS i njegovo osposobljavanje za izradu veb sajtova poštujući standardne konvencije i validaciju.

Osnove HTML-a1.1 Osnove i način funkcionisanja HTML-a1.2 Struktura HTML-a elementi, atributi i tagovi1.3 Struktura Web strane

Osnove i način funkcionisanja HTML-aJedinica: 1 od 17

Pojava Interneta i HTML-a

Za zvaničan trenutak nastanka HTML-a podrazumeva se 1990. godina, kada su proizvedeni i putem mreže testirani prvi Hypertext fajlovi. U tom trenutku, upravo je počinjala ekspanzija Interneta i bio je potreban dobar „jezik” koji će omogućiti kompaktnu serijalizaciju podataka i jednostavnost rukovanja.

Sam Internet postojao je (u različitim oblicima) i mnogo ranije. Prva umrežavanja ARPANET sistema dogodila su se 1969. godine, tako da se, obzirom da se ARPANET smatra za direktnu preteču Interneta, ova godina može smatrati i za nastanak ideje o Internetu. Nastankom protokola TCP (Internetwork Transmission Control Program) 1974. godine, prvi put je pomenut i pojam Interneta. U tom slučaju, samo kao skraćenica za reč Internetwork iz naziva protokola, ali kasnije (1980) i kao naziv za čitavu mrežu.

Ova infrastruktura nastavila je svoje rapidno širenje po Americi i Japanu tokom osamdesetih godina prošlog veka, da bi konačno, 1989. godine počela da biva prihvaćena i

http://www.link-elearning.com/linkdl/preview/index.php?pk=119714343d74604378e0f7380d890a97_ita_10&IDJedinica=274073&c=jedinice



u ostatku sveta, počevši od Evrope. Ovo je i godina kada su već počinjali da se pojavljuju prvi ISP-i (Internet Service Provider), odnosno, kada je Internet počeo da biva komercijalan i dostupan širem broju korisnika.

Web – Internet

Danas, prva asocijacija na reč Internet jeste Web pretraživač (Internet Explorer, Mozilla FireFox, Opera...) i njegov sadržaj. Što zapravo i nije pravilno. Sam Internet, samo je tehnologija koja opslužuje servise koji na njemu postoje, ali ne i sinonim za te servise. Kao što autoput ne čine automobili, kamioni i benzinske pumpe, već sama infrastruktura koju ova vozila koriste. U slučaju Interneta, Internet bi bio autoput, a Web bi bila vozila koja ga koriste. Zatvorena umrežena struktura koja počiva na TCP/IP protokolu ali nije deo Interneta, naziva se Intranet.

HTTP protokol

Prilikom kretanja kroz Internet, Web stranice najčešće koriste HTTP (Hyper Text Transfer Protocol) protokol. Ali već smo pomenuli da je Internet baziran na TCP/IP (Transmission Control Protocol/Internet Protocol), pa to može zbuniti. Zapravo, ovo su protokoli koji funkcionišu u dve različite dimenzije. Sam TCP/IP je protokol niskog nivoa (transportni nivo) koji služi za komunikaciju dva računara između sebe, dok je HTTP protokol koji predstavlja način na koji će oni komunicirati.

Ako želimo da razgovaramo telefonom sa osobom iz Japana koja govori samo Japanski, bila bi nam potrebna dva preduslova da to i uradimo. Telefonska veza sa Japanom i poznavanje Japanskog jezika. Ako bi ovaj primer preneli na Internet, telefonska veza bi bio TCP/IP protokol, dok bi japanski jezik bio HTTP protokol.

Na logično pitanje, da li ovo znači da kroz Internet (TCP/IP) prolaze i drugi protokoli, odgovor je - da. Na primer, slanje svakog maila aktivira SMTP (Simple Mail Transfer Protocol) protokol, prenos fajlova putem Interneta vrši se FTP (File Transfer Protocol) protokolom, HTTPS protokol omogućava transport kriptovanog sadržaja...

Web klijent

Iako pomenuti protokoli možda deluju zastrašujuće, oni zapravo ne treba da nas brinu. Pre svega, zato što je rukovanje njima prilično jednostavno, a pored toga i zato što mi nismo ti koji će njima rukovati (bar ne u ovoj, početnoj fazi Web programiranja).

Vratimo se na primer sa telefonskim razgovorom sa Japanom. Šta ako bismo želeli da bilo kojoj osobi koja ne zna japanski, omogućimo komunikaciju sa sagovornikom iz Japana? Bila bi nam potrebna naprava za prevođenje sa njegovog jezika na japanski. U slučaju Interneta, ovakva naprava postoji i naziva se Web pretraživač (Internet Explorer, Mozilla

FireFox, Opera itd). Web pretraživač je zapravo program koji radi mnogo više od komunikacije sa Internetom putem HTTP protokola. Ovo je program koji nam omogućava i pamćenje adresa, kreiranje lista omiljenih sajtova, pamćenje šifara i korisničkih imena... Ipak, svaki od ovih programa, pored navedenog, mora posedovati i „mali” sistem za rukovanje Internetom (HTTP i ostali internet protokoli). Ovaj sistem naziva se User Agent, i on je, zapravo, ključna tačka u funkcionalnosti Web pretraživača, odnosno, pomenuta naprava za prevođenje. Često se u programerskom žargonu i ne pominje reč pretraživač, već User Agent, ali svakako, generalan naziv za aplikaciju koja se nalazi na korisničkoj strani HTTP komunikacije (User Agent aplikacija), naziva se Web klijent. Web klijent čita HTML kod red po red i adekvatno rukuje njime, kroz postupak koji se naziva parsiranje. Krajnji rezultat tog procesa je formatirana Web strana u pretraživaču.

Korisnik koji koristi neki od ovih programa, često i ne zna da je unosom željene adrese u njega i pritiskanjem tastera GO, aktivirao seriju događaja HTTP protokola. Ipak, lako je primetiti, da sve adrese standardnih (bez enkripcije i sl.) Web sajtova na Internetu sadrže prefiks http. Npr. adresa Google pretraživača zapravo nije www.google.com, već http://www.google.com pa je jasno da http sa početka adrese u stvari predstavlja protokol koji se koristi za rukovanje tom adresom.

Pored protokola, ostatak adrese predstavlja tačnu lokaciju na kojoj se određeni dokument (resurs) nalazi. Ova adresa naziva se URI (Uniform Resource Identifier), odnosno, URL (Uniform Resource Locator). Razlika između ova dva je što je URI uopšten naziv za bilo koji Uniform Resource, koji može biti URN, URC ili URL (Name, Characteristics, Locator).

Web server

Ako bi, iz primera sa telefonskim razgovorom sa Japanom, nas predstavljao User Agent (Web pretraživač/Web klijent), onda bi sagovornika iz Japana predstavljao Web server. S tim što, je za razliku od živog sagovornika, Web server, ma koliko bio dinamičan, fiksna struktura koja je u stanju da izvršava samo programirane funkcije (posao Web programera upravo i jeste uvođenje dinamike i funkcionalnosti na Web server prema svojim, ili potrebama poručioca). Dakle, Web server je program koji ima zadatak da što bolje odgovori na zahteve klijenta. Ali, Web server predstavlja i sam uređaj (računar) na kome se taj program izvršava, pa tako pojam Web servera ima dva značenja.

Za razliku od desktop programiranja (pravljenja programa koje se izvršavaju na klijentskom računaru) Web programiranje ima malo drugačiji sistem razmišljanja i funkcionisanja koji je, iako isprva deluje malo teži za razumevanje, zapravo, izuzetno jednostavan.

Kada kreiramo Web aplikaciju ili sajt, mi predstavljamo Web server i funkcionišemo u njegovom kontekstu. Ali, prilikom testiranja te aplikacije, mi prelazimo u kontekst Web klijenta, jer klijent i server stvari koje kreiramo ne vide na isti način, i jedini način da vidimo šta smo uistinu uradili jeste da se postavimo u ulogu klijenta. Iz ovoga ne treba

http://www.google.com/

http://www.google.com/

zaključiti da Web server nije u stanju da funkcioniše bez prethodnog programiranja. Svaki Web server (program) ima podrazumevanu funkcionalnost, na čijem čelu je sistem za pronalaženje i emitovanje strana naznačenih u klijentskom zahtevu, pa će tako svaki validan fajl koji postavimo na Web server moći da bude pronađen i emitovan unosom pravilne adrese na klijentu.

Svaki Web server poseduje i sistem za startovanje korisničkih programa u svom kontekstu (CGI - Common Gateway Interface), što omogućava kreiranje dinamičkih sadražaja. Ali ono što je za nas bitno u ovom trenutku, jeste da je Web server u stanju da na osnovu različitih faktora stvori različit sadržaj, ali da na kraju, taj sadržaj mora biti HTML, jer je HTML jedini jezik koji je bilo koji klijent u stanju da razume.

HTML

Ovaj jezik nastao je kao direktan derivat jezika SGML (Standard Generalized Markup Language), njegovim uprošćavanjem. HTML je skraćenica za HyperText Markup Language. Hypertext je tekst koji u sebi sadrži i dodatne informacije, pre svega, referencu (hyperlink) na neki drugi deo teksta, dok Markup Language znači da se radi o jeziku simbola (tagova). Ovo HTML zapravo i jeste, mnogo teksta opisanog jezikom simbola i mogućnošću kretanja kroz taj tekst putem linkova. Elementi koji pokreću ovaj mehanizam, na samim Web stranama se ne vide. To je zato što klijent emituje korisniku prerađen i formatiran sadržaj onako kako ga HTML opisuje.

Većina pretraživača sadrži opciju za pregledanje izvornog HTML koda otvorenog dokumenta (u Internet Explorer-u ova opcija se nalazi u glavnom meniju pod stavkom View>Source). Ako na ovaj način otvorite bilo koju Web stranu videćete da je razlika između ova dva sadržaja drastična. Na primer, pogledajmo kako izgleda slika naslovne strane pretraživača Google i slika koda koji tu stranu opisuje.

Količina informacija koju korisnik može da vidi i onih koje opisuju stranu se veoma razlikuju. To je delimično zbog toga što prezentovanje sadržaja korisniku na specifičan način (npr. hiperlink), zahteva dodatni opis tog sadržaja. Npr. da bi tekst „moj link” bio vidljiv kao link ka Google-u u pretraživaču, potrebno je smestiti ga u tag:

<a href=”http://www.google.com”>moj link</a>

Ali, pored toga, veliku količinu teksta za opis ove strane uzrokuje i određena količina skripte implementirane u HTML. Ovaj skriptirani dodatak, iako “živi” implementiran u HTML-u, tehnički nije deo HTML jezika. Sa druge strane, očigledno jeste deo HTML dokumenta i postoji i izvršava se u njemu. Postoje različite vrste klijentskih Web skript jezika, kojima je osnovna zajednička karakteristika to da se obično nalaze implementirani u HTML sadržaj.

Upotreba klijentskih skripti dodaje veliku funkcionalnost Web stranama, ali zahteva i poznavanje nekog od skript programskih jezika (JavaScript, JScript, VBScript), kao i HTML strukture Web dokumenta (DOM). Naziv “jezika” koji se koristi za kreiranje

ovakvih (dinamičkih) strana, čija se dinamika događa na klijentskoj strani (animacije i sl.) je DHTML. Ali DHTML zapravo i nije nikakav zaseban jezik, već samo kombinacija pomenutih komponenti (HTML, JavaScript, CSS i DOM).

Flash, Silverlight i Java Applet

Osim skript jezika koji se implementiraju u HTML, postoji i mogućnost startovanja zasebnih aplikacija u okviru jedne Web strane. Korisnici Interneta se svakodnevno susreću sa ovakvim slučajevima, jer skoro da nema strane koja na sebi nema bar jednu Flash aplikaciju. Nešto su ređi Java apleti i silverlight aplikacije.

Za razliku od JavaScript-a koji interaguje sa HTML-om kroz DOM strukturu, ove aplikacije funkcionišu potpuno nezavisno od HTML-a i strana na kojoj se nalaze služi im samo kao “domaćin” na kome će biti emitovane, zbog čega im ni kod nije tako jednostavno dostupan kao standardnim HTML dokumentima. Sa druge strane, ove aplikacije nude bukvalno neograničene mogućnosti za razvoj izgleda i funkcionalnosti jedne Web prezentacije i često se koriste za izradu prezentacija kod kojih je krucijalna estetska komponenta i koje ne rukuju sa velikom količinom podataka.

Često se događa da početnici mešaju programske jezike JavaScript i Javu. Zapamtite da ovo nisu isti jezici i da su im sintakse, implementacije i namena potpuno drugačiji.

MIME

Je skraćenica od Multipurpose Internet Mail Extensions i predstavlja definiciju tipa dokumenta kojim rukujemo na Internetu. Iako isprva osmišljen kako bi klasifikovao tipove podataka koji se prosleđuju putem smtp mail servera, danas je osnova za rukovanje svim fajlovima na http protokolu.

Jasno je iz dosadašnjeg teksta da HTML nije programski jezik u pravom smislu, već sistem za serijalizaciju tekstualnog sadržaja. Ono što on u izvornom obliku može, jeste da prikaže neki sadržaj i dodeli mu neke karakteristike. Ono što ne može, to je da izvrši bilo kakvu funkcionalnost nad tim sadržajem.

Alati

Obzirom da znamo da se HTML dokumenti skladište u običnim tekstualnim fajlovima (sa ekstenzijom html ili htm), za njihovu izgradnju nisu nam potrebni nikakvi posebni alati. Da bi stvorili i pregledali jedan HTML dokument, potreban nam je bilo kakav tekst editor i bilo kakav Internet pretraživač (Browser).

Za kreiranje HTML-a obilčno se koriste komercijalni alati (Dreamweaver, Front Page, Visual Studio) ili besplatni (kompozer, notepad++).

Pošto ćemo u ovom kursu raditi isključivo sa kodom, držaćemo se minimalističkog (i besplatnog) pristupa, pa ćemo kod pisati u notepad++ editoru, a proveravati ga u Internet Explorer-u (verziji sedam ili većoj) i Mozilla Firefox-u (verziji tri i većoj).

Evo adresa za download pomenutih programa, ukoliko ih nemate već instalirane:

• Notepad Plus - http://notepad-plus.sourceforge.net/uk/site.htm• Mozilla Firefox - http://www.mozilla.org/• Windows Internet Explorer 7 - http://www.microsoft.com/Downloads/details.aspx?

familyid=9AE91EBE-3385-447C-8A30-081805B2F90B&displaylang=en

Najvažnije iz lekcije:

1. HTML je jezik tagova koji se koristi za izgradnju Web strana2. Internet je institucija koja omogućava funkcionisanje Web-a3. DHTML je spoj HTML-a, DOM-a, JavaScript-a i CSS-a4. Web server je računar ili program koji skladišti i prosleđuje HTML dokumente5. Web klijent je aplikacija koja preuzima i parsira HTML kod i emituje ga u

formatiranoj formi6. Svakoj Web strani koja se nalazi na klijentu moguće je pregledati HTML kod7. Web je sistem za traženje, skladištenje i preuzimanje internet resursa

Struktura HTML-a elementi, atributi i tagovi

Jedinica: 2 od 17

U prethodnoj lekciji, pomenuli smo da je pretraživač osnovno sredstvo za parsiranje i prikazivanje HTML dokumenata. Takođe smo pomenuli i da se HTML dokumenti u Web strukturi prosleđuju klijentu uz pomoć Web servera. Ipak, da bi pregledali jedan HTML dokument, nije nam neophodan Web server. HTML dokument je moguće otvoriti direktno sa bilo koje lokacije (fajl sistema, na primer) uz pomoć pretraživača. Potrebno je samo da taj dokument poseduje validnu HTML strukturu i da ima ekstenziju htm ili html, pri čemu je tip fajla običan ASCII tekst, pa ga je moguće stvoriti i u najobičnijem programu za unos teksta (npr. Notepad). Ukoliko je ovo pravilo ispoštovano, pretraživač će otvoriti i prikazati sadržaj fajla, pa čak i ako ne poštuje HTML konvencije.

Na primer, ukoliko napravimo tekstualni fajl koji u sadržaju ima samo tekst „moj tekst”, i snimimo ga sa ekstenzijom .html ili .htm (ove dve ekstenzije su sinonim za identičan tip

http://www.microsoft.com/Downloads/details.aspx?familyid=9AE91EBE-3385-447C-8A30-081805B2F90B&displaylang=en

http://www.microsoft.com/Downloads/details.aspx?familyid=9AE91EBE-3385-447C-8A30-081805B2F90B&displaylang=en

http://www.mozzila.org/

http://notepad-plus.sourceforge.net/uk/site.htm

fajla) i zatim otvorimo taj fajl, u pretraživaču će biti emitovan tekst „moj tekst”. Ukoliko pogledamo kod strane, videćemo da je identičan sa napravljenim tekst fajlom.

Ovaj sadržaj, iako vidljiv u pretraživaču, ne predstavlja validnu HTML strukturu i ne može se ni pored ekstenzije nazvati pravim HTML dokumentom, jer ne poseduje HTML elemente.

Elementi i atributi

Verovatno najrasprostranjeniji način za serijalizaciju podataka danas jeste jezik tagova i skoro da ne postoji program koji informacije ne izvlači iz jedne ovakve strukture. Isti sistem komunikacije koristi i HTML jezik, pa je zato neophodno upoznati se sa načinima njegovog funkcionisanja da bi se HTML uopšte naučio.

Danas postoje mnogi programi koji grafički prikaz automatski prevode u HTML kod, pa se stiče utisak da je moguće napraviti HTML dokument i bez znanja o njemu, ali za bilo kakvu ozbiljniju intervenciju na jednoj Web strani, ovakvi programi često nisu dovoljno moćni i potrebno je ući u srž problema i ručno rukovati njime kroz čist HTML kod.

Svaki HTML kod sastoji se od sadržaja zatvorenog u tagove. Ovi tagovi zapravo nazivaju se elementi u tom kodu. Na primer, ako bi želeli da malopređašnji primer ispoštuje strukturu elemenata i atributa, trebalo bi da glasi ovako:

<h>Moj tekst</h>

Ovaj primer predstavlja jedan element HTML dokumenta. I u njemu primećujemo određene osobenosti. Znake < i >, slovo h i znak /.

Da bi se nešto moglo nazvati tagom, mora da bude uokvireno u znake < i > . U primeru, može se reći da postoje dva taga, jedan ispred i jedan iza teksta “Moj tekst”. Jedina razlika među njima je u tome što drugi tag poseduje i dodatak / ispred slova. Taj dodatak označava da je u pitanju završni (zatvarajući) tag. Prvi tag je onda logično, otvarajući tag. Da bi jedna tag struktura (poput ove naše) bila validna, ona mora biti otvorena i zatvorena (upravo kao na primeru).

Ovakva struktura se, obzirom da dva taga uvek idu zajedno, takođe naziva tag, tako da bi konačno mogli reći da je primer: <h>Moj tekst</h> jedan pravilan tag.

Slovo h označava da je u pitanju naslovni HTML tag (Heading), ali da bi saznali zašto se on nalazi baš tu, potrebno je da se prethodno upoznamo sa pojmom elemenata.

Naš primer, pored toga što predstavlja jedan tag, takođe predstavlja i jedan element, odnosno ima osobine elementa. A osnovne osobine elementa su da može sadržati druge elemente kao i atribute, što naš primer može.

Recimo da želimo da napravimo popis svih kuća jednog naselja, tako što bi napravili formular za svakog vlasnika kuće, u koji bi mogao da unese podatke o svojoj kući. Da bi ovaj formular napravili, morali bi da znamo koje sve osobine jedna kuća može imati. Tako bi na kraju, dobili dokument koji bi imao polja za unos: adrese, kvadrature, broja spratova, veličine placa...

Kada bi želeli da formatiramo ovaj spisak kroz tagove, mogli bi početi ovako:

<kuca>Jurija Gagarina 1</kuca><kuca>Jurija Gagarina 2</kuca><kuca>Jurija Gagarina 3</kuca><kuca>Jurija Gagarina 4</kuca>

Ova lista predstavlja četiri različite kuće, sa četiri različite adrese. Kada bi sekvencijalno čitali jedan po jedan red iz ovog spiska, lako bi mogli da dobavimo adrese svake kuće ponaosob. Ali, na dokumentu iz primera potrebno je još informacija osim adrese. Kvadratura, broj spratova... što su informacije koje napravljeni spisak kuća ne pruža. Da bi dopunili spisak možemo u njega ubaciti dodatne elemente.

<kuca> <adresa>Jurija Gagarina 1</adresa> <kvadratura>75</kvadratura> <brojSpratova>1</brojSpratova></kuca><kuca> <adresa>Jurija Gagarina 2</adresa> <kvadratura>50</kvadratura> <brojSpratova>2</brojSpratova></kuca>

U primeru se jasno vidi da postoje dve kuće, sa različitim osobinama i da svaka kuća ima podelemente sa informacijama. Iz ovoga zaključujemo da je moguće umetati elemente u druge elemente, odnosno, vršiti gnježđenje elemenata. Na ovaj način mogli bi otići i dublje u strukturu elemenata i gnjezditi ih »beskonačno«.

<kuca> <adresa>Jurija Gagarina 1</adresa> <kvadratura>75</kvadratura> <spratovi> <sprat> <brojSprata>0</brojSprata> <nazivSprata>kuhinja i dnevna soba</nazivSprata> </sprat> <sprat> <brojSprata>2</brojSprata>

<nazivSprata>spavace sobe</nazivSprata> </sprat> </spratovi></kuca>...

Svaki element, osim podelemenata, ima mogućnost pamćenja podataka i u svojim atributima. Ovi atributi nalaze se u otvarajućem delu jednog taga i obeležavaju se tako što se nazivu željenog atributa, znakom jednakosti dodeli njegova vrednost.

<kuca adresa="Jurija Gagarina 1"></kuca>

Jedan element tako može sadržati atribute i informacije u njima, a da pri tom uopšte nema podelemente, sve dok neki od podataka koje sadrži ne mora da bude lista (kao što je slučaj sa spratovima u prethodnom primeru). U tom slučaju, naše kuće bi izgledale ovako:

<kuca adresa="Jurija Gagarina 1" kvadratura="75" brojSpratova="1"></kuca><kuca adresa="Jurija Gagarina 2" kvadratura="50" brojSpratova="2"></kuca><kuca adresa="Jurija Gagarina 3" kvadratura="30" brojSpratova="1"></kuca>

U ovom kodu, brzo i jednostavno opisali smo tri kuće u samo tri reda, i to samo kroz atribute. Obzirom da su sadržaji elemenata prazni (nema ništa unutar tagova kuca) ne moraju da postoje u ovom obliku, već se mogu zapisati i skraćeno:

<kuca adresa="Jurija Gagarina 1" kvadratura="75" brojSpratova="1" />

Ovakav zapis taga je potpuno validan, i naziva se samozatvarajući tag (samozatvarajući tagovi su više pravilo XML jezika nego HTML jezika, ali obzirom da se ovde bavimo xHTML-om koji podrazumeva neke XML osobenosti, možemo ga usvojiti)

Prilikom kreiranja tagova, treba obratiti pažnju na još neke osobenosti. Iako fleksibilan, jezik tagova neke stvari ne dozvoljava. Kada se kaže ne dozvoljava, to ne mora obavezno značiti da podaci neće biti prikazani na strani ukoliko napravimo grešku, ali najčešće, nepravilno rukovanje dovešće do semantički nepravilnog rezultata na izlazu, čiji ćemo uzrok teško uspeti da pronađemo. Zato tagove treba pisati pravilno i precizno, jer se veoma brzo pretvaraju u nepreglednu bujicu teksta.

Pravila u pisanju tagova

Već smo pomenuli da jedan otvoreni tag mora da bude i zatvoren. Da li ćemo to učiniti kroz samozatvarajući tag ili uz pomoć dva (otvarajućeg i zatvarajućeg) taga, nije tehnički bitno. Bitno je samo da svaki otvoreni tag mora biti i zatvoren.

<mojTag></mojTag><mojTag />

Takođe, jedan tag može obuhvatiti neograničeno drugih tagova, ali se svi ti tagovi moraju i završiti u okviru taga u kome su napravljeni.

Ovaj primer je dobar:

<mojTag> <mojUnutrasnjiTag> <mojUnutrasnjiTag> Sadržaj unutrašnjeg taga </mojUnutrasnjiTag> </mojUnutrasnjiTag></mojTag>

Ali ovaj primer nije:

<mojTag> <mojUnutrasnjiTag> Sadržaj unutrašnjeg taga </mojTag> </mojUnutrasnjiTag>

Ovakve vrste grešaka se ponekad događaju kada se kombinuje rad sa aplikacijom za dizajniranje i ručnog unosa HTML koda i umeju da budu prilično teške za lociranje u većim dokumentima. Najbolja prevencija je pažljiv unos tagova.

Kada je u pitanju prazan prostor između tagova, generalno, on se ne uzima u obzir od strane parsera, tako da bi tagovi:

<mojTag /><mojDrugiTag />

i

<mojTag /><mojDrugiTag />

...trebalo da daju identičan rezultat.

Na žalost, iako je prikazani rezultat ovih tagova identičan, ne čitaju ga svi Web pretraživači na isti način. Zbog čega posle može doći do problema prilikom unosa funkcionalnosti na klijentskom delu. U ovom trenutku, taj problem je za nas irelevantan, pa zato samo treba zapamtiti da prazan prostor između elemenata u HTML strani ipak ima neko značenje.

Što se imenovanja tagova tiče, tu takođe postoje određena pravila. Iako se mi u ovom kursu nećemo preterano baviti kreiranjem sopstvenih tagova, već korišćenjem gotovih HTML tagova, treba napomenuti da nazivi elemenata i atributa ne smeju imati razmak između reči i ne smeju počinjati brojevima ni specijalnim karakterima (#,$,%...), pri čemu je veličina slova nebitna (nije osetljiv na velika i mala slova).Ovo nije dobro:

<@mojElement></@mojElement><moj Element></moj Element>

Treba takođe paziti i kakav se sadržaj smešta u sadržaj tagova. Obzirom da su same oznake tagova takođe i matematički simboli za veće i manje, nije nelogično da se pretraživač zbuni kada mu prosledimo na primer, tag sledećeg sadržaja u kome samo želimo da prikažemo korisniku da je broj 10 manji od neke promenljive a.

<p> 10<a </p>

U ovom slučaju, pretraživač će se “zbuniti”, i shvatiće oznaku manje kao početak taga a, a obzirom da a u ovom slučaju nismo zamislili kao tag, pa samim tim i nema osobine elementa, pretraživač će to shvatiti kao grešku i emitovaće nepravilan izlaz (biće emitovan samo broj 10). Ovo se rešava vrlo jednostavno, tako što se umesto spornog simbola ubaci njegova reprezentacija u ASCII kodu, zbog čega on više ne može negativno da utiče na parsiranje i prikazuje se korisniku u željenom obliku. U slučaju znaka < , koristi se oznaka < pa bi prepravljen primer izgledao ovako:

<p> 10<a </p>

Ovaj kod, emitovaće ispravan rezultat.

Kada smo se upoznali sa pojmovima tagova, elemenata i atributa, napomenimo još jednom da je HTML jezik koji poseduje ugrađene nazive tagova koje ćemo upotrebljavati koristeći samo osobine koje nam oni pružaju. Kompletno poznavanje HTML-a zapravo i podrazumeva baš to. Poznavanje svih tagova i atributa HTML-a.

Da li to znači da bi mogli napraviti sopstveni jezik tagova, koji bi bio različit od HTML-a a koji bi prikazivao Web strane? Da, ukoliko bi napravili i adekvatan čitač (i ubedili 1700000000 korisnika Interneta da je naš jezik bolji od HTML-a). Sa druge strane, moguće je uistinu koristiti jezik tagova i atributa za različite namene i rukovanje različitim oblicima podataka. Ali, u tom slučaju više ne govorimo o HTML-u, već o nekoj drugoj strukturi (XML i sl).

Primećujemo takođe da HTML-u fali jedna od osnovnih osobina programskog jezika, a to je funkcionalnost. To je zato što HTML i nema funkcionalnost, i nije u stanju da bilo šta uradi, već samo da prikaže, odnosno, serijalizuje podatke.


1. HTML dokument je običan tekstualni fajl sa ekstenzijom html ili htm2. Svaki HTML dokument se sastoji od tagova3. Tagovi predstavljaju elemente i mogu imati podelemente4. Elementi mogu imati atribute5. Nazivi elemenata ne smeju počinjati brojem ili specijalnim karakterom6. Elementi se ne smeju preklapati7. Nazivi elemenata i atributa u HTML-u se mogu pisati velikim ili malim slovima

Struktura Web straneJedinica: 3 od 17

Iako smo obradili način na koji funkcioniše jezik elemenata i atributa (jezik tagova – Markup jezik), pomenuli smo da kroz rad sa HTML-om nećemo koristiti sopstvenu, već ugrađenu notaciju HTML-a. To znači da nazive elemenata i atributa nećemo smišljati proizvoljno, već ćemo koristiti postojeće u zavisnosti od toga kakav efekat želimo da postignemo u svom dokumentu. Osim toga, osim pravila koje smo do sada naučili, kada se radi sa jezicima tagova, obično se podrazumeva još jedno pravilo, a to je da, svaki dokument mora posedovati deklaraciju (u kojoj pišu podaci o dokumentu i karakteristikama samog jezika) i koreni element, ispod koga se nalazi sama struktura dokumenta.

Kada je u pitanju HTML, deklaracija obično podrazumeva verziju jezika i adresu fajla u kome se nalazi definicija za ovaj jezik. Ova deklaracija naziva se Document Type Declaration i smeštena je na sam početak svake HTML strane pod “tagom” DOCTYPE. Razlog zbog koga je reč tag stavljena u navodnike, je taj, što ovo zapravo nije pravi HTML tag, već instrukcija upućena Web pretraživaču (zbog oznake ! nakon otvaranja taga). Instrukcija takođe može biti upućena i Web serveru i prepoznaćemo je (kao i instrukciju ptretraživaču) tako što, obično, na svom početku sadrži specijalni karakter (npr. <? ,<% ... ).

Što se tiče DOCTYPE instrukcije (deklaracije), ona obično izgleda ovako:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">

Čemu uopšte služi definicija tipa dokumenta?

Poznato je da različiti pretraživači na različit način interpretiraju HTML dokumente identičnog sadržaja. Ova pojava, osim što uznemirava korisnike tih dokumenata, još više uznemirava njihove kreatore, jer se zbog nje posao na kreiranju neke Web strane u najboljem slučaju udvostručuje. Ali, hipotetički, stvari ne bi trebalo da funkcionišu tako.

HTML se, iako prilično prost jezik tagova, zbog svoje ogromne upotrebe, tretira kao i svaki drugi jezik, pri čemu su za njega klasifikovani standardi i pravila koja definiše i objavljuje institucija koja se zove W3C (World Wide Web Consortium). Ova pravila, objavljuju se u vidu definicije tipa dokumenta, odnosno, šeme po kojoj treba da funkcioniše parsiranje određenog dokumenta.

Kada dizajner počne da pravi stranu, trebalo bi da odluči koju će verziju jezika koristiti, odnosno, na koji će način graditi dokument, što se odnosi pre svega na stilsku komponentu (da li će stilovi biti implementirani u elemente ili zasebno kreirani). U zavisnosti od načina izgradnje dokumenta, zavisi i sam sadržaj definicije tipa dokumenta (DOCTYPE).

Pogledajmo šta jedan po jedan znače delovi definicije dokumenta:

HTML

Ovo je pravi trenutak da pomenemo da svaki HTML dokument treba da ima svoj koreni element, ispod koga počivaju svi ostali elementi. Oznaka HTML u deklaraciji našeg dokumenta označava naziv tog korenog elementa dokumenta. Ova oznaka je po pravilu HTML.

PUBLIC

Daje do znanja sistemu da je definicija tipa koju koristi javna. Naime, kada počnemo da gradimo stranu, ne moramo se ograničiti na standardne definicije, već možemo kreirati i sopstvenu. U tom slučaju, umesto reči PUBLIC stavićemo reč SYSTEM, i nakon toga, pod navodnicima staviti lokaciju sopstvene definicije:

<!DOCTYPE HTML SYSTEM "mojaDefinicija.dtd">

Definicija, takođe, može biti i javna, ali u tom slučaju potrebno je da poseduje i Formal Public Identifier (FPI) u kome se nalaze podaci o toj definiciji.

Pogledajmo FPI standardne xHTML W3C definicije:

-//W3C//DTD XHTML 1.0 Transitional//EN

Iako izgleda poput Web adrese, ovo je zapravo samo jedan set atributa podeljen oznakom //, pri čemu znak – označava da li je definicija prihvaćena kao standard od strane nadležne institucije, W3C označava naziv autora definicije, DTD XHTML 1.0 Transitional je opis definicije, a EN, naravno, jezik na kome je definicija napisana.

Treba napomenuti da se, u opisu definicije, vidi i trenutna verzija HTML jezika koji definicija podrazumeva. U primeru je taj jezik XHTML 1.0 i podrazumeva parsiranje HTML strana na xml način (na primer, HTML ne podržava samozatvarajuće tagove). To je upravo i jezik koji ćemo koristiti tokom ovog kursa.

Reč Transitional, podrazumeva da je dokument u Transitional modu, odnosno, da podržava stilizacione tagove u samom HTML-u. Za razliku od Transitional moda, Strict mod bi značio da kompletna stilizacija strane mora da bude razdvojena od HTML koda, odnosno, logike strane.

Postoji i treći mod, a to je Frames, ali, obzirom da se frejmovi tretiraju kao deplasirana tehnologija, nećemo im davati posebnu pažnju u ovom odeljku.

Da bismo ovo shvatili, potrebno je da na trenutak pomenemo CSS (Cascading Style Sheets), koji ćemo detaljno obrađivati u drugoj polovini kursa.

Dakle, CSS je jezik koji sadrži isključivo stilske atribute (boje, pozicije, okvire, veličine...) koji se povezuju sa HTML elementima, ali ne i implementiraju u njih. Sa druge strane, sam HTML podrazumeva atribute koji se koriste za stilizaciju elemenata. Na primer, element koji predstavlja tabelu u HTML-u ima svoj ugrađeni atribut za boju:

<table bgcolor="#FF0000"></table>

ali taj element takođe može prihvatiti i kompletan stil (sa bojom) iz CSS-a

<table class="nekiCssStil"></table>

U slučaju ova dva primera, prvi primer bi bio neprimeren za Strict mod jer je stilizacija izvršena unutar HTML elementa (i to HTML stilizacionim atributima), dok bi drugi primer bio validan, jer je stilizacija izvršena eksterno.

Pretraživači su, najčešće, bez obzira na navedeni dtd u stanju da renderuju valjano sve što HTML kod od njih zatraži, s tim što se ponekad desi da simulirajući pretpostavljeni tip rendera koji se ne poklapa sa definicijom tipa, mogu raditi u takozvanom Quirks modu. Tada pretraživač simulira stariju verziju pretraživača, za koji “pretpostavlja” da odgovara verziji aktuelnog dokumenta. Osim Quirks moda, pretraživač poznaje i Standard mod.

Konačno, http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd označava adresu definicije.

Nemojte se brinuti ukoliko Vam ovo deluje komplikovano. Ovaj deo zapravo i nije nešto što Web dizajner ili developer koriste često. Većina alata kojima ćete praviti HTML dokumente automatski generiše DOCTYPE direktivu po najnovijim standardima.

Čak i ako ta deklaracija ne odgovara načinu na koji pišemo HTML kod, ovaj kod će biti izvršen valjano u većini slučajeva, jer svi noviji pretraživači prepoznaju elemente pisane van aktuelne definicije dokumenta.

Elementi strane

Napomenuli smo da jedna HTML strana mora imati koreni (root) element. Ovo pravilo zapamtite, jer se tiče praktično svih jezika baziranih na tagovima.

Napravimo figurativnu podelu jednog HTML dokumenta, pri čemu će jedan set elemenata činiti elementi koji opisuju sam dokument, drugi elementi koji bi karakterisali neke celine u tom dokumentu, treći koji bi stilski karakterisali određene grupacije i konačno, elementi koji bi davali funkcionalnost dokumentu (skripte).

U ovoj podeli koreni element, koji se u HTML dokumentu naziva HTML spadao bi u elemente/tagove dokumenta. Zapravo, on bi predstavljao telo našeg dokumenta.

HTML poseduje nekoliko ne prečesto korišćenih atributa.

• lan – opisuje jezik korišćen u dokumentu• dir – opisuje pravac renderovanja dokumenta (može biti s leva na desno i obrnuto)• xmlns

Obzirom da ćemo u kursu obrađivati xHTML (koji podrazumeva implementaciju HTML-a u XML odnosno, obrnuto), poslednji atribut, generalno nije nevažan, jer označava prostor imena za naš HTML dokument. Sa druge strane, taj prostor imena je standardan i većina alata će ga sami napraviti, čak će ga i sam pretraživač podrazumevati i ako nije naznačen, pa osim ukoliko ne želimo da koristimo sopstveni prostor imena on i nije naročito relevantan za nas. Više informacija o XML prostorima imena treba potražiti u kursevima koji se bave XML-om.

Osim HTML elementa, u jednom HTML dokumentu postoji još tagova koji se tiču same konstrukcije dokumenta. To su head, meta, link... Ovi tagovi ne prikazuju ništa krajnjem korisniku, ali čine logičku konstrukciju samog dokumenta, od čega umnogome zavisi to kako će se dokument ponašati kada ga prezentujemo.

Obzirom da je koncepcija HTML-a bazirana na emitovanju i formatiranju teksta, postoje raznovrsni tagovi koji imaju baš taj zadatak. Da grupišu određene sadržajne celine u logičke elemente, kako bi se njima moglo eksplicitno pristupati. Ovaj koncept, iako je s početka bio u skladu sa navedenim opisom, danas ga je uveliko pregazio, jer je rukovanje logičkim celinama u HTML-u daleko od pukog deljenja i formatiranja teksta. Danas, uz pomoć xHTML-a i DOM-a ovo je pretvoreno u umetnost. U ove tagove spadaju pre svega div i span.

Pored pomenutih setova tagova, HTML ima ugrađene i tagove za stilizaciju. Na primer, ukoliko neki tekst stavimo u tag <h1>Moj tekst</h1> pretraživač će emitovati tekst u formatu naslova.

Konačno, već smo pominjali skript tagove. Kada se pojavi ovakav tag, pretraživač (ili server ukoliko je serverska skripta u pitanju) prekida da tretira taj deo dokumenta kao HTML i počinje sa izvršavanjem skripte koja se nalazi u skript tagovima. Nakon završetka skripte i zatvaranja tagova, pretraživač nastavlja da parsira HTML.

<p>Pozdrav</p> <script>alert("pozdrav");</script><p>Pozdrav</p>

Postoje neke vrste tagova koje ovde nismo klasifikovali. Na primer, anchor tag (hiperlink), koji je praktično najbitniji tag HTML-a. Ali, baš zbog toga, njemu ćemo kroz kurs posvetiti posebnu pažnju.


1. Svaki validan HTML dokument poseduje DOCTYPE direktivu2. Direktive pretraživaču počinju sa znakom !3. Skript tagovi počinju rečju script ili specijalnim karakterom nakon otvaranja taga

(<script, <%,<?)4. Transitional mod podrazumeva stilove u HTML tagovima, dok Strict mod

podrazumeva razdvojenu logiku i stilizaciju.5. Svaki HTML dokument mora imati koreni element6. Koreni element u HTML-u se naziva HTML7. Svaki HTML dokument poseduje head i body tagove8. Postoje ugrađeni stilizacioni tagovi u HTML-u (h,p,font...)

9. Prilikom parsiranja HTML dokumenta, pretraživač nakon nailaženja na Script tag, prekida parsiranje HTML-a, počinje sa parsiranjem (interpretacijom) skripte, a zatim nastavlja sa parsiranjem HTML-a.

Osnovni tagovi HTML-a2.4 Tagovi dokumenta (html, head, body...)2.5 Stilski tagovi (h, p...)2.6 Tagovi razdvajanja celina (span, div...)2.7 Skript tagovi

Tagovi dokumenta (html, head, body...)Jedinica: 4 od 17

Generalno, svi dokumenti koji se nalaze na strani, jesu elementi (objekti) tog dokumenta i spadaju u DOM model (Document Object Model). Ipak, neki od njih se nalaze na višem, a neki na nižem nivou. Mi ćemo ovaj put preskočiti objekat najvišeg nivoga (prozor u kome se emituje dokument) i zadržati se na objektu ispod njega, odnosno, samom dokumentu.

Već smo rekli da je osnovni (koreni) element html dokumenta sam html element i da se on deli na head i body elemente (tagove).

Head tag

Iako je kompletan html kod uvek dostupan krajnjem korisniku, pretraživač (parser) se brine za to da taj kod bude formatiran i adekvatno grafički prikazan. U tu »brigu« spada i to da head tag ne bude vidljiv na web strani (U semantičkom smislu. Ukoliko stavite nešto u head tag, biće ipak emitovano na strani). To je tag koji iako sadrži priličan broj informacija, skladišti pre svega neke podatke vezane za stranu (metapodatke). Kada pretraživač vidi head tag, on ga pročita, obradi njegov sadržaj i nastavi dalje sa čitanjem dokumenta. To ne znači da je ovaj tag nebitan. Štaviše, u njemu se nalaze mnoge stvari koje utiču na osobine strane.

Najbitnije stvari koje ćete naći u ovom tagu su meta tagovi i reference na eksterne fajlove. Takođe, tu se nalazi i podatak o naslovu strane. Pogledajmo jednu html strukturu (zbog preglednosti, nećemo unositi DOCTYPE deklaraciju u primere već ćemo počinjati od html elementa. Kada budete vežbali, unesite i DOCTYPE):

<html> <head> </head>





<body> </body></html>

Ova struktura je validna ali ništa ne prikazuje. Pokušajmo za početak da dodamo ovom dokumentu naslov

<html> <head> <title>Moj dokument</title> </head> <body> </body></html>

Ako sada ponovo učitamo dokument, videćemo da se u zaglavlju pretraživača nalazi i postavljeni naslov (title).

Title tag ima dvostruko značenje. Prvo (i manje bitno) je naravno za korisnika koji otvara stranu i može videti naslov te strane u pretraživaču (IE, firefox...). A drugo, za web crawler-e i način kako će oni parsirati našu stranu. U poslednje vreme, pozicioniranje strana na web pretraživačima (google, yahoo) je faktor bitan kao i sam sadžaj tih strana.

Zato je bitno da svaka strana u naslovu ima što detaljniji (a opet dovoljno kratak) opis svog sadržaja, kao i to da se naslovi strana ne ponavljaju. Dakle, ukoliko imamo sajt od tri strane koji se zove Prodavnica automobila Link. Ukoliko naslov na sve tri strane bude samo Prodavnica automobila Link, imaćemo ponavljanje naslova strane, što nije dobro. Pravilno naslovljavanje strana bilo bi:

1. Prodavnica automobila Link – Naslovna strana2. Prodavnica automobila Link – Najnoviji automobili3. Prodavnica automobila Link – Kontakt strana

Ovo je još bitnije kada se rezultati strane grade dinamički. U tom slučaju, moglo bi se desiti da je crawler npr. otvorio stranu gde se nalazi Renalut Clio, ali jedino što ima od podataka iz naslova je Title (koji je Prodavnica Automobila Link) i eventualno samu adresu strane, koja može biti: www.prodavnicaautomobilalink.com/index.php?proizvodid=35 iz

čega teško da može da izvuče nešto na osnovu čega će omogućiti da osoba koja traži Renault Clio uopšte sazna za naš sajt.

Pored pomenutog, ukoliko korisnik stavi našu stranicu u listu omiljenih (favorites) strana, ona će biti prezentovana baš kroz naslov strane.

Sledeći element head elementa su meta tagovi. Ovo su tagovi koji pružaju neke dodatne informacije o strani i (kao i sve ostalo u head tagu) takođe nisu vidljive korisniku. Iako se meta tag može podrazumevati pod jednom oblašću, postoje nekoliko vrsta meta tagova, koje čine određene logičke celine.

Meta Description tag

Ovo je tag koji daje kratak opis naše strane. Bitan je jer neki crawleri skladište ovu informaciju i uzimaju je u obzir prilikom pretrage.

Postoji teorija (prilično realna) da ne koriste svi crawleri ovaj tag kao relevantnu informaciju o nekoj strani, ali je ipak kreiranje opisa strane dobra praksa. Dodajmo našem primeru meta description tag i promenimo mu title:

<html> <head> <title>Prodavnica automobila - Renault Clio</title> <meta name="description" content="Renault Clio, prezentacija i prodaja vozila" /> </head> <body> </body></html>

Razlikujemo dva atributa name i content. Jasno je da je atribut name taj koji ovaj tag karakteriše kao description. U atributu content, nalazi se, naravno, sadržaj ovog meta taga.

Meta Keywords tag

Slično description tag-u, i meta keywords tag služi da bi pomogao crawleru da klasifikuje i pozicionira našu stranu u bazi web pretraživača. Takođe, ni ovaj tag više nije relevantan kod većine pretraživača, pa je njegova upotreba više stvar pedantnosti u kreiranju strane nego nešto što će dati vidljive rezultate.

Upotrebljava se tako što se u content atribut stavljaju reči i sinonimi koji karakterišu sadržaj strane, odvojeni zarezima.

Ako unesemo i ovaj tag, naš dokument sada izgleda ovako:

<html> <head> <title>Prodavnica automobila - Renault Clio</title> <meta name="description" content="Renault Clio, prezentacija i prodaja vozila" /> <meta name="keywords" content="renault,clio,reno,klio,automobil,prodaja" /> </head> <body> </body></html>

Oba navedena meta taga služe da bi se podigao rejting strane u rezultatima pretrage. Ukoliko bi želeli obrnuti rezultat, odnosno, da se strana uopšte ne pojavljuje u rezultatima, mogli bi da dodamo robots metatag:

<meta name="robots" content="noindex" />

Ukoliko crawler naiđe na ovaj tag na strani, jednostavno je ne obrađuje.

Sam pojam robots podrazumeva (u kontekstu web crawlera) dokumente koji ne treba da budu uzimani u obzir u pretrazi. Najčešće se na samom sajtu nalazi fajl pod nazivom robots.txt koji sadrži spisak dokumenata i foldera koji ne treba da budu crawl-ovani, ali nije nepravilno (iako nije baš praktično) ni korišćenje robots meta tagova unutar samih strana (kao u našem primeru).

Obzirom da želimo da promovišemo našu stranu, ovaj tag ćemo izostaviti iz primera.

Meta http-equiv tagovi

Svi web serveri, ma koliko se razlikovali u tehničkim detaljima, moraju da izvrše istu proceduru kako bi korisniku prezentovali neku web stranu. Ta procedura naziva se request/response. Kada korisnik otkuca adresu (ili aktivira hiperlink) u browseru (IE, Mozilla, Opera...), taj browser šalje zahtev (request) serveru. Server zatim pronađe dokument koji je tražen u zahtevu i emituje ga browseru u vidu html koda, a ovaj ga zatim prevede u grafički prepoznatljivu formu i emituje korisniku. Bitno je to da server odgovor emituje u obliku dve razdvojene celine. Jedna je http header koji sadrži informacije o

dokumentu (koji je mime tip, veličina dokumenta, način kodiranja...) a druga sam sadržaj dokumenta. Na sadržaj dokumenta možemo naravno da utičemo, jer je to upravo strana koju pravimo. Ali na zaglavlje (header) ne možemo uticati osim ako to eksplicitno ne naglasimo. To eksplicitno naglašavanje je upravo korišćenje http-equiv taga. Ova opcija ne koristi se često, ako se izuzme jedan tag, koji je deo skoro svake web strane:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Ovaj meta tag prepisuje Content-Type atribut zaglavlja i govori browseru da se radi o html dokumentu koji koristi unicode (utf-8) set karaktera. Ukoliko želimo da na stranu stavimo unicode karaktere (ili neki drugi set karaktera) i da oni budu vidljivi, ovaj tag je neophodan.

<html> <head> <title>Prodavnica automobila - Renault Clio</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="Renault Clio, prezentacija i prodaja vozila" /> <meta name="keywords" content="renault,clio,reno,klio,automobil,prodaja" /> </head> <body> </body></html>

Ponekad se http-equiv meta tag koristi i za onesposobljavanje sistema za keširanje strana unutar browsera. Ovo je bitno kada strane koje kreiramo imaju dinamički sadržaj (nisu svaki put iste). U tom slučaju, dobro je onesposobiti keširanje, da bi eventualne izmene strane bile svaki put adekvatno ažurirane kod korisnika. Ipak, browseri često ne interpretiraju adekvatno ovu poruku header-a. Evo najsigurnijih načina da isključimo keširanje neke strane:

<meta http-equiv="Pragma" content="no-cache" /><meta http-equiv ="Expires" content="-1" /><meta http-equiv="Cache-Control" content="no-store" />

Link tagovi

Link tag ukazuje na referencu na neki eksterni resurs. Obično je to fajl sa eksternim css stilovima. Npr. kada bi imali eksterni fajl sa stilovima, onda bi dodali i tag poput ovoga u naš dokument:

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

Link tag ne treba mešati sa hiperlinkovima, jer ovaj tag nije u stanju da stvori hiperlink na web strani. On se za razliku od hiperlinka, čak i ne vidi na strani, jer se pojavljuje samo u njenom head tagu.

Još jedna praktična primena link taga je za kreiranje favicon ikonica (ikonice sajta u adresbaru pretraživača). Kada bi želeli da sopstvenu ikonicu postavimo u adresbar, dodali bi sledeći tag u naš dokument:

<link rel="icon" type="image/ico" href="favicon.ico" />

Pošto se strana nije ograničena samo na jedan link tag, a različiti browseri različito interpretiraju tagove za postavljanje favicon ikonica, siguran način za postavljanje ove ikone na stranu je dodavanje još tagova ove vrste.

<link rel="icon" href="/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="favicon.ico" /><link rel="icon" type="image/ico" href="favicon.ico" />

Na isti način, moguće je dodati i više fajlova sa eksternim stilovima:

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

Script tag

U head element dokumenta možemo staviti i razne skript tagove (odnosno, same skripte) i najčešće su te skripte zapravo funkcije klijentskih skripti.

Kada browser počne da čita stranu, on parsira dokument red po red. Sve dok je sadržaj koji parsira html, on radi standardno, ali, ako na nekom mestu naiđe na sadržaj koji nije html nego skripta, onda tu skriptu preda interpreteru za koji je skripta pisana. Posto se head deo ne prikazuje, tu nema svrhe da stavimo nesto sto ce imati interakciju sa elementima na delu koji se prikazuje, zato tu stavljamo samo apstraktnu funkcionalnost koja će biti pozivana iz prikazivanog dela. Ali ovo već spada u kontekst JavaScripta i u ovom trenutku nije nam naročito važno.

Frameset

Već smo pomenuli da su frameset-ovi deplasirani u HTML-u. Osim što su robusni i »teški za kreiranje« ni sami crawleri ne rukuju njima dovoljno adekvatno.

Ideja je da ako bi želeli da razdvojimo stranu na nekoliko različitih celina, pri čemu pod različitim mislimo na potpuno različite strane, upotrebili bi framesetove. Jednom rečju, oni nam omogućavaju da sakupimo više dokumenata na jednu stranu i organizujemo ih po okvirima.

<head> <title>Google i Yahoo</title> </head> <frameset rows="*" cols="50%,50%" framespacing="2" frameborder="yes" border="2" bordercolor="#000000"> <frame src="http://www.yahoo.com" /> <frame src="http://www.google.com" /> </frameset> </html>

U primeru vidimo da se frameset nalazi ispod head taga (u ovom slučaju body tag i ne postoji, jer ćemo ceo sadržaj izvlačiti iz strana u okvirima).

Sam set smo formatirali sledećim atributima:

Rows i cols. Frameset se ponaša poput tabele. Sastoji se od polja, koja se dobijaju deobom seta na kolone i redove, pri čemu svako polje može da sadrži jedan dokument. Da bi naglasili setu koliko želimo kolona (ili redova) popunjavamo atribute cols i rows. U ovom slučaju, cols atribut ukazuje na dve kolone veličine po 50% od ukupne veličine dokumenta. Set prepoznaje da su u pitanju dve kolone, a zato što smo brojeve odvojili zarezom (30,30,30) to bi bilo prepoznato kao tri kolone. Znak * označava da će sadržaj (u ovom slučaju red) ispuniti ceo preostali deo seta (za tu kolonu). Mogli smo na primer napisati i rows="50%,*". Tada bi strana bila podeljena na četiri različite celine.

Pored ova dva atributa, primećujemo i atribute:

• framespacing (razmak između okvira),• frameborder (da li će okviri biti oivičeni),• border (debljinu ivice, ukoliko je ima) i• bordercolor (boju ivice ukoliko je ima).

Kada jednom formiramo set, potrebno je u njega ubaciti same okvire. U primeru imamo dva okvira (u koje smo stavili Google i Yahoo). Za svaki je unešen src atribut, koji predstavlja adresu strane koju će sadržati okvir. Na isti način, u okvire možemo postaviti i sopstvene dokumente.

Kada pretraživač (Google) vidi ovakav dokument, on neće pratraživati sadržaje njegovih poddokumenata, već samo opis seta.

Ovako izgleda rezultat koda iz primera:

Body tag

Ovaj veoma važan tag sadrži sve što će korisnik videti kada otvori dokument i sve što se bude događalo događaće se upravo u njemu.

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Moja strana</title> </head> <body bgcolor="#3399FF" link="#FFFF00" vlink="#CCCCCC" text="#FFFFFF" > Moja strana </body></html>

Ovo je dobar tranutak da obratimo malo više pažnje na standardne (i opcione) atribute. U primeru, body element sadrži četiri atributa. To su bgcolor, link, vlink i text. Ovi atributi, respektivno, označavaju: boju pozadine dokumenta, boju hiperlinkova dokumenta, boju posećenih linkova dokumenta i boju teksta dokumenta i opcioni su. Same boje predstavljene su heksadecimalnim vrednostima (na šta ukazuje oznaka # ispred boje), ali moguće ih je reprezentovati i klasičnim imenovanjem (crna-black, žuta-yellow, plava-blue itd). Praksa korišćenja heksadecimalnih oznaka boja dobra je zbog toga što većina programa ima ugrađen sistem za ovakvu reprezentaciju boja, što dosta olakšava praktičan rad (napravite boju u Photoshop-u, kopirate njen kod i prebacite u HTML kod). Više reči o ovim atributima biće u lekciji 5.12.

Vratimo se sada na trenutak u prethodne lekcije i setimo se HTML modova (Transitional, Strict i Frameset). Set atributa koji smo upravo napravili predstavlja prezentacioni set atributa jednog elementa (zato što se tiče izgleda, odnosno stila), a ako se prisetimo prethodnih lekcija, setićemo se da je razlika između Transitional i Strict HTML moda baš to što Strict mod podrazumeva da se prezentacioni atributi ne koriste.

To znači da ovaj set atributa nije po Strict standardu i da bi taj problem rešili, trebalo bi da ga kompletno preselimo u neku stilsku komponentu (što ćemo i uraditi u drugoj polovini kursa, kada budemo radili sa CSS stilovima).

Osim prezentacionog seta, elementi mogu imati i standardne i event atribute (atribute događaja), pri čemu ne mogu, naravno, sve vrste elemenata podržati sve standarde, niti sve događaje.

Standardni atributi su:

classDodeljuje klasu elementu. Kada postoji definisana klasa (u CSS-u), ova klasa može biti dodeljena elementu. Npr: <body class="mojStil" >

dirPravac kretanja teksta. S leva na desno ili obrnuto: <body dir="rtl" > U slučaju ovog primera tekst će se kretati s desna na levo i cela strana će imati takvu orjentaciju (i klizač će se nalaziti sa leve strane)

idOvo je verovatno jedan od najvažnijih atributa u HTML-u. Svaki element koji poseduje unikatan id moguće je brzo i jednostavno programabilno pronaći na strani.

langOdređuje koji će biti oficijelni jezik strane. Ovaj atribut možemo iskoristiti ako želimo da eksplicitno naglasimo da je naša strana pisana na određenom jeziku, kako bi bila lakše i efikasnije indeksirana od strane pretraživača. Npr. <body lang="sr">

styleOvo je takođe izuzetno važan atribut. Odnosno, ovo je i “više od atributa”. U vrednosti ovog atributa nalaze se određene (CSS) stilske komponente elementa. To znači da možemo stilizovati kompletan element kroz ovaj atribut, bez da pri tom uopšte koristimo eksterni resurs. Sa druge strane, ukoliko već koristimo eksterni stil, i upotrebimo ovaj atribut, sve stilske komponente koje ne postoje u eksternom stilu, biće dodate elementu, a one koje se preklapaju, biće pregažene od strane ovog atributa.

<body style="background-color:#3399FF;">

titleOvo je naslov elementa. Kada budemo prelazili mišem iznad elemenata koji imaju ovaj atribut, pojavljivaće se Tooltip sa njihovim imenima.

Događaji (Event)

Događaji, odnosno Event-i, jesu atributi elemenata koji im obezbeđuju funkcionalnost. Sve što smo do sada pomenuli, ticalo se toga kako će naš dokument izgledati, ali ne i toga šta će moći da radi.

Verovatno ste primetili da neki Web sajtovi imaju mogućnost menjanja sadržaja ili boje elementa kada pređete mišem preko njih ili da se pritiskom na neki element pojavljuje poruka na strani... Ovakve osobine dodeljuju se uz pomoć event atributa.

Svaki element poseduje set event osobina, koje predstavljaju događaje koje taj element može da registruje, na nama je samo da u vidu atributa stavimo taj događaj na slušanje i naravno, kažemo elementu koju aktivnost da izvrši kada do događaja dođe.

<body onclick="alert('Pozdrav!!!')" >

Atribut onclick iz primera registruje događaj klika mišem na element. Za rezultat događaja, stavili smo najobičniju JavaScript funkciju alert, koja emituje boks sa porukom na strani.

U trenucima kada smo još uvek u fazi dizajniranja strane, ili, ako znamo će dizajn biti naš jedini posao na sajtu (a posle preuzima programer), ne bi trebalo da se bavimo implementacijom samih skripti, pa bi naš kod zapravo izgledao ovako:

<body onclick="" >

Čime smo nagovestili da događaj postoji ali ga nismo obradili.

Možda u primeru JavaScript funkcije alert() ovo deluje banalno, ali ukoliko želimo da ugrađujemo neku ozbiljniju klijentsku funkcionalnost ovakav pristup vrlo je logičan.

Obzirom da smo se već latili implementacije klijentske skripte u HTML, pomenimo za kraj lekcije jedno pravilo na koje treba obratiti pažnju, a koje ćete tokom kursa verovatno čuti više puta.

Pogledajmo primer ponovo:

onclick="alert('Pozdrav!!!')"

U atributu se nalazi funkcija koja ispisuje poruku, koja se nalazi pod navodnicima za koje primećujemo da su jednostruki. To nije slučajno, već je deo pravila pisanja HTML koda. Nije bitno da li će navodnici biti jednostruki ili dvostruki sve do trenutka kada poželimo da stavimo još jedne navodnike u postojeće. U tom slučaju, spoljašnji navodnici, moraju se razlikovati od unutrašnjih.

Ispravno: Neispravno:

onclick="alert('Pozdrav!!!')" onclick='alert("Pozdrav!!! ")'

onclick='alert('Pozdrav!!!')' onclick="alert("Pozdrav!!! ")"


1. Osnovni elementi Web strane su head i body2. Head element je onaj koji je više okrenut Browseru i pretraživačima nego samom

korisniku3. Body element sadrži sve ono što koristnik treba da vidi4. Najbitniji head tagovi su meta, title i link5. Često se u head tagu nalaze funkcije klijentskih skripti6. Framesetovi omogućavaju smeštanja više dokumenata u jedan7. Većina HTML elemenata ima prezentacione, standardne i atribute događaja8. U atribute događaja smeštamo funkcionalnost elemenata9. ID atribut omogućava laku programabilnu identifikaciju elementa10. Class atribut dodeljuje eksterni stil elementu11. Style atribut omogućava direktnu stilizaciju elementa kroz atribut

Stilski tagovi (h, p...)Jedinica: 5 od 17

HTML, u osnovi, ima samo nekoliko tagova za stilizaciju i formatiranje sadržaja, tako da je pravljenje jednog nezahtevnog dokumenta prilično jednostavno. Da bismo to uradili, upoznaćemo se sa pomenutim tagovima.

p tag

Paragraph tag. Njegova uloga je da formatira sadržaj (tekst) u jednu logičku celinu i tu celinu razdvoji od ostalog teksta. Kada browser naiđe na ovaj tag, on će renderovati prazan prostor pre početka i nakon kraja ovog taga.

<p>Moj prvi red</p><p>Moj drugi red</p>

Rezultat prethodnog reda je sledeći:

Ponovimo da HTML ne registruje prazan prostor, što znači da ako bismo napisali sledeće:

Moj prvi redMoj drugi red

Rezultat u browseru bi bio:

Moj prvi red Moj drugi red

Jer HTML prazan prostor, ma koliki on bio, tretira samo kao jedan prazan karakter.

Paragraph tag je, u tom slučaju, veoma koristan, jer otklanja ovakve probleme. Sa druge strane, ukoliko već imamo stilsku koncepciju definisanu u eksternim stilovima, ovaj tag može i da zasmeta jer unosi ponekad neželjene prazne prostore između redova.

Na primer, šta ako bismo želeli da nam tekst bude podeljen u dva reda, ali da između tih redova ne bude toliki razmak, već samo minimalan sistemski razmak? Kao na sledećem primeru:

U tom slučaju, mogli bismo, ili izmeniti karakteristike p taga na globalnom nivou (kroz stilove) ili, umesto p taga, upotrebiti br tag za novi red:

Moj prvi red<br />Moj drugi red

Ovaj kod je manje semantički ispravan od prvog (koji podrazumeva da tekst bude u p tagovima), ali predstavlja brzo i jednostavno rešenje. Primećujemo da je tag samozatvarajući. Takođe, ovaj tag je mogao glasiti i <br> (što je samo razlika između HTML-a (<br>) i xHTMLa (<br/>)).

Osim semantičke ispravnosti, ovakav pristup (sa br tagom) onemogućava da intervenišemo stilski na svakom redu ponaosob. Šta ako poželimo da prvi red ima levo ravnanje na strani, a drugi red desno? Ukoliko bismo koristili pristup sa <br> tagom, ovo bi bilo neizvodljivo, jer ne bismo imali element kojim bismo mogli da upravljamo stilski. A u slučaju p tagova ovo bi rešili jednostavno, dodavanjem po jednog atributa svakom od p tagova.

<p align="right">Moj prvi red</p><p align="left">Moj drugi red</p>

Pomenuta problematika čini zapravo i osnovnu problematiku kompletnog HTML jezika, a to je: kako identifikovati, izolovati i stilizovati određene komponente dokumenta.

Obratite pažnju na to da smo u primeru sa atributom align izvršili formatiranje u samom tagu. Ako se prisetimo prethodnih lekcija, videćemo da to nije po pravilima Strict HTML moda, te bi, po Strict standardu, to najbolje bilo rešiti stilovima.

h tagovi

HTML podrazumeva šest tagova za naslove (Heading) u tekstu. Tekst stavljen u ove tagove biće emitovan zadebljano sa veličinom, u zavisnosti od broja pridruženog tagu. Brojevi mogu biti od 1 do 6, pri čemu je <h6> najmanja veličina fonta, a <h1> najveća.

Pogledajmo primer:

<h2>Pseudotropheus Demasoni</h2><p>Like most Mbuna, demasoni are vegetarians and should be fed foods high in spirulina and other vegetable content.</p>

Dva naučena taga su nam, očigledno, dovoljna da formatiramo neki sadržaj i napravimo prostu HTML stranu. Pokušajmo još malo da sredimo ovaj kratki tekst. Pretpostavimo da želimo neke reči u tekstu da naglasimo u odnosu na druge, najprostijim štamparskim pravilima - zadebljanim ili italik slovima.

Da bismo u HTML-u postigli efekat zadebljalih slova, možemo željeni tekst smestiti u <b> ili <strong> tag, dok se italik slova dobijaju stavljanjem u <em> ili <i> tagove. (Razlike između jednih i drugih tagova su u tome što se jedni odnose na pasuse (<strong>), a drugi na fontove). Znajući ovo, možemo prepraviti kod:

<h2>Pseudotropheus Demasoni</h2><p>Like most <b>Mbuna</b>, <i>demasoni</i> are vegetarians and should be fed foods high in <i>spirulina</i> and other vegetable content.</p>

Na isti način, možete stilizovati tekst uz pomoć ostalih stilskih tagova:

<s>tekst</s>

Tekst presečen linijom

<sub>tekst</sub>

Prefiks tekst

i slično:

• sup (natpisani tekst), • big (veća slova od osnovnog teksta), • small (manja slova od osnovnog teksta), • dfn (definicija), • code (kompjuterska slova), • cite (citat),

Pojam apsolutnog i relativnog u HTML-u

Primećujete da do sada nismo koristili konkretne vrednosti kada su u pitanju formati teksta. To je zato što browser ima dva načina da rukuje sa formatima. Jedan je koristeći konkretne vrednosti, a drugi, koristeći odnose sa referencama. Ova dva načina nazivaju se apsolutni i relativni.

Kada govorimo o apsolutom i relativnom u HTMLu, onda se to ne odnosi samo na tekst, već i na mnoštvo drugih elemenata. Na primer, adresa može biti apsolutna ili relativna, pozicija taga može biti apsolutna ili relativna, veličina teksta može biti apsolutna ili relativna...

Na primer, ako Vas osoba iz Vašeg grada pita za adresu, reći ćete ulicu i broj, jer je podrazumevano da se radi o zajedničkom gradu, što bi bio primer relativnog. Ako tu istu ulicu i broj pomenete nekome iz drugog grada, neće uspeti da Vas nađe, jer je adresa relativna u odnosu na Vaš grad. Ali, ukoliko mu kažete i grad, lako će Vas pronaći, ali samo ukoliko ste stanovnici iste države, jer je Vaša lokacija sada relativna u odnosu na državu. Da biste bili sigurni da će Vas bilo ko pronaći, mogli biste da kažete: Planeta Zemlja/Kontinent/Država/Grad/Ulica/Broj/Vaše ime i prezime. U ovom slučaju Vaša lokacija je unikatna na univerzalnom nivou i ne postoji šansa da Vas neko ne pronađe, osim ukoliko su Vam vrata zaključana.

Ako se primer prenese na Internet (koji bi u ovom slučaju bio svemir), adresa Vaše slike mogla bi biti - http://vašdomen/vašfolder/dokument

I naravno, ostaje problem „zaključanih vrata”.

Iako na prvi pogled apsolutno formatiranje zvuči kao pravi pristup, kroz praksu ćete videti da pravi pristup jednostavno ne postoji, već da su oba pristupa jednako dobra u zavisnosti od zahteva projekta.Ponovimo da se lokacija dokumenta na Web-u naziva URL (Uniform Resource Locator).

Ubacivanje slike u HTML

Prilikom ubacivanja slika u HTML kod, treba obratiti pažnju na to kolika želimo da bude ta slika na strani kao i koja treba da bude njena pozicija u odnosu na tekst. Što se tiče veličine, tu treba obratiti pažnju na okruženje u kome će se naša strana nalaziti. Web browseri (odnosno, Web stranice na njima) imaju jednu nezgodnu osobinu po kreatora tih stranica, a to je, da svaki korisnik ima pravo da menja veličinu tih strana menjanjem veličine prozora. Što znači da, kada kreiramo stranu, ne možemo sa sigurnošću znati kako će ta strana izgledati na korisnikovom računaru.

Zato se strane prave tako da zadovolje standarde većine, po pitanju rezolucije ekrana, a samim tim i veličine prozora browser-a.

Kada se formiraju veličine strana, iako njihova veličina može biti proizvoljna, obično se koriste logičke vrednosti, nasleđene od monitorskih rezolucija (640, 800,1024,1280,1600...) za širinu, dok se visina sajtova najčešće ne fiksira, već se ostavlja da se dinamički modifikuje prema sadržaju.

Danas je redak slučaj da neko koristi monitor čija je rezolucija manja od 1280 tačaka po širini, što znači da prozor pretraživača može da se poveća taman toliko da u njega stane jedna strana širine 1024 tačke, ali ne i mnogo veća. Mi u ovom trenutku nemamo fiksnu veličinu strane, ali želimo da stavimo na stranu sliku čiju veličinu želimo da podesimo tako da odgovara standardu.

Recimo da bi nam za ovu rezoluciju odgovarala slika širine 225 tačaka.

Veličinu slike uvek možemo da promenimo u HTML kodu, ali je ovo izuzetno loša praksa iz dva razloga. Prvo, zato što se svaka slika mora transportovati od servera do klijenta, što iziskuje neko vreme. Ukoliko stavimo veću sliku na stranu, strana će se duže učitavati i obrnuto. Kada ubacimo veliku sliku u HTML kod, a onda je u kodu smanjimo, bespotrebno bacamo vreme i protok, jer prenosimo veci materijal, da bismo ga, na kraju, opet smanjivali.

Drugi razlog je što svaki browser ima svoj algoritam za promenu veličine slika. To znači da će izgled naše slike zavisiti od toga kako će je browser reprodukovati. Evo kako izgledaju dve verzije iste slike smanjene na 50% u browseru i u photoshopu (levo browser, desno photoshop):

Zaključak je da slike pre smeštanja na stranu treba prethodno obraditi u nekom programu za procesiranje slika (npr. photoshop).

Pretpostavimo da sliku u naš dokument želimo da smestimo tako da ona bude na levoj strani ispod naslova, a tekst na desnoj. Za početak, ubacićemo samo sliku, bez formatiranja.

<img src="demasoni.jpg" /><h2>Pseudotropheus Demasoni</h2><p>Like most <b>Mbuna</b>, <i>demasoni</i> are vegetarians and should be fed foods high in <i>spirulina</i> and other vegetable content.</p>

Tag koji označava sliku je img. Nema sadržaj i zato je samozatvarajući (xHTML). Primećujemo za sada jedan atribut, src, koji očigledno označava naziv, odnosno, adresu slike.

Ovaj primer biće validan samo pod uslovom da se, u istom folderu gde se nalazi HTML dokument, nalazi i slika pod nazivom demasoni.jpg, zbog čega se adresa slike smatra relativnom u odnosu na dokument. A to znači da ni jedan drugi dokument, koji se nalazi na bilo kom drugom mestu, ne može da vidi sliku na navedenoj lokaciji (podsećamo da je jedina informacija koju imamo o slici njeno ime).

Sledeći primer rukuje sa apsolutnom putanjom i u njegovom slučaju, slika će biti vidljiva, gde god dokument bio smešten.

<img src="http://www.google.com/intl/en_ALL/images/logo.gif" /><h2>Pseudotropheus Demasoni</h2><p>Like most <b>Mbuna</b>, <i>demasoni</i> are vegetarians and should be fed foods high in <i>spirulina</i> and other vegetable content.</p>

Vratimo se na naš img tag. Za sada on poseduje samo src atribut, ali, da bismo dobili željeni rezultat (tekst se ravna sa desne strane slike) potrebno je da dodamo još jedan atribut, align.

Atribut align u img tagu označava način na koji će se tekst poravnavati sa slikom (odnosno gde će se slika nalaziti u odnosu na tekst). Pošto smo na početku rekli da želimo da tekst bude sa desne strane slike, možemo atributu align postaviti vrednost left.

<img src="demasoni.jpg" align="left" />

Osim vrednosti left, atribut align img taga prepoznaje i sledeće vrednosti:

right – desno ravnanje

top – gornje ravnanje sa visinom teksta ili druge slike u redu

textop – gornje ravnanje sa visinom teksta u redu

middle – vertikalno ravnanje sa donjom linijom aktuelnog reda teksta

absmiddle – vertikalno ravnanje sa sredinom aktuelnog reda teksta

bottom – vertikalno ravnanje sa donjom ivicom poslednjeg aktuelnog pasusa

absbottom – vertikalno ravnanje sa donjom ivicom pasusa ili najviše slike u pasusu

Poravnanje se odnosi samo na pasus, odnosno tag u kome se tekst nalazi, što znači, da bismo, ako hoćemo da konačno dobijemo željeni rezultat, trebalo da samo premestimo ceo tag u deo sa sadržajem (ili ispred njega).

<h2>Pseudotropheus Demasoni</h2><p><img src="demasoni.jpg" align="left"/>Like most <b>Mbuna</b>, <i>demasoni</i> are vegetarians and should be fed foods high in <i>spirulina</i> and other vegetable content.</p>

Poravnanje se odnosi samo na pasus, odnosno tag u kome se tekst nalazi, što znači da bismo, ako hoćemo da konačno dobijemo željeni rezultat, trebalo samo da premestimo ceo tag u deo sa sadržajem (ili ispred njega).

Ostaje da eventualno korigujemo horizontalni prazan prostor između slike i teksta atributom hspace koji kao vrednosti prima brojeve (piksele). Pored hspace, možemo koristiti i atribut vspace za povećanje vertikalnog praznog prostora (koji nam u ovom slučaju nije potreban).Slici u img tagu je moguće dodeliti i crni okvir, za šta služi atribut border, koji kao vrednost prima broj koji predstavlja debljinu okvira u pikselima. Ovaj atribut često se koristi da bi se sprečila pojava okvira oko slike kada se slika nađe u tagu za hiperlink (kada joj se okvir dodeljuje automatski).

Kada smo zadovoljni izgledom i položajem slike na strani, slici možemo dodati i alt atribut. Ovaj atribut je tekst koji će biti prikazan na mestu gde treba da se učita naša slika i koji će stajati tu do trenutka kada slika ne bude učitana. Osim vizuelno, ovaj atribut ima izuzetnu važnost za crawler-e jer se uzima u obzir prilikom pretrage.

Hiperlinkovi

Rekli smo da su hiperlinkovi jedna od najvažnijih stvari HTMLu. Generalno, to i jeste tačno, jer bez ovog vida »funkcionalnosti« ne bi otišli nigde sa jedne strane. Paradoks bi bio objašnjavati čemu služe, obzirom da ste ih, da biste otvorili ovu lekciju, koristili više puta. Recimo samo da je to tag koji usmerava korisnika ka nekom resursu na Web-u. Znamo da se hiperlinkovi obično pojavljuju u plavoj boji i podvučeni, da bismo, kada jednom posetimo adresu ispod linka, oni postali ljubičasti. Takođe znamo, da pokazivač menja sličicu iz strelice u ruku kada se pređe mišem preko linka. Ove osobine su

standardne, ali nisu fiksne, pa se hiperlink može prikazati i u potpuno drugačijim oblicima (uz pomoć css stilova).

Da bismo napravili jedan hiperlink, potreban nam je takozvani anchor tag. Ovaj tag obeležava se skraćeno, slovom a.

Najvažniji atribut a taga je href, koji označava URL, na koji hiperlink ukazuje. Ova dva elementa, nisu nam ipak dovoljna da formiramo jedan hiperlink. Hiperlink je tag koji ima i sadržaj, u koji smeštamo ono što želimo da reprezentuje napravljeni hiperlink.

<a href="http://www.google.com" >Link na google</a>

Ovaj kod će emitovati plavo obojeni, podvučeni tekst, čiji sadržaj je Link na google, a čije pritiskanje levim tasterom miša će stranu prusmeriti na google. U trenutku kada pređemo mišem iznad ovog teksta, u donjem levom uglu browser-a, ispisaće se lokacija hiperlinka nad kojim smo.

Otvaranje novog dokumenta, pod ovim uslovima, odigraće se u aktuelnom prozoru,što znači da nam dotadašnji sadržaj neće biti dostupan, osim ukoliko se vratimo nazad na dokument. Međutim, ponekad nam to ne odgovara, jer želimo da se dokument otvori u posebnoj strani, a da nam i stara strana ostane otvorena. U tu svrhu, koristimo atribut target, čije su vrednosti:

• _blank – otvara stranu u novom prozoru• _self – otvara stranu u aktuelnom prozoru• _parent – ima smisla samo u framesetovima. Učitava stranu u roditeljski prozor

frameseta• _top – ima smisla samo u framesetovima. Učitava stranu u »najstariji« prozor

frameseta (odnosno, u aktuelni prozor)

Osim na drugi dokument, hiperlink može ukazivati na neki deo dokumenta ili mail. Da bismo povezali hiperlink sa delom dokumenta, potrebna su nam, zapravo, dva a taga - jedan koji će ukazivati na željeni deo:

<a href="#mojPasus" >Hiperlink na moj pasus</a>

i drugi, koji će taj, željeni deo, identifikovati (named anchor).

<a name="mojPasus">Ovo je sadržaj mog pasusa</a>

Ako ova dva taga postavimo na stranu, klik mišem na gornji tag, aktiviraće deo strane u kome se nalazi donji tag. Ovo možete isprobati tako što ćete između oba taga postaviti tagove <br/> sve dok razmak između tagova bude dovoljno veliki da oba taga ne stanu na jednu stranu.

Primećujemo da prvi tag ima u vrednosti atributa znak #. On ukazuje na imenovane anchor tagove na aktuelnoj strani.

Slanje maila, tačnije, otvaranje podrazumevane aplikacije operativnog sistema za rukovanje mailom, možete definisati tako što ćete u href atribut postaviti kao vrednost ključnu reč mailto: a zatim i ciljnu adresu.

<a href="mailto:[email protected]" >Poslati mail</a>

Evo konačne verzije naše strane, sa jednim hiperlinkom:

<h2>Pseudotropheus Demasoni</h2><p><img src="demasoni.jpg" hspace="10" align="left"/>Like most <a href="http://en.wikipedia.org/wiki/Mbuna" >Mbuna</a>, <i>demasoni</i> are vegetarians and should be fed foods high in <i>spirulina</i> and other vegetable content.</p>

Liste

Podatke u HTML-u možete formatirati i u vidu liste. Ovaj pristup se često koristi ukoliko nameravate da koristite klijentsku dinamiku (padajući meniji i sl.), jer liste imaju formu koja strukturalno odgovara višekategorijskim menijima i stablima podataka.

U listama razlikujemo tri podkategorije: uređenu, neuređenu i listu definicija. Sve tri liste imaju istu koncepciju izgradnje. Jedan tag predstavlja listu, dok njegovi podelementi predstavljaju elemente te liste.

Naziv korenog elementa liste označava tip te liste (ul, ol ili dl), dok se podelementi (u slučajevima uređene i neuređene liste), označavaju sa li.

Neuređena lista nema numeraciju elemenata liste, već ispred njih postavlja tačkice. Oznaka joj je ul.

<ul> <li>programiranje</li> <li>Web dizajn</li> <li>menadzment</li></ul>

Izlaz je:

Uređena lista postavlja numeraciju na članove liste i oznaka joj je ol.

<ol> <li>programiranje</li> <li>Web dizajn</li> <li>menadzment</li></ol>

Izlaz je:

Lista definicija ima malo drugačiju koncepciju. Prvo se mora definisati lista (dl tag), zatim, postavlja se kategorija (ili kategorije) (dt), a zatim, nakon svake kategorije ređaju se elementi članovi liste, koji važe za tu kategoriju (dd).

<dl> <dt>programiranje</dt> <dd>HTML</dd> <dd>css</dd> <dd>javascriot</dd> <dt>Web dizajn</dt> <dd>kompozer</dd> <dd>dreamweaver</dd></dl>

Izlaz je:


1. p tag razdvaja tekst u logičku celinu2. h tag formatira tekst u formi naslova3. img tag predstavlja sliku4. src atribut sadrži url slike img taga5. a tag je tag koji predstavlja hiperlink6. href je atribut a taga koji predstavlja ciljni url hiperlinka

Tagovi razdvajanja celina (span, div...)Jedinica: 6 od 17

Tagovi koje smo obrađivali u prethodnoj lekciji tiču se formatiranja i razdvajanja delova HTML-a. Dakle, mi već znamo kako da neki tekstualni sadržaj podelimo na nekoliko delova u HTML-u. Problem je samo u tome što, kada razdvajamo HTML na neki od načina naučenih u prethodnoj lekciji, mi unapred te delove stilski formatiramo. Ali, ukoliko želimo da naznačimo da neka logička podela postoji, ali da pri tom, ne želimo da je stilski identifikujemo, ovi tagovi su neupotrebljivi (osim ukoliko ne intervenišemo na samim njihovim stilovima, što bi bilo nepraktično). Umesto toga, koristićemo tagove div i span.

Span tag je najprostiji vid logičkog razdvajanja sadržaja i prilikom upotrebe nema uticaja na sadržaj sve dok to eksplicitno ne naglasimo stilovima.

Pogledajmo primer:

Like most Mbuna, <span>demasoni are vegetarians</span> and should be fed foods high in spirulina and other vegetable content.

Rezultat ovog primera na strani je:

što znači da se span uopšte ne primećuje na strani (sve dok korisnik ne bi pregledao izvorni HTML kod). Ipak, kada bi u taj span tag uneli sledeću izmenu:

Like most Mbuna, <span style="border: 1px solid #000000; padding:3px; background-color:#FF0000; color: #FFFFFF;">demasoni are vegetarians</span> and should be fed foods high in spirulina and other vegetable content.

rezultat bi bio:

Jasno nam je iz primera da smo span tag iskoristili da izolujemo celinu na kojoj želimo da primenimo određene stilske korekcije. Što se samog style atributa tiče, nećemo sada analizirati sadržaj njegove vrednosti, jer su u pitanju CSS stilovi, koje ćemo detaljno obrađivati tokom drugog dela ovog kursa.

Div tag je prilično blizak span tagu po karakteristikama, osim što, za razliku od span taga, koji nema nikakav uticaj na sadržaj, div tag izvršava određena formatiranja na njemu. Kada sadržaj stavimo u div tag, on biva tretiran kao zaseban deo strane, i ponaša se poput p taga.

Tako bismo, kada bismo u prethodni primer, umesto span taga, ubacili div tag:

Like most Mbuna, <div>demasoni are vegetarians</div> and should be fed foods high in spirulina and other vegetable content.

kao rezultat imali sledeću stranu:

Ovakva “materijalna” osobina div taga čini da bude naročito važan u kreiranju dinamičkih HTML dokumenata.

Već smo videli da div i span imaju style atribut (kao i svi ostali HTML elementi), ali osim njega, postoji još dva atributa koji poseduju HTML elementi, a koji su bitni za dinamiku HTML strana, a naročito baš za div i span tagove. To su:

• id - Ovaj atribut je ono čime ćemo nalaziti ove elemente kada im budemo pristupali u toku izvršavanja strane na klijentu.

• class – Omogućava dodeljivanja CSS klase sadržaju elementa

Tabele

Tabele čine posebnu dimenziju u kontekstu razdvajanja sadržaja u HTML dokumentu. Poslednjih godina, razvojem CSS-a došlo je do težnje da se upotreba tabela deplasira u korist upotrebe div tagova, zbog čega su tabele sve ređi formateri sadržaja na novijim Web sajtovima. Ipak, postoje stvari koje je mnogo jednostavnije ostvariti tabelama, pa one još uvek uspevaju da odole udarima modernog CSS-div HTML formatiranja.

Rukovanje tabelama iz koda je malo komplikovanije od onoga što smo do sada radili. Iz prostog razloga, jer tabele same po sebi imaju komplikovaniju strukturu od običnog teksta. Ukoliko se nikada do sada niste susreli sa tabelama (što je skoro nemoguće), podsetićemo da su tabele strukture podataka koje se dele na kolone i redove (vrste). Pri čemu jedan od ova dva člana identifikuje tip podatka, dok drugi skladišti sam podatak. Npr:

Pokušajmo da napravimo baš ovakvu tabelu. Da bismo to uradili, treba da znamo da se svaka tabela u HTML-u sastoji od tri vrste elemenata:

• table element – koreni element tabele. Ovo je tag koji sadrži kompletnu logiku tabele.

• tr element – table row. Svaka tabela sastoji se od redova, a svaki element poseduje sadržaje za svaku svoju kolonu.

• td element – table data. Table data je element u kome se nalazi sadržaj polja.

Napravimo prvo table tag. Ovo je koreni element tabele i postoji uvek samo jedan po tabeli (osim ako ne želimo da ugnjezdimo tabelu u drugu tabelu). U njemu možemo postavljati globalne parametre za kompletnu tabelu, poput proreda između polja, debljine i boje okvira tabele i njenih polja, prostora unutar polja...

Tabela sa slike ima sledeće karakteristike:

<table width="660" height="130" border="1" cellpadding="5" cellspacing="1"></table>

što znači da joj je širina (width) 660 tačaka, visina (height) 130 tačaka, debljina okvira (border) 1 tačka, prostor između polja (cellspacing) 1 tačka i prazan prostor u poljima (cellpading) 5 tačaka.

Sada možemo ubaciti i redove u tabelu. Obzirom da već znamo da ova tabela ima ukupno četiri reda (tri sa podacima i jedan sa nazivima kolona), možemo unapred ubaciti sve redove.

<table width="660" height="130" border="1" cellpadding="5" cellspacing="1"> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr></table>

Konačno, možemo ubaciti i td tagove, sa konkretnim podacima:

<table width="660" height="130" border="1" cellpadding="5" cellspacing="1"> <tr> <td width="200" height="23" bgcolor="#CCCCCC">Ime</td> <td width="190" bgcolor="#CCCCCC">Prezime</td> <td width="250" bgcolor="#CCCCCC">Adresa</td> </tr> <tr> <td height="30" valign="top">Petar</td> <td valign="top">Petrović</td> <td valign="top">Jurija Gagarina 1</td> </tr> <tr> <td height="30" valign="top">Jovan</td> <td valign="top">Jovanović</td> <td valign="top">Jurija Gagarina 2</td> </tr> <tr> <td height="30" valign="top">Nikola</td> <td valign="top">Nikolić</td> <td valign="top">Jurija Gagarina 3</td> </tr></table>

svaki td tag predstavlja jednu ćeliju pa se i svaki atribut koji se nalazi u tom tagu odnosi na tu ćeliju. Sami atributi su nam većinom poznati od ranije, a neke ćemo posebno obraditi i u lekciji 12 (stilski atributi HTML elemenata):

• width – širina polja• height – visina polja• valign – vertikalno ravnanje teksta unutar polja (top, middle i bottom)• bgcolor – boja pozadine polja

Verovatno primećujete da se obrazac reda ponavlja (nakon što napravimo prvi red koji identifikuje kolone). To omogućava da se ovakva tabela jednostavno kreira na osnovu dinamičkih podataka iz skripte.

Format tabele zavisi u mnogome i od samog njenog sadržaja, pa se može desiti da ponekad kranji rezultat ne bude onakav kakvav bismo, možda, želeli.

Na primer, šta ako bismo u sadašnju tabelu ubacili sliku iz prethodne lekcije:

<table width="660" height="130" border="1" cellpadding="5" cellspacing="1"> <tr> <td width="200" height="23" bgcolor="#CCCCCC">Ime</td> <td width="190" bgcolor="#CCCCCC">Prezime</td> <td width="250" bgcolor="#CCCCCC">Adresa</td> </tr> <tr> <td height="30" valign="top"><img src="demasoni.jpg" <td valign="top">Petrović</td> <td valign="top">Jurija Gagarina 1</td> </tr> <tr> <td height="30" valign="top">Jovan</td> <td valign="top">Jovanović</td> <td valign="top">Jurija Gagarina 2</td> </tr> <tr> <td height="30" valign="top">Nikola</td> <td valign="top">Nikolić</td> <td valign="top">Jurija Gagarina 3</td> </tr></table>

rezultat bi bio deformacija tabele u odnosu na ubačenu sliku.

Image map – mape slika

Osim sadržaja na strani, možemo napraviti logička razdvajanja na slikama, što omogućava aktivaciju određenog hiperlinka klikom na određeni region slike. Na primer, ukoliko imamo sledeći tag na strani:

<img src="demasoni1.jpg" />

Koji ima rezultat:

Recimo da želimo da imamo link za opis glave i repnog peraja ribe sa slike.

Potrebno je da uradimo sledeće modifikacije u kodu:

Pre svega, trebalo bi u img tagu da naznačimo da želimo da koristimo mapu slike, atributom usemap. Ovaj atribut prima kao vrednost naziv mape, koji za ovu priliku možemo nazvati samo mapa. Ispred naziva, treba da stoji i oznaka # kako bi se znalo da se radi o linku na aktuelnom dokumentu.

<img src="demasoni1.jpg" border="0" usemap="#mapa" />

Kada jednom postavimo atribut usemap, pretraživač (browser) celu sliku tretira kao hiperlink i automatski joj postavlja border. Zato atributu border odmah dodeljujemo vrednost 0.

Ovim smo dodelili mapu slici. Sada još treba da napravimo mapu.

Za kreiranje mape, koristimo tag map sa atributom name (koji se mora poklopiti sa usemap atributom img taga). Ovaj tag može biti napravljen bilo gde u kodu i sadrži podelemente od kojih svaki predstavlja po jednu zonu slike koja će biti tretirana kao hiperlink. Ovi podelementi sadrže poznate atribute href (url hiperlinka), alt (opis regiona) i target (ciljni prozor hiperlinka).

Pored toga, sadrže i nestandardne atribute shape i coords, koji označavaju oblik koji će imati zona hiperlinka i koordinate tog oblika.

Dodavanje ovog koda na postojeći, napraviće, ukoliko koristite našu sliku, pravougaonu zonu hiperlinka iznad glave ribe:

<map name="mapa"><area shape="rect" coords="260,100,330,200" href="#" target="_self" alt="Pseudotrpheus Demasoni Head"></map>

Da bismo naznačili da će hiperlink biti u pravougaonoj zoni, koristimo vrednost rect atributa shape (postoji još i circle i poly). U tom slučaju, browser očekuje u atributu coords četiri vrednosti: X i Y gornje leve tačke pravougaonika i X i Y donje desne tačke pravougaonika respektivno.

Da smo umesto rect vrednosti uneli circle, browser bi očekivao tri vrednosti. X i Y centra kruga i poluprečnik kruga.

Vrednost poly očekuje koordinate svake tačke poligona.

Dodajmo sada još jedan hiperlink poligonalnog oblika, koji bi predstavljao rep.

1. <area shape="poly" coords="81,90,131,130,91,190" href="http://www.cichlid-forum.com/articles/p_demasoni.php" target="_self" alt="Pseudotropheus Demasoni tail fin">

Konačni kod bi trebalo da izgleda ovako:

<img src="demasoni1.jpg" border="0" usemap="#mapa" /><map name="mapa"><area shape="rect" coords="260,100,330,200" href="http://animal-world.com/encyclo/fresh/cichlid/DemansonsCichlid.php" target="_self" alt="Pseudotrpheus Demasoni head"><area shape="poly" coords="81,90,131,130,91,190" href="http://www.cichlid-forum.com/articles/p_demasoni.php" target="_self" alt="Pseudotropheus Demasoni tail fin"></map>

a rezultat ovako:

Fieldset

Različite logičke celine, moguće je razdvojiti i uz pomoć fieldset elementa. Ovaj element kompletan svoj sadržaj smešta u naslovljeni okvir. Da bi okvir imao i naslov, potrebno je u fieldset element dodati podelement pod nazivom legend.

<fieldset> <legend>Opsti podaci</legend> Ime: Petar<br /> Prezime: Petrovic</fieldset>

Iframe

U početku smo govorili o okvirima (framesets). Iframe je nešto vrlo slično. Ovo je tag koji, kao sadržaj, može prihvatiti HTML dokument.

Za razliku od frameset-ova, rukovanje iframe-ovima je znatno jednostavnije, jer ne zahteva posebno pripremljen dokument, već jednostavno, bilo gde na strani možete postaviti iframe tag i u njega učitati bilo koji eksterni dokument, kroz src atribut.

<iframe src="http://www.google.com"></iframe>

Ipak, iframe-ovi umeju da naprave probleme kada dođe do rukovanja samim sadržajem (učitanim stranama), jer treba ručno (kroz skriptu) rukovati veličinom učitanog dokumenta, prosleđivati im parametre i slično.


1. Osnovni tagovi za razdvajanje su div i span2. Span tag ne utiče na sadržaj3. Div tag utiče na sadržaj tako što sve što je u tagu stavlja u fizički zasebnu celinu4. Tabele se sastoje od tr elemenat (redovi) i td elemenata (polja)5. Moguće je formatirati elemente tabele na nivou tabele, reda ili pojedinačnog polja6. Moguće je razdvojiti više regiona sa hiperlinkovima na jednoj slici

Skript tagoviJedinica: 7 od 17

Osim HTML-a, u Web stranu je moguće ugraditi i skripte. Ove skripte funkcionišu tako što se implementiraju u HTML kod i parser, kada na njih naiđe, prekida da tretira taj deo kao HTML već ga tretira kao skriptu.

Da bi to funkcionisalo, potrebno je da znamo nekoliko osnovnih stvari o postavljanju skripti u HTML kod i ponešto o samim skriptama.

Skripte su elementi koda pisani u nekom programskom jeziku čija je svrha proširenje funkcionalnosti neke aplikacije. Obično se za skript jezike uzimaju jednostavni jezici, proste sintakse i male zahtevnosti, dok je osnovna aplikacija pisana u nekim nižim programskim jezikom (C, C++, asembler...).

Obzirom da su Web server i Web klijent takođe aplikacije, one takođe imaju skript jezike kojima im se može povećati funkcionalnost. U slučaju Web servera, na sam jezik utiče više faktora, ali obično se dele na dve logičke grupacije. Microsoftov Web server IIS najbolje funkcioniše sa Microsoftovim ASP.NET jezicima (Visual Basic i C#), dok Linux Web serveri (Apache), rade najbolje sa jezicima PHP, Perl i Javom.

Kada su u pitanju pretraživači, oni uglavnom rade sa istim skript jezikom koji se popularno zove JavaScript. Kažemo popularno, zato što svaki pretraživač koristi svoju verziju ovog jezika koja se malo drugačije zove a identično (ili skoro identično) funkcioniše. Ukratko, originalni jezik zove se ECMA Script i koristi ga browser Opera. Mozzila Firefox i Google Chrome koriste verziju pod nazivom JavaScript, dok se Microsoft IE verzija istog jezika naziva JScript.

Implementacija skripte

Da bismo implementirali skriptu u našu stranu, potrebno je da znamo da li je skripta serverska ili klijentska. Razlika između ove dve skripte je, naravno, u tome što se jedna izvršava na serveru, a druga na klijentu. A to u praksi znači da će serverska skripta, kada završi sa svojim izvršavanjem i emituje stranu klijentu, biti od trenutka emitovanja nedostupna, što je upravo trenutak kada klijentska skripta postaje dostupna.

Da bi browser prepoznao početak (i kraj) skripte, potrebno je upotrebiti script tag.

Ukoliko tag bude samo <script>, skripta će biti tretirana kao klijentska (JavaScript), pa ukoliko želimo da izvršimo neku drugu skriptu, moramo to eksplicitno i naglasiti serveru/klijentu.

Evo primera taga za serversku php skriptu:

<script language="php"></script>

Kada server naiđe na ovaj tag njegov, sadržaj tretira kao PHP. Osim ovoga, Web server će prepoznati i još dve vrste PHP taga: <?php ?> i skraćeni <? ?>. Moramo paziti da, ukoliko strana nema ekstenziju .php, PHP skripta neće biti interpretirana, već emitovana korisniku u izvornom obliku, što može da bude vrlo opasno, jer serverska programabilnost obično sadrži i poverljive podatke (šifre za bazu podataka i sl.).

Skripte sa kojima ćemo se češće sretati u izgradnji HTML dokumenata su klijentske skripte. Već smo rekli da će ovaj tip skripte biti prepoznat, ukoliko skriptu stavimo u script tag bez atributa. Ipak, tip skripte može biti i eksplicitno naglašen. Npr:

<script type="text/javascript" language="javascript"></script>

U početku, prilikom izgradnje jednostavnih HTML dokumenata, najčešće ćete preuzimati gotove klijentske skripte. Ove skripte su predstavljene ili u vidu funkcija koje se direktno implementiraju u stranu, ili u vidu eksternih fajlova koji se na strani prijavljuju kao reference.

Uz svaku ozbiljniju klijentsku skriptu dobićete i uputstvo za njenu implementaciju.

Pokušajmo da implementiramo jednu prostu skriptu u našu stranu:

<head></head><body> <p> <img src="demasoni.jpg" hspace="10" align="left"/>Like most <a href="http://en.wikipedia.org/wiki/Mbuna" >Mbuna</a>, <i>demasoni</i> are vegetarians and should be fed foods high in <i>spirulina</i> and other vegetable content. </p></body>

Kada implementirate klijentsku skriptu, uvek imajte na umu da je body deo strane koji se iscrtava pred korisnikom i da, ako imate pripremljenu neku klijentsku funkcionalnost, ona treba da se nalazi u head delu strane. Za ovaj primer, napravićemo banalnu JavaScript funkciju koja prikazuje boks sa porukom:

function prikazatiPoruku() { alert("Pozdrav!"); }

Skriptu ćemo postaviti u script tag, koji ćemo smestiti u head tag. I eventualnu aktivaciju skripte stavićemo kao vrednost onclick atributa img elementa u sadržaju.

<head> <script type="text/javascript" language="javascript"> function prikazatiPoruku() { alert("Pozdrav!"); } </script></head><body> <p> <img onclick="prikazatiPoruku()" src="demasoni.jpg" hspace="10" align="left"/>Like most <a href="http://en.wikipedia.org/wiki/Mbuna" >Mbuna</a>, <i>demasoni</i> are vegetarians and should be fed foods high in <i>spirulina</i> and other vegetable content. </p></body>

Ovim je klijentska skripta uspešno implementirana na stranu i klik mišem na sliku izazvaće poruku u prozoru.

Kada se rukuje sa serverskim skriptama, ukoliko naš server podržava skript jezik koji koristimo, naša strana će biti emitovana adekvatno bez obzira na klijenta, ali, ukoliko radimo sa klijentskim skriptama, može da se desi da skripta ne bude u mogućnosti da bude izvršena. Na primer, korisnik je isključio JavaScript opciju u svom pretraživaču.

Na ovakvu situaciju uvek treba biti spreman kroz jednu od sledećih strategija:

• Onemogućavanje prikazivanja dokumenta u slučaju nemogućnosti izvršavanja skripte.

• Alternativni sadržaj, za slučaj nemogućnosti izvršavanja skripte.

Prvo rešenje nećemo obrađivati, jer postoji mnogo načina na koje ono može biti implementirano, dok se za drugo rešenje obično koriste noscript tagovi. Ovi tagovi emituju alternativni sadržaj, koji će biti prikazan isključivo ukoliko je aktivacija skripte onemogućena (pod tim se ne misli da je skripta sintaksno neispravna, već da pretraživač jednostavno nema mogućnost aktivacije skripte).

Pogledajmo naš kod sa noscript tagovima:

<head> <script type="text/javascript" language="javascript"> function prikazatiPoruku() { alert("Pozdrav!"); } </script></head><body> <p> <noscript> MOLIMO AKTIVIRAJTE JAVASCRIPT </noscript> <img onclick="prikazatiPoruku()" src="demasoni.jpg" hspace="10" align="left"/>Like most <a href="http://en.wikipedia.org/wiki/Mbuna" >Mbuna</a>, <i>demasoni</i> are vegetarians and should be fed foods high in <i>spirulina</i> and other vegetable content. </p></body>

U ovom slučaju, korisniku će biti emitovana poruka MOLIMO AKTIVIRAJTE JAVASCRIPT, pod uslovom da je JavaScript onemogućen na nivou pretraživača.

Postoji mogućnost da pretraživač uopšte i ne prepozna sadržaj skripte i da je kompletno emituje na strani u tekstualnom obliku (samo kada su u pitanju stariji pretraživači), pa se zbog ovoga obično u sadržaj skripte smeštaju i oznake za HTML komentar . Tako će, ukoliko skripta ne bude registrovana od strane pretraživača, biti zaštićena od

emitovanja korisniku. Sa druge strane, ukoliko pretraživač prepozna skriptu, ignorisaće komentar i izvršiti skriptu.

Poštujući ova pravila, naša skripta bi izgledala ovako:

<head> <script type="text/javascript" language="javascript">  </script></head><body> <p> <noscript> MOLIMO AKTIVIRAJTE JAVASCRIPT </noscript> <img onclick="prikazatiPoruku()" src="demasoni.jpg" hspace="10" align="left"/>Like most <a href="http://en.wikipedia.org/wiki/Mbuna" >Mbuna</a>, <i>demasoni</i> are vegetarians and should be fed foods high in <i>spirulina</i> and other vegetable content. </p></body>

Iako je malopređašnji primer validan po pitanju prikaza i funkcionalnosti strane, ova tehnologija smatra se prevaziđenom zato što praktično više ne postoje browseri koji nisu u stanju da prepoznaju JavaScript.

Pošto proučavamo xHTML jezik (i radimo u njemu), dozvoljeno nam je da koristimo xml notaciju. Što znači da možemo da, umesto standardnih oznaka za HTML komentar, upotrebimo <![CDATA[]]> tag (character data) i u njega smestimo kompletnu skriptu.

<![CDATA[ function prikazatiPoruku() { alert("Pozdrav!"); }]]>

U ovom slučaju, validacija će biti izvršena ali se skripta neće izvršiti, jer nije u stanju da prepozna CDATA tag, što je rešivo postavljanjem oznaka za JavaScript komentar.

//<![CDATA[ function prikazatiPoruku() { alert("Pozdrav!"); }//]]>

Postoji još jedan način da se JavaScript ignoriše pri validaciji strane. A to je da se cela skripta smesti u eksterni fajl. U tom slučaju, tag skripte bi bio:

<script src="mojaSkripta.js" type="text/javascript" language="javascript"></script>

U ovom slučaju, validator bi ignorisao telo skripte, dok bi se sama skripta nalazila u fajlu mojaSkripta.js, van aktuelnog dokumenta. Ovo je ujedno i najbolja praksa za implementaciju klijentskih skripti.


1. Skripte u HTML strani mogu biti klijentske ili serverske2. Klijentske skripte su JavaScript, ECMA Script, JScript...3. Serverske skripte su PHP, ASP (C#, VB), JSP (java)4. Tagovi za klijentsku skriptu označavaju se rečju script5. Tagovi za serverske skripte označavaju se u zavisnosti od tehnologije:

<?php ?>, <? ?>, <% %>, <@ @>6. Alternativni sadržaj, koji se emituje ukoliko je klijentski skript onemogućen

aktivira se tagom noscript7. Dobra je praksa sadržaj klijentskog skript taga obmotati u HTML komentar8. HTML komentar je sve što se nalazi u okviru taga 9. Klijentsku skriptu je moguće smestiti i u zaseban, eksterni fajl.

HTML kontroleBroj otvaranja:7 | Vredi kredita: 8003.8 Forme3.9 Kontrole za unos (text field, text area)3.10 Kontrole za odabir (select, checkbox, radio...)3.11 File upload kontrola

FormeJedinica: 8 od 17

Do sada smo obradili sve važnije HTML tagove. Ali, verovatno ste primetili da u našim primerima korisnik ni u jednom trenutku ne može da unese neki podatak na stranu.

Danas je Web kompleksan i moćan alat i jasno nam je da je poznavanje HTML jezika samo grebanje po površini, odnosno, osnova na kojoj bi trebalo da počiva naše dalje proučavanje rukovanja Web-om, pri čemu je krajnji cilj, stvaranje dinamičkih aplikacija visokih

performansi. Da bismo stvorili ovakvu aplikaciju, u najvećem broju slučajeva biće nam potreban neki ulaz, a kada se u HTML-u kaže ulaz, misli se pre svega na HTML forme.

HTML forme su, dakle, tačka u kojoj će se figurativno sresti i razmenjivati podatke klijentski i serverski kod.

Form tag

Osnova Web formi je form tag. Ovo nije ništa drugo, do običan HTML element, sa svojstvenim atributima i podelementima. Tako da sve što budemo želeli da bude prosleđeno serveru kroz tu formu, stavićemo u njen sadržaj. Svaka forma (form tag) prepoznaje pojavu koja se naziva submit. Ova pojava/događaj, dovodi do aktivacije forme i prosleđivanja njenih vrednosti serveru.

Osim submit događaja, forma ima još neke osobenosti. Ona mora znati gde se nalazi aplikacija kojoj će proslediti podatke, mora znati u kom obliku će te podatke proslediti (tip kodiranja) i konačno, kojom će se metodom koristiti za slanje tih podataka.

Počnimo od poslednje, najbitnije osobenosti. Metoda slanja podataka.

Rekli smo na početku kursa da HTML dokumenti putuju kroz mrežu uz pomoć http protokola. Korišćenje ovog protokola, podrazumeva da se sa klijenta na server šalju zahtevi koji u sebi sadrže i određene naredbe. Na osnovu tih naredbi (i ostalih podataka u zahtevu) server formira odgovor. Na primer:

GET /mojaStrana.HTML HTTP/1.1

Ova linija u http zahtevu govori serveru da je aktivirana http naredba GET, koja daje nalog serveru da pronađe i emituje određenu stranu. Osim GET, server bi mogao dobiti i naredbu POST, koja na isti način prosleđuje naredbu, ali podrazumeva i postojanje parametara u zahtevu. Razlika za korisnika je u tome što se pri upotrebi GET komande (metoda) paramteri ispisuju u adresi pretraživača, dok pri upotrebi POST komande, parametri nisu vidljivi za korisnika.

Ovo kratko upoznavanje sa http metodama bitno je za ovaj kurs samo za toliko što je, pri upotrebi formi potrebno naglasiti koji ćemo http metod koristiti za prosleđivanje podataka iz forme kroz atribut method. Skoro uvek će, za ovaj metod, biti post, pa će jedan od atributa form taga biti method="post".

<form method="post"></form>

Ovakva forma još uvek neće biti funkcionalna iz tri razloga. Prvo, zato što ne zna na koju

stranu će proslediti parametre, drugo, zato što nema ni same paramtere (još uvek ne sadrži kontrole) i treće, zato što nema nigde njene aktivacije, od čega ćemo u ovoj lekciji obraditi samo prvi razlog.

Kada pravimo formu, njen tag ćemo postaviti u telo strane (body tag) i podrazumeva se da će neka serverska skripta prihvatiti njene parametre i na osnovu njih kreirati neki odgovor. U formi moramo naglasiti koja je adresa te strane. Ukoliko to ne naglasimo, server će pretpostaviti da je strana koja obrađuje formu ista ona strana na kojoj se forma nalazi. Naziv ciljne strane se nalazi u atributu action.

<form method="post" action="mojaAplikacija.php"></form>

Primećujemo da je ciljna strana tipa .php. To će obično biti slučaj (.php, .asp, .jsp), jer se obrada serverskih parametara može obraditi samo iz serverskog skripta. A u slučaju da ne želimo da prosleđujemo parametre serveru, sama forma nam nije ni potrebna.

Tag iz primera već predstavlja validnu inicijalizaciju forme, koja će biti funkcionalna u većini slučajeva. Ipak, postoji jedan izuzetak, kada ove dve informacije (atributi) nisu dovoljne. To je slučaj da želimo da formi dodelimo i mogućnost uploada fajlova.

Tada unosimo i treći atribut enctype.

Podrazumevana vrednost ovog atributa je application/x-www-form-urlencoded. Tako će podaci biti serijalizovani ako ne postavimo atribut enctype na formu. U slučaju da želimo i upload fajlova, enctype mora da ima vrednost: multipart/form-data.

<form method="post" enctype="multipart/form-data" action="mojaAplikacija.php"></form>

Što se ostalih atributa tiče, forme prihvataju većinu standardnih HTML atributa (id, class, događaje...). Osim njih, forma i njene kontrole, poseduju atribut name. Ovaj atribut je naročito koristan kod formi, jer omogućava brzo i jednostavno nalaženje forme na strani i elemenata u samoj formi. (Na primer, umesto traženja forme po ID-u, dovoljno je reći document.forms.nazivForme).

Rekli smo na početku da se parametri forme mogu prosleđivati kroz adresu (url string) ili kroz zaglavlje zahteva (nevidljivo za korisnika). Ali, to što korisnik nije u stanju da vidi podatke, ne znači da oni stvarno nisu vidljivi. Sve kontrole forme, nalaze se u izvornom HTML kodu i moguće ih je videti u svakom trenutku, pregledavanjem tog koda, o čemu treba voditi računa kada se radi sa poverljivim informacijama.

Evo primera forme za eksterni Google search box:

<form action="http://www.google.com/cse" id="cse-search-box"> <input type="hidden" name="cx" value="partner-pub-8240847099355309:iebkhp-q0bp" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /></form>

U ovom trenutku (iako prilično jednostavne za razumevanje), preskočićemo kontrole unutar same forme i analizirati samo njen inicijalni tag. Primećujemo da je action atribut forme podešen na Google. Dakle, prilikom aktivacije forme, svi parametri će biti prosleđeni aplikaciji koja ne mora imati nikakve veze sa serverom na kome se nalazi forma. Drugi atribut je id, što je, razumljivo, atribut koji će aplikacija upotrebiti da bi identifikovala formu.

Kada korisnik aktivira ovu formu, “preseliće” se sa sajta na kome se nalazi forma na Google.

Kontrole forme

U sledeće tri lekcije obradićemo sve (ili bar većinu) kontrole HTML formi koje, u nekoj logičkoj podeli, možemo izdeliti na tri vrste: kontrole koje imaju mogućnost unosa podataka (tekst polja, tekst zone...), kontrole koje imaju mogućnost izbora iz predefinisane liste podataka (option boksovi, check boksovi, radio tasteri...) i treća vrsta kontrola tasteri i kontrole (ovo je zapravo samo jedna kontrola) za upload fajlova. Same kontrole ne moraju egzistirati u formi, ali što je još važnije, ni forma ne mora obavezno da bude “domaćin” kontrolama. One mogu egzistirati same za sebe, što je korisno kada nam je potreban neki unos čijim vrednostima želimo da rukujemo isključivo na klijentu.


1. Forma je poseban HTML entitet i inicijalizuje se tagom <form></form>2. Forma sadrži HTML kontrole3. Action atribut ukazuje na aplikaciju koja preuzima i obrađuje parametre forme 4. Method je atribut koji govori o tome na koji će način biti prosleđeni parametri

forme serveru5. Enctype je atribut u kome je naznačen tip serijalizacije parametara6. Forma nije funkcionalna ukoliko pored osnovnih atributa ne poseduje i aktivaciju

(submit)7. POST metod je metod koji prosleđuje parametre kroz zaglavlje zahteva

8. GET metod je metod koji prosleđuje parametre kroz url string (adresu)9. Form tag se nalazi u body tagu strane

Kontrole za unos (text field, text area)Jedinica: 9 od 17

Svakako najkorišćenija kontrola u HTML-u jeste baš kontrola za unos teksta. Ova kontrola se nalazi na svakoj login formi ili bilo kom delu nekog sajta gde korisnik treba da unese podatke koji nisu predefinisani.

U HTML-u razlikujemo tri vrste polja za unos teksta. Tekst polje (text field), password i tekst oblast (text area).

Text field

Ovo je klasično polje za unos jednog reda teksta. Većina form kontrola imaju zajednički naziv taga: input. To je slučaj i sa tekst poljem (text field), pa bi tako tag za prethodnu sliku glasio:

<input type="text" />

Ono što klasifikuje svaku form kontrolu koja se nalazi u tagu input jeste njen tip (type). U ovom slučaju, tip je text i zato je vrednost atributa type, text.

Ovako definisano polje nema nikakvu funkciju na strani, osim da korisnik unosi u njega tekst, koji nikada nigde neće biti obrađen. Zato, da bi bilo koja form kontrola mogla da bude prepoznata i obrađena u nekom kasnijem procesu (što je cilj kontrole), potrebno je identifikovati je. Ovde treba obratiti pažnju na to da, iako smo, do sada, identifikovali elemente uz pomoć id taga, stvar sa formama funkcioniše malo drugačije. Naime, kada se forma prosledi Web serveru, server pretraži sve njene kontrole i preuzme njihove vrednosti. Zatim te vrednosti stavi u listu vrednosti, pri čemu svaki član te liste ima svoj naziv. Na kraju, programer može pristupiti toj listi i izvući te vrednosti identifikujući svaku vrednost kontrole po njenom nazivu, a sami nazivi, preuzimaju se iz atributa name. Zato je za identifikaciju svake kontrole na formi veoma bitno postojanje njenog imena (koje bi

logično trebalo da bude unikatno). Pri tom, id tag ne mora biti suvišan, jer njega možemo koristiti za identifikaciju te kontrole na drugom nivou (klijentskom).

<input type="text" name="mojTekst" id="mojTekst" />

Ovako pripremljena kontrola je sada daleko upotrebljivija za serverski skript.Osim na serveru, atribut name olakšava i pristup kontroli i na klijentu, jer, ukoliko se ta kontrola nalazi u okviru neke forme, kontroli se (iz klijentskog skripta) može daleko jednostavnije pristupiti (forma.mojTekst) nego kada ne bi imala ovaj atribut.

Tekst polje je takođe moguće formatirati prema potrebama konteksta. Na primer, može se povećati ili smanjiti količina vidljivih karaktera. Tako da bismo, ukoliko želimo da naše polje ima vidljivih 100 karaktera, napravili sledeću izmenu u kontroli:

<input name="mojTekst" type="text" id="mojTekst" size="100" />

Možemo takođe i ograničiti broj dozvoljenih karaktera za unos. Ukoliko, na primer, želimo da polje služi za unos matičnog broja. U tom slučaju, bilo bi dobro da polje bude dužine 13 karaktera, ali i da ne dozvoljava da se unse broj karaktera veći od 13.

<input name="mojTekst" type="text" id="mojTekst" maxlength="13" size="13" />

Svaka kontrola forme može biti omogućena ili onemogućena (enabled, disabled), pa tako i tekst polje. Ova osobina kontroliše se atributom disabled, tako što se, ukoliko želimo da kontrola bude onemogućena, postavi na vrednost disabled, a u suprotom, jednostavno ne stavi u tag.

<input disabled="disabled" name="mojTekst" type="text" id="mojTekst" maxlength="13" size="13" />

Za disabled atribut je važno znati da se, kao i svi ostali atributi kontrole, nalazi na klijentskoj strani. To znači da, maliciozni korisnik može u svakom trenutku postaviti stranu na sopstveni server (ili proksi server) izmeniti atribut (izbaciti ga) i tako omogućiti kontrolu. Zbog toga izbegavajte onemogućavanje pristupa kontrolama na taj način, jer jednostavno, nije bezbedno.

Na primer, napravili ste set od tri kontrole. Za dve želite da budu dostupne svima, ali jednu želite da omogućite samo administratoru. Rešavanje ovoga, uz pomoć disabled atributa, nije najbezbedniji način iz navedenog razloga.

Sličan rezultat daje i atribut readonly="readonly".

Konačno, bitan (verovatno najbitniji) atribut ove (i svih ostalih) kontrole je atribut value. On zapravo sadrži vrednost koja je unešena u kontrolu. Ovaj atribut ne moramo unositi prilikom inicijalizacije kontrole da bi ona bila funkcionalna. Ali, ukoliko želimo da kontrola ima neku incijalnu vrednost (na primer, da u kontroli pre unosa bude ispisan tekst: unesite ime ili unesite prezime...), tu vrednost moramo naznačiti atributom value.

Password field

Verovatno ste imali prilike da se sretnete sa poljima za unos teksta čiji je sadržaj skriven (obično kada se unosi šifra). To su takođe kontrole za unos teksta, ali je, umesto tipa text, njihov tip password. Sve ostale karakteristike ove kontrole, identične su karakteristikama kontrole tipa text.

Evo koda za primer sa slike:

<input name="mojaSifra" type="password" id="mojaTekst" maxlength="13" size="13" />

Text area

Za razliku od password polja, text area se, što se tiče koda, prilično razlikuje od text polja, počevši od samog taga. Text area kontrola podrazumeva poseban tag za inicijalizaciju.

<textarea name="mojTekst" id="mojTekst"></textarea>

Obzirom da za nju važe ista pravila identifikacije kao i za ostale kontrole, postavićemo odmah i dva standardna atributa (id i name).

I u ovoj kontroli, kao i u prethodnim, moguće je podesiti broj vidljivih karaktera po širini, ali je, za razliku od prethodnih kontrola, ovde moguće korigovati i visinu, odnosno, broj vidljivih redova teksta. Recimo da želimo da kontrola bude široka 50 karaktera, a visoka 5.

Umesto atributa size, za širinu, upotrebićemo atribut cols, dok ćemo za broj redova po visini, upotrebiti atribut rows.

<textarea name="mojTekst" cols="50" rows="5" id="mojTekst"></textarea>

Naravno, sve ove, pa i mnogo moćnije stilske intervencije, možete da uzvršite i putem CSS stilova.

Još jedan od atributa koji ovu kontrolu razlikuje od prethodnih je atribut wrap. On označava na koji način će se tekst prelamati na krajevima redova. Ukoliko vam je word wrap naredba poznata i iz drugih programa, već okvirno znate i njenu namenu.

Vrednosti koje ovaj atribut može primiti su:

• soft – prelama redove ali ih prosleđuje serveru bez prelamanja• hard – prelama redove i prelomljene ih prosleđuje serveru• off – ne prelama redove (umesto toga, pojavljuje se klizač u podnožju kontrole)

I pored ovih atributa za formatiranje (prelamanje) teksta, ne računajte da će Vam ova kontrola omogućiti unos dobro formatiranog teksta. U tu svrhu, obično se koriste eksterni HTML editori, takozvani WYSIWYG (What You See Is What You Get) editori.

Text area kontrola nema value atribut. Njen sadržaj predstavljen je kao sadržaj elementa. To je i praktično, jer, za razliku od tekst polja, ova kontrola može pregledno da primi znatno više teksta.

Evo kako bi izgledala ova kontrola inicijalno napunjena tekstom:

<textarea name="mojTekst" cols="50" rows="5" id="mojTekst">First and foremost, a minimum of twelve should be kept in any size tank to help disperse aggression.</textarea>

Već smo u prethodnoj lekciji rekli da kontrole ne moraju da budu u formi. To je istina, ali samo do momenta dok ne poželimo da unešene podatke prosledimo serveru. U suprotnom, sve form kontrole moraju biti oivičene u formu.

<form name="mojaForma" action="" method="post"> <textarea readonly="readonly" name="mojTekst" cols="50" rows="5" id="mojTekst"> First and foremost, a minimum of twelve should be kept in any size tank to help disperse aggression. </textarea></form>


1. Postoje tri standardne HTML kontrole za unos teksta password field, text field i text area

2. Text field i password field se uzajamno razlikuju samo po type atributu3. Text field kontroli je moguće korigovati broj vidljivih karaktera atributom size 4. Text field kontroli je moguće korigovati maksimalan broj unešenih karaktera

atributom maxlentgh.5. Za unos veće količine teksta koristimo kontrolu textarea6. Format textarea kontrole regulišemo atributima rows i cols7. Kontrole za unos teksta možemo osposobiti i onesposobiti atributima disabled ili

readonly

8. Value atribut predstavlja vrednost unešenu u kontrolu9. Textarea kontrola nema value atribut već joj je vrednost predstavljena kao sadržaj

elementa10. Moguće je korigovati način na koji će tekst biti prelaman u textarea kontroli,

atributom wrap11. Ukoliko želimo da kontrole budu prosleđene serveru, one moraju biti u form tagu

File upload kontrolaJedinica: 11 od 17

Hidden kontrola

Hidden kontrolu koristimo kada želimo da neku vrednost prosledimo serveru, a da ona, pri tom, ne bude vidljiva korisniku. Obzirom da svrha kontrola jeste ta da korisnik unese podatke u njih i da ti podaci budu prosleđeni serveru, postavlja se pitanje, koja je onda svrha kontrole koju korisnik, niti će moći da vidi, niti će moći da u nju unese bilo kakav podatak.

Ukoliko ovaj problem pogledate sa aspekta dinamike, videćete da je odgovor prilično jednostavan.

Recimo da imamo neku bazu korisnika, i da se u toj bazi za svakog korisnika pamte njegovi: id, ime, prezime i broj telefona. U jednom trenutku, poželećete da izmenite neki od ovih podataka. Pošto je id broj pod kojim se korisnik skladišti u bazi, on nije relevantan za korisnika, ali je krucijalan za bazu, jer je to jedini način da ga sa sigurnošću pronađemo. To znači, da kada neka web aplikacija (kojom ćete menjati podatke za korisnike) izvuče podatke o korisniku, ona mora da Vam u kontrolama prikaže njegovo ime, prezime i adresu, ali ne i id, jer Vam je on nepotreban. Zatim, kada ispunite kontrole novim podacima, aplikacija mora da pronađe i izmeni podatke za adekvatnog korisnika, ali, obzirom da među kontrolama forme nemate i id, skripta nije u stanju da to učini.

U ovakvoj situaciji, ugradićete na stranu još jednu (hidden) kontrolu, i za vrednost joj dodeliti id korisnika iz baze. Zatim, kada završite sa intervencijom na podacima, id će biti prosleđen serveru sa ostatkom podataka koje će skripta sada moći da izmeni bez problema. Sa druge strane, korisnik ni jednog trenutka neće moći da vidi id.

Naravno, ovo, ako se podsetimo prethodnih lekcija, ne znači da korisnik ne može da vidi id odlaskom na izvorni kod strane. Svi podaci koji se nalaze na web strani, vidljivi su za krajnjeg korisnika u izvornom html kodu.

Evo primera jedne hidden kontrole:

<input type="hidden" name="id" value="35" />

Vidimo da je takođe u pitanju input tag, čiji type atribut ima vrednost hidden i koji nosi vrednost 35 i naziv id. To znači da će serverski skript, ako pogleda vrednost za člana id, moći da dobije vrednost 35, na identičan način, kao da preuzima vrednost neke vidljive kontrole. Što znači da se skrivene kontrole na serveru ni malo ne razlikuju u odnosu na vidljive.

File upload (file field) kontrola

Do sada smo obradili nekoliko vrsta kontrola, ali sve što je korisnik do sada imao priliku da unese u njih bio je tekst. Ali, često nam je potrebno da korisniku obezbedimo i unos fajla u kontrolu i transfer tog fajla na web server.

Kompletna procedura slanja fajla na web server i njegove obrade u serverskoj skripti ima priličan broj koraka (kada se uporedi sa obradom prostijih kontrola). Isprva, sama strana treba da prihvati fajl, pod određenim uslovima. A zatim, kada fajl stigne na server, potrebno je pronaći ga, proveriti i kopirati na željenu lokaciju. Ali, vratimo se na prvi deo procedure, koji se tiče klijentskog dela ovog procesa.

Ponovimo za početak da, da bi forma mogla da prosleđuje fajlove na server, mora da ima i atribut enctype sa vrednošću enctype="multipart/form-data".

Druga neophodnost je, naravno, postojanje same file upload kontrole.

<input type="file" name="mojFajl" id="mojFajl" />

Vidimo da je opet u pitanju input tag, kome je vrednost type atributa file. Na strani, ova kontrola izgleda ovako:

Kontrola automatski postavlja na stranu tekstboks sa putanjom lokalnog fajla i browse taster kojim se aktivira navigacija do tog lokalnog fajla.

I, konačno, potrebno je obezbediti adekvatnu potvrdu forme da bi bio aktiviran prenos fajla na server.

Potvrda i tasteri forme

U prethodnoj lekciji, u primeru sa unosom ličnih podataka, na kraju smo uneli sledeći tag:

<input type="submit" value="potvrda"/>

Ovaj tag iscrtao je na strani taster, čijom je aktivacijom došlo do potvrde forme. Ali, ovo nije jedini način da se izvrši potvrda forme, kao što nije ni jedina osobina koju jedan taster može imati na formi.

Kada aktivirmo submit kontrolu, aktivirali smo, u stvari, submit funkciju same forme. Ova funkcija može biti aktivirana i na nekom drugom mestu. Na primer, može postojati neka klijentska skripta, koja u nekom trenutku poziva ovu funkciju (document.forms.mojaForma.submit()), što bi dovelo do istog rezultata kao i pritiskanje submit tastera.

Takođe, umesto submit kontrole, moguće je postaviti i image button tag za sliku, koji takođe ima svojstvo aktivacije forme kada se pritisne tasterom miša. Osim toga, ovaj tag ima i sva svojstva običnog img taga.

<input type="image" name="submitSlika" id=" submitSlika" src="demasoni.jpg" />

Vratimo se na submit kontrolu. Primećujemo da u našem primeru ne postoji atribut name. Ovo nije ispravna definicija kontrole, iako postojanje ovog atributa ne izgleda logično u submit kontroli.

Kada serverska skripta počne da obrađuje stranu, jedini način da sazna da li je klijent došao na stranu putem forme ili direktno, jeste tako što će proveriti da li su na server prosleđeni i parametri. Ukoliko parametri postoje, skripta izvršava određeni, parametrima uslovljen deo. U suprotnom, strana se tretira kao da nema parametre i taj deo se ne izvršava.

Najčešći način za ovu proveru je baš putem provere postojanja submit kontrole. Ukoliko takva kontrola postoji, serverska skripta podrazumeva da su podaci došli sa forme.

Ali, da bi ovakav sistem bio funkcionalan, klijent (forma) treba da obezbedi način da serverska skripta identifikuje ovu kontrolu, što objašnjava razlog postojanja name atributa.

<input type="submit" name="potvrda" value="potvrda"/>

Iako poseduje i atribut value, submit kontrola (i ostale kontrole sa tasterima) podrazumeva

ovaj atribut kao atribut sa fiksnom vrednošću. Value je, jednostavno, ono što će biti ispisano na tasteru a ne, kao u ostalim kontrolama, ono što korisnik unosi u aplikaciju.

Submit nije jedina taster kontrola u html formama. Pored nje, postoje još dve ovakve kontrole. Reset i button. Reset kontrola jednostavno resetuje sve kontrole forme na njihove inicijalne vrednosti.

Isprobajmo sledeći primer:

<form name="mojaForma" method="post" action=""> <input type="text" name="ime" value="Vase ime..." /><br /> <input type="text" name="prezime" value="Vase prezime..." /><br /> <input type="reset" name="reset" value="reset" /></form>

Ukoliko (na strani) izmenimo vrednosti tekst polja i pritisnemo taster reset, vrednosti će biti vraćene na svoja inicijalna stanja.

Konačno, button tip tastera. Ovakav taster nema nikakvu funkciju. Njegovu funkcionalnost treba da obezbedimo sami. Na primer:

<input onclick="submit()" type="button" name="potvrda" value="potvrda" />

U ovom slučaju, taster će izvršiti potvrdu forme, iako njegov tip nije submit.

Naglasimo da se tasteri napravljeni na ovaj način, renderuju sistemskim stilom, što znači da će, najverovatnije, biti iscrtani na jedan od sledeća tri načina (IE, FireFox i Safari).

Ali, to ne znači da će tasteri na našim stranama biti ograničeni samo na ovakav izgled. Već od sledećeg modula, kada počnemo da ulazimo u oblast CSS-a i stilizacije HTML-a, videćemo koliko su mala stilska ograničenja u izgradnji ne samo form kontrola, nego i svih ostalih HTML elemenata.


1. Hiden kontrola omogućava da vrednost bude prosleđena kroz formu, ali da pri tom ne bude vidljiva na strani.

2. File upload kontrola omogućava selekciju fajla sa lokalnog sistema i prosleđivanje istog putem forme na Web server

3. Submit taster izvršava potvrdu forme4. Reset taster resetuje sve kontrole forme na inicijalnu vrednost5. Button taster nema predefinisano ponašanje6. Name atribut submit kontrole je bitan za serversku skriptu jer često po njemu

skripta raspoznaje da li je poziv došao sa forme ili hiperlinka7. Value atribut tastera predstavlja tekst koji će biti napisan na tasteru

Stilovi u HTML-u4.12 Stilski atributi HTML elemenata4.13 CSS stilovi HTML elemenata

Stilski atributi HTML elemenataJedinica: 12 od 17

Do sada smo imali prilike da se upoznamo sa bitnijim HTML tagovima kroz logiku njihovog funkcionisanja i osnovnu stilizaciju. U ovoj i narednoj lekciji proučićemo detaljnije stilske HTML atribute i njihove CSS alternative.

Obzirom da znamo da ne izgledaju svi HTML elementi isto, odnosno, da ne daju isti rezultat prilikom prikaza, logično je da se na njih ne mogu ni primeniti isti stilovi. Na primer, nema previše logike u podešavanju broja kolona u kontroli tipa taster, niti boje u img kontroli...

Većina HTML elemenata podrazumeva atribute width i height. Ovo su, naravno, oznake za visinu i širinu. Pogledajmo kakve efekte imaju ova dva atributa na img tag:

Uzmimo za primer sliku iz prethodnih primera i podesimo joj visinu na 100 piksela i širinu na 200.

<img src="demasoni.jpg" width="200" height="100" />

Pogledajmo rezultat ovog primera:



Dobili smo sliku, koja je deformisana prema unetom formatu, ipak, uspeli smo da fiksiramo veličinu elementa na željeni format. Kada bismo sliku, u ovako napisanom kodu, zamenili bilo kojom drugom slikom, njen format bi ostao isti.

Ukoliko bismo želeli da fiksiramo format ove slike, ali da pri tom ostane proporcionalna, dovoljno bi bilo da izostavimo jedan od dva atributa (width ili height).

<img src="demasoni.jpg" width="100"/>

Takođe, sećamo se atributa align, img taga. Njegove vrednosti predstavljale su načine na koje će slika biti poravnata u odnosu na tekst.

Nastavimo sada, kroz align atribut, ka jednom potpuno drugačijem tagu - p. Ovaj tag takođe poseduje atribut align, ali u njemu, taj atribut ima drugačiji set vrednosti i razumljivo, drugačiji način ponašanja.

<p align="right">First and foremost, a minimum of twelve should be kept in any size tank to help disperse aggression.</p>

Ovaj primer, izvršiće ravnanje teksta u desnom bloku, a pored njega, postoje još i atributi center, left i justify (ravnanje po sredini, levom bloku i pun blok).

Pogledajmo sada element table. Ovaj element, kao i njegovi podelementi, prepun je atributa za HTML stilizaciju.

Napravimo, za početak, jednu osnovnu tabelu, sa samo jednim poljem:

<table> <tr> <td>Moja tabela</td>

</tr></table>

Pokušajmo da obojimo pozadinu ove tabele. Za to možemo upotrebiti atribut bgcolor.

<table bgcolor="#CCCCCC">

Recimo da sada, želimo da dodamo i jedan crveni okvir ovoj tabeli, debljine jedne tačke.

<table border="1" bordercolor="#FF0000" bgcolor="#CCCCCC">

(umesto heksadecimalnih vrednosti možete koristiti i konkretne nazive: #FF0000 je, npr. isto što i red)

Potom, recimo da nam ne odgovaraju tip okvira i razmak između teksta i okvira (cellpadding).

<table border="1" cellpadding="5" cellspacing="0" bordercolor="red" bgcolor="#CCCCCC">

Konačno, potrebno nam je da tekst obojimo u neku boju. Na primer, žutu. Za to nam je potrebno da kompletan tekst umetnemo u još jedan element, font.

<table border="1" cellpadding="5" cellspacing="0" bordercolor="red" bgcolor="#CCCCCC"> <tr> <td> <font face="tahoma" size="2" color="#FFFF00" >Moja

tabela</font> </td> </tr></table>

Font, kao atribute, prihvata standardne parametre fontova, face (naziv fonta), size (veličinu), color (boju)... Na žalost, nemaju svi sistemi instalirane sve vrste fontova, tako da je bitno obratiti pažnju na to koji ćete font koristiti u stilizaciji strane. Obično se koriste sistemski fontovi, koji su obavezno prisutni na svim sistemima. Ipak, korišćenje sistemskih fontova (hipotetički) nije obavezno. Na strani možete koristiti i fontove koji nisu standardni sistemski fontovi, ali onda je poželjno da ih embedujete u stranu, što je vrlo nepreporučljiv proces, jer ne daje rezultate na svim pretraživačima (Browser-ima). Ako bismo baš želeli da to učinimo, bio bi nam potreban embeded opentype format fonta, koji možemo od običnog true type fonta konvertovati samo uz pomoć specijalne aplikacije. Dakle, zaključak je: ipak koristite sistemske fontove.

Ovim smo Vam dali ideju o tome kako da koristite stilske atribute u HTML-u. Pored toga, dajemo Vam i preporuku da te atribute ne koristite.

Da bismo objasnili poslednju rečenicu, vratimo se nekoliko lekcija u nazad, kada smo govorili o transitional i strict validaciji. Tada smo rekli da strict validacija (ona koja se danas zagovara kao validan HTML) podrazumeva razdvojenost stilova od logike, dok transitional znači da su stilovi implementirani u samu logiku (tagove).

Ovo u praksi znači da se svi stilski atributi u ovoj lekciji (i celom dosadašnjem kursu) ne bi trebali upotrebljavati ako želimo da nam validacija bude dobra i moderna. Umesto njih, trebalo bi koristiti odvojene CSS stilove ili style HTML atribut, koji omogućava CSS stilizaciju unutar samog taga.

Ipak, nemojte misliti da je sve što smo do sada naučili o stilizaciji tagova bila stranputica. Naprotiv, većina HTML strana pisana je u transitional modu, što znači da prihvata i jednu i drugu vrstu stilizacije, pa ćete se tako često susretati sa ovakvim načinom pisanja koda, zbog čega je neophodno da ga odlično poznajete.

Jedan od primera je sve češće negodovanje korišćenja table taga. Umesto njega, zagovara se korišćenje div taga, ali u praksi ćete sretati i jedan i drugi tag.

Mi ćemo, nakon što smo naučili kako se rukuje stilom kroz HTML atribute, od sledeće lekcije početi da poštujemo navedena pravila i okrenuti se u potpunosti CSS stilizaciji. Isprva, kroz style HTML atribut, a nakon toga i kroz potpuno izdvojene CSS stilove.

Evo i liste stilskih HTML atributa sa opisom osobina i tagova unutar kojih se mogu pojaviti:

abbr TD, THSkraćena verzija sadržaja polja, za indeksere, čitače i sl.

accept-charset

FORMlista karakter setova koje forma može prihvatiti

accept FORM, INPUTlista mime tipova koje mogu prihvatiti file upload kontrole forme

accesskeyA, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA

dodeljivanje fokusa kontroli pritiskom na taster (zajedno sa funkcijskim tasterom (alt ili ctrl))

action FORMaplikacija u kojoj se nalazi serverska skripta koja obraduje formu

align CAPTIONhorizontalno ravnanje u odnosu na formu

alignAPPLET, IFRAME, IMG, INPUT, OBJECT

vertikalno i horizontalno poravnanje

align LEGENDhorizontalno ravnanje odnosu na fieldset

align TABLE table position relative to window

align HR horizontalno ravnanje

alignDIV, H1, H2, H3, H4, H5, H6, P

horizontalno ravnanje

alignCOL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

horizontalno ravnanje

alink BODYboja aktivnih (selektovanih) linkova na strani

alt APPLET kratak opis objekta

alt AREA, IMG kratak opis objekta

alt INPUT kratak opis objekta

archive APPLET lista dokumenata (arhiva)

archive OBJECT lista urija

axis TD, TH razdvajanje kolona u logičke celine

background BODY pozadina strane

bgcolor TABLE boja pozadine

bgcolor TR boja pozadine

bgcolor TD, TH boja pozadine

bgcolor BODY boja pozadine

border TABLE debljina okvira

border IMG, OBJECT debljina okvira

cellpadding TABLErazmak izmedu ivice polja i njegovog sadržaja

cellspacing TABLE razmak izmedu polja

charCOL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

horizontalno ravnanje u odnosu na priloženi karakter

charoffCOL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

ofset za ravnanje po priloženom karakteru

charset A, LINK, SCRIPT kodni raspored povezanog resursa

checked INPUT status kontrole (checkbox i radio)

cite BLOCKQUOTE, Q lokacija citiranog izvora

cite DEL, INS razlog izmene

class Svi klasa objekta

classid OBJECT identifikacija tipa objekta

clear BR skida vrednosti atributa za ravnanje

code APPLET naziv apleta

codebase OBJECT podaci o objektu

codebase APPLET dodatni podaci o apletu

codetype OBJECT tip objekta

color BASEFONT, FONT boja

cols FRAMESET širina (broj kolona)

cols TEXTAREA širina (broj kolona)

colspan TD, TH broj kolona sadržanih u polju

compact DIR, DL, MENU, OL, ULuklanjanje nepotrebnog praznog prostora u sadržaju

content META sadržaj

coords AREA x i y koordinate tačaka poligona

coords A x i y koordinate tačaka poligona

data OBJECT aplikacija (objekat)

datetime DEL, INS datum izmene

declare OBJECT deklarisanje objekta

defer SCRIPTodlaže aktivaciju skripte do učitavanja kompletnog dokumenta

dir Sve pravac ispisa teksta

dir BDO pravac ispisa teksta

disabledBUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA

kontrola se iscrtava ali nije upotrebljiva

enctype FORM tip kodiranja zaglavlja forme

face BASEFONT, FONT naziv fonta

for LABEL element za koji se povezuje label

frame TABLE naziv frejma u kome se iscrtava

frameborder FRAME, IFRAME okviri frejmova

headers TD, TH id-ovi polja iz zaglavlja tabele

frameborder FRAME, IFRAME okviri frejmova

headers TD, TH id-ovi polja iz zaglavlja tabele

height IFRAME visina

height TD, TH visina

height IMG, OBJECT visina

height APPLET visina

href A, AREA, LINK adresa na koju link pokazuje

hreflang A, LINK jezik linka

hspace APPLET, IMG, OBJECT horizontalni razmak

http-equiv META podaci zaglavlja dokumenta

id Sve id objekta

ismap IMG, INPUT daje slici svojstvo slikovne mape

label OPTION naziv opcije

label OPTGROUP naziv opcije

lang Sve skraćenica jezika taga (en, sr...)

language SCRIPT programski jezik srkipte

link BODY boje linkova

longdesc IMGputanja do detaljnog opisa slike (complements alt)

longdesc FRAME, IFRAMEputanja do detaljnog opisa slike (complements alt)

marginheight FRAME, IFRAME visina margine

marginwidth FRAME, IFRAME širina margine

maxlength INPUT maksimalan broj vidljivih karaktera

media STYLE medij na koji će stil uticati

media LINK medij na koji će link uticati

method FORMmetod prosledivanja podataka (post,get)

multiple SELECT tip selekcije kontrole

name BUTTON, TEXTAREA naziv kontrole

name APPLETD naziv apleta

name SELECT naziv kontrole

name FORM naziv forme

name FRAME, IFRAME naziv okvira

name IMG naziv slike

name A naziv taga

name INPUT, OBJECT naziv kontrole

name MAP naziv slikovne mape

name PARAM naziv parametra

name META naziv meta taga

nohref AREA deo slikovne mape na kome nema linka

noresize FRAMEonemogućavanje promene veličine okvira

noshade HR iscrtavanje hr taga bez senke (2D)

nowrap TD, THisključivanje preloma teksta na krajevima kontrola

profile HEAD adresa korisnicki definisanog profila

prompt ISINDEX polje za unos isindex elementa

readonly TEXTAREA omoguceno samo čitanje teksta

readonly INPUT omoguceno samo čitanje teksta

rel A, LINKidentifikuje dokument u hijerarhiji linkova

rev A, LINKidentifikuje dokument u hijerarhiji linkova

rows FRAMESET broj redova

rows TEXTAREA broj redova

rowspan TD, TH broj redova polja

rules TABLErazdvaja vizuelno sadržaj po kolonama ili redovima

scheme META tip sadržaja

scope TD, TH opsek vidljivosti polja

scrolling FRAME, IFRAME opsek vidljivosti polja

selected OPTION status opcije

shape AREA forma link poligona

shape A forma link poligona

size HR debljina hr linije

size FONTD debljina fonta

size INPUT dužina kontrole

size BASEFONT debljina fonta

size SELECT broj prikazanih redova

span COL broj kontrola na koje utiče element

span COLGROUP broj elemenata grupe

src SCRIPT adresa eksterne klijentske skripte

src INPUTadresa slike kontrole (ako je image kontrola)

src FRAME, IFRAME adresa strana koju sadrži okvir

src IMG adresa slike

standby OBJECTalternativna poruka prikazana za vreme učitavanja objekta

start OL početak sekvence liste

style Sve css stil

summary TABLE opis tabele

tabindexA, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA

pozicija u tab indeksu

targetA, AREA, BASE, FORM, LINK

ciljna pozicija

text BODY boja teksta strane

title Sve naslov elementa

type A, LINK tip elementa

type OBJECT tip objekta

type PARAM tip spoljnog parametra

type SCRIPT tip jezika skripte

type STYLE tip stilskog jezika

type INPUT tip kontrole

type LI tip elementa liste

type OL tip brojevne liste

type UL tip znakovne liste

type BUTTON tip tastera forme

usemap IMG, INPUT, OBJECT objekat koristi slikovnu mapu

valignCOL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

vertikalno ravnanje

value INPUT vrednost kontrole

value OPTION vrednost člana liste

value PARAM vrednost parametra

value BUTTON naslov tastera

value LI inicijalizacija početka sekvence

valuetype PARAM tip parametra

version HTML HTML verzija

vlink BODY boja posećenih linkova

vspace APPLET, IMG, OBJECT vertikalni prored

width HR dužina linije

width IFRAME dužina okvira

width IMG, OBJECT dužina objekta

width TABLE dužina tabele

width TD, TH dužina polja

width APPLET dužina objekta

width COL dužina kolone

width COLGROUP dužina grupe kontrola

width PREdužina preformatiranog HTML sadržaja


1. Istoimeni HTML atributi mogu imati različit uticaj na različitim elementima.2. U pisanju HTML koda treba izbegavati stilske HTML atribute i koristiti css

stilizaciju3. Ukoliko želimo da slici promenimo veličinu proporcionalno, koristimo samo atribut

width ili samo atribut height4. Ako hoćemo da rukujemo sa stilizacijom teksta u HTML-u, koristimo font element5. Tabele se mogu stilizovati na nivou tabele, reda i polja6. Pozadinska boja tabele menja se atributom bgcolor7. Debljina okvira tabele menja se atributom border

CSS stilovi HTML elemenataJedinica: 13 od 17

Od verzije 4.0, HTML u listi atributa sadrži i atribut style. Ovo je atribut koji omogućava da tokom samog kodiranja unosimo stilizaciju u elemente.

Ovo zvuči zbunjujuće, jer smo do sada, upravo to i radili - unosili stilizaciju u elemente, uz pomoć stilskih atributa tih elemenata. Ali, znamo da moderan HTML teži ka razdvajanju stila od samih elemenata i njihove postavke na strani. Style atribut možemo smatrati srednjim rešenjem, mogućnošću da CSS stilizaciju vršimo inline (u samom kodu), ali da pri tom ne koristimo HTML stilizaciju, već CSS.

Šta je u stvari ono što style atribut prihvata kao vrednost? Ništa drugo nego same linije CSS-a koje će biti primenjene isključivo na element u kome se nalaze.

Ovakav način rada je, u poređenju sa onim kako smo do sada vršili stilizaciju, veoma efikasan, ali najčešće samo u slučajevima kada želimo da brzo izvršimo stilsku intervenciju, i to na elementu koji više nikada nećemo ponoviti u istom obliku.

Onog trenutka, kada, bilo gde u kodu, napravimo više puta isti element, sa istim stilskim karakteristikama dodeljenim style atributom, dolazi do redundandnosti informacija i posao na izmenama stilova tih elemenata se multiplicira.

Pokušajmo sada da simuliramo jedan od primera iz prethodnih lekcija, style atributom. Prisetimo se tabele koja je imala crveni okvir, sivu unutrašnjost i žuta slova. Prostor između teksta i okvira tabele iznosio je 5 tačaka, font je bio tahoma... U primeru, ovo smo postigli tako što smo napravili tabelu sa redom i poljem, što je, na kraju, bila prilična količiina koda.

<table border="1" cellpadding="5" cellspacing="0" bordercolor="red" bgcolor="#CCCCCC"> <tr>

<td> <font face="tahoma" size="2" color="#FFFF00" >Moja tabela</font> </td> </tr></table>

Pogledajmo kako bismo to mogli da uradimo uz pomoć style atributa i CSS-a i div taga:

<div style="border:2px solid red; padding:4px; font-family: tahoma; font-size: x-small; color:#FFFF00; background-color: #CCCCCC; width: 80px;">Moja tabela</div>

Evo kako izgledaju oba koda na strani:

Objasnimo sada tačna značenja svih “linija” style atributa div taga iz primera.

Ovaj primer, generalno, govori dosta o samom CSS-u. Pre svega, vidimo da su celine pisane po sistemu naziv:vrednost i razdvojene oznakom ; zatim, vidimo da se neke vrednosti, kao i u HTML stilskim atributima, mogu pisati heksadecimalno ili po nazivu i konačno, vidimo da se vrednosti veličina pišu sa sufiksom px, što je dovoljno za početak.

border: 2 solid red;U primeru sa tabelom, debljina ivice bila je jedan. Ali, ta debljina se odnosila i na okvir oko same tabele i na okvir samih polja. Obzirom da su se spoljna ivica i polja spojili, debljina okvira oko teksta je bila dve tačke, pa zato CSS atribut border stavljamo vrednost 2 (rezultat bi bio identičan i da smo napisali 2px). Nakon debljine, unosimo tip okvira (solid) i njegovu boju (red). Namerno smo imenovali boju, a nismo koristili heksadecimalni zapis, kako bismo pokazali da je i jedno i drugo moguće. Boja bi bila identična da smo je uneli i heksadecimalno (#ff0000). Konačno, ovu CSS izjavu (atribut), završili smo oznakom ; i prešli na sledeću.

padding: 5px;Ovo je u primeru sa tabelom bio atribut cellpadding. Ovaj atribut predstavlja broj tačaka za koliko će se sadržaj elementa odvajati od ivica tog elementa.

font-family: tahoma;Pomenuli smo da se font element retko koristi u HTML-u. Ovo je alternativa. CSS ima veoma raznovrstan set atributa koji se tiču baš fontova i jedan od njih je font-family, koji, kao vrednost, sadrži naziv fonta (ili porodice fontova). Vrednost ovog atributa mogla je biti i: Arial, Helvetica, sans-serif, 'Trebuchet MS', Tahoma

Kada browser naiđe na ovakvu oznaku fonta, on jednostavno pokušava da nađe odgovarajući font prema priloženoj listi. Familije fontova obično čine liste fontova koji su srodni po osnovnim karakteristikama (tipovi serifa i sl).

font-size: x-small;Očigledno, ovaj atribut predstavlja veličinu fonta. A što se njegove vrednosti tiče, u pitanju je relativna veličina fonta. U nekoj od prethodnih lekcija, pominjali smo pojam relativnog i apsolutnog. Tada smo rekli da je pojam apsolutno nešto što ima vrednost vezanu za fiksnu referencu, dok je relativno, nešto čija vrednost je vezana za neki entitet i varira u odnosu na taj entitet.

Relativne veličine fontova funkcionišu na identičan način. Postoji mogućnost podešavanja veličine fonta po nekim fiksnim veličinama (tačke, na primer), ali je moguće vezati veličinu za neki kontejner u kome se taj font emituje.

color: #FFFF00;Atribut color ima istu funkciju kao i istoimeni atribut u HTML-u. On predstavlja boju sadržaja elementa u kome se nalazi. U ovom slučaju, to je sadržaj div taga, odnosno, tekst koji se u njemu nalazi.

background-color: #CCCCCC;Predstavlja boju pozadine elementa u kome se nalazi.

width: 82px;Jeste širina elementa na koji je stil primenjen. Ovaj atribut nije postojao u primeru sa tabelom. Razlog za to je različitost reprodukcije tabele i div taga. Tabela se, ukoliko se ne naglasi drugačije, iscrtava u minimalnoj veličini. Taman onoliko koliko joj je potrebno da u nju stane sadržaj i da ispuni stilske uslove (ako je dodat i padding, onda sadržaj + padding).

Za razliku od tabele, div tag se iscrtava u širinu onoliko koliko mu to dozvoljava roditeljski element. Obzirom da je u primeru roditeljski element sama strana, div tag bi se iscrtao po širini, do kraja strane. Zato njegovu veličinu ograničavamo na određeni broj (odprilike onoliki kolika je i veličina tabele koju pokušavamo da iskopiramo).

Pogledajmo kako bismo, na jednostavan način, upotrebom style atributa sakrili element na strani:

<div style="display: none;" >Moj DIV tag</div>

ili kako bismo pozicionirali element na bilo koji željeni deo strane:

<div style="position: absolute; left: 150px; top: 150px;" >Moj DIV tag</div>

Kada budete rukovali style atributom, obratite pažnju na jednu bitnu stvar. Style atribut nadjačava sve prethodne stilske atribute objekta.

U HTML-u, važi pravilo, da kada jednom elementu dodelite neki stil, svi njegovi podelementi mogu naslediti taj stil ili neke njegove delove. To znači da će ovaj kod oba teksta emitovati u crvenoj boji.

<div style="color:#FF0000"> Spoljasnji tekst <div> Unutrasnji tekst </div></div>

Ovaj kod bi emitovao spoljašnji tekst crvenom, a unutrašnji tekst zelenom bojom, jer je unutrašnji stil pregazio spoljašnji stil (naravno, samo u kontekstu elementa u kome se nalazi).

<div style="color:#FF0000"> Spoljasnji tekst <div style="color:#00FF00"> Unutrasnji tekst </div></div>

Ovo pravilo važi i za preuzimanje klasa stilova.

<div class="mojStil" style="color:#00FF00">

Ukoliko stil mojStil podrazumeva npr. crvenu boju za sadržaj, sadržaj će ipak biti zelen, jer je pregažen lokalnim (inline) stilskim atributom.

Zapamtite da ova pravila prepisivanja važe samo za postojeće atribute, a ne za kompletan stil. Tako, ako su atributi spoljašnjeg stila: color: red; background-color: green; a mi ih u unutrašnjem stilu prepišemo sa: color: black; boja sadržaja unutrašnjeg elementa će biti crna (jer će spoljašnji color atribut biti prepisan-pregažen), ali će boja pozadine i dalje biti zelena.

Takođe, pazite da poštujete sintaksu jer je CSS veoma osetljiv na sintaksne greške.

<div style="color:red background-color:yellow;">Moj DIV tag</div>

Ovaj kod, na primer, neće obojiti ni pozadinu ni sadržaj, iako su oba atributa pravilno napisana, samo zbog nedostatka oznake ; na kraju prvog atributa.


1. CSS stilove je moguće ubacivati direktno u elemente kroz style atribut2. CSS stilovi podrazumevaju setove naziva i vrednosti za opise stilskih atributa3. Neke vrednosti u CSS stilovima se mogu pisati imenima ili heksadecimalno4. Svaka CSS izjava završava se oznakom ;5. Style atribut primenjiv je na skoro sve HTML elemente6. Style atribut omogućava najviši nivo stilizacije HTML elementa (moguće je uticati

na sve atribute)7. Svaki inline stil postavljen na atribut pregaziće stilove definisane u roditeljskom

elementu ili listi stilova8. CSS je osetljiv na sintaksne greške.

CSS5.14 Struktura i opis CSS-a5.15 Sintaksa i `naredbe` CSS-a5.16 Pristupanje elementima HTML-a kroz CSS5.17 Rukovanje CSS-om kroz HTML





Struktura i opis CSS-aJedinica: 14 od 17

Iako su HTML strane zamišljene kao “sklopovi” tekstova, slika i hiperlinkova, kroz godine svog postojanja, one su evoluirale u strukturalno veoma kompleksne elemente čija infrastruktura sadrži veliki broj različitih produkcionih komponenti (logika, dizajn, serverska i klijentska programabilnost itd).

Web sajtovi postali su mnogo više od običnih prezentacija, i u mnogim slučajevima preuzeli ulogu ozbiljnih poslovnih aplikacija, sa obiljem programske logike i dokumenata.

Obzirom da se Web aplikacije sastoje od Web strana, jasno je da ozbiljniji Web sistem može sadržati više (da ne kažemo više stotina) strukturalno različitih dokumenata.

Isprva, HTML je podrazumevao ugrađene stilske tagove, h, p, br... ali je, evolucijom i potrebom za profinjenijim formatiranjem, došlo do novih stilskih tagova i atributa.

Problematika koja se u ovom trenutku javila je nepotrebno ponavljanje mnoštva podataka vezanih za stilizaciju, koje je, osim prostora, nepotrebno oduzimalo i veliku količinu vremena kreatorima Web strana.

W3C je kao rešenje ovog problema prezentovao CSS, zbog čega, od verzije 4.0, HTML poznaje i ovaj vid stilizacije sadržaja.

CSS (Cascade Style Sheets) je “jezik” serijalizacije stilskih atributa, po sistemu naziv:vrednost. Ovaj jezik ne poseduje funkcionalnost, već samo atribute koje određeni sistem (Web strana) prepoznaje i na osnovu njih formatira sadržaj.

Na taj način, omogućava se da više dokumenata pristupi jednom atributu, čime se znatno skraćuje količina nepotrebnih informacija i rada, jer se stil nalazi (i menja) samo na jednom mestu.

Primena CSS stilova u HTML-u

Jedan od načina da se u HTML kodu primeni CSS stil je putem style atributa (inline CSS stilizacija). Ovo omogućava brzo i efikasno postavljanje stila, ali samo na nivou elementa, što znači da se konceptualno ne razlikuje previše od stilizacije putem HTML stilova.

Da bi se ovakva stilizacija izvršila, dovoljno je u element dodati atribut style i u njega uneti sva željena pravila tog stila:

<div style="color:red;">Link E-learning</div>

Primena ovog načina je dobra kada želimo da eksplicitno intervenišemo na nekom elementu nekog dokumenta i nigde drugde. Svako drugo korišćenje (koje podrazumeva ponavljanje ovog atributa) nije preporučljivo.

Drugi način je korišćenje internih stilova, koji se definišu na nivou jednog HTML dokumenta, i vidljivi su u okviru tog dokumenta, ali ne i van njega. Ovo je malo češći način korišćenja CSS stilova. Obično se koristi ili kada imamo samo jedan dokument (pa u njega želimo da implementiramo stilove) ili kada za određeni dokument želimo da imamo poseban set stilova i pravila, koji odstupaju od nekog globalnog seta.

Da bi inicijalizovali stilove na nivou dokumenta, potreban nam je style tag i stilovi u njemu.Stilovi i style tag se tiču definicije strane i zato se po pravilu nalaze u head elementu.

<head> <style> body { background-color: #FF0000; } </style></head><body></body>

U primeru smo napravili stil tag u koji smo smestili jedan stil sa jednim pravilom. Ovaj stil tiče se pozadinske boje body elementa, tako što joj vrednost postavlja u crveno.

U ovom i narednim primerima predstavljaćemo HTML kod bez deklaracije i HTML elementa, pa prilikom isprobavanja primera ove elemente dodajte sami.

ili...

<head> <style> .mojStil { background-color: #FF0000; } </style></head><body> <div class="mojStil">moj div 1</div> <br /> <div class="mojStil">moj div 2</div></body>

U ovom primeru definisali smo jedan stil (mojStil) i primenili ga na dva različita div taga. Sada, ako bismo želeli da promenimo neko stilsko pravilo na oba taga, mogli bismo to da uradimo u internom stilu mojStil.

Treći i najpopularniji način korišćenja CSS-a je, svakako, putem eksternih stilova. U ovom slučaju, stilovi se nalaze u zasebnom fajlu ili fajlovima, koji sadrže isključivo stilske atribute.Ovi fajlovi mogu biti importovani u bilo koji HTML dokument, pri čemu se podrazumevaju sva stilska pravila koja se u tom fajlu nalaze.

Fajl koji sadrži stilove je običan tekstualni fajl (kao i HTML), čija ekstenzija bi, po pravilu, trebalo da bude CSS. Ipak, ovo pravilo nije striktno i fajl (zajedno sa ekstenzijom) možete nazvati kako god želite, sve dok se u njemu nalazi pravilno napisan CSS i dok ga pravilno implementirate u HTML dokument.

Što se tiče implementacije u HTML dokument, u tu svrhu, koristi se element link, koji, kao što znamo, predstavlja referencu na eksterni resurs (a inače mu je baš učitavanje stilova najčešća primena).

<link href="stilovi.CSS" rel="stylesheet" type="text/CSS" />

Nakon ovako napisanog taga (u head elementu osnovnog HTML fajla), potreban nam je i fajl stilovi.CSS čiji sadržaj, na primer, može biti:

body { background-color: green; }

Ako isprobate ovaj primer, i ako ste pri tom sve uradili kako treba, pozadinska boja cele strane biće zelena. Ako napravite još HTML dokumenata i svima dodelite link na fajl stilovi.CSS, sve pozadinske boje strana će biti zelene. Ako promenite boju u fajlu stilovi.CSS u neku drugu, pozadinske boje će se, naravno, promeniti u tu boju.

Osim da postavite stilove u statičkom obliku (kao u primerima), stilovima možete manipulisati i dinamički (iako ovo nećemo obrađivati u ovom kursu).

Na primer, pokušajte da u kod unesete sledeću liniju:

<div onclick="this.style.backgroundColor='blue';" >moj div 1</div>

Pritisak levim tasterom miša na tag iz primera, izazvaće primenu stilskog pravila na aktuelni tag, putem JavaScript-a.

Ovakav, dinamički pristup može da ide i dalje od ovog primera - čak dotle da se dinamički kreiraju stilska pravila, stilovi pa i kompletni setovi stilova.


1. CSS je jezik za serijalizaciju stilskih atributa2. CSS je primenjiv u domenu elementa, dokumenta ili eksternog fajla3. Kada se definiše u dokumentu, CSS set stilova se nalazi u tagu

<style></style> u head elementu dokumenta4. Kada se stil definiše u dokumetu kroz style element, naziva se interni CSS5. Kada se stil definiše na nivou elementa, naziva se inline CSS6. Set CSS stilova može biti definisan u zasebnom fajlu7. CSS stilovi definisani u zasebnom fajlu nazivaju se eksterni stilovi8. Implementacija eksternih CSS stilova vrši se HTML elementom link9. Eksterni CSS je dobar jer je stilska definicija centralizovana i skraćuje vreme rada i

količinu nepotrebnih informacij

Sintaksa i `naredbe` CSS-aJedinica: 15 od 17

U hijerarhiji jednog CSS seta poznajemo nekoliko kategorija. Stil set (eksterni fajl ili sadržaj style taga), pojedinačan stil (style sheet) i pravila stila (rules).

U prethodnoj lekciji smo, kao primer, koristili sledeći stil:

body { background-color: #ff0000; }

U ovom primeru, obratili smo se tagu dokumenta putem selektora (body) i dali do znanja da želimo da boja pozadine body taga (cele strane) bude crvena (ff0000).

Kompletan tekst u vitičastim zagradama predstavlja jedan stil (style sheet), dok je sama naredba (atribut) za dodeljivanje boje background-color: #ff0000; jedno pravilo tog stila.Pokušajmo sada da dodamo još jedno pravilo. Recimo da želimo da to pravilo bude bela boja sadržaja strane. Evo kako bi glasio CSS kod:

body{ background-color: #ff0000; color: #ffffff;}

Dakle, pravila se mogu ređati jedno za drugim, sve dok su razdvojena oznakom ;Ukoliko imate problema sa ovim primerom, proverite da li ste stil implementirali kako treba. U sličaju eksternog stila link tagom, a u slučaju internog stila style elementom u head elementu strane.

<head> <style> body { background-color: #ff0000; color: #ffffff; } </style></head><body> MOJ TEKST</body>

Kada već govorimo o bojama, napomenimo da, osim imenovanjem i heksadecimalno, možete predstaviti i RGB vrednošću:

background-color: rgb(255,0,0);

To je, kada se malo bolje pogleda, veoma slična reprezentacija heksadecimalnoj, jer, ako razdvojite heksadecimalnu reprezentaciju boje u tri dela (#-ovo je samo oznaka da je zapis heksadecimalan)(ff ff ff) i svaki broj konvertujete u decimalni, dobićete brojeve od 0 do 255 (tačnije 255 0 0) koji će imati istu boju kao da ste upotrebili i rgb(255,0,0) atribut, zato što se ovde radi o istoj paleti boja, samo sa različitim zapisom:

R – crvena – FF - 255G – zelena – 00 - 00B – plava – 00 – 00

Ili prostije rečeno, imate mogućnost da unesete jednu od 255 vrednosti za jednu od tri boje (crvenu, zelenu i plavu) i tako napravite sopstvenu boju, pri čemu nije preterano važno koji ćete metod koristiti, sve dok je rezultat na kraju odgovarajući.

Vratimo se na CSS. Pokušajmo sada da, umesto solid boje, unesemo neku pozadinsku sliku ili patern.

<style> body { background-image: url(demasoni.jpg); color: #ffffff; }</style>

Ovaj stil daće sledeći izgled strani (Pod uslovom da imate sliku i da se nalazi u istom folderu u kome je i strana. U suprotnom, možete upotrebiti i bilo koju drugu sliku):

Možemo sprečiti sliku da se ponavlja po X ili Y osi i pozicionirati je u odnosu na element. Evo kako bi, recimo, postavili sliku da se ne ponavlja i bude na sredini strane:

Napominjemo, da ne daju uvek svi pretraživači iste rezultate. Konkretan primer biće u FireFox-u reprodukovan drugačije (slika će se centrirati samo horizontalno).Nekompatibilnost pretraživača je veliki problem Web dizajnera i Developer-a, ali mi se njime nećemo baviti ovde, obzirom da se paleta problema menja svakodnevno.

Evo jednog još konkretnijeg primera korišćenja pozadinske slike:

<style> body { background-image: url(04.jpg); background-repeat: repeat-x; color: #ffffff; }</style>

Ovde je, za pozadinsku sliku, upotrebljena jedna dugačka, vertikalna slika, širine tri tačke, kao uzorak. Na slici se nalazi uzorak koji je moguće uklopiti po horizontali, a po vertikali, taj uzorak se gubi u beloj boji. Tako smo dobili mogućnost, da ponavljanjem po X osi (horizontali) ispunimo pozadinu uzorkom, po prilično maloj “ceni” od 2kb. Isti rezultat, sa kompletnom slikom, bio bi desetak puta veći i naravno, drastično usporio učitavanje strane.

Uzorak:

Pozadinu možemo vezati za sadržaj, tako da, kada skrolujemo stranu, bude skrolovana i ona.

background-attachment: scroll;

ili fiksirati za poziciju

background-attachment: fixed;

Pogledajmo sada sledeći kod:

<style> body { background: url(04.jpg) repeat-x fixed; color: #ffffff; }</style>

Već smo se, u prethodnim lekcijama, susretali sa skraćenim (shorthand) zapisom CSS pravila, pa možemo samo ponoviti da, osim u zasebnim izjavama, više pravila (vezanih za jedan stilski atribut, možete zapisati i u jednoj izjavi.

Primer:

background: url(04.jpg) repeat-x fixed;

ima identičan rezultat kao i :

background-image: url(04.jpg);background-repeat: repeat-x;background-attachment: fixed;

Takođe, primećujemo da je atribut color ostao u izvornom obliku. On jednostavno ne može da se pridruži ovom skraćenom zapisu, jer je deo posebne stilske grupacije (tekst).

Iako prethodno poglavlje nije naslovljeno, možemo reći da smo u njemu obradili jednu stilsku grupaciju CSS-a – background. Sledeća bitna stilska grupacija je tekst.

Da bi nam bilo jednostavnije za rad, “preselićemo” se iz body elementa u p element:

<head> <style> p { } </style></head><body> <p>MOJ TEKST</p></body>

Počećemo sa color atributom. Recimo da hoćemo naš tekst da obojimo u crveno. Izmenili bismo stil, tako da izgleda ovako:

<style> p { color: red; }</style>

Dodajmo sada i pozadinu za ovaj element, da bi nam rad na njemu bio pregledniji:

<style> p { background-color: yellow; color: red; }</style>

Recimo da sada hoćemo malo drugačije da formatiramo tekst. Npr, želimo da font bude malo manji, da bude tahoma i da bude zadebljao (bold).

<style> p { background-color: yellow; color: red; font: bold small tahoma; }</style>

Dodali smo jedno pravilo, vezano za font:

bold – debljina slovasmall – relativna veličina slovatahoma – naziv fonta

Evo rezultata:

Recimo da smo, u ovom trenutku, zadovoljni izgledom teksta, ali da nam se ne dopada način na koji se taj tekst uklapa u pozadinu. Na primer, voleli bismo malo više odbijanja od ivica pozadine i ne želimo da pozadina bude toliko široka. Pored toga, želimo i okvir oko pozadine. I konačno, hoćemo da tekst bude centriran u tagu.

U tom slučaju, potrebna su nam pravila vezana za dimenzionisanje, poravnanje i boksing.

Što se dimenzionisanja tiče, tu ćemo se poslužiti pravilom width, koje se tiče širine elementa. Dodaćemo sledeći atribut stilu:

width: 100px;

(na isti način mogli smo dodati i height atribut što bi, u ovom primeru, rezultiralo povećanjem visine taga. Ali, obratite pažnju na to da ne mogu svi tagovi da ispoštuju sve stilove)

Zatim ćemo se pozabaviti odbijanjem teksta od pozadine i okvirom (boksing), za šta ćemo iskoristiti (već poznati) atribut padding. Okvir ćemo napraviti atributom sa više pravila border.

padding: 5px;border: solid 1px green;

Podesili smo tag tako da mu odbijanje od ivice bude pet tačaka i da ima zeleni okvir debljine jedne tačke.

Ostaje još samo da centriramo tekst po sredini (poravnanje).

text-align: center;

Konačan rezultat je ovo:

<head> <style> p { background-color: yellow; color: red; font: bold x-small tahoma; width: 100px; padding: 5px; border: solid 1px green; text-align: center; } </style></head><body> <p>MOJ TEKST</p></body>

Obratite pažnju na to da je naziv stila p. Ovo nije slučajno. To slovo p je, zapravo, selektor i da je ovo tag stil i da će biti primenjen na sve što se u dokumentu nalazi pod tagom sa ovim imenom.

Znači, kada bi body deo ovog dokumenta izgledao ovako:

<p>MOJ TEKST</p><p>MOJ TEKST</p><p>MOJ TEKST</p><p>MOJ TEKST</p>

ovakva bi bila strana:

Sećate se da smo još na početku učenja HTML-a rekli da p tag automatski postavlja marginu iznad i ispod teksta. Otuda prazni prostori između okvira. Ovo se može rešiti vrlo jednostavno, podešavanjem donje margine na vrednost manju od nule, ali mi ćemo umesto toga zameniti p tag div tagom.

Ako želite, možete ponovo pokušati primer sa više tagova. Ukoliko umesto p taga, stavite div tag, rezultat će izgledati ovako:

Pokušajmo sada, na osnovu naučenih komponenti da napravimo jednu kompletnu stranu. Neka za stranu važe sledeća pravila: imaće zaglavlje, meni, telo i podnožje.

Ono čime ćemo započeti HTML dokument jesu podrazumevani elementi HTML-a:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "!<HTML xmlns="!

<head> <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /> <title>Moja strana</title> <style> </style></head><body></body></HTML>

Nećemo se mnogo baviti ovim linijama (jer je pretpostavka da to već znate). Ukratko, ovo je strana koja će biti napisana po transitional xHTML standardu, imaće unicode set karaktera i naslov će joj biti Moja strana. U head delu, postavljen je style tag.

Zatim, ovoj strani možemo dodati zaglavlje (radi lakšeg orjentacije, prikazivaćemo samo body i style tagove).

<style> div { background: url(slikaGlava.jpg) no-repeat; height: 138px; }</style>

<body> <div></div></body>

U telo smo stavili jedan prazan div tag, a u stilove smo postavili tag stil za div. U stilu smo postavili pozadinsku sliku, koja se neće ponavljati, a visinu stila smo podesili na 138px. Ovo je veoma važno, jer, iako ima pozadinsku sliku, tag se, ukoliko nema sadržaj, smatra praznim, što znači da neće uopšte biti vidljiv (a samim tim ni njegova pozadina). Da bismo bili sigurni da će tag biti vidljiv, postavljamo mu fiksnu visinu na 138 tačaka (kolika je visina slike).

Zatim možemo dodati meni:

<body> <div></div> <a href="#" >NASLOVNA</a><a href="#" >RAZMNOŽAVANJE</a><a href="#" >ISHRANA</a></body>

posle čega bi strana trebalo da izgleda ovako:

Jasno je da hiperlinkovi u meniju nisu dobri. Ali, olakšavajuća okolnost je to što se svaki hiperlink nalazi u zasebnoj logičkoj celini (a tagu), pa ovo stilski možemo vrlo jednostavno da rešimo prostim dodavanjem još jednog stila u style tag.

a{ padding: 4px; border: 1px solid #006666; background-color: #0099CC; font: bold x-small Tahoma; color: white; text-decoration: none;}

Jedno od dodatih pravila iz dodatog stila (a) nam je nepoznato: text-decoration: none;

Ovo pravilo smo upotrebili da skinemo stilizaciju sa a tagova, jer, kao što znamo, a tagovi (hiperlinkovi) se na stranama automatski pojavljuju obojeni u plavo i podvučeni. To je dobro kada su ti hiperlinkovi deo nekog teksta, ali je, ukoliko se nalaze na očiglednoj poziciji za navigaciju (meni), ovo potpuno nepotrebno.

Sada ćemo body tagu, dodati i sadržaj:

<body> <div></div> <a href="#" >NASLOVNA</a><a href="#" >RAZMNOŽAVANJE</a><a href="#" >ISHRANA</a> <p>

<img src="demasoni.jpg" hspace="10" align="left"/>Like most Mbuna, demasoni are vegetarians and should be fed foods high in spirulina and other vegetable content. </p></body>

Ono što nam u ovom trenutku smeta su dve stvari (naravno, osim što ceo naš sajt ne bi osvojio prvo mesto na takmičenju u Web dizajnu): font sadržaja je serifan (times) i rasipa se na desnu stranu, van bloka naše strane.

Problematiku fonta ćemo rešiti odmah, a problem sa rasipanjem ćemo ostaviti za kraj.

Napravimo sada još jedan stil, obzirom da se ubačeni sadržaj nalazi u p tagu, selektor stila će biti p.

p{ font: normal small Tahoma;}

Dodajmo sada još samo jedan tag na dno strane, koji će predstavljati podnožje. Neka to bude h5 tag (mada nije naročito bitno, jer ionako možemo da mu korigujemo parametre kroz stil).

<body > <div></div> <a href="#" >NASLOVNA</a><a href="#"

>RAZMNOŽAVANJE</a><a href="#" >ISHRANA</a> <p> <img src="demasoni.jpg" hspace="10" align="left"/>Like most Mbuna, demasoni are vegetarians and should be fed foods high in spirulina and other vegetable content. </p> <h5>Sva prava zadržana</h5></body>

Sada takođe imamo određene probleme. Font nam opet nije odgovarajući i, što je mnogo veći problem, tekst “odbija” da se pozicionira na dno strane.

Napravimo sada još jedan stil.

h5{ font: normal x-small Tahoma; clear: both; background-color: #0099CC; color: white; padding: 2px; text-align: center; border-top: 1px solid #006666;}

Ova pravila su Vam prilično poznata, osim jednog: clear: both. Ovo je napredno CSS pravilo i tiče se pozicioniranja plutajućih objekata. Ovim pravilom, rekli smo pretraživaču da želimo da aktuelni element isključi nasleđeno plutanje i margine.

Border-top je derivat stilske grupe border. Formatirali smo okvir na ovaj način, kako bismo izbegli pojavljivanje okvira na bokovima i dnu taga.

Ostaje još samo da se pozabavimo probijanjem formata. Ovo će biti vrlo jednostavno da se uradi.

Obzirom da nam se cela strana nalazi u body tagu, dovoljno će biti da korigujemo njegove parametre i tako ograničimo sve njene podelemente. Na primer:

body{ width: 600px; border: 1px solid #006666;}

Dakle, ništa nepoznato. Ograničavamo širinu pravilom width i postavljamo plavi okvir oko ograničene površine.

Sada strana izgleda ovako:

... i ostaje samo da dodate funkcionalnost hiperlinkovima.

Za kraj, moramo skrenuti pažnju na nekoliko stvari:

Tehnika koju smo koristili da bismo došli do ove Web strane je bila uslovljena korišćenjem elemenata koje smo do sada obradili i savladali. Zbog toga, ovo ne samo da nije pravi način da napravite stranu, već ima priličan broj mana.

Zato, ovu lekciju i primere u njoj shvatite samo kao korak ka naprednom rukovanju CSS-om koje ćete koristiti u sledećih nekoliko lekcija, a ne kao tehnologiju kojom bi trebalo da stavite pečat na svoje znanje CSS-a.

Jednostavno, potrebno nam je još sastojaka da bi CSS mogli da upotrebljavamo na pravi način, a većinu tih sastojaka, zapravo, čine različiti selektori, odnosno, načini na koje ćemo pristupati određenim stilovima kroz stranu i elementima strane kroz stilove.

Da biste shvatili o čemu govorimo, pokušajte u ovaj primer da dodate još jedan a tag bilo gde u tekstu. Problematika sa kojom ćete se susresti je upravo ono što nam još fali, da biste bili kompletni.

Ono što je iz ove lekcije bitno da izvučete, to su načini dodeljivanja stilova i neka osnovna stilska pravila. Nemojte se truditi da napamet naučite sva CSS pravila, već logiku po kojoj ona egzistiraju.

Evo i kompletnog koda prethodnog primera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "!<HTML xmlns="!<head> <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /> <title>Moja strana</title> <style> body { width: 600px; border: 1px solid #006666; } h5 { font: normal x-small Tahoma; clear: both; background-color:#0099CC; color: white; padding: 2px; text-align: center; border-top: 1px solid #006666; } p { font: normal small Tahoma; } a { padding: 4px; border: 1px solid #006666; background-color: #0099CC; font: bold x-small Tahoma; color: white; text-decoration: none; } div { background: url(slikaGlava.jpg) no-repeat; height: 138px;

} </style></head><body > <div></div> <a href="#" >NASLOVNA</a><a href="#" >RAZMNOŽAVANJE</a><a href="#" >ISHRANA</a> <p> <img src="demasoni.jpg" hspace="10" align="left"/>Like most Mbuna, demasoni are vegetarians and should be fed foods high in spirulina and other vegetable content.</p> <p>Like most Mbuna, demasoni are vegetarians and should be fed foods high in spirulina and other vegetable content. </p> <p>Like most Mbuna, demasoni are vegetarians and should be fed foods high in spirulina and other vegetable content. </p> <h5>Sva prava zadržana</h5></body></HTML>


1. Jedan set stilova podrazumeva, stilove i pravila2. Svaki stil naslovljen je selektorom3. Komentari se u stilovima označavaju sa /* komentar */4. Stilovi se dele na logičke kategorije (ravnanje, pozadinu, tekst, boksove...)5. Pravila je moguće pisati pojedinačno ili grupno (po kategoriji)6. Boje u stilovima je moguće unositi po imenu, heksadecimalnom kodu ili RGB

vrednostima.7. Stilska pravila jednog stila ređaju se jedno za drugim i razdvajaju oznakom ;8. Set pravila (stil) mora biti oivičen vitičastom zagradom i mora mu prethoditi

selektor9. CSS nije osetljiv na mala i velika slova pa je COLOR isto što i color.

Pristupanje elementima HTML-a kroz CSS

Jedinica: 16 od 17

Prethodnu lekciju smo završili konstatacijom da način na koji smo napravili stranu iz primera i nije baš najreprezentativniji. Ona bi funkcionisala dobro samo ukoliko bi lista njenih elemenata ostala u svom prvobitnom obliku.

Ako bi se negde u toj strani pojavio neki duplikat taga (što je naravno veoma moguće), cela koncepcija bi se “raspala”.

Zato ćemo, pretpostavljate već, posvetiti ovu lekciju upravo pravilnom pristupanju objektima kroz CSS.

Ovo je ujedno i srce CSS-a, pa predlažemo da se lekciji posvetite i temeljno je proučite.

Pristup uz pomoć imena tagova

Samo ćemo ukratko pomenuti pristup tagovima putem njihovog imena, jer je ovo način na koji smo uradili kompletan prethodni zadatak.

Selektor CSS stila nosi isti naziv kao i ciljni tag; na primer p. Primenom ovog stila na strani, svi p tagovi imaće svojstva dodeljena p stilom.

<style>p{ color:#FF0000; }</style><p>Pasus 1</p><p>Pasus 2</p>

Mana ovakvog pristupa je što ne možete da stilski razdvojite ciljne tagove (osim ukoliko dodate inline stilizaciju u sam element). Zato se ova stilizacija i koristi za neke globalne parametre. Na primer, želimo da svi tekstovi na sajtu budu stilizovani na jedan način. Ili, želimo da sve strane sajta imaju istu boju pozadine i sl.

Klasni selektori

Ovo je najednostavniji i veoma popularan način za dodelu stilova. Funkcioniše tako što, nakon što kreirate neki stil i dodelite mu ime, svim elementima na koje želite da primenite taj stil dodeljujete atribut class koji za vrednost prihvata naziv stila. Nakon toga, ostaje samo da menjanjem jednog CSS stila menjate stilizaciju kompletne klase.

Na primer, setimo se tastera forme.

Recimo da ne želimo da nam tasteri forme izgledaju ovako. Ukoliko bismo primenili stil na input tag, stilizacija bi uticala i na ostale input tagove (tekst polja i sl.). Tako da je, u ovom slučaju najbolje rešenje baš klasni selektor.

Pravljenje klasnog selektora je isto što i pravljenje tag selektora. Jedina razlika je što pre naziva selektora morate staviti tačku: .selektor

<style>.taster{ border: 1px solid #0099CC; background-color: #F3F3F3; padding: 3px;/* Pravilo cursor: hand daje do znanja pretraživaču da kurzor, kada se nalazi iznad ove kontrole treba da ima sličicu ruke umesto strelice.*/ cursor: hand; width:100px; height: 22px;}</style>

Kada jednom napravite stlil, svim elementima na koje želite da ga primenite, dodeljujete atribut class sa nazivom tog stila:

<input class="taster" type="button" value="pritisni" />

Malom modifikacijom možete napraviti i nešto poput ovoga:

<style> .taster { border:1px solid #0099CC; padding-left: 25px; cursor: text; background-image: url(lupa.png); background-repeat: no-repeat; background-color: #F3F3F3; padding: 3px; width:100px;

height: 24px; }</style><input class="taster" type="text" />

Sada, kada znamo kako da rukujemo klasnim selektorom, možemo praviti kombinacije tag i klasnih stilova koristeći tačku kao separator.

<style> div.mojSadrzaj { background-color: #ff0000; }</style><div class="mojSadrzaj">Moj sadrzaj</div><div>Moj sadrzaj 2</div><p class="mojSadrzaj">Moj sadrzaj 3</p>

Ovaj primer će uticati samo na div tagove, koji su klase mojSadrzaj.

Ne zaboravite da, sve što ste defilnisali na nivou klasnog stila, uvek možete dopuniti ili pregaziti inline stilom (atributom style). Pri tom, naročito obratite pažnju na pojam dopuniti. Ako dodate stil na element koji je već klasno stilizovan, biće dodata sva pravila koja ne postoje u klasnom stilu i pregažena ona koja već postoje.

ID selektori

Željeni element možete iz CSS stila pronaći i uz pomoć njegovog id-a. Ovo funkcioniše slično kao i pronalaženje putem taga. Dve izmene koje treba da napravite su, dodavanje id atributa na ciljni element i unos tog id-a kao selektora, sa prefiksom #.

<style> #mojSadrzaj { background-color: #ff0000; }</style><div>Moj sadrzaj 1</div><div id="mojSadrzaj">Moj sadrzaj 2</div>

U primeru će svim elementima kojima je vrednost id atributa mojSadrzaj biti dodeljen stil mojSadrzaj.

Ovo rešenje može biti zahvalno u nekim situacijama, ali ne tako često, jer znamo da je id nešto što bi trebalo bude unikatno na nivou dokumenta.

Pseudo klasni selektori

Jasno Vam je, do sada, da je osnovna problematika stilizacije (a i dobrim delom kompletne programabilnosti u HTML-u), kako izolovati određeni element ili grupu elemenata i primeniti nešto na njega. Metode koje smo do sada upoznali dovoljne su da pristupe bilo kom HTML elementu. Ali, ponekad elementi imaju svoja posebna stanja. Na primer, a tag (hiperlink), koji se nalazi u posebnom stanju ukoliko pređete mišem preko njega, ukoliko je već posećen ili ukoliko je trenutno aktivan. Pretraživači podrazumevano dodeljuju određene atribute ovom tagu (plav podvučen tekst za neposećen hiperlink i ljubičast podvučen tekst za već posećen), ali ponekad nam takav izgled ne odgovara.

Već smo pominjali ovaj problem i čak ga donekle i rešili u prethodnoj lekciji, tako što smo kroz stil predefinisali kompletan a tag (od njega smo napravili taster). Ako sad ponovo pogledate taj primer, videćete da taj naš prepravljeni a tag nije u stanju da registruje stanja.

Evo kako bismo mogli ovo ispraviti:

<style> a { background-color: blue; color: white; } a:hover { background-color: red; }</style><a href="http://www.google.com" >moj hiperlink</a>

Pogledajte primer. Napravili smo dva a tag selektora - jedan običan, a jedan sa dodatom pseudo klasom hover. Hover je stanje koje podrazumeva da se kursor nalazi iznad elementa. Tag a je (kao i svi ostali tagovi) u stanju da prepozna ovaj događaj, pa mi samo treba da elementu kažemo kako da izgleda kada mu se taj događaj desi. U primeru smo samo promenili boju pozadine.

Primećujete da se atribut color nalazi samo u inicijalnom stilu taga. Ovo nije slučajno. Kada na ovaj način dodeljujete neke atribute van njegovog inicijalnog stanja, onda možete, kao pravila, postaviti samo ona koja želite da izmenite (ili dodate). Sva ostala pravila, koja se nalaze u inicijalnom stilu elementa, biće zadržana i u njegovom posebnom stanju (pseudo klasnom stilu).

Kada jednom ustanovite kako ovo funkcioniše, moći ćete da pravite i kombinacije klasnih i pseudo klasnih stilova. Na primer:

a.mojaKlasa:hover { ... }

Ovaj stil će biti primenjen na sve a tagove, koji su klase mojaKlasa.

Takođe možete i još preciznije izvršiti navigaciju kroz tagove, pseudo klasom first-child.

<style> div { background-color: blue; color: white; } div:first-child { background-color: red; }</style><div> <div>prvi podelement</div> <div>drugi podelement</div></div>

Primer će obojiti pozadine svih div tagova u plavo, a zatim će pozadina svakog prvog podelementa svakog div taga biti obojena u crveno.

Ili možete napisati i:

<style> div { background-color: blue; color: white; } div>a { background-color: red;

}</style><div> <div>prvi podelement</div> <a>Moj prvi hiperlink</a> <a>Moj drugi hiperlink</a> <div>drugi podelement</div> </div><a>Moj drugi hiperlink</a>

pri čemu će svi a tagovi koji se nalaze u div tagovima dobiti željeni stil.


1. Elementima na strani možete pristupati preko tagova (imena tagova)2. Elementima na strani možete pristupati preko id-ova3. Elementima na strani možete pristupati preko klasnih atributa4. Elementima na strani možete pristupati putem pseudo klasnih selektora

(navigacijom)5. Klasni selektori obeležavaju se sa .stil6. ID selektori obeležavaju se sa #stil7. Pseudo klasni selektori obeležavaju se sa tag:stanje8. Navigaciju kroz klase unutar taga u selektoru možete vršiti oznakom . -

div.mojaKlasa9. Navigaciju kroz elemente možete vršiti oznakom >10. Svako stilsko pravilo napisano nakon istog pravila za isti atribut pregaziće

prethodno napisano pravilo11. Inline stilovi pregaziće istoimena pravila napisana u klasnim stilovima

Rukovanje CSS-om kroz HTMLJedinica: 17 od 17

Zaključno sa onima iz prethodne lekcije, imamo sve informacije potrebne za rukovanje CSS-om - sintaksu i pravila. Ostaje još samo da se upoznamo sa naprednim principima korišćenja.

Pozicioniranje elemenata

Verovatno ste do sada naučili da u HTML-u ne možete svaki element da stavite gde hoćete, već da morate poštovati određenu hijerarhiju elemenata i na osnovu nje gradite dokument. CSS nudi nekoliko opcija koje pomažu u ovom procesu. Da bismo ih razumeli, potrebno je da se podsetimo pojma relativnog i apsolutnog.

U kontekstu HTML elemenata, ovo znači da elementi mogu biti pozicionirani relativno u odnosu na druge elemente ili apsolutno, u odnosu na kontejner u kome se nalaze. Ukoliko je pozicioniranje relativno, element je sastavni deo grupe i svaka promena na toj grupi može uticati i na njega, dok se u suprotnom element nalazi na zasebnom nivou i ni jedan drugi element ne može uticati na njega. Ovi nivoi preuzeli su naziv lejeri (Layers) iz grafičkih programa.

Ako pažljivo pogledate sliku (levo je relativno pozicioniranje, a desno apsolutno) naslutićete jedan problem u pristupu apsolutnog pozicionirajna. Taj problem je mogućnost prekrivanja sadržaja jednog elementa drugim. Zbog toga, kada se apsolutno pozicioniraju elementi, pored samih koordinata elementa (X i Y), postoji i takozvani Z faktor ili z-index, koji predstavlja treću koordinatu objekta, odnosno, “dubinu” na kojoj se nalazi.

Da bismo deklarisali tip pozicioniranja nekog elementa (ili stila) koristimo pravilo: position. Postoji pet vrednosti koje ovo pravilo može prihvatiti:

1. static (podrazumevano, element se vezuje za ostale elemente strane), 2. absolute (orjentiše se prema koordinatama u odnosu na roditeljski element), 3. fixed (vezuje se za koordinate pretraživača), 4. inherit (nasleđuje parametre od roditeljskog elementa) i 5. relative (relativno u odnosu na roditeljski element).

Pogledajmo primer:

<div style="position: absolute; top: 100px; left: 100px;">moj element</div>

Ovaj primer postaviće element na sto tačaka od vrha strana i sto tačaka od leve ivice strane.

Ove koordinate određujemo pravilima top i left, a osim ova dva pravila, CSS poznaje i ređe korišćeno pravilo right.

Prilikom korišćenja ovog jednostavnog principa, treba obratiti pažnju na neke osobenosti. Primer koji smo napravili pozicionira naš element apsolutno, u odnosu na roditeljski element, koji je u ovom slučaju HTML, odnosno, sam dokument.

Po toj logici bismo mogli zaključiti da će, ako unesemo sledeći kod, “moj element” biti pozicioniran apsolutno u odnosu na “RODITELJSKI ELEMENT” i samim tim udaljen po deset tačaka od vrha i leve ivice ovog elementa.

<div> RODITELJSKI ELEMENT <div style="position: absolute; top: 10px; left: 10px;">moj element</div></div>

Ipak, ako isprobate ovaj primer, dobićete sledeći rezultat:

Umesto da se pozicionira na deset tačaka gore i levo od roditeljskog elementa, “moj element” je pozicioniran deset tačaka gore i levo u odnosu na stranu. Uzrok tome je što nismo ispoštovali jedno važno pravilo vezano za apsolutno pozicioniranje: roditelj elementa koji želimo da apsolutno pozicioniramo, mora imati position pravilo.

<div style="position: relative;"> RODITELJSKI ELEMENT <div style="position: absolute; top: 10px; left: 10px;">moj element</div></div>

Ovo pravilo ne mora imati vrednost absolute, ali mora postojati. Rezultat je sada dobar.

Ako Vam se čini da se “moj element” po visini nije pravilno pozicionirao (da je previše visoko), ne zaboravite da početak roditeljskog elementa predstavlja njegovu najvišu tačku, a ne tačku gde se završava prvi red teksta.

Takođe, u malopređašnjem primeru je možda zbunjivo to što su oba elementa počela u istoj tački, iako je jedan imao apsolutno pozicioniranje 10, a drugi nije ni bio pozicioniran (tako da mu je pozicija 0). Ovo je savršeno u redu, jer, svaki HTML dokument ima podrazumevanu marginu gore i levo i svi elementi počinju od te margine (do sada svi primeri koje smo pravili nisu bili slepljeni uz ivicu strane već 10 tačaka odmaknuti od nje). Tu marginu je poštovao i roditeljski element. Sa druge strane, “moj element” je imao eksplicitno pozicioniranje na deset tačaka od gornje i leve ivice strane, što ga je smestilo na isto mesto gde i roditeljski element, ali pod potpuno drugačijim okolnostima.

Naravno, ovu automatsku marginu možete jednostavno eliminisati podešavanjem body stila (margin: 0px;).

Pominjali smo malopre i problem preklapanja elemenata. Da bismo simulirali ovaj problem, modifikovaćemo malo malopređašnji kod (možete obrisati ostatak i ostaviti samo ova dva elementa)

<div style="position: absolute; top: 10px; left: 10px; border: 1px solid; background-color: white;">moj element</div><div style="position: absolute; top: 18px; left: 18px; border: 1px solid; background-color: white;">moj element</div>

Rezultat je da je drugi element preklopio prvi, jer se jednostavno nalazi na višem nivou od njega, a pri tom imaju preklapajuće delove. Ovi nivoi identifikuju se po brojevima pri čemu manji broj predstavlja niži sloj.

Na primer, ako bismo želeli da prvi element iz primera preklopi drugi element, dodali bismo sledeću izmenu:

<div style="position: absolute; top: 10px; left: 10px; border: 1px solid; background-color: white; z-index: 1;">moj element</div><div style="position: absolute; top: 18px; left: 18px; border: 1px solid; background-color: white;">moj element</div>

Vrednosti z-index-a mogu ići i u minus.

Kada govorimo o podelementima, postoji još jedna stvar na koju treba da obratimo pažnju, iako ona nije uvek vezana za pozicioniranje.

Pogledajmo sledeći primer i njegov rezultat.

<div style=" position:relative; width: 200px; border: solid 1px; height: 100px;"><div style="position: absolute; left: 50px; top: 50px; border: 1px solid; width: 200px; height: 200px;" >moj element</div></div>

U primeru, “moj element” se nalazi unutar drugog elementa, ali njegovi pozicija i format premašuju veličinu roditeljskog elementa. Ovako nešto nam ponekad može biti korisno, ali često nećemo želeti da nam sadržaj izlazi iz okvira roditeljskog kontejnera. Ovo možemo podešavati pravilom overflow.

Dve najčešće korišćene vrednosti overflow pravila su:

• hidden - sakriva sadržaj koji izlazi iz okvira elementa i • scroll - postavlja klizače na roditeljski element

Verovatno ste do sada uvideli moć apsolutnog pozicioniranja. Ali, obratite pažnju da “moć dolazi sa odgovornošću”. U ovom slučaju, ta odgovornost se manifestuje tako što ćete morati da vodite računa o okolini ovako formatiranog elementa, jer, kao što ništa ne može da utiče na apsolutno pozicionirani element, tako ni on ne može da ima nikakav uticaj na okolinu. Što znači da ćete se verovatno malo pomučiti ako budete rukovali nekim dinamičkim sadržajima u sistemu apsolutnog pozicioniranja.

Margine i plutajući elementi

Margine u CSS-u funkcionišu prilično jednostavno. Sve što treba da znate, jeste da oko svake ivice svakog elementa možete postaviti marginu predstavljenu brojem tačaka. Ova margina napraviće odbijanje između elementa sa marginom i roditeljskog elementa (kontejnera).

<div style="border: 1px solid; background-color:#FF0000;"> <div style="border: 1px solid; background-color:#FFFFFF; margin: 15px;">moj element </div></div>

Margina ne mora biti simetrična, već može biti različita za svaku stranu. Ili je, na nekoj od strana ne mora ni biti.

Različite margine za različite delove objekata, unose se korišćenjem pojedinačnih ili grupa atributa:

margin-left, margin-right, margin-top, margin-bottom

ili

margin: gornja desna donja leva;

Što je pristup kakav možete koristiti i za padding i border.

Vrednost margine može biti i negativna.

Često se, za pozicioniranje kompletne Web strane, koristi sledeće margin pravilo: margin-left: auto; margin-right: auto;

što u kontekstu izgleda ovako:

<div style="border: 1px solid; background-color:#FFFFFF; width: 200px; margin-left: auto; margin-right: auto;">moj element</div>

Zapamtite ovo pravilo, jer će Vam sigurno ustrebati prilikom prvog koraka u pravljenju strane.

Prisetimo se sada primera iz prethodne lekcije, gde smo ostavili neobjašnjeno pravilo clear: both;. Ovo pravilo tiče se plutajućih elemenata - pravila.

Plutajuća pravila su pravila koja omogućavaju lepljenje elemenata za ivice kontejnera ili druge elemente. Iako (po ovom objašnjenju), ova pravila ne deluje bitno, u praksi, ona će vam itekako biti potrebna.

Ovo ćemo, kao i do sada, najbolje demonstrirati kroz primer.

Pogledajte ova dva div elementa:

<div style="border: 1px solid; background-color:#FFFFFF; width: 50px;">moj element</div><div style="border: 1px solid; background-color:#FFFFFF; width: 50px;">moj element</div>

Oni daju sledeći rezultat:

Kao što vidite, iako smo vrednost za širinu div tagova postavili na 50 tačaka i ovi tagovi nisu ničim ograničeni, oni i dalje zauzimaju čitavu širinu strane.

Dodajmo im sada plutajuća pravila:

<div style="border: 1px solid; background-color:#FFFFFF; width: 50px; float: left;">moj element</div><div style="border: 1px solid; background-color:#FFFFFF; width: 50px; float: left;">moj element</div>

Sada se elementi lepe za levu ivicu najbližeg objekta ili kontejnera. Kada ne želimo da se elementi dalje lepe za neku od ivica, pravilo float zamenimo pravilom clear, sa naznakom strane za koju želimo da isključimo plutanje. Pravilo clear prihvata i vrednost both (koja se najčešće i koristi) koja isključuje plutanje za obe strane (levu i desnu).

<div style="border: 1px solid; background-color:#FFFFFF; width: 50px; float: left;">moj element</div><div style="border: 1px solid; background-color:#FFFFFF; width: 50px; float: left;">moj element</div><div style="border: 1px solid; background-color:#FFFFFF; width: 50px; clear: both;">moj element</div>

Obratite pažnju da elementi koji imaju float pravilo imaju nezgodnu osobinu da na nekim pretraživačima ne utiču na roditeljski element.

<div style="border: 1px solid; width: 200px; height: 20px;"><div style="border: 1px solid; background-color:#FFFFFF; width: 50px; float:left;">moj element</div><div style="border: 1px solid; background-color:#FFFFFF; width: 50px; float:left;">moj element</div></div>

Pogledajte kako će ovaj primer biti reprezentovan u firefox-u:

Dispay i media

Kroz CSS možete manipulisati i time kako će neki element biti prikazan i da li će uopšte biti prikazan. U tu svrhu, koristi se pravilo display. Najbitnije vrednosti display pravila su: inline, block i none.

Setite se div tagova iz malopređašnjih primera. Oni su zauzimali celu širinu strane ukoliko im ne dodelimo float: left pravilo. Umesto toga, mogli smo im dodeliti i pravilo display:inline.

Ovo pravilo podrazumeva da element zauzme samo onoliko prostora koliko mu je potrebno da prikaže svoj sadržaj.

<div style="display: inline; border: 1px solid;">moj element</div><div style="display: inline; border: 1px solid;">moj element</div>

Ukoliko je vrednost display pravila block, element će zauzimati kompletnu širinu strane.

Elemente takođe možete i sakriti, za šta je potrebno da vrednost pravila display bude none:

<div style="display: inline; border: 1px solid;">vidljivi element</div><div style="display: none; border: 1px solid;">nevidljivi element</div>

U ovom slučaju, drugi element (nevidljivi element) neće biti vidljiv.

Upozoravamo Vas da na ovaj način ne sakrivate poverljive podatke, jer, iako nisu vidljivi na strani, ovi podaci su vidljivi u izvornom kodu strane.

Nekada će Vam ustrebati opcija štampanja Vaše strane. Štampanje Web strane je vrlo jednostavno i čak i ne mora imati veze sa nama (svaki pretraživač ima opciju za štampanje). Ali, ono što mi možemo da uradimo, to je da obezbedimo da naša strana bude drugačije stilizovana prilikom štampe, a drugačije prilikom emitovanja na ekran, za čim se često ukazuje potreba (na primer, nema potrebe da se štampa meni strane).

Da bismo ovo postigli, potrebno je da u stil ugradimo media selektor (ili media rule). Ovaj selektor radi tako što započinje blok u okviru koga će svi stilovi i pravila važiti samo za

medij koji taj selektor predstavlja. Blok započinje i završava se vitičastim zagradama i u okviru njega izvršava se klasična stilizacija (kao i da nije u bloku). Kada napravimo jedan blok, moramo napraviti i za drugi blok iste stilove, samo sa drugačijim pravilima. Na primer, ukoliko na strani imamo crni tekst sa crvenom podlogom. Ovaj tekst će biti vidljiv na strani, ali će, u štampi (pod uslovom da ne štampamo u boji) njegova vidljivost biti znatno slabija. Zato hoćemo da napravimo posebne stilove za prikaz u pretraživaču i posebne stilove za štampanje.

<style> @media screen { .mojStil { background-color: #FF0000; } } @media print { .mojStil { background-color: #FFFF00; } }</style><div class="mojStil">moj sadrzaj</div>

Primećujete da medija selektori imaju oznaku @ ispred naziva, a zatim ide i vrednost (screen ili print). Nakon toga, slede standardna, već pomenuta pravila. Blokovi počinju i završavaju se sa vitičastim zagradama, a u blokovima su istoimeni stilovi sa različitim pravilima.


1. Elementi na strani mogu biti pozicionirani relativno i apsolutno2. Apsolutno pozicioniranje u odnosu na roditeljski element zahteva da taj roditeljski

element sadrži position pravilo3. Moguće je kontrolisati dubinu apsolutno pozicioniranih elemenata (pravilom z-

index)4. Apsolutno pozicionirani elementi nemaju uticaj na ostale elemente5. Margina određuje prazan prostor između spoljne ivice elementa i njegovog

kontejnera.6. Margine se mogu posebno podešavati za svaku ivicu elementa7. Elementi mogu plutati levo ili desno u kontejneru8. Moguće je prikazati ili sakriti elemente pravilom: display.9. Moguće je prikazati različit stilski sadržaj u odnosu na izlazni medij.

10. Medija selektor ima oznaku @ ispred naziva.

95132283 uvod u html i css skripta

Documents