SADRAJ

Uvod ...........................................................................................................................................4 Internet servisi.............................................................................................................................4 WWW......................................................................................................................................5 Arhitektura WWW-a................................................................................................................5 Statiki i dinamiki web...........................................................................................................6 WAMP server...............................................................................................................................8 Instalacija WAMP servera.......................................................................................................9 Primer organizacije sajta po folderima..................................................................................11 ta su HTML tag-ovi?................................................................................................................12 Otvaranje vaeg radnog prostora...............................................................................................12 Kreiranje HTML dokumenta.......................................................................................................13 Prikazivanje dokumenta u Web Browser-u................................................................................14 Modifikovanje HTML Dokumenta...............................................................................................14 Reload-ovanje dokumenta u Web Browser................................................................................15 Zaglavlja (Headings)..................................................................................................................15 1.1 HTML zaglavlja................................................................................................................15 Smetanje HTML zaglavlja u va dokument.........................................................................16 Razdvajanje Paragrafa..............................................................................................................17 1.2 HTML Paragraf Break-ovi.................................................................................................17 Unoenje Paragraf Break-ova...............................................................................................17 Drugi tipovi break-ova...........................................................................................................18 Rad sa stilovima........................................................................................................................19 HTML Style Tag-ovi..............................................................................................................19 Unoenje Stilizovanog teksta u HTML dokument..................................................................20 Rad sa listama...........................................................................................................................20 1.3 Neureene liste................................................................................................................21 Ureene liste.........................................................................................................................21 Umetnute liste.......................................................................................................................22 Umetnute liste ......................................................................................................................23 HTML tagovi za ubacivanje slika................................................................................................24 Centriranje teksta i Inline grafike...........................................................................................24 1.4 Atributi Height (Visine) i Width (irine) ............................................................................25 Linkovi.......................................................................................................................................26

Link za lokalne fajlove...........................................................................................................26 1.5 Link za grafiku..................................................................................................................26 Link ka drugim folderima ......................................................................................................27 Anchor linkovi ka folderima vieg nivoa ................................................................................27 Anchor link ka stranici na Internetu ......................................................................................28 1.6 Linkovi i adrese...............................................................................................................29 1.6.1 Kako rade linkovi u pretraivau................................................................................29 1.6.2 Apsolutne ili relativne putanje....................................................................................29 1.6.3 Atribut target..............................................................................................................30 Heksadecimalne oznake i boje .................................................................................................30 Jednobojne pozadine (Solid Color Backgrounds)..................................................................31 Teksturne pozadine...............................................................................................................32 META tagovi..............................................................................................................................33 1.7 Meta tag za automatski prelazak na drugu web stranicu .................................................33 Meta tagovi za opis...............................................................................................................34 Basic Table Tag-ovi Osnovni HTML table tag-ovi...................................................................35 Redovi i Kolone.....................................................................................................................36 1.8 A Data Table Tabela (sa podacima).............................................................................37 Oblikovanje formi.......................................................................................................................40 Text Input Elementi (type="text")...........................................................................................40 Password Input Elementi (type="password").........................................................................41 1.9 Text Area Input Elementi (type="textarea")......................................................................41 Radio buttons (dugmici) (type="radio")..................................................................................42 1.10 Check Boxes (type="checkbox")....................................................................................43 Menu Select (type="select")..................................................................................................44 Submit and Reset (type="submit" and type="reset").............................................................45 CSS...........................................................................................................................................49 1.11 ta je to CSS?...............................................................................................................49 Naini primene stilova...........................................................................................................50 1.11.1 CSS kao eksterni fajl...............................................................................................50 1.11.2 Interni stilovi............................................................................................................51 1.11.3 Inline......................................................................................................................51 1.11.4 Alternativne liste stilova..........................................................................................52 Sintaksa.....................................................................................................................................52 Iskazi - vrste..............................................................................................................................54 Komentari.............................................................................................................................54

HTML komentari...............................................................................................................54 Rules (pravila)...................................................................................................................55 Selektori Uvod........................................................................................................................55 Tipovi selektora....................................................................................................................55 Type selektori........................................................................................................................55 Tipovi HTML elemenata ......................................................................................................56 Class selektori.......................................................................................................................56 Opti class selektori..........................................................................................................57 Class selektori...................................................................................................................57 ID selektori...........................................................................................................................58 Opti ID selektori...............................................................................................................58 ID selektori........................................................................................................................59 Descendant (potomak) selektori............................................................................................59 Link pseudo class selectors..................................................................................................61 Svojstva (Properties)..................................................................................................................63 Text style svojstva.................................................................................................................63 Text layout svojstva..................................................................................................................67 Background svojstva.................................................................................................................71 Border svojstva..........................................................................................................................74 Margin svojstva..........................................................................................................................76 Padding svojstva........................................................................................................................78 . Page layout svojstva................................................................................................................79 1.12 Uvod u pozicioniranje elemenata sa CSS-om................................................................79 1.13 Slovo o slojevima (layers).............................................................................................79 1.14 <div>.............................................................................................................................80 Naini pozicioniranja.................................................................................................................80 1.15 Statiko pozicioniranje..................................................................................................80 1.16 Apsolutno pozicioniranje................................................................................................81 1.17 Relativno pozicioniranje................................................................................................82 Element type svojstva...............................................................................................................89

Uvod
HTML, HyperText Markup Language, je standarizovani jezik koji se koristi pri strukturiranju tekstova, medija i ugraenih objekata u web stranice i elektronsku potu. Kao modifikovanu i pojednostavljenu verziju SGML jezika, HTML standarizuje i odrava World Wide Web Consortium (W3C). Originalnu verziju HTML-a kreirao je Tim Berners-Lee, a prva zvanina verzija je izala juna 1993 godine. HTMl jezik je sainjen od obinog teksta i tagova. Iako se HTML znakovi (tags) esto nazivaju kodom, tehniki HTML nije kod jer kompjuterski kod su instrukcije koje od raunara trae da izvri odreenu operaciju. Svrha HTML znakova je da se se struktura dokumenta "oznai" tako da bi korisnikov agent (user agent), tj. internet pretraiva mogao da prepozna strukturu dokumenta i ispravno je prikae u prozoru internet pretraevaa kojeg korisnik koristi. Za dodatno modifikovanje web stranica, do sada su izali neki dodaci: CSS ili Cascading Style Sheets za izgled i poloaj prezentacije Skriptni jezici (Javascript, VBScript) za omoguavanje dinaminosti i interaktivnosti na web prezentacijama, DOM ili Document Object Model, koji oznaava vezu izmeu skripte i elementa na stranici

Gornji dodaci, u paketu sa HTML jezikom, ponekad se nazivaju DHTML ili Dinamini HTML.

Internet servisi
Kada se govori o sadraju i uslugama koje Internet nudi tada se u stvari misli na servise Interneta. Svi servisi Interneta rade po klijent-server konceptu. Sutina tog koncepta je da se pomou programa koji se nalazi na raunaru korisnika mree-klijenta pristupa eljenim podacima koji su smeteni na serveru na nekoj lokaciji svetske mree. Servisi Interneta se obino dele na: Osnovne servisi koji postoje na svakom raunaru koji je na mrei; Javne servisi koji se instaliraju na znaajnije servere na mrei obezbeujui lak pristup podacima; Posebne servisi namenjeni zadovoljenju specifinih elja korisnika.

Glavni predstavnik osnovnog servisa je e-mail (elektronska pota). Najznaajniji javni servis je WWW. U posebne servise spadaju servisi za pretraivanje, sigurnosni servisi, servisi namenjeni administratorima servera i mrea, i brojni drugi servisi.

WWW
Najpopularniji Internet servis je World Wide Web (WWW). Nastao je 1989. godine kao rezultat ideje Tim Berners Li-a i njegovih saradnika u okviru Centra za nuklearna istraivanja u vajcarskoj (CERN). U poetku veb prezentacije su bile tekstualnog tipa. Godine 1993. Mark Andersen sa saradnicima u Nacionalnom centru za superkompjuterske aplikacije na Ilinois univerzitetu napravio je veb brauzer sa grafikim korisnikim interfejsom koji je prikazivao boju, sliku i animaciju. Godinu dana kasnije, Andersen i Dim Klark su osnovali Netscape, koji je kreirao prvi komercijalni veb brauzer - Internet explorer, koji je postao dominantan na tritu. WWW je sistem sa univerzalno prihvaenim standardima za skladitenje, pronalaenje, formiranje i prezentaciju informacija u klijent-server konceptu. Veb stranice se zasnivaju na standardnom HTML (Hypertext Markup Language) jeziku koji formatira dokumente i pravi dinamike linkove ka drugim dokumentima i slikama smetenim na istim ili drugim raunarima. HTTP (Hypertext Transfer Protocol) je komunikacioni protokol koji omoguava saobraaj veb stranica u mrei. Kompletna putanja do zahtevanih veb stranica naziva se URL (Uniform Resource Locator). Za realizaciju WWW servisa vaan je veb server. Veb server je softver za lociranje i skladitenje veb stranica. On locira veb stranice koje korisnik raunara zahteva i dostavlja ih.

Arhitektura WWW-a
WWW predstavlja mreu dokumenata koji su meusobno povezani; skup protokola koji definiu kako sistem radi i prenosi podatke i softver koji omoguuje rad ove koncepcije. Ono po emu se WWW razlikuje od drugih servisa na Internetu je njegovo jednostavno korienje. WWW omoguava pretraivanje dokumenata i kretanje, kako po razliitim dokumentima jednog raunara tako i po dokumentima razliitih raunara, po Internetu, korienjem jednostavnih komandi. Svakim pritiskom na taster mia pristupa se novoj stranici koja se nalazi na istom ili drugom serveru. Navigacija kroz veb je jednostavna, jer se za prelazak sa jedne stranice na drugu koriste hipertekst veze. Dovoljno je pritisnuti podvuenu re ili frazu i korisniku e biti prikazan linkovani dokument. WWW je jedan od najvanijih servisa Interneta ija upotreba omoguuje: pretraivanje, pronalaenje i itanje dokumenata na razliitim raunarima; korienje Internet servisa kao to su : Telnet, FTP, Gopher; pretragu baza podataka; prikupljanje podataka i informacija; prezentacija i uvanje multimedijalnih podataka.

WWW koristi dokumente koji su kreirani na osnovu HTML-a (Hyper Text Markup Language). HTML omoguuje, putem linkova koje nudi, prelaz sa jednog na drugi dokument, koji moe biti lociran na istom ili udaljenom raunaru. Pozicioniranjem na izabrani link i jednostavnim pritiskom na taster mia prelazi se na drugi sajt, pomou HTTP-a (Hyper Text Transfer

Protocol). Pretraga je omoguena softverom zvanim veb brauzer. Klijent postavlja zahtev, alje ga veb serveru koji pomou CGI-a (Common Gateway Interface), preuzima razliite aplikacije. Arhitekturu WWW-a ine tri velika segmenta: veb klijent veb brauzer, tj. aplikacija instalirana na raunaru-klijentu koja se koristi za pristup stranicama na vebu (Internet explorer, Mozzila, Opera, Safari, i dr.) veb server softver instaliran na serverskom raunaru (Apache, Microsoft Internet Information Services, i dr.) skup dostupnih servisa.

Brauzer klijenta je u interakciji sa serverom, koji u stvari predstavlja posrednika u interakciji klijenta sa dostupnim servisima.
KLIJENT SERVER DOSTUPNI SERVISI

Lokalni podaci

Prikupljanje informacija

Digitalna biblioteka

Veb ita

Upravljanje transferom podataka Alati za prenos informacija

Dodaci veb itaa (Add-ins)

Sigurnost transakcija

Slika 1 Opti koncept arhitekture veba

Statiki i dinamiki web

Web je u poetku svoga razvoja postojao iskljuivo kao statiki, tj. nisu postojale tehnologije koje bi uzele u obzir informacije koje su pristigle od korisnika i na osnovu njih generisale odgovor. Mogunosti statikog Weba oigledno nisu bile naroito velike: HTML stranice jesu nosilac informacija, ali onih koje se ne menjaju zavisno od konteksta te informacije su uvek iste. Oigledno je bilo neophodno da se doe do odreenog stepena programibilnosti na vebu, tj. da se razviju tehnologije koje e omoguiti vei stepen interaktivnosti od statikog veba. Pristup statikim stranicama na veb tee po sledeem redosledu (Error: Reference source not found):

1. Autor veb sajta kreira statiku veb stranicu i uva je u odreenom folderu na serveru 2. Klijent veb brauzer daje HTTP zahtev za datom stranicom. Zahtev se zadaje kada korisnik raunara unese odgovarajui URL u veb brauzer. 3. Veb server prihvata zahtev klijenta i locira traenu html stranicu 4. Traena stranica se vraa veb itau koji je prikazuje korisniku. Izmena statikih veb sajtova podrazumeva izmenu pojedinanih stranica veb sajta, to nije ekonomino ukoliko je potrbno esto aurirati veb sajt. U tom sluaju, mnogo je efikasnije primeniti neku od dinamikih tehnologija za kreiranje veb sajtova.
3. Web server locira.htm datoteku

Web server 1. Autor pie HTML i pohranjuje ga na disku servera 4. HTML tok se vraa itau

2. Klijent daje HTTP zahtev za stranicu Korisnik

Slika 2 Statike veb stranice i nain pristupa

Dinamike Web stranice se zasnivaju na principu da se HTML kod ne stvara sve dok korisnik ne poeli da vidi Web stranicu. To dinamiko stvaranje stranica omoguuje da one budu prilagoene korisnikovim zahtevima, da zavise od prethodnih akcija korisnika, od vremena i mesta kad je pristupio lokaciji, od njegovog identiteta i specifinih potreba. Pristup dinamikim veb stranicama tee po sledeem redosledu (Error: Reference source not found): 1. Veb ita alje HTTP zahtev veb serveru. HTTP zahtev sadri URL sa traenom stranicom. 2. Veb server prihvata klijentski zahtev i aktivira aplikativni server. Aplikativni server je softver koji moe i ne mora biti instaliran na istom raunaru kao i veb server. 3. Na osnovu informacija primljenih u klijentskom zahtevu, aplikativni server prosleuje upit ka serveru baze podataka. 4. Na osnovu dobijenog zahteva, na serveru baze podataka izvrava se odgovarajui upit. Rezultat obrade alje se nazad do aplikativnog servera

5. Aplikativni server formira HTML stranicu u koju ugrauje informacije dobijene iz baze podataka. HTML stranica prosleuje se veb serveru. 6. Veb server alje HTML stranicu do klijentskog raunara.

1. Pretraiva alje HTTP zahtev koji sadri URL

Korisnik 6. Web server stranu alje do pretraivaa 2. Web server aktivira aplikacioni server

5. HTML strana sa traeniminformacijama Web server 4. Povratna informacija

Aplikacioni server 3. Aplikacioni server alje zahteve i instrukcije do database servera

Database server

Slika 3 Dinamike veb stranice i nain pristupa

WAMP server
WAMP je paket nezavisno kreiranih programa instaliranih na raunaru koji koriste Microsoft Windows operativni sistem. Interakcija ovih programa omoguava korienje dinamikih web strana. "WAMP" je akronim formiran od inicijala operativnog sistema (Windows) i glavnih komponenti paketa: Apache, MySQL i PHP (ili Perl ili Python). Apache je web server, koji omoguava korisnicima da web browser-ima, kao to su Internet Explorer ili Firefox pristupe sadraju na web serveru. MySQL je sistem za upravljanje bazama podataka. PHP je skript jezika serverske strane koji moe da manipulie informacijama koje su sadrane u bazi i generie web strane iznova svaki put kada se element sadraja zahteva iz browser-a. Ostali programi mogu takoe biti ukljueni u

pakete, kao to je phpMyAdmin koji omoguava grafiki interfejs za pristup MySQL-u, ili neke druge skript jezike, kao tu su Python ili Perl.

Instalacija WAMP servera

Pokrenite ikonicu WampServer2.0c.exe i klikom na next i I accept the agreement lako se instalira WAMP server. Klikom na Start/All Programs/WampServer/Start WampServer ete pokrenuti WAMP server, kao to je prikazano na slici 4

Slika 4 Pokretanje WAMP servera

U donjem desnom uglu ekrana (na Taskbar-u) pojavie se ikonica koja predstavlja WAMP server. Kada kliknete na tu ikonicu pojavie se meni sa slike 5.

Slika 5 Opcije koje nudi WAMP server

Levim klikom na nju moe se pristupiti localhost-u, PHP MyAdmin-u, SQLite Manager-u. Uz pomo www directory moe se brzo pristupiti www folderu u kome se prave projekti koji predstavljaju sajtove. Postoje i opcije za starovanje Apache i MySQL servera i modula i mogue je dobiti informaciju o verziji koja se koristi. Quick Admin omoguava pokretanje, stopiranje i ponovno startovanje svih servisa. Klikom na localhost (127.0.0.1) dobie se ekran sa slike 6 koji predtavlja Wamp Homepage. Ovde se mogu videti konfiguracije servera, alati i projekti koji se kreiraju u www folderu. Svi sajtovi se uvaju u C:/WAMP/WWW. Ovde sauvani sajtovi e biti vidljivi kao folderi u odeljku Your Projects.

Slika 6 Wamp Homepage

Klikom na phpMyAdmin prikazae se slika 7. Ovo nam omoguava pristup MySQL bazi podataka.

Slika 7 Prikaz phpMyAdmin-a

Primer organizacije sajta po folderima

Ukoliko ste sajt nazvali mojsajt njemu se moe pristupiti preko C:WAMP/WWW/mojsajt/. Sajt je folder koji je najee organizovan po folderima koji su slike, download, template, index.html i druge stranice. Root folder zavisi od servera, poto je kod nas to WAMP server onda je root folder c://wamp/www. URL adresa preko koje se moe pristupiti sajtu je http://localhost/mojsajt. Index.php je stranica koja je podeena da se otvara pri pokretanju sajta. Na slici 8 je prikazano kako se najee organizuje sajt po folderima.

Slika 8 Organizacija foldera

ta su HTML tag-ovi?
Kada web browser prikae stranicu kao to je ova koju upravo itate, ona se uitava sa jednostavnog text fajla i trai iz specijalnih kodova ili tag-ova koji su oznaeni sa <and> znakovima. Osnovni format za HTML tag je: <tag_name>string of text</tag_name> Kao na primer, naslov za ovu sekciju koristi header tag: <h3>Sta su HTML tagovi ?</h3> Ovaj tag govori web browser-u da prikae tekst Sta su HTML tagovi ? u stilu header-a level 3. Vano je napomenuti da krajnji ending tag, </tag_name> sadri / znak kose crte. Ova kosa crta / govori web browser-u da stopira tag-ovanje teksta. Ako ste zaboravili kosu crtu, web browser e nastaviti tag (citat, izreku) na ostatku teksta u vaem dokumentu, pravei neeljene rezultate Web browser ne mari da li koristite velika ili mala slova. Suprotno kompjuter programiranju, ako napravite tamparsku greku u HTML-u nee vam se desiti bomba ili ruenje sistema; prosto e vaa web strana izgledati pogreno.

Otvaranje vaeg radnog prostora

Da bi zavrili ovu lekciju, trebalo bi da kreirate drugi web prozor (ovo vam doputa da sauvate ovaj prozor sa instrukcijama iz lekcije i jedan prozor kao va radni prostor, tj workspace), i da pored toga otvorite text editor aplikaciju u treem prozoru. U nekim web browser-ima (recimo Internet Explorer-u), novi browser prozor se otvara i pored ve otvorene stranice koju gledate ili vae home page stranice. Ovo su koraci za podeavanje vaeg radnog prostora workspace: Iz File menija veeg web browser-a, selektujte New Window ili New Web Browser ( Taan naziv moe biti razliit u zavisnosti od web browser-a koji koristite). Drugi web window prozor bi trebalo da se pojavi. Posmatrajte prvi prozor kao textbook, i drugi kao na va workspace da kompletirate HTML lekcije. Sledee to treba da uradite je da iskoite iz web browser-a i odete na va desktop i otvorite tekst editor program. Ukoliko koristite word procesor program da kreirate va HTML, proverite da li ste sauvali dokument u obinom text formatu ili ASCII formatu.

Takoe, korisno je i pomoie i vama u daljem radu ako prvo kreirate novi directory/folder na vaem kompjuteru koji e biti va radni prostor. Moete je zvati work area ili my space ili kako god vi to elite; samo proverite da li ste sauvali sve fajlove koje kreirate na njemu.

Kreiranje HTML dokumenta

HTML dokument sadri dva razliita dela, glavu (head) I telo (body). Head sadri informacije o dokumentu koje se ne prikazuju na ekranu. Body sadri sve ostalo to se prikazuje kao deo web stranice. Osnovna struktura svake HTML stranice je: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <!-- header info se unose dodatne informacije o dokumentu koje se ne prikazuju na stranici --> </head> <body> <!sve na Html-u to e se videti na stranici --> : : : : : : </body> </html> Linija na samom vrhu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> nije tehniki zahtevana, ali je kod koji govori browser-u koja je verzija HTML tekue stranica koja se pie. Potrebno je okrui ceo HTML sadraj sa <html>...</html> tagovima. Unesi prvo tvoj <head>...</head> a potom <body>...</body> sekcije. Takoe primeujete comment tag-ove okruene sa <! komentar -->. Tekst izmeu tag-ova se ne pokazuje na web stranici ali taj tekst slui za informisanje koje e te moda vi koristiti ili neko drugi ko moe pogledati HTML kod iza web stranice. Slede koraci koji se koriste za kreiranje prvog HTML fajla.

Korak 1 Korak 2

Ako ve nije otvoren, pokrenite va text editor program.

Unesite sledei tekst (ne morate da pritiskate RETURN na kraju svake linije; web browser e obraditi ceo tekst): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <title>FON Web</title>

</head> <!napisano za Pisanje HTML tutorial-a --> <body> U ovoj lekciji koristiete Internet da prikupljate informacije o FON-u, a potom ete napisati izvetaj na osnovu vaih rezultata. </body> </html> <title> tag je korien da jedinstveno identifikuje svaki dokument i takoe prikae naslov na title bar-u prozora browser-a. Takoe, primeujete da smo uneli komment tag koji moe da prikazuje ime autora i datum kada je dokument kreiran. Vi moete pisati bilo ta izmeu comment tag-ova , ali je to vidljivo jedino kada vi pogledate izvor HTML-a za web stranicu.

