[tutorial] osnove html-a i css-a

CENTAR ZA RAZVOJ I PRIMENU NAUKE, TEHNOLOGIJE I INFORMATIKE

NOVI SAD

2008.

Osnove HTML-a i CSS-a Seminar za profesore informatike osnovne i

srednjih škola Izrada prezentacija - Web

prezentacije kao podrška nastavim i školskim

aktivnostima.

Predavač: Jovan Sandić

C N T I

| 2 Osnove HTML-a i CSS-a

UVOD U HTML ................................................................... 2 HYPER JE SUPER! ............................................................ 2

ŠTA TO BEŠE HTML? ........................................................... 2

ELEMENTI HTML-A ............................................................ 3

STRUKTURA HTML DOKUMENTA ............................................ 3

ATRIBUTI ELEMENATA HTML-A.............................................. 4

VAŠA PRVA PRAVA INTERNET STRANICA .................................... 5

O ADRESAMA .................................................................... 6 ADRESE I ZAŠTO SU ONE BITNE... ............................................. 6

HYPERLINK (HIPER VEZA) ...................................................... 6

APSOLUTNI I RELATIVNI HIPRELINKOVI ...................................... 6

NASTAVAK SAGE O HTML-U............................................... 7 STRUKTURA HTML DOKUMENTA ............................................ 8

OBRADA TEKSTA ................................................................. 9

I DALJE TRAJE SAGA O HTML-U ........................................ 11 PRE NASTAVKA... .............................................................. 11

LISTE ............................................................................. 11

RAD SA SLIKAMA.... ........................................................... 12

LINKOVI .......................................................................... 13

DA, HTML SAGA NIJE GOTOVA......................................... 14 MAPIRANJE NA SLIKAMA... .................................................. 14

DODATNI ATRIBUTI BODY TAGA ............................................ 15

SPECIJALNI KARAKTERI ........................................................ 16

META TAGOVI .................................................................. 16

TABELE ........................................................................... 17

UPLOAD FAJLOVA... ......................................................... 18 UPLOAD FAJLOVA NA SERVER (FTP) ....................................... 18

IZBOR FTP SOFTVERA ......................................................... 18

POTREBNI FTP PARAMETRI .................................................. 19

UPOZNAJMO I TESTIRAJMO JEDAN FTP PROGRAM ..................... 19

CSS – CASCADING STYLE SHEETS ...................................... 21 KASKADNI STILOVI ............................................................. 21

CSS SINTAKSA.................................................................. 22

CILJNI ELEMENTI ............................................................... 22

GDE MOŽE DA SE NALAZI CSS KOD ........................................ 23

REDOSLED SLAGANJA (PRIORITET) I INTERPRETACIJE STILOVA ........ 23

SVOJSTVA I VREDNOSTI ....................................................... 24

PONOVIMO NAUČENO I NAUČIMO NEŠTO NOVO O CSS-U ............ 25

PONOVIMO SINTAKSU ........................................................ 26

VREDNOSTI ATRIBUTA STILOVA ............................................. 28

ČESTE UPOTREBA STILOVA ................................................... 28

CSS BOX MODEL .............................................................. 29

CSS ZAKLJUČNO ............................................................... 32

Uvod u HTML

HYPER JE SUPER!

Da biste bili uspešan stvaralac Internet stranica morate dobro savladati Hyper Text Markup Language tj.

HTML. HTML je jednostavan jezik za opis strukture i opis sadržaja Internet dokumenata koji se

prikazuju u Internet čitačima (browser-ima). Postoje mnogi programi koji pojednostavljuju kreiranje

HTML Internet strana (Macromedia Dreamweaver i Microsoft Front Page, recimo) ali potpuna kontrola

nad izradom Internet dokumenta podrazumeva mnoge akcije i korekcije na najnižem nivou, odnosno

intervencije u samom HTML kodu. Zato je neophodno da savladate osnove HTML-a, ako želite da se

upustite u avanturu izrade Internet stranica. Znanje HTML-a nije prednost, već uslov da bi bili uspešan

kreator Internet prezentacija. U ovoj lekciji pronaći ćete samo osnovne i uvodne informacije o HTML-u, a

u sledećim lekcijama i mnogo više, o ovom jednostavnom a istovremeno moćnom alatu za izradu Internet

stranica. Kad budemo familijarni sa HTML-om, upoznaćemo se i sa osnovama kaskadnih stilova,

moćnom alatkom za opis izgleda sadržaja Internet dokumenata (Cascading Style Sheets) i sa gore

pomenutim alatom Macromedia Dreamweaver-om.

Šta to beše HTML?

Internet, kao svetsku mreža računara, možete koristiti na više načina. Jedan od najpopularnijih načina

upotrebe je pregledanje Internet stranica, proces popularno nazvan surfovanje Internetom. Svaka Internet

stranica je hipertekstualan (Hypertext) dokumenat. Hipertekst se sastoji od meĎusobno povezanih delova

teksta (ili drugih objekata) tako da čitalac (korisnik) interaktivno odreĎuje redosled čitanja (pregledanja).

To praktično znači da dokumente na Internetu ne morate da čitate sekvencijalno kao knjigu, već se

možete šetati kroz dokumenat, ili dokumente po želji. Možda bi bila najbolja analogija sa knjigom koja

sadrži puno fusnota, gde čitalac kad naiĎe na nepoznat termin označen fusnotom, on preĎe na proučavanje

fusnote na dnu stranice ili u na kraju knjige (endnote, index pojmova), i po završetku se vraća na mesto

čitanja gde se nalazi nepoznat termin, pa dalje nastavlja čitanje redom, tj. sekvencijalno.

Kad su u pitanju Internet dokumenti, sekvencijalno čitanje uopšte nije neophodno. Korisnik se kreće kroz

Internet dokumente koristeći veze (linkove), pomoću kojih skače na različite delove dokumenta ili

| 3 posebne dokumente, u skladu sa svojim interesovanjima i potrebama. Kretanje kroz takve dokumente

naziva se navigacija a ne čitanje. Veze (eng. Links) se nazivaju još i hipervezama (Hyperlinks). Ove veze

ugraĎujemo u Internet dokumenat, pogaĎate, uz pomoć HTML-a. MeĎusobno povezani dokumenti na

Internet-u ne sadrže samo tekstove već i različite sadržaje kao što su slike, zvuci, animacije, video

materijale, pa se Internet može nazvati i hipermedijalnim sistemom. Sve ove medije i njihov meĎusoban

odnos opisujemo i ugraĎujemo u Internet stranicu, opet uz pomoć HTML-a. Dakle, osnovni jezik za

kreiranje strukture i sadržaja, kao i formatiranje sadržaja stranica na Internetu jeste HTML.

Priča o nastanku HTML-a stara je koliko i sam Internet. Sa razvojem Interneta razvijao se i HTML, a

jedan od najvećih ‟krivaca‟ za to je firma Netscape, koja je na samom početku na svoju ruku uvodila

nestandardna proširenja u HTML jezik. Naravno, ni ostali proizvoĎači browser-a nisu puno zaostajali za

Netscape-om, pa je za taj period razvoja Interneta vezana i priča o takmičenju proizvoĎača browser-a u

uvoĎenju nestandardnih proširenja u iste, poznata pod imenom ‟Rat Browser-a‟. Da bi se izbegli dalji

‟ratovi‟ meĎu gigantima softverske industrije, proširenjima, standardima i novim verzijama HTML-a bavi

se posebno zvanično telo zvano W3C komitet. Dakle, HTML je živ jezik koji se razvija!

HTML nije programski jezik u onom smislu u kom su to C++ ili Visual Basic, jer ne sadrži komande,

tipove podataka, operatore, promenljive i slične stvari. HTML je više jezik za opis Internet dokumenata.

Pomoću njega možete menjati boju i veličinu teksta, boju pozadine, umetnuti sliku i zvuk na Internet

stranicu, ali ne možete izračunati koliko je 2+2. U svojoj suštini HTML dokumenat je običan tekstualni

dokumenat sa ekstenzijom .htm ili .html, tako da se može kreirati i u bilo kom od tekst editora, kao što su

Notepad, WordPad, MS Word. Iako je izrada HTML stranica vrlo jednostavna, postoje pravila koja

morate znati i poštovati ih pri izradi HTML dokumenata. Svaki HTML dokument sastoji se od

deklaracija, elemenata i atributa elemenata. O deklaracijama reći ćemo više u nekoj od sledećih lekcija, a

sada ćemo se posvetiti elementima i atributima.

Elementi HTML-a

Elementima formiramo strukturu i opisujemo izgled delova sadržaja HTML dokumenata. Elementi mogu

da se nalaze bilo gde u okviru HTML dokumenta. Svaki elemenat sastoji se iz tri dela: početni tag,

sadržaj i završni tag. Tag je specijalna sekvenca znakova – takozvani marker (‟Markup‟) koji je ograĎen

znacima „<‘ i ‘>„. Završni tag razlikujemo od početnog po znaku „/‟ posle znaka „<„. Svaki HTML

dokument poseduje bar jedan elemenat najvišeg nivoa – HTML tag. Na primer da biste napravili

najjednostavniji HTML dokumenat, dovoljno je da pokrenete Notepad, unesete početni '<html>' i završni

HTML tag,'</html>'. Snimite ovaj dokumenat kao 'prva.html'. Ovde je važno da pri snimanju izaberete u

listi Save as type vrednost All Files a da za ime zadate 'prva.html'. Nakon što zatvorite Notepad videćete

Vaš 'prva' sa prepoznatljivom ikonicom Internet dokumenta, slično kao na slici 6. Možete i da snimite

'prva' kao običan tekstualni dokumenat pa da ga nakon snimanja preimenujete u 'prva.html'. Dvoklikom

na ikonicu dokumenta prva.html otvoriće se Internet Explorer (ili bilo koji drugi Internet browser koji je

podrazumevan na vašem računaru; mi ćemo u daljem tekstu pretpostavljati da je to Internet Explorer) koji

će Vam prikazati potpuno praznu stranicu. Ništa lakše od pravljenja Internet stranica, zar ne?

[prva.html-code]

<html>

</html>

Struktura HTML dokumenta

Da bi ova stranica ipak bila prava HTML stranica fali joj sadržaj. Tag <html> je okvir u kom se nalaze

svi ostali tagovi. HTML dokument uvek počinje tagom <html>, a završava se tagom </html>. Postoje još

dva HTML elementa koji su visokog nivoa, odmah uz html tag. To su head i body tagovi. Ovim

elementima opisuje se zaglavlje i telo HTML dokumenta.

HEAD

U zaglavlju se definišu razni podaci koji učestvuju u komunikaciji Internet čitača i Internet servera,

odnosno informacije o samom dokumentu (naslov, opis, ključne reči, ime autora, itd.); mada je upotreba

ovog taga opciona preporučujemo da ga uvek navedete. Browser ne prikazuje informacije koje se nalaze

izmeĎu tagova < head > i </ head >, osim sadržaja taga <title>. Sadržaj taga <title> je naslov HTML

dokumenta koji će se pojaviti u naslovnoj liniji web browser-a.

| 4 BODY

Sve ono što vidimo u prozoru browser-a, tj. sadržaj stranice i HTML elementi za formatiranje (opis) tog

sadržaja, nalazi se u telu dokumenta koje uokviruje <body> tag. U HTML dokumentu sme da postoji

samo jedan par tagova <body></body>. Ovaj element specificira glavni sadržaj dokumenta. Početni tag

<body> ima atribute koji omogućavaju da se specificiraju karakteristike koje va\e na nivou dokumenta

(boja pozadine ili slika, boja teksta, boja posećenih i neposećenih linkova, itd.)

Komentar u HTML kodu

Komentari u HTML kodu se navode u sledećem obliku:

<!- Ovo je tekst komentara –>

Komentar počinje sekvencom znakova <!- (izmeĎu ovih znakova ne sme da postoji ni jedan razmak), a

završava se sekvencom znakova -> (izmeĎu ova dva znaka može doći i razmak). Sve što se nalazi izmeĎu

ove dve sekvence znakova Web browser će ignorisati.

Ispod se nalazi jedan primer pravilno struktuiranog html dokumenta.

[struktura.html-code]

<html>

<head>

<title>Naslov</title>

</head>

<body>

Tekst dokumenta.

</body>

</html>

U HTML-u ne postoji razlika izmeĎu malih i velikih slova za elemente u tagovima tako npr. <body>,

<Body>, i <BODY> predstavljaju iste elemente. Preporučujemo da elemente HTML-a pišete malim

slovima. TakoĎe sve suvišne znakove razmaka (space), tabulator i znake za novi red u Internet

dokumentu Internet čitač ignoriše, ali njihovo postojanje utiče na veličinu Internet dokumenata. Stoga

preporučujemo da ih izbegavate, jer popularnost i posećenost Vaših stranica, osim izgleda i sadržaja

zavisi u velikoj meri i od brzine učitavanja istih.

