SKRIPTA ZA VEŽBE IZ PREDMETA

ELEKTRONSKO POSLOVANJE

HTML I CSS

Beograd 2009.

SADRŽAJ

I DEO.............................................................................................................................................5

1 Uvod......................................................................................................................................5

2 Internet servisi.......................................................................................................................5

2.1 World Wide Web.............................................................................................................6

2.1.1 Arhitektura WWW-a.................................................................................................6

2.1.2 Statički i dinamički web............................................................................................7

3 Priprema okruženja za izradu HTML sajtova.........................................................................9

3.1 Primer organizacije sajta po folderima..........................................................................12

II DEO..........................................................................................................................................13

4 Uvod u HTML.......................................................................................................................13

4.1 Kreiranje HTML dokumenta..........................................................................................13

5 Zaglavlja u HTML-u (Headings)...........................................................................................15

6 Razdvajanje Paragrafa........................................................................................................16

6.1 Drugi tipovi break-ova...................................................................................................16

7 Rad sa stilovima..................................................................................................................17

8 Rad sa listama.....................................................................................................................18

8.1 Neuređene liste.............................................................................................................18

8.2 Uređene liste.................................................................................................................19

8.3 Umetnute liste...............................................................................................................19

9 HTML tagovi za ubacivanje slika.........................................................................................21

9.1 Centriranje teksta i Inline grafike...................................................................................22

9.2 Atributi Height (Visine) i Width (Širine)..........................................................................22

10 Linkovi..................................................................................................................................23

10.1 Link za lokalne fajlove...............................................................................................23

10.2 Link za grafiku...........................................................................................................24

10.3 Link ka drugim folderima...........................................................................................24

10.4 Anchor linkovi ka folderima višeg nivoa.....................................................................25

10.5 Anchor link ka stranici na Internetu...........................................................................25

10.6 Linkovi i adrese..........................................................................................................26

10.6.1 Kako rade linkovi u pretraživaču............................................................................26

10.6.2 Apsolutne ili relativne putanje................................................................................26

10.6.3 Atribut target..........................................................................................................27

11 Heksadecimalne oznake i boje............................................................................................28

11.1 Jednobojne pozadine (Solid Color Backgrounds).....................................................29

11.2 Teksturne pozadine...................................................................................................30

12 META tagovi........................................................................................................................31

12.1 Meta tag za automatski prelazak na drugu web stranicu..........................................31

12.2 Meta tagovi za opis....................................................................................................32

13 Kreiranje tabela....................................................................................................................32

13.1 Redovi i Kolone.........................................................................................................33

13.2 Tabela sa podacima..................................................................................................34

14 HTML forme.........................................................................................................................37

14.1 Text Input Elementi (type="text")...............................................................................37

14.2 Password Input Elementi (type="password").............................................................38

14.3 Text Area Input Elementi (type="textarea")...............................................................39

14.4 Radio buttons (type="radio")......................................................................................39

14.5 Check Boxes (type="checkbox")...............................................................................40

14.6 Menu Select (type="select")......................................................................................41

14.7 Submit and Reset (type="submit" and type="reset").................................................41

III DEO.........................................................................................................................................46

15 CSS.....................................................................................................................................46

15.1 Šta je to CSS?...........................................................................................................46

15.2 Načini primene stilova...............................................................................................47

15.2.1 CSS kao eksterni fajl..............................................................................................47

15.2.2 Interni stilovi...........................................................................................................48

15.2.3 Inline.......................................................................................................................48

15.2.4 Alternativne liste stilova.........................................................................................49

16 CSS Sintaksa.......................................................................................................................49

17 Iskazi - vrste.........................................................................................................................51

18 Selektori – Uvod..................................................................................................................52

18.1 Tipovi selektora.........................................................................................................52

18.2 Type selektori............................................................................................................53

18.3 Tipovi HTML elemenata............................................................................................53

18.4 Class selektori...........................................................................................................54

18.4.1 Opšti class selektori...............................................................................................54

18.4.2 Class selektori........................................................................................................54

18.5 ID selektori.................................................................................................................55

18.5.1 Opšti ID selektori....................................................................................................55

18.5.2 ID selektori.............................................................................................................56

18.6 Descendant (potomak) selektori................................................................................56

18.7 Link pseudo class selectors.......................................................................................58

19 Svojstva (Properties)...........................................................................................................60

19.1 Text style svojstva.....................................................................................................60

19.2 Text layout svojstva...................................................................................................64

19.3 Background svojstva.................................................................................................67

19.4 Border svojstva..........................................................................................................70

19.5 Margin svojstva..........................................................................................................73

19.6 Padding svojstva.......................................................................................................74

19.7 . Page layout svojstva................................................................................................74

19.7.1 Uvod u pozicioniranje elemenata sa CSS-om.......................................................74

19.7.2 O slojevima (layers)...............................................................................................75

19.7.3 <div>......................................................................................................................76

19.7.4 Načini pozicioniranja..............................................................................................76

19.8 Element type svojstva................................................................................................84

I DEO

1 Uvod

HTML, HyperText Markup Language, je standarizovani jezik koji se koristi pri strukturiranju tekstova, medija i ugrađenih objekata u web stranice i elektronsku poštu. Kao modifikovanu i pojednostavljenu verziju SGML jezika, HTML standarizuje i održava World Wide Web Consortium (W3C). Originalnu verziju HTML-a kreirao je Tim Berners-Lee, a prva zvanična verzija je izašla juna 1993 godine.

HTML jezik je sačinjen od običnog teksta i tagova. Iako se HTML znakovi (tags) često nazivaju kodom, tehnički HTML nije kod jer računarski kod su instrukcije koje od računara traže da izvrši određenu operaciju. Svrha HTML znakova je da se se struktura dokumenta "označi" tako da bi korisnikov agent (user agent), tj. internet pretraživač mogao da prepozna strukturu dokumenta i ispravno je prikaže u prozoru internet pretraževača kojeg korisnik koristi.

Za dodatno modifikovanje web stranica koriste se sledeće tehnologije:

CSS ili Cascading Style Sheets za izgled i položaj prezentacije Skriptni jezici (Javascript, VBScript) za omogućavanje dinamičnosti i interaktivnosti na

web prezentacijama, DOM ili Document Object Model, koji označava vezu između skripte i elementa na

stranici Gornji dodaci, u paketu sa HTML jezikom, ponekad se nazivaju DHTML ili Dinamični HTML.

2 Internet servisi

Sadržaj i uslugama koje Internet nudi nazivaju se servisi Interneta. Svi servisi Interneta rade po klijent-server konceptu. Suština tog koncepta je da se pomoću programa koji se nalazi na računaru korisnika mreže pristupa željenim podacima koji su smešteni na serveru na nekoj lokaciji svetske mreže.

Servisi Interneta se obično dele na:

Osnovne – servisi koji postoje na svakom računaru koji je na mreži; Javne – servisi koji se instaliraju na značajnije servere na mreži obezbeđujući lak pristup

podacima; Posebne – servisi namenjeni zadovoljenju specifičnih želja korisnika.

Glavni predstavnik osnovnog servisa je e-mail (elektronska pošta). Najznačajniji javni servis je WWW. U posebne servise spadaju servisi za pretraživanje, sigurnosni servisi, servisi namenjeni administratorima servera i mreža, i brojni drugi servisi.

2.1 World Wide Web

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 istraživanja u Švajcarskoj (CERN). U početku 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 grafičkim korisničkim interfejsom koji je prikazivao boju, sliku i animaciju. Godinu dana kasnije, Andersen i Džim Klark su osnovali Netscape, koji je kreirao prvi komercijalni veb brauzer - Internet explorer, koji je postao dominantan na tržištu.

WWW je sistem sa univerzalno prihvaćenim standardima za skladištenje, pronalaženje, formiranje i prezentaciju informacija u klijent-server konceptu. Veb stranice se zasnivaju na standardnom HTML (Hypertext Markup Language) jeziku koji formatira dokumente i pravi dinamičke linkove ka drugim dokumentima i slikama smeštenim na istim ili drugim računarima.

HTTP (Hypertext Transfer Protocol) je komunikacioni protokol koji omogućava saobraćaj veb stranica u mreži. Kompletna putanja do zahtevanih veb stranica naziva se URL (Uniform Resource Locator).

Za realizaciju WWW servisa važan je veb server. Veb server je softver za lociranje i skladištenje veb stranica. On locira veb stranice koje korisnik računara zahteva i dostavlja ih.

2.1.1 Arhitektura WWW-a

WWW predstavlja mrežu dokumenata koji su međusobno povezani; skup protokola koji definišu kako sistem radi i prenosi podatke i softver koji omogućuje rad ove koncepcije. Ono po čemu se WWW razlikuje od drugih servisa na Internetu je njegovo jednostavno korišćenje. WWW omogućava pretraživanje dokumenata i “kretanje“, kako po različitim dokumentima jednog računara tako i po dokumentima različitih računara, po Internetu, korišćenjem jednostavnih komandi. Svakim pritiskom na taster miša 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 podvučenu reč ili frazu i korisniku će biti prikazan linkovani dokument.

WWW je jedan od najvažnijih servisa Interneta čija upotreba omogućuje:

pretraživanje, pronalaženje i čitanje dokumenata na različitim računarima; korišćenje 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 omogućuje, putem linkova koje nudi, prelaz sa jednog na drugi dokument, koji može biti lociran na istom ili udaljenom računaru. Pozicioniranjem na izabrani link i jednostavnim pritiskom na taster miša prelazi se na drugi sajt, pomoću HTTP-a (Hyper Text Transfer

Protocol). Pretraga je omogućena softverom zvanim veb brauzer. Klijent postavlja zahtev, šalje ga veb serveru koji pomoću CGI-a (Common Gateway Interface), preuzima različite aplikacije. Arhitekturu WWW-a čine tri velika segmenta:

veb klijent – veb brauzer, tj. aplikacija instalirana na računaru-klijentu koja se koristi za pristup stranicama na vebu (Internet explorer, Mozzila, Opera, Safari, i dr.)

veb server – softver instaliran na serverskom računaru (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.

Slika 1 Opšti koncept arhitekture veba

2.1.2 Statički i dinamički web

Web je u početku svoga razvoja postojao isključivo kao statički, tj. nisu postojale tehnologije koje bi uzele u obzir informacije koje su pristigle od korisnika i na osnovu njih generisale odgovor. Mogućnosti statičkog Weba očigledno nisu bile naročito velike: HTML stranice jesu nosilac informacija, ali onih koje se ne menjaju zavisno od konteksta – te informacije su uvek iste. Očigledno je bilo neophodno da se dođe do određenog stepena programibilnosti na vebu, tj. da se razviju tehnologije koje će omogućiti veći stepen interaktivnosti od statičkog veba.

Pristup statičkim stranicama na veb teče po sledećem redosledu (Error: Reference source notfound):

1. Autor veb sajta kreira statičku veb stranicu i čuva je u određenom folderu na serveru2. Klijent – veb brauzer – daje HTTP zahtev za datom stranicom. Zahtev se zadaje kada

korisnik računara unese odgovarajući URL u veb brauzer.3. Veb server prihvata zahtev klijenta i locira traženu html stranicu4. Tražena stranica se vraća veb čitaču koji je prikazuje korisniku.

Izmena statičkih veb sajtova podrazumeva izmenu pojedinačnih stranica veb sajta, što nije ekonomično ukoliko je potrbno često ažurirati veb sajt. U tom slučaju, mnogo je efikasnije primeniti neku od dinamičkih tehnologija za kreiranje veb sajtova.

Slika 2 Statičke veb stranice i način pristupa

Dinamičke Web stranice se zasnivaju na principu da se HTML kod ne stvara sve dok korisnik ne poželi da vidi Web stranicu. To dinamičko stvaranje stranica omogućuje da one budu prilagođene korisnikovim zahtevima, da zavise od prethodnih akcija korisnika, od vremena i mesta kad je pristupio lokaciji, od njegovog identiteta i specifičnih potreba.

Pristup dinamičkim veb stranicama teče po sledećem redosledu (Error: Reference source notfound):

1. Veb čitač šalje HTTP zahtev veb serveru. HTTP zahtev sadrži URL sa traženom stranicom.

2. Veb server prihvata klijentski zahtev i aktivira aplikativni server. Aplikativni server je softver koji može i ne mora biti instaliran na istom računaru kao i veb server.

3. Na osnovu informacija primljenih u klijentskom zahtevu, aplikativni server prosleđuje upit ka serveru baze podataka.

4. Na osnovu dobijenog zahteva, na serveru baze podataka izvršava se odgovarajući upit. Rezultat obrade šalje se nazad do aplikativnog servera

5. Aplikativni server formira HTML stranicu u koju ugrađuje informacije dobijene iz baze podataka. HTML stranica prosleđuje se veb serveru.

6. Veb server šalje HTML stranicu do klijentskog računara.

Slika 3 Dinamičke veb stranice i način pristupa

3 Priprema okruženja za izradu HTML sajtova

WAMP je paket nezavisno kreiranih programa instaliranih na računaru koji koriste Microsoft Windows operativni sistem. Interakcija ovih programa omogućava korišćenje dinamičkih 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 omogućava korisnicima da web browser-ima, kao što su Internet Explorer ili Firefox pristupe sadržaju na web serveru.

MySQL je sistem za upravljanje bazama podataka. PHP je skript jezika serverske strane koji može da manipuliše informacijama koje su sadržane u bazi i generiše web strane iznova svaki put kada se element sadržaja zahteva iz browser-a. Ostali programi mogu takođe biti uključeni u

pakete, kao što je phpMyAdmin koji omogućava grafički interfejs za pristup MySQL-u, ili neke druge skript jezike, kao štu su Python ili Perl.Za instalaciju Wamp servera potrebno je pokrenuti instalacioni fajl 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) pojaviće se ikonica koja predstavlja WAMP server. Kada kliknete na tu ikonicu pojaviće se meni sa slike 5.

Slika 5 Opcije koje nudi WAMP server

Levim klikom na nju može se pristupiti localhost-u, PHP MyAdmin-u, SQLite Manager-u. Uz pomoć www directory može 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 moguće je dobiti informaciju o verziji koja se koristi. Quick Admin omogućava pokretanje, stopiranje i ponovno startovanje svih servisa. Klikom na localhost (127.0.0.1) dobiće 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 sačuvani sajtovi će biti vidljivi kao folderi u odeljku Your Projects.

Slika 6 Wamp Homepage

Klikom na phpMyAdmin prikazaće se slika 7. Ovo nam omogućava pristup MySQL bazi podataka.

Slika 7 Prikaz phpMyAdmin-a

3.1 Primer organizacije sajta po folderima

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

Slika 8 Organizacija foldera

II DEO

4 Uvod u HTML

Kada web browser prikaže stranicu ona se učitava iz jednostavnog tekstualnog fajla i sastoji iz specijalnih kodova ili “tag-ova” koji su označeni sa < i > znakovima.

Osnovni format za HTML tag je: <tag_name>string of text</tag_name>

Na primer, naslov za sekciju može koristiti header tag: <h3>Sta su HTML tagovi ?</h3>