Korak 3 Sauvajte dokument kao fajl koga e te nazvati fon.html i sauvajte ga na radnoj povriniu folderu/direktorijumu koji ste ve podesili. Takoe, ako koristite word program za kreiranje HTML-a, proverite da li uvate kao plain text (ili ASCII) format.
Napomena : Za Windows 3.1 korisnike, morate sauvati sve vae HTML-ove fajlove sa imenima koja na kraju imaju oznaku .HTM, tako da bi u vom sluaju va fajl bio fon.htm.

Prikazivanje dokumenta u Web Browser-u

Korak 1 Vratite se u prozor web browser-a koji ste koristili kao va radni prostor work space. ( Ako jo nemate drugi browser prozor otvoren, izaberite New Window ili New Browser iz File window.) Korak 2 Izaberite Open File... sa File menija. (Za korisnike Ineternet Eksplorer-a, kliknite na Browse dugme da selektujete fajl)
Trebalo bi da sada vidite u title bar-u radne povrine prozora tekst FON Web i u web stranici ispod, jedna reenica od <body> teksta koji ste napisali, U ovoj lekciji...

Modifikovanje HTML Dokumenta

Da bi pratili ovu lekciju, morate da kreirate drugi web browser window, tj. prozor i ponovo otvorite text editor prozor koji ste koristili u prvoj lekciji. Ovde su dati koraci koji se koriste kod ponovnog otvaranja radnog prostora:

Korak 1. Korak 2.

Ako nije otvoren, kreirajte novi web browser prozor tako to izaberete New Window iz File meni-ja. Koristite Open File... komandu sa File meni-ja da pronaete i otvorite HTML fajl koji ste kreirali u prethodnoj lekciji.

Korak 3. Korak 4.

Ponovo otvorite va text editor program. U text editoru, otvorite fajl (fon.html) koji ste kreirali u prethodnoj lekciji.

Izmene u vaem HTML dokumentu

Korak 1.

Ispod teksta koji ste napisali u prethodnoj lekciji, pritisnite RETURN nekoliko puta i unesite sledei tekst Fakultet organizacionih nauka je visokoobrazovna institucija, lan je beogradskog univerziteta sa seditem u ulici Jove Ilia 154.

Korak 2.

Izaberite Save iz File meni-ja da sauvate izmene u vaem HTML fajlu.

Reload-ovanje dokumenta u Web Browser

Vratite se na radnu povrinu web browser-a gde se prethodna verzija vaeg fajla prikazala. Primetie te da se novi tekst koji ste uneli kroz prethodne korake moda jo ne prikazuje. Da bi videli izmene i promene, koristite Reload dugme ili meni u vaem web browser-u. Sada bi ve trebalo da vidite tekst koji ste maloas uneli. Primetiete da web browser ignorie sve blank linije i velike razmake koje ste uneli u HTML fajl

Zaglavlja (Headings)
1.1 HTML zaglavlja
Kreirate zaglavlja u HTML-u tako to tag-ujete odreene delove teksta sa heading tag-ovima, tj. tag-ovima za zaglavlje.Format za HTML zaglavlje tag je: <hN>Tekst koji se pojavljuje u zaglavlju</hN> gde je N broj od 1 do 6 i oznaava veliinu zaglavlja. Evo i nekih primera sa razliitim veliinama zaglavlja (slika 1):

Slika 9 Veliine zaglavlja

Nivoi zaglavlja su rangirani od nivoa 1 (najvaniji) do nivoa 6 (najmanje vaan).

Smetanje HTML zaglavlja u va dokument

Korak 1 Korak 2 Korak 3
Ponovo otvorite va radni prostor, tj. workspace.Idite na text editor prozor. Otvorite HTML tekst fajl koji ste kreirali fon.html.

Prvo emo koristiti tag da prikaemo na ekranu naslov kao najvee zaglavlje, <H1>. Unesite sledee iznad postojeeg body teksta tj. posle </head><body> tag-va: <h1>FON Web</h1>

Korak 4

Ispod teksta koji ste upravo uneli, kreirajte drugo zaglavlje za budue delove vae FON Web stranice. Unesite sledea zaglavja unutar body-ja vae web stranice: <h2>O fakultetu</h2> <h2>Delatnost fakulteta</h2> <h2>Smerofi na FON-u</h2> <h3>informacioni sistemi i tehnologije</h3> <h3>menadmet</h3> <h3>upravljanje kvalitetom</h3> <h3>industrijsko inenjerstvo</h3> <h4>Vesti</h4>

Korak 5 Korak 6

Sauvajte promene u vaem tekst editoru. Vratite se u va web browser, Open i Reload HTML fajl.

Razdvajanje Paragrafa
1.2 HTML Paragraf Break-ovi
Videli smo ranije da web browser ignorie sve CARRIAGE RETURNS ukucane u va text editor. HTML kod za paragraf break je: <p> Vidite da je ovaj tag poseban i da ne zahteva ending tag; Za sada nema potrebe da koristite </p>. Takoe, <h> tag-ovi se mogu napraviti kao break ali je neophodno staviti <p> tag pre header tag-a: <p> <h2>Fakultet organizacionih nauka</h2>

Unoenje Paragraf Break-ova

Pratite sledee korake kako bi uneli i videli paragraf break u vaem HTML dokumentu.

Korak 1. Korak 2. Korak 3.

Ponovo otvorite va workspace.Idite na text editor prozor. Otvorite va radni dokument, fon.html, u teks editoru.

Kao prvo elimo da pomerimo reenicu ( Fakultet...) tako da je ona iznad O fakultetu zaglavlja. Upotrebite mi da preseete (cut) i paste, tj.zalepite ovaj tekst na zadatu lokaciju.

Korak 4.

Posle ovog, elimo da dodamo vie teksta. Ali bolje nego da ponovo unosimo , sa ove stranice miem selektujte i kopirajte reenice: Fakultet organizacionih nauka je visokoobrazovna institucija, lan je beogradskog univerziteta sa seditem u ulici Jove Ilia 154.

Korak 5. Korak 6. Korak 7. Korak 8. Korak 9.

Sada, vratite se u va HTML dokument u text editor, i zalepite ovaj tekst posle ve postojeih reenica iznad <h2> O fakultetu </h2> zaglavlja. Sauvajte promene u text editoru. Vratite se u va web browser.

Ako se ne vidi ovo to se upravo uradili, idite na Open Local... komanda sa File meni-ja za otvaranje dokumenata. Selektujte Reload iz File menija. Sada bi trebalo da vidite dve reenice iz Uputsva. Mi sada elimo da stavimo break izmeu ovih reenica.

Korak 10.

Opet, vratimo se u HTML dokument u text editor.

Korak 11. Korak 12.

Posle druge reenice ispod unesemo <h2> O fakultetu </h2>, pritisnemo RETURN, i potom unesemo paragraph tag: <p>

Ovaj deo bi trebao sada da izgleda ovako: <h2> O fakultetu </h2> Fakultet organizacionih nauka je visokoobrazovna institucija, lan je beogradskog univerziteta sa seditem u ulici Jove Ilia 154. <p> Fakultet organizacionih nauka je visokoobrazovna institucija, lan je beogradskog univerziteta sa seditem u ulici Jove Ilia 154.

Korak 13. Korak 14.

Sauvajte promene u text editoru.

Vratite se u va web browser i Reload-ujte dokument. Dve reenice uputstva bi sada trebalo da su razdvojeni paragrafi.

Drugi tipovi break-ova

Da razdvojite glavne delove web stranice, koristi se horizontal rule ili hr tag. On unosi horizontalnu liniju. HTML format za horizontal rule tag je: <hr> Stavite hr tag ispod O fakultetu zaglavlja. Ovo e pomoi da razdvojimo otvorene reenice lekcije sa drugih delova koji slede. I na kraju konano, sledi <br> tag koji forsira tekst u novu liniju kao <p> tag, ali bez ubacivanje blank linije. Uporedimo razliitosti izmeu upotrebe <br> i <p> u sledea dva primera u tabeli 1:
Table 1 Mogunosti paragraf tipova

HTML kod U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova. <p> Takodje... <p> otkricete i razlicite izvanredne mogucosti i kombinacije tagova srodnih njemu.

Rezultat u browser-u U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova. Takodje... otkricete i razlicite izvanredne mogucosti i kombinacije tagova srodnih njemu.

U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova. <p> Takodje... <br> otkricete i razlicite izvanredne mogucosti <br> i kombinacije tagova srodnih njemu.

U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova. Takodje... otkricete i razlicite izvanredne mogucosti i kombinacije tagova srodnih njemu.

<br> tag moe biti korien za razliit raspored stila.

Rad sa stilovima
Ba kao word procesor, HTML moe preneti web browser-u da prikae neke delove teksta u Italic ili Bold stilu ili ak u kombinaciji.

HTML Style Tag-ovi

HTML nudi nekoliko tag-ova za dodavanje stila vaem tekstu (tabela 2).
Table 2 Tag-ovi za dodavanje stila

HTML kod <b>Ovo je Bold...</b> <i> Ovo je Italic...</i> <tt> Ovo je Typewriter...</tt> <i><b>Ovo je Bold AND Italic</b></i> <b><i>Ovo Je Takodje</i></b> <h2><i>Novi</i> i <tt>Unapredjeni!</tt></h2>

Rezultat u browser-u Ovo je Bold... Ovo je Italic...

Ovo je Typewriter...

Ovo je Bold AND Italic Ovo Je Takodje

Novi i Unapredjeni!

Primeujete li da moete kombinovati stil tag-ova sve dok u potpunosti ne budete zadovoljni, italic tag-ovi su oba unutar bold tag-ova. Takodje, red nije vaan. Osim toga, moete dodati stil i na tekst koji se pojavljuje u zaglavlju tag-ova. Primetite kako su razliiti stilovi tag-ova otvoreni i zatvoreni okolo rei njihovog stila i kako heading tag-ovi okruuju ceo tekst za zaglavlje.

Unoenje Stilizovanog teksta u HTML dokument

Pratite sledee korake da potvrdite style tag-ove u vaem HTML dokumentu:

Korak 1. Korak 2. Korak 3.

Ponovo otvrorite va workspace. Vratite se na va HTML dokument, fon.html , u text editor.

Pronaite re Fakultet u prvoj reenici. Promeniemo je u bold-u da je naznaimo kao vanu re. Unesite tag-ove da bi se ova re pojavila kao bold tekst: <b>Fakultet</b>

Korak 4.

Sada emo modifikovati drugi paragraf sa bold i italic tag-ovima da naglasimo rei. Unesite <b>...</b> i <i>...</i> tag-ove oko rei beogradskog univerziteta tako da ovaj deo izgleda ovako: <p> Fakultet organizacionih nauka je visokoobrazovna institucija, lan je <b><i> beogradskog univerziteta </i></b> sa seditem u ulici Jove Ilia 154.

Korak 5.

Konano, koristili smo typewriter tag koji oznaava posebnu re. Iznad Delatnost fakulteta zaglavlja, unesite sledee: Delatnost fakulteta, je <tt>obazovno-nauni rad</tt> ukljuujui i srodne delatnosti. Sauvajte u text editoru i Realod-ujte u va web browser.

Rad sa listama
Liste mogu oznaavati podatke ili informacije u formatu koji je lak i jednostavan za itanje. HTML kod moemo kucati u nekom tekst editoru (NotePad, TextPad, i dr.), kao i u prethodnim lekcijama.

Korak 1 Korak 2

Pokrenite tekst editor. Kod koji elite da unesete kucate u <body> sekciji.

Korak 3 Da biste pogledali izgled fajla u browser-u potrebno je da ga prvo sauvate (File/Save), a zatim izaberete konkretan browser u kome elite da pogledate fajl.

1.3 Neureene liste

Neureene liste ili <ul> .. </ul> tag-ovi, su one koje se pojavljuju kao podaci sa bulet oznakom ili oznakama na poetku. Bullet oznaka zavisi od posebne verzije vaeg web browser-a i fonta specifikovanog za prikazivanje normalnog WWW teksta. Evo primera neureene liste: Izgled u browser-u TIPOVI STUDIJA:

Dodiplomske Postdiplomske

A ovo je HTML format koji pravi ovakav izgled liste: <b>TIPOVI STUDIJA:</b> <ul> <li> Dodiplomske <li> Postdiplomske </ul> <ul> tag oznaava poetak i kraj liste, i <li> oznaava svaku stavku liste.

Ureene liste
Ureene liste su one gde browser numerie svaku sukcesivnu listu podataka tako to poinje sa 1. Primetite jedinu promenu ul tag-a u ol tag. Evo jednog primer Izgled u browser-u SMEROVI: 1. 2. 3. 4. IT MEN UK OM

A ovo je HTML format: <b>SMEROVI:</b> <ol> <li>IT <li> MEN

<li> UK <li> OM </ol>

Umetnute liste
Uredjene i Neuredjene liste mogu imati razliite nivoe, tj level-e; svaka e biti ubaena skladno u va web browser. Vaa glavna briga bi bila da proverite da li je svaka lista pravilno odreena i da je umetnuta lista ispravna. Moete poeti da pravite sloene sa svim ovim <ol> <li> </ul> <li> tag-ovima koji se nalaze okolo, ali se potrudite da zapamtite osnovnu strukturu: <ul> <li> <li> </ul> <ol> <li> <li> </ol>

Ovde je dat primer jedne neuredjene liste sa podnivoima drugih lista: Izgled u browser-u Neuredjena i umetnuta lista

Ovo je prva stavka Ovo je druga stavka o Ovo je prva stavka druge podstavke Ovo je prva podstavka Ovo je druga podstavka o Ovo je druga stavka druge podstavke o Ovo je treca stavka druge podstavke Ovo je treca stavka

Primetite kako se bullet oznaka menja sa svakom promenom nivoa liste. A ovako izgleda HTML format koji daje izgled gore navedene tabele: <b>Neuredjena i umetnuta lista</b> <ul> <li>Ovo je prva stavka <li>Ovo je druga stavka <ul> <li> Ovo je prva stavka druge podstavke <ul> <li> Ovo je prva podstavka <li> Ovo je druga podstavka </ul> <li> Ovo je druga stavka druge podstavke

<li> Ovo je treca stavka druge podstavke </ul> <li>Ovo je treca stavka </ul>

Umetnute liste
Ne samo da moete meati uredjene liste unutar uredjenih, ve moete takoe da meate i unosite razliite tipove listi. Recimo, HTML poinje da izgleda veoma runo, ali gledajte kako liste u potpunosti sadre druge liste. Npr., ova uredjena lista sadri umetnutu neureenu listu: Izgled u browser-u Kombinovana lista 1. Ovo je prva stavka 2. Ovo je druga stavka o Ovo je prva stavka druge podstavke 1. Ovo je prva podstavka 2. Ovo je druga podstavka o Ovo je druga stavka druge podstavke o Ovo je treca stavka druge podstavke 3. Ovo je treca stavka

A ovako izgleda HTML dokument, kojim se postie ovakav efekat: <b>Kombinovana lista</b> <ol> <li>Ovo je prva stavka <li>Ovo je druga stavka <ul> <li> Ovo je prva stavka druge podstavke <ol> <li> Ovo je prva podstavka <li> Ovo je druga podstavka </ol> <li> Ovo je druga stavka druge podstavke <li> Ovo je treca stavka druge podstavke </ul> <li>Ovo je treca stavka </ol> Pogledajte fajl u browser-u.

HTML tagovi za ubacivanje slika

Inline slika je ona slika koja se pojavljuje unutar Web stranice,

kao to je recimo ova slika logo HTML format za inline image tag izgleda ovako: <img src="filename.gif"> gde je filename.gif ime GIF fajl-a koji je smeten u istom direktorijumu/fajl-u gde je smeten i HTML dokument. Inline znai da e web browser prikazati sliku izmeu teksta. Tekst se odmah nastavlja iza logo slike. Da bi se slika pojavila u posebnom redu, prosto unesite paragraf tag ispred image tag-a: <p> <img src="filename.gif">

Centriranje teksta i Inline grafike

Sa atributom u <img...> tag-u, takoe se moe regulisati poravnavanje susednog teksta sa linijom slike. Atribut align dodat ispred <img> tag-a moe proizvesti sledee efekte: <img align="top" src="filename.gif"> - poravanava tekst sa gornjom ivicom slike <img align="middle" src="filename.gif"> - poravnava tekst sa sredinom slike <img align="bottom" src="filename.gif"> - poravnava tekst sa donjom ivicom slike

Tekst se poravnava samo za jednu liniju... ( skupiti ili razvui WWW browser window i videti ta se deava). Postavljanje Inline Image u HTML Dokument

Korak 1 Korak 2
fon.jpg

Kreirajte folder pod nazivom HTML Vebe U ovom folderu sauvajte sliku logo.jpg (desni klik, Save Picture As) i sliku U istom folderu, kreirajte HTML fajl u unesite sledei kod:

Korak 3

<html> <h1 align="center"><strong>FAKULTET</strong></h1> <p align="center"><img src="logo.jpg"></p> <p align="center">Ovo je zvanini logo predmeta na fakultetu.</p> <p align="center"> Fakultet datira od 1969 godine. </p> <p align="center"><img src="fon.jpg"> </p> </html> Sauvajte fajl i pogledajte kako izgeda u browser-u.

1.4 Atributi Height (Visine) i Width (irine)

Druga opcija koju mogu sadrati <img...> tag-ovi su dva atributa koja daju dimenzije slike u pikselima. Standardno, web browser e utvrditi ove dimenzije na osnovu slike koju uitava; uitavanje slike moe biti bre ukoliko se naznae ove veliine u HTML-u. Format koji sadri ovu opciju izgleda upravo ovako: <img src="filename.gif" width=X height=Y > gde x oznaava irinu, a y visinu slike u pikselima. Napomena: Poredak atributa unutar <img> tag-a nije bitan. esto se zapitamo da li moemo da promenimo dimenzije slike unoenjem drugih veliina od trenutne u kojoj se slika nalazi? Odgovor na ovo pitanje je pozitivan, ali rezultati mogu biti neeljeni. Uneti vee brojeve (da bi slika bila vea) rezultat bi bio "blocky" picture. Ponekad ovo moe biti koristan efekat na slikama sa velikim povrinama obojenim punom bojom. Ukoliko se pak unesu manji brojevi ( da bi slika bila manja ) rezultat bi mogao biti u vidu iskrivljene slike. Takoe, puna veliina slike mora biti download-ovana, tako da nema prave utede u vremenu potrebnom za download slike. Svaki re-sizing slike zahteva extra "work" web browsera da bi rekalkulisao page layout, tj. izgled, plan stranice. Za pripremu slika koje e biti sastavni deo web strane, moe se koristiti Photoshop. Takoe se moe naznaiti i veliina Inline Image-a u dimenzijama koje su procentni deo trenutne veliine prozora browser-a, tj. prozora, tako da e se slika sama resize-ovati sa promenom, tj. proirivanjem i smanjivanjem veliine browser prozora od strane korisnika. U prethodnom primeru, izmenite kod, tako da izgleda na sledei nain: <html> <h1 align="center"><strong>FAKULTET></h1> <p align="center"><img src="logo.jpg" width="20%" height="50%"></p> <p align="center"> Ovo je zvanini logo predmeta na fakultetu.</p> <p align="center">Fakultet datira od 1969 godine.p> <p align="center"><img src="fon.jpg" width="71" height="100"></p> </html> U browser-u pogledajte rezultate promene. Pokuajte da menjate veliinu prozora browser-a i primetite kako se veliina prve slike menja proporcionalno veliini prozora, dok je veliina druge slike fiksna, tj. ne menja se sa promenom veliine browser-a.

Linkovi
Link za lokalne fajlove
Najprostiji link je onaj koji otvara jo jedan HTML fajl u direktorijumu. HTML format koji ovo radi je: <a href="filename.html">tekst koji odgovara linku</a> Gde je a oznaka za link (anchor) i href za " hypertext reference". Filename mora biti drugi HTML fajl. Bilo koji tekst da dolazi posle prvog i pre zavnog </a> bie "hypertext" koji se pojavljuje kao podvuen i predstvalja hiperlink. Sledei koraci grade link u HTML dokumentu na lokalni fajl:

Korak 1 Korak 2 Korak 3 Korak 4 Korak 5 Korak 6

Otvoriti novi HTML document u text editor-u. U ovaj dokument ubaciti sledei kod: <strong> Ovde ste doli jer ste kliknuli na link!</strong> Sauvati dokument pod nazivom "drugi.html" u nekom folderu. U istom folderu kreirati jo jedan HTML fajl "prvi.html". U tom fajlu otkucati sledei kod:

<p>Ovo je dokument sa linkom.</p> <p>Kliknite na link da predjete na drugu stranu. </p> <p><a href="drugi.html">Link na drugu stranu </a></p>

Korak 7

Sauvajte fajl i pogledajte u browser-u. Proverite da li link radi.

1.5 Link za grafiku

U prethodnoj lekciji govori se o nainu prikazivanje "inline" grafike na web stranici. Sa anchor tagom takoe se moe formirati link koji prikazuje grafike fajlove. Kada je anchor link selektovan, on e sam download-ovati image fajl i prikazati sliku (image) u web browser-u. Napomena: Veina browser-a e, kao link, prikazati image fajl u web browser-u. U zavisnosti od web browser-a, i preferences/settings na kompjuteru, moe biti ponueno ili da sauva fajl ili da se selektuje aplikacija da prikae fajl. Bez obzira na izbor, ako se ode tako daleko, link image fajla je uspean. Najprostiji anchor link je fajl u istom folderu kao i dokument koji se tako zove. Format za kreiranje hypertext link za grafiku je isti kao i gornji za linkovanje na drugi HTML dokument: <a href="filename.gif">tekst koji predstavlja link</a>

gde je filename.gif ime GIF image file-a. Sada treba pratiti sledee korake kako bi se dodao link za grafiku HTML dokumentu:

Korak 1 Korak 2

Download-ujte sliku fon.jpg (Desni klik, Save Picture As). U istom folderu gde je slika, kreirati HTML fajl koji sadri sledei kod:

<html> <p>Ovo je dokument sa linkom na sliku. </p> <p>Kliknite na link da biste videli sliku u browser-u. </p> <p><a href="fon.jpg">Link na sliku </a></p> </html>

Korak 3

Sauvati fajl i pogledati u browser-u.

Link ka drugim folderima