Neki elementi dopuštaju da se izuzme završni tag, na primer elemenat br. Elemenat br služi za prelom

reda u HTML-u (kao kad pritisnete Shift+ENTER u programu za obradu teksta). Elemenat br ne zahteva

završni tag u obliku </br>. Još jedan primer HTML elementa koji dozvoljava da se izuzme završni tag je

img elemenat, namenjen uključivanju slika na Internet stranicu.

Atributi elemenata HTML-a

Elementi mogu da sadrže atribute kojima se opisuju specifični parametri elementa kao što su dužina,

visina, lokacija objekta sa koje se elemenat učitava i slično. Atributi se uvek uključuju u početni tag,

nikako u završni. Atribut se sastoji iz ključa i njemu dodeljene vrednosti i to se zapisuje na sledeći način:

Naziv_Atributa="Vrednost_Atributa". Vrednost atributa ukoliko postoji je ograničena dvostrukim ili

jednostrukim navodnicima (uobičajeno je da se navode dvostruki kako bi u okviru njih mogli postaviti i

jednostruke ako se ukaže potreba za tim).

Na primer, img elemenat poseduje src atribut koji obezbeĎuje lokaciju slike sa koje se slika učitava i

atribut alt koji obezbeĎuje alternativni tekst koji će biti prikazan na mestu predviĎenom za prikazivanje

slike ukoliko učitavanje slike na HTML stranicu ne uspe iz bilo kog razloga. Sintaksa img elementa je

sledeća:

<img src="Lokacija\ImeSlike" alt="Alternativni_Tekst">.

Na primer:

<img src="Slike\SlikaLeviBaner.jpg" alt="Levi_Baner">

gde je "Slike\" lokacija slike, a ‟SlikaLeviBaner.jpg‟ je ime slike koja se učitava.

| 5 Pošto je pitanje ispravnog navoĎenja lokacije objekata koje uključujete u HTML stranicu od suštinske

važnosti za njeno ispravno funkcionisanje, reći ćemo nešto više o adresiranju. Šta praktično znači izraz

"\Slike\"? Znači da se fascikla ‟Slike‟ koja sadrži sliku ‟SlikaLeviBaner.jpg‟ nalazi na istoj lokaciji (u

istoj fascikli, na istom disku...) na kojoj se nalazi i HTML stranica u čijem kodu se nalazi gore pomenuti

img tag. Pomenuti način adresiranja zove se relativno adresiranje.

Postoji i apsolutno adresiranje, odnosno navoĎenje pune adrese od korenskog direktorijuma, root-a.

Recimo da se i fascikla ‟Slike‟ i HTML stranica koja sadrži gornji img tag nalaze na C disku ili na sajtu

cnti.info. Apsolutne adrese u src atributu imgtag-a bi u tom slučaju izgledale ovako

<img src="C:\Slike\SlikaLeviBaner.jpg." alt="Levi baner">

odnosno

<img src="http://www.cnti.info/Slike/SlikaLeviBaner.jpg."

alt="Levi baner">

Prednost relativnog adresiranja je u tome što Vi bez bojazni možete premeštati HTML stranicu i fasciklu

‟Slike‟ gde god želite, sve će funkcionisati sjajno dok god su stranica i fascikla ‟Slike‟ na istoj lokaciji.

Ako koristite apsolutne adrese, tada pri svakom premeštanju morate menjati direktno u HTML kodu sve

adrese. To je u redu ako učitavate samo jednu sliku na stranicu, ali šta ako ih je više? Iako programi kao

Dreamweaver, što ćemo videti kasnije, imaju rutinu koja će pokušati da Vas spase greške ako premeštate

fajlove koji su linkovani (slike u našem primeru) i da zameni stare nevažeće linkove novima, greške su

uvek moguće.

Povedite računa o tome gde smeštate slike i slične objekte koje uključujete u HTML kod, jer se vrlo lako

može desiti da se isti objekti ne prikažu ispravno na HTML stranici ako ste nešto zabrljali sa adresama. O

adresama biće opet reči u nekom od sledećih tekstova, kad budemo govorili o postavljanju Internet

prezentacije na Web server.

Vaša prva prava Internet stranica

Pre nego preĎemo na izradu same HTML stranice, potrebno je da napomenemo da je svrha ovog primera

da ukaže na jednostavnost izrade stranica uz pomoć HTML-a. Radićemo u lokalu, na Vašem računaru

tako da ćemo koristiti apsolutne adrese u ovom primeru. Napravimo nekoliko fascikli u koje ćemo

smestiti stranicu i sve objekte koju ćemo ugraditi u nju. Na C disku napravite novu fasciklu i dajte joj ime

‟Radna’. U fascikli ‟Radna’ napravite novu fasciklu ‟Slike‟. PronaĎite jednu lepu sliku na Vašem disku i

iskopirajte je u fasciklu ‟Slike‟, pa je zatim preimenujte u ‟SlikaLeviBaner‟. U našem primeru slika je tipa

jpg, ali Vi ne morate slediti naš primer, možete iskoristiti sliku bilo kog tipa, recimo png ili gif . Naravno,

tada morate i svuda gde se u HTML kodu pojavljuje ime ‟SlikaLeviBaner.jpg‟ zameniti ga sa

‟SlikaLeviBaner.png‟ ili ‟SlikaLeviBaner.gif‟, u zavisnosti od tipa slike koju ste iskopirali.

Vreme je da konačno napravimo Vašu prvu pravu Internet stranicu. Svi programeri i informatičari sigurno

su u životu nebrojeno puta napravili aplikaciju „Zdravo svete“ počinjući da uče neki programski jezik, pa

zašto bismo mi bili izuzetak? Dakle, napravićemo Internet stranicu na kojoj piše 'Zdravo HTML svete!'.

Otvorite novi Notepad dokumenat i ukucajte u njemu:

[zdravosvete.html-code]

<html>

<head>

<title>Moja prva Internet stranica</title>

</head>

<body bgcolor="#FFFFFF">

Zdravo HTML svete! <br>

<img src ="C:\Radna\Slike\SlikaLeviBaner.jpg" alt ="Levi_Baner"

width ="150" height ="480" hspace ="30" vspace ="10" border ="2"

align ="left">

</body>

</html>

Pri snimanju dajte ime dokumentu, recimo ‟zdravosvete.html‟, i smestite ga u fasciklu ‟Radna‟. Pokrenite

ovu stranicu dvoklikom na ikonicu dokumenta zdravosvete.html. Uočite da ova stranica ima naslov ‟Moja

prva Internet stranica‟ zahvaljujući tagu title koji se smešta u okviru head taga.

| 6 Kao što je već jednom napomenuto body tag sadrži atribute za kontrolu i format prikaza koji se odnose na

telo dokumenta. Jedan od njih je bgcolor - pomoću koga se navodimo boju pozadine. Boju zadajete kao

heksadecimalan broj prema RGB (RedGreenBlue - CrvenaZelenaPlava) kolornoj šemi, kojoj prethodi

znak #. Prva dva heksadecimalna broja se odnose na crvenu, druga dva na zelenu i zadnja dva na plavu