Ovaj tag govori web browser-u da prikaže tekst Sta su HTML tagovi ? u stilu header-a level 3. Važno je napomenuti da krajnji ending tag, </tag_name> sadrži “/” znak kose crte. Ova kosa crta “/” govori web browser-u da stopira tag-ovanje teksta. Ako se kosa crta izostavi, web browser će nastaviti tag na ostatku teksta u dokumentu, praveći neželjene rezultate. Ukoliko postoji štamparska greška u HTML-u, stanica će se prikazivati, ali ne onako kako je zamišljeno.

Radni prostor za kreiranje HTML strana čine tekst editor (Notepad, Wordpad i sl.) i web browser u kome se stranice pregledaju. Za kreiranje HTML stranica mogu se koristiti i napredni HTML editori kao što su Dreamweaver ili Kompozer. Microsoft Word nije pogodan za kreiranje HTML stranica, iako postoji opcija za čuvanje fajla u html formatu.

4.1 Kreiranje HTML dokumenta

Svaki HTML dokument mora početi tagom <html> i završiti se tagom </html>. HTML dokument sadrži uobičajeno dva različita dela, head i body. Head sadrži informacije o dokumentu koje se ne prikazuju na ekranu. Body sadrži 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 tehnički zahtevana, ali je kod koji govori browser-u koja je verzija HTML tekuće stranica koja se piše. Potrebno je okruži ceo HTML sadržaj sa <html>...</html> tagovima.

Takođe, u primeru postoji i tag za komentar: <!-- komentar -->. Tekst između tag-ova se ne pokazuje na web stranici ali taj tekst služi za informisanje pri pregledanju izvornog HTML koda.

Slede koraci koji se koriste za kreiranje HTML fajla.

Korak 1 Ako već nije otvoren, pokrenite tekst editor.

Korak 2 Unesite sledeći 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 koristićete Internet da prikupljate informacije o FON-u, a potom ćete napisati izveštaj na osnovu vaših rezultata.</body></html>

<title> tag je korišćen da jedinstveno identifikuje svaki dokument i takođe prikaže naslov na title bar-u prozora browser-a.

Korak 3 Sačuvajte dokument kao fajl koga će te nazvati “fon.html” i sačuvajte ga na radnoj površiniu folderu/direktorijumu koji ste već podesili.

Korak 4 Vratite se u prozor web browser-a koji ste koristili kao vaš radni prostor “work space”.

Korak 5 Izaberite Open File... sa File menija i pronađite kreirani dokument.

Trebalo bi da sada vidite u title bar-u radne površine prozora tekst “FON Web” i u web stranici ispod, jedna rečenica od <body> teksta koji ste napisali, “ U ovoj lekciji...”

Ukoliko se promeni izvorni kod HTML dokumenta, u web browseru je potrebno osvežiti (refresh) stranu da bi se izmenjeni fajl učiotao.

5 Zaglavlja u HTML-u (Headings)

Zaglavlja se u HTML-u kreiraju tako što se delovi teksta okruže 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 označava veličinu zaglavlja. Evo i nekih primera sa različitim veličinama zaglavlja:

Slika 9 Veličine zaglavlja

Nivoi zaglavlja su rangirani od nivoa 1 (najvažniji) do nivoa 6 (najmanje važan).

Smeštanje HTML zaglavlja u dokument:

Korak 1 Otvorite HTML tekst fajl kreiran u prethodnom primeru.

Korak 2 Prvo ćemo koristiti tag da prikažemo na ekranu naslov kao najveće zaglavlje, <H1>. Unesite sledeće iznad postojećeg body teksta tj. posle </head><body> tag-va:

<h1>FON Web</h1>

Korak 3 Ispod teksta koji ste upravo uneli, kreirajte drugo zaglavlje za buduće delove vaše FON Web stranice.

Unesite sledeća zaglavja unutar body-ja vaše web stranice: <h2>O fakultetu</h2><h2>Delatnost fakulteta</h2><h2>Smerofi na FON-u</h2><h3>informacioni sistemi i tehnologije</h3><h3>menadžmet</h3><h3>upravljanje kvalitetom</h3><h3>industrijsko inženjerstvo</h3><h4>Vesti</h4>

Korak 4 Sačuvajte promene u vašem tekst editoru.

Korak 5 Vratite se u web browser, osvežite stranicu.

6 Razdvajanje Paragrafa

HTML kod za paragraf break je <p> i </p>.

Korak 1. Otvorite html iz prethodnog fajl u tekstualnom editoru.

Korak 2. Pomerite rečenicu ( Fakultet...) tako da je ona iznad O fakultetu zaglavlja. Posle ovoga dodajte sledeći tekst iznad <h2> O fakultetu </h2> zaglavlja:

Fakultet organizacionih nauka je visokoobrazovna institucija. Član je beogradskog univerziteta. Sedište fakuleta je u ulici Jove Ilića 154.

Korak 3. Sačuvajte promene u text editoru.

Korak 4. Vratite se u vaš web browser, osvežite stranicu i pogledajte promene.

Korak 5. Vratite se u HTML dokument u text editor. Posle druge rečenice ispod unesemo <h2> O fakultetu </h2>, potom unesemo paragraph tagove <p> i </p>

Ovaj deo bi trebao sada da izgleda ovako:

<h2> O fakultetu </h2>Fakultet organizacionih nauka je visokoobrazovna institucija. Član je beogradskog univerziteta. <p>Sedište fakuleta je u ulici Jove Ilića 154.</p>

Korak 6. Sačuvajte promene u text editoru i pogledajte novi fajl u browseru.

6.1 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 pomoći da razdvojimo otvorene rečenice lekcije sa drugih delova koji slede.

I na kraju konačno, sledi <br> tag koji forsira tekst u novu liniju kao <p> tag, ali bez ubacivanje blank linije. Uporedimo različitosti između upotrebe <br> i <p> u sledeća dva primera u tabeli 1:

Table 1 Mogućnosti paragraf tipova

HTML kod Rezultat u browser-u

U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraftagova.<p>Takodje...<p>otkricete i razlicite izvanrednemogucosti 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.

U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraftagova.<p>Takodje...<br>otkricete i razlicite izvanrednemogucosti <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 može biti korišćen za različit raspored stila.

7 Rad sa stilovima

Baš kao word procesor, HTML može preneti web browser-u da prikaže neke delove teksta u Italic ili Bold stilu ili čak u kombinaciji.

HTML nudi nekoliko tag-ova za dodavanje stila vašem tekstu (tabela 2).

Table 2 Tag-ovi za dodavanje stila

HTML kod Rezultat u browser-u<b>Ovo je Bold...</b>

<i> Ovo je Italic...</i> <tt> Ovo je Typewriter...</tt>

Ovo je Bold...

Ovo je Italic...

Ovo je Typewriter...<i><b>Ovo je Bold ANDItalic</b></i>

<b><i>Ovo Je Takodje</i></b>

Ovo je Bold AND Italic

Ovo Je Takodje

<h2><i>Novi</i> i <tt>Unapredjeni!</tt></h2>

Novi i Unapredjeni!

Pratite sledeće korake da dodate style tag-ove u HTML dokument:

Korak 1. Otvorite HTML dokument u text editoru.

Korak 2. Pronađite reč “Fakultet” u prvoj rečenici. Promenićemo je u bold-u da je naznačimo kao važnu reč. Unesite tag-ove da bi se ova reč pojavila kao bold tekst:

<b>Fakultet</b>

Korak 3. Sada ćemo modifikovati drugi paragraf sa bold i italic tag-ovima da naglasimo reči. Unesite <b>...</b> i <i>...</i> tag-ove oko reči beogradskog univerziteta tako da ovaj deo izgleda ovako:

<p>Fakultet organizacionih nauka je visokoobrazovna institucija. Član je <b><i> beogradskog univerziteta. </i></b> Sedište fakuleta je u ulici Jove Ilića 154.

Korak 4. Konačno, koristili smo typewriter tag koji označava posebnu reč. Iznad Delatnost fakulteta zaglavlja, unesite sledeće:

Delatnost fakulteta, je <tt>obazovno-naučni rad</tt> uključujući i srodne delatnosti.

Sačuvajte u text editoru i ponovo je učitajte vaš web browser.

8 Rad sa listama

8.1 Neuređene liste

Neuređene liste ili <ul> .. </ul> tag-ovi, su one koje se pojavljuju kao podaci sa “bulet” oznakom ili oznakama na početku. Bullet oznaka zavisi od posebne verzije vašeg web browser-a i fonta specifikovanog za prikazivanje normalnog teksta.

Evo primera neuređene 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 označava početak i kraj liste, i <li> označava svaku stavku liste.

8.2 Uređene liste

Uređene liste su one gde browser numeriše svaku sukcesivnu listu podataka tako što počinje sa “1”. Primetite jedinu promenu ul tag-a u ol tag. Evo jednog primer

A ovo je HTML format:

<b>SMEROVI:</b><ol><li>IT<li> MEN<li> UK<li> OM</ol>

8.3 Umetnute liste

Uređene i neuređene liste mogu imati različite nivoe; svaka će biti ubačena skladno u vaš web browser. Ovde je dat primer jedne neuređene liste sa podnivoima drugih lista:

Izgled u browser-u

Izgled u browser-u

SMEROVI: 1. IT 2. MEN 3. UK 4. OM

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>

Ne samo da možete mešati uređene liste unutar uređenih, već možete takođe da mešate i unosite različite tipove listi. Recimo, HTML počinje da izgleda veoma ružno, ali gledajte kako liste u potpunosti sadrže druge liste.

Npr., ova uređena lista sadrži umetnutu neuređenu listu:

Izgled u browser-uKombinovana 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 postiže 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.

9 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 smešten u istom direktorijumu/fajl-u gde je smešten i HTML dokument. “Inline” znači da će web browser prikazati sliku između 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">

9.1 Centriranje teksta i Inline grafike

Sa atributom u <img...> tag-u,  takođe se može regulisati poravnavanje susednog teksta sa linijom slike. Atribut “align” dodat ispred <img> tag-a može proizvesti sledeće 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 razvući WWW browser window i videti šta se dešava). Postavljanje “Inline” Image u HTML Dokument

Korak 1 Kreirajte folder pod nazivom HTML Vežbe

Korak 2 U ovom folderu sačuvajte sliku logo.jpg (desni klik, Save Picture As) i sliku fon.jpg

Korak 3 U istom folderu, kreirajte HTML fajl u unesite sledeći kod:

<html><h1 align="center"><strong>FAKULTET</strong></h1><p align="center"><img src="logo.jpg"></p><p align="center">Ovo je zvanični logo predmeta na fakultetu.</p><p align="center"> Fakultet datira od 1969 godine. </p><p align="center"><img src="fon.jpg"> </p></html>

Sačuvajte fajl i pogledajte kako izgeda u browser-u.

9.2 Atributi Height (Visine) i Width (Širine)

Druga opcija koju mogu sadržati <img...> tag-ovi su dva atributa koja daju dimenzije slike u pikselima. Standardno, web browser će utvrditi ove dimenzije na osnovu slike koju učitava; učitavanje slike može biti brže ukoliko se naznače ove veličine u HTML-u. Format koji sadrži ovu opciju izgleda upravo ovako:

<img src="filename.gif" width=X height=Y >

gde x označava širinu, a y visinu slike u pikselima.

Napomena: Poredak atributa unutar <img> tag-a  nije bitan.

Često se zapitamo da li možemo da promenimo dimenzije slike unošenjem drugih veličina od trenutne u kojoj se slika nalazi? Odgovor na ovo pitanje je pozitivan, ali rezultati mogu biti neželjeni. Uneti veće brojeve (da bi slika bila veća) rezultat bi bio "blocky" picture. Ponekad ovo može biti koristan efekat na slikama sa velikim površinama obojenim punom bojom.  Ukoliko se pak unesu manji brojevi ( da bi slika bila manja ) rezultat bi mogao biti u vidu iskrivljene slike. Takođe, puna veličina slike mora biti download-ovana, tako da nema prave uštede u  vremenu potrebnom za download slike. Svaki re-sizing slike zahteva extra "work" web browser-a da bi rekalkulisao page layout, tj. izgled, plan stranice. Za pripremu slika koje će biti sastavni deo web strane, može se koristiti Photoshop. Takođe se može naznačiti i veličina Inline Image-a u dimenzijama koje su procentni deo trenutne veličine prozora browser-a, tj. prozora, tako da će se slika sama resize-ovati sa promenom, tj. proširivanjem i smanjivanjem veličine browser prozora od strane korisnika. 

U prethodnom primeru, izmenite kod, tako da izgleda na sledeći način:

<html><h1 align="center"><strong>FAKULTET></h1><p align="center"><img src="logo.jpg" width="20%" height="50%"></p><p align="center"> Ovo je zvanični 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. Pokušajte da menjate veličinu prozora browser-a i primetite kako se veličina prve slike menja proporcionalno veličini prozora, dok je veličina druge slike fiksna, tj. ne menja se sa promenom veličine browser-a.

10 Linkovi

10.1 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 zavšnog </a> biće "hypertext" koji se pojavljuje kao podvučen i predstvalja hiperlink. Sledeći koraci grade link u HTML dokumentu na lokalni fajl:

Korak 1 Otvoriti novi HTML document u text editor-u.

Korak 2 U ovaj dokument ubaciti sledeći kod:

Korak 3 <strong> Ovde ste došli jer ste kliknuli na link!</strong>

Korak 4 Sačuvati dokument pod nazivom "drugi.html" u nekom folderu.

Korak 5 U istom folderu kreirati još jedan HTML fajl "prvi.html".

Korak 6 U tom fajlu otkucati sledeći 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 Sačuvajte fajl i pogledajte u browser-u. Proverite da li link radi.

10.2 Link za grafiku

U prethodnoj lekciji govori se o načinu prikazivanje "inline" grafike na web stranici. Sa anchor tagom takođe se može formirati link koji prikazuje grafičke fajlove. Kada je anchor link selektovan, on će sam download-ovati image fajl i prikazati sliku (image) u web browser-u.

Napomena: Većina browser-a će, kao link, prikazati image fajl u web browser-u. U zavisnosti od web browser-a, i preferences/settings na kompjuteru, može biti ponuđeno ili da sačuva fajl ili da se selektuje aplikacija da prikaže fajl. Bez obzira na izbor, ako se ode tako daleko, link image fajla je uspešan. 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 sledeće korake kako bi se dodao link za grafiku HTML dokumentu:

Korak 1 Download-ujte sliku fon.jpg.

Korak 2 U istom folderu gde je slika, kreirati HTML fajl koji sadrži sledeći 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 Sačuvati fajl i pogledati u browser-u. 

10.3 Link ka drugim folderima

Anchor tagovi takođe mogu da linkuju HTML dokument ili grafički fajl u drugi folder u odnosu na dokument koji sadrži anchor. Npr. u ovoj lekciji može se sačuvati sva grafika u odvojenom folderu zvanom Pictures. Dok se kreira sve više i više HTML fajlova, čuvanje image fajlova na ovim HTML-ovima će učiniti stvar manje više organizovanijom za korisnika:

Korak 1 Kreirati folder Pictures na istoj lokaciji gde je sačuvan fajl iz prethodne vežbe.

Korak 2 Pomeriti fon.jpg fajl u novi folder.