Anchor tagovi takoe mogu da linkuju HTML dokument ili grafiki fajl u drugi folder u odnosu na dokument koji sadri anchor. Npr. u ovoj lekciji moe se sauvati sva grafika u odvojenom folderu zvanom Pictures. Dok se kreira sve vie i vie HTML fajlova, uvanje image fajlova na ovim HTML-ovima e uiniti stvar manje vie organizovanijom za korisnika:

Korak 1 Korak 2 Korak 3

Kreirati folder Pictures na istoj lokaciji gde je sauvan fajl iz prethodne vebe. Pomeriti fon.jpg fajl u novi folder. Izmeniti kod html fajla tako da red za link izgleda ovako:

<p><a href="pictures/fon.jpg">link na sliku</a></p>.

Korak 4

Pogledati fajl u browser-u.

Napomena: Sa HTML-om se moe narediti web browseru da otvori bilo koji dokument/grafiku koji se nalazi u folderu na niem nivou (npr. u sub-directoriju ili folderu unutar directorija/foldera koji sadri HTML fajl) korienjem "/" karaktera da se naznai promena u folderu Pictures. Ako je sve uraeno kako treba, link u reenici link na sliku bi trebalo da pozove fajl sauvan u folderu Pictures.

Anchor linkovi ka folderima vieg nivoa

Linkovi koji su gore prethodno konstruisani poznati su kao "relative" linkovi, sa znaenjem da web browser moe konstruisati ceo URL koji se odnosi na trenutnu lokaciju HTML stranice i linkovati informaciju u <a href=...> tagovima. Ovo je jako korisno, jer se mogu izgraditi itave web stranice na jednom kompjuteru, testirati, a potom i pomeriti na drugi kompjuter i svi relative linkovi e ostati netaknuti.

U ovoj lekciji e se konstruisati hyperlink ka dokumentu koji je sauvan u folderu nieg (lower) nivoa od working HTML stranice. Takoe se moe konstruisati link koji je povezan sa (higher) viim nivoom foldera: <a href="../../home.html">return to home</a> Svaki primer "../" URL-a na anchor linku govori web browser-u da ide na folder vieg nivoa u odnosu na tekuu stranicu; u ovom sluaju da ide dva nivo iznad i trai fajl koji se zove home.html. Recimo da folder Pictures nije bio u istom folderu kao i prvi.html fajl ve jedan nivo iznad. U prethodnoj sekciji je konstruisan link iz prvi.html fajla u fon.jpg fajl u folderu Pictures: <img src="pictures/fon.jpg"> Sada, treba reorganizovati ovu web strukturu tako da folder Pictures bude na viem nivou: <img src="../pictures/fon.jpg"> Prednost ove strukture je u tome da e biti lake sauvati veliki broj slika u gornjem folderu koji moe da se deli sa drugim web stranicama. Pokuajte samostalno da kreirajte odgovarajuu strukturu foldera i da napravite link!

Anchor link ka stranici na Internetu

Potpun HTML format za Anchor link ka stranici na Internetu :

<a href="URL">Text to Activate Link</a> gde je URL skraeno od Uniform Resource Locator, adresa Internet sajta gde korisnik treba da ode. Niz Text to Activate Link oznaava ta e se pojaviti kao hypertext u web browser-u (obino ne uvek) podvueno i u plavoj boji. Kada korisnik klikne na hypertext, web browser e ga linkovati na Internet site odreen sa URL. Treba zapamtiti da URL moe biti link za drugi World Wide Web (WWW) server, Gopher server, FTP site, ili bilo koji text, grafiku, muziku, video fajl na ovim serverima. Sada, e se dodati hypertext link na sajt koji sadri podatke o fakultetu.Treba pratiti sledee korake kako bi se dodali anchor linkovi na HTML dokument:

Korak 1

Promeniti fajl iz prethodne vebe tako da kod izgleda ovako:

<p>Ovo je dokument sa linkom na sajt. </p> <p>Kliknite na link da biste otvorili sajt Fon-a. </p> <p><a href=www.fon.bg.ac.yu>Link na sajt fakulteta. </a></p>

Korak 2

Sauvati fajl i pogledati u browser-u.

1.6 Linkovi i adrese

1.6.1 Kako rade linkovi u pretraivau
Hiprelinkovi se prave tako to se neki element na strani okrui kotvom, odnosno oznakom a. Atribut href, to je skraenica za hypretext reference, definie odredite linka. Tekst na kome je postavljen link se u pretraivau oznaava tako da se moe jasno razlikovati od okolnog teksta. Obino je link podvuen i obojen plavom bojom. Nakon to ste posetili adresu na koju taj link upuuje, linkovi obino postaju purpurne boje. Podrazumevano je da se slike na kojima je postavljen link prikazuju sa okvirom u istim bojama, premda mnogi web dizajneri definiu svoje boje. Kada prelazi preko linka, kursor menja oblik u aku sa kaiprstom upretim u neto, lme se ukazuje da se taj link moe kliknuti.

1.6.2 Apsolutne ili relativne putanje

URL je skraenica za universal resource locator. URL ili web adresa je u sutini pokaziva na odreeni dokument ili objekat koji se nalazi negde na Internetu, sa datom putanjom koja opisuje kako se dolazi do tog dokumenta. URL putanja moe biti apsolutna, relativna u odnosu na dokument, ili relativna u odnose na koren. Apsolutna adresa je adresa na Internetu koja sadri sve informacije koje su raunaru potrebne u vezi lokacije koja se trai. Tu spadaju informacije o tome kako se vraaju informacije, ukljuujui protokol, domen, fasciklu i ime datoteke. http://www.mfa.org/exhibitions/upcoming.htm Zato je protokol tako bitan? Svim vrstama web adresa se moe pristupiti preko apsolutnog URL-a, ukljuujui i web strane, adrese elektronske pote, FTP sajtove, itd. Protokol ukazuje na to koja vrsta resursa se trai. Relativna putanja je skraeni oblik adrese kod koje se razliti delovi adrese, kao to je protokol, adresa sajta ili fascikla, mogu predvideti na osnovu ostalih informacija koje stoje na raspolaganju. Putanje relativne u odnosu na dokument daju samo informacije koje su potrebne da iz tekueg dokumenta se ode na eljenu stranu. Ako se eli povezati dve strane koje se nalaze u istoj fascikli, potrebno je da zadate samo ime datoteke, na primer (sa strane mojastrana.html) :mojadrugastrana.html. Ako se eli postaviti link na neku stranu koja je dublje u strukturi fascikle, u odnosu na stranu sa koje se link poziva, onda treba da se navede i ime fascikle i ime datoteke (ako je link na strani mojastrana.html) mojafascikla/mojastrana.html. Ako se eli da link ukazuje na drugu stranu koja je u fascikli, koja je iznad fascikle u kojoj se trenutno nalazi, onda preko ../ ukazuje se na to da treba da se popne jedan nivo navie. Iza ovog sledi ime datoteke (linka sa strane mojastrana.html) : ../index.html. Ako se eli da se u hijrearhiji fascikli kree navie ili nanie za vie nivoa, onda treba navesti sva imena fascikli ili indikatore ../ vie puta, po jednom za svaki nivo.

pages/myfolder/mythirdpage.html ../../index.html Putanja relativna u odnosu na koren uspostavlja vezu izmeu datoteke i korena celog sajta. Koren sajta je ono to se smatra generalnim imenom sajta, kao to je na primer www.macromedia.com ili www.mfa.org: /index.html /pages/mypage.html /pages/myfolder/mythirdpage.html Putanje koje se zadaju relativno u odnosu na koren uvek ispred same putanje imaju kosu crtu (/), to moete videti i u primerima koje smo dali. Zato biste koristili putanje relativne u odnosu na koren sajta? Ove putanje kasnije mogu da utede vreme, ako je potrebno da promenite organizaciju dokumenata na svom sajtu. Ako imate vesti u nekom preduzeu, koje ste postavili onlajn i ako mesene lanke prebacujete u fasciklu Archive, kada zapone novi mesec onda putanje koje se zadaju relativno u odnosu na koren sajta mogu da utede vreme koje biste proveli u prepravljanju linkova koji sada treba da budu u skladu sa novom strukturom.

1.6.3 Atribut target

Kada se klikne na link, podrazumeva se da se novi dokument otvara u istom prozoru pretraivaa u kome je prethodno bio otvoren tekui dokument. Sa druge strane, HTML omoguava da zadate gde link treba da se otvori u novom prozoru pretraivaa, ili ako se radi o frejmovima, onda u odreenom frejmu. Ovo se zadaje putem opcionalnog atributa oznake anchor <a>, a to je target. Ako elite da se novi dokument otvori u posebnom prozoru pretraivaa, onda atribut target treba da podesite na _blank.

Heksadecimalne oznake i boje

U vaem web browseru na raspolaganju vam je pregrt boja kojima moete da obojite tekst i pozadine. Svaka boja se identifikuje kroz tri njene Red-Green-Blue (RGB) vrednosti, koje su zadate brojem u rasponu od 0 do 255, pri emu svaka predstavlja intenzitet crvene, zelene i plave. Maksimalne vrednosti (R=255, G=255, B=255) dae belu a minimalne vrednosti (R=0, G=0, B=0) prikazae crnu boju. Sve ostale boje su zadate ureenom trojkom (tripletom) RGB vrednosti. Tricky deo je da se vrednosti za boje zadaju u heksadecimalnom umesto u dekadnom sistemu (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F), a sve zbog toga to je kompjuterima lake da njima barataju. Pa recimo u primeru "6699FF", "66" oznaava vrednost crvene, "99" vrednost zelene, a "FF" vrednost plave. Evo nekoliko primera (tabela 3):

Table 3 Boje u heksadecimalnom sistemu

Boja

Heksadecimalno FFCCCC 33FF66 663300 000077 EEEEEE 444444

Boja

Heksadecimalno 3300FF AA0000 9900FF FFFF00 888888 000000

U svakom sluaju se ne sekirajte zbog numerikih konverzija iz dekadnog u heksadecimalni sistem, jer postoji mnotvo alatki koje vam omoguavaju da samo klikom na eljenu boju, dobijete ispisanu njenu heksadecimalnu reprezentaciju. A i sami web browseri su dovoljno pametni da prepoznaju skraenice za sledeih 16 boja. Boja Ime boje aqua blue gray lime navy purple silver white Boja Ime boje black fuchsia green maroon olive red teal yellow

Jednobojne pozadine (Solid Color Backgrounds)

Za FON Web, prva stvar koja je raena je dodavanje color background-a na index.html fajl. HTML format za dodavanje solid color background-a modifikuje <body> tag-a na sledei nain: <body bgcolor=#XXXXXX> gde je XXXXXX heksadecimalna reprezentacija (oznaena sa # znakom ispred) eljene boje.

Korak 1 Korak 2

Otvoriti fon.html fajl u text editor-u. Pronai <body> tag i promeniti ga u:

<body bgcolor=#000000>

Korak 3

Save i Load HTML file u web browser-u

Ako je sve uraeno kako treba, browser bi trebalo da promeni pozadinu u jednobojnu crnu boju. Ali, moda sada ne moete da vidite tekst! Zato? Zbog toga to je default color za text je takoe crna, tako da sada imamo crni tekst na crnoj pozadini! Na sreu, dodatnim komandama, body tagu moemo dodati boju za tekst i hypertext: <BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX> gde XXXXXX vrednosti oznaavaju sledee: BGCOLOR = boju background-a,tj. pozadine (default je grey (siva)) TEXT = boju stvarnog body teksta (default je black, tj crna) LINK = boju hypertext link-a (default je blue, tj plava) VLINK = boju hypertext-a koja oznaava da je ve pregledan (default je purple)

Izmenom vrednosti ovih vrednosti u body tagu, moemo dobiti: <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666> NAPOMENA: redosled oznaka u <BODY> tagu nije relevantan Sada treba modifikovati <body> tag-ove u svim HTML fajlovima (to moete uiniti lako koristei copy i paste malopreanjeg primera, na novi <body> tag).

Teksturne pozadine
Boje osveavaju izgled web stranica, ali dodavanjem tekstura, koristei male (GIF ili JPEG) sliice, moete napraviti i lepi efekat. Njih e web browser kopiranjem razvui na celu pozadinu. Obratite panju na: itljivost: mnoge pozadinske teksture e vie odmoi nego pomoi itaocu. Pokuajte da postavite teksture koje su svetlije (uz taman tekst) ili tamne (uz svetao tekst), olakavajui itanje na taj nain jaim kontrastom. Veliinu: Ne postavljajte slike velikih veliina, jer su konekcije kod nas jo uvek spore, pa e drugima biti potrebno dosta vremena da stranice uopte i otvore.

HTML format za dodavanje pozadine kroz sliicu je: <body background="paper.gif"> gde paper.gif predstavlja naziv samog fajla slike. Potom u tag dodajte i <body background="../pictures/paper.gif" text=#CC0000> dobiete crveni tekst na sliici koja e biti iskopirana na celom backgroundu web stranice (slika 3).

Slika 10 Izgled tekstualne pozadine

Primer: Iz materijala sa sajta skinite fajl paper.gif i iskopirajte je u folder boja koji ste predhodno napravili.

Korak 1

Korak 2 U tekst editoru kreirajte primer web stranice u folderu boja, unoenjem koda, eljenog teksta i odgovarajueg linka do slike
<HTML> <HEAD> <TITLE>Primer</TITLE> <BODY text=#aa0000 background="\paper.gif"> <H1>UNESITE ZELJENI TEKST</H1> <H1>KOJI CE BITI PRIKAZAN</H1> <H1>NA MULTIPLIKOVANOJ POZADINSKOJ SLICI</H1> </BODY> </HTML>

Korak 3 Korak 4
rezultatom.

Fajl snimite sa html ekstenzijom. Sada kreiranu web stranicu otvorite u browseru i pogledajte da li ste zadovoljni

META tagovi
Sintaksa HTML-a dozvoljava korienje meta informacija unutar web stranice i to u onom delu web stranice koji browser ne prikazuje. Postoje razliiti tipovi meta tagova, ali u okviru ovih lekcija razmotriemo samo neke od najkorisnijih. Meta tagovi se u HTML dokumentu smetaju u zaglavlje dokumenta, tj. izmeu tagova <head> i </head>.

1.7 Meta tag stranicu

za

automatski

prelazak

na

drugu

web

Prvi tip meta tagova omoguava kreiranje HTML web stranice koja e ukoliko ne bude uitana posle tano odreenog vremenskog perioda automatski prei na neku drugu web stranicu. Ovo se koristi iz vie razloga:

U sluaju pomeranja stranice. Ukoliko doe do pomeranja stranice zbog redizajna sajta ili promene servera, kao i u sluaju ukidanja stranice, potrebno je preusmeriti poziv stranice na novi URL. Evo nekoliko primera:

Swiss Web Knife M2C Math Software Evaluations

U sluaju kreiranja serije web stranica koje treba sa se menjaju u odreenim vremenskim intervalima (kao Slide Show). U sluaju web sajtova koji imaju uvodnu stranicu (intro)

Sintaksa ovog tipa meta tagova izgleda na sledei nain: <head> <title>My page title</title> <META HTTP-EQUIV="REFRESH" CONTENT="X; URL=newpage_or_URL.html"> </head> gde x predstavlja vreme koliko e ova stranica biti prikazana (izraeno u sekundama), a URL je adresa na koju e se izvriti preusmeravanje posle isteka tog vremena. Primer :

Korak 1 Pokrenite tekst editor i kreirajte novi HTML fajl. Napravite sledee zaglavlje sa odgovarajuim meta tagovima. Korak 2
Prepravite fajl tako da ima sledei kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="REFRESH" content="5; URL=http://www.elab.fon.bg.ac.yu "/> <title>Untitled Document</title> </head> <body> ekaj!!! </body> </html>

Korak 3

Sauvajte stranicu i pogledajte u browser-u kako izgleda.

Meta tagovi za opis

Meta tagovi vam omoguavaju da postavite dodatne informacije na vau web stranicu koje e omoguiti da se ona lake pronae na Internetu. Krajnje pojednostavljeno, web pretraivai (Google, Altavista, Yahoo, itd.) rade po sledeem principu: svaki od pretraivaa sadri bazu podataka u kojoj su podaci o web stranicama. Na osnovu kriterijuma pretrage zadatog od strane korisnika, pretrauje se baza podataka i prikazju rezultati. Rezultat pretrage su web stranice koje sadre traeni kriterijum. Na veini ovih web stranica traeni kriterijum se nalazi na poetku

sadraja stranice, tako da osim ako je sam poetak stranice veoma deskriptivan, korisnik nee dobiti pravu sliku onoga to je na stranci. Sintaksa meta taga za dodavanje opisa stranici izgleda ovako: <META name="description" content="Ovaj tekst predstavlja odlian opis web stranice. "> Maksimalna duina meta tagova iznosi 1024 karaktera, poev od prvog < i zakljuno sa poslednjim > u meta tagu, to znai da uneti opisi treba da budu kratki i precizni. Jo jedan koristan meta tag koji e olakati pronalaenje web stranice preko pretraivaa je omoguava dodavanje kljunih rei (keywords) koje opisuju stranicu. Sintaksa ovog taga izgleda ovako: <META name="keywords" content="HTML, tutorial, learn, make, create, design, web page, home page, education, form, tables, frames, javascript">

Basic Table Tag-ovi Osnovni HTML table tag-ovi

HTML za basic table strukturu je prikazan ispod u tabeli 4
Table 4 HTML kod za prikaz tabele

HTML kod <table border=1> <tr> <td>Red 1 kolona 1</td> <td>Red 1 kolona 2</td> <td>Red 1 kolona 3</td> </tr> <tr> <td>Red 2 kolona 1</td> <td>Red 2 kolona 2</td> <td>Red 2 kolona 3</td> </tr> <tr> <td>Red 3 kolona 1</td> <td>Red 3 kolona 2</td> <td>Red 3 kolona 3</td> </tr> </table>

Izgled u browser-u

border=1 atribut u <table> tag-u daje instrukcije browser-u da iscrta liniju oko tabele debljine od 1 pixela. Svaki red je definisan sa Table Row tag-ovima <tr>...</tr> i svaka elija u svakom redu je definisana sa Table Data <td>...</td> tag-ovima. Svaki <td>...</td> tag moe sadrati bilo koji tip HTML tag-a -- headers, styled text, hypertext links, inline graphics itd. U ovom tag-u moe se koristiti nekoliko atributa kojima se podeava,( Alignment )tj. centrira ili regulie svaki podatak koji se unosi u elije (tabela 5):

Table 5 Atributi za regulisanje svakog podatka iz elije

Horizontal Alignment (Horizontalno Vertical Alignment (Vertikalno centriranje) centriranje) <td align=left> centrira sve <td valign=top> centrira sve elemente na levu stranu elije elemente na vrh elije (ovo je default setting) <td valign=bottom> centrira sve <td align=right> centrira sve elemente na dno elije elemente na desnu stranu elije <td valign=middle> centrira sve elemente na sredinjem delu elije <td align=center> centrira sve (ovo je po default setting) elemente u centralnom delu elije
Ovi atributi se mogu koristiti i kombinovano: <td align=left valign=bottom> Ovaj HTMLe prikazati eliju sa podacima smetenim u levom donjem uglu elije. Da bi ste odradili ovu vezbu sledite sledee korake: HTML kod moemo kucati u nekom tekst editoru (NotePad, TextPad, i dr.), kao i u prethodnim lekcijama.

Korak 1 Korak 2 Korak 3 Korak 4

Pokrenite tekst editor. Naprevite osnovnu konstrukciju za html stranicu kao do sada. Kod koji elite da unesete kucate u <body> sekciji koda kao u Tabeli 1.

Da biste pogledali izgled fajla u browser-u potrebno je da ga prvo sauvate (File/Save), a zatim izaberete konkretan browser u kome elite da pogledate fajl.

