Uvod u HTML i CSS

Vredi kredita:3400 | Ukupno osvojeno: 13%

Opis kursa
Ovaj kurs sadri osnovne i napredne tehnike rukovanja HTML-om i CSS-om. Obrauje kompletan proces kreiranja dokumenata, potujui html-validaciona i Internet pravila. Zastupljeni su najbitniji HTML elementi i najee koriena 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 potujui standardne konvencije i validaciju.

Osnove HTML-a
1.1 Osnove i nain funkcionisanja HTML-a 1.2 Struktura HTML-a elementi, atributi i tagovi 1.3 Struktura Web strane

Osnove i nain funkcionisanja HTML-a

Jedinica: 1 od 17

Pojava Interneta i HTML-a

Za zvanian trenutak nastanka HTML-a podrazumeva se 1990. godina, kada su proizvedeni i putem mree testirani prvi Hypertext fajlovi. U tom trenutku, upravo je poinjala ekspanzija Interneta i bio je potreban dobar jezik koji e omoguiti kompaktnu serijalizaciju podataka i jednostavnost rukovanja. Sam Internet postojao je (u razliitim oblicima) i mnogo ranije. Prva umreavanja ARPANET sistema dogodila su se 1969. godine, tako da se, obzirom da se ARPANET smatra za direktnu preteu Interneta, ova godina moe 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 sluaju, samo kao skraenica za re Internetwork iz naziva protokola, ali kasnije (1980) i kao naziv za itavu mreu. Ova infrastruktura nastavila je svoje rapidno irenje po Americi i Japanu tokom osamdesetih godina prolog veka, da bi konano, 1989. godine poela da biva prihvaena i

u ostatku sveta, poevi od Evrope. Ovo je i godina kada su ve poinjali da se pojavljuju prvi ISP-i (Internet Service Provider), odnosno, kada je Internet poeo da biva komercijalan i dostupan irem broju korisnika.

Web Internet
Danas, prva asocijacija na re Internet jeste Web pretraiva (Internet Explorer, Mozilla FireFox, Opera...) i njegov sadraj. to zapravo i nije pravilno. Sam Internet, samo je tehnologija koja opsluuje 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 sluaju Interneta, Internet bi bio autoput, a Web bi bila vozila koja ga koriste. Zatvorena umreena struktura koja poiva na TCP/IP protokolu ali nije deo Interneta, naziva se Intranet.

HTTP protokol
Prilikom kretanja kroz Internet, Web stranice najee 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 moe zbuniti. Zapravo, ovo su protokoli koji funkcioniu u dve razliite dimenzije. Sam TCP/IP je protokol niskog nivoa (transportni nivo) koji slui za komunikaciju dva raunara izmeu sebe, dok je HTTP protokol koji predstavlja nain 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 logino pitanje, da li ovo znai 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 vri se FTP (File Transfer Protocol) protokolom, HTTPS protokol omoguava transport kriptovanog sadraja...

Web klijent
Iako pomenuti protokoli moda deluju zastraujue, oni zapravo ne treba da nas brinu. Pre svega, zato to je rukovanje njima prilino jednostavno, a pored toga i zato to mi nismo ti koji e njima rukovati (bar ne u ovoj, poetnoj fazi Web programiranja). Vratimo se na primer sa telefonskim razgovorom sa Japanom. ta ako bismo eleli da bilo kojoj osobi koja ne zna japanski, omoguimo komunikaciju sa sagovornikom iz Japana? Bila bi nam potrebna naprava za prevoenje sa njegovog jezika na japanski. U sluaju Interneta, ovakva naprava postoji i naziva se Web pretraiva (Internet Explorer, Mozilla

FireFox, Opera itd). Web pretraiva je zapravo program koji radi mnogo vie od komunikacije sa Internetom putem HTTP protokola. Ovo je program koji nam omoguava i pamenje adresa, kreiranje lista omiljenih sajtova, pamenje ifara i korisnikih 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, kljuna taka u funkcionalnosti Web pretraivaa, odnosno, pomenuta naprava za prevoenje. esto se u programerskom argonu i ne pominje re pretraiva, ve User Agent, ali svakako, generalan naziv za aplikaciju koja se nalazi na korisnikoj 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 pretraivau. Korisnik koji koristi neki od ovih programa, esto i ne zna da je unosom eljene adrese u njega i pritiskanjem tastera GO, aktivirao seriju dogaaja HTTP protokola. Ipak, lako je primetiti, da sve adrese standardnih (bez enkripcije i sl.) Web sajtova na Internetu sadre prefiks http. Npr. adresa Google pretraivaa zapravo nije www.google.com, ve http://www.google.com pa je jasno da http sa poetka adrese u stvari predstavlja protokol koji se koristi za rukovanje tom adresom. Pored protokola, ostatak adrese predstavlja tanu lokaciju na kojoj se odreeni dokument (resurs) nalazi. Ova adresa naziva se URI (Uniform Resource Identifier), odnosno, URL (Uniform Resource Locator). Razlika izmeu ova dva je to je URI uopten naziv za bilo koji Uniform Resource, koji moe biti URN, URC ili URL (Name, Characteristics, Locator).

Web server
Ako bi, iz primera sa telefonskim razgovorom sa Japanom, nas predstavljao User Agent (Web pretraiva/Web klijent), onda bi sagovornika iz Japana predstavljao Web server. S tim to, je za razliku od ivog sagovornika, Web server, ma koliko bio dinamian, fiksna struktura koja je u stanju da izvrava samo programirane funkcije (posao Web programera upravo i jeste uvoenje dinamike i funkcionalnosti na Web server prema svojim, ili potrebama poruioca). Dakle, Web server je program koji ima zadatak da to bolje odgovori na zahteve klijenta. Ali, Web server predstavlja i sam ureaj (raunar) na kome se taj program izvrava, pa tako pojam Web servera ima dva znaenja. Za razliku od desktop programiranja (pravljenja programa koje se izvravaju na klijentskom raunaru) Web programiranje ima malo drugaiji sistem razmiljanja i funkcionisanja koji je, iako isprva deluje malo tei za razumevanje, zapravo, izuzetno jednostavan. Kada kreiramo Web aplikaciju ili sajt, mi predstavljamo Web server i funkcioniemo 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 nain, i jedini nain da vidimo ta smo uistinu uradili jeste da se postavimo u ulogu klijenta. Iz ovoga ne treba

zakljuiti da Web server nije u stanju da funkcionie bez prethodnog programiranja. Svaki Web server (program) ima podrazumevanu funkcionalnost, na ijem elu je sistem za pronalaenje i emitovanje strana naznaenih u klijentskom zahtevu, pa e tako svaki validan fajl koji postavimo na Web server moi da bude pronaen i emitovan unosom pravilne adrese na klijentu. Svaki Web server poseduje i sistem za startovanje korisnikih programa u svom kontekstu (CGI - Common Gateway Interface), to omoguava kreiranje dinamikih sadraaja. Ali ono to je za nas bitno u ovom trenutku, jeste da je Web server u stanju da na osnovu razliitih faktora stvori razliit sadraj, ali da na kraju, taj sadraj 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 uproavanjem. HTML je skraenica za HyperText Markup Language. Hypertext je tekst koji u sebi sadri i dodatne informacije, pre svega, referencu (hyperlink) na neki drugi deo teksta, dok Markup Language znai da se radi o jeziku simbola (tagova). Ovo HTML zapravo i jeste, mnogo teksta opisanog jezikom simbola i mogunou kretanja kroz taj tekst putem linkova. Elementi koji pokreu ovaj mehanizam, na samim Web stranama se ne vide. To je zato to klijent emituje korisniku preraen i formatiran sadraj onako kako ga HTML opisuje. Veina pretraivaa sadri 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 nain otvorite bilo koju Web stranu videete da je razlika izmeu ova dva sadraja drastina. Na primer, pogledajmo kako izgleda slika naslovne strane pretraivaa Google i slika koda koji tu stranu opisuje.

Koliina informacija koju korisnik moe da vidi i onih koje opisuju stranu se veoma razlikuju. To je delimino zbog toga to prezentovanje sadraja korisniku na specifian nain (npr. hiperlink), zahteva dodatni opis tog sadraja. Npr. da bi tekst moj link bio vidljiv kao link ka Google-u u pretraivau, potrebno je smestiti ga u tag: <a href=http://www.google.com>moj link</a> Ali, pored toga, veliku koliinu teksta za opis ove strane uzrokuje i odreena koliina skripte implementirane u HTML. Ovaj skriptirani dodatak, iako ivi implementiran u HTML-u, tehniki nije deo HTML jezika. Sa druge strane, oigledno jeste deo HTML dokumenta i postoji i izvrava se u njemu. Postoje razliite vrste klijentskih Web skript jezika, kojima je osnovna zajednika karakteristika to da se obino nalaze implementirani u HTML sadraj. 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 (dinamikih) strana, ija se dinamika dogaa 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 mogunost startovanja zasebnih aplikacija u okviru jedne Web strane. Korisnici Interneta se svakodnevno susreu sa ovakvim sluajevima, jer skoro da nema strane koja na sebi nema bar jednu Flash aplikaciju. Neto su rei Java apleti i silverlight aplikacije. Za razliku od JavaScript-a koji interaguje sa HTML-om kroz DOM strukturu, ove aplikacije funkcioniu potpuno nezavisno od HTML-a i strana na kojoj se nalaze slui im samo kao domain 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 neograniene mogunosti 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 koliinom podataka. esto se dogaa da poetnici meaju programske jezike JavaScript i Javu. Zapamtite da ovo nisu isti jezici i da su im sintakse, implementacije i namena potpuno drugaiji.

MIME
Je skraenica od Multipurpose Internet Mail Extensions i predstavlja definiciju tipa dokumenta kojim rukujemo na Internetu. Iako isprva osmiljen kako bi klasifikovao tipove podataka koji se prosleuju putem smtp mail servera, danas je osnova za rukovanje svim fajlovima na http protokolu. Jasno je iz dosadanjeg teksta da HTML nije programski jezik u pravom smislu, ve sistem za serijalizaciju tekstualnog sadraja. Ono to on u izvornom obliku moe, jeste da prikae neki sadraj i dodeli mu neke karakteristike. Ono to ne moe, to je da izvri bilo kakvu funkcionalnost nad tim sadrajem.

Alati
Obzirom da znamo da se HTML dokumenti skladite u obinim 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 pretraiva (Browser).

Za kreiranje HTML-a obilno se koriste komercijalni alati (Dreamweaver, Front Page, Visual Studio) ili besplatni (kompozer, notepad++). Poto emo u ovom kursu raditi iskljuivo sa kodom, draemo se minimalistikog (i besplatnog) pristupa, pa emo kod pisati u notepad++ editoru, a proveravati ga u Internet Explorer-u (verziji sedam ili veoj) i Mozilla Firefox-u (verziji tri i veoj). 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

Najvanije iz lekcije: 1. 2. 3. 4. 5. HTML je jezik tagova koji se koristi za izgradnju Web strana Internet je institucija koja omoguava funkcionisanje Web-a DHTML je spoj HTML-a, DOM-a, JavaScript-a i CSS-a Web server je raunar ili program koji skladiti i prosleuje HTML dokumente Web klijent je aplikacija koja preuzima i parsira HTML kod i emituje ga u formatiranoj formi 6. Svakoj Web strani koja se nalazi na klijentu mogue je pregledati HTML kod 7. Web je sistem za traenje, skladitenje i preuzimanje internet resursa

Struktura HTML-a elementi, atributi i tagovi

Jedinica: 2 od 17 U prethodnoj lekciji, pomenuli smo da je pretraiva osnovno sredstvo za parsiranje i prikazivanje HTML dokumenata. Takoe smo pomenuli i da se HTML dokumenti u Web strukturi prosleuju klijentu uz pomo Web servera. Ipak, da bi pregledali jedan HTML dokument, nije nam neophodan Web server. HTML dokument je mogue otvoriti direktno sa bilo koje lokacije (fajl sistema, na primer) uz pomo pretraivaa. Potrebno je samo da taj dokument poseduje validnu HTML strukturu i da ima ekstenziju htm ili html, pri emu je tip fajla obian ASCII tekst, pa ga je mogue stvoriti i u najobinijem programu za unos teksta (npr. Notepad). Ukoliko je ovo pravilo ispotovano, pretraiva e otvoriti i prikazati sadraj fajla, pa ak i ako ne potuje HTML konvencije. Na primer, ukoliko napravimo tekstualni fajl koji u sadraju ima samo tekst moj tekst, i snimimo ga sa ekstenzijom .html ili .htm (ove dve ekstenzije su sinonim za identian tip

fajla) i zatim otvorimo taj fajl, u pretraivau e biti emitovan tekst moj tekst. Ukoliko pogledamo kod strane, videemo da je identian sa napravljenim tekst fajlom. Ovaj sadraj, iako vidljiv u pretraivau, ne predstavlja validnu HTML strukturu i ne moe se ni pored ekstenzije nazvati pravim HTML dokumentom, jer ne poseduje HTML elemente.

Elementi i atributi
Verovatno najrasprostranjeniji nain za serijalizaciju podataka danas jeste jezik tagova i skoro da ne postoji program koji informacije ne izvlai iz jedne ovakve strukture. Isti sistem komunikacije koristi i HTML jezik, pa je zato neophodno upoznati se sa nainima njegovog funkcionisanja da bi se HTML uopte nauio. Danas postoje mnogi programi koji grafiki prikaz automatski prevode u HTML kod, pa se stie utisak da je mogue napraviti HTML dokument i bez znanja o njemu, ali za bilo kakvu ozbiljniju intervenciju na jednoj Web strani, ovakvi programi esto nisu dovoljno moni i potrebno je ui u sr problema i runo rukovati njime kroz ist HTML kod. Svaki HTML kod sastoji se od sadraja zatvorenog u tagove. Ovi tagovi zapravo nazivaju se elementi u tom kodu. Na primer, ako bi eleli da malopreanji primer ispotuje strukturu elemenata i atributa, trebalo bi da glasi ovako: <h>Moj tekst</h> Ovaj primer predstavlja jedan element HTML dokumenta. I u njemu primeujemo odreene osobenosti. Znake < i >, slovo h i znak /. Da bi se neto moglo nazvati tagom, mora da bude uokvireno u znake < i > . U primeru, moe se rei da postoje dva taga, jedan ispred i jedan iza teksta Moj tekst. Jedina razlika meu njima je u tome to drugi tag poseduje i dodatak / ispred slova. Taj dodatak oznaava da je u pitanju zavrni (zatvarajui) tag. Prvi tag je onda logino, otvarajui tag. Da bi jedna tag struktura (poput ove nae) bila validna, ona mora biti otvorena i zatvorena (upravo kao na primeru). Ovakva struktura se, obzirom da dva taga uvek idu zajedno, takoe naziva tag, tako da bi konano mogli rei da je primer: <h>Moj tekst</h> jedan pravilan tag. Slovo h oznaava da je u pitanju naslovni HTML tag (Heading), ali da bi saznali zato se on nalazi ba tu, potrebno je da se prethodno upoznamo sa pojmom elemenata. Na primer, pored toga to predstavlja jedan tag, takoe predstavlja i jedan element, odnosno ima osobine elementa. A osnovne osobine elementa su da moe sadrati druge elemente kao i atribute, to na primer moe.

Recimo da elimo da napravimo popis svih kua jednog naselja, tako to bi napravili formular za svakog vlasnika kue, u koji bi mogao da unese podatke o svojoj kui. Da bi ovaj formular napravili, morali bi da znamo koje sve osobine jedna kua moe imati. Tako bi na kraju, dobili dokument koji bi imao polja za unos: adrese, kvadrature, broja spratova, veliine placa... Kada bi eleli da formatiramo ovaj spisak kroz tagove, mogli bi poeti ovako: <kuca>Jurija <kuca>Jurija <kuca>Jurija <kuca>Jurija Gagarina Gagarina Gagarina Gagarina 1</kuca> 2</kuca> 3</kuca> 4</kuca>