Korak 3 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 može narediti web browseru da otvori bilo koji dokument/grafiku koji se nalazi u folderu na nižem nivou (npr. u sub-directoriju ili folderu unutar directorija/foldera koji sadrži HTML fajl) korišćenjem "/" karaktera da se naznači promena u folderu Pictures. Ako je sve urađeno kako treba, link u rečenici link na sliku bi trebalo da pozove fajl sačuvan u folderu Pictures.

10.4 Anchor linkovi ka folderima višeg nivoa

Linkovi koji su gore prethodno konstruisani poznati su kao "relative" linkovi, sa značenjem da web browser može 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 sačuvan u folderu nižeg (lower) nivoa od working HTML stranice. Takođe se može konstruisati link koji je povezan sa (higher) višim 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 višeg nivoa u odnosu na tekuću stranicu; u ovom slučaju da ide dva nivo iznad i traži 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 višem nivou:

<img src="../pictures/fon.jpg">

Prednost ove strukture je u tome da će biti lakše sačuvati veliki broj slika u gornjem folderu koji može da se deli sa drugim web stranicama. Pokušajte samostalno da kreirajte odgovarajuću strukturu foldera i da napravite link!

10.5 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 skraćeno od Uniform Resource Locator, adresa Internet sajta gde korisnik treba da ode. Niz Text to Activate Link označava šta će se pojaviti kao hypertext u web browser-u (obično ne uvek) podvučeno i u plavoj boji. Kada korisnik klikne na hypertext, web browser će ga linkovati na Internet site određen sa URL. Treba zapamtiti da URL može 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 sadrži podatke o fakultetu.Treba pratiti sledeće korake kako bi se dodali anchor linkovi na HTML dokument:

Korak 1 Promeniti fajl iz prethodne vežbe 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 Sačuvati fajl i pogledati u browser-u.

10.6 Linkovi i adrese

10.6.1 Kako rade linkovi u pretraživaču

Hiprelinkovi se prave tako što se neki element na strani okruži kotvom, odnosno oznakom a. Atribut href, što je skraćenica za hypretext reference, definiše odredište linka.

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

10.6.2 Apsolutne ili relativne putanje

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

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

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

Putanje relativne u odnosu na dokument daju samo informacije koje su potrebne da iz tekućeg dokumenta 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 naviše. Iza ovog sledi ime datoteke (linka sa strane mojastrana.html) : ../index.html.

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

Putanja relativna u odnosu na koren uspostavlja vezu između 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 možete videti i u primerima koje smo dali.

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

10.6.3 Atribut target

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

11 Heksadecimalne oznake i boje

U vašem web browseru na raspolaganju vam je pregršt boja kojima možete 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) daće belu a minimalne vrednosti (R=0, G=0, B=0) prikazaće crnu boju. Sve ostale boje su zadate uređenom 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 lakše da njima barataju. Pa recimo u primeru "6699FF", "66" označava vrednost crvene, "99" vrednost zelene, a "FF" vrednost plave.

Evo nekoliko primera (tabela 3):

Table 3 Boje u heksadecimalnom sistemu

Boja Heksadecimalno Boja Heksadecimalno

FFCCCC 3300FF

33FF66 AA0000

663300 9900FF

000077 FFFF00

EEEEEE 888888

444444 000000

U svakom slučaju se ne sekirajte zbog numeričkih konverzija iz dekadnog u heksadecimalni sistem, jer postoji mnoštvo alatki koje vam omogućavaju da samo klikom na željenu boju, dobijete ispisanu njenu heksadecimalnu reprezentaciju. A i sami web browseri su dovoljno pametni da prepoznaju skraćenice za sledećih 16 boja.

Boja Ime boje Boja Ime boje

aqua black

blue fuchsia

gray green

lime maroon

navy olive

purple red

silver teal

white yellow

11.1 Jednobojne pozadine (Solid Color Backgrounds)

Za FON Web, prva stvar koja je rađena je dodavanje color background-a na index.html fajl. HTML format za dodavanje solid color background-a modifikuje <body> tag-a na sledeći način:

<body bgcolor=#XXXXXX>

gde je XXXXXX heksadecimalna reprezentacija (označena sa # znakom ispred) željene boje.

Korak 1 Otvoriti fon.html fajl u text editor-u.

Korak 2 Pronaći <body> tag i promeniti ga u:

<body bgcolor=#000000>

Korak 3 Save i Load HTML file u web browser-u

Ako je sve urađeno kako treba, browser bi trebalo da promeni pozadinu u jednobojnu crnu boju. Ali, možda sada ne možete da vidite tekst! Zašto? Zbog toga što je default color za text je takođe crna, tako da sada imamo crni tekst na crnoj pozadini! Na sreću, dodatnim komandama, body tagu možemo dodati boju za tekst i hypertext:

<BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>

gde XXXXXX vrednosti označavaju sledeće:

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 označava da je već pregledan (default je purple)

Izmenom vrednosti ovih vrednosti u body tagu, možemo 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 možete učiniti lako koristeći copy i paste malopređašnjeg primera, na novi <body> tag).

11.2 Teksturne pozadine

Boje osvežavaju izgled web stranica, ali dodavanjem tekstura, koristeći male (GIF ili JPEG) sličice, možete napraviti i lepši efekat. Njih će web browser kopiranjem razvući na celu pozadinu. Obratite pažnju na:

Čitljivost: mnoge pozadinske teksture će više odmoći nego pomoći čitaocu. Pokušajte da postavite teksture koje su svetlije (uz taman tekst) ili tamne (uz svetao tekst), olakšavajući čitanje na taj način jačim kontrastom.

Veličinu: Ne postavljajte slike velikih veličina, jer su konekcije kod nas još uvek spore, pa će drugima biti potrebno dosta vremena da stranice uopšte i otvore.

HTML format za dodavanje pozadine kroz sličicu 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>

dobićete crveni tekst na sličici koja će biti iskopirana na celom backgroundu web stranice (slika 3).

Slika 10 Izgled tekstualne pozadine

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

Korak 2 U tekst editoru kreirajte primer web stranice u folderu boja, unošenjem koda, željenog teksta i odgovarajućeg 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 Fajl snimite sa html ekstenzijom. Kreiranu web stranicu otvorite u browseru i pogledajte da li ste zadovoljni rezultatom.

12 META tagovi

Sintaksa HTML-a dozvoljava korišćenje meta informacija unutar web stranice i to u onom delu web stranice koji browser ne prikazuje. Postoje različiti tipovi meta tagova, ali u okviru ovih lekcija razmotrićemo samo neke od najkorisnijih. Meta tagovi se u HTML dokumentu smeštaju u zaglavlje dokumenta, tj. između tagova <head> i </head>.

12.1Meta tag za automatski prelazak na drugu web stranicu

Prvi tip meta tagova omogućava kreiranje HTML web stranice koja će ukoliko ne bude učitana posle tačno određenog vremenskog perioda automatski preći na neku drugu web stranicu. Ovo se koristi iz više razloga:

U slučaju pomeranja stranice. Ukoliko dođe do pomeranja stranice zbog redizajna sajta ili promene servera, kao i u slučaju ukidanja stranice, potrebno je preusmeriti poziv stranice na novi URL.

U slučaju kreiranja serije web stranica koje treba sa se menjaju u određenim vremenskim intervalima (kao Slide Show).

U slučaju web sajtova koji imaju uvodnu stranicu (intro)

Sintaksa ovog tipa meta tagova izgleda na sledeći način:

  <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 (izraženo u sekundama), a URL je adresa na koju će se izvršiti preusmeravanje posle isteka tog vremena. Primer :

Korak 1 Pokrenite tekst editor i kreirajte novi HTML fajl. Napravite sledeće zaglavlje sa odgovarajućim meta tagovima.

Korak 2 Prepravite fajl tako da ima sledeći 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.myelab.net "/><title>Untitled Document</title></head><body>Čekaj!!!</body></html>

Korak 3 Sačuvajte stranicu i pogledajte u browser-u kako izgleda.

12.2 Meta tagovi za opis

Meta tagovi vam omogućavaju da postavite dodatne informacije na vašu web stranicu koje će omogućiti da se ona lakše pronađe na Internetu. Krajnje pojednostavljeno, web pretraživači (Google, Altavista, Yahoo, itd.) rade po sledećem principu: svaki od pretraživača sadrži bazu podataka u kojoj su podaci o web stranicama. Na osnovu kriterijuma pretrage zadatog od strane korisnika, pretražuje se baza podataka i prikazju rezultati. Rezultat pretrage su web stranice koje sadrže traženi kriterijum. Na većini ovih web stranica traženi kriterijum se nalazi na početku

sadržaja stranice, tako da osim ako je sam početak stranice veoma deskriptivan, korisnik neće dobiti pravu sliku onoga što je na stranci. Sintaksa meta taga za dodavanje opisa stranici izgleda ovako:

<META name="description" content="Ovaj tekst predstavlja odličan opis web stranice. ">