Redovi i Kolone
Tabela koja je ispod prikazana je prosta i u obliku kocke tri reda sa tri kolone. ta se sve moe dobiti ukoliko se koriste colspan i rowspan atributi u <td>...</td> tag-ovima (tabela

Table 6 Korienje colspan i rowspan atributa

HTML kod <table border=1> <tr> <td>Red 1 kolona 1</td> <td align=center colspan=2> Red 1 kolona 2-3</td>

Rezultat u browser-u ** Obratiti panju na atribut druge elije u prvom redu (obuhvata) spans 2 kolone. Tekst je podeen tako da se nalazi u centru elije.

</tr> <tr> <td>Red 2 kolona 1</td> <td>Red 2 kolona 2</td> <td>Red 2 kolona 3</td> </tr> <tr> <td>Red 3 kolona 1</td> <td>Red 3 kolona 2</td> <td>Red 3 kolona 3</td> </tr> </table> Sada je prikazana elija koja obuhvata 2 reda. <table border=1> <tr> <td>Red 1 kolona 1</td> <td align=center colspan=2> Red 1 kolona 2-3</td> </tr> <tr> <td>Red 2 kolona 1</td> <td valign=top rowspan=2> Red 2 kolona 2</td> <td>Red 2 kolona 3</td> </tr> <tr> <td>Red 3 kolona 1</td> <td>Red 3 kolona 3</td> </tr> </table> I ovaj primer moete da odradite na isti nain kao i prethodni ili samo da modifikujete odreene tagove iz prethodnog primera. Red 1 kolona 1 Red 3 kolona 1 Red 1 kolona 2-3 Red 3 kolona 3 Red 2 kolona 1 Red 2 kolona 2 Red 2 kolona 3

1.8 A Data Table Tabela (sa podacima)

Sada emo odraditi primer za DataTable.

Korak 1 Korak 2 Korak 3

Pokrenite tekst editor. Napravite osnovnu konstrukciju stranice za HTML. Izmeu body tagova unesite sledeci kod.

<html> <table border=3>

<tr> <th>Odsek</th> <th>Prosecna ocena</th> <th>Broj studenata ^*</th> </tr> <tr> <td>Informacioni sistemi i tehnologije</td> <td align=center>7.68</td> <td align=center>302</td> </tr> <tr> <td>Menadment</td> <td align=center>7.9</td> <td align=center>284</td> </tr> <tr> <td>Upravljanje kvalitetom</td> <td align=center>8.62</td> <td align=center>54</td> </tr> <tr> <td>Operacioni menadment</td> <td align=center>8.32</td> <td align=center>&gt;18 &amp; &lt;47</td> </tr> </table> </html> Tabela koju ete dobiti na stranici u Internet Exploreru posle unosa gore navedenog koda treba da ima sledeci izgled (tabela 7):
Table 7 Izgled tabele na stranici u Internet Explorer-u

Odsek Informacioni sistemi i tehnologije Menadment Upravljanje kvalitetom Operacioni menadment

Prosecna ocena Broj studenata * 7.68 7.9 8.62 8.32 302 284 54 >18 & <47

Pogledajte HTML kod za prvi red. Table Header tag-ovi <th>...</th> funkcioniu isto kao i <td>...</td> tag-ovi izuzev toga da se svaki tekst automatski podeava na bold i da su svi podaci smeteni u centru elije. Takoe, u eliji za Operacioni menadment mora se samo koristiti HTML za specijalne karaktere da bi se prikazali simboli kao to su "<", ">", i "&". Sada treba jo po neto dodati u tabelu.

Neki browser-i dopustaju korisniku da specificira i druga podeavanja za linije koje grade tabelu. Ovo su atributi za table tag: <table border=X cellpadding=Y cellspacing=Z> gde X oznaava irinu (u pixelima) od spoljanje ivice tabele. Atribut cellpadding specificira koliko praznog prostora "space" postoji izmeu podataka u eliji i zidova elije veliina koja oznaava visinu Y uinie eliju veom ("poveavanje" elije). Atribut cellspacing specifikuje (u pixelima) irinu izmeu unutranjih linija koje dele eliju. Izmeniti <table> tag tako da sada pie: <table border=3 cellpadding=4 cellspacing=8> <caption> tag postavlja niz teksta (centriran irinom tabele) kao naslov/poglavlje u tabeli. Izmeniti linije tabele, tako da sada pie:
<table border=3 cellpadding =4 cellspacing=8> <caption><b><font size=+1> STATISTIKA</font></b></caption>

Moe se i dodati HTML unutar <caption> tag-a; proveriti da li se nalazi unutar <table>...</table> tag-ova. I zabave radi, obojiti tekst <th>...</th> tag-ovima u narandastu boju. Izmeniti HTML za prvi red tako da izgleda ovako:
<tr> <th><font color=#EE8844>Odsek</font></th> <th><font color=#EE8844>Prosecna ocena</font></th> <th><font color=#EE8844>Broj studenata ^*</font></th> </tr>

Pomeriti tabelu tako da se sada nalazi na sredini stranice. Ako web browser podrava<center>...</center> tag, onda samo okruiti tabelu sa ovim tag-ovima. Konano, treba dodati kolonu sa leve strane prikazati u grupama sve smerove. Sada treba dodati praznu eliju dodavanjem <th></th> na prvi red HTML tabele (jednu sa column headings, tj. zaglavljem kolone).
<tr> <th></th> <th><font color=#EE8844>Odsek</font></th> <th><font color=#EE8844>Prosecna ocena</font></th> <th><font color=#EE8844>Broj studenata ^*</font></th> </tr>

Zatim otii na drugi red HTML tabele (sadre podatke za odseke), i dodati u prvu eliju koja obuhvata 4 reda (prve etiri linije sa podacima o nazivu odseka):
<td rowspan=4> <font color=#EE8844> <i>Popularni<br> smerovi<br> <br> <i>Manje<br> popularni<br> smerovi</i> </font></td>

Napomena: Veliine tabele pokuavaju da se same prilagode u skladu sa irinom sadraja koji se unosi u tabelu. Mogu se dodati neki <br> tag-ovi , tako da ova prva kolona ne bude preiroka. Tabela koju ete dobiti na stranici u Internet Exploreru posle unosa gore navedenog koda treba da ima sledei izgled kao tabela 8:
Table 8 Izgled tabele

STATISTIKA
Odsek Popularni smerovi Manje popularni smerovi Informacioni sistemi i tehnologije Menadment Upravljanje kvalitetom Operacioni menadment Prosecna ocena 7.68 7.9 8.62 8.32 Broj studenata * 302 284 54 >18 & <47

Oblikovanje formi
Text Input Elementi (type="text")
... se koriste za kreiranje jednolinijskih polja u koja korisnici unose tekst. Default irina je 20 karaktera, a mogu se kreirati i polja sa drugim veliinama unoenjem vrednosti u size option. Moe se ograniiti i broj unosa karaktera podeavanjem vrednosti u MAXLENGTH option. Text input polja e biti prazna kada se stranica uita, osim ako korisnik ne zada poetni tekst kroz VALUE opciju (tabela 9).
Table 9 Tabela za unos teksta

Polje za unos teksta "text1" je 30 karaktera iroko.

<input type="text" name="text1" size="30">

Polje za unos teksta "text2" je 30 karaktera iroko, ali prihvata samo 20 karaktera.
<input type="text" name="text2" size="30" maxlength="20">

Polje za unos teksta "text3" je 40 karaktera iroko, to je podrazumevana (default) vrednost.

<input type="text" name="text3" size="40" value="We are not alone">

Password Input Elementi (type="password")

... su identini text input elementima, osim kada korisnik unosi podatke u njih, videe "bullet" karaktere, tj. Zvezdice, a ne slova koja unosi kao ifru (password). Password tekst je ifrovan kroz prenos i potom na kraju deifrovan kada je podatak polja uitan na server. Videti razliku izmeu unoenja podataka u polja u tabeli 7 ispod ovog teksta i u prethodnoj tabeli 10.
Table 10 Tabela za unos ifre

Polje za lozinku "pass1" je 30 karaktera iroko.

<input type="password" name="pass1" size="30">

Polje za lozinku "pass2" je 30 karaktera iroko, ali prihvata samo 20 karaktera.

<input type="password" name="pass2" size="30" maxlength="20">

Polje za lozinku "pass3" je iroko 40 karaktera, to je default vrednost.

<input type="password" name="pass3" size="40" value="We are not alone">

1.9 Text Area Input Elementi (type="textarea")

... su tekst polja koja sadre vie od jedne linije za unos podataka i mogu se scroll-ovati tako da korisnik moze da unese vie teksta. Tag opcije definiu veliinu polja brojem karaktera u redu i koloni. Dodavanjem opcije WRAP=VIRTUAL, tekst koji je prethodno unet e se automatski

smestiti sa desne strane polja. Takoe se moe zadati i default tekst koji e se prikazati u polju (tabela 11).
Table 11 Tabela za unos polja za upis teksta

Oblast za unos teksta "comments" je 45 karaktera iroko i 6 linija visoko.

<textarea name="comments" rows="6" cols="45" wrap="virtual"> The first time I ever saw a web page, I thought.... (continue) </textarea>
The first time I ever saw a w eb page, I tho

Radio buttons (dugmici) (type="radio")

... su kontrole koje su povezane tako da samo jedno radio dugme, tj. button moe da se selektuje u jednom trenutku; ako se selektuje jedno radio dugme, sva ostala automatski postaju desektovana. Set radio buttons-a je je definisan pod istim zajednikim imenom. Vrednost koja se alje u web formu je vrednost radio button-a koji je prethodno selektovan. Dodavanjem opcije CHECKED jednom od button-a u setu ponuenih, posebno e se istai taj button tako da izgleda osvetljeno, kada se stranica uitava (tabela 12).
Table 12 Izgled tabele sa radio dugmetom

4 radio buttons se default vrednostima.

<input type="radio" name="food" value="hotdogs" checked> hotdogs are my favorite food<br> <input type="radio" name="food" value="hamburgers"> i like hamburgers<br> <input type="radio" name="food" value="steak"> steak is tasty<br> <input type="radio" name="food" value="beans"> beans are for veggie-lovers<br>

hotdogs are my favorite food i like hamburgers steak is tasty

beans are for veggie-lovers 3 radio buttons bez predefinisanih vrednosti.

<input type="radio" name="spread" value="ketsup"> ketsup<br> <input type="radio" name="spread" value="mustard"> mustard<br> <input type="radio" name="spread" value="mayo"> mayonnaise<br>

ketsup mustard mayonnaise NAPOMENA: Videti kako dva seta radio buttons-a, jedan nazvan "food" i drugi "spread" funkcioniu nazavisno jedan od drugog.

1.10 Check Boxes (type="checkbox")

...su slini prethodnim radio buttonsima, ali nisu zavisni od drugih buttons-a, tako da moe biti selektovano vie njih u isto vreme. Svaki checkbox ima jedinstveno ime ili naziv. Ukoliko polje nije tiklirano, obinim klikom na njega pojavice se X ili check mark znak na tom mestu. Ukoliko je box oznaen, jo jedan klik e ukloniti check mark iz polja. Vrednost poslata u web formi je vrednost checkbox-a koji je selektovan; u suprotnom ta vrednost ne postoji. Dodavanjem opcije CHECKED u checkbox e posebno istai taj checkbox dok se strana uitava (tabela 13).

Table 13 Izgled tabele sa tipom "checkbox"

4 check boxes sa predefinisanim vrednostima.

<input type="checkbox" name="food1" value="hotdogs" checked> hotdogs are my favorite food<br> <input type="checkbox" name="food2" value="hamburgers"> i like hamburgers<br> <input type="checkbox" name="food3" value="steak" checked> steak is tasty<br> <input type="checkbox" name="food4" value="beans"> beans are for veggie-lovers<br>

hotdogs are my favorite food i like hamburgers steak is tasty

beans are for veggie-lovers 3 check boxes bez predefinisanih vrednosti.

<input type="checkbox" name="spread1" value="ketsup"> ketsup<br> <input type="checkbox" name="spread2" value="mustard"> mustard<br> <input type="checkbox" name="spread3" value="mayo"> mayonnaise<br>

ketsup mustard mayonnaise

Menu Select (type="select")

... daje padajui menije koji omoguavaju korisniku da izabere jednu od ponuenih stavki u listi. <OPTION>...</OPTION> tag definie tekst koji se pojavljuje u meniju. Vrednost poslednje selektovane opcije je vraena kada je prenesen podatak iz polja. Dodavanjem SELECTED opcije pokazuje koji element se prikazuje kada se stranica uitava; u suprotnom, prva stavka je selektovana kao default (tabela 14).

Table 14 Tabela sa opcijama

Meni sa 4 opcije, gde je 3 stavljena kao predefinisana.

<select name="cheeses"> <option value="colby"> Colby from Ohio</option> <option value="sharp"> Sharp Cheddar from Oregon</option> <option value="swiss" selected> Holy Cheese from Switzerland</option> <option value="longhorn" > English Longhorn</option> </select>

Submit and Reset (type="submit" and type="reset")

... kreira buttons (dugmie) na formi. Submit button govori web browser-u da sakupi sve selekcije, vrednosti, i uneti tekst iz polja i smesti ga na mesto definisano u ACTION delu form tag-a. Reset button vraa formu na default stanje, onako kako je izgledao i prvi put kada je korisnik posetio web stranicu. VALUE opcija definise tekst koji se nalazi na buttonsima (tabela 15).
Table 15 Tabela sa submit i reset dugmiima

Submit button
<input type="submit" value="Send this form data now!">
Send this form data now !

Reset button
<input type="reset" value="Clear the web form">
Clear the w eb form

NAPOMENA: Za ovu lekciju, kreiran je prosti JavaScript alert message koji se pojavljuje kada se koristi Submit button. Ukoliko je unet neki tekst, ili promenjen neki button meni selekcija, Reset button iznad, e sve vratiti na poetno stanje. Sada emo kreirati web page formu koja e sadrati sve gore navedene elemente. Treba kreirati novu web stranicu u kojoj e se forma prikazati u main display polju, a potom izmeniti levu stranu frejma koja sadrzi meni izbora da bi dodali link za nau novu stranicu. Korak 1 Otvorite proj_menu.html fajl u vaem text editoru.

Korak 2
dodajte:

Posle HTML koda koji sadri link informaciju za "Reference" frames web page,

<p> <a href="proj_report.html"> <font size=+2 face="arial,helvetica">R</font>EPORT...</a><br> forma za slanje izvestaja

Zatim emo kreirati novu web stranicu koja e sadrati formu. Kreirajte novi fajl u text editor-u i snimite ga kao fajl proj_report.html u istom direktorijumu/folderu kao i druga HTML dokumenta.

Korak 3 Korak 4

Save , tj. sauvajte ovaj HTML file.

Korak 5 Da bi bolje razumeli ovaj dokument, prezentovaemo jednu po jednu njegovu sekciju. Prvi deo fajla sadri "normal" deo naeg HTML fajla. Ovo dodajte u va novi fajl:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head></head>

<BODY BGCOLOR=#FFFFCC TEXT=#333333 LINK="#0000CC" VLINK=#FF6666> <h2 align=center>IZVESTAJ</h2>

Korak 6 Sada unesite kod, kojim ete oznaiti poetak forme. Do sledee lekcije, neemo pisati ACTION=... deo. <form method="post"> Korak 7 Report forma e se prikazati kroz HTML tabele, koje su korisne za web forme jer dozvoljavaju korisniku da podeava tekst kao i elemente forme. Kreirajte tabelu koja sadri 4 osnovna dela vae forme: Informacije o studentu Izvetaj o odsecima Izvori koji su korieni za dobijanje informacija Poalji i Poniti sve Svaka od ovih sekcija e biti oznaena velikim poljem tabele koja definie tu sekciju vae forme. Dodajte sledee da biste formirali tabelu i prvu sekciju "Informacije o studentu":
<table border=0 cellpadding=4 cellspacing=1> <tr> <td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC> <tt><b>Informacije o studentu</b></font></td> </tr> <tr> <td valign=top align=right><tt><b>Ime i prezime</b></tt></td> <td valign=top><input type="text" name="name" size="40"><br> <font size=2 color=#000099>unesite Vase ime i prezime</font> </td> </tr> <tr> <td valign=top align=right><tt><b>e-mail</b></tt></td> <td valign=top><input type="text" name="email" size="40"><br> <font size=2 color=#000099>unesite Vas e-mail</font> </td> </tr> <tr> <td valign=top align=right><tt><b>lozinka</b></tt></td> <td valign=top><input type="password" name="pass" size="20"><br> <font size=2 color=#000099>unesite lozinku</font> </td> </tr> Napomena: Kreirali ste eliju sa 2 kolene za tekst " Informacije o studentu " zajedno sa tri reda tabele koji sadre tekst input polja. Stavljene su oznake za polja u prvoj koloni svakog reda, poravnate udesno. Takoe su smetene kratke instrukcije u malom , plavom tekstu pored svakog elementa. Primetite da svaki element forme ima jedinstveno ime. Tree polje forme je u stavri password type da bi sakrilo ime koda koji e korisnik uneti.

Korak 8 Sada emo uraditi drugu sekciju gde se koristi ova web forma koja prikazuje Izvetaj o odsecima - koristiete text input, menu selections, radio buttons, i checkboxes:
<tr> <td valign=top align=right><tt><b>Naziv odseka </b></tt></td> <td valign=top><input type="text" name="oname" size="40"><br> <font size=2 color=#000099>unesite naziv odseka ciji podaci Vas interesuju</font> </td> </tr> <tr> <td valign=top align=right><tt><b>Najpopularniji odsek je</b></tt></td> <td valign=top> <select name="otype"> <option value="select" selected>Izaberite...</option> <option value="Informacioni sistemi i tehnologije">ISiT</option> <option value="Menadzment">MEN</option> <option value="Upravljanje kvalitetom">UK</option> <option value="Operacioni menadzment">OM</option> <option value="Default">Nevazno</option> </select><br> <font size=2 color=#000099> (opsirnije o odsecima na sajtu <a href="http://www.fon.bg.ac.yu" target="_top">fakulteta</a>)</font> </td> </tr> <tr> <td valign=top align=right><tt><b>status</b></tt></td> <td valign=top> <input type="radio" name="redovan" value="redovan" checked> redovan <input type="radio" name="redovan" value="vanredan"> vanredan<br> <input type="number" name="vdate" size="3"> / <input type="number" name="vdate" size="2"><br> <font size=2 color=#000099>unesite broj dosijea</font> </td> </tr> <tr> <td valign=top align=right><tt><b>prednosti odabranog odseka po Vama su</b></tt></td> <td valign=top> <input type="checkbox" name="note1" value="value1">dobar sadrzaj kurseva na odseku<br> <input type="checkbox" name="note2" value="value2">nastavni kadar<br> <input type="checkbox" name="note3" value="value3">duzina studiranja<br> <input type="checkbox" name="note4" value="value4">lakse zaposlenje nakon zavrsetka<br> <input type="checkbox" name="note5" value="value5">nista posebno<br> <font size=2 color=#000099>(broj cekiranih opcija je proizvoljan)</font> </td> </tr> <tr> <td valign=top align=right><tt><b>dodatne informacije</b></tt></td>

<td valign=top><textarea name="info" rows="12" cols="40" wrap=virtual> </textarea><br> <font size=2 color=#000099>napisite sta smatrate da je potrebno, a vezano je za predjasnji izbor</font> </td> </tr> Napomena: Uporediti format radio button-sa u odnosu na check boxes; svaki radio button set ima isto ime dok svi check boxes imaju razlicita imena.

Korak 9 Trea sekcija forme web stranice se koristi za prikazivanje izvora koji su korieni u tri unosna polja. Posto su uneti podaci u stvari web site adrese, moe se podesiti default VALUE za "http://" u text input tagovima:
<tr> <td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC> <tt><b>Izvori</b></font></td> </tr> <tr> <td valign=top align=right><tt><b>reference</b></tt></td> <td valign=top><input type="text" name="ref1" size="40" value="http://"><br> <input type="text" name="ref2" size="40" value="http://"><br> <input type="text" name="ref3" size="40" value="http://"><br> <font size=2 color=#000099>navedite tri web sajta na kojima cete vrsiti pretragu za informacijama</font> </td>

Korak 10 </tr> Poslednja sekcija ove tabele/forme sadri button koji e prikupiti sadraj izvetaja u formi i drugi button koji se moe koristiti da resetuje formu na poetno, prazno stanje. To je takoe i kraj tabele, forme i ostatka HTML dokumenta.
<tr> <td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC> <tt><b>Na kraju...</b></font></td> </tr> <tr> <td valign=top align=right> </td> <td valign=top> <input type="submit" value="Posalji"> <input type="reset" value="Ponisti sve"> </td> </table> </form> </body> </html>

Korak 11 Uradite Save dokumenta proj.html i potom ga uitajte u web browser. Leva strana ove web stranice sa frejmovima bi sada trebalo da sadri link koji ste dodali u drugom koraku, i koji e uitati formu web stranice koju ste kreirali u

prethodnim koracima. Forma jo uvek nee raditi nita, ali buttons, meniji i polja bi trebalo da budu osposobljeni za editovanje.

CSS
1.11 ta je to CSS?
CSS je tehnologija koja omoguuje razdvajanje strukture stranice od njenog izgleda, to predstavlja osnovni princip ove tehnologije. To konkretno znai da informacije koje se ele prezentirati na stranici treba da budu sadrane u HTML fajlu, a opis izgleda stranice i naina predstavljanja informacije treba da se nalazi u drugom fajlu css fajlu. Odrednica CSS (Cascading Style Sheets) u prevodu znai Kaskadne Liste Stilova. CSS je preporuka konzorcijuma W3C (World Wide Web Consortium). W3C konzorcijum ine univerziteti, kompanije kao to su Microsoft, Netscape i Macromedia, i eksperti iz mnogih oblasti koje su vezane za web. Osnovan je od strane Tim Berners Lee-a i zadatak mu je da unapreuje i promovie web. Jedna od njegovih uloga je da publikuje preporuke (eng, recommendations). Na te preporuke treba gledati kao na standarde. Preporuke W3C-a pokrivaju mnoge aspekte web-a kao na primer HTML, CSS, skript jezike, XML i jos mnogo toga to je vezano za web. Kaskadne liste stilova su formalno opisane u dve specifikacije koje je izdao W3C. To su CSS1 i CSS2 specifikacije. CSS2 Specifikacija je sada aurirana u specifikaciju CSS2.1. gde broj 1 oznaava broj revizije. Ovom revizijom izbaene su pojedine komponente iz CSS2 specifikacije za koje se vremenom utvrdilo da nema izgleda da u skorije vreme budu implementirane u Web itaima. Na primer, jedno svojstvo koje je izbaeno je text-shadow jer dugo vremena nije dobilo podrku ni od jednog Web itaa. Naravno, tom revizijom nije stavljena taka na razvoj i unapreenje CSS-a, pa se moda u budunosti ovo svojstvo ponovo pojavi i ue na velika vrata, a do tada ne treba oajavati zbog njega. CSS1 specifikacija je publikovana u decembru 1996. godine i opisuje jednostavan model za formatiranje, najee korien za prikaz na ekranu. CSS1 specifikacija sadri oko 50 svojstava ( na primer color ili font-size ). CSS2 specifikacija je finalizirana u maju 1998. godine i zasnovana je na CSS1 specifikaciji. Ona obuhvata sva svojstva CSS1 specifikacije i dodaje oko 70 svojih svojstava, kao to su svojstva za opisivanje zvunih prezentacija i slino. Linkovi koji vode ka ove dve specifikacije dati su u nastavku:
Specifikacija CSS1 http://www.w3.org/TR/REC-CSS1 Specifikacija CSS2 http://www.w3.org/TR/REC-CSS2

definiete izgled vae stranice na jednom mestu kako bi izbegli ponavljanje koda na stranici. jednostavno menjate izgled stranice ak i nakon to ste je kreirali. Poto su stilovi definisani na jednom mestu, moete da promenite izlged vae stranice odjednom.

definiete veliinu fonta sa istom preciznou koju vam prua word procesor, bez ogranienja na sedam veliina fonta koje su definisane u HTML-u. pozicionirate sadraj stranice sa preciznou na nivou piksela. redefiniete izgled postojeih tagova u HTML-u. Na primer, ako elite da se <b></b> tag koji inicajlno prikazuje tekst podebljanim slovima, prikae u crvenoj boji sa veliinom fonta od 16 piksela, to sa CSS-om vrlo lako moete da uradite. podesite stil za linkove na nain koji vama odgovara na primer elite da se linkovi prikazuju nadvueni.

Naini primene stilova

Stilovi se mogu primeniti na neku stranicu na tri naina: Povezivanjem HTML stranice i eksternog fajla sa ekstenzijom .css (u kome su definisana pravila) koji se uva na nekom serveru (na istom serveru na kome se nalazi i HTML fajl ili na nekom drugom) Unutar stranice u head delu HTML koda u okviru <style> taga. Direktno u odreenom HTML tagu koji se eli formatirati tzv. Inline.

1.11.1

CSS kao eksterni fajl

Ovaj nain pridruivanja stilova stranici je strogo preporuen s obzirom na to da omoguava veliku fleksibilnost prilikom promene stila stranice i primene jednog istog stila na vie razliitih stranica. Ovaj nain zapravo predstavlja materijalizaciju osnovnog principa kojim se vodi CSS filozofija : razdvojiti sadraj od izgleda stranice. Znai, ako se u eksternom CSS fajlu napie da pozadina stranice bude bela, ona e biti bela na bilo kojoj stranici koja je sa ovim fajlom prethodno bila povezana, i ako nakon toga u istom CSS fajlu promenite boju pozadine u crnu ona e istovremeno postati crna u svim tim stranicama makar ih bilo i 1000. Sa druge strane, za ovu jednostavnu promenu boje pozadine, za svih tih 1000 stranica mora se izvriti 1000 promena! Ovakva dinaminost moe se postii i kada su u pitanju fontovi, boje, linkovi, paragrafi, liste, tabele, hederi, pozicije, dimenzije... Da bi se fajl sa definisanim stilovima (koji ima ekstenziju .css) eksterno povezao sa HTML stranicom, potrebno je da se fajl linkuje sa te stranice koristei <link> tag u okviru <head> taga HTML stranice. Pretpostavimo da imamo neki fajl u kome su definisana css pravila i da se taj fajl zove stilovi.css i nalazi u istom folderu kao i naa stranica. Povezivanje ovog fajla sa naom HTML stranicom obavlja se na sledei nain:
<head> <link rel=stylesheet type=text/css href=stilovi.css /> </head>

Ovime je svako pravilo koje je definisano u ovom fajlu primenjeno na odgovarajue tagove koji se pojavljuju na naoj stranici.

1.11.2

Interni stilovi

Ovako primenjeni stilovi ne mogu se vezati za vie stranica istovremeno ve se piu u zaglavlju same stranice i pripadaju samo njoj. Za ovako definisane stilove se kae da su ugraeni u stranicu (eng. embedded). Ovakav nain definisanja i primene stilova treba izbegavati zbog toga to se umanjuje fleksibilnost i dinaminost a takoe se naruava i pravilo odvajanja sadraja stranice od definicije izgleda. Interni stil se postavlja u zaglavlje dokumenta pomou <style> taga u okviru <head> taga na sledei nain:
<head> <style type=text/css> body { background-color: #ffffff; } P { color: #000000; } </style> </head>

Ovde treba pomenuti jo jedan nain linkovanja fajla sa stilovima koji se moe koristiti u kombinaciji sa ovim nainom ili zasebno. To se ostvaruje korienjem komande @import kojom se css fajl uvozi u dokument a sintaksa je sledea:
<style type="text/css"> @import url(http://style.com/basic); </style>

Po HTML 4.0 specifikaciji ukjuen je i atribut media u okviru <style> taga za odreivanje medija na koji se stil primenjuje. Ovaj atribut moe uzimati sledee vrednosti:

sreen - Izlazni medij je ekran print - Izlazni medij je tampa projection - Izlazni mediji je projektor speech - Izlazni medij je ureaj za sintezu govora all - Koristi sve izlazne medije

Pomou atributa type navodi se MIME tip za liste stilova. 1.11.3 Inline

Inline znai upisivanje stila u okviru samog taga u HTML stranici na koji se stil odnosi. Skoro svaki HTML element sadri atribut style u kome se mogu navoditi CSS pravila kao vrednost atributa. Na primer:
<p style="color: red; margin-left: 20px"> Ovo je paragraf </p>

Ovakav nain primene stila se takoe ne moe preporuiti jer sadraj stranice i definicija stilova nisu odvojeni, to uzrokuje nefleksibilnost i neefikasnost pri izmeni stila.

1.11.4

Alternativne liste stilova

Jedan dokument ne mora imati samo jedan fajl sa stilovima koji je za njega zakaen. Mogue je definisati glavni stil i neogranien broj alternativnih lista stilova ime se korisniku prua mogunost da izabere onaj stil koji mu najvie odgovara. Kako korisnik bira eljenu listu stilova zavisi od Web itaa. Svi Web itai jo uvek nemaju podrku za to ali oni koji imaju nude u meniju stavku choose stylesheet ili neto tome slino. Da bi ukljuili vie lista stilova potrebno je ukljuiti vie <link> tagova u zaglavlju HTML dokumenta, sa odgovarajuim title i rel atributima. Dat je primer definisanja alternativnih lista stilova:
<link rel="stylesheet" title="zuti stil" href="../zutistil.css"> <link rel="alternate stylesheet" title="plavi stil" href="http://www.nekastranica.com/StyleSheets/plavistil.css"> ... <link rel="alternate stylesheet" title="zeleni stil" href="http://www.nekadrugastranica.com/stilovi/zelenistil.css">

Dakle, pri definisanju alternativnog stila, vrednost atributa rel je "alternate stylesheet".

Sintaksa
Svaka Kaskadna Lista Stilova predstavlja seriju instrukcija koje se zovu iskazi. Postoje razliite vrste iskaza1, ali najvanija vrsta je pravilo (eng. Rule). Pravilo radi dve stvari: 1. Identifikuje elemente u HTML dokumentu na koji se odnosi 2. Ukazuje Web itau na to kako da iscrta te elemente na stranici Pod elementima se podrazumevaju paragrafi, linkovi, liste itd. Deo pravila koji govori Web itau kako izabrani element treba da bude prikazan naziva se deklaracijom. Deklaracija moe da sadri odreen broj svojstava kojima se postavljaju konkretne osobine elementa. Deo pravila koji govori o tome koji HTML element se opisuje naziva se selektor (eng. Selector).

Slika 11 Sintaksa za opis kaskadnih lista stilova

Za detalje pogledati u nastavku deo iskazi vrste

Dakle, jedan css fajl se sastoji iz niza iskaza (od kojih su veina pravila), a jedno pravilo ima tri elementa u sebi: 1. selektor (selector) 2. svojstvo (property) (najmanje jedno svojstvo) 3. vrednost svojstva (value) (najmanje jednu vrednost) Skup svojstava i njihovih vrednosti predstavljaju deklaraciju.

Primer:
body { font-family: Verdana, "Minion Web", Helvetica, sans-serif; font-size: 1em; text-align: justify; }

Iz primera se moe uoiti i anatomija pravila. Na poetku je selektor, zatim u prostoru izmeu dve vitiaste zagrade (koje oznaavaju poetak i kraj deklaracije) nalaze se svojstva i njihove vrednosti koje su meusobno odvojene dvotakom, dok su svojstva meudsobno razdvojena taka zarezom.

Slika 12 Anatomija pravila

Evo nekoliko pravila koje treba potovati pri pisanju lista stilova kako ne bi dolo do neoekivanih efekata u radu sa stilovima: 1. Svaki iskaz mora imati selektor i deklaraciju. Deklaracija dolazi odmah iza selektora i oiviena je vitiastim zagradama. 2. Deklaraciju ine jedan ili vie svojstava odvojenih taka-zarezom. 3. Svako svojstvo ima ime iza koga je dvotaka a zatim ide vrednost za to svojstvo. Postoji veliki broj razliitih vrednosti za svojstva ali svako svojstvo moe primiti samo vrednost koja mu je po specifikaciji propisana. 4. Nekada svojstvo moe dobiti vie vrednosti kao to je to sluaj sa font-family svojstvom. Viestruke vrednosti trebaju biti odvojene zarezom i praznim prostorom. 5. Vrednost koja se prikazuje sa vie rei treba staviti pod navodnike 6. Izmeu vrednosti svojstva i jedinice u kojoj se vrednost navodi ne sme da postoji prazan prostor. Primer: font-size: 1em; - Ispravno
font-size: 1 em; - Neispravno

7. Kao i kod HTML-a, dodatni prazan prostor se ignorie te se moe koristiti kako bi se olakalo citanje koda.

8. Kada za jedan element postoji vie definisanih stilova onda e biti primenjeni stilovi po sledeem prioritetu, pri emu poslednji nain definisanja ima najvei prioritet jer je najblii elementu: 1. 2. 3. 4. Web ita default stilovi Eksterna lista stilova Ugraena lista stilova unutar zaglavlja stranice Inline definisan stil

9. Selektori se mogu grupisati tako to e se svaki selektor odvojiti zarezom. U primeru su grupisani svi elementi za naslove u HTML-u i svakom od njih dodeljena je osobina da su slova ispisana zelenom bojom.
Primer:
h1,h2,h3,h4,h5,h6 { color: green }

Iskazi - vrste
Postoji nekoliko vrsta iskaza: @Rules (@pravila) o @import o @media o @page Komentari HTML komentari Rules (pravila)

Svakako najbitnija vrsta iskaza su pravila (eng. Rules), ali krenimo redom.

Komentari
Komentari prilikom pisanja kaskadnih lista stilova imaju sledeu formu:
/* Ovako se piu komentari */

Dakle forma komentara je ista kao kada se komentarie skript kod.

HTML komentari
Stariji Web itai koji ne podravaju CSS e prikazati sadraj ugnjedene kaskadne liste kao tekst na stranici. Da bi se to izbeglo koriste se HTML tagovi za komentare <!-- i --> kako bi se sadraj taga <style> (koji je starijim Web itaima neopoznat i koga e ignorisati) sakrio.

Treba naglasiti da se eksterne liste stilova ne trebaju komentarisati na ovaj nain i da ovo vai iskljuivo za ugnjedene liste stilova.

Rules (pravila)
Rule ili pravilo je vrsta iskaza koji Web itau govori kako odreeni element treba da bude iscrtan na stranici.

Selektori Uvod
Moe se rei da su selektori najvaniji deo kaskadnih lista stilova. Selektor identifikuje tag iji se izgled podeava pomou pravila. Web ita koristi selektore da bi odredio koji tag treba da prikae na nain na koji je u pravilu definisano. Selektori mogu da identifikuju bilo koji HTML tag, ali mogu jo mnogo toga da urade.

Tipovi selektora
Specifikacija organizuje i grupie selektore prema njihovim teoretskim karakteristikama. Ovde e oni biti organizovani prema nainu njihove upotrebe. Bie razmotreni sledei tipovi selektora: Vrsta selektora
Type selektori Class selektori ID selektori Descendant selektori Link pseudo class selektori Pseudo element selektori Grupni selektori Dinamiki pseudo class selektori Jeziki pseudo class selektori Child selektori First child selektori Adjacent selektori Attribute selektori

Sintaksa za definsanje

body { lista svojstava } p.zutiParagraf { lista svojstava } p#zutiParagraf { lista svojstava } div p h1 { lista svojstava } a: hover { lista svojstava } p: first-line h1, h2, h3 { lista svojstava } p:hover { lista svojstava } p:lang(fr) { lista svojstava } div>p>strong { lista svojstava } p:first-child { lista svojstava } strong + em { lista svojstava } a[title=kontakt]{ lista svojstava }

Za svaki tip bie navedeno: ta taj tip selektora radi Kako se formira sintaksa Zato bi ga trebalo koristiti Koliko su dobro podrani od strane Web itaa

Type selektori
Jednom definisan, type selektor se odnosi na svaki tag na stranici iji naziv odgovara nazivu selektora. Na primer, selektor b odnosi se na svaki <b> tag koji se pojavi na stranici. Takoe p

selektor se odnosi na svaki <p> tag koji se pojavi na stranici. To znai da ako se postavi type selektor p i kao vrednost atributa color postavi plava boja, tekst koji se pojavi na stranici u okviru <p> taga (bilo gde na stranici) bie plave boje.

Nain formiranja
Type selektor se veoma jednostavno formira. Navodi se kao bilo koji tag HTML-a ali bez oznaka < i >. Primer: body selektor se odnosti na <body> </body> tag li selektor se odnosi na <li> </li> tag

Korienje
Koristei type selektor, mogue je menjati izgled bilo kog taga na stranici ili svih tagova istovremeno. Ako se korektno ispie kod HTML stranice, nee se osetiti potreba za menjanje tog koda ukoli se eli u budunosti promeniti izgled. Dovoljno e biti da se izmeni opis stila za eljeni tag. Poetnici u CSS-u esto misle da su ogranieni na ovaj tip selektora i da se CSS-om moe uraditi samo ono to ovaj tip selektora nudi. Meutim to je greka, jer postoji veliki broj tipova selektora koji daju velike mogunosti za kreativan rad.

Tipovi HTML elemenata

Svi elementi (HTML) koji se koriste pri kodiranju su podeljeni u tri tipa. Svaki od ovih tipova se na stranici prikazuje drugaije. Ovo je razlog to u CSS-u postoji svojstvo display. Sa ovim svojstvom moe se u mogunosti, teoretski, definisati prikaz elementa na stranici. U praksi Web itai e moda ignorisati pokuaj izmene naina prikaza elementa. Umesto toga, prikazae element po preporuci W3C-a. Tri osnovna tipa prikaza su: block inline list item Block elementi su odvojeni od elemenata koji ih okruuju u toku HTML stranice. Web itai generalno daju blok elementima standardne margine na vrhu i na dnu bloka. Sa CSS-om moe se definisati veliina margina oko blok elementa. Primeri za blok elemente su <p>, <h1> itd. Inline elementi nisu odvojeni od okruujuih elemenata u toku HTML stranice vec se nastavljaju odmah po zavretku prethodnog elementa i nakon njega se nastavlja tok HTML stranice. Primeri za inline elemente su <img> i <a>. List item elementi se prikazuju slino kao i blok elementi, s tom razlikom to je na poetak elementa dodat znak ili redni broj i to je element uvuen za izvestan broj piksela u odnosu na element roditelj. Sa CSS-om se neka slika moe definisati kao marker ispred item list elementa. Najoigledniji list item element je <li> element. Treba napomenuti da su <ul> i <ol> u stvari block elementi. Ako bolje razmislite to i ima smisla.

Class selektori
Objanjenje

Type selektori su veoma moni ali ne pruaju potpunu udobnost koju pruaju class selektori. Naime, dobro je to se pomou type selektora moe odjednom promeniti izgled svakog paragrafa na stranici, ali ta se deava ako se eli promeniti samo odreeni paragraf ili grupa paragrafa? Stranica na kojoj treba da se nau pitanja i odgovori, logino je da e nain na koji su pitanja ispisana na stranici razlikovati od naina na koji su ispisani odgovori. Ukoliko pitanja ispiemo podebljanim slovima, pitanja i odgovore u zasebnim paragrafima, a za sve paragrafe je prethodno pomou type selektora definisano da slova budu crvene boje i da ne budu podebljana, tada e nam i pitanja i odgovori biti ispisani na isti nain. Cilj je da pitanja budu ispisana na drugaiji nain. Reenje je u class selektoru. Kada se napravi class selektor koji se zove na primer pitanje, zatim svakom paragrafu na stranici koji sadri tekst pitanja, kao vrednost atributa class staviti pitanje. Slino uraditi i sa odgovorima. Dakle napraviti class selektor odgovor i primeniti na svaki paragraf koji sadri odgovor.

Opti class selektori

Ova vrsta class selektora odnosi se na bilo koji element date klase. To znai da ovakav selektor moemo primeniti i na element paragraf i tabelu i bilo koji block element na stranici. U CSS-u ovakva vrsta class selektora se formira tako to se navede ime klase pri emu ime mora da pone sa takom. U primeru sa pitanjima i odgovorima kreiraemo dva pojedinana class selektora na sledei nain:
.pitanje { font-wieght: bold; } .odgovor { font-weight: 400; }

Prvi selektor odnosi se na svaki element na stranici koji za vrednost atributa class ima pitanje. Isto vai i za selektor .odgovor.

Class selektori
Drugi tip class selektora odnosi se na odreene elemente na stranici koji su te klase. Na primer, ovakvi selektori e se odnositi samo na paragrafe te klase a ne i na tabele kao kod prethodne vrste selektora.Oblik ovakvog selektora je ImeElementa.ImeKlase. U primeru sa pitanjima i odgovorima, kreirali bismo class selektore koji bi bili vezani iskljuivo za paragrafe na ovaj nain:

p.pitanje { font-wieght: bold; } p.odgovor { font-weight: 400; }

Prvi selektor e imati uticaja na izgled paragrafa za koga smo postavili da je klase pitanje, ali nee uticati na izgled elije tabele ako pokuamo da postavimo da je i ona klase pitanje. Takoe vai i za klasu odgovor. Ime klase moe da sadri alfanumerike znake i crticu, a ne sme da sadri crticu za podvlaenje niti prazan prostor, a takoe ne sme da zapone brojem.

Korienje
HTML 4.0 preporuka W3C predstavila je novi atribut za HTML elemente class atribut. Da bi u svom HTML dokumentu kreirali paragraf klase pitanje, kreirate paragraf kao i obino pomou tagova <p> i </p>. Zatim dodate atribut class otvarajuem tagu kao to dodajete i bilo koji drugi atribut: <p class=pitanje> </p>. Bilo koji paragraf na stranici kome je za class atribut dodeljena vrednost pitanje bie promenjen selektorom .pitanje Ili p.pitanje.

ID selektori
Objanjenje
ID selektori prilino lie na class selektore, rade na slian nain kao oni i imaju slinu sintaksu. Sutinska razlika izmeu ova dva tipa selektora je u tome to se class selektori primenjuju na jedan ili vie elemenata na stranici, dok se ID selektor primenjuje iskljuivo na jedan element. Moda se pitate zato ID selektori uopte postoje kada rade veoma slino kao i class selektori. Najbolji odgovor na to pitanje bio bi : E pa zato, ali nije zadovoljavajui. injenica je, zapravo, da ID atribut postoji u HTML 4.0 specifikaciji te stoga nema razloga da se taj atribut ne koristi kao CSS selektor.

Sintaksa
ID selektori su veoma slini class selektorima, pa im je i sinktaksa slina. I ovde postoje dve vrste selektora - oni koji su posveeni konkretnom HTML elementu i oni koji se mogu primeniti na bilo koji element cija vrednost atributa ID odgovara ID selektoru.

Opti ID selektori
ID selektori koji se mogu primeniti na bilo koji element na stranici imaju jednostavnu sintaksu u ovom obliku: #imeIDselektora, na primer selektor #naslov koji e uticati na jedan element na stranici iji je ID naslov.

ID selektori
ID selektori koji se odnose samo na odreenu vrstu HTML elementa (na primer samo na paragraf), imaju sintaksu ovakovog obilka: imeElementa#imeSelektora, na primer p#naslov. Ovaj selektor odnosie se na onaj paragraf na stranici koji je klase naslov. Ovaj selektor se nee odnositi na bilo koji drugi element na stranici niti na bilo koji drugi paragraf na stranici. Dakle ako na svojoj HTML stranici imate dva paragrafa sa istom vrednou atributa ID to je greka!

Kako se koriste?
HTML 4.0 specifikacija je predstavila ID atribut koji se elementu na stranici dodeljuje slino kao i class atribut: dakle otvarajuem tagu se u nizu atributa navede i atribut ID. Na primer: <h1 id=naslov>. U vaem dokumentu je ovo jedini h1 element (i jedini element uopte) koji ima id naslov. Oblast u kojoj su ID selektori postali de facto standard je CSS pozicioniranje iako se iste stvari mogu raditi i pomou class selektora. S obzirom na to da su elementi koji se pozicioniraju na stranici vrlo esto jedinstveni, meu njima se pravi razlika pomou ID atirbuta.

Descendant (potomak) selektori

Prva vrsta selektora koju smo videli, type selektor, daje onome koji razvija stranicu kontrolu nad izgledom web stranice, ali je to veoma tura kontrola. Descendant selektori daju nam sofisticiranu kontorolu nad izgledom HTML elemenata u zavisnosti od njihove veze sa ostalim HTML elementima na stranici. Sledea slika prikazuje sadrajnu hijerarhiju elemenata na stranici (koji element je sadran u kom elementu).

Slika 13 Sadrajna hijerarhija na HTML stranici

Kada se pogleda ova ema uoava se sledece: <body> tag je roditelj i <h1> i <p> taga <h1> i <p> tagovi su deca <body> taga <h1>, <p>, <img>, i <a> tagovi su svi potomci <body> taga

Descendant selektor se odnosi na neki element jedino ako je taj element potomak drugog elementa. Sledi primer. Ukoliko hoemo da potujemo tipografske konvencije i da sadraj <strong> taga prikaemo podebljanim slovima pomou selektora, dodaemo ovakvo pravilo css fajlu:
strong { font-weight: bold; }

Sintaksa
Descendant selektor je lista drugih selektora koji su odvojeni praznim prostorom. Na primer, selektor za <strong> element unutar <h1> elementa bi izgledao ovako:
h1 strong { {

Moete kreirati descendant selektore do koje vi elite dubine. Na primer, mogue je napisati ovakav selektor:
p ul li strong { }

koji se odnosi na onaj strong element koji se na stranici nalazi kao stavka liste, a lista se nalazi unutar paragrafa. Descendant selektori nisu u stanju da razlikuju da li je neki element na stranici direktni potomak nekog drugog elementa ili nije (da li je neki element sin ili unuk). Ovi selektori samo utvruju da li se neki elemenat nalazi u okviru nekog elementa (da li je ugnjeden u njega) i ako jeste, na takav element e biti primenjen stil. Na primer, oigledno je da e sledei selektor:
p img { }

uticati na izgled <img> taga u sledecem primeru gde je <img> direktni potomak <p> taga:
<p>Slika mog grada <img src=mojgrad.jpg/></p>

ali e takoe uticati i na izgled <img> taga iz sledeeg primera, gde <img> nije direktni potomak <p> taga (dete) ve se po hijerarhiji nalazi u okviru njega:

<p>Kliknite na sliku da biste je uvecali <a href="http:www.mojgrad.com"> <img src="mojgrad.jpg" /> </a> </p>

Descendant selektori se mogu koristiti u kombinaciji sa selektorima koji nisu type. Na primer ako elite da promenite <strong> tag koji je se nalazi u okviru taga <p> koji je klase pitanje, to ete postii ako definiete sledei descendant selektor:
p.pitanje strong

Korienje
Najoigledniji sluaj kada se koristi descendant selektor je onaj koji malopre naveden: Kada se eli uticati na izgled nekog taga koji je sadran u nekom drugom tagu. Drugi, manje oigledan sluaj, ali veoma efikasan je situacija kada se odlui da se nekom tagu dodeli neka klasa, pa da ne bi svaki put kada se taj element pojavi na stranici u HTML kodu njegovom atributu class dodeljivali naziv class selektora, moe se prosto definisati descendant selektor koji e odraditi posao a da nema kontakta sa HTML kodom. Na primer, da bi se otarasili one dosadne linije oko slike kada se postavi kao link, jednostavno se moe definisati descendant selektor koji se odnosi na svaki <img> tag koji se pojavi unutar <a> taga i postaviti svojstvo border na none:
a img { border: none; }

Link pseudo class selectors

Prethodno opisani selektori su za optu upotrebu. Ova vrsta selektora je specifina jer se odnosi samo na <a> tag, odnosno na linkove. On omoguuje da pristupimo promeni izgleda linka u razliitim njegovim stanjima. Linkovi mogu biti normalni (normal - uobiajeno stanje neposeenog linka), poseeni (visited), oznaeni kursorom (hover kada je kursor mia iznad linka), ili aktivni (active stanje dok se nalazimo na stranici do koje vodi link na koji smo upravo kliknuli). Neka od ovih stanja su meusobno iskljuiva. Dakle, jedan link ne moe istovremeno biti poseen i neposeen, ali istovremeno moe biti poseen i aktivan.

Sintaksa
Linkovi za svaku pseudo klasu imaju sledee forme: Selektor za link u normalnom stanju je a:link Selektor za poseeni link je a:visited Selektor za link na kome se nalazi kursor je a:hover Selektor za aktivni link je a:active Svi link pseudo class selektori imaju istu vanost, te se zbog toga mora voditi rauna o redosledu njihovog opisa da ne bi dolo do neeljenih efekata. Naime, ako je jedan link poseen i uz to jo i aktivan, redosled opisa mora da se poklopi sa gore navedenim redosledom kako bi se stilovi pravilno primenili. Preciznije, ako ste definisali da poseeni link ima crvenu boju, a

aktivni belu, logino je da od Web itaa oekujete da ih tako i prikae. Meutim ako nije ispotovan navedeni redosled, Web ita nee ispuniti vaa oekivanja. Definisaemo pseudo klase za sva stanja linka u pravilnom redosledu. Link u normalnom stanju e biti plave boje, poseeni link e biti crvene boje, link na kome je kursor ute i aktivni link e biti zelene boje.
a:link { color: } a:visited { color: } a:hover { color: } a:active { color: } #0000CC;

#FF0000;

#FFFF00;

#00FF00;

Ako pregledate stranicu videete da Web ita pravilno menja boje linku u zavisnosti od njegovog stanja. Dakle, ako je link poseen, on je obojen u crveno, ako se kursorom doe iznad linka (ime menja stanje u hover), link postaje ut. Zameniemo mesta a:visited i a:hover iskaz-ima na sledei nacin:
a:link { color: } a:hover { color: } a:visited { color: } a:active { color: } #0000CC; /*Prvo smo definisali stil za hover stanje*/ #FFFF00; /*A onda i za visited stanje*/ #FF0000;

#00FF00;

Ako sada u Web itau doete sa kursorom mia iznad linka koji je poseen i koji je obojen u crvenu boju, videete da se nee desiti nikakva promena, odnosno da se boja linka nee promeniti u utu boju. Zakljuak je da se redosled definisanja stanja linka mora potovati.

Svojstva (Properties)
Lista stilova je serija instrukcija koje se zovu iskaz-i. Svaki iskaz ima selektor, koji govori Web itau na koji element na stranici se taj iskaz odnosi i deklaraciju, koja govori Web itau kako da iscrta odnosni element. Deklaracija je kolekcija svojstava. Svojstvo ima sledeu formu: ime svojstva iza koga sledi vrednost tog svojstva. Ime svojstva je jedna od velikog broja kljunih rei. Postoji nekoliko razliitih tipova vrednosti koje mogu biti dodeljene svojstvima. CSS specifkacija deli svojstva na nekoliko kategorija. Ovde se ta podela nee striktno pratiti ve e se prihvatiti slina podela svojstava s tim to e se nazivi kategorija razlikovati. Te kategorije su sledee: Text style Text layout Background Border Margin Padding Page layout Element type User interface

Svako svojstvo je objanjeno na sledei nain: Mnoga, ali ne sva svojstva su nasleena od elementa roditelja. Tako, na primer, ako dodamo neko tekst svostvo <body> tagu, ono e biti nasleeno u svim paragrafima, tabelama i ostalim elementima koji se nalaze unutar <body> taga. Sva svojstva mogu uzeti vrednost inherit. To znai da odnosni element mora da nasledi vrednost tog svojstva od svog roditelja iako se to ne bi desilo inae.

Text style svojstva

Text style svojstva definiu kako e se tekst pojaviti na stranici. HTML takoe daje odredjeni nivo kontrole nad fontovima, veliinom istih, debljinom, ali CSS tu kontrolu proiruje i ini kodiranje praktinijim. CSS2 revizija 1 obezbeuje sledea svojstva iz ove grupe: color font-weight font-family font-size font-variant font-style text-decoration text-transform

Color
Ovo svojstvo postavlja boju nekog elementa. U osnovi, odnosi se na boju teksta. Color svojstvo uzima za vrednost boju. Ta vrednost moe biti neka od predefinisanih tekstualnih oznaka za boju (na engleskom jeziku), na primer: red, blue, yellow ali moe uzeti heksadecimalnu vrednost koja predstavlja kombinaciju crvene, zelene i plave boje (RGB paleta boja). Nije specificirana podrazumevana vrednost za color svojstvo. Boja koja se primenjuje u sluaju kada ovom svojstvu nije dodeljena vrednost zavisi od Web itaa. Najee Web itai koriste crnu boju kao podrazumevanu (#000000), ali treba imati na umu da mnogi Web itai dozvoljavaju korisniku da definiu osobine vezane takst na ekranu (boju, veliinu). Elementi deca nasleuju color svojstvo od roditelja.

Font-weight
Ovo svojstvo definie kolike su debljine slova na stranici. Moe uzeti dve vrste vrednosti: kljune rei i numerike vrednosti. Mogu se koristiti sledee apsolutne kljune rei: normal, bold, ili sledee relativne kljune rei: bolder, ligter. bolder ukazuje Web itau da tekst treba da ispie za nijansu deblje od teksta u elementu roditelju. font-weight moe takoe da bude definisana numerikim vrednostima: 100, 200, 300, 400, 500, 600, 700, 800, 900. Svaka vrednost je za jedan stepen deblja od prethodne. Vrednost normal je ekvivalentna sa vrednou 400. Vrednost bold je ekvivalentna sa vrednou 700. Podrazumevano, vrednost font-weight svojstva je normal.Elementi imaju istu apsolutnu vrednost za font-weight svojstvo kao i njihovi roditelji. To znai, da elementi nasleuju numerike vrednosti za ovo svojstvo i apsolutne vrednosti (kljune rei normal i bold).

Font-family
Ovo svojstvo radi slino kao to tag <font> sa atributom face radi u HTML-u. Ovo svojstvo definie hijerarhijsku listu eljenih fontova koje Web ita treba da koristi pri ispisivanju teksta. Web ita e koristiti prvi font u listi koji je na raunaru instaliran. Poto postoji mogunost da se na raunaru ne nalazi ni jedan od navedenih fontova, CSS je uveo generika imena za grupe fontova kojima se taj problem razreava. Ta generika imena se zovu familije fontova (fontfamily). Definisane familije fontova su: serif (na primer Times) sans-serif (na prmer Helvetica) cursive (na primer Zapf-Chancery) fantasy (na primer Western) monospace (na primer Courier)

CSS2 je predstavio kocept sistemskih fontova. Font-family u CSS2 moe biti specificiran kao jedan od nekoliko sistemskih fontova, koji sistem koristi za svoje glavne grafike elemente (na primer font u menijiima i u naslovima prozora). Kada je jedan od tih fontova izabran, tada se koriste i veliina, debljina i stil fonta koga sistem koristi (na primer za ispisivanje teksta u menijima). Sistemski fontovi mogu biti sledei: caption (koristi se kod dugmadi) icon (koristi se za oznake ispod ikonica) menu (koristi se u menijima) messagebox (koristi se u prozoriima za dialog) smallcaption (koristi se za oznaavanje manjih kontrola) statusbar (koristi se u status baru prozora)

Kada je jedna od ovih vrednosti izabrana, to utie i na debljinu, veliinu i stil fonta kako je definisano u sistemu. Ako su i ova svojstva postavljena pomou stilova, ona bivaju prekrivena svojstvima koja je definisao sistem. Ne postoji definisana podrazumevana vrednost za ovo svojstvo. Web itai su ti koji definiu kojim e fontom biti ispisan tekst. Element e imati isti font kao i njegov roditelj ukoliko za njega nije definisano svojstvo fontfamily.

Font-size
Ovim svojstvom se definie koje e veliine biti tekst na ekranu. Sa HTML-om ste ogranieni na 7 relativnih veliina koje nemaju nikakve veze sa tradicionalnim nainima merenja veliine fonta kao to su: point, em, ex itd. ak veliina slova u HTML-u nema nikakve veze ni sa pikselima. CSS omoguuje da se definie veliina fonta u bilo kojoj od ovih jedinica i na mnoge druge naine. Veliina fonta moe takoe biti specificirana korienjem relativnih i apsolutnih kljunih rei. Relativne kljune rei su: larger i smaller gde, na primer, larger definie veliinu fonta za jedan stepen veu od veliine fonta elementa roditelja. Za smaller vrednost moete i sami da naslutite. Kao to je to uvek sluaj sa vrednostima koje su izraene kljunim reima, konkretne implementacije u razliitim Web itaima se razlikuju. Apsolutne kljune rei su: xx-small x-small small medium large

x-large xx-large

Veliina fonta u nekom elementu je ista kao i veliina fonta u elementu koji ga sadri. Na primer, ako je definisano da veliina fonta u paragrafu bude large, tada e veliina fonta u linku koji se nalazi unutar nekog paragrafa takoe biti large.

Font-variant
Ovim svojstvom se podeava osobina teksta da bude prikazan malim slovima. Font-variant svojstvo moe uzeti vrednost normal ili small-caps. Normal govori da tekst treba da se pojavi u onom obliku u kome je napisan izvorno. Dakle, ako je napisano u izvornom kodu CikloPentanoPerHidrofenAntren, taj tekst tako treba i da se prikae. Small-caps govori da tekst treba da se prikae tako to e mala slova biti prebaena u velika slova i veliina e im biti smanjena. U naem primeru je to: CIKLOPENTANOPERHIDROFENANTREN. Ovo svojstvo se nasleuje od elementa roditelja.

Font-style
U tradicionalnoj tipografiji postoje razliiti stilovi fontova. Sa CSS-om se moe manipulisati sa stilovima fontova i to uz pomo font-style svojstva. Tri stila koja su podrana od strane CSS-a su: normal, italic i oblique. Normal stil e prikazati fontove u normalnom obliku, dok se italic i oblique stilovi najverovatnije nee razlikovati. Svojstvo font-style moe uzeti jednu od tri vrednosti: normal, italic i oblique. Ovo svojstvo se nasleuje od elementa roditelja.

Text-decoration
Ovo svojstvo omoguuje da se nad tekstom primene neki efekti. Vrednosti koje ovo svojstvo moe uzeti su: none, underline, overline, line-through, blink. Svojstvo text-decoration moe uzeti vrednost none ili moe imati vie vrednosti. Kada se za ovo svojstvo definie vie vrednosti potrebno ih je odvojiti praznim prostorom.

Text-transform
Ovo svojstvo omoguuje da se manipulie osobinom teksta da bude ispisan velikim ili malim slovima i da rei poinju velikim slovima. Postoje tri naina manipulacije tekstom pomou ovog svojstva: capitalize, gde svaka re treba da pone velikim slovom

uppercase, gde je svako slovo veliko lowercase, gde je svako slovo malo

Kada se primeni ovo svojstvo na neki tekst, tada se taj tekst formatira na nain na koji je to svojstvom definisano, bez obzira na nain na koji je tekst ispisan u izvornom kodu. U suprotnom je mogue postaviti vrednost text-transform svojstva na none, ime se izbegava nasleivanje ovog svojstva od elementa roditelja. Ovo svojstvo se nasleuje od elementa roditelja.

Text layout svojstva

Ova grupa svojstava koristi se za definisanje naina na koji je tekst rasporeen na stranici. Ova svojstva su vezana za tekst, kao to rekoh, i njima se kontroliu neke stvari kao to su razmak izmeu slova, razmak izmeu redova i ostalo. U kombinaciji sa page layout svojstvima, ova svojstva omoguuju sofisticiranu kontrolu nad razmetajem elemenata na stranici i podeavanjem izgleda teksta. Za sada, meutim, CSS ne obezbeuje mehanizme za raspored elemenata na stranici kakav obezbeuju recimo Quark Express i PageMaker, ali ipak prua mnogo mogunosti. Dok je kontrola izgleda teksta u HTML-u veoma ograniena, CSS obebeuje kontorolu nad tradicionalnim tipografskim elementima kao to su razmak izmeu slova (u tipografiji poznat kao kern), razmak izmeu rei (u tipografiji poznat kao track) i razmak izmeu redova (u tipografiji poznat kao leading). U ovu grupu svojstava spadaju: letter-spacing word-spacing line-height vertical-align text-indent text-align direction unicode-bidi

letter-spacing
Kao sto mu i samo ime kae, ovo svojstvo obezbeuje kontrolu nad veliinom prostora izmeu slova u rei, to se u tradicionalnoj tipografiji na engleskom jeziku naziva kern.

Mogue vrednosti
Letter-spacing moe dobiti vrednost u bilo kojoj jedinici za duinu. Kako bi se razmak izmeu slova postavio na manju vrednost nego to je normalna (podrazumevana), mogue je ovom svojstvu dodeliti negativne vrednosti.

Elementi na stranici imaju istu vrednost atributa letter-spacing kao i njihov roditelj. Meutim, ako se vrednost ovog svojstva postavi na normal, tada ta vrednost prekriva nasleenu vrednost.

word-spacing
U tradicionalnoj tipografji kontrola prostora izmeu rei je uvek bila veoma vana i na engleskom jeziku se ona naziva track. Kada se ne bi kontrolisao prazan prostor izmeu rei dolo bi do efekta u tipografiji poznatog kao reka (river). Ovaj efekat smanjuje itljivost dokumenta jer prazan prostor izmeu rei formira vertikalne kolone na stranici. To itaoca navodi da svojim okom ita tekst po tim vertikalnim kolonama a ne po redovima kako bi trebalo.

Mogue vrednosti
Word-spacing moe biti izraen u bilo kojoj jedinici za duinu. Kako bi se napravio uzan razmak izmeu rei mogue je za vrednost ovog svojstva dodeliti negativnu vrednost. Vrednost svojstva word-spacing moe biti i normal. Vrednost ovog svojstva, element nasleuje od elementa roditelja. Postavljanjem vrednosti na normal, prekriva se nasleena vrednost od elementa roditelja.

Line-height
Ovo svojstvo podeava rastojanje izmeu susednih linija teksta. Preciznije, rastojanje se meri od dna susednih linija. Dno je imaginarna horizontalna linija na kojoj slova u liniji teksta stoje. U tradicionalnoj tipografiji, prostor izmeu linija na engleskom jeziku se zove leading.

Mogue vrednosti
Svojstvo line-height se moe definisati na razliite naine: pomou mnoitelja, procenata, jedinica za duinu ili korienjem kljune rei normal.

Mnoitelji
Ovom svosjtvu se moe dodeliti vrednost koja se dobija mnoenjem veliine fonta sa nekim mnoiteljem. Mnoitelj je bilo koji broj koji nije izraen ni u jednoj jedinici. Na primer, ako je vrednost svojstva font-size postavljena na 10pt, a vrednost svojstva line-height na 1.2, rastojanje izmeu donjih granica susednih linija teksta e biti 1.2x10=12pt.

Procenti
Procentualna vrednost za ovo svojstvo se rauna kao procentualna vrednost od veliine fonta koja se postavlja svojstvom font-size. Dakle, kada se vrednost svojstva odredi pomou procentualne vrednosti deava se slina stvar kao kod mnoitelja. Mnoitelj 1.2 koji smo koristili u prethodnom primeru moe se zameniti procentualnom vrednou 120%. Rezultat je isti kao u prethodnom primeru.

Konkretne vrednosti
Umesto da se koriste mnoitelji i procenti, mogue je ovom svojstvu dodeliti konkretnu vrednost. To mogu biti relativne vrednosti kao to su em i ex, ili apsolutne kao to su pt ili cm.Vrednost ovog svojstva moe se postaviti na normal, ime se prekriva nasleena vrednost za to svojstvo.

Ovo svojstvo element nasleuje od svog roditelja. Postoji nekoliko stvari koje su malo komplikovane pa ih treba imati na umu. Naime, pri nasleivanju, element dete nasleuje od elementa roditelja mnoitelj (ako je na taj nain specificirana vrednost ovog svojstva kod roditelja), dok u sluaju kada se koriste procenti, element dete nasleuje vrednost, a ne procenat koji je zadat. Na primer, ako je definisano da neki element ima vrednost svojstva 1.2 (to je mnoitelj) i ako je veliina fonta 10pt, tada e element dete naslediti taj mnotelj, pa ako je u detetu veliina fonta postavljena da bude 8pt, vrednost svojstva line-height e biti 9pt.

vertical-align
Veoma esto se elementi nalaze u istoj liniji poreani horizontalno na stranici. Svojstvo verticalalign obezbeuje kontrolu nad nainom kako se elementi na stranici ravnaju (eng. align poravnati).

Kljune rei
Kljune rei funkcioniu na jedan od dva meusobno razliita naina. Jedna grupa kljunih rei funkcionie relativno u odnosu na element roditelj, a druga grupa relativno u odnosu na liniju na kojoj se element pojavljuje. Kljune rei koje su relativne u odnosu na element roditelj su: baseline poravnava donju granicu elementa sa donjom granicom elementa roditelja. middle poravnava sredinju taku elementa sa donjom granicom elementa roditelja sub postavlja element nie od ustaljenog toka (kao index) super postavlja element vie od ustaljenog toka (kao stepen) text-top poravnava vrh elementa sa vrhom fonta elementa roditelja text-bottom poravnava dno elementa sa dnom fonta elementa roditelja. Kljune rei koje su relativne u odnosu na liniju na kojoj se element nalazi: top poravnava vrh elementa sa vrhom najvieg elementa na toj liniji bottom poravnava dno elementa sa dnom fonta.

Procentualne vrednosti
Kada se ovom svojstvu dodeli procentualna vrednost, tada se dno elementa podie u odnosu na dno elementa roditelja. Ali za koliko? Za procentualnu vrednost od vrednosti svojstva lineheight. Na primer, vertical-align: 20% za element koji ima vrednost svojstva line-height 10pt, podii e dno elementa za 2pt iznad dna elementa roditelja. Mogu se definisati i negativne vrednosti kako bi se dno elementa spustilo u odnosu na dno elementa roditelja. Ako nije podeena, podrazumevana vrednost svojstva je baseline. Ovo svojstvo se ne nasleuje.

text-indent

Tradicionalno, u mnogim doukumentima, prva linija teksta svakog paragrafa je malo uvuena. Svojstvo text-indent omoguuje kontrolu nad time kako je tekst uvuen ili izvuen. Ovo svojstvo moe uzeti vrednost izraenu u procentima ili u nekoj jedinici za duinu. Ako se za ovo svojstvo dodeli negativna vrednost, tada se tekst izvlai ispred ostalih linija teksta. Kada se koriste procentualne vrednosti, tada se ona sraunava na osnovu irine elementa roditelja. Dakle, ako je irina elementa roditelja (vrednost svojstva width) 100px i ako je kao vrednost svojstva text-indent postavljena na 20%, tada e tekst biti uvuen za 20px. Ako vrednost svojstva text-indent nije specificirana, tada prva linija teksta izgleda kao i ostale, dakle nema uvlaenja teksta. To znai da je incijalna vrednost za ovo svojstvo 0. Element ima istu vrednost za ovo svojstvo kao i element roditelj.

text-align
Ovim svojstvom je mogue odrediti kako e sadraj koji se nalazi unutar elementa biti poravnat. Ovo svojstvo moe biti primenjeno samo na block elemente.

Mogue vrednosti
Svojstvo text-align moe uzeti jednu od sledeih vrednosti: left right center justify Web itai ne moraju da podre vrednost justify i u principu je mogu interpretirati kao vrednost left. (Za jezike u kojima se ita i pie s desna na levo kao to je arapski, Web itai ovu vrdnost interpretiraju kao vrednost right). Ne postoji podrazumevana vrednost za svojstvo text-align. Preputeno je Web itaima da odlue kako e tekst biti prikazan, ako svojstvo za poravnanje teksta nije definisano pomou stilova. Ovo svojstvo element nasleuje od elementa roditelja.

direction
CSS2 je predstavio svojstvo direction. Njime se odreuje sa koje se strane tekst pie i ita. U mnogim istonjakim jezicima, tok teksta ide s desna na levo. Ovim svojstvom se tok teksta eksplicitno moe podesiti.

Mogue vrednosti
Postoje dve mogue vrednosti: rtl kojom se podeava da tok teksta ide s desna na levo ltr kojom se podeava da tok teksta ide s leva na desno Ovo svojstvo se nasleuje od elementa roditelja.

Background svojstva
Background svojstva utiu na nain kako se prikazuje pozadina nekog elementa. Za razliku od HTML-a, sa CSS-om se za svaki element moe postaviti boja pozadine ili slika koja e predstavljati pozadinu. Pozadinska slika se moe ponavljati du horizontalne, vertikalne ili obe ose istovremeno (ovo se najee koristi kod postavljanja pozadine za <body> tag). CSS-om se moe podesiti i nain na koji se pozadina ponaa kada se stranica skroluje. Pozadina se moe skrolovati istovremeno sa stranicom ili ostati fiksirana. Ukratko, CSS je veoma proirio mogunosti kontrole izlgeda stranice. Background svojstva su: background-color background-image background-attachment background-repeat background-position background

background-color
Ovim svojstvom se podeava boja pozadine elementa. Sa CSS-om je mogue za svaki element postaviti boju pozadine.

Mogue vrednosti
Svojstvo background-color moe uzeti vrednost koja predstavlja neku boju ili se moe postaviti vrednost transparent. Kada je postavljena vrednost transparent, time se osigurava da element bude transparentan (proziran). Ovo je posebno korisno kod pozicioniranja elemenata na stranici gde se moe desiti da jedan element prekriva deo drugog elementa. Ovo svojstvo se ne nasleuje od elementa roditelja.

Saveti i sugestije
Strogo je preporuljivo da ako postavite odreenu boju kao vrednost svojstva backgroundcolor, takoe postavite i boju za svojstvo color, kako biste izbegli mogue kolizije i neitljivost teksta ako korisnik u Web itau promeni boju teksta.

background-image
Sa tradicionalnim HTML-om, mogue je sliku pozadine postaviti samo za ceo dokument ali ne i za pojedinane elemente. Neki Web itai podravaju mogunost da se pozadinska slika postavi i za neke elemente, kao na primer za eliju tabele, ali to ne predstavlja standard. CSS omoguuje da bilo element dobije pozadinsku sliku.

Mogue vrednosti
Ovo svojstvo kao svoju vrednost moe uzeti URL do slike koja e biti koriena kao pozadina, ili vrednost none.

Svojstvo background-image se ne nasleuje od elementa roditelja to, ako bolje razmislite, ima smisla.

background-attachment
Tradicionalno, pozadinska slika u telu HTML dokumenta se pri skrolovanju strane takoe skroluje. Pomou ovog svojstva se moe podesiti da pozadinska slika ostaje nepomina na stranici kada se stranica skroluje.

Mogue vrednosti
Svojstvo bakcground-attachment moe uzeti jednu od dve vrednosti: fixed ili scroll. scroll vrednost govori brwser-u da pri skrolovanju stranice, pozadinska slika takoe bude skrolovana. fixed vrednost govori Web itau da fiksira pozadinsku sliku dok se stranica skroluje.

background-repeat
Kada se kao pozadinska slika neke stranice postavi slika koja je po dimenzijama (duini i irini) manja od stranice, tada Web ita tu sliku ponavlja du horizontalne i vertikalne ose. Sa CSSom se moe kontrolisati nain na koji Web ita prikazuje pozadinsku sliku.

Mogue vrednosti
Svojstvo background-repeat moe uzeti jednu od sledeih vrednosti: repeat repeat -x repeat -y no-repeat repeat vrednost daje efekat ponavljanja slike du horizontalne i vertikalne ose. Efekat ove vrednosti je isti kao i kod tradicionalnog postavljanja pozadinske slike pomou HTML-a. repeat x vrednost govori Web itau da slike ponavlja samo po horizonltalnoj osi repeat y vrednost govori Web itau da slike ponavlja samo po vertikalnoj osi no-repeat vrednost govori Web itau da sliku prikae samo na jednom mestu i da je ne ponavlja.

Podrazumevane vrednosti
Ako svojstvo background-attachment nije podeeno, podrazumevana vrednost ovog svojstva je repeat. Ovo svojstvo se ne nasleuje od elementa roditelja.

background-positon
Kada se pozadinska slika postavi pomou HTML-a, ona je pozicionirana u gornjem levom uglu stranice i odatle se dalje ponavlja horizontalno i vertikalno. Sa CSS-om se pomou svojstva background-position moe definisati mesto na kome e se pozadinska slika pojaviti.

Mogue vrednosti
Svojstvo background-position spada u grupu komplikovanih svojstava. Postoji nekoliko naina na koje se moe podesiti pozicija slike. Pozicija moe biti definisana pomou: parova procentualnih vrednosti, vrednosti u jedinicama duine ili pomou kljunih rei individualnih kljunih rei

Parovi procentualnih vrednosti

Kada je pozicija pozadinske slike definisana pomou para procentualnih vrednosti (na primer, background-position: 0% 0%), prva vrednost se odnosi na poziciju vrha slike, dok se druga odnosi na poziciju leve ivice slike. Ovaj mehanizam se najbolje moe objasniti pomou primera. Pretpostavimo da imamo ovako definisanu vrednost za ovo svojstvo: (backgroundposition: 15% 25%). Ovo znai da e pozadinska slika biti postavljena na rastojanju od 15% od leve ivice elementa i 25% od gornje ivice elementa.

Parovi vrednosti u jedinici duine

Kada je pozicija pozadinske slike definisana pomou parova u jednici duine, na primer: (background-position: 20px 30px), prva vrednost govori da slika treba da bude pozicionirana na rastojanju od 20 pikslela od leve ivice elementa i na rastojanju od 30 piksela od gornje ivice elementa.

Parovi kljunih rei i individualne kljune rei

Kljune rei koje mogu biti koriene su: top left center right bottom

background
Ovo svojstvo je preica pomou koje se moe definisati jedno ili sva svojstva koja su vezana za pozadinsku sliku. Ovo svojstvo uzima iste vrednosti koje su opisane za pojedinana svojstva. Da biste definisali vrednosti za vie svojstava odjednom, potrebno je da vrednosti razdvojite praznim prostorom. Na primer ovako definisane vrednosti za svojstvo background:
background: url(http://www.nekisajt.com/images/slikaPozadine.gif) fixed no-repeat top center

daju isti efekat kao i:

background-image: url(http://www.nekisajt.com/images/slikaPozadine.gif); background-attachment: fixed; background-repeat: no-repeat; background-position: top center;

Border svojstva
Pomou CSS-a svaki element na stranici moe imati graninu liniju (u daljem tekstu borduru) i to razliitog stila, veliine i boje. Mogue je ak za jedan element definisati sve bordure razliite (leva, desna, gornja i donja). Svojstva koja su vezana za borduru su: border-width border-top-width border-right-width border-bottom-width border-left-width border-color border-style border border-top border-right border-bottom border-left Rad sa bordurama je prilino prost, ali ovde mnogo vie nego kod drugih elemenata, postoji veliki broj preica kako se vrednosti mogu postaviti. Zbog ovoga rad sa bordurama moe biti pomalo zbunjujui, na prvi pogled. Nekoliko saveta oko postavljanja vrednosti kako bi se izbegla zabuna i nejasnost: Kao prvo, da biste definisali istu vrednost za borduru za sve strane elementa, koristite svojstvo border. Na primer, da biste za svaku stranu elementa dodelili borduru jednako tanku, crvene boje i neisprekidane linije, trebate da koristite sledei nain:
border: thin red solid

Drugo, da biste definisali svojstvo za datu stranu elementa, koristite border-* svojstvo. Na primer, da biste gornjoj stranici elementa dodelili tanku, crvenu i neisprekidanu borduru, a donjoj stranici elementa debelu, crnu i takastu borduru koristite sledeu deklaraciju:
border-top: thin red solid; border-bottom: thick black dotted;

border-width, border-top-width, border-left-width, bottom-width, border-right-width

border-

Ova svojstva omoguuju postavljanje debljine bordure za svaku stranu elementa posebno ili istovremeno.

Mogue vrednosti
Debljina bordure moe se definisati pomou kljunih rei ili pomou jedinice za duinu. Kljune rei koje se u tu svrhu koriste su: thin medium thick

Ne postoji precizna specifikacija kojom debljinom bi trebalo da se iscrtavaju bordure sa ovim vrednostima, pa e najverovatnije Web itai ove vrednosti date kljunim reima tumaiti i iscrtavati drugaije. Jedina garancija je da thin nije tanja od medium, koja opet nije tanja od thick. Ako nije podeena, debljina bordure je podrazumevano medium. Element ne nasleuje podeavanja bordure od elementa roditelja.

Saveti i sugestije
Svojstvo border-width se moe koristiti kako bi se za svaku stranicu elementa pojedinano definisale vrednosti za opis bordure. Mogu se koristiti izmeu jedne i etiri vrednosti za ovo svojstvo: Jedna vrednost podeava sve bordure na istu veliinu Dve vrednosti postavljaju istu debljinu za gornju i donju borduru pomou prve navedene vrednosti i istu debljinu za levu i desnu borduru pomou druge navedene vrednosti. Tri vrednosti postavljaju debljinu gornje bordure pomou prve navedene vrednosti, levu i desnu borduru pomou druge navedene vrednosti i donju borduru pomou poslednje navedene vrednosti. etiri vrednosti podeavaju debljinu gornje bordure pomou prve navedene vrednosti, debljinu leve bordure pomou druge navedene vrednosti, debljinu donje bordure pomou tree navedene vrednosti i debljinu desne bordure pomou etvrte navedene vrednosti.

border-color
Ovim svojstvom se podeava boja bordure oko elementa. Njime se moe podesiti i razliita boja svih bordura odjednom koristei viestruke vrednosti, slino kao kod svojstva border-width.

Mogue vrednosti
Svojstvo border-color moete koristiti na sledee naine: Jednostruka vrednost za boju definie istu boju za sve bordure Sa dve vrednosti se prvom navedenom definie boja gornje i donje bordure, a drugom navedenom boja leve i desne bordure. Sa tri vrednosti, prvom navdenom se definie boja gornje bordure, drugom navedenom boja leve i desne bordure i treom navedenom boja donje bordure. Sa etiri vrednosti se definiu boje gornje, leve, donje i desne bordure respektivno.

Podrazumevane vrednosti
Ako nije podeena boja bordure, njena podrazumevana boja je ista kao i boja elementa koja je definisana svojstvom color. To ne znai da svi elementi podrazumevano imaju borduru iste boje kao i sadraj. Element e imati borduru tek kada se definie svojstvo border-style.

Ovo se svojstvo ne nasleuje od elementa roditelja.

border-style
Pored boje i debljine, bordura oko elementa moe imati i svoj stil. Da bi se bordura uopte iscrtala na stranici, potrebno je definisati vrednost svojstva border-style. Kada ste jednom definisali stil bordure, moete dopustiti Web itau da sam dodeli podrazumevane vrednosti za debljinu i boju bordure, mada ete u najveem broju sluajeva sami definisati i ostale dve osobine bordure. Mogue vrednosti Kao i kod border-color svojstva i ovim se svojstvom mogu dodeliti razliiti stilovi za sve bordure odjednom: Jedna vrednost za svojstvo border-style definie jednak stil za sve bordure odjednom Sa dve vrednosti definie se stil za gornju i donju borduru pomou prve nevedene vrednosti, odnosno za levu i desnu borduru pomou druge navedene vrednosti. Sa tri vrednosti definie se stil za gornju borduru pomou prve navedene, za levu i desnu borduru pomou druge navedene i za donju borduru pomou tree navedene vrednosti. Sa etiri vrednosti definiu se stilovi za gornju, levu, donju, i desnu borduru respektivno. Kljune rei za border-style svojstvo su: none dotted dashed solid double groove ridge inset outset

Podrazumevane vrednosti
Ako vrednost svojstva border-style nije definisana, podrazumevana vrednost je none. Elementi ne nasleuju stil bordure od elmenta roditelja.

Margin svojstva
Sa CSS-om, svakom elementu se mogu dodeliti margine. Margina predstavlja prazan prostor izmeu elementa i ostalih elemenata na stranici. Margine se nalaze oko svih strana elementa. Svojstva kojima se podeavaju margine su: margin margin-top margin-left

margin-bottom margin-right

margin, margin-top, margin-left, margin-bottom, margin-right

Ova svojstva podeavaju veliinu margine oko gornje, leve, donje i desne strane elementa.

Mogue vrednosti
Margine se mogu podesiti pomou procentualnih vrednosti, jedinice za duinu ili pomou kljune rei auto. Margine mogu dobiti i negativne vrednosti.

Procentualne vrednosti
Kada se podeava veliina pomou procentualnih vrednosti, tada se te vrednosti sraunavaju na osnovu veliine elementa roditelja. Na primer, sledea deklaracija margin-right: 20%, podeava irinu desne margine na 20% od irine elementa koji sadri dati element. Isto ovo vai i za margin-top i margin-bottom.

Vrednosti u jedinici duine

Postoje dve vrste vrednosti koje se izraavaju u jedinicama za duinu. To su apsolutne i relativne. Apsolutne vrednosti su recimo px. Ako koristite ove vrednosti, stvarna veliina margine e uvek biti ista. Kada koristite relativne vrednosti, tada obezbeujete fleksibilnost stranice. Jedna od tih relativnih vrednosti je em. Korienjem relativnih vrednosti, veliina margine e uvek biti proporcionalna sa izraunatom veliinom sadraja elementa. Ovakav nain definisanja veliine margina se preporuuje.

Podrazumevane vrednosti
Ako nije podeena, podrazumevana veliina margine je nula. To znai da ne postoji prazan prostor izmeu elementa i susednih elemenata. Poto neki Web itai esto ipak postavljaju neku veliinu margine, potrebno je ovom svojstvu dodeliti vrednosti nula kako bi se neutralisao nepoeljan prostor oko elementa. Element ne nasleuje margine od elementa koji ga sadri.

Saveti i sugestije
Margine se mogu koristiti kako bi se postigao slian efekat koji se postie pomou svojstava za pozicioniranje i svojstava za padding (kasnije e biti rei o ovim svojstvima). Element moete centrirati unutar elementa koji ga sadri, bez korienja svojstva text-align u elementu roditelju, tako to ete svojstvima margin-left i margin-right dodeliti vrednosti auto. To je naee korien nain za centriranje cele stranice na ekranu. Preporuka je takoe, kao to sam malopre pomenuo, da se koriste proporcionalne vrednosti za definisanje veliine margina, ime se obezbeuje pristupanost i fleksibilnost stranice.

Padding svojstva
Sa CSS-om, svakom elementu se moe dodeliti jo jedna vrsta praznog prostora koja se na engleskom jeziku zove padding. Padding je zapravo prazan prostor izmeu strane elementa (njene bordure) i sadraja tog elementa. Taj prostor se moe pojedinano podesiti za svaku stranu elementa. Padding svojstva su: padding padding-top padding-left padding-bottom padding-right

padding, padding-top, padding-left, padding-bottom, padding-right

Ovim svojstvima se podeava veliina praznog prostora uz gornju, levu, donju i desnu stranu elementa.

Mogue vrednosti
Padding prostor se moe podesiti pomou procentualnih vrednosti, jedinice za duinu ili pomou kljune rei auto. Padding svojstva ne mogu dobiti negativne vrednosti.

Procentualne vrednosti
Pomou procentualnih vrednosti, veliina praznog prostora se sraunava na osnovu veliine elementa roditelja. Na primer, deklaracijom padding-right: 20% podeava se veliina praznog prostora uz desnu stranu elementa na 20% irine elementa koji ga sadri. Ovo vai i za padding-top i padding-bottom svojstva.

Vrednosti u jedinici duine

Kao to je reeno kod svojstava za margine, postoje dve vrste vrednosti izraenih u jedinici za duinu. To su apsolutne vrednosti kao to je px. Ako se koriste apsolutne vrednosti, veliina praznog prostora e uvek biti jednaka. Fleksibilnost stranice se obezbeuje korienjem relativnih vrednosti za duinu, kao to je em. Korienjem relativnih vrednosti, veliina praznog prostora e uvek biti proporcionalna sa izraunatom veliinom sadraja elementa. Ovakav nain definisanja veliine praznog prostora (padding) se preporuuje.

Podrazumevane vrednosti
Ako nije specificirana, podrazumevana vrednost za ovo svojstvo je nula. To znai da ne postoji prazan prostor izmeu bordura elementa i njegovog sadraja. Element ne nasleuje ovo svojstvo od elementa roditelja.

Saveti i sugestije
Padding svojstvima se moe postii slian efekat koji se postie korienjem svojstava za pozicionrianje elemenata na stranici i svojstava za podeavane margina.

. Page layout svojstva

1.12 Uvod u pozicioniranje elemenata sa CSS-om
Jedno od najznaajnijih ogranienja HTML-a je bila nemogunost da se stranice postave2 na nain kako smo to mi zamislili ili skicirali na papiru. Mogue je bilo, mada ne uvek, da se stranica postavi korienjem tabela i transparentnih gif sliica veliine 1 piksel, ali obe ove ustaljene tehnike naruavaju princip razdvajanja opisa izgleda stranice od njenog sadraja i oteavaju odravanje stranice i izazivaju dodatne glavobolje s obzirom na to da novi Web itai ne prikazuju elemente isto kao stariji Web itai. Ovaj metod treba izbegavati i sada kada nam ljubazni CSS nudi svojstva koja nas tih muka reavaju, ne postoji izgovor za dalje korienje improvizujuih tehnika. Pa kako su to CSS i raspored elemenata na stranici u vezi? Prva preporuka CSS1 ukljuivala je samo malo svojstava kojima se ureivao raspored elemenata na stranici. Sa CSS1: irina i visina elementa su mogle da se definiu pomou svojstava width i height respektivno prazni prostori oko i unutar elementa su mogli da se definiu pomou svojstava margin i padding respektivno text-indent svojstvo je moglo da se primeni na prvu linju teksta elementa float i clear svojstva su omoguavala da se postavi raspored elemenata u obliku kolona

Nedostajala je mogunost da se odredi gde bi trebalo da se pojavi gornja leva ivica elementa u odnosu na mesto gde bi se pojavila u prirodnom toku stranice ili u odnosu na
gornju levu ivicu stranice. Kako bi se ovaj nedostatak prevaziao CSS2 je doneo nova svojstva koja e biti prikazana u nastavku. ta je to to nedostaje HTML-u kada je u pitanju raspored elemenata na stranici? Da se za trenutak osvrnemo da stono izdavatvo. Programi kao to su Quark Express i PageMaker (ak i manje poznati i moni programi za ove svrhe) doputaju da korisnik 'uzme' blokove sadraja (teksta i slika) i postavi ih direktno na stranicu na bilo koju lokaciju. Blokovi mogu preklopiti jedan drugoga pri emu gornji blok zatamnjuje deo donjeg bloka koji se nalazi ispod njega. Sa HTML-om ove stvari nismo bili u mogunosti da odradimo. CSS2 donosi mogunost da se ovakve stvari urade sa elementima nae stranice.

1.13 Slovo o slojevima (layers)

Pre nego to krenemo dalje, smatram da na ovom mestu treba ukazati na jedan izvor nejasnoa. Naime, radi se o pojmu slojeva - layers. Mnogi programeri koji se bave kodiranjem web stranica su uli za lejere3 i razvili svoja pogrena ubeenja u vezi sa njima. Probau da razjasnim neke stvari. U prostom smislu, lejeri ne postoje. U sloenijem smislu, lejer je metafora, ali lejeri kao fiziki entiteti ne postoje. Ali ako se posmatraju Netscape-ove vlasnike ekstenzije za HTML, stvari kao to su lejeri zaista postoje. Pokuau da objasnim ovo.
2 3

Kada se kae da se stranica 'postavi', misli se na raspored elemenata na stranici U daljem tekstu u koristit izraz 'lejeri' s obzirom na to da je veoma rairena njegova upotreba meu ljudima koji razvijaju web stranice i da mnogi kada uju izraz slojevi ne znaju na ta se zapravo misli.

Kada govorimo o lejeru, u principu mislimo na HTML kontejner (ili element) koji moe biti postavljen na neko konkretno mesto na nekoj lokaciji nae web strane. Aplikacije kao to je DreamWeaver koriste ovaj termin ba na ovaj nain. Prva zabuna koja se javlja u vezi sa ovim je pogreno miljenje da lejer moe da bude div i samo div. Ovo je, kao to rekoh pogreno. Lejer u smislu HTML elementa koji moe biti postavljen bilo gde na stranici moe da bude bilo koji element (paragraf, stavka liste, bilo ta). To je tako u teoriji. U praksi, meutim, Netscape Navigator 4 e dozvoliti da pozicionirate paragrafe i druge lemente koristei CSS2, dok Internet Explorer 4 i 5 stvarno misle da je lejer samo div. Dakle da rezimiramo, u HTML-u ne postoji neto to je lejer, ve je layer izraz kojim se oznaava bilo koji element HTML-a koji je na stranici pozicioniran pomou CSS2. Meutim, ako pogledamo na lejere sa Netscape-ove pozicije, postoji neto to je lejer u HTMLu. To je, naime, element <layer>.Ovo je bilo proirenje HTML-a od strane Netscape-a, koje (naravno) nikada nije bilo usvojeno od strane Internet Explorera. Savet je da ga jednostavno ignoriete i sve e biti u redu. To je uradio i Netscape, pa od verzije 6 vie ne podrava ovo proirenje.

1.14 <div>
<div> je generiki blok element. Druge elemente, kao to su paragrafi moete da postavljate unutar <div> taga, a onda ceo blok moe lako biti pozicioniran na stranici. Ali to ne znai da ako koristite tag <div> morate da ga i pozicionirate. Sa druge strane, ne morate ni da koristite ovaj tag da biste pozicionirali sadraj moete da pozicionirate bilo koji element pomou HTML-a. Meutim, ne treba zaboraviti da neki stariji Web itai podravaju pozicioniranje elemenata samo ako se nalaze unutar <div> taga.

Naini pozicioniranja
CSS2 preporuka definie model kako elementi mogu biti pozicionirani. Postoje etiri naina za pozicioniranje elemenata na stranici, sa nekoliko komplikujuih faktora.

1.15 Statiko pozicioniranje

Ovaj nain pozicioniranja je jednostavan. Ono zapravo prati prirodan tok elemenata u dokumentu onako kako su oni HTML kodom definisani. Web Web ita 'uzima' HTML fajl, parsira ga u elemente HTML-a, primenjuje stilove koji su definisani i zatim 'rea' elemente na strani onako kako je to naznaeno u kodu. Pozicija koju element, recimo jedan paragraf, zauzima na stranici naziva se statika pozicija. Na primer, ako imamo sledei HTML kod u kome imamo tri paragrafa:
<body> <p class=klasa1> Ovo je prvi paragraf </p> <p class=klasa2> Ovo je drugi paragraf </p> <p class=klasa1> Ovo je trei paragraf </p> </body>

tada je izgled stranice ovakav:

Vidimo da se drugi paragraf pojavljuje iza prvog i ispred treeg paragrafa, ba onako kako smo definisali u HTML kodu. Zbog toga kaemo da drugi paragraf ima statiku poziciju jer ona ne odstupa od pozicije koja je definisana prirodnim tokom dokumenta. Kada se bude objanjavalo relativno pozicioniranje, bie nam potrebno poznavanje statike pozicije i statikog pozicioniranja.

1.16 Apsolutno pozicioniranje

Apsolutnim pozicioniranjem odreujemo na kom mestu e se nai gornji levi ugao nekog elementa u odnosu na element roditelj. Treba zapamtiti da se apsolutno pozicioniranje ne vri u odnosu na dokument i ne treba ga meati sa relativnim pozicioniranjem. Znai ako imamo neki element koji se nalazi u okviru nekog drugog elementa, tada e na element biti pozicioniran u odnosu na taj element. Sa druge strane, ako na element bude direktni potomak <body> taga, tek tada e se taj element apsolutno pozicionirati u odnosu na dokument, jer je dokument njegov element roditelj. Prilikom apsolutnog pozicioniranja element izlazi iz prirodnog toka dokumenta i biva postavljen na mesto koje smo pomou top i left svojstva odredili. Treba znati i to, da kada se vri apsolutno pozicioniranje, element roditelj ne sme imati statiku poziciju, ve mora biti pozicioniran apsolutno ili relativno. Ako nam je ipak potrebno da nam na stranici element roditelj bude u prirodnom toku, moemo ga pozicionirati relativno i podesiti svojstva top i left na 0. Ovime element roditelj zadrava svoj prirodni tok u dokumentu, ali istovremeno omoguuje da drugi elementi budu pozicionirani u odnosu na njegovu poziciju. U sledeem primeru, element 'prvi paragraf' je element roditelj za 'drugi paragraf'. U CSS iskazu smo definisali da su oba elementa pozicionirana apsolutno, i da je gornja strana drugog paragrafa udaljena 12 piksela od gornje strane prvog paragrafa (koji je njegov roditelj), a leva strana udaljena 5 piksela od leve strane prvog paragrafa:

HTML kod kojim se pravi ovakva stranica imao bi sledei izgled:

<body> <p class=klasa1> Ovo je prvi paragraf <p class=klasa2> Ovo je drugi paragraf </p> </p> </body>

pri emu su 'klasa1' i 'klasa2' definisane na sledei nain uz pomo CSS-a:

Table 16
p.klasa1, p.klasa2 { width: 150px; height: 50px; } p.klasa1 { position: absolute; top:0px; left:0px; background-color: #00ccff; } p.klasa2 { position: absolute; top:12px; left:5px; background-color: #0099ff; }

Fiksno pozicioniranje

Fiksno pozicioniranje je veoma blisko sa apsolutnim pozicioniranjem. Kada je element apsolutno pozicioniran, tada je on pozicioniran u odnosu na element koji ga sadri. Kada skrolujete stranicu, tada se element takoe skroluje. Ne bi li bilo dobro kada bismo mogli da pozicioniramo element u odnosu na levu ivicu prozora i time postignemo efekat da, bez obzira kako se stranica skroluje, element ostaje uvek na istom mestu na prozoru? Pogaate, fiksno pozicioniranje obezbeuje upravo ovo.

1.17 Relativno pozicioniranje

Relativno pozicioniranje ima malo nesrean naziv. Relativno u odnosu na ta? Mnogi ljudi dolaze do zakljuka da se relativno pozicioniranje vri u odnosu na element roditelj, a da se apsolutno pozicioniranje vri u odnosu na gornju levu ivicu prozora. Ali, kao to smo ve videli, to nije sluaj. U redu, ta onda znai relativno? Relativno ovde znai da se element pozicionira u odnosu na njegovu statiku poziciju, odnosno u odnosu na poziciju na kojoj se javlja u prirodnom toku stranice. Dakle, kada relativno pozicionirate element kao da govorite Web itau 'Uzmi ovaj element, o Web itau, i premesti ga 10 piksela nie od mesta gde bi trebao da stoji'. Ono sto je vano napomenuti kod relativnog pozicioniranja jeste to da mesto na kome se element prethodno nalazio, pre pozicioniranja, ostaje zauzeto. To znai da prostor u kome je element bio pre pozicioniranja ostaje popunjen kao da je element jo uvek tu bez obzira to je

element pozicioniran na drugom mestu u dokumentu. Relativno pozicioniranje je ilustrovano sledeom slikom:

CSS pozicioniranje nudi veoma moan mehanizam za podeavanje izgleda stranice i razmetaj elemenata na njoj, ali kao to to biva sa svakom monom tehnologijom nekada moe doi do komplikacija. page layout svojstva su: position top left bottom right width min-width max-width z-index visibility overflow float clear

position
Ako elite da pozicionirate element morate pored koordinata da definiete i to na koji nain, odnosno u odnosu na koji element se vri pozicioniranje. Za tu svrhu se koristi svojstvo position.

Mogua svojstva
Elementi mogu biti pozicionirani na etiri naina: statiki, relativno, apsolutno ili fiksno. Vrednost ovog svojstva se postavlja jednom od sledeih kljunih rei: static, relative, absolute i fixed. Naini i vrste pozicioniranja su ranije objanjeni ali emo se ovde kratko podsetiti. Kada se element pozicionira statiki, Web ita e element iscrtati na onom mestu na kome se on pojavio u HTML kodu. U sutini, oco je tradicionalni nain pozicioniranja koji koristi HTML. Kada se element pozicionira relativno, Web ita odreuje poloaj elementa relativno u odnosu na poziciju koju bi element imao kada bi se pozicionirao statiki.

Apsolutnim pozicioniranjem se element postavlja na specificiranu lokaciju koja se odreuje u odnosu na lokaciju gornjeg levog ugla elementa roditelja. Kod fiksnog pozicioniranja element se postavlja fiksno i u odnosu na gornji levi ugao prozora. Aplikacije kao to su DreamWeaver i GoLive kreiraju div tagove sa apsolutnim pozicioniranjem i vrednostima za za svojstva top, left, width i height. To je tako zbog toga to je dugo jedini nain pozicioniranja elemenata na stranici bio pomou div taga. To danas nije sluaj i moe se pozicionirati bilo koji element na stranici.

Podrazumevane vrednosti
Kada nije specificirana, element ima statiku poziciju. Element ne nasleuje svojstvo position od svog roditelja.

top
Svojstvo top specificira mesto gde e gornja stranica elementa biti postavljena. Ne zaboravite da, ako elite da svojstvom top odredite poziciju elementa, morate najpre da dodelite vrednost svojstvu position. Top predstavlja rastojanje od: gornje strane prirodne (statike) pozicije elementa (kod relativnog pozicioniranja) gornje strane elementa roditelja (kod apsolutnog pozicioniranja) vrha prozora (kod fiksnog pozicioniranja)

Negativne vrednosti za ovo svojstvo pomeraju element ka vrhu stranice, dok pozitivne vrednosti pomeraju element ka dnu stranice. Za elemente koji imaju vrednost static za svojstvo position, svojstvo top nema nikakvog efekta.

Mogue vrednosti
Svojstvo top moe dobiti vrednost pomou brojane vrednosti za duinu, procentualne vrednosti ili korienjem kljune rei auto.

Vrednosti za duinu
Kada se za svojstvo top definie brojana vrednost za duinu, tada se poloaj elementa odreuje u zavisnosti od toga koja je vrednot dodeljena svojstvu position.

Procentualne vrednosti
Kada je svojstvo top definisano pomou procentualnih vrednosti, tada se element pozicionira na osnovu vrednosti koja je izraunata kao zadati procenat od visine elementa roditelja.

Podrazumevane vrednosti
Ako nije podeena, podrazumevana vrednost za svojstvo top je auto. Element ne nasleuje svojstvo top od svog roditelja, mada pozicioniranje roditelja moe uticati na element dete.

left

Svojstvo left specificira mesto gde e leva strana elementa biti postavljena. Ne zaboravite da, ako elite da svojstvom left odredite poziciju elementa, morate najpre da dodelite vrednost svojstvu position. Left predstavlja rastojanje od: leve strane prirodne (statike) pozicije elementa (kod relativnog pozicioniranja) leve strane elementa roditelja (kod apsolutnog pozicioniranja) leve strane prozora (kod fiksnog pozicioniranja) Negativne vrednosti za ovo svojstvo pomeraju element levo, dok pozitivne vrednosti pomeraju element desno. Za elemente koji imaju vrednost static za svojstvo position, svojstvo left nema nikakvog efekta.

Mogue vrednosti
Svojstvo left moe dobiti vrednost pomou brojane vrednosti za duinu, procentualne vrednosti ili korienjem kljune rei auto.

Vrednosti za duinu
Kada se za svojstvo left definie brojana vrednost za duinu, tada se poloaj elementa odreuje u zavisnosti od toga koja je vrednost dodeljena svojstvu position.

Procentualne vrednosti
Kada je svojstvo left definisano pomou procentualnih vrednosti, tada se element pozicionira na osnovu vrednosti koja je izraunata kao zadati procenat od irine elementa roditelja.

Podrazumevane vrednosti
Ako nije podeena, podrazumevana vrednost za svojstvo left je auto. Element ne nasleuje svojstvo left od svog roditelja, mada pozicioniranje roditelja moe uticati na element dete.

bottom i right
Ova dva svojstva rade sline stvari kao i prethodna dva opisana; bottom svojstvo definie poloaj donje strane elementa a right svojstvo desne strane elementa. Sva pravila koja vae za svojstva left i top, vae i za ova dva. Treba rei da se sva etiri svojstva nikada ne koriste zajedno, ve je dovoljno koristi jedno od svojstava bottom i top u kombinaciji sa jednim od svojstava left i right.

width
Ovo svojstvo postavlja irinu elementa na stranici.

Mogue vrednosti
Ovo svojstvo moe biti specificirano pomou brojane vrednosti za irinu, procentualne vrednosti ili moe biti postavljeno na auto.

Procentualne vrednosti
Kada je vrednost svojstva width postavljena procentualno, tada se irina elementa odreuje kao dati procenat od irine elementa roditelja.

auto
Vrednost auto postavlja podrazumevanu irinu elementa. To znai da e element biti onoliko irok koilko je dovoljno da se prikae sadraj tog elementa.

Podrazumevane vrednosti
Ako nije postavljena, tada je podrazumevana vrednost za ovo svojstvo auto. Element ne nasleuje vrednost svojstva width od svog roditelja.

height
Ovim svojstvom se postavlja eljena visina elementa. Svojstvo height funkcionie slino kao svojstvo width.

min-width
Ovo svojstvo nam doputa da definiemo najmanju irinu elementa. Ako se irina elementa rauna, i dobije se irina koja je manja od one koju smo odredili u svojstvu min-width, tada se uzima vrednost svojstva min-width.

Mogue vrednosti
Svojstvo min-width moe biti specificirano pomou brojane vrednosti za irinu, procentualne vrednosti ili biti postavljena na none.

Procentualne vednoosti
Kada je svojstvu min-width dodeljena procentualna vrednost, tada se ona sraunava kao procenat irine elementa roditelja.

Podrazumevane vrednosti
Ako nije specificirana, podrazumevana vrednost svojstva min-width je none. Element ne nasleuje svojstvo min-width od elementa roditelja.

max-width
Ovo svojstvo nam doputa da definiemo najveu irinu elementa. Ako se irina elementa rauna, i dobije se irina koja je vea od one koju smo odredili u svojstvu max-width, tada se uzima vrednost svojstva max-width.

Mogue vrednosti
Svojstvo max-width moe biti specificirano pomou brojane vrednosti za irinu, procentualne vrednosti ili biti postavljena na none.

Procentualne vrednoosti
Kada je svojstvu max-width dodeljena procentualna vrednost, tada se ona sraunava kao procenat irine elementa roditelja.

Podrazumevane vrednosti

Ako nije specificirana, podrazumevana vrednost svojstva max-width je none. Element ne nasleuje svojstvo max-width od elementa roditelja.

min-height i max-height
Ova svojstva rade sline stvari kao i svojstva min-width i max-width koja su objanjena. Ovim svojstvima se manipulie visinom elementa, odnosno postavlja najmanja i najvea mogua visina elementa.

z-index
Zbog toga to CSS dozvoljava apsolutno pozicioniranje elemenata na stranici, moramo voditi rauna o situacijama kada se elementi preklapaju. Naime, potrebno nam je da kontroliemo kako e ti elementi biti preklopljeni, odnosno koji e element biti ispod a koji iznad. U tu svrhu CSS je uveo stek redosled po kome svaki element biva postavljen iznad svog prethodnika po pravilima steka.

Mogue vrednosti
Vrednost svojstva z-index moe biti specificirana kao integer ili kao kljuna re auto.

Integer vrednost
Kada se vrednost svojstva z-index specificira za dva elementa koji imaju istog roditelja, tada je element sa veim z indeksom ispred elementa koji ima nii z-index. Ovo svojstvo nije primenljivo na celoj stranici ve samo na sadrajnoj hijerarhiji elementa. To znai da je zindex elementa roditelja vaan pri odreivanju koji element prekriva a koji biva prekriven. Da pogledamo primer. Pretpostaviemo da imamo apsolutno pozicioniranu sliku sa z-indeksom 10 u paragrafu koji ima z-index 1 i sliku sa z-indeksom 2 unutar drugog paragrafa koji ima indeks 5. Ako se dve slike preklapaju, koja je iznad? U ovom sluaju je to slika sa niim z-indeksom, zato to njegov paragraf roditelj ima vei z-index. Dakle, paragraf sa veim z-indeksom prekriva onog sa sa manjim z-indeksom, i kao posledica slika sa niim z-indeksom prekriva sliku sa viim indeksom. Zakljuujemo da u ovom sluaju glavnu ulogu igraju paragrafi, na osnovu ijiih z-indeksa se odreuje redosled, a da su z-indeksi sadraja ta dva paragrafa nebitni.

auto
Kada je z-index svojstvo podeeno na auto, tada Web ita na osnovu relativno komplikovanog skupa pravila utvruje koji element e biti iznad a koji ispod.

Podrazumevane vrednosti
Kada z-index nije podeen, podrazumevana vrednost ovog svojstva je auto. Element ne nasleuje vrednost za z-index svojstvo.

visibility
Mada na prvi pogled skrivanje elemenata stranice zvui besmisleno, u kombinaciji sa JavaScript jezikom prikazivanje i skrivanje elementa kada korisnik klikne ili pomeri mia preko nekog elementa, moe biti veoma mono orue. Svojstvo visibility omoguuje da se element uini vidljivim ili nevidljivim.

Mogue vrednosti
Ovo svojstvo moe dobiti vrednost izraenu jednom od sledeih kljunih rei: visible, hidden i inherit. Za prve dve kljune rei je jasno ta se njima postie. Kljunom reju inherit se nareuje elementu da nasledi vidljivost od svog elementa roditelja.

Podrazumevane vrednosti
Ako nije podeena, podrazumevana vrednost svojstva visibility je inherit.

Saveti i sugestije
Element koji ima svojstvo visibility podeeno na hidden i dalje utie na raspored elemenata na stranici. Elementi stranice su i dalje postavljeni kao da je element vidljiv. Ako ipak elite da se elementi na stranici rasporeuju kao da elementa nema na stranici, onda treba koristiti svojstvo display i dodeliti mu vrednosti none.

overflow
Zbog toga to autor stranice pomou atributa width i height moe da postavlja irinu i visinu elementa na stranici, moe nastati situacija gde element nije dovoljno veliki da prihvati ceo sadraj koji bi trebalo da se prikae. ta radimo kada se ovo desi? Za slike je tredicionalno da bivaju smanjene na veliinu koja odgovara dimenzijama elementa kontejnera. CSS je predstavio overflow svojstvo kojim se moe Web itau dati instrukcija kako da prikae element kada njegov sadraj ne moe da stane u okvire elementa.

Mogue vrednosti
Svojstvo overflow moe uzeti vrednosti koje su opisane kljunim reima: visible, hidden, scroll i auto. Vrednost visible znai da Web ita treba da uvea dimenzije elementa kako bi ceo sadraj mogao da se priake. Vrednost hidden znai da Web ita treba da odsee deo sadraja koji ne moe da se prikae. Vrednost scroll znai da Web ita treba da ubaci scrollbar na element bilo da je sadraj elementa vei od dimenzija elementa ili nije. Vrednost auto znai da Web ita treba da doda horiontalni ili vertikalni scrollbar kada se za time javi potreba, odnosno samo onda kada sadraj prevazilazi gabarite elementa kontejnera.

Podrazumevane vrednosti
Ako nije definisana, podrazumevana vrednost za ovo svojstvo je visible. Ovo svojstvo se ne nasleuje.

float
Zadatak svojstva float je da 'uzme' element, izvede ga iz prirodnog toka i postavi ga desno ili levo od nekog drugog elementa sa kojim ima istog roditelja.

Mogue vrednosti
Vrednost svojstva float moe biti definisano jednom od tri kljune rei: none, left, right. Vrednost none znai da element ne menja svoj prirodni tok u dokumentu. Vrednosti left znai da je element izmeten iz svog prirodnog toka u dokumentu i da je tretiran kao blok element sa leve strane ostatka sadraja elementa roditelja. Vrednosti right znai da je element izmeten iz svog prirodnog toka u dokumentu i da je tretiran kao blok element sa desne strane ostatka sadraja elementa roditelja.

Podrazumevane vrednosti
Podrazumevana vrednost za ovo svojstvo je none. Element ne nasleuje vrednost za svojstvo float od svog roditelja.

clear
Svojstvo clear moe da se koristi u konjikciji sa svojstvom float kako bi se definisalo da li, i sa koje strane neki element dozvoljava da drugi element bude priljubljen uz njega. Moe se definisati da li element dozvoljava da drugi element bude sa leve, desne strane ili sa svih strana. Kada neki element ne dozvoljava priljubljivanje uz njega sa odreene strane i ako se desi da se drugi element postavi ba sa te strane, tada se taj element pojavljuje ispod elementa koji je zabranio prstup.

Mogue vrednosti
Svojstvo clear moe uzeti jednu od sledeih vrednosti: none, left, right, both. Vrednost none znai da element dozvoljava pristup sa bilo koje strane. Vrednost left znai da element ne dozvoljava pristup sa leve strane. Vrednost right znai da element ne dozvoljava pristup sa desne strane. Vrednost both znai da element ne dozvoljava pristup ni sa jedne strane.

Podrazumevane vrednosti
Ako nije specificirana, podrazumevana vrednost za svojstvo clear je none. Element ne nasleuje vrednost svojstva clear od svog roditelja.

Element type svojstva

U HTML-u postoji nekoliko tipova elemenata. Glavni tipovi su inline, block i list item. Podrazumevano, svaki element je jednog od ovih tipova. Na primer, paragraf je blok element, dok je link inline element. Sa CSS-om je mogue redefinisati display tip elementa, odnosno

nain na koji e ga broewser tretirati da li kao blok element ili recimo inline. Tako, ako elite, moete podesiti da se paragraf prikazuje kao inline element, a link kao blok element. Element type svojstva su: display white-space list-style-type list-style-image list-style-position list-style

CSS2 je predstavio dodatna svojstva kojima se kontrolie nain na koji se tabele i njeni elementi iscrtavaju: border-collapse border-spacing caption-side empty-cells table-layout

display
Svojstvo display odreuje kako e element biti iscrtan na stranici.

Mogue vrednosti
Osnovne kljune rei kojima se dodeljuje vrednost svojstvu display su: none block inline list-item inline-block run-in Vrednosti block, inline, ili list-item znae da e element imati dati diplay tip, bez obzira na podrazumevani tip koji je HTML specifikacijom dodeljen elementu. Kao to je reeno malopre, u mogunosti smo da paragraf prikaemo kao inline element ili link prikaemo kao blok. Vrednost inline-block se malo razlikuje. To znai da e element biti iscrtan kao blok, ali e imati tok kao da je inline element. Vrednost run-in kreira ili blok ili inline element u zavisnosti od konteksta. Vrednost none znai da element nee biti vidljiv i nee imati nikakav uticaj na raspored elemenata na stranici. Kada se svojstvo visibility podesi na hidden, tada se taj element takoe ne vidi na stranici ali mesto na kome e se pojaviti kada se vrednost svojstva visibility podesi na visible ostaje rezervisano za taj element i za vreme kada on nije vidljiv. Odnosno, takav element i dalje ostaje u prirodnom toku dokumenta.

CSS2 je predstavio nekoliko novih vrednosti za prikaz elemenata koje su u vezi sa tabelama. U CSS2 je mogue bilo koji element (recimo paragraf) prikazati kao tabelu ili deo tabele. Sa HTML-om ovo moda nema mnogo smisla (jer u HTML-u ve postoji tag <table>, kolone, celije...). Meutim, drugi jezici, kao to je XML nemaju takve elemente. U takvim jezicima, CSS tabele postaju apsolutno neophodne za prikaz tabelarnih podataka. U ove vrednosti spadaju: inline-table, table-column-group, table-column, table-row-group, table-header-group, table-footer-group, table-row, table-caption...

Podrazumevane vrednosti
Iako je teoretski podrazumevana vrednost za prikaz inline, Web itai u sutini tretiraju element onako kako je to u HTML specifikaciji preporueno. Dakle, ako Web ita naie na paragraf, on e ga iscrtati kao blok element iako je podrazumevana vrednost inline. Element ne nasleuje vrednost za ovo svojstvo od roditelja.

Saveti i sugestije
Web itaima je dozvoljeno da ignoriu display svojstvo.

white-space
Svojstvo white-space se primenjuje samo na blok elemente. Njime se specificira ta Web itaa treba da rade sa dodatnim praznim prostorom koji se pojavi u nekom elementu (kada se pritisne taster tab, enter ili vietruki pritisak tastera space bar). Znamo da se u HTML-u sav dodatni prazan prostor svodi na prazan prostor koji se dobija jednostrukim pritiskom tastera space bar. Pomou svojstva white-space se, dakle moe kontrolisati nain na koji Web ita tretira prazan prostor u elementu.

Mogue vrednosti
Ovo svojstvo moe uzeti jednu od sledeih kljunih rei kao svoju vrednost: normal, pre i nowrap. Vrednost normal znai da e prazan prostor biti tretiran na tradicionalan nain dakle ignorisae se sav dodatni prazan prostor. Vrednosti pre kazuje Web itau da zadri prazan prostor koji se pojavljuje u elementu. Ovo je ekvivalentno korienju taga <pre> u HTML-u. Vrednost nowrap znai da e sadraj prei u novi red samo onda kada se eksplicitno navede kraj linije pomou taga br. Inae, sadraj nee prelaziti u nov red zato to jo uvek nije dostigao kraj horizontalne linije strane.

Podrazumevane vrednosti
Ako nije definisana, podrazumevana vrednost za svojstvo white-space je normal. Element nasleuje svojstvo white-space od svog roditelja.

Vrednosti Glavni tipovi vrednosti koje svojstva mogu da uzimaju su:

length percentage color

 url keyword shape Takoe, svojstvu se moe dodeliti i vrednost inherit kojom se govori Web itau da to svojstvo treba da bude nasleeno od elementa roditelja.