(npr. Crvena boja je #FF0000, Bela #FFFFFF, crna #000000,...).

O adresama

Adrese i zašto su one bitne...

Adrese su od velike važnosti za ispravno funkcionisanje Web-a. Ako imate neispravnu adresu, da li ćete

stići na željeno odredište? Verovatno ne. Zato ćemo adresama na samom početku obratiti punu pažnju.

Napominjemo još jednom da problemi sa adresama čine 80% problema sa kojima ćete se susretati u svom

radu sa Web-om. Pretpostavljamo da kao nastavnici informatike posedujete odreĎena znanja o adresama.

Hyperlink (Hiper veza)

Neformalna definicija Hyperlink-a: hyperlink je referenca ili navigacioni elemenat u dokumentu ka

drugoj sekciji istog ili drugog dokumenta koji može biti na istom ili drugom domenu.

Često hyperlink skraćujemo na link. Hypertext (u značenju više od teksta) je oblik teksta koji egzistira na

Web-u koji je funkcionalno bogatiji od običnog tekstualnog dokumenta jer omogućava korisniku da

istražuje druge Hiper tekstove, odnosno Web stranice povezanih sa prvom stranicom specifičnim rečima

ili slikama. Veza izmeĎu prve stranice i drugih se ostvaruje upravo hiperlinkovima definisanim na

specifičnim rečima, slikama,... Hiperlink nije ništa drugo do adresa zapisana u odreĎenom obliku.

Kada kreiramo hiperlink, odredište ove adrese je zapisano u konkretnom formatu, koji se još skraćeno

naziva URL (Uniform Resource Locator). URL sadrži u sebi adresu web servera (lista poddomena sve do

internet domena najvišeg nivoa), putanju do stranice (fajla) i sam naziv fajla (web stranice). URL takoĎe

identifikuje protokol koji upravlja datim tipom resursa (fajlova), kao što su HTTP ili FTP.

Na primer, posmatrajmo adresu http://www.cnti.info/forumi/phpBBInf/Index.php

http:// je oznaka Hyper Text Transfer Protocol-a

www.cnti.info je adresa servera, www je poddomen domena cnti, a oba su poddomeni domena

info

/forumi/phpBBInf/ je putanja do fajla (web stranice)

Index.php je ime fajla (web stranice)

Apsolutni i relativni hiprelinkovi

Hiperlinkove možemo razvrstati na relativne i apsolutne. Apsolutni hiperlinkovi (URL-ovi) sadrže

potpune adrese, uključujući tip protokola, naziv web servera, putanju do fajla i naziv fajla. Relativnom

URL-u nedostaje jedan ili više delova potpune adrese. Nedostajući delovi adrese se formiraju u odnosu na

tekuću stranicu na kojoj se nalazi sam URL. Na primer, ukoliko nedostaju tip protokola i web server, web

čitač će iskoristiti, protokol i naziv domena sa trenutne stranice.

http://www.cnti.info/forumi/phpBBInf/index.php je apsolutna adresa

/forumi/phpBBInf/index.php je primer relativne adresa u odnosu na neku tekuću stranicu

Uobičajena je praksa da se unutar stranica na Web-u koriste relativni URL-ovi koji sadrže samo

delimičnu putanju i naziv fajla.

Koncentrišimo se samo na adrese. Uzmimo da postoji sledeća hijerarhija fascikli na našem serveru

www.cnti.info, odnosno u korenskom direktorijumu www.

Recimo da u fascikli Docs postoji dokumenat Index.htm. Recimo da u fascikli jpg postoji slika logo.jpg.

Ako se obraćate apsolutnom adresom slici logo.jpg ona glasi ovako

http://www.cnti.info/Primer/Slike/jpg/logo.jpg . Ovakvom adresom možemo se obratiti dokumentu

http://www.cnti.info/forumi/phpBBInf/Index.php

http://www.cnti.info/

http://www.cnti.info/forumi/phpBBInf/index.php

http://www.cnti.info/forumi/phpBBInf/index.php


http://www.cnti.info/Primer/Slike/jpg/logo.jpg

| 7 logo.jpg sa bilo koje stranice na Web-u.

Ako se obraćate dokumentu Index.htm koji se nalazi u fascikli Docs apsolutnom adresom ona će glasiti

ovako http://www.cnti.info/Primer/Docs/index.htm .

Dakle, kad koristite apsolutne adrese one uvek navode punu putanju od korenske fascikle do ciljnog fajla.

U slučaju Web-a korenska fascikla se zamenjuje prvo oznakom protokola http:// a zatim i imenom web

servera/domenom www.cnti.info i na nju se dodaje putanja do fajla sa imenom fajla na kraju.

Kada apsolutno adresiranje nije dobro? Ako premestite sajt na novi server svuda u svim dokumentima

treba promeniti prvi deo (domenski deo) adrese. Na primer ako selite www.cnti.co.yu na adresu

www.cnti.info onda je neophodno svuda u apsolutnim linkovima na svim stranicama morate zameniti ove

dve vrednosti. Ovo se relativno lako radi sa programima poput dreamweaver-a, ali ne dajte se zavarati u

pitanju je posao koji nije naivan i vrlo lako se može pogrešiti. Druga potencijalno problematična osobina

asolutnih adresa je njihova dužina koja raste sa usložnjavanjem hijerarhije i što je adresa duža lakše je

pogrešiti odnosno teže je baratati njome.

Ako želimo da referenciramo sliku logo.jpg na stranici index.htm to možemo da uradimo referenciranjem

apsolutne i relativne adrese. Videli smo da apsolutna adresa u sebe uključuje punu putanju do fajla

http://www.cnti.info/Primer/Slike/jpg/logo.jpg. Na bilo kojem fajlu u okviru cnti.info domena pa i na

celom Web-u da upotrebite u HTML kodu ovu adresu slika logo.jpg biće ispravno referencirana. Ukoliko

fajlove sajta premestimo na neki drugi server, recimo www.cnti.co.rs gornji link neće raditi sve dok ga ne

zamenimo ispravnim (http://www.cnti.co.rs/Primer/Slike/jpg/logo.jpg).

Kako se pravi relativna adresa?

Probleme apsolutnih adresa zaobilazimo upotrebom relativnih adresa. Relativna adresa se pravi tako što

navodimo putanju od tekućeg fajla sa kojeg referenciramo do prvog zajedničkog pretka sa fajlom na

koji se referenciramo, a zatim navodimo putanju od zajedničkog pretka do fajla na koji se

referenciramo. U našem primeru, da bi referencirali sa Index.htm dokumenat logo.jpg ispravna relativna

adresa bi bila sledeća ../Slike/jpg/logo.jpg. Podsetimo da je u fascikli Docs dokumenat Index.htm, a u

fascikli jpg slika logo.jpg.

Dakle, sekvenca znakova ../ ima značenje nivo više, i već na tom nivou u našem primeru smo stigli do

prvog zajedničkog pretka naša dva fajla (fascikla Primer):

onog koji referencira (Index.htm) i

onog na koji se referencira (logo.jpg).

Zamislite da se fizički krećete kroz hijerarhiju: izlazimo iz fascikle Docs i nalazimo se u fascikli Primer.

Odatle prosto putujemo do dokumenta logo.jpg kroz fasciklu Slike i fasciklu jpg.

Prednost relativnog adresiranja je u tome što možete premeštati fasciklu Primer sa njenim sadržajem

koliko god hoćete, gornji relativni link će ispravno raditi dokle god se ne naruši postojeća hijerarhija.

Napominjemo ovde da čak i prosto preimenovanje fascikle jpg narušava konzistentnost svih adresa koje

se referenciraju na sadržaj fascikle jpg pre njenog preimenovanja. Jednostavno rečeno, nemojte menjati

imena fascikli nakon što ste se linkovali na njihov sadržaj. Ovo pravilo važi iz apsolutne i za relativne

adrese ravnopravno. Ovde postoji i izuzetak, kad je u pitanju domen, sve kombinacije su dozvoljene. Na

primer, www.cnti.info i www.cnti.INFO i www.CNTI.info su iste adrese. Uočite, ponovo napominjemo,

da u nastavku putanje nakon domena nije svejedno da li su mala ili velika slova. Da bi adresa bila

ispravna moraju se identično navesti imena fascikli u putanji do odredišnog fajla. U tom smislu adrese

../Slike/jpg/logo.jpg

../Slike/Jpg/logo.jpg

nikako nisu iste, i na to treba obratiti pažnju od samog starta. Ovakve greške su jako teško uočljive, sa

adresama treba baratati oprezno.

Nastavak sage o HTML-u Podsetimo se i proširimo svoja znanja:

HTML -je skraćeno od Hyper Text Markup Language.

HTML dokument je obična tekstualna datoteka sa tekstom i tagovima. HTML je case insensitive, ne pravi

http://www.cnti.info/Primer/Docs/index.htm

http://www.cnti.co.yu/


http://www.cnti.info/Primer/Slike/jpg/logo.jpg

http://www.cnti.co.rs/

http://www.cnti.co.rs/Primer/Slike/jpg/logo.jpg




| 8 se razlika izmeĎu malih i velikih slova u HTML elementima (BODY = Body = body). Preporuka je da

koristimo mala slova.

Sadržaj dokumenta opisujemo tagovima, odn tagove koristimo da definišemo izgled dokumenta. Svaki

tag ima otvarajući tag: <ime_elementa>. Većina ih ima i zatvarajući tag: </ime_elementa>. Oni tagovi

koji nemaju zatvarajući elementa zovu se prazni tagovi. Prazan tag izgleda ovako: <ime_elementa> a

sreće se i u obliku <ime_elementa/>. Potonji zapis je praktičniji.

Da rezimiramo, tag je specijalni tekst tkz. "markup"-marker koji je ograĎen sa "<" i ">". A završni tag

uključuje i znak "/" posle znaka "<". Znači sve što se nalazi u tagovima HTML dokumenta Web čitač

prihvata kao komande koje tumači a sve ostalo predstavlja klasičan tekst u ekranu Web čitača.

Elementi/tagovi ne smeju da se preklapaju tj. ukoliko se početni tag em elementa pojavljuje zajedno sa

tagom p elementa, tada završni tag em elementa mora takoĎe pojaviti sa p elementom. Na primer,

neispravno bi bilo sledeće: <p><em> neki tekst </p></em>. U velikom broju slučajeva browser će ovo

sažvakati, ali je pitanje na šta će ličiti prikaz stranice koja sadrži gornji primer. Ispravno je sledeće

<p><em>neki tekst</em></p>.

U okviru otvarajućeg taga može postojati osim imena HTML elementa, i odreĎeni broj atributa. Atributi

su parovi naziva atributa i vrednosti koji definišu osobine tog elementa. Atributi se uvek uključuju u

početni tag nikad u završni a sintaksa je sledeća: NazivAtributa = "VrednostAtributa". Vrednost

atributa ukoliko postoji je ograničena jednostrukim ili dvostrukim navodnicima. Uobičajeno je da se

navode dvostruki kako bi u okviru njih mogli postaviti i jednostruki. Kod atributa treba biti oprezan sa

mešanjem malih i velikih slova, jer vrednost atribut može biti i adresa, a one su osetljive na promenu

slova (case-sensitiv).

Pri prikazivanju stranica browser-i se oslanjaju na informacije date u tagovima. Praznine se ignorišu u

okviru HTML-a. Više praznina se svodi na jednu (enteri, razmaci, tabovi).

Primer atributa <body bgcolor="#FFFFFF">. Ovaj atribut kaže da će pozdinska boja ove stranice biti

bela.

Struktura HTML dokumenta

Sledeći tagovi opisuju osnovnu strukturu HTML dokumenta: html, head i body.

Tag <html> je okvir u kom se nalaze svi ostali tagovi. HTML dokument uvek počinje tagom

<html>, a završava se tagom </html>.

Tag <head> uokviruje zaglavlje u kom se nalaze informacije o samom dokumentu (naslov, opis,

ključne reči, ime autora,...); opcion je. Završni tag je </head>. Browser ne prikazuje informacije

koje se nalaze izmeĎu tagova <head> i </head>, osim sadržaja taga <title> Sadržaj taga <title> je

naslov HTML dokumenta koji će se pojaviti u naslovnoj liniji web čitača. Zaglavlje služi da

prosleĎuje razne informacije Web čitaču, da definiše Web dokument a ne utiče na prikaz HTML

dokumenta. U okviru HEAD elementa navode se Web čitaču sem naslova dokumenta i razne

informacije kao što je uključivanje eksternih stilova, script funkcije, informacije o samom Web

dokumentu, tj. meta informacije.

HEAD može da sadrži sledeće HTML elemente

o base- Osnovna adresa dokumenta

o link - Povezivanje dokumenata

o script - NavoĎenje klijentskog skript - programskog koda koji Web čitač razume

o style - Definisanje stilova za prikaz

o title - Naslov dokumenta

o meta - Meta informacije, informacije o samom Web dokumentu, recimo karakter skup

dokumenta, ime autora, ključne reči...

Sve ono što vidimo u prozoru browser-a, tj. sadržaj stranice, nalazi se u telu dokumenta koje

uokviruje element <body>. U HTML dokumentu sme da postoji samo jedan par tagova

<body></body> izmeĎu kojih se nalazi glavni sadržaj dokumenta. Početni tag <body> ima

atribute koji omogućavaju da se specificiraju karakteristike dokumenta (boja pozadine ili slika,

boja teksta, boja posećenih i neposećenih linkova, ...).

| 9 <!- Ovo je komentar u HTML-u–> Komentare U HTML-u započinjemo sekvencom znakova <!-

(bez praznina izmeĎu), a završavamo sekvencom znakova ->. Ono što se nalazi u komentaru,

browser-i potpuno ignorišu.

Ispod se nalazi primer jedne potpuno funkcionalne HTML stranice koja će po učitavanju u

browser u njegovoj naslovnoj liniji imati ispisan tekst Hello World!, kao sadržaj stranice imaće

tekst Zdravo živahni svete! Skup karaktera upotrebljenih na ovoj stranici je sličan Unicode-u i

označava se sa utf-8 u okviru meta taga i omogućiće da se sva naša slova na ovoj html stranici

ispravno prikažu.

Primer01.html

<html>

<head>

<title>Hello World!</title>

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

/>

</head>

<body>

<!- Ispod se nalazi sadržaj dokumenta ->

Zdravo živahni svete!

</body>

</html>

Obrada teksta

Pasusi teksta (paragrafi) se navode izmeĎu <p> tagova. Svi <p> tagovi počinju u novom redu. Iza

završnog </p> taga, prelazi se u novi red, sa dodatnim praznim prostorom izmeĎu. Ukoliko treba ubaciti

praznu liniju bez dodavanja praznog prostora, koristi se tag <br>. U okviru početnog taga <p> može se

navesti atribut align, koji odreĎuje horizontalno poravnanje paragrafa; vrednost ovog atributa može biti

jedna od sledećih: left, center, right i justify. Ukoliko se navede samo početni tag <p>, podrazumeva se

da je sledeći element u novom redu. Završni tag je opcioni ali vam preporučujemo da ga koristite.

Primer02.html

<html>

<head>

<title>Pasusi</title>


/>

</head>

<body>

<p>Ovo je 1. pasus.</p>

<p>Ovo je 2. pasus.</p>

<br>

<p>Ovo je 3. pasus ispred kog je bio jedan prazan red.</p>

<p align="right">Ovo je pasus koji je desno poravnat.</p>

<p align="center">Ovo je pasus koji je centriran.</p>

</body>

</html>

Naslovi se mogu istaći korišćenjem elemenata h1, h2, h3, h4, h5 i h6. Tag h1 uokviruje naslov prvog

reda, koji je, prirodno, najveći, a h6 uokviruje naslov šestog reda koji je najmanji. Svaki od ovih

elemenata počinje u novom redu, a browser-i dodaju još malo praznog mesta pre zaglavlja. U okviru

zaglavlja se može navesti atribut align, koji odreĎuje horizontalno poravnanje zaglavlja; vrednost ovog

atributa može biti jedna od sledećih: left, center, right.

Primer03.html

<html>

<head>

<title>Naslovi</title>


/>

</head>

<body>

<h1>Ovo je veličina slova u zaglavlju H1</h1>

| 10 <h2>Ovo je veličina slova u zaglavlju H2</h2>





</body>

</html>

Za grubo razdvajanje teksta koristi se prazan tag <hr>. On dodaje jednu horizontalnu liniju

(horizontal ruler) ispred i iza koje postoji prazan red. Moguće je podesiti visinu korišćenjem

atributa size="n" (n je broj piksela), širinu pomoću atributa width="n" i poravnanje pomoću

atributa align (moguće vrednosti su left, right, center).

Tag blockquote se često koristi za citate. Puno se koristio za uvlačenje dužih blokova teksta u

odnosu na ostatak teksta što treba izbegavati.

Tag cite se koristi takoĎe za citate i ispisuje tekst italikom.

Tag code služi za ispis programskog koda odnosno formula kao što su matematičke formule.

Tag pre (preformatted) obezbeĎuje prikaz teksta “onako kako je unet” (svi enteri, tab-ovi i

razmaci se prikazuju kako su uneti).

Primer04.html

<html>

<head>

<title>Rad sa tekstom </title>


/>

</head>

<body>

<p>Ovo je tekst koji je levo poravnat.</p>

<blockquote>Ovo je deo teksta koji ce biti uvučen u odnosu na

prethodni pasus.</blockquote>

<br>

<p>Ovo je 3. pasus ispred kog je bio jedan prazan red, a iza koga

će biti naveden citat.</p>

<br>

<cite>Ovo ćemo posmatrati kao citat.</cite>

</body>

</html>

Ukoliko treba promeniti sam izgled teksta, koriste se sledeći elementi:

b - za podebljan tekst, boldiranje, preporučuje se za upotrebu na jednom znaku, strong , isto kao i

b samo za više teksta

i - za iskošen (italik) tekst, mogu se u svrhu iskošenja iskoristiti i em, def, var, cite

u - za podvučen tekst, treba izbegavati jer je uobičajeno da je podvučen tekst link

big - daje veći font za 1 od zadatog, small - daje manji font za 1 od zadatog,

blink - daje tekst koji treperi, nije podržan os svih browser-a, recimo u firefox-u radi, u IE ne

radi..

Tag <font> omogućava da se menja boja, veličina i vrsta fonta; sav tekst izmeĎu početnog i završnog

taga biće prikazan sa specificiranim karakteristikama. Atributi u okviru početnog taga <font> su:

face – naziv fonta,

color - menjanje boje (navodi se ime boje ili heksadecimalni broj koji predstavlja tu boju na RGB

skali),

size - menjanje veličine,

weight - debljina slova.

Primer05.html

<html>

<head>

<title>Formatiranje teksta</title>


/>

</head>

<body>

| 11 <p>Sledeći tekst ce prikazati upotrebu atributa za menjanje

karakteristika teksta:</p>

<p><b>Ovo je podebljan tekst.</b></p>

<p><i>Ovo je iskošen tekst.</i></p>

<p><u>Ovo je podvučen tekst.</u></p>

<p>Ovo su slova uobičajene velicine, <big>a ovo su slova za jedan

veća od uobičajenih.</big></p>

<p>Ovo su slova uobičajene velicine, <small>a ovo su slova za

manja veća od uobičajenih.</small></p>

<p><font color="red" size="10">Ovo je tekst crvene boje, slova su

veličine 10.</font></p>

</body>

</html>

I dalje traje saga o HTML-u

Pre nastavka...

Za početak, sve primere koje smo pravili do sada bi bilo zgodno da grupišemo u jednu fasciklu, nazovimo

je Primeri i smestimo je u korenskom direktorijumu WAMP-a na Vašem računaru. Ukoliko ste pratili

preporuke, to je na adresi c:\wamp\www\. Dakle puna putanja do naše fascikle Primeri bi bila

c:\wamp\www\Primeri\. Svaki pojedinačni dokumenat smo nazvali do sada PrimerXY.html, gde X,Y

mogu biti cifre od 0 do 9 (Primer01.html, Primer02.html,...). Ukoliko niste tako nazvali, preimenujte ih

sada i smestite u fasciklu Primeri. Svakom pojedinačnom dokumentu iz ove fascikle obraćamo se

sledećom adresom koju unosimo u address baru browser-a:

http://localhost/Primeri/PrimerXY.html

Kada želite da napravite izmene u HTML kodu Vaših dokumenata, prosto ih otvorite notepad-om ili

nekim naprednijim tekst editorom kao što je notepad plus, ConTEXT i slični, najzgodnije je držati

istovremeno otvorene i tekst editor i Web pretraživač sa učitanom HTML stranom. U Notepad-u izmenite

HTML kod i sačuvajte izmene (File -> Save). Da biste videli promenu u browser-u u kom je već otvorena

Vaša stranica, morate osvežiti stranicu sa Refresh (F5 funkcijski taster).

Liste

Postoje dve vrste lista: unordered (neoznačena, neureĎena) lista i ordered (nabrajanje, ureĎena) lista.

Neoznačena lista predstavlja spisak elemenata ispred kojih se nalazi bullet ili oznaka liste. Neoznačena

lista počinje tagom <ul> (Unordered List). Elementi liste se označavaju tagom <li> (List Item).

Ako se umesto taga <ul> koristi element <ol>, dobija se brojna lista (Ordered List), odnosno spisak

elemenata sa rednim brojevima. Početni broj ureĎene liste se može zadati atributom start.

Primer06.html

<html>

<head>

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

8">

<title>Uredjena lista</title>

</head>

<body>

<p>Primer uređene liste:</p>

<ol>

<li>Azijske države:</li>

<li>Evropske države</li>

</ol>

<p>Primer neuređene liste:</p>

<ul>

<li><strong><em>Srbija </em></strong></li>

<li>Francuska</li>

<li>Nemačka </li>

</ul>

<p>Primer kombinacije uređene i neuređene liste. Svaka stavka

uređene liste ima kao podlistu neuređenu listu. Uređena lista

počinje rednim brojem 3 što je obezbeđeno atributom start i njemu

| 12 dodeljenom vrednošću 3. Ukoliko se ovaj atribut ne navede lista

počinje brojem jedan. Stavka Mongolija je boldirana, a stavka

Srbija je boldirana i italik. </p>

<ol start="3">

<li>Azijske države:

<ul>

<li>Kina</li>

<li><strong>Mongolija</strong></li>

<li>Singapur</li>

</ul>

</li>

<li>Evropske države:

<ul>

<li><strong><em>Srbija </em></strong></li>

<li>Francuska</li>

<li>Nemačka </li>

</ul>

</li>

</ol>

</body>

</html>

Rad sa slikama....

Primer dobre prakse je da sve slike grupišemo u jednu fasciklu, nazovimo je Slike i smestimo je u fascikli

Primeri. Ukoliko ste pratili preporuke, to je na adresi c:\wamp\www\Primeri. Puna putanja do naše

fascikle Slike tada glasi c:\wamp\www\Primeri\Slike\.

U fascikli Slike smestite jednu sliku i nazovite je SlikaLeviBaner.jpg. Napravimo malu analizu o

adresama na ovom konkretnom primeru pre nego opišemo tag img.

Apsolutna adresa ove slike SlikaLeviBaner.jpg iz fascikle Slike glasi ovako:

http://localhost/Primeri/Slike/SlikaLeviBaner.jpg.

Relativna adresa slike SlikaLeviBaner.jpg zavisi od lokacije dokumenta u kome se

referenciramo na ovu sliku. U ovom našem konkretnom slučaju, mi ćemo pozivati ovu sliku iz

dokumenta Primer07.html koji se nalazi u fascikli Primeri, dakle na istoj lokaciji na kojoj se

nalazi i fascikla Slike pa relativna adresa glasi ovako Slike/SlikaLeviBaner.jpg. Podsetimo se:

browser je zapravo interpretator HTML koda. Učitava ga liniju po liniju i interpretirajući HTML

tagove formatira web stranu. Kada bi browser naleteo na prethodnu relativnu adresu, u slobodnoj

intrepretaciji, on bi je pročitao kao:

pogledaj u fascikli Slike koja se nalazi pored Primer07.html dokumenta da li u njoj ima slika po

imenu SlikaLeviBaner.jpg

Vratimo se tagu img kojim definišemo sliku koja će se pojaviti u HTML dokumentu. Atribut src (source-

izvor) sadrži ime slike koja treba da se naĎe u dokumentu, odnosno putanju do te slike dok atribut alt

(alternate text -Alternativni tekst) sadrži tekst koji će biti ispisan na mestu slike, ukoliko se ona iz nekog

razloga nije uspešno učitala na web stranicu. Dimenzije slike se zadaju preko atributa height - visina i

width - širina. Slika može biti poravnata u odnosu na ostatak teksta u dokumentu, a željena vrednost se

daje u artibutu align koji može uzeti vrednosti left, right, centerodnosno levo, desno i centrirano u

zadatom redosledu. Debljina ivice slike se zadaje u atributom border (okvir). Napravite Primer07.html i

snimite ga u fasciklu Primeri koristeći sledeći HTML kod:

Primer07.html

<html>

<head>

<title>Slike</title>


8">

</head>

<body>

<p> <img src="F:\Web\html\slika.gif" alt="Snoopy" width="147"

height="56" border="1" /></p>

<p> Iznad se nalazi slika koja se neće prikazati, sem u slučaju da

posedujete F disk, na F disku prisutne fsciklu Web u njoj fasciklu

| 13 html u kojoj se konačno nalazi slika.gif. Ukoliko se ispostavi da

posedujete F disk sa identičnom putanjom sa navedenom slikom,

molim Vas da se javite, trebalo bi da u tom slučaju uplatimo

zajedno jedan loto tiket. </p>

<p>Pošto browser nije uspeo da nađe sliku, slika ne može biti

učitana pa će se umesto slike prikazati u okvir predviđenih

dimenzija (147x56) ovičen linijom debljine 1 i u njemu ispisan

alternativni tekst (Snoopy). </p>

<p><img src="Slike/SlikaLeviBaner.jpg" alt="LogoRelativnaAdresa"

width="400" height="100" align="left" /></p>

<p>Ako ste uradili sve kako je navedeno gore, iznad ovog teksta

pojaviće se Vaša slika SlikaLeviBaner.jpg veličine 400x100

poravnata uz levu ivicu prozora. Ovaj tekst bi trebao da se

nastavlja sa desne strane slike.</p>

<p><img src="http://localhost/Primeri/Slike/SlikaLeviBaner.jpg"

alt="LogoApsolutnaAdresa" width="400" height="100" align="right"

border="3" /></p>

<p> Ako ste uradili sve kako je navedeno gore, iznad ovog teksta

pojaviće se Vaša slika SlikaLeviBaner.jpg veličine 400x100

poravnata uz desnu ivicu prozora sa okvirom debljine 3. Ovaj tekst

bi trebao da se prethodi slici sa njene leve strane.</p>

</body>

</html>

Linkovi

Linkovi predstavljaju jednu od bitnih razlika izmeĎu teksta i hiperteksta jer omogućavaju da se krećemo

kroz stranice nesekvencijalno već prema želji. U žargonu obično se kaže posetiti link, a ako to prevedemo

u jezik pokreta i akcija to znači kliknuti mišem na ponuĎeni link da bismo prešli na željeni resurs na koji

link "cilja". Linkovi mogu da ukazuju na:

drugi dokument,

drugi deo unutar istog ili drugog dokumenta,

bilo koji resurs (nije obavezno HTML datoteka ili deo u okviru ove datoteke). Na primer to može

bit arhiva (.zip,.rar), .pdf, .doc, .xls, .php dokumenti odnosno bilo koji resurs koji je dozvoljen na

datom domenu.

Odredišni objekat se identifikuje uz pomoć mehanizma URI (Uniform Resource Identifiers). URL

(Uniform Resource Locator) je podskup URI, i služi za lociranje nekog resursa na Internetu, i sledećeg je

oblika: protokol://računar:port/putanja/datoteka

Pošto smo u nekoliko navrata pričali o adresama, o apsolutnim i realtivnim adresama nećemo ponovo

ovde govoriti.U Primeru08.html navedenom ispod možete videti kako se prave linkovi. Početni tag sadrži

slovo a (anchor) i href atribut koji je obavezan i čija je vrednost apsolutna ili relativna adresa nekog

resursa. Nakon početnog taga ide takozvano telo linka, odnosno objekat za koji se vezuje link. Najčešće je

to tekst ili slika. Na kraju ide obavezno zatvarajući </a> tag.

Primer08.html

<html>

<head>

<title>Linkovi</title>


8">

</head>

<body>

<h1>Linkovi</h1>

<p> Ovaj primer sadrži <a href="Primer07.html">link ka stranici

Primer07</a>, u pitanju je relativna putanja na prethodni primer.

</p>

<p> Ovaj primer sadrži <a href="http://www.google.com">link ka

stranici Google Search </a>, sa apsolutnom adresom početne

stranice Google-a. </p>

</body>

</html>

Imenovana sidra su mesta u dokumentu na koja možete "skočiti" kad kliknete neki link sidra. Vrlo čest

protokol://ra%C4%8Dunar:port/putanja/datoteka

| 14 primer je sidra link koji ste sigurno koristili na Web-u, imenuje se obično sa Top ili Vrh, pa kad kliknete

na njega browser Vas prebaci na početak stranice. Sidra su zgodna kod "dugačkih " web stranica, jer

pomoću njih možete "skakati" po dokumentu, što će korisnici izuzetno ceniti na vašim stranicama sa puno

materijala. Skrolovati mišem kroz "dugačke" stranice zna biti vrlo naporno.

Sidra se prave na sledeći način: Prvo se izabere mesto u dokumentu za koje želimo da bude "mesto

doskoka" uslovno rečeno. Na tom mestu dodajemo početni tag koji sadrži slovo a (anchor) i umesto href

atributa sadrži atribut name. Vrednost name atributa treba da imenom da asocira na mesto "doskoka" u

dokumentu, na primer vrh_stranice, dno_stranice,.... zatim ide standardno telo linka, odnosno sidra, i na

kraju zatvarajući </a> tag. Ovako se postavljaju sidra. Ali kako se koriste ova postavljena sidra?

Jednostavno se negde u dokumentu na mestu sa kojeg želimo skok na sidro postavi jedan link sa

atributom href čija je vrednost ime sidra na koje treba skočiti predvoĎeno sa tarabom.

Primer09.html

<html>

<head>

<title>Imenovan sidra </title>


8">

</head>

<body >

<h1>Označavanje delova dokumenata</h1>

<p>

<a name="vrh_stranice">Ovaj pasus obeležen je imenom

<b>vrh_stranice</b>, odnosno za njega je vezano sidro

<b>vrh_stranice</b>. Ceo ovaj pasus je telo sidra. </a>

Ovo je <a href="#dno_stranice">link</a> ka sidru koje se nalazi na

dnu ove stranice. </p>

<p>Neki pasus - tekst</p>



... Da bi bilo očiglednije kako rade sidra, treba iskopirati na

ovom mestu bar 30tak redova.


Ovde to nije urađeno samo zbog prostora, ali vi kad budete pravili

ovaj primer uradite to.




<p><a name="dno_stranice">Ovaj tekst je obeležen je imenom

<b>dno_stranice</b>, odnosno za njega je vezano sidro

<b>dno_stranice</b>.</a>

Ovo je <a href="#vrh_stranice">link</a> ka sidru vrh_stranice koje

se nalazi na vrhu stranice. Kad ga kliknete trebalo bi da Vas

browser pomeri na mesto u dokumentu gde se nalazi ovo sidro, tj.

na vrh stranice...</p>

</body>

</html>

Da, HTML saga nije gotova...

Mapiranje na slikama...

Tag <map> definiše geometrijske zone na slici koje će predstavljati linkove. Atribut usemap u img tagu

odreĎuje putanju do opisa zona (do <map> taga). Ove geometrijske onblasti su vrlo slične Hot Spotovima

u multimedijalnim programima, koji su osetljivi na radnje mišem (prelazak, klik,...).

Definicija oblasti:

<area shape="poly" alt="poligon" coords="395,145, 322,91, 393,32" href="Primer09.html">

Poligonalana oblast definisana sa tri para tačaka: prva tačka 395,145, druga tačka 322,91, treća tačka

393,32. U ovom konkretnom slučaju u pitanju je trougao. NavoĎenjem više tačaka može se definisati bilo

koji mnogougao.

<area shape="rect" alt="pravougaonik" coords="41,3,125,75" href="Primer08.html">

| 15 Pravougaona oblast opisuje se sa dve tačke, gornjom levom i donjom desnom tačkom.

<area shape="circle" alt="krug" coords="277,165,76" href="Primer07.html">

Oblast u obliku kruga, opisuje se tačkom centra i poluprečnikom.

Matematički rečeno :

Ako je oblast rect (rectangle) - Vrednosti koordinata su "leva,gornja,desna,donja"

Ako je oblast circ (circle) - Vrednosti koordinata su "centarx,centary,poluprečnik"

Ako je oblast poly (polygon) - Vrednosti koordinata su "x1,y1,x2,y2,..,xn,yn"

Pretpostavimo kao i ranije da u fascikli Slike koja se nalazi pored našeg dokumenta Primer10.html,

postoji slika koja se zove slika.jpg

<html>

<head>


/>

<title>Mape</title>

</head>

<body>

<p>

Delovi slike predstavljaju linkove. Pronađite ih.

</p>

<p><img src="Slike/slika.jpg" height="480" width="640" border="0"

usemap="#mapa"></p>

<map name="mapa">

<area shape="poly" alt="poligon" coords="371,324,295,256,372,218"

href="Primer09.html">

<area shape="rect" alt="pravougaonik" coords="41,3,125,75"


<area shape="circle" alt="krug" coords="546,194,76"


</map>

</body>

</html>

Dodatni atributi body taga

Vrednost atribut bgcolor definiše boju pozadinu stranice. Atribut link definiše boju linka. Atribut vlink

(visited link) definiše boju posećenog linka. Atribut alink definiše boju aktivnog (selektovanog) linka.

Atribut background definiše putanju do pozadinske slike.

Primer11.html

<html>

<head>


/>

<title>Atributi body taga</title>

</head>

<body bgcolor="gray" alink="yellow" vlink="red" link="green">

<h1>Oznacavanje delova dokumenata</h1>

<p><a name="prvi"></a>

Ovaj pasus obeležen je imenom "prvi".

Ovo je <a href="#drugi">link</a> na <b><code>prvi</code></b> deo.

</p>

<p><a name="drugi"></a>

Ovaj pasus obeležen je imenom "drugi".

Ovo je <a href="#prvi">link</a> na <b><code>drugi</code></b>deo.

</p>

</body>

</html>

Primer12.html<html>

<head>


/>

<title>Body tag i dalje</title>

| 16 </head>

<body background="Slike/slika.jpg" text="red">

<font color="#FFFFFF">

<h1>Pozadinska slika</h1>

</font><p><font color="#FFFFFF">Vrednost atribut bgcolor definiše

boju pozadinu stranice. Atribut link definiše boju linka. <br>

Atribut vlink (visited link) definiše boju posećenog linka.

<br>

Atribut alink definiše boju aktivnog (selektovanog) linka. <br>

Atribut background definiše putanju do pozadinske slike.<br>

Atribut text definiše boju teksta na stzranici.. </font></p>

<p><font color="#FFFFFF">Ovaj tekst

je bele boje jer smo to definisali tagom font i atributom color,

inače bi bio crvene boje.. </font></p>

<p>Ovaj tekst je crvene podrazumevane boje za tekst na stranici.

<br>

Preporučujemo da izbegavate upotrebu ovih atributa,<br>

odnosno da koristite stilove umesto ovih atributa... </font></p>

</body>

</html>

Specijalni karakteri

Specijalni karakteri navode se u sledećem formatu: &oznaka_karaktera;

Primeri: & < > Proizvoljan Unicode karakter može se navesti kao: &#xhex_kod;

Primer13.html

<html>

<head>

<title>Specijalni karakteri</title>

</head>

<body>

<h1>Specijalni karakteri</h1>

<p> Specijalni karakteri navode se u sledećem formatu:<br />

<br>

&oznaka_karaktera;</p>

<p>Znak ampersand (&) ima specijalno značenje i

predstavlja početak navodenja specijalnog karaktera. Kada

treba ugraditi ba&scaron; ovaj znak u tekst to se čini

sekvencom & </p>

<p>Ako ne definišete kao skup znakova starnice utf-8, da biste

dobili naša slova možete da koristite sledeće specijalne

karaktere...</p>

<p>Ovo je samo primer, nikako ne navodimo ceo skup znakova,

preporuka je da koristite utf-8, jer je standard.</p>

<p>Pogledajte jednu kompletniju tabelu specoijalnih simbola HTML-a

<a href="http://www.w3schools.com/tags/ref_symbols.asp"

target="_blank">ovde</a>. </p>

</body>

</html>

Meta tagovi

Definišu dodatne informacije koje se ne prikazuju. Dodatne informacije se definišu kao parovi (naziv,

vrednost), tj. atributi name i content <meta> taga. Кoriste se za obezbeĎivanje informacija pretraživačima

interneta (yahoo, google, itd.): author, description, keywords; informacije za druge namene (proizvoljne

vrednosti). Atribut http-equiv definiše podatke koji se smeštaju u zahlavlje http odgovora klijentu.

Definicija ključnih reči za mašine za pretragu:

<meta name="keywords" content="HTML, CSS, Web" />

Definicija opisa web stranice:

<meta name="description" content="Besplatan Web tutorijal iz HTML-a, CSS-a, ... " />

Definiše poslednju izmenu Vaše stranice:

<meta name="revised" content="Jovan Sandić , 11/06/08" />

| 17 Osvežava prikaz svakih 7 sekundi:

<meta http-equiv="refresh" content="7" />

Primer14.html

<html>

<head>

<title>META tagovi</title>

<meta name="author" content="Jovan Sandić">

<meta name="description" content="Ova stranica demonstrira

različite META tagove.">

<meta name="keywords" content="HTML, META tagovi, opis ">

</head>

<body>

<h1>META tagovi</h1>

<p>Pogledajte izvorni kod dokumenta, desni klik View source. </p>

</body>

</html>

Primer15.html

<html>

<head>

<title>META tagovi</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-

8">

<meta http-equiv="Refresh" content="3">

</head>

<body>

<h1>META tagovi</h1>

<p>Malo unicode teksta:</p>

<p>Latinica šđčćž</p>

<p>Ћирилица шђчћж </p>

</body>

</html>

Tabele

Tabele se sastoje od vrsta i kolona. U HTML-u tabela se sastoji od redova koji su podeljeni na polja, a

prva polja svih redova čine prvu kolonu, druga polja drugu kolonu, itd. Za kreiranje tabele potrebna su tri

taga:

table - za tabelu,

tr - za red,

td - za polje.

Pomoću taga th definišu se zaglavlja vrsta ili kolona. U okviru početnog taga <table>, moguće je

definisati poravnanje tabele u dokumentu (atribut align, koji može imati vrednosti left ili right), debljinu

ivice tabele (atribut border) i boju pozadine (atribut bgcolor), s‟tim što svaka ćelija tabele može imati i

svoju boju. Za svaku ćeliju se može definisati koliko će obuhvatiti kolona ili vrsta, pomoću atributa

colspan i rowspan. Atribut cellspacing definiše rastojanje izmeĎu ćelija u tabeli, a atribut cellpadding

definiše rastojanje od ivice do sadržaja ćelije.

Tag <tr> (Table Row) definiše vrste u tabeli. Tag <tr> sadrži tagove <th> (Table Heading), koji

odreĎuju zaglavlje tabele, i tagove <td> (Table Data) koji predstavljaju ćelije u tabeli. U tagu <tr> mogu

se nalaziti sledeći atributi:

1. align - horizontalno poravnanje tabele (center, left, right),

2. valign - vertikalno poravnanje sadržaja u ćeliji (basline, bottom, middle, top),

3. bgcolor - boja pozadine.

Element caption definiše naslov tabele. Tag <caption> se koristi unutar taga <table>, a ne unutar tagova

<td> ili <tr>. Atribut align specificira mesto naslova u odnosu na tabelu, a moguće vrednosti su mu

bottom (naslov će biti ispod tabele) i top (naslov će biti iznad tabele).

Primer16.html

<html>

| 18 <head>

<title>Tabela</title>

</head>

<body>

<table border="1" cellpadding="8" cellspacing="4"

bgcolor="yellow">

<tr>

<th> English </th>

<th> Spanish </th>

<th> German </th>

</tr>

<tr>

<td>one</td><td>uno</td><td>ein</td>

</tr>

<tr>

<td>two</td><td>dos</td><td>zwei</td>

</tr>

<tr>

<td>three</td><td>tres</td><td>drei</td>

</tr>

<caption align="bottom"> <b>tabela 1</b>: brojanje na raznim

jezicima</caption>

</table>

</body>

</html>

Upload fajlova...

Upload fajlova na server (FTP)

File Transfer Protocol (FTP) je mrežni protokol koji se koristi za transfer podataka sa jednog računara na

drugi posredstvom mreže kao što je Internet. FTP je protokol za transfer podataka za razmenu i

manipulaciju podacima preko računarske mreže zasnovane na TCP (Transfer Control Protocol).

Da pojednostavimo, FTP protokolom se definišu pravila manipulacije i razmene fajlova na Internetu. FTP

se najčešće koristi za preuzimanje fajlova sa host-a putem Interneta (download) i postavljanje fajlova na

host putem Internet-a (upload) ali i za ostale manipulativne radnje nad podacima(preimenovanje,

brisanje,...).

Kako radi FTP? FTP zahteva klijent (FTP program) instaliran na Vašem PC-ju da biste se spojili uspešno

na host, ili server. FTP klijent je softver koji se konektuje na FTP server da bi manipulisao podacima na

tom serveru. Jednom kad se uspešno prijavite na neki server ili host, imate pristup na nivou direktorijuma

sa definisanim pravima (definisano Vašim nalogom).

Fajlovi se kopiraju sa lokacije na Vašem računaru na lokaciju na Web-u naizgled isto kao da se sve

dešava u lokalu na Vašem računaru, jedina vidljiva razlika je u brzini kopiranja, jer realno, lokacija na

koju kopirate moguće je da se nalazi na serveru koji je na drugom kontinentu.

Šta ćemo raditi u okviru ove lekcije:

Govorićemo o dostupnom FTP softveru

Definisaćemo svoj nalog ili ftp konekciju uz pomoć podataka o host-u, korisničkom imenu i

lozinci koje ćemo pronaći kasnije u ovoj lekciji.

Koristeći definisanu konekciju/nalog izvršićemo probu postavljanje/upload fajlova na server/host.

Izbor FTP softvera

Ako nemate FTP program, trebaće Vam jedan. Ovde navodimo neke od softvera koje možete

koristiti. Svi softveri tipa komander mogu se vrlo uspešno koristiti za FTP transfer fajlova. Od

ovakvih softvera preporučujemo vrlo raširen i popularan kod korisnika TotalComander, odnosno

FreeCommander koji je potpuno besplatan. Od specijalizovanih FTP softvera preporučujemo da

isprobate sledeće:

AceFTP. Vrlo jednostavan program, podržava drag-and-drop način rada sa interfejsom u

Windows XP maniru, sam transfer fajlova je brz i efikasan sa intuitivnom navigacijom. Ovo je

| 19 brz, robustan i besplatan FTP software. Moguće je i vršiti nekoliko transfera istovremeno.

Download AceFTP.

FileZilla. Ovo je jednostavan besplatna, open-source FTP aplikacija. Moguće je i vršiti nekoliko

transfera istovremeno. Za trensfer osetljivih informacija program podržava SFTP (secure file

transfer protocol). Odličan alat za upravljanje manjim sajtovima. Download FileZilla

RightFTP. TakoĎe besplatan FTP klijent za Windows platformu sa širokim opsegom integrisanih

alata. Jednostavan je i za početnike a poseduje u sebi dovoljno alata da zadovolji i zahteve i

profesionalaca. Interfejs je vrlo nalik Explorer-ovom, tako da je ovaj program vrlo korisnički

prijateljski nastrojen, podržava drag-and-drop način rada, konekcija se rešava sa samo nekoliko

klikova mišem. Dodatne funkcionalnosti uključuju site profile manager, remote

editing,...Download (EXE self-installing)Download (ZIP archive)

TomaWeb's Simple FTP. Download twftpfree20.exe

Core FTP LE. Core FTP LE 1.3c: free version.

Cyberduck. Information and download.

Potrebni FTP parametri

Provajder (onaj koji obezbeĎuje hosting) je u obavezi da Vam dostavi relevantne informacije odnosno

potrebne FTP instrukcije i uputstva (FTP adresa, user name and password). Pošto je u ovom slučaju dok

traje seminar cnti.info Vaš provajder za potrebe seminara, dostavljamo Vam sledeće potrebne

informacije, koje preporučujemo da negde zapišete:

FTP adresa kojoj ćete pristupati je ftp.cnti.info, port je standardno 21

user name Vam je napravljen prema grupi čiji ste član web0i, gde i=1..8. korisnička imena su

[email protected], i=1..8. Na primer, ako ste član grupe web03 username Vam je [email protected]

password vam je web0i, i=1..8. Na primer, ako ste član grupe web03, password Vam je web03.

Dakle svi članovi jedne grupe pristupaju zajedničkoj lokaciji, što otvara mogućnost da jedni drugima

nešto i obrišete, pokvarite itd... Iako smo mogli ovaj rizik izbeći, smatramo da je poželjno da radite u što

je moguće realnijim uslovima koji odgovaraju stvarnosti. A realnost je takva da obično više ljudi barata sa

istim pravima istim objektima, tako da je odgovornost za ispravnost na svakome leži jednako. Vodite

računa da postoji log fajl u kojem se piše svaka aktivnost na odreĎenoj lokaciji i da je preko evidentirane

IP adrese i vremena pristupa moguće uvek utvrditi ko je, gde je i šta je radio,...

Upoznajmo i testirajmo jedan FTP program

Biće Vam potrebno neko vreme da se odlučite koji ćete program koristiti, a videćete da svi oni imaju iste

osnovne operacije. Mi ćemo za potrebe seminara koristiti FreeCommander, ali to ne znači da druge

programe ne trebate probati, naprotiv.

Preuzmite instalacioni fajl sa lokacije za preuzimanje (ovonedeljni resurs). Instalacija

FreeCommandre-a je standardna.

Kliknite na FTP dugme sa jedne strane. Dvokliknite na New FTP connection i unesite u

odgovarajuća polja parametre koji su gore navedeni (FTP adresa, user name and password). Kada

je u pitanju FTP, vrlo često postoji i mogućnost Anonymous (anonimnog) pristupa na odreĎenim

lokacijama. To ne važi za nas.

Sam FTP transfer se razlikuje u odnosu na to da li baratamo tekstualnim fajlovima ili na primer

arhivama, i može biti jedan od tri sledeća tipa prenosa:

o ASCII,

o Binary,

o Autodetect

ASCII se koristi pri transferu HTML fajlova ili uopšte fajlova tekstualne prirode, a binary kada se vrši

transfer grafičkih fajlova, arhiva,... U našem slučaju podrazumevana vrednost za transfer je Autodetect

koja pretpostavlja da program sam prepozna prirodu objekta kojim barata.

Većina FTP programa je podešena da koristi podrazumevano Port 21. Ovo nemojte menjati sem

ukoliko ne dobijete od provajdera informaciju da se za FTP transfer koristi neki drugi Port.

U većini slučajeva ignorisaćete ostala podešavanja kao što su:

o Use firewall,

o PASV mode,

o Description, i slično.

| 20 Naravno, ukoliko Vam provajder ne sugeriše suprotno. Recimo PASV mode se koristi kad se očekuju

problemi sa Firewall-om i sigurnosnim ograničenjima sa strane FTP klijenta, tj Vas.

Proverite imena fascikli i fajlova. Koristite samo mala slova u imenima, inače možete imati

problema na UNIX zasnovanim host-ovima. Većina provajdera ove probleme ipak rešava interno,

izmenama u hodu, i time rasterećuje korisnika razmišljanja o tome. Ipak, najbolji lek za sve

probleme je prevencija, dakle navikavajte se da koristite mala slova. Nemojte koristiti specijalne

znake i karaktere u imenima. Nemojte koristiti vise od jedne ekstenzije u imenu fajla.

Da bismo proverili da li naš FTP radi, kreiraćete na Vašem računaru jednu novu fasciklu i

nazvaćete je svojim korisničkim imenom, imenom kojim se prijavljujete na moodle. Naglašavamo

da ne koristite ime grupe, već isključivo korisničko ime koje imate na sistemu. Ovo je bitno radi

kasnije provere uraĎenog. Sa jedne strane u prozoru FreeCommander-a pronaĎite tu faciklu, a sa

druge otvorite FTP konekciju koristeći se gornjim parametrima. Da li će na ovoj lokaciji na

serveru biti nečega zavisi od toga da li je neko od kolega bio malo brži i vredniji od Vas.

Selektujte napravljenu fasciklu i pritisnite F5. Pojaviće se sledeći prozor.

Iz ovog primera se vidi da se uploaduje fascikla po imenu Crack na ftp.cnti.info. Nakon klika na OK,

fascikla će biti upload-ovana. Istovremeno ćemo dobiti spisak njene sadržine i prikaz napretka upload-a

progres bar-om.

Da pojasnimo malo ovaj dijalog.

Source je izvor, ono što se kopira/upload-uje

Target je meta, destinacija, odredišna lokacija na koju se upload-uje

Transfer type (ASCII, binary, Autodetect), tip transfera

Transfer in background omogućava da se trenutni upload/download ili uopšte transfer „gurne“ u

pozadinu i time se dobija mogućnost da se pokrene neki drugi transfer (simultani rad)

Convert file names to lower case vrši koverziju slova u imenima fajlova u mala slova

Always overwrite without prompt. Program Vas neće ni pitati da li želite da nastavi započeti

transfer ili da pregazi fajl novom kopijom već će pregaziti novom kopijom. Kada se ovo dešava?

Vrlo često. Ako konekcija ka serveru pukne iz bilo kog razloga imate izbor da nastavite transfer ili

da krenete ispočetka sa novom kopijom

Ovako nešto ili vrlo slično srešćete u svim gore navedenim ftp klijentima.

Naš sledeći zadatak je da vidimo kako se pravi direktno na serveru fascikla. UĎite u Vašu fasciklu na

serverskoj strani commander-a. Pritisnite F7 i unesite ime slike. Ovu fasciklu ćemo iskoristiti za

smeštanje slika. Sad selektujte sa serverske strane fasciklu slike i pritisnite F5 i ona će biti iskopirana na

Vaš lični računar. Isti proces (kopiranje) zavisno od smera kopiranja zovemo upload ili download.

Sam FreeCommander se vrlo jednostavno koristi jer je njegov interfejs vrlo intuitivan, tako da operacije

brisanja, preimenovanja, isecanja,... se jednostavno pronalaze i koriste. FreeCommander sam po sebi on

nije predmet seminara i od Vas se očekuje da posedujete iskustvo u radu sa programima ovog tipa.

Radionica

Da biste uspešno realizovali ovu radionicu potrebno je prethodno realizujete zahteve navedene u lekciji o

ftp://ftp.cnti.info/

| 21 upload-u fajlova, odnosno da kreirate fasciklu na ftp.cnti.info koja će se zvati Vašim korisničkim imenom

(ne koristite ime grupe za ime ove fascikle). U njoj prema zahtevima lekcije napravite i fasciklu koja će

se zvati slike.

Zadatak radionice je sledeći: potrebno je napraviti Web stranicu (html dokumenat) koja treba da sadrži

otprilike iste informacije kao i Vaš CV.

Treba da sadrži sledeće informacije:

ime i prezime,

Vašu sliku

interesovanja i hobi ako ga imate,

završena škole zvanje i dodatna znanja,

mesta zaposlenja,

Lične kontakt podatke

o adresa

o telefon,

o mail,

o …(lični podaci ne moraju biti tačni ali moraju postojati na stranici),

podatke školi u kojoj radite (samo jednoj, ako radite u više škola izaberite jednu)

o naziv,

o mesto,

o adresa,

o mail,

o kratak opis,

o slika škole.

O izgledu i rasporedu informacija na ovoj web stranici odlučujete sami i ograničeni ste samo svojom

kreativnošću. Na stranici mogu biti upotrebljeni svi HTML elementi koje smo spomenuli u lekcijama, pa

i oni koje nismo. Jedini uslov je da napravite HTML stranicu bez upotrebe specijalizovanih programa za

tu namenu, dakle peške, i da obavezno upotrebite bar na jednom mestu tabelu, ureĎenu i neureĎenu listu,

kao i da koristite bilo naša ćirilična bilo latinična slova.

IzraĎenu stranicu nazovite index.html i neophodno je upload-ovati ovaj fajl u gore pomenutu fasciklu

koja se zove po Vašem korisničkom imenu, slike koje koristite na ovoj stranici moraju biti smeštene u

fasciklu slike, koja je smeštena u fascikli koja se zove po Vašem korisničkom imenu. Dakle, nemojte

zaboraviti da obe fotografije takoĎe upload-ujete. Jednu fotografiju (Vašu ličnu ili sliku škole)

referencirajte relativnom adresom a drugu fotografiju apsolutnom adresom.

Ako Vam se izgled stranice index.html ne svidi, izmenite HTML kod, snimite stranicu i ponovo je

upload-ujete... Direktne izmene HTML koda vremenski je zahtevan posao, stoga Vam preporučujem da

koristite WAMP dok ne budete zadovoljni dobijenom HTML stranicom, i tek onda je upload-ujte

koristeći napravljenu ftp konekciju.

Proverite da li se na adresi: http://www.cnti.info/infoseminar/oznakagrupe/korisnickoime/index.html

nalazi Vaša stranica (oznaka grupe je oblika web0i, i=1..8). Na primer, recimo da je Vaše korisničko ime

joe, i pripadate osmoj korisničkoj grupi web08, ako sve uradite prema uputstvu, Vaša web stranica će se

nalaziti na sledećoj adresi: http://www.cnti.info/infoseminar/web08/joe/index.html.

CSS – Cascading Style Sheets

Kaskadni stilovi

HTML je originalno dizajniran sa definiše sadržaj dokumenta. On je trebao da bude jednostavan opisni

jezik sadržaja koji kaže „Ovo je tabela (table)“, „Ovo je paragraf (paragraph)“, „Ovo je zaglavlje

(header)“ koristeći tagove <table>, <p>,<head>... Izgled je trebao da definiše browser bez korišćenja

ijednog taga za formatiranje. Tadašnji velikani meĎu browser-ima, Netscape i Internet Explorer, su

originalnoj specifikaciji HTML dodavali HTML tagove i atribute (na primer <font> tag i color atribut).

Kako je HTML postajao komplikovaniji, bilo je sve više mogućnosti za definiciju izgleda elemenata, ali

je istovremeno postajao nečitljiviji i teži za održavanje dok je izrada web stranica u kojima je jasno

odvojen sadržaj od izgleda je postala nemoguć zadatak. Dodatno, različiti browser-i su prikazivali

http://www.cnti.info/infoseminar/web08/joe/index.html

| 22 dokumente na različite načine, i postojala je potreba za jedinstvenom tehnikom definisanja prikaza

elemenata na stranici. I te potrebe nastao je CSS (Cascading Style Sheets), jezik formatiranja pomoću kog

se definiše izgled elemenata web-stranice.

Dakle, nekada je HTML služio da definiše kompletan izgled, strukturu i sadržaj web-stranice, ali je od

verzije 4.0 HTML-a uveden CSS kojim se definiše izgled, dok je HTML ostao zadužen za definisanje

strukture i sadržaja.

CSS Sintaksa

CSS sintaksa se sastoji od opisa izgleda elemenata u dokumentu. Opis može da definiše izgled više

elemenata, ali i više opisa može da definiše jedan element. Na taj način se opisi slažu jedan preko drugog

da bi definisali konačni izgled odreĎenog elementa. Tako je nastao i naziv Cascading (Eng. cascade -

crep), da bi se dočaralo slaganje jednog stila preko drugog u definisanju konačnog izgleda elementa

Svaki opis se sastoji od tri elementa:

definicija ciljnih elemenata

svojstva (atributi)

vrednosti

Nakon što definišemo ciljne elemente, tj. elemente na koje će se trenutni opis odnositi, nizom parova

svojstvo-vrednost definišemo izgled svakog ciljnog elementa.

Sintaksa koja se pri tome definiše je sledećeg oblika:

ciljni elementi { atribut1: vrednost1; atribut2: vrednost2; }

CSS podržava i komentare, dakle navode se izmeĎu znakova /* i */ .

Ciljni elementi

Ciljni elementi se definišu na tri načina:

1. navodeći HTMLtagciljnih elemenata

2. navodeći klasu elemenata

3. navodeći direktnu identifikacionu vrednost (ID) elementa

Kada definišemo stil preko HTML taga (1.), to znači da će ovaj opis uticati na sve elemente u dokumentu

koji imaju ovaj tag. Definicija ciljnih elemenata se tada vrši preko direktnog upisa odgovarajućeg HTML

taga:

p { svojstvo: vrednost; }

Klasa HTML elementa je reč koju stavimo kao vrednost argumenta class pri definiciji tog elementa (2.).

Definicija ciljnih elemenata (svih koji imaju odreĎenu istu klasu) se vrši tako što upišemo znak tačke (.) a

zatim naziv klase:

.imeKlase { svojstvo1: vrednost1; svojstvo2: vrednost2; }

Ovaj opis će, dakle, imati uticaja na sve elemente u dokumentu koji su definisani na sledeći način:

<p class = "imeKlase" > ... </p > <div class = "imeKlase" > ... </p >

Identifikaciona vrednost elementa je vrednost argumenta ID pri definiciji tog elementa (3). U jednom

dokumentu identifikacione vrednosti moraju biti jedinstvene, tj. može postojati samo jedan element sa

odreĎenom identifikacionom vrednošću, što znači da ovakvi opisi mogu uticati samo na po jedan element

u dokumentu. Definišu se pomoću znaka tarabe (#) a zatim identifikacionu vrednost:

#IDVrednost { svojstvo1: vrednost1; svojstvo2: vrednost2; }

Ovaj će, dakle, opis uticati na sve elemente koji u svojoj HTML definiciji imaju id="IDVrednost" .

Pogledajte primer ispod:

stilovi01.html

<html>

<head>


/> <title>Stilovi</title>

| 23 <style type="text/css">

/* 1. navodeći HTML tag ciljnih elemenata */

p {color: #0000ff;

}

/* 2. navodeći klasu elemenata */

.redtext {color: #ff0000; text-align:center;

}

/* 3. navodeći direktnu identifikacionu vrednost (ID) elementa */

#greentext {color: #00ff00; text-align:right;

}

</style>

</head>

<body>

<p>Prvi pasus. Tekst je levo poravnat i plave boje. </p>

<p id="greentext">Drugi pasus. Tekst je desno poravnat i zelene

boje.</p>

<p class="redtext">pasus. Tekst je centriram i crvene boje. </p>

</body>

</html>

Gde može da se nalazi CSS kod

CSS kod se može zadavati na tri standardna mesta:

1. direktno u HTML tag-u, koristeći argument style (inline)

2. u zaglavlju dokumenta unutar taga style

3. u eksternoj datoteci, koja se linkuje tag-om link

Za jako male dokumente, argument style u nekom tagu (1.) može biti prihvatljiv, ali za veće

dokumente ne može jer se na ovaj način stil definiše za svaki elemenat ponaosob. Ovo treba izbegavati jer

nepotrebno gomila kod u dokumentu i potire osnovni razlog uvoĎenja CSS razdvajanje definicije izgleda

od samog sadržaja i negativno utiče na čitljivost čime se otežava i održavanje stranice. Argument style

taga se najčešće koristi ako neki element ne pripada nijednoj grupi i ima posebne zahteve u odnosu na sve

ostale elemente.

Definicija stilova se najčešće radi grupišući elemente u klase, pomoću argumenta class taga, a zatim

definišući izgled tih klasa bilo u okviru elementa style u zaglavlju (2.) ili u eksternoj datoteci (3.). Ako

definišemo stil u zaglavlju njegov opseg vidljivosti je ta stranica, to jest samo elementi na ovoj stranici

mogu koristiti stilove definisane u zaglavlju stranice.

Stilovi u eksternoj datoteci imaju jednu prednost u odnosu na preostala dva načina (stilovi definisani u

zaglavlju i inline stilovi), a to je da pomoću eksterne datoteke možemo da utičemo na elemente više

dokumenata. Dovoljno je da Web dizajner bude dosledan u definisanju klasa elemenata, da bi jedan fajl

sa stilovima odreĎivao izgled svih stranica. Bilo koja izmena u fajlu sa stilovima utiče na sve stranice

koje koriste te stilove. Na ovaj način pomoću eksterne datoteke možemo centralizovano da upravljamo

stilovima i izgledom dela ili celog sajta. Eksterna datoteka u kojoj se čuvaju CSS stilovi je obična

tekstualna datoteka sa ekstenzijom .css

Redosled slaganja (prioritet) i interpretacije stilova

Koji će stil biti korišćen ako definišemo stil za isti elemenat na više mesta?

Uopšteno govoreći, možemo reći da se stilovi slažu u jedan virtuelni stil pri čemu su poreĎani po starini,

što je veći broj nabrajanju stil ima veći prioritet.

1. Browser default

2. External style sheet

3. Internal style sheet (unutar <head> taga)

4. Inline style (unutar HTML elementa)

Znači inline CSS (unutar (inline) HTML elementa) ima najveći prioritet, što znači da će „pregaziti“ svaku

definicije u prethodna četiri slučaja. Stil definisan unutar head sekcije dokumenta je stariji od eksternog

fajla i browser default-a. Browser default zavisi od podrazumevanih postavki konkretnog browser-a.

| 24 Pogledajmo sledeći primer. Recimo da imamo jedan eksterni CSS fajl u kojem je definisan izgled za <p>

HTML elemenat, u našem primeru definisali smo za <p> tag da je zelene boje i snimili ovaj fajl pod

imenom eksterni.css.

eksterni.css

p {

color:#00FF00;

}

Sada pravimo fajl stilovi02.html sa definicijom izgleda <p> taga u okviru <head> sekcije HTML

dokumenta kojim smo definisali da je svaki pasus crvene boje i sa jednom definicijom stila u okviru taga

unutar body sekcije u kojem smo rekli da je tekst plave boje. Linkujemo sa fajlom eksterni.css navodeći

liniju koda <link href="eksterni.css" rel="stylesheet" type="text/css" />. Naravno, relativna dresa

podrazumeva da se fajlovi stilovi02.html i eksterni.css nalaze u istoj fascikli.

stilovi02.html

<html>

<head>


/>

<title>Stilovi</title>



<style type="text/css">

p {color:#ff0000;

}

</style>



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



</head>

<body>

<p>Prvi pasus.</p>



<p style="color:#0000FF">Drugi pasus. </p>

<p>Treci pasus.</p>

</body>

</html>

Rezultat bi trebalo da bude sledeći: Drugi pasus biće uvek plave boje jer je inline stil najstariji, zatim će

važiti CSS definicaja p taga definisan unutar stila u okviru head sekcije dokumenta, zato će prvi i treći

pasus biti crvene boje, a zelene boje neće biti nijedan deo teksta iako je definisan u eksternom fajlu jer je

definicija u okviru head sekcije dokumenta starija od definicije u eksternom CSS fajlu. Tek ukoliko

uklonite definiciju stila za p tag u head sekciji dokumenta za prvi i i treći pasus važiće pravilo definisano

u eksternom css fajlu i biće zelene boje.

Svojstva i vrednosti

Svojstva na koja želimo da utičemo u datom opisu se definišu preko niza ključnih reči definisanih u W3C

standardu, a koje se kategorišu u sledeće grupe:

definicija pozadine elementa

ivica

okvir

prikaz

dimenzije

font

generisani sadržaj

margine

| 25 unutrašnji prazan prostor

pozicija

izgled pripadajućeg teksta

Vrednosti pojedinih svojstava se definišu na dva načina:

predefinisanim ključnim rečima

brojevnim vrednostima

Predefinisane ključne reči za vrednosti svojstava se koriste u situacijama kada dato svojstvo ima

ograničen broj mogućnosti. Tako na primer svojstvo za definiciju pozadine elementa može biti samo

scroll (da se kreće uvek zajedno sa sadržajem elementa) i fixed (da stoji uvek na istom mestu bez

obzira na sadržaj).

Brojevne vrednosti se mogu zadavati na nekoliko načina:

zadajući samo brojevnu vrednost

navodeći i jedinicu veličine skupa sa opisom (px, em, pt, ...)

Ponovimo naučeno i naučimo nešto novo o CSS-u

Tri su moguća načina da sačuvamo CSS pravila:

1. izvan HTML dokumenta (external style sheets)

Lepota i snaga CSS-a leži upravo u mogućnosti da se svi stilovi koje ćete koristiti na celom sajtu smeste

izvan HTML dokumenta. To nam omogućava da promenom stila na jednom jedinom mestu promenimo

prikaz na celom sajtu!

Ovom metodom sve stilove smeštamo u zaseban CSS dokument - običan fajl sa .css ekstenzijom kojeg

možete napisati u Notepadu i snimiti npr. u root direktorijumu u kojem se nalazi i homepage (index.html).

U njemu ćemo definisati sva CSS pravila koja vam trebaju na sajtu i nazvati fajl npr. mo jstil.css.

Eksterni .css fajl treba povezati s HTML dokumentom. To se radi uglavnom pomoću <LINK> tag-a u

<head> sekciji:

<head>

<TITLE> Naslov stranice </TITLE>

<LINK rel="stylesheet" type="text/css"

href="http://www.cnti.info/mojstil.css">

</head>

Jednom kad povežete HTML dokument sa .css fajlom, stilovi definisani u njemu primenjuju se na tagove

pomoću class atributa.

2. unutar <head> tag-a HTML dokumenta (embedded, document-level style sheets)

CSS definišemo unutar specijalnog <style> tag-a:

<head>

<title> naslov stranice </title>

<style type="text/css">

p { font-size: large; color: red }

</style>

</head>

Primetite da unutar <style> tag-a obavezno morate definisati tip stila: ovde je to type="text/css".

Ova metoda definisanja CSS stilova dobra je ako različitim HTML stranicama želite dodati različite

stilove.

3. unutar samog HTML tag-a (inline styles)

Stilove možemo umetati u gotovo svaki HTML tag pomoću atributa style i direktnog specificiranja stila

na sledeći način:

<p style="font-size: large; color: red">

neki tekst paragrafa prikazan velikim slovima i crvenom bojom

</p>

Napomena! Nemojte pomešati <style> tag koji smo koristili u metodi pod 2) i style atribut koji koristimo

| 26 ovde. Radi se o dve različite stvari (jedno je tag, a drugo atribut).

Inline stilovi mogu biti korisni ako vam odreĎeni stil treba samo na jednom jedinom mestu i nigde više -

tada bi bilo glupo taj stil definisati globalno i nepotrebno povećavati veličinu CSS dokumenta. Inline

stilovi imaju najviši prioritet od svih metoda za umetanje CSS stilova - specifikacija u inline stilu će

pregaziti sve ostale CSS specifikacije. Upravo u tu svrhu se inline stilovi najčešće i koriste.

Ponovimo sintaksu

Svako CSS pravilo pišemo u sledećem obliku (kôd se radi preglednosti obično piše u nekoliko linija):

selektor {

ime-stila1: vrednost1;

ime-stila2: vrednost1 vrednost2 }

Selektor definiše kojem HTML tagu želite dodati CSS stil i u vitičastoj zagradi odreĎujete kako će taj stil

izgledati. Stil odreĎujete tako da naznačite ime stila i dodelite mu vrednost. Ako definišete više stilova,

odvajajte ih tačka zarezom. Tačka zarez ne piše se iza poslednjeg navedenog stila. Jednom stilu možete

dodeliti više vrednosti i tada ih samo navodite bez interpunkcija.

Primer:

table {

background-color: blue;

border: 2px solid red }

Ovim smo kao selektor odabrali tag table i odredili da će svaka tabela u našem dokumentu imati plavu

pozadinu i ivicu širine 2 piksela iscrtan punom linijom crvene boje.

Primetite da su atributu border dodate tri vrednosti koje smo odredili bez upotrebe interpunkcija.

Ova osnovna sintaksa je vrlo jednostavna - zapamtite gde idu zagrade, dvotačke i tačka zarezi i ne možete

pogrešiti. S vremenom ćete naučiti i koje izraze koristiti kao atribut i vrednost - postoji samo ograničen

broj mogućnosti koje se mogu pojaviti na tim mestima. Proširimo sad osnovnu sintaksu CSS-a!

Nizanje selektora

Jedan te isti stil možemo primeniti na nekoliko selektora (HTML tag-ova) odjednom:

h1, h2, h3 { color: green; text-align: right }

Svi naslovi sadržani u heading tag-ovima h1, h2 i h3 biće zeleni i poravnati u desno. Svaki put kad isti

skup stilova želite primeniti na nekoliko različitih tag-ova, koristite nizanje selektora. Primetite samo da

kod nizanja selektore morate odvojiti zarezom.

Kontekstualni selektori

CSS vam omogućava da odreĎene stilove primenite samo kad se neki HTML tag nalazi u odreĎenom

kontekstu, tj. u odreĎenoj okolini. Zamislite da želite sadržaj u italic tagu <i> obojen zelenom bojom, ali

samo u naslovu drugog reda. Tada biste napisali sledeći stil:

h2 i { color: green }

Svaki put kad browser naleti na italic tekst unutar h2 naslova, on će taj tekst prikazati zelenom bojom.

Italic tekst u ostatku sadržaja neće biti zelen. Na ovaj način možete usloviti prikazivanje stilova.

Zapamtite samo da u ovom slučaju ne smete koristiti zareze jer će to browser protumačiti kao nizanje.

Kontekstualne selektore možete kombinovati s nizanjem:

h1 i, h3 i { color: blue; font-weight: bold }

Svaki italic tekst unutar h1, i h3 naslova biće plav i podebljan.

Dosad smo CSS pravila pisali tako da smo birali HTML tag i odredili koje stilove će on poprimiti. Na taj

način smo odreĎeni skup stilova uvek ograničavali na odreĎene tagove. MeĎutim, CSS stilove možemo

koristiti i univerzalno i tada koristimo klase.

Kao što smo videli klasa je skup CSS pravila koji se definiše imenom klase. Da biste videli efekte koje ste

u klasi definisali, ime klase trebate pozvati u HTML dokumentu u okviru nekog HTML tag-a pomoću

| 27 class atributa.

Generičke klase

Generička klasa nije vezana za pojedini HTML tag i može se upotrebljavati na neograničenom broju

lokacija unutar HTML dokumenta. Definišemo je proizvoljnim imenom kojem prethodi tačka:

.plavo { color: blue}

Generičku klasu pozivate pomoću class atributa:

<a href="http://www.cnti.info" class="plavo"> Ovo je primer linka

</a>

Klase specifične za pojedine HTML tagove

OdreĎenu klasu možete vezati uz pojedini HTML tag. U tom slučaju ispred tačke navodite tag na koji će

se klasa primenjivati:

p.zeleno { color: green }

Ovim smo definisali klasu zeleno i dodelili klasu HTML tagu <p>. Svaki put kad želite neki paragraf

obojiti zeleno, moraćete unutar HTML dokumenta pozvati klasu na sledeći način:

<p class="zeleno"> Zeleni tekst pasusa </p>

Pseudo-klase

Pseudo-klase nam omogućavaju da definišemo izgled pojedinih HTML tag-ova u određenim stanjima.

Najpoznatije i najkorištenije pseudoklase su one koje odreĎuju izgled linkova, tj. izgled <a> tag-a .

Pseudo-klase se (umesto tačkom) od HTML tag-a odvajaju dvotačkom.

Pseudo-klase su zasad definisane samo za <a> i <p> tagove:

a:link - odreĎuje izgled HREF neposećenog linka

a:active - odreĎuje izgled HREF aktivnog linka

a:visited - odreĎuje izgled HREF linka kojeg smo već posetili

p:first-line - kontroliše izgled prve linije paragrafa

p:first-letter - kontroliše izgled prvog slova paragrafa

Na primer, možemo odrediti da link ne bude podvučen i da bude crvene boje ali kad se nacilja mišem da

postane podvučen

а:link {text-decoration: none; color: red} а:hover {text-

decoration: underline;}

Korištenje ID oznaka kao klasa

Kao klasu možemo koristiti ID oznake, ali podsetimo se, postoji jedna velika razlika. Dok istu klasu

možete koristiti na više mesta i za više HTML tag-ova, ID oznake ne možemo višestruko koristiti. One se

koriste da bi se odreĎenom elementu dodelio specifičan stil koji neće imati nijedan drugi element u

HTML dokumentu.

Sintaksa je jednostavna. Na istom mestu gde bismo inače definisali klasu, definišemo ID oznaku:

#crno { color: black }

ID oznaku pozivate pomoću ID atributa unutar raznih HTML tag-ova :

<h2 id="crno">Ovo je naslov drugog reda crne boje.</h2>

Neki browser-i će vam možda dozvoliti da ID oznaku koristite na više mesta, ali to definitivno nije

željeno ponašanje i bolje je da u tu svrhu koristimo klase.

Tagovi <div> i <span>

Ova dva HTML tag-a jesu odličan način da bilo kojem HTML elementu ili delu HTML koda dodate CSS

stil. Ovi tagovi se koriste <div> i <span>najčešće u svrhu grupisanja odreĎenih HTML elemenata i

| 28 definisanja CSS stilova za njih. Razlika izmeĎu ova dva tag-a je u tome što se <span> koristi unutar

teksta za primenu stila na odreĎena slova, dok <div> označava početak i kraj odreĎene sekcije (division)

dokumenta i uvek umeće prekid unutar teksta, postavljajući sadržaj u novi red.

Da bismo primenili stilove na HTML elemente grupirane u <div> i <span> tagove, koristimo class

atribut unutar tih tag-ova:

<p> Tag span možemo primeniti <span class="zeleno"> na tekst

</span> bez umetanja prekida. </p>

Hajde da u ovom istom primeru <span> tag zamenimo sa <div> tag-om i da vidimo šta će se dogoditi.

Generalno, text će u browser-u biti prikazan s prekidom linije tamo gde je umetnut <div> tag.

Vrednosti atributa stilova

Atributima stila dodeljujemo vrednosti i za to imamo na raspolaganju 4 moguća načina: numeričke

vrednosti, boju, URL i rezervisana imena.

Numeričke vrednosti

Numeričke vrednosti zadajemo pomoću brojeva koje kombinujemo s različitim mernim jedinicama:

pixel (px) - point (pt) - pica (pc) - Em (em) - Ex (ex) - Inches (in)

millimeters (mm) - centimeters (cm) - percentage (%)

Primer:

table { border: 2px }

Boja

Boju zadajemo pomoću RGB vrednosti (npr. #000000) ili navoĎenjem imena boje. Imena poput blue ili

green dodeljena su samo osnovnom setu od 16 boja. Koristite Color Picker.

Primer:

.table { background-color: white }

daje tabeli belu pozadinu isto kao i

.table { background-color: #FFFFFF }

URL

URL se zadaje drugačije nego u HTML standardu.

Primer:

.pozadina { background-image: url(slika.gif) }

URL se poziva navoĎenjem rezervisane reči url i definisanjem putanje u malim zagradama. Ne smete

ostaviti razmak izmeĎu reči url i otvorene zagrade. Putanja koji se definiše u zagradi može biti apsolutna

(u tom slučaju navodi se puna putanjazajedno s http://) ili relativna (s obzirom na URL definisanog CSS-

a). Kad zadajemo putanju relativno, relativnost se odnosi na lokaciju definisanja stila. Ako je stil

definisan u eksternoj datoteci, putanja će biti relativna u odnosu na tu .css datoteku. Ako pak koristimo

embedded ili inline CSS stil, putanja je relativna u odnosu na HTML dokument u kojem je definisan CSS

stil.

Rezervisana imena

Često se vrednosti stilova zadaju imenima koja su predefinisana u CSS standardu. Neka od tih imena su

imena boja koja smo već spomenuli. Rezervisana imena koja ćete često koristiti su npr. imena za veličinu

teksta (large, medium, small), imena raznih efekata (dotted, underline, bold) itd.

Česte upotreba stilova

Postoji nekoliko desetaka različitih stilova koji kontrolišu prikaz vašeg HTML dokumenta. Sve stilove

grupišemo prema tome kakav prikaz kontrolišu:

fontovi, tekst i boje

| 29 pozadina

box i stilovi bordera (borders)

liste

pozicioniranje

Fontovi, tekst i boje

Nećemo ulaziti u popisivanje svih mogućih stilova koji postoje, nego ćemo samo navesti što sve u ovoj

kategoriji možete kontrolisati pomoću CSS-a.

Sve na šta ste navikli u HTML <font> tagu nalazi se i ovde: odreĎivanje fonta (Arial, Verdana...), zatim

efekti poput podebljanog ili kurzivnog teksta, veličina, boja... Tekst se može ulepšati nekim novim

efektima kao što je visina reda teksta, razmak izmeĎu slova, reči i redova, poravnavanje i uvlačenje

teksta, zatim efekti poput potcrtavanja, precrtavanja itd.

Primer definisanja stila teksta unutar jednog tag-a :

.sirokitext {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: x-small;

color: #000000;

letter-spacing: 6px }

Pozadina

Umesto da izgled pozadine eksplicitno odreĎujete u <body> tagu kao do sada, primenite CSS! Možemo

odrediti boju, pozadinsku sliku, način prikaza pozadine (fiksirana ili pokretna slika, ponavljanje samo po

x- ili y-osi) čak i poziciju pozadine.

Primer klase koja definiše sliku kao fiksiranu pozadinu:

.pozadina {

background-image: url(poz.gif);

background-repeat: no-repeat;

background-attachment: fixed }

Ovako definisanu klasu jednostavno pozovite iz <body> tag-a li nekog drugog tag-a:

<body class="pozadina">

...

</body>

Liste

Liste su u CSS-u dobile nove efekte, poput mogućnosti odreĎivanja neke gif sličice koja će se prikazivati

umesto bullet-a. Primer liste koja umesto kao bullet koristi neku sliku:

ul { list-style-image: url(bullet1.gif) }

CSS Box model

Tematika CSS box modela je malo složenija pa ćemo je obraditi posebno.

Implementacija Box Modela

Box stilovi omogućavaju sasvim nove efekte. Da biste ih razumeli, potrebno je znati da CSS svaki

element HTML stranice tretira kao da je oko njega opisan pravougaonik (box). Pogledajmo to na slici:

| 30

Svaki od ovih svojstava: width, border, padding i margin mogu se zasebno kontrolisati.

Padding je razmak izmeĎu sadržaja element a i ivice (border-a).

Margin je vrednost koja odreĎuje razmak izmeĎu elemenata u HTML dokumentu. Kad nekom elementu

odredimo marginu, mi povećavamo prostor koji taj element zauzima tj dodajemo mu nevidljivi prostor do

ivice margine (na slici je taj nevidljivi ivica margine izražena većim pravouganikom od isprekidane

linije).

Ako su vrednosti margine i padding-a na nuli, element zauzima samo prostor odreĎen njegovom

sopstvenom širinom (element width). Povećavamo li njihove vrednosti, element zauzima sve više i više

mesta.

Za svaki element može se definisati pozadina i svi stilovi pozadine - naglasimo samo da će se pozadina

prostirati i na delu kojeg odredimo s vrednošću za padding.

Do sada smo u standardnom HTML-u kod ivica (borders) mogli odrediti samo širinu i boju. CSS nam

omogućava da svaki border (levo, desno, gore i dole) ima sopstvena svojstva poput boje, širine i efekta.

Posebno su zanimljivi efekti ivica: osim pune linije, sada možemo imati tačkastu, isprekidanu, dvostruku

ivicu, i još neke zgodne efekte.

Sledeće slike (2D,3D) lepo ilustruju hijerarhiju box modela sa naglašenim delovima koji mogu biti

transparentni.

| 31

Box model je najbolje ilustrovati kratkim primerima. Da bismo sračunali koliko nam je ukupno prostora

potrebno za jedan elemenat, računamo to na sledeći način:

Ukupna širina = leva margina + levi border + levi padding + širina elementa + desni padding + desni

border + desna margina

Ukupna visina = gornja margina + gornji border + gornji padding + visina elementa + donji padding +

donji border + donja margina

Pogledajmo primer skupa CSS pravila koja sadrže deklaracije za sva svojstva box modela (širina, visina,

padding, border, margina) definisana na jednom klasi koju smo nazvali "box":

.box {

width: 300px;

height: 200px;

padding: 10px;

border: 1px solid #000;

margin: 15px; }

Ukupna veličina elementa na koji bi bila primenjena gornja klasa se računa na sledeći način:

Ukupna širina = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px

Ukupna visina = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

Gornji račun ilustrujemo sledećom slikom

Iz ovog kratkog primera vidim da naš element zauzima najmanje 352px u širinu i 252px u visinu. Ako na

| 32 stranici nema toliko mesta, naš elemenat će biti pomeren ili će se „preliti“ izvan svog bloka (overflow).

Primer dodavanja plave pozadine, border-a od isprekidane linije i padding-a od 5px tekstu:

.txtpozadina {

background-color: blue;

padding: 5px;

border: 2px dashed }

CSS zaključno

Dreamweaver koji će biti predmet naših budućih izučavanja ima solidno i vrlo jednostavno okruženje za

izradu CSS stilova. Stilovi su Vam već navedeni i na nama je da samo odredimo vrednost njihovih

atributa izborom iz padajućih menija. Umetanje CSS klasa je takoĎe vrlo jednostavno i izvodi se sa dva-

tri klika mišem. Kao zaključak dovoljno je da samo navedemo da je CSS nešto što ne smemo zaobići jer

predstavlja tehnologiju koja će sigurno biti još dugo prisutna u Web dizajnu. Uz brojne prednosti, a mana

gotovo da i nema, CSS postaje jedan od najjačih alata web dizajna za čije izučavanje i savlaĎivanje se

neminovno isplati odvojiti i mnogo više vremena nego što smo mu mi posvetili u ove dve kratke lekcije.

Zato Vam toplo preporučujemo da posvetite neko dodatno vreme za izučavanje CSS, sigurni smo da će se

isplatiti...

[tutorial] osnove html-a i css-a

Documents