Ova lista predstavlja etiri razliite kue, sa etiri razliite adrese. Kada bi sekvencijalno itali jedan po jedan red iz ovog spiska, lako bi mogli da dobavimo adrese svake kue ponaosob. Ali, na dokumentu iz primera potrebno je jo informacija osim adrese. Kvadratura, broj spratova... to su informacije koje napravljeni spisak kua ne prua. Da bi dopunili spisak moemo 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 kue, sa razliitim osobinama i da svaka kua ima podelemente sa informacijama. Iz ovoga zakljuujemo da je mogue umetati elemente u druge elemente, odnosno, vriti gnjeenje elemenata. Na ovaj nain mogli bi otii i dublje u strukturu elemenata i gnjezditi ih beskonano. <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 mogunost pamenja podataka i u svojim atributima. Ovi atributi nalaze se u otvarajuem delu jednog taga i obeleavaju se tako to se nazivu eljenog atributa, znakom jednakosti dodeli njegova vrednost. <kuca adresa="Jurija Gagarina 1"></kuca> Jedan element tako moe sadrati atribute i informacije u njima, a da pri tom uopte nema podelemente, sve dok neki od podataka koje sadri ne mora da bude lista (kao to je sluaj sa spratovima u prethodnom primeru). U tom sluaju, nae kue 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 kue u samo tri reda, i to samo kroz atribute. Obzirom da su sadraji elemenata prazni (nema nita unutar tagova kuca) ne moraju da postoje u ovom obliku, ve se mogu zapisati i skraeno: <kuca adresa="Jurija Gagarina 1" kvadratura="75" brojSpratova="1" /> Ovakav zapis taga je potpuno validan, i naziva se samozatvarajui tag (samozatvarajui tagovi su vie pravilo XML jezika nego HTML jezika, ali obzirom da se ovde bavimo xHTML-om koji podrazumeva neke XML osobenosti, moemo ga usvojiti) Prilikom kreiranja tagova, treba obratiti panju na jo neke osobenosti. Iako fleksibilan, jezik tagova neke stvari ne dozvoljava. Kada se kae ne dozvoljava, to ne mora obavezno znaiti da podaci nee biti prikazani na strani ukoliko napravimo greku, ali najee, nepravilno rukovanje dovee do semantiki nepravilnog rezultata na izlazu, iji emo uzrok teko uspeti da pronaemo. 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 uiniti kroz samozatvarajui tag ili uz pomo dva (otvarajueg i zatvarajueg) taga, nije tehniki bitno. Bitno je samo da svaki otvoreni tag mora biti i zatvoren. <mojTag></mojTag> <mojTag /> Takoe, jedan tag moe obuhvatiti neogranieno drugih tagova, ali se svi ti tagovi moraju i zavriti u okviru taga u kome su napravljeni. Ovaj primer je dobar: <mojTag> <mojUnutrasnjiTag> <mojUnutrasnjiTag> Sadraj unutranjeg taga </mojUnutrasnjiTag> </mojUnutrasnjiTag> </mojTag> Ali ovaj primer nije: <mojTag> <mojUnutrasnjiTag> Sadraj unutranjeg taga </mojTag> </mojUnutrasnjiTag> Ovakve vrste greaka se ponekad dogaaju kada se kombinuje rad sa aplikacijom za dizajniranje i runog unosa HTML koda i umeju da budu prilino teke za lociranje u veim dokumentima. Najbolja prevencija je paljiv unos tagova. Kada je u pitanju prazan prostor izmeu tagova, generalno, on se ne uzima u obzir od strane parsera, tako da bi tagovi: <mojTag /> <mojDrugiTag /> i

<mojTag /><mojDrugiTag /> ...trebalo da daju identian rezultat. Na alost, iako je prikazani rezultat ovih tagova identian, ne itaju ga svi Web pretraivai na isti nain. Zbog ega posle moe doi 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 izmeu elemenata u HTML strani ipak ima neko znaenje. to se imenovanja tagova tie, tu takoe postoje odreena pravila. Iako se mi u ovom kursu neemo preterano baviti kreiranjem sopstvenih tagova, ve korienjem gotovih HTML tagova, treba napomenuti da nazivi elemenata i atributa ne smeju imati razmak izmeu rei i ne smeju poinjati brojevima ni specijalnim karakterima (#,$,%...), pri emu je veliina slova nebitna (nije osetljiv na velika i mala slova). Ovo nije dobro: <@mojElement></@mojElement> <moj Element></moj Element> Treba takoe paziti i kakav se sadraj smeta u sadraj tagova. Obzirom da su same oznake tagova takoe i matematiki simboli za vee i manje, nije nelogino da se pretraiva zbuni kada mu prosledimo na primer, tag sledeeg sadraja u kome samo elimo da prikaemo korisniku da je broj 10 manji od neke promenljive a. <p> 10<a </p> U ovom sluaju, pretraiva e se zbuniti, i shvatie oznaku manje kao poetak taga a, a obzirom da a u ovom sluaju nismo zamislili kao tag, pa samim tim i nema osobine elementa, pretraiva e to shvatiti kao greku i emitovae nepravilan izlaz (bie emitovan samo broj 10). Ovo se reava vrlo jednostavno, tako to se umesto spornog simbola ubaci njegova reprezentacija u ASCII kodu, zbog ega on vie ne moe negativno da utie na parsiranje i prikazuje se korisniku u eljenom obliku. U sluaju znaka < , koristi se oznaka &lt; pa bi prepravljen primer izgledao ovako: <p> 10&lt;a </p> Ovaj kod, emitovae ispravan rezultat. Kada smo se upoznali sa pojmovima tagova, elemenata i atributa, napomenimo jo jednom da je HTML jezik koji poseduje ugraene nazive tagova koje emo upotrebljavati koristei samo osobine koje nam oni pruaju. Kompletno poznavanje HTML-a zapravo i podrazumeva ba to. Poznavanje svih tagova i atributa HTML-a.

Da li to znai da bi mogli napraviti sopstveni jezik tagova, koji bi bio razliit 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, mogue je uistinu koristiti jezik tagova i atributa za razliite namene i rukovanje razliitim oblicima podataka. Ali, u tom sluaju vie ne govorimo o HTML-u, ve o nekoj drugoj strukturi (XML i sl). Primeujemo takoe 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 prikae, odnosno, serijalizuje podatke. Najvanije iz lekcije: 1. 2. 3. 4. 5. 6. 7. HTML dokument je obian tekstualni fajl sa ekstenzijom html ili htm Svaki HTML dokument se sastoji od tagova Tagovi predstavljaju elemente i mogu imati podelemente Elementi mogu imati atribute Nazivi elemenata ne smeju poinjati brojem ili specijalnim karakterom Elementi se ne smeju preklapati Nazivi elemenata i atributa u HTML-u se mogu pisati velikim ili malim slovima

Struktura Web strane

Jedinica: 3 od 17 Iako smo obradili nain na koji funkcionie jezik elemenata i atributa (jezik tagova Markup jezik), pomenuli smo da kroz rad sa HTML-om neemo koristiti sopstvenu, ve ugraenu notaciju HTML-a. To znai da nazive elemenata i atributa neemo smiljati proizvoljno, ve emo koristiti postojee u zavisnosti od toga kakav efekat elimo da postignemo u svom dokumentu. Osim toga, osim pravila koje smo do sada nauili, kada se radi sa jezicima tagova, obino se podrazumeva jo jedno pravilo, a to je da, svaki dokument mora posedovati deklaraciju (u kojoj piu podaci o dokumentu i karakteristikama samog jezika) i koreni element, ispod koga se nalazi sama struktura dokumenta. Kada je u pitanju HTML, deklaracija obino podrazumeva verziju jezika i adresu fajla u kome se nalazi definicija za ovaj jezik. Ova deklaracija naziva se Document Type Declaration i smetena je na sam poetak 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 upuena Web pretraivau (zbog oznake ! nakon otvaranja taga). Instrukcija takoe moe biti upuena i Web serveru i prepoznaemo je (kao i instrukciju ptretraivau) tako to, obino, na svom poetku sadri specijalni karakter (npr. <? ,< % ... ).

to se tie DOCTYPE instrukcije (deklaracije), ona obino izgleda ovako: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1transitional.dtd"> emu uopte slui definicija tipa dokumenta? Poznato je da razliiti pretraivai na razliit nain interpretiraju HTML dokumente identinog sadraja. Ova pojava, osim to uznemirava korisnike tih dokumenata, jo vie uznemirava njihove kreatore, jer se zbog nje posao na kreiranju neke Web strane u najboljem sluaju udvostruuje. Ali, hipotetiki, stvari ne bi trebalo da funkcioniu tako. HTML se, iako prilino prost jezik tagova, zbog svoje ogromne upotrebe, tretira kao i svaki drugi jezik, pri emu su za njega klasifikovani standardi i pravila koja definie 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 funkcionie parsiranje odreenog dokumenta. Kada dizajner pone da pravi stranu, trebalo bi da odlui koju e verziju jezika koristiti, odnosno, na koji e nain graditi dokument, to se odnosi pre svega na stilsku komponentu (da li e stilovi biti implementirani u elemente ili zasebno kreirani). U zavisnosti od naina izgradnje dokumenta, zavisi i sam sadraj definicije tipa dokumenta (DOCTYPE). Pogledajmo ta jedan po jedan znae delovi definicije dokumenta:

HTML
Ovo je pravi trenutak da pomenemo da svaki HTML dokument treba da ima svoj koreni element, ispod koga poivaju svi ostali elementi. Oznaka HTML u deklaraciji naeg dokumenta oznaava 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 ponemo da gradimo stranu, ne moramo se ograniiti na standardne definicije, ve moemo kreirati i sopstvenu. U tom sluaju, umesto rei PUBLIC staviemo re SYSTEM, i nakon toga, pod navodnicima staviti lokaciju sopstvene definicije: <!DOCTYPE HTML SYSTEM "mojaDefinicija.dtd">

Definicija, takoe, moe biti i javna, ali u tom sluaju 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 oznaava da li je definicija prihvaena kao standard od strane nadlene institucije, W3C oznaava 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 nain (na primer, HTML ne podrava samozatvarajue tagove). To je upravo i jezik koji emo koristiti tokom ovog kursa. Re Transitional, podrazumeva da je dokument u Transitional modu, odnosno, da podrava stilizacione tagove u samom HTML-u. Za razliku od Transitional moda, Strict mod bi znaio da kompletna stilizacija strane mora da bude razdvojena od HTML koda, odnosno, logike strane. Postoji i trei mod, a to je Frames, ali, obzirom da se frejmovi tretiraju kao deplasirana tehnologija, neemo im davati posebnu panju u ovom odeljku. Da bismo ovo shvatili, potrebno je da na trenutak pomenemo CSS (Cascading Style Sheets), koji emo detaljno obraivati u drugoj polovini kursa. Dakle, CSS je jezik koji sadri iskljuivo stilske atribute (boje, pozicije, okvire, veliine...) 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 ugraeni atribut za boju: <table bgcolor="#FF0000"></table> ali taj element takoe moe prihvatiti i kompletan stil (sa bojom) iz CSS-a <table class="nekiCssStil"></table> U sluaju ova dva primera, prvi primer bi bio neprimeren za Strict mod jer je stilizacija izvrena unutar HTML elementa (i to HTML stilizacionim atributima), dok bi drugi primer bio validan, jer je stilizacija izvrena eksterno.

Pretraivai su, najee, bez obzira na navedeni dtd u stanju da renderuju valjano sve to HTML kod od njih zatrai, s tim to se ponekad desi da simulirajui pretpostavljeni tip rendera koji se ne poklapa sa definicijom tipa, mogu raditi u takozvanom Quirks modu. Tada pretraiva simulira stariju verziju pretraivaa, za koji pretpostavlja da odgovara verziji aktuelnog dokumenta. Osim Quirks moda, pretraiva poznaje i Standard mod. Konano, http://www.w3.org/TR/xHTML1/DTD/xHTML1transitional.dtd oznaava adresu definicije. Nemojte se brinuti ukoliko Vam ovo deluje komplikovano. Ovaj deo zapravo i nije neto to Web dizajner ili developer koriste esto. Veina alata kojima ete praviti HTML dokumente automatski generie DOCTYPE direktivu po najnovijim standardima. ak i ako ta deklaracija ne odgovara nainu na koji piemo HTML kod, ovaj kod e biti izvren valjano u veini sluajeva, jer svi noviji pretraivai 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 tie praktino 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, trei koji bi stilski karakterisali odreene grupacije i konano, 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 naeg dokumenta. HTML poseduje nekoliko ne preesto korienih atributa.

lan opisuje jezik korien u dokumentu dir opisuje pravac renderovanja dokumenta (moe biti s leva na desno i obrnuto) xmlns

Obzirom da emo u kursu obraivati xHTML (koji podrazumeva implementaciju HTML-a u XML odnosno, obrnuto), poslednji atribut, generalno nije nevaan, jer oznaava prostor imena za na HTML dokument. Sa druge strane, taj prostor imena je standardan i veina alata e ga sami napraviti, ak e ga i sam pretraiva podrazumevati i ako nije naznaen, pa osim ukoliko ne elimo da koristimo sopstveni prostor imena on i nije naroito relevantan za nas. Vie informacija o XML prostorima imena treba potraiti u kursevima koji se bave XML-om.

Osim HTML elementa, u jednom HTML dokumentu postoji jo tagova koji se tiu same konstrukcije dokumenta. To su head, meta, link... Ovi tagovi ne prikazuju nita krajnjem korisniku, ali ine logiku konstrukciju samog dokumenta, od ega umnogome zavisi to kako e se dokument ponaati kada ga prezentujemo. Obzirom da je koncepcija HTML-a bazirana na emitovanju i formatiranju teksta, postoje raznovrsni tagovi koji imaju ba taj zadatak. Da grupiu odreene sadrajne celine u logike elemente, kako bi se njima moglo eksplicitno pristupati. Ovaj koncept, iako je s poetka bio u skladu sa navedenim opisom, danas ga je uveliko pregazio, jer je rukovanje logikim 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 ugraene i tagove za stilizaciju. Na primer, ukoliko neki tekst stavimo u tag <h1>Moj tekst</h1> pretraiva e emitovati tekst u formatu naslova. Konano, ve smo pominjali skript tagove. Kada se pojavi ovakav tag, pretraiva (ili server ukoliko je serverska skripta u pitanju) prekida da tretira taj deo dokumenta kao HTML i poinje sa izvravanjem skripte koja se nalazi u skript tagovima. Nakon zavretka skripte i zatvaranja tagova, pretraiva 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 praktino najbitniji tag HTML-a. Ali, ba zbog toga, njemu emo kroz kurs posvetiti posebnu panju. Najvanije iz lekcije: 1. Svaki validan HTML dokument poseduje DOCTYPE direktivu 2. Direktive pretraivau poinju sa znakom ! 3. Skript tagovi poinju reju 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 element 6. Koreni element u HTML-u se naziva HTML 7. Svaki HTML dokument poseduje head i body tagove 8. Postoje ugraeni stilizacioni tagovi u HTML-u (h,p,font...)

9. Prilikom parsiranja HTML dokumenta, pretraiva nakon nailaenja na Script tag, prekida parsiranje HTML-a, poinje sa parsiranjem (interpretacijom) skripte, a zatim nastavlja sa parsiranjem HTML-a.

Osnovni tagovi HTML-a

2.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 viem, a neki na niem nivou. Mi emo ovaj put preskoiti objekat najvieg nivoga (prozor u kome se emituje dokument) i zadrati 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, pretraiva (parser) se brine za to da taj kod bude formatiran i adekvatno grafiki prikazan. U tu brigu spada i to da head tag ne bude vidljiv na web strani (U semantikom smislu. Ukoliko stavite neto u head tag, bie ipak emitovano na strani). To je tag koji iako sadri prilian broj informacija, skladiti pre svega neke podatke vezane za stranu (metapodatke). Kada pretraiva vidi head tag, on ga proita, obradi njegov sadraj i nastavi dalje sa itanjem dokumenta. To ne znai da je ovaj tag nebitan. tavie, u njemu se nalaze mnoge stvari koje utiu na osobine strane. Najbitnije stvari koje ete nai u ovom tagu su meta tagovi i reference na eksterne fajlove. Takoe, tu se nalazi i podatak o naslovu strane. Pogledajmo jednu html strukturu (zbog preglednosti, neemo unositi DOCTYPE deklaraciju u primere ve emo poinjati od html elementa. Kada budete vebali, unesite i DOCTYPE): <html> <head> </head>

<body> </body> </html>

Ova struktura je validna ali nita ne prikazuje. Pokuajmo za poetak da dodamo ovom dokumentu naslov <html> <head> <title>Moj dokument</title> </head> <body> </body> </html> Ako sada ponovo uitamo dokument, videemo da se u zaglavlju pretraivaa nalazi i postavljeni naslov (title).

Title tag ima dvostruko znaenje. Prvo (i manje bitno) je naravno za korisnika koji otvara stranu i moe videti naslov te strane u pretraivau (IE, firefox...). A drugo, za web crawler-e i nain kako e oni parsirati nau stranu. U poslednje vreme, pozicioniranje strana na web pretraivaima (google, yahoo) je faktor bitan kao i sam sadaj tih strana. Zato je bitno da svaka strana u naslovu ima to detaljniji (a opet dovoljno kratak) opis svog sadraja, 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, imaemo ponavljanje naslova strane, to nije dobro. Pravilno naslovljavanje strana bilo bi: 1. Prodavnica automobila Link Naslovna strana 2. Prodavnica automobila Link Najnoviji automobili 3. Prodavnica automobila Link Kontakt strana Ovo je jo bitnije kada se rezultati strane grade dinamiki. U tom sluaju, 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 moe biti: www.prodavnicaautomobilalink.com/index.php?proizvodid=35 iz

ega teko da moe da izvue neto na osnovu ega e omoguiti da osoba koja trai Renault Clio uopte sazna za na sajt. Pored pomenutog, ukoliko korisnik stavi nau stranicu u listu omiljenih (favorites) strana, ona e biti prezentovana ba kroz naslov strane. Sledei element head elementa su meta tagovi. Ovo su tagovi koji pruaju neke dodatne informacije o strani i (kao i sve ostalo u head tagu) takoe nisu vidljive korisniku. Iako se meta tag moe podrazumevati pod jednom oblau, postoje nekoliko vrsta meta tagova, koje ine odreene logike celine.

Meta Description tag

Ovo je tag koji daje kratak opis nae strane. Bitan je jer neki crawleri skladite ovu informaciju i uzimaju je u obzir prilikom pretrage. Postoji teorija (prilino realna) da ne koriste svi crawleri ovaj tag kao relevantnu informaciju o nekoj strani, ali je ipak kreiranje opisa strane dobra praksa. Dodajmo naem 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 karakterie kao description. U atributu content, nalazi se, naravno, sadraj ovog meta taga.

Meta Keywords tag

Slino description tag-u, i meta keywords tag slui da bi pomogao crawleru da klasifikuje i pozicionira nau stranu u bazi web pretraivaa. Takoe, ni ovaj tag vie nije relevantan kod veine pretraivaa, pa je njegova upotreba vie stvar pedantnosti u kreiranju strane nego neto to e dati vidljive rezultate.

Upotrebljava se tako to se u content atribut stavljaju rei i sinonimi koji karakteriu sadraj 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 slue da bi se podigao rejting strane u rezultatima pretrage. Ukoliko bi eleli obrnuti rezultat, odnosno, da se strana uopte ne pojavljuje u rezultatima, mogli bi da dodamo robots metatag: <meta name="robots" content="noindex" /> Ukoliko crawler naie na ovaj tag na strani, jednostavno je ne obrauje. Sam pojam robots podrazumeva (u kontekstu web crawlera) dokumente koji ne treba da budu uzimani u obzir u pretrazi. Najee se na samom sajtu nalazi fajl pod nazivom robots.txt koji sadri spisak dokumenata i foldera koji ne treba da budu crawl-ovani, ali nije nepravilno (iako nije ba praktino) ni korienje robots meta tagova unutar samih strana (kao u naem primeru). Obzirom da elimo da promoviemo nau stranu, ovaj tag emo izostaviti iz primera.

Meta http-equiv tagovi

Svi web serveri, ma koliko se razlikovali u tehnikim detaljima, moraju da izvre 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 pronae dokument koji je traen u zahtevu i emituje ga browseru u vidu html koda, a ovaj ga zatim prevede u grafiki prepoznatljivu formu i emituje korisniku. Bitno je to da server odgovor emituje u obliku dve razdvojene celine. Jedna je http header koji sadri informacije o

dokumentu (koji je mime tip, veliina dokumenta, nain kodiranja...) a druga sam sadraj dokumenta. Na sadraj dokumenta moemo naravno da utiemo, jer je to upravo strana koju pravimo. Ali na zaglavlje (header) ne moemo uticati osim ako to eksplicitno ne naglasimo. To eksplicitno naglaavanje je upravo korienje 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 keiranje strana unutar browsera. Ovo je bitno kada strane koje kreiramo imaju dinamiki sadraj (nisu svaki put iste). U tom sluaju, dobro je onesposobiti keiranje, da bi eventualne izmene strane bile svaki put adekvatno aurirane kod korisnika. Ipak, browseri esto ne interpretiraju adekvatno ovu poruku header-a. Evo najsigurnijih naina da iskljuimo keiranje 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. Obino 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" type="text/css" /> rel="stylesheet"

Link tag ne treba meati 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 praktina primena link taga je za kreiranje favicon ikonica (ikonice sajta u adresbaru pretraivaa). Kada bi eleli da sopstvenu ikonicu postavimo u adresbar, dodali bi sledei tag u na dokument: <link rel="icon" type="image/ico" href="favicon.ico" />

Poto se strana nije ograniena samo na jedan link tag, a razliiti browseri razliito interpretiraju tagove za postavljanje favicon ikonica, siguran nain 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 nain, mogue je dodati i vie 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 moemo staviti i razne skript tagove (odnosno, same skripte) i najee su te skripte zapravo funkcije klijentskih skripti.

Kada browser pone da ita stranu, on parsira dokument red po red. Sve dok je sadraj koji parsira html, on radi standardno, ali, ako na nekom mestu naie na sadraj 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 naroito vano.

Frameset
Ve smo pomenuli da su frameset-ovi deplasirani u HTML-u. Osim to su robusni i teki za kreiranje ni sami crawleri ne rukuju njima dovoljno adekvatno. Ideja je da ako bi eleli da razdvojimo stranu na nekoliko razliitih celina, pri emu pod razliitim mislimo na potpuno razliite strane, upotrebili bi framesetove. Jednom reju, oni nam omoguavaju da sakupimo vie 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 sluaju body tag i ne postoji, jer emo ceo sadraj izvlaiti iz strana u okvirima). Sam set smo formatirali sledeim atributima: Rows i cols. Frameset se ponaa poput tabele. Sastoji se od polja, koja se dobijaju deobom seta na kolone i redove, pri emu svako polje moe da sadri jedan dokument. Da bi naglasili setu koliko elimo kolona (ili redova) popunjavamo atribute cols i rows. U ovom sluaju, cols atribut ukazuje na dve kolone veliine po 50% od ukupne veliine 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 * oznaava da e sadraj (u ovom sluaju red) ispuniti ceo preostali deo seta (za tu kolonu). Mogli smo na primer napisati i rows="50%,*". Tada bi strana bila podeljena na etiri razliite celine.