Maksimalna dužina meta tagova iznosi 1024 karaktera, počev od prvog < i zaključno sa poslednjim > u meta tagu, što znači da uneti opisi treba da budu kratki i precizni. Još jedan koristan meta tag koji će olakšati pronalaženje web stranice preko pretraživača je omogućava dodavanje ključnih reči (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">

13 Kreiranje tabela

HTML za basic table strukturu je prikazan ispod u tabeli 4

Table 4 HTML kod za prikaz tabele

HTML kod Izgled u browser-u<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>

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 može sadržati bilo koji tip HTML tag-a -- headers, styled text, hypertext links, inline graphics itd. U ovom tag-u može se koristiti nekoliko atributa kojima se podešava,( Alignment )tj. centrira ili reguliše svaki podatak koji se unosi u ćelije (tabela 5):

Red 1 kolona 1 Red 1 kolona 2 Red 1 kolona 3

Red 2 kolona 1 Red 2 kolona 2 Red 2 kolona 3

Red 3 kolona 1 Red 3 kolona 2 Red 3 kolona 3

Table 5 Atributi za regulisanje svakog podatka iz ćelije

Horizontal Alignment (Horizontalno centriranje)

Vertical Alignment (Vertikalno centriranje)

<td align=left> centrira sve elemente na levu stranu ćelije (ovo je default setting)

<td align=right> centrira sve elemente na desnu stranu ćelije

<td align=center> centrira sve elemente u centralnom delu ćelije

<td valign=top> centrira sve elemente na vrh ćelije

<td valign=bottom> centrira sve elemente na dno ćelije

<td valign=middle> centrira sve elemente na središnjem delu ćelije (ovo je po default setting)

Ovi atributi se mogu koristiti i kombinovano:

<td align=left valign=bottom>

Ovaj HTMLće prikazati ćeliju sa podacima smeštenim u levom donjem uglu ćelije. Da bi ste odradili ovu vezbu sledite sledeće korake:

HTML kod možemo kucati u nekom tekst editoru (NotePad, TextPad, i dr.), kao i u prethodnim lekcijama.

Korak 1 Pokrenite tekst editor. Naprevite osnovnu konstrukciju za html stranicu kao do sada.

Korak 2 Kod koji želite da unesete kucate u <body> sekciji koda kao u Tabeli 1.

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

13.1 Redovi i Kolone

Tabela koja je ispod prikazana je prosta i u obliku kocke – tri reda sa tri kolone. Šta se sve može dobiti ukoliko se koriste colspan i rowspan atributi u <td>...</td> tag-ovima (tabela 6)

Table 6 Korišćenje colspan i rowspan atributa

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

** Obratiti pažnju na atribut druge ćelije u prvom redu – (obuhvata) spans 2 kolone. Tekst je podešen tako da se nalazi u centru ćelije.

Red 1 kolona 2-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>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>

13.2Tabela sa podacima

Korak 1 Pokrenite tekst editor. Napravite osnovnu konstrukciju stranice za HTML.

Korak 2 Između body tagova unesite sledeći kod.<html><table border=3><tr><th>Odsek</th> <th>Prosecna ocena</th> <th>Broj studenata ^*</th></tr>

Red 1 kolona 1 Red 1 kolona 2-3

Red 2 kolona 1 Red 2 kolona 2 Red 2 kolona 3

Red 3 kolona 1 Red 3 kolona 2 Red 3 kolona 3

Red 1 kolona 1 Red 1 kolona 2-3

Red 2 kolona 1 Red 2 kolona 2 Red 2 kolona 3

Red 3 kolona 1 Red 3 kolona 3

<tr><td>Informacioni sistemi i tehnologije</td><td align=center>7.68</td><td align=center>302</td></tr><tr><td>Menadžment</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 menadžment</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 Prosecna ocena Broj studenata *

Informacioni sistemi i tehnologije 7.68 302

Menadžment 7.9 284

Upravljanje kvalitetom 8.62 54

Operacioni menadžment 8.32 >18 & <47

Pogledajte HTML kod za prvi red. Table Header tag-ovi <th>...</th> funkcionišu isto kao i <td>...</td> tag-ovi izuzev toga da se svaki tekst automatski podešava na bold i da su svi podaci smešteni u centru ćelije. Takođe, u ćeliji za “Operacioni menadžment” mora se samo koristiti HTML za specijalne karaktere da bi se prikazali simboli kao što su "<", ">", i "&".

Sada treba još po nešto dodati u tabelu.

Neki browser-i dopustaju korisniku da specificira i druga podešavanja za linije koje grade tabelu. Ovo su atributi za table tag:

<table border=X cellpadding=Y cellspacing=Z>

gde X označava širinu (u pixelima) od spoljašnje ivice tabele. Atribut cellpadding specificira koliko praznog prostora "space" postoji između podataka u ćeliji i zidova ćelije – veličina koja označava visinu Y učiniće ćeliju većom ("povećavanje" ćelije). Atribut cellspacing specifikuje (u pixelima) širinu između unutrašnjih linija koje dele ćeliju.

Izmeniti <table> tag tako da sada piše:

<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 piše:

<table border=3 cellpadding =4 cellspacing=8><caption><b><font size=+1>STATISTIKA</font></b></caption>

Može se i dodati HTML unutar <caption> tag-a; proveriti da li se nalazi unutar <table>...</table> tag-ova.

Obojiti tekst <th>...</th> tag-ovima u narandžastu 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 podržava<center>...</center> tag, onda samo okružiti tabelu sa ovim tag-ovima.

Konačno, 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 otići na drugi red HTML tabele (sadrže 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: Veličine tabele pokušavaju da se same prilagode u skladu sa širinom sadržaja koji se unosi u tabelu. Mogu se dodati neki <br> tag-ovi , tako da ova prva kolona ne bude preširoka. Tabela koju ćete dobiti na stranici u Internet Exploreru posle unosa gore navedenog koda treba da ima sledeći izgled kao tabela 8:

Table 8 Izgled tabele

STATISTIKA

Odsek Prosecna ocena Broj studenata *

Popularnismerovi

Manjepopularnismerovi

Informacioni sistemi i tehnologije 7.68 302

Menadžment 7.9 284

Upravljanje kvalitetom 8.62 54

Operacioni menadžment 8.32 >18 & <47

14 HTML forme

14.1 Text Input Elementi (type="text")

Forme se koriste za kreiranje jednolinijskih polja u koja korisnici unose tekst. Default širina je 20 karaktera, a mogu se kreirati i polja sa drugim veličinama unošenjem vrednosti u size option. Može se ograničiti i broj unosa karaktera podešavanjem vrednosti u MAXLENGTH option. Text input polja će biti prazna kada se stranica učita, osim ako korisnik ne zada početni 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">

14.2 Password Input Elementi (type="password")

Ovi elementi su identični text input elementima, osim kada korisnik unosi podatke u njih, videće "bullet" karaktere, tj. zvezdice, a ne slova koja unosi kao šifru (password). Password tekst je šifrovan kroz prenos i potom na kraju dešifrovan kada je podatak polja učitan na server. Videti razliku između unošenja 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">

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

Ovi elementi su tekst polja koja sadrže više od jedne linije za unos podataka i mogu se scroll-ovati tako da korisnik moze da unese više teksta. Tag opcije definišu veličinu polja brojem karaktera u redu i koloni. Dodavanjem opcije WRAP=VIRTUAL, tekst koji je prethodno unet će se automatski smestiti sa desne strane polja. Takođe se može 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>

14.4 Radio buttons (type="radio")

Radio dugmići su kontrole koje su povezane tako da samo jedno radio dugme, tj. button može 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 zajedničkim 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 ponuđenih, posebno će se istaći taj button tako da izgleda osvetljeno, kada se stranica učitava (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" funkcionišu nazavisno jedan od drugog.

14.5Check Boxes (type="checkbox")

Ovi elementi su slični prethodnim radio buttonsima, ali nisu zavisni od drugih buttons-a, tako da može biti selektovano više njih u isto vreme. Svaki checkbox ima jedinstveno ime ili naziv. Ukoliko polje nije štiklirano, običnim klikom na njega pojavice se X ili check mark znak na tom mestu. Ukoliko je box označen, 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 istaći taj checkbox dok se strana učitava (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

14.6 Menu Select (type="select")

Select daje padajući menije koji omogućavaju korisniku da izabere jednu od ponuđenih stavki u listi. <OPTION>...</OPTION> tag definiše tekst koji se pojavljuje u meniju. Vrednost poslednje selektovane opcije je vraćena kada je prenesen podatak iz polja. Dodavanjem SELECTED opcije pokazuje koji element se prikazuje kada se stranica učitava; 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>

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

Ovaj tip kreira buttons (dugmiće) 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 vraća 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 dugmićima

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

now!">

Reset button<input type="reset" value="Clear the web 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 početno stanje.

Sada ćemo kreirati web page formu koja će sadržati 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 našu novu stranicu.

Korak 1 Otvorite proj_menu.html fajl u vašem text editoru. Posle HTML koda koji sadrži link informaciju za "Reference" frames web page, dodajte:

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

Korak 2 Save , tj. sačuvajte ovaj HTML file.

Korak 3 Zatim ćemo kreirati novu web stranicu koja će sadržati 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 4 Da bi bolje razumeli ovaj dokument, prezentovaćemo jednu po jednu njegovu sekciju. Prvi deo fajla sadrži "normal" deo našeg 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 5 Sada unesite kod, kojim ćete označiti početak forme. Do sledeće lekcije, nećemo pisati ACTION=... deo.

<form method="post">

Korak 6 Report forma će se prikazati kroz HTML tabele, koje su korisne za web forme jer dozvoljavaju korisniku da podešava tekst kao i elemente forme. Kreirajte tabelu koja sadrži 4 osnovna dela vaše forme:

Informacije o studentu

Izveštaj o odsecima

Izvori koji su korišćeni za dobijanje informacija

Pošalji i Poništi sve

Svaka od ovih sekcija će biti označena velikim poljem tabele koja definiše tu sekciju vaše forme. Dodajte sledeće 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 sadrže tekst input polja. Stavljene su oznake za polja u prvoj koloni svakog reda, poravnate udesno. Takođe su smeštene kratke instrukcije u malom , plavom tekstu pored svakog elementa. Primetite da svaki element forme ima jedinstveno ime. Treće polje forme je u stavri password type da bi sakrilo ime koda koji će korisnik uneti.

Korak 7 Sada ćemo uraditi drugu sekciju gde se koristi ova web forma koja prikazuje Izveštaj o odsecima - koristićete 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 8 Treća sekcija forme web stranice se koristi za prikazivanje izvora koji su korišćeni u tri unosna polja. Posto su uneti podaci u stvari web site adrese, može 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 9 </tr> Poslednja sekcija ove tabele/forme sadrži button koji će prikupiti sadržaj izveštaja u formi i drugi button koji se može koristiti da resetuje formu na početno, prazno stanje. To je takođe 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 učitajte u web browser. Leva strana ove web stranice sa frejmovima bi sada trebalo da sadrži link koji ste dodali u drugom koraku, i koji će učitati formu web stranice koju ste kreirali u prethodnim koracima. Forma još uvek neće raditi ništa, ali buttons, meniji i polja bi trebalo da budu osposobljeni za editovanje.

III DEO

15 CSS

15.1Šta je to CSS?

CSS je tehnologija koja omogućuje razdvajanje strukture stranice od njenog izgleda, što predstavlja osnovni princip ove tehnologije. To konkretno znači da informacije koje se žele prezentirati na stranici treba da budu sadržane u HTML fajlu, a opis izgleda stranice i načina

predstavljanja informacije treba da se nalazi u drugom fajlu – css fajlu. Odrednica CSS (Cascading Style Sheets) u prevodu znači “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 unapređuje i promoviše 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 ažurirana u specifikaciju CSS2.1. gde broj 1 označava broj revizije. Ovom revizijom izbačene su pojedine komponente iz CSS2 specifikacije za koje se vremenom utvrdilo da nema izgleda da u skorije vreme budu implementirane u Web čitačima. Na primer, jedno svojstvo koje je izbačeno je text-shadow jer dugo vremena nije dobilo podršku ni od jednog Web čitača. Naravno, tom revizijom nije stavljena tačka na razvoj i unapređenje CSS-a, pa se možda u budućnosti ovo svojstvo ponovo pojavi i uđe na velika vrata, a do tada ne treba očajavati zbog njega.

CSS1 specifikacija je publikovana u decembru 1996. godine i opisuje jednostavan model za formatiranje, najčešće korišćen za prikaz na ekranu. CSS1 specifikacija sadrži 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 zvučnih prezentacija i slično.

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

definišete izgled vaše stranice na jednom mestu kako bi izbegli ponavljanje koda na stranici.

jednostavno menjate izgled stranice čak i nakon što ste je kreirali. Pošto su stilovi definisani na jednom mestu, možete da promenite izlged vaše stranice odjednom.

definišete veličinu fonta sa istom preciznošću koju vam pruža word procesor, bez ograničenja na sedam veličina fonta koje su definisane u HTML-u.

pozicionirate sadržaj stranice sa preciznošću na nivou piksela. redefinišete izgled postojećih tagova u HTML-u. Na primer, ako želite da se <b></b>

tag koji inicajlno prikazuje tekst podebljanim slovima, prikaže u crvenoj boji sa veličinom fonta od 16 piksela, to sa CSS-om vrlo lako možete da uradite.

podesite stil za linkove na način koji vama odgovara – na primer želite da se linkovi prikazuju nadvučeni.

15.2 Načini primene stilova

Stilovi se mogu primeniti na neku stranicu na tri načina: 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 određenom HTML tagu koji se želi formatirati tzv. Inline.

15.2.1 CSS kao eksterni fajl

Ovaj način pridruživanja stilova stranici je strogo preporučen s obzirom na to da omogućava veliku fleksibilnost prilikom promene stila stranice i primene jednog istog stila na više različitih stranica. Ovaj način zapravo predstavlja materijalizaciju osnovnog principa kojim se vodi CSS filozofija : razdvojiti sadržaj od izgleda stranice.

Znači, ako se u eksternom CSS fajlu napiše 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 izvršiti 1000 promena! Ovakva dinamičnost može se postići 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 koristeći <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 naša stranica. Povezivanje ovog fajla sa našom HTML stranicom obavlja se na sledeći način:

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

Ovime je svako pravilo koje je definisano u ovom fajlu primenjeno na odgovarajuće tagove koji se pojavljuju na našoj stranici.

15.2.2 Interni stilovi

Ovako primenjeni stilovi ne mogu se vezati za više stranica istovremeno već se pišu u zaglavlju same stranice i pripadaju samo njoj. Za ovako definisane stilove se kaže da su ugrađeni u stranicu (eng. embedded). Ovakav način definisanja i primene stilova treba izbegavati zbog toga što se umanjuje fleksibilnost i dinamičnost a takođe se narušava i pravilo odvajanja sadržaja stranice od definicije izgleda.

Interni stil se postavlja u zaglavlje dokumenta pomoću <style> taga u okviru <head> taga na sledeći način:

<head><style type=”text/css”> body

{ background-color: #ffffff; } P { color: #000000; }</style></head>

Ovde treba pomenuti još jedan način linkovanja fajla sa stilovima koji se može koristiti u kombinaciji sa ovim načinom ili zasebno. To se ostvaruje korišćenjem komande @import kojom se css fajl “uvozi” u dokument a sintaksa je sledeća:

<style type="text/css"> @import url(http://style.com/basic);</style>

Po HTML 4.0 specifikaciji ukjučen je i atribut media u okviru <style> taga za određivanje medija na koji se stil primenjuje. Ovaj atribut može uzimati sledeće vrednosti:

sreen - Izlazni medij je ekran print - Izlazni medij je štampač  projection - Izlazni mediji je projektor  speech - Izlazni medij je uređaj za sintezu govora all - Koristi sve izlazne medije

Pomoću atributa type navodi se MIME tip za liste stilova.

15.2.3 Inline

Inline znači upisivanje stila u okviru samog taga u HTML stranici na koji se stil odnosi. Skoro svaki HTML element sadrži 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 način primene stila se takođe ne može preporučiti jer sadržaj stranice i definicija stilova nisu odvojeni, što uzrokuje nefleksibilnost i neefikasnost pri izmeni stila.

15.2.4 Alternativne liste stilova

Jedan dokument ne mora imati samo jedan fajl sa stilovima koji je za njega zakačen. Moguće je definisati glavni stil i neograničen broj alternativnih lista stilova čime se korisniku pruža mogućnost da izabere onaj stil koji mu najviše odgovara. Kako korisnik bira željenu listu stilova zavisi od Web čitača. Svi Web čitači još uvek nemaju podršku za to ali oni koji imaju nude u meniju stavku “choose stylesheet” ili nešto tome slično.Da bi uključili više lista stilova potrebno je uključiti više <link> tagova u zaglavlju HTML dokumenta, sa odgovarajućim 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".

16 CSS Sintaksa

Svaka Kaskadna Lista Stilova predstavlja seriju instrukcija koje se zovu iskazi. Postoje različite vrste iskaza1, ali najvažnija vrsta je pravilo (eng. Rule). Pravilo radi dve stvari:

1. Identifikuje elemente u HTML dokumentu na koji se odnosi2. Ukazuje Web čitaču na to kako da iscrta te elemente na stranici

Pod elementima se podrazumevaju paragrafi, linkovi, liste itd. Deo pravila koji govori Web čitaču kako izabrani element treba da bude prikazan naziva se deklaracijom. Deklaracija može da sadrži određen 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

Dakle, jedan css fajl se sastoji iz niza iskaza (od kojih su većina 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;

1 Za detalje pogledati u nastavku deo “iskazi – vrste”

font-size: 1em; text-align: justify; }

Iz primera se može uočiti i anatomija pravila. Na početku je selektor, zatim u prostoru između dve vitičaste zagrade (koje označavaju početak i kraj deklaracije) nalaze se svojstva i njihove vrednosti koje su međusobno odvojene dvotačkom, dok su svojstva međudsobno razdvojena tačka – zarezom.

Slika 12 Anatomija pravila

Evo nekoliko pravila koje treba poštovati pri pisanju lista stilova kako ne bi došlo do neočekivanih efekata u radu sa stilovima:

1. Svaki iskaz mora imati selektor i deklaraciju. Deklaracija dolazi odmah iza selektora i oivičena je vitičastim zagradama.

2. Deklaraciju čine jedan ili više svojstava odvojenih tačka-zarezom.3. Svako svojstvo ima ime iza koga je dvotačka a zatim ide vrednost za to svojstvo.

Postoji veliki broj različitih vrednosti za svojstva ali svako svojstvo može primiti samo vrednost koja mu je po specifikaciji propisana.

4. Nekada svojstvo može dobiti više vrednosti kao što je to slučaj sa font-family svojstvom. Višestruke vrednosti trebaju biti odvojene zarezom i praznim prostorom.

5. Vrednost koja se prikazuje sa više reči treba staviti pod navodnike6. Između 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 ignoriše te se može koristiti kako bi se olakšalo citanje koda.

8. Kada za jedan element postoji više definisanih stilova onda će biti primenjeni stilovi po sledećem prioritetu, pri čemu poslednji način definisanja ima najveći prioritet jer je najbliži elementu:

1. Web čitač default stilovi2. Eksterna lista stilova3. Ugrađena lista stilova unutar zaglavlja stranice4. 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}

17 Iskazi - vrste

Postoji nekoliko vrsta iskaza:

@Rules (@pravila)o @importo @mediao @page

Komentari HTML komentari Rules (pravila)

KomentariKomentari prilikom pisanja kaskadnih lista stilova imaju sledeću formu:

/* Ovako se pišu komentari */

Dakle forma komentara je ista kao kada se komentariše skript kod.

HTML komentariStariji Web čitači koji ne podržavaju CSS će prikazati sadržaj ugnježdene kaskadne liste kao tekst na stranici. Da bi se to izbeglo koriste se HTML tagovi za komentare <!-- i --> kako bi se sadržaj taga <style> (koji je starijim Web čitačima neopoznat i koga će ignorisati) sakrio. Treba naglasiti da se eksterne liste stilova ne trebaju komentarisati na ovaj način i da ovo važi isključivo za ugnježdene liste stilova.

Rules (pravila)Rule ili pravilo je vrsta iskaza koji Web čitaču govori kako određeni element treba da bude iscrtan na stranici.

18 Selektori – Uvod

Može se reći da su selektori najvažniji deo kaskadnih lista stilova. Selektor identifikuje tag čiji se izgled podešava pomoću pravila. Web čitač koristi selektore da bi odredio koji tag treba da prikaže na način na koji je u pravilu definisano. Selektori mogu da identifikuju bilo koji HTML tag, ali mogu još mnogo toga da urade.

18.1 Tipovi selektora

Specifikacija organizuje i grupiše selektore prema njihovim teoretskim karakteristikama. Ovde će oni biti organizovani prema načinu njihove upotrebe. Biće razmotreni sledeći tipovi selektora:

Vrsta selektora Sintaksa za definsanjeType selektori body { lista svojstava }

Class selektori p.zutiParagraf { lista svojstava }

ID selektori p#zutiParagraf { lista svojstava }

Descendant selektori div p h1 { lista svojstava }

Link pseudo class selektori a: hover { lista svojstava }

Pseudo element selektori p: first-line

Grupni selektori h1, h2, h3 { lista svojstava }

Dinamički pseudo class selektori p:hover { lista svojstava }

Jezički pseudo class selektori p:lang(fr) { lista svojstava }

Child selektori div>p>strong { lista svojstava }

First child selektori p:first-child { lista svojstava }

Adjacent selektori strong + em { lista svojstava }

Attribute selektori a[title=”kontakt”]{ lista svojstava }

Za svaki tip biće navedeno: Šta taj tip selektora radi Kako se formira – sintaksa Zašto bi ga trebalo koristiti Koliko su dobro podržani od strane Web čitača

18.2 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. Takođe p selektor se odnosi na svaki <p> tag koji se pojavi na stranici. To znači 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) biće plave boje.

Način formiranjaType 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

KorišćenjeKoristeći type selektor, moguće je menjati izgled bilo kog taga na stranici ili svih tagova istovremeno. Ako se korektno ispiše kod HTML stranice, neće se osetiti potreba za menjanje tog koda ukoli se želi u budućnosti promeniti izgled. Dovoljno će biti da se izmeni opis stila za željeni tag. Početnici u CSS-u često misle da su ograničeni na ovaj tip selektora i da se CSS-om može uraditi samo ono što ovaj tip selektora nudi. Međutim to je greška, jer postoji veliki broj tipova selektora koji daju velike mogućnosti za kreativan rad.

18.3 Tipovi HTML elemenata

Svi elementi (HTML) koji se koriste pri kodiranju su podeljeni u tri tipa. Svaki od ovih tipova se na stranici prikazuje drugačije. Ovo je razlog što u CSS-u postoji svojstvo display. Sa ovim svojstvom može se u mogućnosti, teoretski, definisati prikaz elementa na stranici. U praksi Web čitači će možda ignorisati pokušaj izmene načina prikaza elementa. Umesto toga, prikazaće element po preporuci W3C-a.

Tri osnovna tipa prikaza su: block inline list item

Block elementi su odvojeni od elemenata koji ih okružuju u toku HTML stranice. Web čitači generalno daju blok elementima standardne margine na vrhu i na dnu bloka. Sa CSS-om može se definisati veličina margina oko blok elementa. Primeri za blok elemente su <p>, <h1> itd.

Inline elementi nisu odvojeni od okružujućih elemenata u toku HTML stranice vec se nastavljaju odmah po završetku prethodnog elementa i nakon njega se nastavlja tok HTML stranice. Primeri za inline elemente su <img> i <a>.

List item elementi se prikazuju slično kao i blok elementi, s tom razlikom što je na početak elementa dodat znak ili redni broj i što je element uvučen za izvestan broj piksela u odnosu na element roditelj. Sa CSS-om se neka slika može definisati kao marker ispred item list elementa. Najočigledniji list item element je <li> element. Treba napomenuti da su <ul> i <ol> u stvari block elementi. Ako bolje razmislite to i ima smisla.

18.4 Class selektori

ObjašnjenjeType selektori su veoma moćni ali ne pružaju potpunu udobnost koju pružaju class selektori. Naime, dobro je što se pomoću type selektora može odjednom promeniti izgled svakog paragrafa na stranici, ali šta se dešava ako se želi promeniti samo određeni paragraf ili grupa paragrafa?

Stranica na kojoj treba da se nađu pitanja i odgovori, logično je da će način na koji su pitanja ispisana na stranici razlikovati od načina na koji su ispisani odgovori. Ukoliko pitanja ispišemo podebljanim slovima, pitanja i odgovore u zasebnim paragrafima, a za sve paragrafe je prethodno pomoću type selektora definisano da slova budu crvene boje i da ne budu podebljana, tada će nam i pitanja i odgovori biti ispisani na isti način. Cilj je da pitanja budu ispisana na drugačiji način. Rešenje je u class selektoru.

Kada se napravi class selektor koji se zove na primer “pitanje”, zatim svakom paragrafu na stranici koji sadrži tekst pitanja, kao vrednost atributa class staviti “pitanje”. Slično uraditi i sa odgovorima. Dakle napraviti class selektor “odgovor” i primeniti na svaki paragraf koji sadrži odgovor.

18.4.1 Opšti class selektori

Ova vrsta class selektora odnosi se na bilo koji element date klase. To znači da ovakav selektor možemo 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 počne sa tačkom. U primeru sa pitanjima i odgovorima kreiraćemo dva pojedinačna class selektora na sledeći način:

.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 važi i za selektor .odgovor.

18.4.2 Class selektori

Drugi tip class selektora odnosi se na određene 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 isključivo za paragrafe na ovaj način:

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 neće uticati na izgled ćelije tabele ako pokušamo da postavimo da je i ona klase pitanje. Takođe važi i za klasu odgovor.

Ime klase može da sadrži alfanumeričke znake i crticu, a ne sme da sadrži crticu za podvlačenje niti prazan prostor, a takođe ne sme da započne brojem.

KorišćenjeHTML 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 obično pomoću tagova <p> i </p>. Zatim dodate atribut class otvarajućem 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” biće promenjen selektorom .pitanje Ili p.pitanje.

18.5 ID selektori

ObjašnjenjeID selektori prilično liče na class selektore, rade na sličan način kao oni i imaju sličnu sintaksu. Suštinska razlika između ova dva tipa selektora je u tome što se class selektori primenjuju na jedan ili više elemenata na stranici, dok se ID selektor primenjuje isključivo na jedan element. Možda se pitate zašto ID selektori uopšte postoje kada rade veoma slično kao i class selektori. Najbolji odgovor na to pitanje bio bi : “ E pa zato”, ali nije zadovoljavajući. Č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.

SintaksaID selektori su veoma slični class selektorima, pa im je i sinktaksa slična. I ovde postoje dve vrste selektora - oni koji su posvećeni konkretnom HTML elementu i oni koji se mogu primeniti na bilo koji element cija vrednost atributa ID odgovara ID selektoru.

18.5.1 Opšti 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.

18.5.2 ID selektori

ID selektori koji se odnose samo na određenu vrstu HTML elementa (na primer samo na paragraf), imaju sintaksu ovakovog obilka: imeElementa#imeSelektora, na primer p#naslov. Ovaj selektor odnosiće se na onaj paragraf na stranici koji je klase naslov. Ovaj selektor se neće 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 vrednošću atributa ID to je greška!

Kako se koriste?HTML 4.0 specifikacija je predstavila ID atribut koji se elementu na stranici dodeljuje slično kao i class atribut: dakle otvarajućem tagu se u nizu atributa navede i atribut ID. Na primer: <h1 id=”naslov”>. U vašem dokumentu je ovo jedini h1 element (i jedini element uopšte) koji ima id naslov.

Oblast u kojoj su ID selektori postali de facto standard je CSS pozicioniranje iako se iste stvari mogu raditi i pomoću class selektora. S obzirom na to da su elementi koji se pozicioniraju na stranici vrlo često jedinstveni, među njima se pravi razlika pomoću ID atirbuta.

18.6 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. Sledeća slika prikazuje sadržajnu hijerarhiju elemenata na stranici (koji element je sadržan u kom elementu).

Slika 13 Sadržajna hijerarhija na HTML stranici

Kada se pogleda ova šema uočava 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 hoćemo da poštujemo tipografske konvencije i da sadržaj <strong> taga prikažemo podebljanim slovima pomoću selektora, dodaćemo 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 { … {

Možete kreirati descendant selektore do koje vi želite dubine. Na primer, moguće 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 utvrđuju da li se neki elemenat nalazi u okviru nekog elementa (da li je ugnježden u njega) i ako jeste, na takav element će biti primenjen stil. Na primer, očigledno je da će sledeći 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 takođe uticati i na izgled <img> taga iz sledećeg 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 postići ako definišete sledeći descendant selektor:

p.pitanje strong

KorišćenjeNajočigledniji slučaj kada se koristi descendant selektor je onaj koji malopre naveden: Kada se želi uticati na izgled nekog taga koji je sadržan u nekom drugom tagu.

Drugi, manje očigledan slučaj, ali veoma efikasan je situacija kada se odluči 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, može 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 može 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;}

18.7 Link pseudo class selectors

Prethodno opisani selektori su za opštu upotrebu. Ova vrsta selektora je specifična jer se odnosi samo na <a> tag, odnosno na linkove. On omogućuje da pristupimo promeni izgleda linka u različitim njegovim stanjima. Linkovi mogu biti normalni (normal - uobičajeno stanje neposećenog linka), posećeni (visited), označeni kursorom (hover – kada je kursor miša 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 međusobno isključiva. Dakle, jedan link ne može istovremeno biti posećen i neposećen, ali istovremeno može biti posećen i aktivan.

SintaksaLinkovi za svaku pseudo klasu imaju sledeće forme: Selektor za link u normalnom stanju je a:link Selektor za posećeni 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 važnost, te se zbog toga mora voditi računa o redosledu njihovog opisa da ne bi došlo do neželjenih efekata. Naime, ako je jedan link posećen 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 posećeni link ima crvenu boju, a aktivni belu, logično je da od Web čitača očekujete da ih tako i prikaže. Međutim ako nije ispoštovan navedeni redosled, Web čitač neće ispuniti vaša očekivanja. Definisaćemo pseudo klase za sva stanja linka u pravilnom redosledu. Link u normalnom stanju će biti plave boje, posećeni link će biti crvene boje, link na kome je kursor žute i aktivni link će biti zelene boje.

a:link {

color: #0000CC;}a:visited{

color: #FF0000;}a:hover{

color: #FFFF00;}a:active{

color: #00FF00;}

Ako pregledate stranicu videćete da Web čitač pravilno menja boje linku u zavisnosti od njegovog stanja. Dakle, ako je link posećen, on je obojen u crveno, ako se kursorom dođe iznad linka (čime menja stanje u hover), link postaje žut.

Zamenićemo mesta a:visited i a:hover iskaz-ima na sledeći nacin:

a:link {

color: #0000CC;}a:hover /*Prvo smo definisali stil za hover stanje*/{

color: #FFFF00;}a:visited /*A onda i za visited stanje*/{

color: #FF0000;}a:active{

color: #00FF00;}

Ako sada u Web čitaču dođete sa kursorom miša iznad linka koji je posećen i koji je obojen u crvenu boju, videćete da se neće desiti nikakva promena, odnosno da se boja linka neće promeniti u žutu boju. Zaključak je da se redosled definisanja stanja linka mora poštovati.

19 Svojstva (Properties)

Lista stilova je serija instrukcija koje se zovu iskaz-i. Svaki iskaz ima selektor, koji govori Web čitaču na koji element na stranici se taj iskaz odnosi i deklaraciju, koja govori Web čitaču kako da iscrta odnosni element. Deklaracija je kolekcija svojstava.

Svojstvo ima sledeću formu: ime svojstva iza koga sledi vrednost tog svojstva. Ime svojstva je jedna od velikog broja ključnih reči.

Postoji nekoliko različitih tipova vrednosti koje mogu biti dodeljene svojstvima. CSS specifkacija deli svojstva na nekoliko kategorija. Ovde se ta podela neće striktno pratiti već će se prihvatiti slična podela svojstava s tim što će se nazivi kategorija razlikovati. Te kategorije su sledeće:

Text style Text layout Background Border Margin Padding Page layout Element type User interface

Svako svojstvo je objašnjeno na sledeći način:

Mnoga, ali ne sva svojstva su nasleđena od elementa roditelja. Tako, na primer, ako dodamo neko tekst svostvo <body> tagu, ono će biti nasleđeno u svim paragrafima, tabelama i ostalim elementima koji se nalaze unutar <body> taga. Sva svojstva mogu uzeti vrednost inherit. To znači da odnosni element mora da nasledi vrednost tog svojstva od svog roditelja iako se to ne bi desilo inače.

19.1 Text style svojstva

Text style svojstva definišu kako će se tekst pojaviti na stranici. HTML takođe daje odredjeni nivo kontrole nad fontovima, veličinom istih, debljinom, ali CSS tu kontrolu proširuje i čini kodiranje praktičnijim.

CSS2 revizija 1 obezbeđuje sledeća svojstva iz ove grupe: color font-weight font-family font-size font-variant font-style text-decoration text-transform

ColorOvo svojstvo postavlja boju nekog elementa. U osnovi, odnosi se na boju teksta.

Color svojstvo uzima za vrednost boju. Ta vrednost može biti neka od predefinisanih tekstualnih oznaka za boju (na engleskom jeziku), na primer: red, blue, yellow… ali može 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 slučaju kada ovom svojstvu nije dodeljena vrednost zavisi od Web čitača. Najčešće Web čitači koriste crnu boju kao podrazumevanu (#000000), ali treba imati na umu da mnogi Web čitači dozvoljavaju korisniku da definišu osobine vezane takst na ekranu (boju, veličinu…).

Elementi deca nasleđuju color svojstvo od roditelja.

Font-weight

Ovo svojstvo definiše kolike su debljine slova na stranici.

Može uzeti dve vrste vrednosti: ključne reči i numeričke vrednosti.Mogu se koristiti sledeće apsolutne ključne reči: normal, bold, ili sledeće relativne ključne reči: bolder, ligter.

bolder ukazuje Web čitaču da tekst treba da ispiše za nijansu deblje od teksta u elementu roditelju.

font-weight može takođe da bude definisana numeričkim vrednostima: 100, 200, 300, 400, 500, 600, 700, 800, 900. Svaka vrednost je za jedan stepen deblja od prethodne. Vrednost normal je ekvivalentna sa vrednošću 400. Vrednost bold je ekvivalentna sa vrednošću 700.

Podrazumevano, vrednost font-weight svojstva je normal.Elementi imaju istu apsolutnu vrednost za font-weight svojstvo kao i njihovi roditelji. To znači, da elementi nasleđuju numeričke vrednosti za ovo svojstvo i apsolutne vrednosti (ključne reči normal i bold).

Font-family

Ovo svojstvo radi slično kao što tag <font> sa atributom face radi u HTML-u. Ovo svojstvo definiše hijerarhijsku listu željenih fontova koje Web čitač treba da koristi pri ispisivanju teksta. Web čitač će koristiti prvi font u listi koji je na računaru instaliran. Pošto postoji mogućnost da se na računaru ne nalazi ni jedan od navedenih fontova, CSS je uveo generička imena za grupe fontova kojima se taj problem razrešava. Ta generička imena se zovu familije fontova (font-family). 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 može biti specificiran kao jedan od nekoliko sistemskih fontova, koji sistem koristi za svoje glavne grafičke elemente (na primer font u menijiima i u naslovima prozora). Kada je jedan od tih fontova izabran, tada se koriste i veličina, debljina i stil fonta koga sistem koristi (na primer za ispisivanje teksta u menijima).

Sistemski fontovi mogu biti sledeći:

caption (koristi se kod dugmadi) icon (koristi se za oznake ispod ikonica) menu (koristi se u menijima) messagebox (koristi se u prozorčićima za dialog) smallcaption (koristi se za označavanje manjih kontrola) statusbar (koristi se u status baru prozora)

Kada je jedna od ovih vrednosti izabrana, to utiče i na debljinu, veličinu i stil fonta kako je definisano u sistemu. Ako su i ova svojstva postavljena pomoću stilova, ona bivaju prekrivena svojstvima koja je definisao sistem.

Ne postoji definisana podrazumevana vrednost za ovo svojstvo. Web čitači su ti koji definišu kojim će fontom biti ispisan tekst.

Element će imati isti font kao i njegov roditelj ukoliko za njega nije definisano svojstvo font-family.

Font-size

Ovim svojstvom se definiše koje će veličine biti tekst na ekranu. Sa HTML-om ste ograničeni na 7 relativnih veličina koje nemaju nikakve veze sa tradicionalnim načinima merenja veličine fonta kao što su: point, em, ex itd. Čak veličina slova u HTML-u nema nikakve veze ni sa pikselima. CSS omogućuje da se definiše veličina fonta u bilo kojoj od ovih jedinica i na mnoge druge načine.

Veličina fonta može takođe biti specificirana korišćenjem relativnih i apsolutnih ključnih reči.

Relativne ključne reči su: larger i smaller gde, na primer, larger definiše veličinu fonta za jedan stepen veću od veličine fonta elementa roditelja. Za smaller vrednost možete i sami da naslutite.

Kao što je to uvek slučaj sa vrednostima koje su izražene ključnim rečima, konkretne implementacije u različitim Web čitačima se razlikuju.

Apsolutne ključne reči su:

xx-small x-small small medium large x-large xx-large

Veličina fonta u nekom elementu je ista kao i veličina fonta u elementu koji ga sadrži. Na primer, ako je definisano da veličina fonta u paragrafu bude large, tada će veličina fonta u linku koji se nalazi unutar nekog paragrafa takođe biti large.

Font-variant

Ovim svojstvom se podešava osobina teksta da bude prikazan malim slovima.

Font-variant svojstvo može 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 prikaže.

Small-caps govori da tekst treba da se prikaže tako što će mala slova biti prebačena u velika slova i veličina će im biti smanjena. U našem primeru je to: “CIKLOPENTANOPERHIDROFENANTREN”.

Ovo svojstvo se nasleđuje od elementa roditelja.

Font-style

U tradicionalnoj tipografiji postoje različiti stilovi fontova. Sa CSS-om se može manipulisati sa stilovima fontova i to uz pomoć font-style svojstva.

Tri stila koja su podržana od strane CSS-a su: normal, italic i oblique. Normal stil će prikazati fontove u normalnom obliku, dok se italic i oblique stilovi najverovatnije neće razlikovati. Svojstvo font-style može uzeti jednu od tri vrednosti: normal, italic i oblique.

Ovo svojstvo se nasleđuje od elementa roditelja.

Text-decoration

Ovo svojstvo omogućuje da se nad tekstom primene neki efekti. Vrednosti koje ovo svojstvo može uzeti su: none, underline, overline, line-through, blink.

Svojstvo text-decoration može uzeti vrednost none ili može imati više vrednosti. Kada se za ovo svojstvo definiše više vrednosti potrebno ih je odvojiti praznim prostorom.

Text-transform

Ovo svojstvo omogućuje da se manipuliše osobinom teksta da bude ispisan velikim ili malim slovima i da reči počinju velikim slovima.

Postoje tri načina manipulacije tekstom pomoću ovog svojstva:

capitalize, gde svaka reč treba da počne 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 način na koji je to svojstvom definisano, bez obzira na način na koji je tekst ispisan u izvornom kodu. U suprotnom je moguće postaviti vrednost text-transform svojstva na none, čime se izbegava nasleđivanje ovog svojstva od elementa roditelja.

Ovo svojstvo se nasleđuje od elementa roditelja.

19.2 Text layout svojstva

Ova grupa svojstava koristi se za definisanje načina na koji je tekst raspoređen na stranici. Ova svojstva su vezana za tekst, kao što rekoh, i njima se kontrolišu neke stvari kao što su razmak između slova, razmak između redova i ostalo. U kombinaciji sa page layout svojstvima, ova svojstva omogućuju sofisticiranu kontrolu nad razmeštajem elemenata na stranici i podešavanjem izgleda teksta. Za sada, međutim, CSS ne obezbeđuje mehanizme za raspored elemenata na stranici kakav obezbeđuju recimo Quark Express i PageMaker, ali ipak pruža mnogo mogućnosti.

Dok je kontrola izgleda teksta u HTML-u veoma ograničena, CSS obebeđuje kontorolu nad tradicionalnim tipografskim elementima kao što su razmak između slova (u tipografiji poznat kao kern), razmak između reči (u tipografiji poznat kao track) i razmak između 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 kaže, ovo svojstvo obezbeđuje kontrolu nad veličinom prostora između slova u reči, što se u tradicionalnoj tipografiji na engleskom jeziku naziva kern.

Letter-spacing može dobiti vrednost u bilo kojoj jedinici za dužinu. Kako bi se razmak između slova postavio na manju vrednost nego što je normalna (podrazumevana), moguće je ovom svojstvu dodeliti negativne vrednosti.

Elementi na stranici imaju istu vrednost atributa letter-spacing kao i njihov roditelj. Međutim, ako se vrednost ovog svojstva postavi na normal, tada ta vrednost prekriva nasleđenu vrednost.

word-spacing

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

Word-spacing može biti izražen u bilo kojoj jedinici za dužinu. Kako bi se napravio uzan razmak između reči moguće je za vrednost ovog svojstva dodeliti negativnu vrednost. Vrednost svojstva word-spacing može biti i normal.

Vrednost ovog svojstva, element nasleđuje od elementa roditelja. Postavljanjem vrednosti na normal, prekriva se nasleđena vrednost od elementa roditelja.

Line-height

Ovo svojstvo podešava rastojanje između 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 između linija na engleskom jeziku se zove leading.

Svojstvo line-height se može definisati na različite načine: pomoću množitelja, procenata, jedinica za dužinu ili korišćenjem ključne reči normal.

Množitelji

Ovom svosjtvu se može dodeliti vrednost koja se dobija množenjem veličine fonta sa nekim množiteljem. Množitelj je bilo koji broj koji nije izražen ni u jednoj jedinici. Na primer, ako je vrednost svojstva font-size postavljena na 10pt, a vrednost svojstva line-height na 1.2, rastojanje između donjih granica susednih linija teksta će biti 1.2x10=12pt.

Procentualna vrednost za ovo svojstvo se računa kao procentualna vrednost od veličine fonta koja se postavlja svojstvom font-size. Dakle, kada se vrednost svojstva odredi pomoću procentualne vrednosti dešava se slična stvar kao kod množitelja. Množitelj 1.2 koji smo koristili u prethodnom primeru može se zameniti procentualnom vrednošću 120%. Rezultat je isti kao u prethodnom primeru.

Umesto da se koriste množitelji i procenti, moguće 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 može se postaviti na normal, čime se prekriva nasleđena vrednost za to svojstvo.

Ovo svojstvo element nasleđuje od svog roditelja. Postoji nekoliko stvari koje su malo komplikovane pa ih treba imati na umu. Naime, pri nasleđivanju, element dete nasleđuje od elementa roditelja množitelj (ako je na taj način specificirana vrednost ovog svojstva kod roditelja), dok u slučaju kada se koriste procenti, element dete nasleđuje vrednost, a ne procenat koji je zadat. Na primer, ako je definisano da neki element ima vrednost svojstva 1.2 (što je množitelj) i ako je veličina fonta 10pt, tada će element dete naslediti taj množtelj, pa ako je u detetu veličina fonta postavljena da bude 8pt, vrednost svojstva line-height će biti 9pt.

vertical-align

Veoma često se elementi nalaze u istoj liniji poređani horizontalno na stranici. Svojstvo vertical-align obezbeđuje kontrolu nad načinom kako se elementi na stranici ravnaju (eng. align – poravnati).

Ključne reči funkcionišu na jedan od dva međusobno različita načina. Jedna grupa ključnih reči funkcioniše relativno u odnosu na element roditelj, a druga grupa relativno u odnosu na liniju na kojoj se element pojavljuje.

Ključne reči koje su relativne u odnosu na element roditelj su: baseline – poravnava donju granicu elementa sa donjom granicom elementa roditelja. middle – poravnava središnju tačku elementa sa donjom granicom elementa roditelja sub – postavlja element niže od ustaljenog toka (kao index) super – postavlja element više 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.

Ključne reči koje su relativne u odnosu na liniju na kojoj se element nalazi: top – poravnava vrh elementa sa vrhom najvišeg elementa na toj liniji bottom – poravnava dno elementa sa dnom fonta.

ada se ovom svojstvu dodeli procentualna vrednost, tada se dno elementa podiže u odnosu na dno elementa roditelja. Ali za koliko? Za procentualnu vrednost od vrednosti svojstva line-height.

Na primer, vertical-align: 20% za element koji ima vrednost svojstva line-height 10pt, podići ć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 podešena, podrazumevana vrednost svojstva je baseline.

Ovo svojstvo se ne nasleđuje.

text-indent

Tradicionalno, u mnogim doukumentima, prva linija teksta svakog paragrafa je malo uvučena. Svojstvo text-indent omogućuje kontrolu nad time kako je tekst uvučen ili izvučen.

Ovo svojstvo može uzeti vrednost izraženu u procentima ili u nekoj jedinici za dužinu. Ako se za ovo svojstvo dodeli negativna vrednost, tada se tekst izvlači ispred ostalih linija teksta. Kada se koriste procentualne vrednosti, tada se ona sračunava 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 uvučen za 20px.

Ako vrednost svojstva text-indent nije specificirana, tada prva linija teksta izgleda kao i ostale, dakle nema uvlačenja teksta. To znači da je incijalna vrednost za ovo svojstvo 0.

Element ima istu vrednost za ovo svojstvo kao i element roditelj.

text-align

Ovim svojstvom je moguće odrediti kako će sadržaj koji se nalazi unutar elementa biti poravnat. Ovo svojstvo može biti primenjeno samo na block elemente.

Svojstvo text-align može uzeti jednu od sledećih vrednosti: left right center justify

Web čitači ne moraju da podrže vrednost justify i u principu je mogu interpretirati kao vrednost left. (Za jezike u kojima se čita i piše s desna na levo kao što je arapski, Web čitači ovu vrdnost interpretiraju kao vrednost right).

Ne postoji podrazumevana vrednost za svojstvo text-align. Prepušteno je Web čitačima da odluče kako će tekst biti prikazan, ako svojstvo za poravnanje teksta nije definisano pomoću stilova.

Ovo svojstvo element nasleđuje od elementa roditelja.

direction

CSS2 je predstavio svojstvo direction. Njime se određuje sa koje se strane tekst piše i čita. U mnogim istočnjačkim jezicima, tok teksta ide s desna na levo. Ovim svojstvom se tok teksta eksplicitno može podesiti.

Postoje dve moguće vrednosti: rtl kojom se podešava da tok teksta ide s desna na levo ltr kojom se podešava da tok teksta ide s leva na desno

Ovo svojstvo se nasleđuje od elementa roditelja.

19.3 Background svojstva

Background svojstva utiču na način kako se prikazuje pozadina nekog elementa. Za razliku od HTML-a, sa CSS-om se za svaki element može postaviti boja pozadine ili slika koja će predstavljati pozadinu. Pozadinska slika se može ponavljati duž horizontalne, vertikalne ili obe ose istovremeno (ovo se najčešće koristi kod postavljanja pozadine za <body> tag). CSS-om se može podesiti i način na koji se pozadina ponaša kada se stranica skroluje. Pozadina se može skrolovati istovremeno sa stranicom ili ostati fiksirana. Ukratko, CSS je veoma proširio mogućnosti kontrole izlgeda stranice.

Background svojstva su:background-colorbackground-imagebackground-attachmentbackground-repeatbackground-positionbackground

background-color

Ovim svojstvom se podešava boja pozadine elementa. Sa CSS-om je moguće za svaki element postaviti boju pozadine.

Svojstvo background-color može uzeti vrednost koja predstavlja neku boju ili se može 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 može desiti da jedan element prekriva deo drugog elementa.

Ovo svojstvo se ne nasleđuje od elementa roditelja.

Strogo je preporučljivo da ako postavite određenu boju kao vrednost svojstva background-color, takođe postavite i boju za svojstvo color, kako biste izbegli moguće kolizije i nečitljivost teksta ako korisnik u Web čitaču promeni boju teksta.

background-image

Sa tradicionalnim HTML-om, moguće je sliku pozadine postaviti samo za ceo dokument ali ne i za pojedinačne elemente. Neki Web čitači podržavaju mogućnost da se pozadinska slika postavi i za neke elemente, kao na primer za ćeliju tabele, ali to ne predstavlja standard. CSS omogućuje da bilo element dobije pozadinsku sliku.

Ovo svojstvo kao svoju vrednost može uzeti URL do slike koja će biti korišćena kao pozadina, ili vrednost none.

Svojstvo background-image se ne nasleđuje od elementa roditelja što, ako bolje razmislite, ima smisla.

background-attachment

Tradicionalno, pozadinska slika u telu HTML dokumenta se pri skrolovanju strane takođe skroluje. Pomoću ovog svojstva se može podesiti da pozadinska slika ostaje nepomična na stranici kada se stranica skroluje.

Svojstvo bakcground-attachment može uzeti jednu od dve vrednosti: fixed ili scroll.

scroll vrednost govori brwser-u da pri skrolovanju stranice, pozadinska slika takođe bude skrolovana.

fixed vrednost govori Web čitaču da fiksira pozadinsku sliku dok se stranica skroluje.

background-repeat

Kada se kao pozadinska slika neke stranice postavi slika koja je po dimenzijama (dužini i širini) manja od stranice, tada Web čitač tu sliku ponavlja duž horizontalne i vertikalne ose. Sa CSS-om se može kontrolisati način na koji Web čitač prikazuje pozadinsku sliku.

Svojstvo background-repeat može uzeti jednu od sledećih 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 pomoću HTML-a.repeat –x vrednost govori Web čitaču da slike ponavlja samo po horizonltalnoj osirepeat –y vrednost govori Web čitaču da slike ponavlja samo po vertikalnoj osino-repeat vrednost govori Web čitaču da sliku prikaže samo na jednom mestu i da je ne ponavlja.

Ako svojstvo background-attachment nije podešeno, podrazumevana vrednost ovog svojstva je repeat.

Ovo svojstvo se ne nasleđuje od elementa roditelja.

background-positon

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

Svojstvo background-position spada u grupu komplikovanih svojstava. Postoji nekoliko načina na koje se može podesiti pozicija slike. Pozicija može biti definisana pomoću:

parova procentualnih vrednosti, vrednosti u jedinicama dužine ili pomoću ključnih reči

individualnih ključnih reči

Kada je pozicija pozadinske slike definisana pomoću 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 može objasniti pomoću primera.

Pretpostavimo da imamo ovako definisanu vrednost za ovo svojstvo: (background-position: 15% 25%). Ovo znači da će pozadinska slika biti postavljena na rastojanju od 15% od leve ivice elementa i 25% od gornje ivice elementa.

Kada je pozicija pozadinske slike definisana pomoću parova u jednici dužine, 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.

Ključne reči koje mogu biti korišćene su: top left center right bottom

background

Ovo svojstvo je prečica pomoću koje se može definisati jedno ili sva svojstva koja su vezana za pozadinsku sliku. Ovo svojstvo uzima iste vrednosti koje su opisane za pojedinačna svojstva. Da biste definisali vrednosti za više 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;

19.4Border svojstva

Pomoću CSS-a svaki element na stranici može imati graničnu liniju (u daljem tekstu borduru) i to različitog stila, veličine i boje. Moguće je čak za jedan element definisati sve bordure različite (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 prilično prost, ali ovde mnogo više nego kod drugih elemenata, postoji veliki broj prečica kako se vrednosti mogu postaviti. Zbog ovoga rad sa bordurama može biti pomalo zbunjujući, 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 sledeći način:

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 tačkastu borduru koristite sledeću deklaraciju:

border-top: thin red solid;border-bottom: thick black dotted;

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

Ova svojstva omogućuju postavljanje debljine bordure za svaku stranu elementa posebno ili istovremeno.

Debljina bordure može se definisati pomoću ključnih reči ili pomoću jedinice za dužinu.Ključne reči 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 čitači ove vrednosti date ključnim rečima tumačiti i iscrtavati drugačije. Jedina garancija je da thin nije tanja od medium, koja opet nije tanja od thick.

Ako nije podešena, debljina bordure je podrazumevano medium.Element ne nasleđuje podešavanja bordure od elementa roditelja.

Svojstvo border-width se može koristiti kako bi se za svaku stranicu elementa pojedinačno definisale vrednosti za opis bordure. Mogu se koristiti između jedne i četiri vrednosti za ovo svojstvo:

Jedna vrednost podešava sve bordure na istu veličinu Dve vrednosti postavljaju istu debljinu za gornju i donju borduru pomoću prve navedene

vrednosti i istu debljinu za levu i desnu borduru pomoću druge navedene vrednosti. Tri vrednosti postavljaju debljinu gornje bordure pomoću prve navedene vrednosti, levu i

desnu borduru pomoću druge navedene vrednosti i donju borduru pomoću poslednje navedene vrednosti.

Četiri vrednosti podešavaju debljinu gornje bordure pomoću prve navedene vrednosti, debljinu leve bordure pomoću druge navedene vrednosti, debljinu donje bordure pomoću treće navedene vrednosti i debljinu desne bordure pomoću četvrte navedene vrednosti.

border-color

Ovim svojstvom se podešava boja bordure oko elementa. Njime se može podesiti i različita boja svih bordura odjednom koristeći višestruke vrednosti, slično kao kod svojstva border-width.

Svojstvo border-color možete koristiti na sledeće načine: Jednostruka vrednost za boju definiše istu boju za sve bordure Sa dve vrednosti se prvom navedenom definiše boja gornje i donje bordure, a drugom

navedenom boja leve i desne bordure. Sa tri vrednosti, prvom navdenom se definiše boja gornje bordure, drugom navedenom

boja leve i desne bordure i trećom navedenom boja donje bordure. Sa četiri vrednosti se definišu boje gornje, leve, donje i desne bordure respektivno.

Ako nije podešena boja bordure, njena podrazumevana boja je ista kao i boja elementa koja je definisana svojstvom color. To ne znači da svi elementi podrazumevano imaju borduru iste boje kao i sadržaj. Element će imati borduru tek kada se definiše svojstvo border-style.

Ovo se svojstvo ne nasleđuje od elementa roditelja.

border-style

Pored boje i debljine, bordura oko elementa može imati i svoj stil. Da bi se bordura uopšte iscrtala na stranici, potrebno je definisati vrednost svojstva border-style. Kada ste jednom definisali stil bordure, možete dopustiti Web čitaču da sam dodeli podrazumevane vrednosti za debljinu i boju bordure, mada ćete u najvećem broju slučajeva sami definisati i ostale dve osobine bordure.

Kao i kod border-color svojstva i ovim se svojstvom mogu dodeliti različiti stilovi za sve bordure odjednom:

Jedna vrednost za svojstvo border-style definiše jednak stil za sve bordure odjednom

Sa dve vrednosti definiše se stil za gornju i donju borduru pomoću prve nevedene vrednosti, odnosno za levu i desnu borduru pomoću druge navedene vrednosti.

Sa tri vrednosti definiše se stil za gornju borduru pomoću prve navedene, za levu i desnu borduru pomoću druge navedene i za donju borduru pomoću treće navedene vrednosti.

Sa četiri vrednosti definišu se stilovi za gornju, levu, donju, i desnu borduru respektivno.

Ključne reči za border-style svojstvo su: none dotted dashed solid double groove ridge inset outset

Ako vrednost svojstva border-style nije definisana, podrazumevana vrednost je none.Elementi ne nasleđuju stil bordure od elmenta roditelja.

19.5Margin svojstva

Sa CSS-om, svakom elementu se mogu dodeliti margine. Margina predstavlja prazan prostor između elementa i ostalih elemenata na stranici. Margine se nalaze oko svih strana elementa. Svojstva kojima se podešavaju margine su:

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

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

Ova svojstva podešavaju veličinu margine oko gornje, leve, donje i desne strane elementa.

Margine se mogu podesiti pomoću procentualnih vrednosti, jedinice za dužinu ili pomoću ključne reči auto. Margine mogu dobiti i negativne vrednosti.

Kada se podešava veličina pomoću procentualnih vrednosti, tada se te vrednosti sračunavaju na osnovu veličine elementa roditelja. Na primer, sledeća deklaracija margin-right: 20%, podešava širinu desne margine na 20% od širine elementa koji sadrži dati element. Isto ovo važi i za margin-top i margin-bottom.

Postoje dve vrste vrednosti koje se izražavaju u jedinicama za dužinu. To su apsolutne i relativne. Apsolutne vrednosti su recimo px. Ako koristite ove vrednosti, stvarna veličina margine će uvek biti ista. Kada koristite relativne vrednosti, tada obezbeđujete fleksibilnost stranice. Jedna od tih relativnih vrednosti je em. Korišćenjem relativnih vrednosti, veličina margine će uvek biti proporcionalna sa izračunatom veličinom sadržaja elementa. Ovakav način definisanja veličine margina se preporučuje.

Ako nije podešena, podrazumevana veličina margine je nula. To znači da ne postoji prazan prostor između elementa i susednih elemenata. Pošto neki Web čitači često ipak postavljaju neku veličinu margine, potrebno je ovom svojstvu dodeliti vrednosti nula kako bi se neutralisao nepoželjan prostor oko elementa.

Element ne nasleđuje margine od elementa koji ga sadrži.

Margine se mogu koristiti kako bi se postigao sličan efekat koji se postiže pomoću svojstava za pozicioniranje i svojstava za padding (kasnije će biti reči o ovim svojstvima).

Element možete centrirati unutar elementa koji ga sadrži, bez korišćenja svojstva text-align u elementu roditelju, tako što ćete svojstvima margin-left i margin-right dodeliti vrednosti auto. To je načešće korišćen način za centriranje cele stranice na ekranu.

Preporuka je takođe, kao što sam malopre pomenuo, da se koriste proporcionalne vrednosti za definisanje veličine margina, čime se obezbeđuje pristupačnost i fleksibilnost stranice.

19.6Padding svojstva

Sa CSS-om, svakom elementu se može dodeliti još jedna vrsta praznog prostora koja se na engleskom jeziku zove padding. Padding je zapravo prazan prostor između strane elementa (njene bordure) i sadržaja tog elementa. Taj prostor se može pojedinačno 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 podešava veličina praznog prostora uz gornju, levu, donju i desnu stranu elementa.

Padding prostor se može podesiti pomoću procentualnih vrednosti, jedinice za dužinu ili pomoću ključne reči auto. Padding svojstva ne mogu dobiti negativne vrednosti.

Pomoću procentualnih vrednosti, veličina praznog prostora se sračunava na osnovu veličine elementa roditelja. Na primer, deklaracijom padding-right: 20% podešava se veličina praznog prostora uz desnu stranu elementa na 20% širine elementa koji ga sadrži. Ovo važi i za padding-top i padding-bottom svojstva.

Kao što je rečeno kod svojstava za margine, postoje dve vrste vrednosti izraženih u jedinici za dužinu. To su apsolutne vrednosti kao što je px. Ako se koriste apsolutne vrednosti, veličina praznog prostora će uvek biti jednaka. Fleksibilnost stranice se obezbeđuje korišćenjem relativnih vrednosti za dužinu, kao što je em. Korišćenjem relativnih vrednosti, veličina praznog prostora će uvek biti proporcionalna sa izračunatom veličinom sadržaja elementa. Ovakav način definisanja veličine praznog prostora (padding) se preporučuje.

Ako nije specificirana, podrazumevana vrednost za ovo svojstvo je nula. To znači da ne postoji prazan prostor između bordura elementa i njegovog sadržaja.Element ne nasleđuje ovo svojstvo od elementa roditelja.

Padding svojstvima se može postići sličan efekat koji se postiže korišćenjem svojstava za pozicionrianje elemenata na stranici i svojstava za podešavane margina.

19.7. Page layout svojstva

19.7.1 Uvod u pozicioniranje elemenata sa CSS-om

Jedno od najznačajnijih ograničenja HTML-a je bila nemogućnost da se stranice postave2 na način kako smo to mi zamislili ili skicirali na papiru. Moguće je bilo, mada ne uvek, da se stranica postavi korišćenjem tabela i transparentnih gif sličica veličine 1 piksel, ali obe ove ustaljene tehnike narušavaju princip razdvajanja opisa izgleda stranice od njenog sadržaja i otežavaju održavanje stranice i izazivaju dodatne glavobolje s obzirom na to da novi Web čitači ne prikazuju elemente isto kao stariji Web čitači. Ovaj metod treba izbegavati i sada kada nam ljubazni CSS nudi svojstva koja nas tih muka rešavaju, ne postoji izgovor za dalje korišćenje improvizujućih tehnika.

Pa kako su to CSS i raspored elemenata na stranici u vezi? Prva preporuka CSS1 uključivala je samo malo svojstava kojima se uređivao raspored elemenata na stranici. Sa CSS1:

širina i visina elementa su mogle da se definišu pomoću svojstava width i height respektivno

prazni prostori oko i unutar elementa su mogli da se definišu pomoću svojstava margin i padding respektivno

text-indent svojstvo je moglo da se primeni na prvu linju teksta elementa float i clear svojstva su omogućavala da se postavi raspored elemenata u obliku

kolona

Nedostajala je mogućnost 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 prevazišao 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 izdavaštvo. Programi kao što su Quark Express i PageMaker (čak i manje poznati i moćni programi za ove svrhe) dopuštaju da korisnik 'uzme' blokove sadržaja (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 mogućnosti da odradimo. CSS2 donosi mogućnost da se ovakve stvari urade sa elementima naše stranice.

19.7.2 O slojevima (layers)

Pre nego što krenemo dalje, smatram da na ovom mestu treba ukazati na jedan izvor nejasnoća. Naime, radi se o pojmu slojeva - layers. Mnogi programeri koji se bave kodiranjem web stranica su čuli za lejere3 i razvili svoja pogrešna ubeđenja u vezi sa njima. Probaću da razjasnim neke stvari.

2 Kada se kaže da se stranica 'postavi', misli se na raspored elemenata na stranici3 U daljem tekstu ću koristit izraz 'lejeri' s obzirom na to da je veoma raširena njegova upotreba među ljudima koji razvijaju web stranice i da mnogi kada čuju izraz slojevi ne znaju na šta se zapravo misli.

U prostom smislu, lejeri ne postoje. U složenijem smislu, lejer je metafora, ali lejeri kao fizički entiteti ne postoje. Ali ako se posmatraju Netscape-ove vlasničke ekstenzije za HTML, stvari kao što su lejeri zaista postoje. Pokušaću da objasnim ovo.

Kada govorimo o lejeru, u principu mislimo na HTML kontejner (ili element) koji može biti postavljen na neko konkretno mesto na nekoj lokaciji naše web strane. Aplikacije kao što je DreamWeaver koriste ovaj termin baš na ovaj način. Prva zabuna koja se javlja u vezi sa ovim je pogrešno mišljenje da lejer može da bude div i samo div. Ovo je, kao što rekoh pogrešno. Lejer u smislu HTML elementa koji može biti postavljen bilo gde na stranici može da bude bilo koji element (paragraf, stavka liste, bilo šta). To je tako u teoriji. U praksi, međutim, Netscape Navigator 4 će dozvoliti da pozicionirate paragrafe i druge lemente koristeći CSS2, dok Internet Explorer 4 i 5 stvarno misle da je lejer samo div.

Dakle da rezimiramo, u HTML-u ne postoji nešto što je lejer, već je layer izraz kojim se označava bilo koji element HTML-a koji je na stranici pozicioniran pomoću CSS2.

Međutim, ako pogledamo na lejere sa Netscape-ove pozicije, postoji nešto što je lejer u HTML-u. To je, naime, element <layer>.Ovo je bilo proširenje HTML-a od strane Netscape-a, koje (naravno) nikada nije bilo usvojeno od strane Internet Explorera. Savet je da ga jednostavno ignorišete i sve će biti u redu. To je uradio i Netscape, pa od verzije 6 više ne podržava ovo proširenje.

19.7.3 <div>

<div> je generički blok element. Druge elemente, kao što su paragrafi možete da postavljate unutar <div> taga, a onda ceo blok može lako biti pozicioniran na stranici. Ali to ne znači da ako koristite tag <div> morate da ga i pozicionirate. Sa druge strane, ne morate ni da koristite ovaj tag da biste pozicionirali sadržaj – možete da pozicionirate bilo koji element pomoću HTML-a. Međutim, ne treba zaboraviti da neki stariji Web čitači podržavaju pozicioniranje elemenata samo ako se nalaze unutar <div> taga.

19.7.4 Načini pozicioniranja

CSS2 preporuka definiše model kako elementi mogu biti pozicionirani. Postoji više načina za pozicioniranje elemenata na stranici.

1. Statičko pozicioniranje

Ovaj način 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 'ređa' elemente na strani onako kako je to naznačeno u kodu. Pozicija koju element, recimo jedan paragraf, zauzima na stranici naziva se statička pozicija. Na primer, ako imamo sledeći 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 treći paragraf </p></body>

tada je izgled stranice ovakav:

Vidimo da se drugi paragraf pojavljuje iza prvog i ispred trećeg paragrafa, baš onako kako smo definisali u HTML kodu. Zbog toga kažemo da drugi paragraf ima statičku poziciju jer ona ne odstupa od pozicije koja je definisana prirodnim tokom dokumenta.

Kada se bude objašnjavalo relativno pozicioniranje, biće nam potrebno poznavanje statičke pozicije i statičkog pozicioniranja.

2. Apsolutno pozicioniranje

Apsolutnim pozicioniranjem određujemo na kom mestu će se naći gornji levi ugao nekog elementa u odnosu na element roditelj. Treba zapamtiti da se apsolutno pozicioniranje ne vrši u odnosu na dokument i ne treba ga mešati sa relativnim pozicioniranjem. Znači 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 pomoću top i left svojstva odredili.

Treba znati i to, da kada se vrši apsolutno pozicioniranje, element roditelj ne sme imati statičku poziciju, već mora biti pozicioniran apsolutno ili relativno. Ako nam je ipak potrebno da nam na stranici element roditelj bude u prirodnom toku, možemo ga pozicionirati relativno i podesiti svojstva top i left na 0. Ovime element roditelj zadržava svoj prirodni tok u dokumentu, ali istovremeno omogućuje da drugi elementi budu pozicionirani u odnosu na njegovu poziciju.

U sledećem primeru, element 'prvi paragraf' je element roditelj za 'drugi paragraf'. U CSS iskaz-u 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 sledeći 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 sledeći način uz pomoć CSS-a:

Table 16 Fiksno pozicioniranje

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 je veoma blisko sa apsolutnim pozicioniranjem. Kada je element apsolutno pozicioniran, tada je on pozicioniran u odnosu na element koji ga sadrži. Kada skrolujete stranicu, tada se element takođe 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? Pogađate, fiksno pozicioniranje obezbeđuje upravo ovo.

3. Relativno pozicioniranje

Relativno pozicioniranje ima malo nesrećan naziv. Relativno u odnosu na šta? Mnogi ljudi dolaze do zaključka da se relativno pozicioniranje vrši u odnosu na element roditelj, a da se apsolutno pozicioniranje vrši u odnosu na gornju levu ivicu prozora. Ali, kao što smo već videli, to nije slučaj.

U redu, šta onda znači relativno? Relativno ovde znači da se element pozicionira u odnosu na njegovu statičku poziciju, odnosno u odnosu na poziciju na kojoj se javlja u prirodnom toku stranice. Dakle, kada relativno pozicionirate element kao da govorite Web čitaču 'Uzmi ovaj element, o Web čitaču, i premesti ga 10 piksela niže od mesta gde bi trebao da stoji'.

Ono sto je važno napomenuti kod relativnog pozicioniranja jeste to da mesto na kome se element prethodno nalazio, pre pozicioniranja, ostaje zauzeto. To znači 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 sledećom slikom:

CSS pozicioniranje nudi veoma moćan mehanizam za podešavanje izgleda stranice i razmeštaj elemenata na njoj, ali kao što to biva sa svakom moćnom tehnologijom nekada može doći 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 definišete i to na koji način, odnosno u odnosu na koji element se vrši pozicioniranje. Za tu svrhu se koristi svojstvo position.

Elementi mogu biti pozicionirani na četiri načina: statički, relativno, apsolutno ili fiksno. Vrednost ovog svojstva se postavlja jednom od sledećih ključnih reči: static, relative, absolute i fixed. Načini i vrste pozicioniranja su ranije objašnjeni ali ćemo se ovde kratko podsetiti.

Kada se element pozicionira statički, Web čitač će element iscrtati na onom mestu na kome se on pojavio u HTML kodu. U suštini, oco je tradicionalni način pozicioniranja koji koristi HTML.

Kada se element pozicionira relativno, Web čitač određuje položaj elementa relativno u odnosu na poziciju koju bi element imao kada bi se pozicionirao statički.

Apsolutnim pozicioniranjem se element postavlja na specificiranu lokaciju koja se određuje 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 način pozicioniranja elemenata na stranici bio pomoću div taga. To danas nije slučaj i može se pozicionirati bilo koji element na stranici.

Kada nije specificirana, element ima statičku poziciju.Element ne nasleđuje 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 (statičke) 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.

Svojstvo top može dobiti vrednost pomoću brojčane vrednosti za dužinu, procentualne vrednosti ili korišćenjem ključne reči auto.

Kada se za svojstvo top definiše brojčana vrednost za dužinu, tada se položaj elementa određuje u zavisnosti od toga koja je vrednot dodeljena svojstvu position.

Kada je svojstvo top definisano pomoću procentualnih vrednosti, tada se element pozicionira na osnovu vrednosti koja je izračunata kao zadati procenat od visine elementa roditelja.

Ako nije podešena, podrazumevana vrednost za svojstvo top je auto.Element ne nasleđuje svojstvo top od svog roditelja, mada pozicioniranje roditelja može 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 (statičke) 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.

Svojstvo left može dobiti vrednost pomoću brojčane vrednosti za dužinu, procentualne vrednosti ili korišćenjem ključne reči auto.

Kada se za svojstvo left definiše brojčana vrednost za dužinu, tada se položaj elementa određuje u zavisnosti od toga koja je vrednost dodeljena svojstvu position.

Kada je svojstvo left definisano pomoću procentualnih vrednosti, tada se element pozicionira na osnovu vrednosti koja je izračunata kao zadati procenat od širine elementa roditelja.

Ako nije podešena, podrazumevana vrednost za svojstvo left je auto.Element ne nasleđuje svojstvo left od svog roditelja, mada pozicioniranje roditelja može uticati na element dete.

bottom i right

Ova dva svojstva rade slične stvari kao i prethodna dva opisana; bottom svojstvo definiše položaj donje strane elementa a right svojstvo desne strane elementa. Sva pravila koja važe za svojstva left i top, važe i za ova dva. Treba reći 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.

Ovo svojstvo može biti specificirano pomoću brojčane vrednosti za širinu, procentualne vrednosti ili može biti postavljeno na auto.

Kada je vrednost svojstva width postavljena procentualno, tada se širina elementa određuje kao dati procenat od širine elementa roditelja.

auto

Vrednost auto postavlja podrazumevanu širinu elementa. To znači da će element biti onoliko širok koilko je dovoljno da se prikaže sadržaj tog elementa.

Ako nije postavljena, tada je podrazumevana vrednost za ovo svojstvo auto.Element ne nasleđuje vrednost svojstva width od svog roditelja.

height

Ovim svojstvom se postavlja željena visina elementa. Svojstvo height funkcioniše slično kao svojstvo width.

min-width

Ovo svojstvo nam dopušta da definišemo najmanju širinu elementa. Ako se širina elementa računa, i dobije se širina koja je manja od one koju smo odredili u svojstvu min-width, tada se uzima vrednost svojstva min-width.

Svojstvo min-width može biti specificirano pomoću brojčane vrednosti za širinu, procentualne vrednosti ili biti postavljena na none.

Kada je svojstvu min-width dodeljena procentualna vrednost, tada se ona sračunava kao procenat širine elementa roditelja.

Ako nije specificirana, podrazumevana vrednost svojstva min-width je none.Element ne nasleđuje svojstvo min-width od elementa roditelja.

max-width

Ovo svojstvo nam dopušta da definišemo najveću širinu elementa. Ako se širina elementa računa, i dobije se širina koja je veća od one koju smo odredili u svojstvu max-width, tada se uzima vrednost svojstva max-width.

Svojstvo max-width može biti specificirano pomoću brojčane vrednosti za širinu, procentualne vrednosti ili biti postavljena na none.

Kada je svojstvu max-width dodeljena procentualna vrednost, tada se ona sračunava kao procenat širine elementa roditelja.

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

min-height i max-height

Ova svojstva rade slične stvari kao i svojstva min-width i max-width koja su objašnjena. Ovim svojstvima se manipuliše visinom elementa, odnosno postavlja najmanja i najveća moguća visina elementa.

z-index

Zbog toga što CSS dozvoljava apsolutno pozicioniranje elemenata na stranici, moramo voditi računa o situacijama kada se elementi preklapaju. Naime, potrebno nam je da kontrolišemo 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.

Vrednost svojstva z-index može biti specificirana kao integer ili kao ključna reč auto.

Kada se vrednost svojstva z-index specificira za dva elementa koji imaju istog roditelja, tada je element sa većim z indeksom ispred elementa koji ima niži z-index. Ovo svojstvo nije primenljivo na celoj stranici već samo na sadržajnoj hijerarhiji elementa. To znači da je z-index elementa roditelja važan pri određivanju koji element prekriva a koji biva prekriven. Da pogledamo primer.

Pretpostavićemo 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 slučaju je to slika sa nižim z-indeksom, zato što njegov paragraf roditelj ima veći z-index. Dakle, paragraf sa većim z-indeksom prekriva onog sa sa manjim z-indeksom, i kao posledica slika sa nižim z-indeksom prekriva sliku sa višim indeksom. Zaključujemo da u ovom slučaju glavnu ulogu igraju paragrafi, na osnovu čijiih z-indeksa se određuje redosled, a da su z-indeksi sadržaja ta dva paragrafa nebitni.

Kada je z-index svojstvo podešeno na auto, tada Web čitač na osnovu relativno komplikovanog skupa pravila utvrđuje koji element će biti iznad a koji ispod.

Kada z-index nije podešen, podrazumevana vrednost ovog svojstva je auto.Element ne nasleđuje vrednost za z-index svojstvo.

visibility

Mada na prvi pogled skrivanje elemenata stranice zvuči besmisleno, u kombinaciji sa JavaScript jezikom prikazivanje i skrivanje elementa kada korisnik klikne ili pomeri miša preko nekog elementa, može biti veoma moćno oruđe. Svojstvo visibility omogućuje da se element učini vidljivim ili nevidljivim.

Ovo svojstvo može dobiti vrednost izraženu jednom od sledećih ključnih reči: visible, hidden i inherit.

Za prve dve ključne reči je jasno šta se njima postiže. Ključnom rečju inherit se naređuje elementu da nasledi vidljivost od svog elementa roditelja.

Ako nije podešena, podrazumevana vrednost svojstva visibility je inherit.

Element koji ima svojstvo visibility podešeno na hidden i dalje utiče na raspored elemenata na stranici. Elementi stranice su i dalje postavljeni kao da je element vidljiv. Ako ipak želite da se elementi na stranici raspoređuju kao da elementa nema na stranici, onda treba koristiti svojstvo display i dodeliti mu vrednosti none.

overflow

Zbog toga što autor stranice pomoću atributa width i height može da postavlja širinu i visinu elementa na stranici, može nastati situacija gde element nije dovoljno veliki da prihvati ceo sadržaj koji bi trebalo da se prikaže. Šta radimo kada se ovo desi? Za slike je tredicionalno da bivaju smanjene na veličinu koja odgovara dimenzijama elementa kontejnera. CSS je predstavio overflow svojstvo kojim se može Web čitaču dati instrukcija kako da prikaže element kada njegov sadržaj ne može da stane u okvire elementa.

Svojstvo overflow može uzeti vrednosti koje su opisane ključnim rečima: visible, hidden, scroll i auto.

Vrednost visible znači da Web čitač treba da uveća dimenzije elementa kako bi ceo sadržaj mogao da se priakže.

Vrednost hidden znači da Web čitač treba da odseče deo sadržaja koji ne može da se prikaže.

Vrednost scroll znači da Web čitač treba da ubaci scrollbar na element bilo da je sadržaj elementa veći od dimenzija elementa ili nije.

Vrednost auto znači da Web čitač treba da doda horiontalni ili vertikalni scrollbar kada se za time javi potreba, odnosno samo onda kada sadržaj prevazilazi gabarite elementa kontejnera.

Ako nije definisana, podrazumevana vrednost za ovo svojstvo je visible.Ovo svojstvo se ne nasleđuje.

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.

Vrednost svojstva float može biti definisano jednom od tri ključne reči: none, left, right.

Vrednost none znači da element ne menja svoj prirodni tok u dokumentu.

Vrednosti left znači da je element izmešten iz svog prirodnog toka u dokumentu i da je tretiran kao blok element sa leve strane ostatka sadržaja elementa roditelja.

Vrednosti right znači da je element izmešten iz svog prirodnog toka u dokumentu i da je tretiran kao blok element sa desne strane ostatka sadržaja elementa roditelja.

Podrazumevana vrednost za ovo svojstvo je none.Element ne nasleđuje vrednost za svojstvo float od svog roditelja.

clear

Svojstvo clear može 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. Može 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 određene 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.

Svojstvo clear može uzeti jednu od sledećih vrednosti: none, left, right, both.

Vrednost none znači da element dozvoljava pristup sa bilo koje strane.

Vrednost left znači da element ne dozvoljava pristup sa leve strane.

Vrednost right znači da element ne dozvoljava pristup sa desne strane.

Vrednost both znači da element ne dozvoljava pristup ni sa jedne strane.

Ako nije specificirana, podrazumevana vrednost za svojstvo clear je none.

Element ne nasleđuje vrednost svojstva clear od svog roditelja.

19.8 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 moguće redefinisati display tip elementa, odnosno način na koji će ga broewser tretirati – da li kao blok element ili recimo inline. Tako, ako želite, možete 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 kontroliše način na koji se tabele i njeni elementi iscrtavaju:

border-collapse border-spacing caption-side empty-cells table-layout

display

Svojstvo display određuje kako će element biti iscrtan na stranici.

Osnovne ključne reči kojima se dodeljuje vrednost svojstvu display su: none block inline list-item inline-block run-in

Vrednosti block, inline, ili list-item znače da će element imati dati diplay tip, bez obzira na podrazumevani tip koji je HTML specifikacijom dodeljen elementu. Kao što je rečeno malopre, u mogućnosti smo da paragraf prikažemo kao inline element ili link prikažemo kao blok. Vrednost inline-block se malo razlikuje. To znači 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 znači da element neće biti vidljiv i neće imati nikakav uticaj na raspored elemenata na stranici. Kada se svojstvo visibility podesi na hidden, tada se taj element takođe 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 moguće bilo koji element (recimo paragraf) prikazati kao tabelu ili deo tabele. Sa HTML-om ovo možda nema mnogo smisla (jer u HTML-u već postoji tag <table>, kolone, celije...). Međutim, 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...

Iako je teoretski podrazumevana vrednost za prikaz inline, Web čitači u suštini tretiraju element onako kako je to u HTML specifikaciji preporučeno. Dakle, ako Web čitač naiđe na paragraf, on će ga iscrtati kao blok element iako je podrazumevana vrednost inline.Element ne nasleđuje vrednost za ovo svojstvo od roditelja.

Web čitačima je dozvoljeno da ignorišu display svojstvo.

white-space

Svojstvo white-space se primenjuje samo na blok elemente. Njime se specificira šta Web čitača treba da rade sa dodatnim praznim prostorom koji se pojavi u nekom elementu (kada se pritisne taster tab, enter ili višetruki 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. Pomoću svojstva white-space se, dakle može kontrolisati način na koji Web čitač tretira prazan prostor u elementu.

Ovo svojstvo može uzeti jednu od sledećih ključnih reči kao svoju vrednost: normal, pre i nowrap.

Vrednost normal znači da će prazan prostor biti tretiran na tradicionalan način – dakle ignorisaće se sav dodatni prazan prostor.

Vrednosti pre kazuje Web čitaču da zadrži prazan prostor koji se pojavljuje u elementu. Ovo je ekvivalentno korišćenju taga <pre> u HTML-u.

Vrednost nowrap znači da će sadržaj preći u novi red samo onda kada se eksplicitno navede kraj linije pomoću taga br. Inače, sadržaj neće prelaziti u nov red zato što još uvek nije dostigao kraj horizontalne linije strane.

Ako nije definisana, podrazumevana vrednost za svojstvo white-space je normal.Element nasleđuje svojstvo white-space od svog roditelja.

Glavni tipovi vrednosti koje svojstva mogu da uzimaju su: length percentage

color url keyword shape

Takođe, svojstvu se može dodeliti i vrednost inherit kojom se govori Web čitaču da to svojstvo treba da bude nasleđeno od elementa roditelja.