Pored ova dva atributa, primeujemo i atribute:

framespacing (razmak izmeu okvira), frameborder (da li e okviri biti oivieni), 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 uneen src atribut, koji predstavlja adresu strane koju e sadrati okvir. Na isti nain, u okvire moemo postaviti i sopstvene dokumente. Kada pretraiva (Google) vidi ovakav dokument, on nee pratraivati sadraje njegovih poddokumenata, ve samo opis seta. Ovako izgleda rezultat koda iz primera:

Body tag
Ovaj veoma vaan tag sadri sve to e korisnik videti kada otvori dokument i sve to se bude dogaalo dogaae 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 vie panje na standardne (i opcione) atribute. U primeru, body element sadri etiri atributa. To su bgcolor, link, vlink i text. Ovi atributi, respektivno, oznaavaju: boju pozadine dokumenta, boju hiperlinkova dokumenta, boju poseenih linkova dokumenta i boju teksta dokumenta i opcioni su. Same boje predstavljene su heksadecimalnim vrednostima (na ta ukazuje oznaka # ispred boje), ali mogue ih je reprezentovati i klasinim imenovanjem (crna-black, uta-yellow, plava-blue itd). Praksa korienja heksadecimalnih oznaka boja dobra je zbog toga to veina programa ima ugraen sistem za ovakvu reprezentaciju boja, to dosta olakava praktian rad (napravite boju u Photoshop-u, kopirate njen kod i prebacite u HTML kod). Vie rei o ovim atributima bie 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 tie izgleda, odnosno stila), a ako se prisetimo prethodnih lekcija, setiemo se da je razlika izmeu Transitional i Strict HTML moda ba to to Strict mod podrazumeva da se prezentacioni atributi ne koriste. To znai da ovaj set atributa nije po Strict standardu i da bi taj problem reili, 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 dogaaja), pri emu ne mogu, naravno, sve vrste elemenata podrati sve standarde, niti sve dogaaje.

Standardni atributi su: class Dodeljuje klasu elementu. Kada postoji definisana klasa (u CSS-u), ova klasa moe biti dodeljena elementu. Npr: <body class="mojStil" > dir Pravac kretanja teksta. S leva na desno ili obrnuto: <body dir="rtl" > U sluaju 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) id Ovo je verovatno jedan od najvanijih atributa u HTML-u. Svaki element koji poseduje unikatan id mogue je brzo i jednostavno programabilno pronai na strani. lang Odreuje koji e biti oficijelni jezik strane. Ovaj atribut moemo iskoristiti ako elimo da eksplicitno naglasimo da je naa strana pisana na odreenom jeziku, kako bi bila lake i efikasnije indeksirana od strane pretraivaa. Npr. <body lang="sr"> style Ovo je takoe izuzetno vaan atribut. Odnosno, ovo je i vie od atributa. U vrednosti ovog atributa nalaze se odreene (CSS) stilske komponente elementa. To znai da moemo stilizovati kompletan element kroz ovaj atribut, bez da pri tom uopte koristimo eksterni resurs. Sa druge strane, ukoliko ve koristimo eksterni stil, i upotrebimo ovaj atribut, sve stilske komponente koje ne postoje u eksternom stilu, bie dodate elementu, a one koje se preklapaju, bie pregaene od strane ovog atributa. <body style="background-color:#3399FF;"> title Ovo je naslov elementa. Kada budemo prelazili miem iznad elemenata koji imaju ovaj atribut, pojavljivae se Tooltip sa njihovim imenima.

Dogaaji (Event)
Dogaaji, odnosno Event-i, jesu atributi elemenata koji im obezbeuju funkcionalnost. Sve to smo do sada pomenuli, ticalo se toga kako e na dokument izgledati, ali ne i toga ta e moi da radi. Verovatno ste primetili da neki Web sajtovi imaju mogunost menjanja sadraja ili boje elementa kada preete miem 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 dogaaje koje taj element moe da registruje, na nama je samo da u vidu atributa stavimo taj dogaaj na sluanje i naravno, kaemo elementu koju aktivnost da izvri kada do dogaaja doe. <body onclick="alert('Pozdrav!!!')" >

Atribut onclick iz primera registruje dogaaj klika miem na element. Za rezultat dogaaja, stavili smo najobiniju 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 dogaaj postoji ali ga nismo obradili. Moda u primeru JavaScript funkcije alert() ovo deluje banalno, ali ukoliko elimo da ugraujemo neku ozbiljniju klijentsku funkcionalnost ovakav pristup vrlo je logian. Obzirom da smo se ve latili implementacije klijentske skripte u HTML, pomenimo za kraj lekcije jedno pravilo na koje treba obratiti panju, a koje ete tokom kursa verovatno uti vie puta. Pogledajmo primer ponovo: onclick="alert('Pozdrav!!!')"

U atributu se nalazi funkcija koja ispisuje poruku, koja se nalazi pod navodnicima za koje primeujemo da su jednostruki. To nije sluajno, ve je deo pravila pisanja HTML koda. Nije bitno da li e navodnici biti jednostruki ili dvostruki sve do trenutka kada poelimo da stavimo jo jedne navodnike u postojee. U tom sluaju, spoljanji navodnici, moraju se razlikovati od unutranjih. Ispravno: Neispravno:

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

Najvanije iz lekcije: 1. Osnovni elementi Web strane su head i body 2. Head element je onaj koji je vie okrenut Browseru i pretraivaima nego samom korisniku 3. Body element sadri sve ono to koristnik treba da vidi 4. Najbitniji head tagovi su meta, title i link 5. esto se u head tagu nalaze funkcije klijentskih skripti 6. Framesetovi omoguavaju smetanja vie dokumenata u jedan 7. Veina HTML elemenata ima prezentacione, standardne i atribute dogaaja 8. U atribute dogaaja smetamo funkcionalnost elemenata 9. ID atribut omoguava laku programabilnu identifikaciju elementa 10. Class atribut dodeljuje eksterni stil elementu 11. Style atribut omoguava direktnu stilizaciju elementa kroz atribut

Stilski tagovi (h, p...)

Jedinica: 5 od 17 HTML, u osnovi, ima samo nekoliko tagova za stilizaciju i formatiranje sadraja, tako da je pravljenje jednog nezahtevnog dokumenta prilino jednostavno. Da bismo to uradili, upoznaemo se sa pomenutim tagovima.

p tag
Paragraph tag. Njegova uloga je da formatira sadraj (tekst) u jednu logiku celinu i tu celinu razdvoji od ostalog teksta. Kada browser naie na ovaj tag, on e renderovati prazan prostor pre poetka i nakon kraja ovog taga. <p>Moj prvi red</p><p>Moj drugi red</p> Rezultat prethodnog reda je sledei:

Ponovimo da HTML ne registruje prazan prostor, to znai da ako bismo napisali sledee: Moj prvi red Moj 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 sluaju, veoma koristan, jer otklanja ovakve probleme. Sa druge strane, ukoliko ve imamo stilsku koncepciju definisanu u eksternim stilovima, ovaj tag moe i da zasmeta jer unosi ponekad neeljene prazne prostore izmeu redova. Na primer, ta ako bismo eleli da nam tekst bude podeljen u dva reda, ali da izmeu tih redova ne bude toliki razmak, ve samo minimalan sistemski razmak? Kao na sledeem primeru:

U tom sluaju, 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 semantiki ispravan od prvog (koji podrazumeva da tekst bude u p tagovima), ali predstavlja brzo i jednostavno reenje. Primeujemo da je tag samozatvarajui. Takoe, ovaj tag je mogao glasiti i <br> (to je samo razlika izmeu HTML-a (<br>) i xHTMLa (<br/>)). Osim semantike ispravnosti, ovakav pristup (sa br tagom) onemoguava da interveniemo stilski na svakom redu ponaosob. ta ako poelimo 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 sluaju p tagova ovo bi reili 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 odreene komponente dokumenta. Obratite panju na to da smo u primeru sa atributom align izvrili formatiranje u samom tagu. Ako se prisetimo prethodnih lekcija, videemo da to nije po pravilima Strict HTML moda, te bi, po Strict standardu, to najbolje bilo reiti stilovima.

h tagovi
HTML podrazumeva est tagova za naslove (Heading) u tekstu. Tekst stavljen u ove tagove bie emitovan zadebljano sa veliinom, u zavisnosti od broja pridruenog tagu. Brojevi mogu biti od 1 do 6, pri emu je <h6> najmanja veliina fonta, a <h1> najvea. 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 nauena taga su nam, oigledno, dovoljna da formatiramo neki sadraj i napravimo prostu HTML stranu. Pokuajmo jo malo da sredimo ovaj kratki tekst. Pretpostavimo da elimo neke rei u tekstu da naglasimo u odnosu na druge, najprostijim tamparskim pravilima - zadebljanim ili italik slovima. Da bismo u HTML-u postigli efekat zadebljalih slova, moemo eljeni tekst smestiti u <b> ili <strong> tag, dok se italik slova dobijaju stavljanjem u <em> ili <i> tagove. (Razlike izmeu jednih i drugih tagova su u tome to se jedni odnose na pasuse (<strong>), a drugi na fontove). Znajui ovo, moemo 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 nain, moete stilizovati tekst uz pomo ostalih stilskih tagova: <s>tekst</s>

Tekst preseen linijom

_tekst

Prefiks tekst

i slino:

sup (natpisani tekst), big (vea slova od osnovnog teksta), small (manja slova od osnovnog teksta), dfn (definicija), code (kompjuterska slova), cite (citat),

Pojam apsolutnog i relativnog u HTML-u

Primeujete da do sada nismo koristili konkretne vrednosti kada su u pitanju formati teksta. To je zato to browser ima dva naina da rukuje sa formatima. Jedan je koristei konkretne vrednosti, a drugi, koristei odnose sa referencama. Ova dva naina nazivaju se apsolutni i relativni. Kada govorimo o apsolutom i relativnom u HTMLu, onda se to ne odnosi samo na tekst, ve i na mnotvo drugih elemenata. Na primer, adresa moe biti apsolutna ili relativna, pozicija taga moe biti apsolutna ili relativna, veliina teksta moe biti apsolutna ili relativna... Na primer, ako Vas osoba iz Vaeg grada pita za adresu, rei ete ulicu i broj, jer je podrazumevano da se radi o zajednikom gradu, to bi bio primer relativnog. Ako tu istu ulicu i broj pomenete nekome iz drugog grada, nee uspeti da Vas nae, jer je adresa relativna u odnosu na Va grad. Ali, ukoliko mu kaete i grad, lako e Vas pronai, ali samo ukoliko ste stanovnici iste drave, jer je Vaa lokacija sada relativna u odnosu na dravu. Da biste bili sigurni da e Vas bilo ko pronai, mogli biste da kaete: Planeta Zemlja/Kontinent/Drava/Grad/Ulica/Broj/Vae ime i prezime. U ovom sluaju Vaa lokacija je unikatna na univerzalnom nivou i ne postoji ansa da Vas neko ne pronae, osim ukoliko su Vam vrata zakljuana.

Ako se primer prenese na Internet (koji bi u ovom sluaju bio svemir), adresa Vae slike mogla bi biti - http://vadomen/vafolder/dokument I naravno, ostaje problem zakljuanih vrata. Iako na prvi pogled apsolutno formatiranje zvui 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 panju na to kolika elimo da bude ta slika na strani kao i koja treba da bude njena pozicija u odnosu na tekst. to se tie veliine, tu treba obratiti panju na okruenje u kome e se naa 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 veliinu tih strana menjanjem veliine prozora. to znai da, kada kreiramo stranu, ne moemo sa sigurnou znati kako e ta strana izgledati na korisnikovom raunaru. Zato se strane prave tako da zadovolje standarde veine, po pitanju rezolucije ekrana, a samim tim i veliine prozora browser-a. Kada se formiraju veliine strana, iako njihova veliina moe biti proizvoljna, obino se koriste logike vrednosti, nasleene od monitorskih rezolucija (640, 800,1024,1280,1600...) za irinu, dok se visina sajtova najee ne fiksira, ve se ostavlja da se dinamiki modifikuje prema sadraju. Danas je redak sluaj da neko koristi monitor ija je rezolucija manja od 1280 taaka po irini, to znai da prozor pretraivaa moe da se povea taman toliko da u njega stane jedna strana irine 1024 take, ali ne i mnogo vea. Mi u ovom trenutku nemamo fiksnu veliinu strane, ali elimo da stavimo na stranu sliku iju veliinu elimo da podesimo tako da odgovara standardu. Recimo da bi nam za ovu rezoluciju odgovarala slika irine 225 taaka. Veliinu slike uvek moemo da promenimo u HTML kodu, ali je ovo izuzetno loa praksa iz dva razloga. Prvo, zato to se svaka slika mora transportovati od servera do klijenta, to iziskuje neko vreme. Ukoliko stavimo veu sliku na stranu, strana e se due uitavati 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 veliine slika. To znai da e izgled nae 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):

Zakljuak je da slike pre smetanja 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 poetak, ubaciemo 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 oznaava sliku je img. Nema sadraj i zato je samozatvarajui (xHTML). Primeujemo za sada jedan atribut, src, koji oigledno oznaava naziv, odnosno, adresu slike.

Ovaj primer bie 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 znai da ni jedan drugi dokument, koji se nalazi na bilo kom drugom mestu, ne moe da vidi sliku na navedenoj lokaciji (podseamo da je jedina informacija koju imamo o slici njeno ime). Sledei primer rukuje sa apsolutnom putanjom i u njegovom sluaju, slika e biti vidljiva, gde god dokument bio smeten. <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 oznaava nain na koji e se tekst poravnavati sa slikom (odnosno gde e se slika nalaziti u odnosu na tekst). Poto smo na poetku rekli da elimo da tekst bude sa desne strane slike, moemo atributu align postaviti vrednost left. <img src="demasoni.jpg" align="left" />

Osim vrednosti left, atribut align img taga prepoznaje i sledee 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 najvie slike u pasusu

Poravnanje se odnosi samo na pasus, odnosno tag u kome se tekst nalazi, to znai, da bismo, ako hoemo da konano dobijemo eljeni rezultat, trebalo da samo premestimo ceo tag u deo sa sadrajem (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 znai da bismo, ako hoemo da konano dobijemo eljeni rezultat, trebalo samo da premestimo ceo tag u deo sa sadrajem (ili ispred njega). Ostaje da eventualno korigujemo horizontalni prazan prostor izmeu slike i teksta atributom hspace koji kao vrednosti prima brojeve (piksele). Pored hspace, moemo koristiti i atribut vspace za poveanje vertikalnog praznog prostora (koji nam u ovom sluaju nije potreban). Slici u img tagu je mogue dodeliti i crni okvir, za ta slui atribut border, koji kao vrednost prima broj koji predstavlja debljinu okvira u pikselima. Ovaj atribut esto se koristi da bi se spreila pojava okvira oko slike kada se slika nae u tagu za hiperlink (kada joj se okvir dodeljuje automatski). Kada smo zadovoljni izgledom i poloajem slike na strani, slici moemo dodati i alt atribut. Ovaj atribut je tekst koji e biti prikazan na mestu gde treba da se uita naa slika i koji e stajati tu do trenutka kada slika ne bude uitana. Osim vizuelno, ovaj atribut ima izuzetnu vanost za crawler-e jer se uzima u obzir prilikom pretrage.

Hiperlinkovi
Rekli smo da su hiperlinkovi jedna od najvanijih stvari HTMLu. Generalno, to i jeste tano, jer bez ovog vida funkcionalnosti ne bi otili nigde sa jedne strane. Paradoks bi bio objanjavati emu slue, obzirom da ste ih, da biste otvorili ovu lekciju, koristili vie puta. Recimo samo da je to tag koji usmerava korisnika ka nekom resursu na Web-u. Znamo da se hiperlinkovi obino pojavljuju u plavoj boji i podvueni, da bismo, kada jednom posetimo adresu ispod linka, oni postali ljubiasti. Takoe znamo, da pokaziva menja sliicu iz strelice u ruku kada se pree miem preko linka. Ove osobine su

standardne, ali nisu fiksne, pa se hiperlink moe prikazati i u potpuno drugaijim oblicima (uz pomo css stilova). Da bismo napravili jedan hiperlink, potreban nam je takozvani anchor tag. Ovaj tag obeleava se skraeno, slovom a. Najvaniji atribut a taga je href, koji oznaava URL, na koji hiperlink ukazuje. Ova dva elementa, nisu nam ipak dovoljna da formiramo jedan hiperlink. Hiperlink je tag koji ima i sadraj, u koji smetamo ono to elimo da reprezentuje napravljeni hiperlink. <a href="http://www.google.com" >Link na google</a> Ovaj kod e emitovati plavo obojeni, podvueni tekst, iji sadraj je Link na google, a ije pritiskanje levim tasterom mia e stranu prusmeriti na google. U trenutku kada preemo miem iznad ovog teksta, u donjem levom uglu browser-a, ispisae se lokacija hiperlinka nad kojim smo.

Otvaranje novog dokumenta, pod ovim uslovima, odigrae se u aktuelnom prozoru,to znai da nam dotadanji sadraj nee biti dostupan, osim ukoliko se vratimo nazad na dokument. Meutim, 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. Uitava stranu u roditeljski prozor frameseta _top ima smisla samo u framesetovima. Uitava stranu u najstariji prozor frameseta (odnosno, u aktuelni prozor)

Osim na drugi dokument, hiperlink moe 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 sadraj mog pasusa</a> Ako ova dva taga postavimo na stranu, klik miem na gornji tag, aktivirae deo strane u kome se nalazi donji tag. Ovo moete isprobati tako to ete izmeu oba taga postaviti tagove <br/> sve dok razmak izmeu tagova bude dovoljno veliki da oba taga ne stanu na jednu stranu. Primeujemo da prvi tag ima u vrednosti atributa znak #. On ukazuje na imenovane anchor tagove na aktuelnoj strani. Slanje maila, tanije, otvaranje podrazumevane aplikacije operativnog sistema za rukovanje mailom, moete definisati tako to ete u href atribut postaviti kao vrednost kljunu re mailto: a zatim i ciljnu adresu. <a href="mailto:mail@mail.mm" >Poslati mail</a> Evo konane verzije nae 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 moete formatirati i u vidu liste. Ovaj pristup se esto koristi ukoliko nameravate da koristite klijentsku dinamiku (padajui meniji i sl.), jer liste imaju formu koja strukturalno odgovara viekategorijskim menijima i stablima podataka. U listama razlikujemo tri podkategorije: ureenu, neureenu 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 oznaava tip te liste (ul, ol ili dl), dok se podelementi (u sluajevima ureene i neureene liste), oznaavaju sa li. Neureena lista nema numeraciju elemenata liste, ve ispred njih postavlja takice. Oznaka joj je ul. <ul> <li>programiranje</li> <li>Web dizajn</li> <li>menadzment</li> </ul> Izlaz je:

Ureena 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 drugaiju koncepciju. Prvo se mora definisati lista (dl tag), zatim, postavlja se kategorija (ili kategorije) (dt), a zatim, nakon svake kategorije reaju se elementi lanovi liste, koji vae 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:

Najvanije iz lekcije:

1. 2. 3. 4. 5. 6.

p tag razdvaja tekst u logiku celinu h tag formatira tekst u formi naslova img tag predstavlja sliku src atribut sadri url slike img taga a tag je tag koji predstavlja hiperlink href je atribut a taga koji predstavlja ciljni url hiperlinka

Tagovi razdvajanja celina (span, div...)

Jedinica: 6 od 17 Tagovi koje smo obraivali u prethodnoj lekciji tiu se formatiranja i razdvajanja delova HTML-a. Dakle, mi ve znamo kako da neki tekstualni sadraj podelimo na nekoliko delova u HTML-u. Problem je samo u tome to, kada razdvajamo HTML na neki od naina nauenih u prethodnoj lekciji, mi unapred te delove stilski formatiramo. Ali, ukoliko elimo da naznaimo da neka logika podela postoji, ali da pri tom, ne elimo da je stilski identifikujemo, ovi tagovi su neupotrebljivi (osim ukoliko ne interveniemo na samim njihovim stilovima, to bi bilo nepraktino). Umesto toga, koristiemo tagove div i span. Span tag je najprostiji vid logikog razdvajanja sadraja i prilikom upotrebe nema uticaja na sadraj 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 znai da se span uopte ne primeuje na strani (sve dok korisnik ne bi pregledao izvorni HTML kod). Ipak, kada bi u taj span tag uneli sledeu 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 odreene stilske korekcije. to se samog style atributa tie, neemo sada analizirati sadraj njegove vrednosti, jer su u pitanju CSS stilovi, koje emo detaljno obraivati tokom drugog dela ovog kursa. Div tag je prilino blizak span tagu po karakteristikama, osim to, za razliku od span taga, koji nema nikakav uticaj na sadraj, div tag izvrava odreena formatiranja na njemu. Kada sadraj stavimo u div tag, on biva tretiran kao zaseban deo strane, i ponaa 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 sledeu stranu:

Ovakva materijalna osobina div taga ini da bude naroito vaan u kreiranju dinamikih 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 naroito ba za div i span tagove. To su:

id - Ovaj atribut je ono ime emo nalaziti ove elemente kada im budemo pristupali u toku izvravanja strane na klijentu. class Omoguava dodeljivanja CSS klase sadraju elementa

Tabele
Tabele ine posebnu dimenziju u kontekstu razdvajanja sadraja u HTML dokumentu. Poslednjih godina, razvojem CSS-a dolo je do tenje da se upotreba tabela deplasira u korist upotrebe div tagova, zbog ega su tabele sve rei formateri sadraja 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 obinog teksta. Ukoliko se nikada do sada niste susreli sa tabelama (to je skoro nemogue), podsetiemo 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 skladiti sam podatak. Npr:

Pokuajmo 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 sadri kompletnu logiku tabele. tr element table row. Svaka tabela sastoji se od redova, a svaki element poseduje sadraje za svaku svoju kolonu. td element table data. Table data je element u kome se nalazi sadraj 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 moemo postavljati globalne parametre za kompletnu tabelu, poput proreda izmeu polja, debljine i boje okvira tabele i njenih polja, prostora unutar polja... Tabela sa slike ima sledee karakteristike:

<table width="660" height="130" border="1" cellpadding="5" cellspacing="1"></table> to znai da joj je irina (width) 660 taaka, visina (height) 130 taaka, debljina okvira (border) 1 taka, prostor izmeu polja (cellspacing) 1 taka i prazan prostor u poljima (cellpading) 5 taaka. Sada moemo ubaciti i redove u tabelu. Obzirom da ve znamo da ova tabela ima ukupno etiri reda (tri sa podacima i jedan sa nazivima kolona), moemo unapred ubaciti sve redove. <table width="660" height="130" border="1" cellpadding="5" cellspacing="1"> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> </table>

Konano, moemo 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 veinom 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 primeujete da se obrazac reda ponavlja (nakon to napravimo prvi red koji identifikuje kolone). To omoguava da se ovakva tabela jednostavno kreira na osnovu dinamikih podataka iz skripte. Format tabele zavisi u mnogome i od samog njenog sadraja, pa se moe desiti da ponekad kranji rezultat ne bude onakav kakvav bismo, moda, eleli. Na primer, ta ako bismo u sadanju 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 ubaenu sliku.

Image map mape slika

Osim sadraja na strani, moemo napraviti logika razdvajanja na slikama, to omoguava aktivaciju odreenog hiperlinka klikom na odreeni region slike. Na primer, ukoliko imamo sledei 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 sledee modifikacije u kodu: Pre svega, trebalo bi u img tagu da naznaimo da elimo da koristimo mapu slike, atributom usemap. Ovaj atribut prima kao vrednost naziv mape, koji za ovu priliku moemo 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, pretraiva (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 moe biti napravljen bilo gde u kodu i sadri podelemente od kojih svaki predstavlja po jednu zonu slike koja e biti tretirana kao hiperlink. Ovi podelementi sadre poznate atribute href (url hiperlinka), alt (opis regiona) i target (ciljni prozor hiperlinka).

Pored toga, sadre i nestandardne atribute shape i coords, koji oznaavaju oblik koji e imati zona hiperlinka i koordinate tog oblika. Dodavanje ovog koda na postojei, napravie, ukoliko koristite nau 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 naznaili da e hiperlink biti u pravougaonoj zoni, koristimo vrednost rect atributa shape (postoji jo i circle i poly). U tom sluaju, browser oekuje u atributu coords etiri vrednosti: X i Y gornje leve take pravougaonika i X i Y donje desne take pravougaonika respektivno. Da smo umesto rect vrednosti uneli circle, browser bi oekivao tri vrednosti. X i Y centra kruga i poluprenik kruga. Vrednost poly oekuje koordinate svake take 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.cichlidforum.com/articles/p_demasoni.php" target="_self" alt="Pseudotropheus Demasoni tail fin"> Konani 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://animalworld.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
Razliite logike celine, mogue je razdvojiti i uz pomo fieldset elementa. Ovaj element kompletan svoj sadraj smeta 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 poetku smo govorili o okvirima (framesets). Iframe je neto vrlo slino. Ovo je tag koji, kao sadraj, moe 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 moete postaviti iframe tag i u njega uitati bilo koji eksterni dokument, kroz src atribut. <iframe src="http://www.google.com"></iframe> Ipak, iframe-ovi umeju da naprave probleme kada doe do rukovanja samim sadrajem (uitanim stranama), jer treba runo (kroz skriptu) rukovati veliinom uitanog dokumenta, prosleivati im parametre i slino. Najvanije iz lekcije: 1. 2. 3. 4. 5. 6. Osnovni tagovi za razdvajanje su div i span Span tag ne utie na sadraj Div tag utie na sadraj tako to sve to je u tagu stavlja u fiziki zasebnu celinu Tabele se sastoje od tr elemenat (redovi) i td elemenata (polja) Mogue je formatirati elemente tabele na nivou tabele, reda ili pojedinanog polja Mogue je razdvojiti vie regiona sa hiperlinkovima na jednoj slici

Skript tagovi
Jedinica: 7 od 17 Osim HTML-a, u Web stranu je mogue ugraditi i skripte. Ove skripte funkcioniu tako to se implementiraju u HTML kod i parser, kada na njih naie, 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 poneto o samim skriptama. Skripte su elementi koda pisani u nekom programskom jeziku ija je svrha proirenje funkcionalnosti neke aplikacije. Obino se za skript jezike uzimaju jednostavni jezici, proste sintakse i male zahtevnosti, dok je osnovna aplikacija pisana u nekim niim programskim jezikom (C, C++, asembler...). Obzirom da su Web server i Web klijent takoe aplikacije, one takoe imaju skript jezike kojima im se moe poveati funkcionalnost. U sluaju Web servera, na sam jezik utie vie faktora, ali obino se dele na dve logike grupacije. Microsoftov Web server IIS najbolje funkcionie 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 pretraivai, oni uglavnom rade sa istim skript jezikom koji se popularno zove JavaScript. Kaemo popularno, zato to svaki pretraiva koristi svoju verziju ovog jezika koja se malo drugaije zove a identino (ili skoro identino) funkcionie. 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 nau stranu, potrebno je da znamo da li je skripta serverska ili klijentska. Razlika izmeu ove dve skripte je, naravno, u tome to se jedna izvrava na serveru, a druga na klijentu. A to u praksi znai da e serverska skripta, kada zavri sa svojim izvravanjem i emituje stranu klijentu, biti od trenutka emitovanja nedostupna, to je upravo trenutak kada klijentska skripta postaje dostupna. Da bi browser prepoznao poetak (i kraj) skripte, potrebno je upotrebiti script tag. Ukoliko tag bude samo <script>, skripta e biti tretirana kao klijentska (JavaScript), pa ukoliko elimo da izvrimo neku drugu skriptu, moramo to eksplicitno i naglasiti serveru/klijentu. Evo primera taga za serversku php skriptu: <script language="php"></script> Kada server naie na ovaj tag njegov, sadraj tretira kao PHP. Osim ovoga, Web server e prepoznati i jo dve vrste PHP taga: <?php ?> i skraeni <? ?>. Moramo paziti da, ukoliko strana nema ekstenziju .php, PHP skripta nee biti interpretirana, ve emitovana korisniku u izvornom obliku, to moe da bude vrlo opasno, jer serverska programabilnost obino sadri i poverljive podatke (ifre za bazu podataka i sl.). Skripte sa kojima emo se ee 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 moe biti i eksplicitno naglaen. Npr: <script type="text/javascript" language="javascript"></script> U poetku, prilikom izgradnje jednostavnih HTML dokumenata, najee 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 dobiete i uputstvo za njenu implementaciju.

Pokuajmo da implementiramo jednu prostu skriptu u nau 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, napraviemo 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 staviemo kao vrednost onclick atributa img elementa u sadraju. <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 uspeno implementirana na stranu i klik miem na sliku izazvae poruku u prozoru.

Kada se rukuje sa serverskim skriptama, ukoliko na server podrava skript jezik koji koristimo, naa strana e biti emitovana adekvatno bez obzira na klijenta, ali, ukoliko radimo sa klijentskim skriptama, moe da se desi da skripta ne bude u mogunosti da bude izvrena. Na primer, korisnik je iskljuio JavaScript opciju u svom pretraivau. Na ovakvu situaciju uvek treba biti spreman kroz jednu od sledeih strategija:

Onemoguavanje prikazivanja dokumenta u sluaju nemogunosti izvravanja skripte. Alternativni sadraj, za sluaj nemogunosti izvravanja skripte.

Prvo reenje neemo obraivati, jer postoji mnogo naina na koje ono moe biti implementirano, dok se za drugo reenje obino koriste noscript tagovi. Ovi tagovi emituju alternativni sadraj, koji e biti prikazan iskljuivo ukoliko je aktivacija skripte onemoguena (pod tim se ne misli da je skripta sintaksno neispravna, ve da pretraiva jednostavno nema mogunost 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 sluaju, korisniku e biti emitovana poruka MOLIMO AKTIVIRAJTE JAVASCRIPT, pod uslovom da je JavaScript onemoguen na nivou pretraivaa. Postoji mogunost da pretraiva uopte i ne prepozna sadraj skripte i da je kompletno emituje na strani u tekstualnom obliku (samo kada su u pitanju stariji pretraivai), pa se zbog ovoga obino u sadraj skripte smetaju i oznake za HTML komentar <!-- -->. Tako e, ukoliko skripta ne bude registrovana od strane pretraivaa, biti zatiena od

emitovanja korisniku. Sa druge strane, ukoliko pretraiva prepozna skriptu, ignorisae komentar i izvriti skriptu. Potujui ova pravila, naa skripta bi izgledala ovako: <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> Iako je malopreanji primer validan po pitanju prikaza i funkcionalnosti strane, ova tehnologija smatra se prevazienom zato to praktino vie ne postoje browseri koji nisu u stanju da prepoznaju JavaScript. Poto prouavamo xHTML jezik (i radimo u njemu), dozvoljeno nam je da koristimo xml notaciju. to znai da moemo 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 sluaju, validacija e biti izvrena ali se skripta nee izvriti, jer nije u stanju da prepozna CDATA tag, to je reivo postavljanjem oznaka za JavaScript komentar. //<![CDATA[ function prikazatiPoruku() { alert("Pozdrav!"); } //]]>

Postoji jo jedan nain da se JavaScript ignorie pri validaciji strane. A to je da se cela skripta smesti u eksterni fajl. U tom sluaju, tag skripte bi bio: <script src="mojaSkripta.js" type="text/javascript" language="javascript"></script> U ovom sluaju, 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. Najvanije iz lekcije: 1. 2. 3. 4. 5. 6. 7. 8. 9. Skripte u HTML strani mogu biti klijentske ili serverske Klijentske skripte su JavaScript, ECMA Script, JScript... Serverske skripte su PHP, ASP (C#, VB), JSP (java) Tagovi za klijentsku skriptu oznaavaju se reju script Tagovi za serverske skripte oznaavaju se u zavisnosti od tehnologije: <?php ?>, <? ?>, <% %>, <@ @> Alternativni sadraj, koji se emituje ukoliko je klijentski skript onemoguen aktivira se tagom noscript Dobra je praksa sadraj klijentskog skript taga obmotati u HTML komentar HTML komentar je sve to se nalazi u okviru taga <!-- --> Klijentsku skriptu je mogue smestiti i u zaseban, eksterni fajl.

HTML kontrole
Broj otvaranja:7 | Vredi kredita: 800 3.8 Forme 3.9 Kontrole za unos (text field, text area) 3.10 Kontrole za odabir (select, checkbox, radio...) 3.11 File upload kontrola

Forme
Jedinica: 8 od 17 Do sada smo obradili sve vanije HTML tagove. Ali, verovatno ste primetili da u naim primerima korisnik ni u jednom trenutku ne moe da unese neki podatak na stranu. Danas je Web kompleksan i moan alat i jasno nam je da je poznavanje HTML jezika samo grebanje po povrini, odnosno, osnova na kojoj bi trebalo da poiva nae dalje prouavanje rukovanja Web-om, pri emu je krajnji cilj, stvaranje dinamikih aplikacija visokih

performansi. Da bismo stvorili ovakvu aplikaciju, u najveem broju sluajeva bie nam potreban neki ulaz, a kada se u HTML-u kae ulaz, misli se pre svega na HTML forme. HTML forme su, dakle, taka u kojoj e se figurativno sresti i razmenjivati podatke klijentski i serverski kod.

Form tag
Osnova Web formi je form tag. Ovo nije nita drugo, do obian HTML element, sa svojstvenim atributima i podelementima. Tako da sve to budemo eleli da bude prosleeno serveru kroz tu formu, staviemo u njen sadraj. Svaka forma (form tag) prepoznaje pojavu koja se naziva submit. Ova pojava/dogaaj, dovodi do aktivacije forme i prosleivanja njenih vrednosti serveru. Osim submit dogaaja, 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 konano, kojom e se metodom koristiti za slanje tih podataka. Ponimo od poslednje, najbitnije osobenosti. Metoda slanja podataka. Rekli smo na poetku kursa da HTML dokumenti putuju kroz mreu uz pomo http protokola. Korienje ovog protokola, podrazumeva da se sa klijenta na server alju zahtevi koji u sebi sadre i odreene 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 pronae i emituje odreenu stranu. Osim GET, server bi mogao dobiti i naredbu POST, koja na isti nain prosleuje 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 pretraivaa, 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 prosleivanje 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 nee 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 sadri kontrole) i tree, 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 obrauje formu ista ona strana na kojoj se forma nalazi. Naziv ciljne strane se nalazi u atributu action. <form method="post" action="mojaAplikacija.php"> </form> Primeujemo da je ciljna strana tipa .php. To e obino biti sluaj (.php, .asp, .jsp), jer se obrada serverskih parametara moe obraditi samo iz serverskog skripta. A u sluaju da ne elimo da prosleujemo parametre serveru, sama forma nam nije ni potrebna. Tag iz primera ve predstavlja validnu inicijalizaciju forme, koja e biti funkcionalna u veini sluajeva. Ipak, postoji jedan izuzetak, kada ove dve informacije (atributi) nisu dovoljne. To je sluaj da elimo da formi dodelimo i mogunost uploada fajlova. Tada unosimo i trei 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 sluaju 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 tie, forme prihvataju veinu standardnih HTML atributa (id, class, dogaaje...). Osim njih, forma i njene kontrole, poseduju atribut name. Ovaj atribut je naroito koristan kod formi, jer omoguava brzo i jednostavno nalaenje forme na strani i elemenata u samoj formi. (Na primer, umesto traenja forme po ID-u, dovoljno je rei document.forms.nazivForme). Rekli smo na poetku da se parametri forme mogu prosleivati kroz adresu (url string) ili kroz zaglavlje zahteva (nevidljivo za korisnika). Ali, to to korisnik nije u stanju da vidi podatke, ne znai da oni stvarno nisu vidljivi. Sve kontrole forme, nalaze se u izvornom HTML kodu i mogue ih je videti u svakom trenutku, pregledavanjem tog koda, o emu treba voditi rauna kada se radi sa poverljivim informacijama.

Evo primera forme za eksterni Google search box: <form action="http://www.google.com/cse" id="cse-searchbox"> <input type="hidden" name="cx" value="partner-pub8240847099355309: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 prilino jednostavne za razumevanje), preskoiemo kontrole unutar same forme i analizirati samo njen inicijalni tag. Primeujemo da je action atribut forme podeen na Google. Dakle, prilikom aktivacije forme, svi parametri e biti prosleeni 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, preselie se sa sajta na kome se nalazi forma na Google.

Kontrole forme
U sledee tri lekcije obradiemo sve (ili bar veinu) kontrole HTML formi koje, u nekoj logikoj podeli, moemo izdeliti na tri vrste: kontrole koje imaju mogunost unosa podataka (tekst polja, tekst zone...), kontrole koje imaju mogunost izbora iz predefinisane liste podataka (option boksovi, check boksovi, radio tasteri...) i trea 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 vanije, ni forma ne mora obavezno da bude domain kontrolama. One mogu egzistirati same za sebe, to je korisno kada nam je potreban neki unos ijim vrednostima elimo da rukujemo iskljuivo na klijentu. Najvanije iz lekcije: 1. 2. 3. 4. Forma je poseban HTML entitet i inicijalizuje se tagom <form></form> Forma sadri HTML kontrole Action atribut ukazuje na aplikaciju koja preuzima i obrauje parametre forme Method je atribut koji govori o tome na koji e nain biti prosleeni parametri forme serveru 5. Enctype je atribut u kome je naznaen tip serijalizacije parametara 6. Forma nije funkcionalna ukoliko pored osnovnih atributa ne poseduje i aktivaciju (submit) 7. POST metod je metod koji prosleuje parametre kroz zaglavlje zahteva

8. GET metod je metod koji prosleuje 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 najkorienija 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 klasino polje za unos jednog reda teksta. Veina form kontrola imaju zajedniki naziv taga: input. To je sluaj 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 sluaju, 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 nee biti obraen. Zato, da bi bilo koja form kontrola mogla da bude prepoznata i obraena u nekom kasnijem procesu (to je cilj kontrole), potrebno je identifikovati je. Ovde treba obratiti panju na to da, iako smo, do sada, identifikovali elemente uz pomo id taga, stvar sa formama funkcionie malo drugaije. Naime, kada se forma prosledi Web serveru, server pretrai 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 moe pristupiti toj listi i izvui te vrednosti identifikujui 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

logino trebalo da bude unikatno). Pri tom, id tag ne mora biti suvian, jer njega moemo 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 olakava i pristup kontroli i na klijentu, jer, ukoliko se ta kontrola nalazi u okviru neke forme, kontroli se (iz klijentskog skripta) moe daleko jednostavnije pristupiti (forma.mojTekst) nego kada ne bi imala ovaj atribut. Tekst polje je takoe mogue formatirati prema potrebama konteksta. Na primer, moe se poveati ili smanjiti koliina vidljivih karaktera. Tako da bismo, ukoliko elimo da nae polje ima vidljivih 100 karaktera, napravili sledeu izmenu u kontroli: <input name="mojTekst" type="text" id="mojTekst" size="100" /> Moemo takoe i ograniiti broj dozvoljenih karaktera za unos. Ukoliko, na primer, elimo da polje slui za unos matinog broja. U tom sluaju, bilo bi dobro da polje bude duine 13 karaktera, ali i da ne dozvoljava da se unse broj karaktera vei od 13. <input name="mojTekst" type="text" id="mojTekst" maxlength="13" size="13" /> Svaka kontrola forme moe biti omoguena ili onemoguena (enabled, disabled), pa tako i tekst polje. Ova osobina kontrolie se atributom disabled, tako to se, ukoliko elimo da kontrola bude onemoguena, 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 vano znati da se, kao i svi ostali atributi kontrole, nalazi na klijentskoj strani. To znai da, maliciozni korisnik moe u svakom trenutku postaviti stranu na sopstveni server (ili proksi server) izmeniti atribut (izbaciti ga) i tako omoguiti kontrolu. Zbog toga izbegavajte onemoguavanje pristupa kontrolama na taj nain, jer jednostavno, nije bezbedno. Na primer, napravili ste set od tri kontrole. Za dve elite da budu dostupne svima, ali jednu elite da omoguite samo administratoru. Reavanje ovoga, uz pomo disabled atributa, nije najbezbedniji nain iz navedenog razloga.

Slian rezultat daje i atribut readonly="readonly". Konano, bitan (verovatno najbitniji) atribut ove (i svih ostalih) kontrole je atribut value. On zapravo sadri vrednost koja je uneena 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 naznaiti atributom value.

Password field

Verovatno ste imali prilike da se sretnete sa poljima za unos teksta iji je sadraj skriven (obino kada se unosi ifra). To su takoe kontrole za unos teksta, ali je, umesto tipa text, njihov tip password. Sve ostale karakteristike ove kontrole, identine 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 tie koda, prilino razlikuje od text polja, poevi od samog taga. Text area kontrola podrazumeva poseban tag za inicijalizaciju.

<textarea name="mojTekst" id="mojTekst"></textarea> Obzirom da za nju vae ista pravila identifikacije kao i za ostale kontrole, postaviemo odmah i dva standardna atributa (id i name). I u ovoj kontroli, kao i u prethodnim, mogue je podesiti broj vidljivih karaktera po irini, ali je, za razliku od prethodnih kontrola, ovde mogue 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, upotrebiemo 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 monije stilske intervencije, moete da uzvrite i putem CSS stilova. Jo jedan od atributa koji ovu kontrolu razlikuje od prethodnih je atribut wrap. On oznaava na koji nain 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 moe primiti su:

soft prelama redove ali ih prosleuje serveru bez prelamanja hard prelama redove i prelomljene ih prosleuje serveru off ne prelama redove (umesto toga, pojavljuje se kliza u podnoju kontrole)

I pored ovih atributa za formatiranje (prelamanje) teksta, ne raunajte da e Vam ova kontrola omoguiti unos dobro formatiranog teksta. U tu svrhu, obino se koriste eksterni HTML editori, takozvani WYSIWYG (What You See Is What You Get) editori.

Text area kontrola nema value atribut. Njen sadraj predstavljen je kao sadraj elementa. To je i praktino, jer, za razliku od tekst polja, ova kontrola moe pregledno da primi znatno vie 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 poelimo da uneene podatke prosledimo serveru. U suprotnom, sve form kontrole moraju biti oiviene 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> Najvanije iz lekcije: 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 atributu 3. Text field kontroli je mogue korigovati broj vidljivih karaktera atributom size 4. Text field kontroli je mogue korigovati maksimalan broj uneenih karaktera atributom maxlentgh. 5. Za unos vee koliine teksta koristimo kontrolu textarea 6. Format textarea kontrole reguliemo atributima rows i cols 7. Kontrole za unos teksta moemo osposobiti i onesposobiti atributima disabled ili readonly

8. Value atribut predstavlja vrednost uneenu u kontrolu 9. Textarea kontrola nema value atribut ve joj je vrednost predstavljena kao sadraj elementa 10. Mogue je korigovati nain na koji e tekst biti prelaman u textarea kontroli, atributom wrap 11. Ukoliko elimo da kontrole budu prosleene serveru, one moraju biti u form tagu

File upload kontrola

Jedinica: 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 prosleeni serveru, postavlja se pitanje, koja je onda svrha kontrole koju korisnik, niti e moi da vidi, niti e moi da u nju unese bilo kakav podatak. Ukoliko ovaj problem pogledate sa aspekta dinamike, videete da je odgovor prilino 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, poeleete da izmenite neki od ovih podataka. Poto je id broj pod kojim se korisnik skladiti u bazi, on nije relevantan za korisnika, ali je krucijalan za bazu, jer je to jedini nain da ga sa sigurnou pronaemo. To znai, da kada neka web aplikacija (kojom ete menjati podatke za korisnike) izvue podatke o korisniku, ona mora da Vam u kontrolama prikae njegovo ime, prezime i adresu, ali ne i id, jer Vam je on nepotreban. Zatim, kada ispunite kontrole novim podacima, aplikacija mora da pronae i izmeni podatke za adekvatnog korisnika, ali, obzirom da meu kontrolama forme nemate i id, skripta nije u stanju da to uini. U ovakvoj situaciji, ugradiete na stranu jo jednu (hidden) kontrolu, i za vrednost joj dodeliti id korisnika iz baze. Zatim, kada zavrite sa intervencijom na podacima, id e biti prosleen serveru sa ostatkom podataka koje e skripta sada moi da izmeni bez problema. Sa druge strane, korisnik ni jednog trenutka nee moi da vidi id. Naravno, ovo, ako se podsetimo prethodnih lekcija, ne znai da korisnik ne moe 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 takoe u pitanju input tag, iji type atribut ima vrednost hidden i koji nosi vrednost 35 i naziv id. To znai da e serverski skript, ako pogleda vrednost za lana id, moi da dobije vrednost 35, na identian nain, kao da preuzima vrednost neke vidljive kontrole. to znai 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 prilian broj koraka (kada se uporedi sa obradom prostijih kontrola). Isprva, sama strana treba da prihvati fajl, pod odreenim uslovima. A zatim, kada fajl stigne na server, potrebno je pronai ga, proveriti i kopirati na eljenu lokaciju. Ali, vratimo se na prvi deo procedure, koji se tie klijentskog dela ovog procesa. Ponovimo za poetak da, da bi forma mogla da prosleuje fajlove na server, mora da ima i atribut enctype sa vrednou 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, konano, 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 linih podataka, na kraju smo uneli sledei tag: <input type="submit" value="potvrda"/> Ovaj tag iscrtao je na strani taster, ijom je aktivacijom dolo do potvrde forme. Ali, ovo nije jedini nain da se izvri potvrda forme, kao to nije ni jedina osobina koju jedan taster moe imati na formi. Kada aktivirmo submit kontrolu, aktivirali smo, u stvari, submit funkciju same forme. Ova funkcija moe biti aktivirana i na nekom drugom mestu. Na primer, moe 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. Takoe, umesto submit kontrole, mogue je postaviti i image button tag za sliku, koji takoe ima svojstvo aktivacije forme kada se pritisne tasterom mia. Osim toga, ovaj tag ima i sva svojstva obinog img taga. <input type="image" name="submitSlika" id=" submitSlika" src="demasoni.jpg" /> Vratimo se na submit kontrolu. Primeujemo da u naem primeru ne postoji atribut name. Ovo nije ispravna definicija kontrole, iako postojanje ovog atributa ne izgleda logino u submit kontroli. Kada serverska skripta pone da obrauje stranu, jedini nain da sazna da li je klijent doao na stranu putem forme ili direktno, jeste tako to e proveriti da li su na server prosleeni i parametri. Ukoliko parametri postoje, skripta izvrava odreeni, parametrima uslovljen deo. U suprotnom, strana se tretira kao da nema parametre i taj deo se ne izvrava. Najei nain za ovu proveru je ba putem provere postojanja submit kontrole. Ukoliko takva kontrola postoji, serverska skripta podrazumeva da su podaci doli sa forme. Ali, da bi ovakav sistem bio funkcionalan, klijent (forma) treba da obezbedi nain da serverska skripta identifikuje ovu kontrolu, to objanjava 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 vrednou. 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 sledei 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 vraene na svoja inicijalna stanja. Konano, 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 sluaju, taster e izvriti potvrdu forme, iako njegov tip nije submit. Naglasimo da se tasteri napravljeni na ovaj nain, renderuju sistemskim stilom, to znai da e, najverovatnije, biti iscrtani na jedan od sledea tri naina (IE, FireFox i Safari).

Ali, to ne znai da e tasteri na naim stranama biti ogranieni samo na ovakav izgled. Ve od sledeeg modula, kada ponemo da ulazimo u oblast CSS-a i stilizacije HTML-a, videemo koliko su mala stilska ogranienja u izgradnji ne samo form kontrola, nego i svih ostalih HTML elemenata. Najvanije iz lekcije:

1. Hiden kontrola omoguava da vrednost bude prosleena kroz formu, ali da pri tom ne bude vidljiva na strani. 2. File upload kontrola omoguava selekciju fajla sa lokalnog sistema i prosleivanje istog putem forme na Web server 3. Submit taster izvrava potvrdu forme 4. Reset taster resetuje sve kontrole forme na inicijalnu vrednost 5. Button taster nema predefinisano ponaanje 6. Name atribut submit kontrole je bitan za serversku skriptu jer esto po njemu skripta raspoznaje da li je poziv doao sa forme ili hiperlinka 7. Value atribut tastera predstavlja tekst koji e biti napisan na tasteru

Stilovi u HTML-u
4.12 Stilski atributi HTML elemenata 4.13 CSS stilovi HTML elemenata

Stilski atributi HTML elemenata

Jedinica: 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 prouiemo 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, logino je da se na njih ne mogu ni primeniti isti stilovi. Na primer, nema previe logike u podeavanju broja kolona u kontroli tipa taster, niti boje u img kontroli... Veina 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 veliinu 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"/> Takoe, seamo se atributa align, img taga. Njegove vrednosti predstavljale su naine na koje e slika biti poravnata u odnosu na tekst. Nastavimo sada, kroz align atribut, ka jednom potpuno drugaijem tagu - p. Ovaj tag takoe poseduje atribut align, ali u njemu, taj atribut ima drugaiji set vrednosti i razumljivo, drugaiji nain ponaanja. <p align="right">First and foremost, a minimum of twelve should be kept in any size tank to help disperse aggression.</p> Ovaj primer, izvrie 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 poetak, jednu osnovnu tabelu, sa samo jednim poljem: <table> <tr> <td>Moja tabela</td>

</tr> </table> Pokuajmo da obojimo pozadinu ove tabele. Za to moemo upotrebiti atribut bgcolor. <table bgcolor="#CCCCCC"> Recimo da sada, elimo da dodamo i jedan crveni okvir ovoj tabeli, debljine jedne take. <table border="1" bordercolor="#FF0000" bgcolor="#CCCCCC"> (umesto heksadecimalnih vrednosti moete koristiti i konkretne nazive: #FF0000 je, npr. isto to i red)

Potom, recimo da nam ne odgovaraju tip okvira i razmak izmeu teksta i okvira (cellpadding). <table border="1" cellpadding="5" cellspacing="0" bordercolor="red" bgcolor="#CCCCCC">

Konano, 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 (veliinu), color (boju)... Na alost, nemaju svi sistemi instalirane sve vrste fontova, tako da je bitno obratiti panju na to koji ete font koristiti u stilizaciji strane. Obino se koriste sistemski fontovi, koji su obavezno prisutni na svim sistemima. Ipak, korienje sistemskih fontova (hipotetiki) nije obavezno. Na strani moete koristiti i fontove koji nisu standardni sistemski fontovi, ali onda je poeljno da ih embedujete u stranu, to je vrlo nepreporuljiv proces, jer ne daje rezultate na svim pretraivaima (Browser-ima). Ako bismo ba eleli da to uinimo, bio bi nam potreban embeded opentype format fonta, koji moemo od obinog true type fonta konvertovati samo uz pomo specijalne aplikacije. Dakle, zakljuak 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 reenicu, 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 znai da su stilovi implementirani u samu logiku (tagove). Ovo u praksi znai da se svi stilski atributi u ovoj lekciji (i celom dosadanjem 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 omoguava CSS stilizaciju unutar samog taga. Ipak, nemojte misliti da je sve to smo do sada nauili o stilizaciji tagova bila stranputica. Naprotiv, veina HTML strana pisana je u transitional modu, to znai da prihvata i jednu i drugu vrstu stilizacije, pa ete se tako esto susretati sa ovakvim nainom pisanja koda, zbog ega je neophodno da ga odlino poznajete. Jedan od primera je sve ee negodovanje korienja table taga. Umesto njega, zagovara se korienje div taga, ali u praksi ete sretati i jedan i drugi tag. Mi emo, nakon to smo nauili kako se rukuje stilom kroz HTML atribute, od sledee lekcije poeti da potujemo 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 acceptcharset accept accesskey action align align align align align align align alink alt alt alt archive archive axis background bgcolor bgcolor bgcolor bgcolor

TD, TH FORM FORM, INPUT A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA FORM CAPTION APPLET, IFRAME, IMG, INPUT, OBJECT LEGEND TABLE HR

Skraena verzija sadraja polja, za indeksere, itae i sl. lista karakter setova koje forma moe prihvatiti lista mime tipova koje mogu prihvatiti file upload kontrole forme dodeljivanje fokusa kontroli pritiskom na taster (zajedno sa funkcijskim tasterom (alt ili ctrl)) aplikacija u kojoj se nalazi serverska skripta koja obraduje formu horizontalno ravnanje u odnosu na formu vertikalno i horizontalno poravnanje horizontalno ravnanje odnosu na fieldset table position relative to window horizontalno ravnanje

DIV, H1, H2, H3, H4, H5, H6, horizontalno ravnanje P COL, COLGROUP, TBODY, horizontalno ravnanje TD, TFOOT, TH, THEAD, TR BODY APPLET AREA, IMG INPUT APPLET OBJECT TD, TH BODY TABLE TR TD, TH BODY boja aktivnih (selektovanih) linkova na strani kratak opis objekta kratak opis objekta kratak opis objekta lista dokumenata (arhiva) lista urija razdvajanje kolona u logike celine pozadina strane boja pozadine boja pozadine boja pozadine boja pozadine

border border cellpadding cellspacing char charoff charset checked cite cite class classid clear code codebase codebase codetype color cols cols colspan compact content coords coords data datetime declare defer

TABLE IMG, OBJECT TABLE TABLE

debljina okvira debljina okvira razmak izmedu ivice polja i njegovog sadraja razmak izmedu polja

COL, COLGROUP, TBODY, horizontalno ravnanje u odnosu na TD, TFOOT, TH, THEAD, TR priloeni karakter COL, COLGROUP, TBODY, ofset za ravnanje po priloenom TD, TFOOT, TH, THEAD, TR karakteru A, LINK, SCRIPT INPUT BLOCKQUOTE, Q DEL, INS Svi OBJECT BR APPLET OBJECT APPLET OBJECT BASEFONT, FONT FRAMESET TEXTAREA TD, TH DIR, DL, MENU, OL, UL META AREA A OBJECT DEL, INS OBJECT SCRIPT kodni raspored povezanog resursa status kontrole (checkbox i radio) lokacija citiranog izvora razlog izmene klasa objekta identifikacija tipa objekta skida vrednosti atributa za ravnanje naziv apleta podaci o objektu dodatni podaci o apletu tip objekta boja irina (broj kolona) irina (broj kolona) broj kolona sadranih u polju uklanjanje nepotrebnog praznog prostora u sadraju sadraj x i y koordinate taaka poligona x i y koordinate taaka poligona aplikacija (objekat) datum izmene deklarisanje objekta odlae aktivaciju skripte do uitavanja kompletnog dokumenta

dir dir disabled enctype face for frame headers headers height height height height href hreflang hspace http-equiv id ismap label label lang language link longdesc longdesc

Sve BDO BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA FORM BASEFONT, FONT LABEL TABLE TD, TH TD, TH IFRAME TD, TH IMG, OBJECT APPLET A, AREA, LINK A, LINK APPLET, IMG, OBJECT META Sve IMG, INPUT OPTION OPTGROUP Sve SCRIPT BODY IMG FRAME, IFRAME

pravac ispisa teksta pravac ispisa teksta kontrola se iscrtava ali nije upotrebljiva tip kodiranja zaglavlja forme naziv fonta element za koji se povezuje label naziv frejma u kome se iscrtava okviri frejmova id-ovi polja iz zaglavlja tabele okviri frejmova id-ovi polja iz zaglavlja tabele visina visina visina visina adresa na koju link pokazuje jezik linka horizontalni razmak podaci zaglavlja dokumenta id objekta daje slici svojstvo slikovne mape naziv opcije naziv opcije skraenica jezika taga (en, sr...) programski jezik srkipte boje linkova putanja do detaljnog opisa slike (complements alt) putanja do detaljnog opisa slike (complements alt) visina margine irina margine

frameborder FRAME, IFRAME frameborder FRAME, IFRAME

marginheight FRAME, IFRAME marginwidth FRAME, IFRAME

maxlength media media method multiple name name name name name name name name name name name nohref noresize noshade nowrap profile prompt readonly readonly rel rev rows rows rowspan

INPUT STYLE LINK FORM SELECT BUTTON, TEXTAREA APPLETD SELECT FORM FRAME, IFRAME IMG A INPUT, OBJECT MAP PARAM META AREA FRAME HR TD, TH HEAD ISINDEX TEXTAREA INPUT A, LINK A, LINK FRAMESET TEXTAREA TD, TH

maksimalan broj vidljivih karaktera medij na koji e stil uticati medij na koji e link uticati metod prosledivanja podataka (post,get) tip selekcije kontrole naziv kontrole naziv apleta naziv kontrole naziv forme naziv okvira naziv slike naziv taga naziv kontrole naziv slikovne mape naziv parametra naziv meta taga deo slikovne mape na kome nema linka onemoguavanje promene veliine okvira iscrtavanje hr taga bez senke (2D) iskljuivanje preloma teksta na krajevima kontrola adresa korisnicki definisanog profila polje za unos isindex elementa omoguceno samo itanje teksta omoguceno samo itanje teksta identifikuje dokument u hijerarhiji linkova identifikuje dokument u hijerarhiji linkova broj redova broj redova broj redova polja

rules scheme scope scrolling selected shape shape size size size size size span span src src src src standby start style summary tabindex target text title type type type

TABLE META TD, TH FRAME, IFRAME OPTION AREA A HR FONTD INPUT BASEFONT SELECT COL COLGROUP SCRIPT INPUT FRAME, IFRAME IMG OBJECT OL Sve TABLE A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA A, AREA, BASE, FORM, LINK BODY Sve A, LINK OBJECT PARAM

razdvaja vizuelno sadraj po kolonama ili redovima tip sadraja opsek vidljivosti polja opsek vidljivosti polja status opcije forma link poligona forma link poligona debljina hr linije debljina fonta duina kontrole debljina fonta broj prikazanih redova broj kontrola na koje utie element broj elemenata grupe adresa eksterne klijentske skripte adresa slike kontrole (ako je image kontrola) adresa strana koju sadri okvir adresa slike alternativna poruka prikazana za vreme uitavanja objekta poetak sekvence liste css stil opis tabele pozicija u tab indeksu ciljna pozicija boja teksta strane naslov elementa tip elementa tip objekta tip spoljnog parametra

type type type type type type type usemap valign value value value value value valuetype version vlink vspace width width width width width width width width width

SCRIPT STYLE INPUT LI OL UL BUTTON IMG, INPUT, OBJECT

tip jezika skripte tip stilskog jezika tip kontrole tip elementa liste tip brojevne liste tip znakovne liste tip tastera forme objekat koristi slikovnu mapu

COL, COLGROUP, TBODY, vertikalno ravnanje TD, TFOOT, TH, THEAD, TR INPUT OPTION PARAM BUTTON LI PARAM HTML BODY APPLET, IMG, OBJECT HR IFRAME IMG, OBJECT TABLE TD, TH APPLET COL COLGROUP PRE vrednost kontrole vrednost lana liste vrednost parametra naslov tastera inicijalizacija poetka sekvence tip parametra HTML verzija boja poseenih linkova vertikalni prored duina linije duina okvira duina objekta duina tabele duina polja duina objekta duina kolone duina grupe kontrola duina preformatiranog HTML sadraja

Najvanije iz lekcije:

1. Istoimeni HTML atributi mogu imati razliit uticaj na razliitim elementima. 2. U pisanju HTML koda treba izbegavati stilske HTML atribute i koristiti css stilizaciju 3. Ukoliko elimo da slici promenimo veliinu proporcionalno, koristimo samo atribut width ili samo atribut height 4. Ako hoemo da rukujemo sa stilizacijom teksta u HTML-u, koristimo font element 5. Tabele se mogu stilizovati na nivou tabele, reda i polja 6. Pozadinska boja tabele menja se atributom bgcolor 7. Debljina okvira tabele menja se atributom border

CSS stilovi HTML elemenata

Jedinica: 13 od 17 Od verzije 4.0, HTML u listi atributa sadri i atribut style. Ovo je atribut koji omoguava da tokom samog kodiranja unosimo stilizaciju u elemente. Ovo zvui zbunjujue, jer smo do sada, upravo to i radili - unosili stilizaciju u elemente, uz pomo stilskih atributa tih elemenata. Ali, znamo da moderan HTML tei ka razdvajanju stila od samih elemenata i njihove postavke na strani. Style atribut moemo smatrati srednjim reenjem, mogunou da CSS stilizaciju vrimo 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? Nita drugo nego same linije CSS-a koje e biti primenjene iskljuivo na element u kome se nalaze. Ovakav nain rada je, u poreenju sa onim kako smo do sada vrili stilizaciju, veoma efikasan, ali najee samo u sluajevima kada elimo da brzo izvrimo stilsku intervenciju, i to na elementu koji vie nikada neemo ponoviti u istom obliku. Onog trenutka, kada, bilo gde u kodu, napravimo vie puta isti element, sa istim stilskim karakteristikama dodeljenim style atributom, dolazi do redundandnosti informacija i posao na izmenama stilova tih elemenata se multiplicira. Pokuajmo sada da simuliramo jedan od primera iz prethodnih lekcija, style atributom. Prisetimo se tabele koja je imala crveni okvir, sivu unutranjost i uta slova. Prostor izmeu teksta i okvira tabele iznosio je 5 taaka, font je bio tahoma... U primeru, ovo smo postigli tako to smo napravili tabelu sa redom i poljem, to je, na kraju, bila prilina koliiina 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; backgroundcolor: #CCCCCC; width: 80px;">Moja tabela</div>

Evo kako izgledaju oba koda na strani:

Objasnimo sada tana znaenja 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 konano, vidimo da se vrednosti veliina piu sa sufiksom px, to je dovoljno za poetak. 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 take, pa zato CSS atribut border stavljamo vrednost 2 (rezultat bi bio identian 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 mogue. Boja bi bila identina da smo je uneli i heksadecimalno (#ff0000). Konano, ovu CSS izjavu (atribut), zavrili smo oznakom ; i preli na sledeu.

padding: 5px; Ovo je u primeru sa tabelom bio atribut cellpadding. Ovaj atribut predstavlja broj taaka za koliko e se sadraj 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 tiu ba fontova i jedan od njih je font-family, koji, kao vrednost, sadri naziv fonta (ili porodice fontova). Vrednost ovog atributa mogla je biti i: Arial, Helvetica, sans-serif, 'Trebuchet MS', Tahoma Kada browser naie na ovakvu oznaku fonta, on jednostavno pokuava da nae odgovarajui font prema priloenoj listi. Familije fontova obino ine liste fontova koji su srodni po osnovnim karakteristikama (tipovi serifa i sl). font-size: x-small; Oigledno, ovaj atribut predstavlja veliinu fonta. A to se njegove vrednosti tie, u pitanju je relativna veliina fonta. U nekoj od prethodnih lekcija, pominjali smo pojam relativnog i apsolutnog. Tada smo rekli da je pojam apsolutno neto to ima vrednost vezanu za fiksnu referencu, dok je relativno, neto ija vrednost je vezana za neki entitet i varira u odnosu na taj entitet. Relativne veliine fontova funkcioniu na identian nain. Postoji mogunost podeavanja veliine fonta po nekim fiksnim veliinama (take, na primer), ali je mogue vezati veliinu 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 sadraja elementa u kome se nalazi. U ovom sluaju, to je sadraj 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 razliitost reprodukcije tabele i div taga. Tabela se, ukoliko se ne naglasi drugaije, iscrtava u minimalnoj veliini. Taman onoliko koliko joj je potrebno da u nju stane sadraj i da ispuni stilske uslove (ako je dodat i padding, onda sadraj + 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 veliinu ograniavamo na odreeni broj (odprilike onoliki kolika je i veliina tabele koju pokuavamo da iskopiramo). Pogledajmo kako bismo, na jednostavan nain, 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; >Moj DIV tag</div> left: 150px; top: 150px;"

Kada budete rukovali style atributom, obratite panju na jednu bitnu stvar. Style atribut nadjaava sve prethodne stilske atribute objekta. U HTML-u, vai pravilo, da kada jednom elementu dodelite neki stil, svi njegovi podelementi mogu naslediti taj stil ili neke njegove delove. To znai 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 spoljanji tekst crvenom, a unutranji tekst zelenom bojom, jer je unutranji stil pregazio spoljanji 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 vai i za preuzimanje klasa stilova.

<div class="mojStil" style="color:#00FF00"> Ukoliko stil mojStil podrazumeva npr. crvenu boju za sadraj, sadraj e ipak biti zelen, jer je pregaen lokalnim (inline) stilskim atributom. Zapamtite da ova pravila prepisivanja vae samo za postojee atribute, a ne za kompletan stil. Tako, ako su atributi spoljanjeg stila: color: red; background-color: green; a mi ih u unutranjem stilu prepiemo sa: color: black; boja sadraja unutranjeg elementa e biti crna (jer e spoljanji color atribut biti prepisan-pregaen), ali e boja pozadine i dalje biti zelena. Takoe, pazite da potujete sintaksu jer je CSS veoma osetljiv na sintaksne greke. <div style="color:red background-color:yellow;">Moj DIV tag</div> Ovaj kod, na primer, nee obojiti ni pozadinu ni sadraj, iako su oba atributa pravilno napisana, samo zbog nedostatka oznake ; na kraju prvog atributa. Najvanije iz lekcije:

1. 2. 3. 4. 5. 6.

CSS stilove je mogue ubacivati direktno u elemente kroz style atribut CSS stilovi podrazumevaju setove naziva i vrednosti za opise stilskih atributa Neke vrednosti u CSS stilovima se mogu pisati imenima ili heksadecimalno Svaka CSS izjava zavrava se oznakom ; Style atribut primenjiv je na skoro sve HTML elemente Style atribut omoguava najvii nivo stilizacije HTML elementa (mogue je uticati na sve atribute) 7. Svaki inline stil postavljen na atribut pregazie stilove definisane u roditeljskom elementu ili listi stilova 8. CSS je osetljiv na sintaksne greke.

CSS
5.14 Struktura i opis CSS-a 5.15 Sintaksa i `naredbe` CSS-a 5.16 Pristupanje elementima HTML-a kroz CSS 5.17 Rukovanje CSS-om kroz HTML

Struktura i opis CSS-a

Jedinica: 14 od 17 Iako su HTML strane zamiljene kao sklopovi tekstova, slika i hiperlinkova, kroz godine svog postojanja, one su evoluirale u strukturalno veoma kompleksne elemente ija infrastruktura sadri veliki broj razliitih produkcionih komponenti (logika, dizajn, serverska i klijentska programabilnost itd). Web sajtovi postali su mnogo vie od obinih prezentacija, i u mnogim sluajevima 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 moe sadrati vie (da ne kaemo vie stotina) strukturalno razliitih dokumenata. Isprva, HTML je podrazumevao ugraene stilske tagove, h, p, br... ali je, evolucijom i potrebom za profinjenijim formatiranjem, dolo do novih stilskih tagova i atributa. Problematika koja se u ovom trenutku javila je nepotrebno ponavljanje mnotva podataka vezanih za stilizaciju, koje je, osim prostora, nepotrebno oduzimalo i veliku koliinu vremena kreatorima Web strana. W3C je kao reenje ovog problema prezentovao CSS, zbog ega, od verzije 4.0, HTML poznaje i ovaj vid stilizacije sadraja. CSS (Cascade Style Sheets) je jezik serijalizacije stilskih atributa, po sistemu naziv:vrednost. Ovaj jezik ne poseduje funkcionalnost, ve samo atribute koje odreeni sistem (Web strana) prepoznaje i na osnovu njih formatira sadraj. Na taj nain, omoguava se da vie dokumenata pristupi jednom atributu, ime se znatno skrauje koliina nepotrebnih informacija i rada, jer se stil nalazi (i menja) samo na jednom mestu.

Primena CSS stilova u HTML-u

Jedan od naina da se u HTML kodu primeni CSS stil je putem style atributa (inline CSS stilizacija). Ovo omoguava brzo i efikasno postavljanje stila, ali samo na nivou elementa, to znai da se konceptualno ne razlikuje previe od stilizacije putem HTML stilova. Da bi se ovakva stilizacija izvrila, 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 naina je dobra kada elimo da eksplicitno interveniemo na nekom elementu nekog dokumenta i nigde drugde. Svako drugo korienje (koje podrazumeva ponavljanje ovog atributa) nije preporuljivo. Drugi nain je korienje internih stilova, koji se definiu na nivou jednog HTML dokumenta, i vidljivi su u okviru tog dokumenta, ali ne i van njega. Ovo je malo ei nain korienja CSS stilova. Obino se koristi ili kada imamo samo jedan dokument (pa u njega elimo da implementiramo stilove) ili kada za odreeni 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 tiu 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 tie se pozadinske boje body elementa, tako to joj vrednost postavlja u crveno. U ovom i narednim primerima predstavljaemo 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 razliita div taga. Sada, ako bismo eleli da promenimo neko stilsko pravilo na oba taga, mogli bismo to da uradimo u internom stilu mojStil. Trei i najpopularniji nain korienja CSS-a je, svakako, putem eksternih stilova. U ovom sluaju, stilovi se nalaze u zasebnom fajlu ili fajlovima, koji sadre iskljuivo 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 sadri stilove je obian tekstualni fajl (kao i HTML), ija ekstenzija bi, po pravilu, trebalo da bude CSS. Ipak, ovo pravilo nije striktno i fajl (zajedno sa ekstenzijom) moete nazvati kako god elite, sve dok se u njemu nalazi pravilno napisan CSS i dok ga pravilno implementirate u HTML dokument. to se tie implementacije u HTML dokument, u tu svrhu, koristi se element link, koji, kao to znamo, predstavlja referencu na eksterni resurs (a inae mu je ba uitavanje stilova najea 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 sadraj, na primer, moe biti: body { background-color: green; } Ako isprobate ovaj primer, i ako ste pri tom sve uradili kako treba, pozadinska boja cele strane bie 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 statikom obliku (kao u primerima), stilovima moete manipulisati i dinamiki (iako ovo neemo obraivati u ovom kursu). Na primer, pokuajte da u kod unesete sledeu liniju: <div onclick="this.style.backgroundColor='blue';" >moj div 1</div> Pritisak levim tasterom mia na tag iz primera, izazvae primenu stilskog pravila na aktuelni tag, putem JavaScript-a.

Ovakav, dinamiki pristup moe da ide i dalje od ovog primera - ak dotle da se dinamiki kreiraju stilska pravila, stilovi pa i kompletni setovi stilova. Najvanije iz lekcije: 1. CSS je jezik za serijalizaciju stilskih atributa 2. CSS je primenjiv u domenu elementa, dokumenta ili eksternog fajla 3. Kada se definie u dokumentu, CSS set stilova se nalazi u tagu <style></style> u head elementu dokumenta 4. Kada se stil definie u dokumetu kroz style element, naziva se interni CSS 5. Kada se stil definie na nivou elementa, naziva se inline CSS 6. Set CSS stilova moe biti definisan u zasebnom fajlu 7. CSS stilovi definisani u zasebnom fajlu nazivaju se eksterni stilovi 8. Implementacija eksternih CSS stilova vri se HTML elementom link 9. Eksterni CSS je dobar jer je stilska definicija centralizovana i skrauje vreme rada i koliinu nepotrebnih informacij

Sintaksa i `naredbe` CSS-a

Jedinica: 15 od 17 U hijerarhiji jednog CSS seta poznajemo nekoliko kategorija. Stil set (eksterni fajl ili sadraj style taga), pojedinaan stil (style sheet) i pravila stila (rules). U prethodnoj lekciji smo, kao primer, koristili sledei 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 vitiastim zagradama predstavlja jedan stil (style sheet), dok je sama naredba (atribut) za dodeljivanje boje background-color: #ff0000; jedno pravilo tog stila. Pokuajmo sada da dodamo jo jedno pravilo. Recimo da elimo da to pravilo bude bela boja sadraja strane. Evo kako bi glasio CSS kod: body { background-color: #ff0000; color: #ffffff; }

Dakle, pravila se mogu reati jedno za drugim, sve dok su razdvojena oznakom ; Ukoliko imate problema sa ovim primerom, proverite da li ste stil implementirali kako treba. U sliaju eksternog stila link tagom, a u sluaju 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, moete predstaviti i RGB vrednou: background-color: rgb(255,0,0); To je, kada se malo bolje pogleda, veoma slina 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, dobiete brojeve od 0 do 255 (tanije 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 razliitim zapisom: R crvena FF - 255 G zelena 00 - 00 B plava 00 00 Ili prostije reeno, imate mogunost da unesete jednu od 255 vrednosti za jednu od tri boje (crvenu, zelenu i plavu) i tako napravite sopstvenu boju, pri emu nije preterano vano koji ete metod koristiti, sve dok je rezultat na kraju odgovarajui.

Vratimo se na CSS. Pokuajmo sada da, umesto solid boje, unesemo neku pozadinsku sliku ili patern. <style> body { background-image: url(demasoni.jpg); color: #ffffff; } </style> Ovaj stil dae sledei izgled strani (Pod uslovom da imate sliku i da se nalazi u istom folderu u kome je i strana. U suprotnom, moete upotrebiti i bilo koju drugu sliku):

Moemo spreiti 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:

<style> body { /* definisanje pozadinske slike */ background-image: url(demasoni.jpg); /* da li e se slika ponavljati */ background-repeat: no-repeat; /* pozicija slike u odnosu na element */ background-position: center; /* boja pozadine elementa */ background-color: #0099FF; /* boja sadraja elementa */ color: #ffffff; } </style> Osim to smo, usput, nauili jo jednu sintaksnu komponentu CSS-a, komentare (sve u okviru znakova /* i */ ne uzima se u obzir prilikom stilizacije), izmenili smo i malo nain na koji e biti prikazana naa slika na strani. Osim toga, izmenili smo i pozadinsku boju da bi se video beli tekst. Ako isprobate ovaj primer, videete da se slika nalazi na sredini strane i da je pozadina plave boje.

Napominjemo, da ne daju uvek svi pretraivai iste rezultate. Konkretan primer bie u FireFox-u reprodukovan drugaije (slika e se centrirati samo horizontalno). Nekompatibilnost pretraivaa je veliki problem Web dizajnera i Developer-a, ali mi se njime neemo baviti ovde, obzirom da se paleta problema menja svakodnevno. Evo jednog jo konkretnijeg primera korienja pozadinske slike: <style> body { background-image: url(04.jpg); background-repeat: repeat-x; color: #ffffff; } </style> Ovde je, za pozadinsku sliku, upotrebljena jedna dugaka, vertikalna slika, irine tri take, kao uzorak. Na slici se nalazi uzorak koji je mogue uklopiti po horizontali, a po vertikali, taj uzorak se gubi u beloj boji. Tako smo dobili mogunost, da ponavljanjem po X osi (horizontali) ispunimo pozadinu uzorkom, po prilino maloj ceni od 2kb. Isti rezultat, sa kompletnom slikom, bio bi desetak puta vei i naravno, drastino usporio uitavanje strane. Uzorak:

Pozadinu moemo vezati za sadraj, tako da, kada skrolujemo stranu, bude skrolovana i ona. background-attachment: scroll; ili fiksirati za poziciju background-attachment: fixed;

Pogledajmo sada sledei kod: <style> body { background: url(04.jpg) repeat-x fixed; color: #ffffff; } </style> Ve smo se, u prethodnim lekcijama, susretali sa skraenim (shorthand) zapisom CSS pravila, pa moemo samo ponoviti da, osim u zasebnim izjavama, vie pravila (vezanih za jedan stilski atribut, moete zapisati i u jednoj izjavi. Primer: background: url(04.jpg) repeat-x fixed; ima identian rezultat kao i : background-image: url(04.jpg); background-repeat: repeat-x; background-attachment: fixed; Takoe, primeujemo da je atribut color ostao u izvornom obliku. On jednostavno ne moe da se pridrui ovom skraenom zapisu, jer je deo posebne stilske grupacije (tekst). Iako prethodno poglavlje nije naslovljeno, moemo rei da smo u njemu obradili jednu stilsku grupaciju CSS-a background. Sledea bitna stilska grupacija je tekst. Da bi nam bilo jednostavnije za rad, preseliemo se iz body elementa u p element: <head> <style> p { } </style> </head> <body> <p>MOJ TEKST</p> </body>

Poeemo sa color atributom. Recimo da hoemo 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 hoemo malo drugaije 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 slova small relativna veliina slova tahoma naziv fonta

Evo rezultata:

Recimo da smo, u ovom trenutku, zadovoljni izgledom teksta, ali da nam se ne dopada nain na koji se taj tekst uklapa u pozadinu. Na primer, voleli bismo malo vie odbijanja od ivica pozadine i ne elimo da pozadina bude toliko iroka. Pored toga, elimo i okvir oko pozadine. I konano, hoemo da tekst bude centriran u tagu. U tom sluaju, potrebna su nam pravila vezana za dimenzionisanje, poravnanje i boksing. to se dimenzionisanja tie, tu emo se posluiti pravilom width, koje se tie irine elementa. Dodaemo sledei atribut stilu: width: 100px; (na isti nain mogli smo dodati i height atribut to bi, u ovom primeru, rezultiralo poveanjem visine taga. Ali, obratite panju na to da ne mogu svi tagovi da ispotuju 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 vie pravila border. padding: 5px; border: solid 1px green; Podesili smo tag tako da mu odbijanje od ivice bude pet taaka i da ima zeleni okvir debljine jedne take. Ostaje jo samo da centriramo tekst po sredini (poravnanje). text-align: center; Konaan 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 panju na to da je naziv stila p. Ovo nije sluajno. 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. Znai, 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:

Seate se da smo jo na poetku uenja HTML-a rekli da p tag automatski postavlja marginu iznad i ispod teksta. Otuda prazni prostori izmeu okvira. Ovo se moe reiti vrlo jednostavno, podeavanjem donje margine na vrednost manju od nule, ali mi emo umesto toga zameniti p tag div tagom. Ako elite, moete ponovo pokuati primer sa vie tagova. Ukoliko umesto p taga, stavite div tag, rezultat e izgledati ovako:

Pokuajmo sada, na osnovu nauenih komponenti da napravimo jednu kompletnu stranu. Neka za stranu vae sledea pravila: imae zaglavlje, meni, telo i podnoje. Ono ime emo zapoeti 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> Neemo se mnogo baviti ovim linijama (jer je pretpostavka da to ve znate). Ukratko, ovo je strana koja e biti napisana po transitional xHTML standardu, imae unicode set karaktera i naslov e joj biti Moja strana. U head delu, postavljen je style tag. Zatim, ovoj strani moemo dodati zaglavlje (radi lakeg orjentacije, prikazivaemo 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 nee ponavljati, a visinu stila smo podesili na 138px. Ovo je veoma vano, jer, iako ima pozadinsku sliku, tag se, ukoliko nema sadraj, smatra praznim, to znai da nee uopte biti vidljiv (a samim tim ni njegova pozadina). Da bismo bili sigurni da e tag biti vidljiv, postavljamo mu fiksnu visinu na 138 taaka (kolika je visina slike). Zatim moemo dodati meni: <body> <div></div> <a href="#" >NASLOVNA</a><a href="#" >RAZMNOAVANJE</a><a href="#" >ISHRANA</a> </body>

posle ega bi strana trebalo da izgleda ovako:

Jasno je da hiperlinkovi u meniju nisu dobri. Ali, olakavajua okolnost je to to se svaki hiperlink nalazi u zasebnoj logikoj celini (a tagu), pa ovo stilski moemo vrlo jednostavno da reimo 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 podvueni. To je dobro kada su ti hiperlinkovi deo nekog teksta, ali je, ukoliko se nalaze na oiglednoj poziciji za navigaciju (meni), ovo potpuno nepotrebno. Sada emo body tagu, dodati i sadraj: <body> <div></div> <a href="#" >NASLOVNA</a><a href="#" >RAZMNOAVANJE</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 takmienju u Web dizajnu): font sadraja je serifan (times) i rasipa se na desnu stranu, van bloka nae strane. Problematiku fonta emo reiti odmah, a problem sa rasipanjem emo ostaviti za kraj. Napravimo sada jo jedan stil, obzirom da se ubaeni sadraj 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 podnoje. Neka to bude h5 tag (mada nije naroito bitno, jer ionako moemo da mu korigujemo parametre kroz stil). <body > <div></div> <a href="#" >NASLOVNA</a><a href="#"

>RAZMNOAVANJE</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 zadrana</h5> </body>

Sada takoe imamo odreene probleme. Font nam opet nije odgovarajui i, to je mnogo vei 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 prilino poznata, osim jednog: clear: both. Ovo je napredno CSS pravilo i tie se pozicioniranja plutajuih objekata. Ovim pravilom, rekli smo pretraivau da elimo da aktuelni element iskljui nasleeno plutanje i margine. Border-top je derivat stilske grupe border. Formatirali smo okvir na ovaj nain, 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 ograniimo sve njene podelemente. Na primer: body { width: 600px; border: 1px solid #006666; } Dakle, nita nepoznato. Ograniavamo irinu pravilom width i postavljamo plavi okvir oko ograniene povrine. Sada strana izgleda ovako:

... i ostaje samo da dodate funkcionalnost hiperlinkovima. Za kraj, moramo skrenuti panju na nekoliko stvari: Tehnika koju smo koristili da bismo doli do ove Web strane je bila uslovljena korienjem elemenata koje smo do sada obradili i savladali. Zbog toga, ovo ne samo da nije pravi nain da napravite stranu, ve ima prilian broj mana. Zato, ovu lekciju i primere u njoj shvatite samo kao korak ka naprednom rukovanju CSSom koje ete koristiti u sledeih nekoliko lekcija, a ne kao tehnologiju kojom bi trebalo da stavite peat na svoje znanje CSS-a. Jednostavno, potrebno nam je jo sastojaka da bi CSS mogli da upotrebljavamo na pravi nain, a veinu tih sastojaka, zapravo, ine razliiti selektori, odnosno, naini na koje emo pristupati odreenim stilovima kroz stranu i elementima strane kroz stilove. Da biste shvatili o emu govorimo, pokuajte 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 izvuete, to su naini dodeljivanja stilova i neka osnovna stilska pravila. Nemojte se truditi da napamet nauite 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="#" >RAZMNOAVANJE</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 zadrana</h5> </body> </HTML> Najvanije iz lekcije: 1. 2. 3. 4. 5. 6. Jedan set stilova podrazumeva, stilove i pravila Svaki stil naslovljen je selektorom Komentari se u stilovima oznaavaju sa /* komentar */ Stilovi se dele na logike kategorije (ravnanje, pozadinu, tekst, boksove...) Pravila je mogue pisati pojedinano ili grupno (po kategoriji) Boje u stilovima je mogue unositi po imenu, heksadecimalnom kodu ili RGB vrednostima. 7. Stilska pravila jednog stila reaju se jedno za drugim i razdvajaju oznakom ; 8. Set pravila (stil) mora biti oivien vitiastom zagradom i mora mu prethoditi selektor 9. 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 zavrili konstatacijom da nain 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 mogue), 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 predlaemo da se lekciji posvetite i temeljno je prouite.

Pristup uz pomo imena tagova

Samo emo ukratko pomenuti pristup tagovima putem njihovog imena, jer je ovo nain 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 imae svojstva dodeljena p stilom. <style> p { color:#FF0000; } </style> <p>Pasus 1</p><p>Pasus 2</p> Mana ovakvog pristupa je to ne moete 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 nain. Ili, elimo da sve strane sajta imaju istu boju pozadine i sl.

Klasni selektori
Ovo je najednostavniji i veoma popularan nain za dodelu stilova. Funkcionie 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 sluaju najbolje reenje ba klasni selektor. Pravljenje klasnog selektora je isto to i pravljenje tag selektora. Jedina razlika je to pre naziva selektora morate staviti taku: .selektor <style> .taster { border: 1px solid #0099CC; background-color: #F3F3F3; padding: 3px; /* Pravilo cursor: hand daje do znanja pretraivau da kurzor, kada se nalazi iznad ove kontrole treba da ima sliicu 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 moete napraviti i neto 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, moemo praviti kombinacije tag i klasnih stilova koristei taku 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 moete dopuniti ili pregaziti inline stilom (atributom style). Pri tom, naroito obratite panju na pojam dopuniti. Ako dodate stil na element koji je ve klasno stilizovan, bie dodata sva pravila koja ne postoje u klasnom stilu i pregaena ona koja ve postoje.

ID selektori
eljeni element moete iz CSS stila pronai i uz pomo njegovog id-a. Ovo funkcionie slino kao i pronalaenje 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 reenje moe biti zahvalno u nekim situacijama, ali ne tako esto, jer znamo da je id neto 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 odreeni element ili grupu elemenata i primeniti neto 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 preete miem preko njega, ukoliko je ve poseen ili ukoliko je trenutno aktivan. Pretraivai podrazumevano dodeljuju odreene atribute ovom tagu (plav podvuen tekst za neposeen hiperlink i ljubiast podvuen tekst za ve poseen), ali ponekad nam takav izgled ne odgovara. Ve smo pominjali ovaj problem i ak ga donekle i reili u prethodnoj lekciji, tako to smo kroz stil predefinisali kompletan a tag (od njega smo napravili taster). Ako sad ponovo pogledate taj primer, videete 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 obian, 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 dogaaj, pa mi samo treba da elementu kaemo kako da izgleda kada mu se taj dogaaj desi. U primeru smo samo promenili boju pozadine.

Primeujete da se atribut color nalazi samo u inicijalnom stilu taga. Ovo nije sluajno. Kada na ovaj nain dodeljujete neke atribute van njegovog inicijalnog stanja, onda moete, kao pravila, postaviti samo ona koja elite da izmenite (ili dodate). Sva ostala pravila, koja se nalaze u inicijalnom stilu elementa, bie zadrana i u njegovom posebnom stanju (pseudo klasnom stilu). Kada jednom ustanovite kako ovo funkcionie, moi 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. Takoe moete i jo preciznije izvriti 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 moete 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. Najvanije iz lekcije: 1. 2. 3. 4. Elementima na strani moete pristupati preko tagova (imena tagova) Elementima na strani moete pristupati preko id-ova Elementima na strani moete pristupati preko klasnih atributa Elementima na strani moete pristupati putem pseudo klasnih selektora (navigacijom) 5. Klasni selektori obeleavaju se sa .stil 6. ID selektori obeleavaju se sa #stil 7. Pseudo klasni selektori obeleavaju se sa tag:stanje 8. Navigaciju kroz klase unutar taga u selektoru moete vriti oznakom . div.mojaKlasa 9. Navigaciju kroz elemente moete vriti oznakom > 10. Svako stilsko pravilo napisano nakon istog pravila za isti atribut pregazie prethodno napisano pravilo 11. Inline stilovi pregazie istoimena pravila napisana u klasnim stilovima

Rukovanje CSS-om kroz HTML

Jedinica: 17 od 17 Zakljuno 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 korienja.

Pozicioniranje elemenata
Verovatno ste do sada nauili da u HTML-u ne moete svaki element da stavite gde hoete, ve da morate potovati odreenu hijerarhiju elemenata i na osnovu nje gradite dokument. CSS nudi nekoliko opcija koje pomau u ovom procesu. Da bismo ih razumeli, potrebno je da se podsetimo pojma relativnog i apsolutnog.

U kontekstu HTML elemenata, ovo znai 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 moe uticati i na njega, dok se u suprotnom element nalazi na zasebnom nivou i ni jedan drugi element ne moe uticati na njega. Ovi nivoi preuzeli su naziv lejeri (Layers) iz grafikih programa.

Ako paljivo pogledate sliku (levo je relativno pozicioniranje, a desno apsolutno) naslutiete jedan problem u pristupu apsolutnog pozicionirajna. Taj problem je mogunost prekrivanja sadraja 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 treu 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 moe prihvatiti: 1. static (podrazumevano, element se vezuje za ostale elemente strane), 2. absolute (orjentie se prema koordinatama u odnosu na roditeljski element), 3. fixed (vezuje se za koordinate pretraivaa), 4. inherit (nasleuje 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 postavie element na sto taaka od vrha strana i sto taaka od leve ivice strane.

Ove koordinate odreujemo pravilima top i left, a osim ova dva pravila, CSS poznaje i ree korieno pravilo right. Prilikom korienja ovog jednostavnog principa, treba obratiti panju na neke osobenosti. Primer koji smo napravili pozicionira na element apsolutno, u odnosu na roditeljski element, koji je u ovom sluaju HTML, odnosno, sam dokument. Po toj logici bismo mogli zakljuiti da e, ako unesemo sledei kod, moj element biti pozicioniran apsolutno u odnosu na RODITELJSKI ELEMENT i samim tim udaljen po deset taaka 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, dobiete sledei rezultat:

Umesto da se pozicionira na deset taaka gore i levo od roditeljskog elementa, moj element je pozicioniran deset taaka gore i levo u odnosu na stranu. Uzrok tome je to nismo ispotovali jedno vano 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 previe visoko), ne zaboravite da poetak roditeljskog elementa predstavlja njegovu najviu taku, a ne taku gde se zavrava prvi red teksta. Takoe, u malopreanjem primeru je moda zbunjivo to to su oba elementa poela u istoj taki, iako je jedan imao apsolutno pozicioniranje 10, a drugi nije ni bio pozicioniran (tako da mu je pozicija 0). Ovo je savreno u redu, jer, svaki HTML dokument ima podrazumevanu marginu gore i levo i svi elementi poinju od te margine (do sada svi primeri koje smo pravili nisu bili slepljeni uz ivicu strane ve 10 taaka odmaknuti od nje). Tu marginu je potovao i roditeljski element. Sa druge strane, moj element je imao eksplicitno pozicioniranje na deset taaka od gornje i leve ivice strane, to ga je smestilo na isto mesto gde i roditeljski element, ali pod potpuno drugaijim okolnostima. Naravno, ovu automatsku marginu moete jednostavno eliminisati podeavanjem body stila (margin: 0px;). Pominjali smo malopre i problem preklapanja elemenata. Da bismo simulirali ovaj problem, modifikovaemo malo malopreanji kod (moete obrisati ostatak i ostaviti samo ova dva elementa) <div style="position: absolute; top: border: 1px solid; background-color: element</div> <div style="position: absolute; top: border: 1px solid; background-color: element</div> 10px; left: 10px; white;">moj 18px; left: 18px; white;">moj

Rezultat je da je drugi element preklopio prvi, jer se jednostavno nalazi na viem nivou od njega, a pri tom imaju preklapajue delove. Ovi nivoi identifikuju se po brojevima pri emu manji broj predstavlja nii sloj. Na primer, ako bismo eleli da prvi element iz primera preklopi drugi element, dodali bismo sledeu izmenu: <div style="position: absolute; top: border: 1px solid; background-color: 1;">moj element</div> <div style="position: absolute; top: border: 1px solid; background-color: element</div> Vrednosti z-index-a mogu ii i u minus. Kada govorimo o podelementima, postoji jo jedna stvar na koju treba da obratimo panju, iako ona nije uvek vezana za pozicioniranje. Pogledajmo sledei 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> 10px; left: 10px; white; z-index: 18px; left: 18px; white;">moj

U primeru, moj element se nalazi unutar drugog elementa, ali njegovi pozicija i format premauju veliinu roditeljskog elementa. Ovako neto nam ponekad moe biti korisno, ali esto neemo eleti da nam sadraj izlazi iz okvira roditeljskog kontejnera. Ovo moemo podeavati pravilom overflow. Dve najee koriene vrednosti overflow pravila su:

hidden - sakriva sadraj koji izlazi iz okvira elementa i scroll - postavlja klizae na roditeljski element

Verovatno ste do sada uvideli mo apsolutnog pozicioniranja. Ali, obratite panju da mo dolazi sa odgovornou. U ovom sluaju, ta odgovornost se manifestuje tako to ete morati da vodite rauna o okolini ovako formatiranog elementa, jer, kao to nita ne moe da utie na apsolutno pozicionirani element, tako ni on ne moe da ima nikakav uticaj na okolinu. to znai da ete se verovatno malo pomuiti ako budete rukovali nekim dinamikim sadrajima u sistemu apsolutnog pozicioniranja.

Margine i plutajui elementi

Margine u CSS-u funkcioniu prilino jednostavno. Sve to treba da znate, jeste da oko svake ivice svakog elementa moete postaviti marginu predstavljenu brojem taaka. Ova margina napravie odbijanje izmeu 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 simetrina, ve moe biti razliita za svaku stranu. Ili je, na nekoj od strana ne mora ni biti. Razliite margine za razliite delove objekata, unose se korienjem pojedinanih ili grupa atributa: margin-left, margin-right, margin-top, margin-bottom ili margin: gornja desna donja leva; to je pristup kakav moete koristiti i za padding i border. Vrednost margine moe biti i negativna. esto se, za pozicioniranje kompletne Web strane, koristi sledee margin pravilo: marginleft: 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 neobjanjeno pravilo clear: both;. Ovo pravilo tie se plutajuih elemenata - pravila. Plutajua pravila su pravila koja omoguavaju lepljenje elemenata za ivice kontejnera ili druge elemente. Iako (po ovom objanjenju), 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 sledei rezultat:

Kao to vidite, iako smo vrednost za irinu div tagova postavili na 50 taaka i ovi tagovi nisu niim ogranieni, oni i dalje zauzimaju itavu irinu strane. Dodajmo im sada plutajua pravila: <div style="border: width: 50px; float: <div style="border: width: 50px; float: 1px solid; left;">moj 1px solid; left;">moj background-color:#FFFFFF; element</div> background-color:#FFFFFF; element</div>

Sada se elementi lepe za levu ivicu najblieg 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 iskljuimo plutanje. Pravilo clear prihvata i vrednost both (koja se najee i koristi) koja iskljuuje plutanje za obe strane (levu i desnu). <div style="border: width: 50px; float: <div style="border: width: 50px; float: <div style="border: width: 50px; clear: 1px solid; left;">moj 1px solid; left;">moj 1px solid; both;">moj background-color:#FFFFFF; element</div> background-color:#FFFFFF; element</div> background-color:#FFFFFF; element</div>

Obratite panju da elementi koji imaju float pravilo imaju nezgodnu osobinu da na nekim pretraivaima ne utiu 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 moete manipulisati i time kako e neki element biti prikazan i da li e uopte biti prikazan. U tu svrhu, koristi se pravilo display. Najbitnije vrednosti display pravila su: inline, block i none. Setite se div tagova iz malopreanjih 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 prikae svoj sadraj. <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 takoe moete 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 sluaju, drugi element (nevidljivi element) nee biti vidljiv. Upozoravamo Vas da na ovaj nain ne sakrivate poverljive podatke, jer, iako nisu vidljivi na strani, ovi podaci su vidljivi u izvornom kodu strane. Nekada e Vam ustrebati opcija tampanja Vae strane. tampanje Web strane je vrlo jednostavno i ak i ne mora imati veze sa nama (svaki pretraiva ima opciju za tampanje). Ali, ono to mi moemo da uradimo, to je da obezbedimo da naa strana bude drugaije stilizovana prilikom tampe, a drugaije 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 zapoinje blok u okviru koga e svi stilovi i pravila vaiti samo za

medij koji taj selektor predstavlja. Blok zapoinje i zavrava se vitiastim zagradama i u okviru njega izvrava se klasina stilizacija (kao i da nije u bloku). Kada napravimo jedan blok, moramo napraviti i za drugi blok iste stilove, samo sa drugaijim 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 hoemo da napravimo posebne stilove za prikaz u pretraivau 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> Primeujete da medija selektori imaju oznaku @ ispred naziva, a zatim ide i vrednost (screen ili print). Nakon toga, slede standardna, ve pomenuta pravila. Blokovi poinju i zavravaju se sa vitiastim zagradama, a u blokovima su istoimeni stilovi sa razliitim pravilima. Najvanije iz lekcije: 1. Elementi na strani mogu biti pozicionirani relativno i apsolutno 2. Apsolutno pozicioniranje u odnosu na roditeljski element zahteva da taj roditeljski element sadri position pravilo 3. Mogue je kontrolisati dubinu apsolutno pozicioniranih elemenata (pravilom zindex) 4. Apsolutno pozicionirani elementi nemaju uticaj na ostale elemente 5. Margina odreuje prazan prostor izmeu spoljne ivice elementa i njegovog kontejnera. 6. Margine se mogu posebno podeavati za svaku ivicu elementa 7. Elementi mogu plutati levo ili desno u kontejneru 8. Mogue je prikazati ili sakriti elemente pravilom: display. 9. Mogue je prikazati razliit stilski sadraj u odnosu na izlazni medij.

10. Medija selektor ima oznaku @ ispred naziva.