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 podrka 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 BEE HTML? ........................................................... 2

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

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

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

VAA PRVA PRAVA INTERNET STRANICA .................................... 5

O ADRESAMA .................................................................... 6 ADRESE I ZATO 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 MOE DA SE NALAZI CSS KOD ........................................ 23

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

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

PONOVIMO NAUENO I NAUIMO NETO NOVO O CSS-U ............ 25

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

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

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

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

CSS ZAKLJUNO ............................................................... 32

Uvod u HTML

HYPER JE SUPER!

Da biste bili uspean stvaralac Internet stranica morate dobro savladati Hyper Text Markup Language tj. HTML. HTML je jednostavan jezik za opis strukture i opis sadraja Internet dokumenata koji se prikazuju u Internet itaima (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 najniem 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 uspean kreator Internet prezentacija. U ovoj lekciji pronai ete samo osnovne i uvodne informacije o HTML-u, a u sledeim lekcijama i mnogo vie, o ovom jednostavnom a istovremeno monom alatu za izradu Internet stranica. Kad budemo familijarni sa HTML-om, upoznaemo se i sa osnovama kaskadnih stilova, monom alatkom za opis izgleda sadraja Internet dokumenata (Cascading Style Sheets) i sa gore pomenutim alatom Macromedia Dreamweaver-om.

ta to bee HTML?

Internet, kao svetsku mrea raunara, moete koristiti na vie naina. Jedan od najpopularnijih naina upotrebe je pregledanje Internet stranica, proces popularno nazvan surfovanje Internetom. Svaka Internet

stranica je hipertekstualan (Hypertext) dokumenat. Hipertekst se sastoji od meusobno povezanih delova teksta (ili drugih objekata) tako da italac (korisnik) interaktivno odreuje redosled itanja (pregledanja). To praktino znai da dokumente na Internetu ne morate da itate sekvencijalno kao knjigu, ve se moete etati kroz dokumenat, ili dokumente po elji. Moda bi bila najbolja analogija sa knjigom koja sadri puno fusnota, gde italac kad naie na nepoznat termin oznaen fusnotom, on pree na prouavanje fusnote na dnu stranice ili u na kraju knjige (endnote, index pojmova), i po zavretku se vraa na mesto itanja gde se nalazi nepoznat termin, pa dalje nastavlja itanje redom, tj. sekvencijalno.

Kad su u pitanju Internet dokumenti, sekvencijalno itanje uopte nije neophodno. Korisnik se kree kroz Internet dokumente koristei veze (linkove), pomou kojih skae na razliite 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 ugraujemo u Internet dokumenat, pogaate, uz pomo HTML-a. Meusobno povezani dokumenti na Internet-u ne sadre samo tekstove ve i razliite sadraje kao to su slike, zvuci, animacije, video materijale, pa se Internet moe nazvati i hipermedijalnim sistemom. Sve ove medije i njihov meusoban odnos opisujemo i ugraujemo u Internet stranicu, opet uz pomo HTML-a. Dakle, osnovni jezik za kreiranje strukture i sadraja, kao i formatiranje sadraja stranica na Internetu jeste HTML.

Pria o nastanku HTML-a stara je koliko i sam Internet. Sa razvojem Interneta razvijao se i HTML, a jedan od najveih krivaca za to je firma Netscape, koja je na samom poetku na svoju ruku uvodila nestandardna proirenja u HTML jezik. Naravno, ni ostali proizvoai browser-a nisu puno zaostajali za Netscape-om, pa je za taj period razvoja Interneta vezana i pria o takmienju proizvoaa browser-a u uvoenju nestandardnih proirenja u iste, poznata pod imenom Rat Browser-a. Da bi se izbegli dalji ratovi meu gigantima softverske industrije, proirenjima, standardima i novim verzijama HTML-a bavi se posebno zvanino 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 sadri komande, tipove podataka, operatore, promenljive i sline stvari. HTML je vie jezik za opis Internet dokumenata. Pomou njega moete menjati boju i veliinu teksta, boju pozadine, umetnuti sliku i zvuk na Internet stranicu, ali ne moete izraunati koliko je 2+2. U svojoj sutini HTML dokumenat je obian tekstualni dokumenat sa ekstenzijom .htm ili .html, tako da se moe 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 potovati ih pri izradi HTML dokumenata. Svaki HTML dokument sastoji se od deklaracija, elemenata i atributa elemenata. O deklaracijama rei emo vie u nekoj od sledeih lekcija, a sada emo se posvetiti elementima i atributima.

Elementi HTML-a

Elementima formiramo strukturu i opisujemo izgled delova sadraja HTML dokumenata. Elementi mogu da se nalaze bilo gde u okviru HTML dokumenta. Svaki elemenat sastoji se iz tri dela: poetni tag, sadraj i zavrni tag. Tag je specijalna sekvenca znakova takozvani marker (Markup) koji je ograen znacima . Zavrni tag razlikujemo od poetnog po znaku / posle znaka i , osim sadraja taga . Sadraj taga 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. sadraj stranice i HTML elementi za formatiranje (opis) tog sadraja, nalazi se u telu dokumenta koje uokviruje tag. U HTML dokumentu sme da postoji samo jedan par tagova . Ovaj element specificira glavni sadraj dokumenta. Poetni tag ima atribute koji omoguavaju da se specificiraju karakteristike koje va\e na nivou dokumenta (boja pozadine ili slika, boja teksta, boja poseenih i neposeenih linkova, itd.)

Komentar u HTML kodu

Komentari u HTML kodu se navode u sledeem obliku:

Komentar poinje sekvencom znakova (izmeu ova dva znaka moe doi i razmak). Sve to se nalazi izmeu ove dve sekvence znakova Web browser e ignorisati.

Ispod se nalazi jedan primer pravilno struktuiranog html dokumenta.

[struktura.html-code]

Naslov

Tekst dokumenta.

U HTML-u ne postoji razlika izmeu malih i velikih slova za elemente u tagovima tako npr. , , i predstavljaju iste elemente. Preporuujemo da elemente HTML-a piete malim slovima. Takoe sve suvine znakove razmaka (space), tabulator i znake za novi red u Internet dokumentu Internet ita ignorie, ali njihovo postojanje utie na veliinu Internet dokumenata. Stoga preporuujemo da ih izbegavate, jer popularnost i poseenost Vaih stranica, osim izgleda i sadraja zavisi u velikoj meri i od brzine uitavanja istih.

Neki elementi doputaju da se izuzme zavrni tag, na primer elemenat br. Elemenat br slui za prelom reda u HTML-u (kao kad pritisnete Shift+ENTER u programu za obradu teksta). Elemenat br ne zahteva

zavrni tag u obliku . Jo jedan primer HTML elementa koji dozvoljava da se izuzme zavrni tag je img elemenat, namenjen ukljuivanju slika na Internet stranicu.

Atributi elemenata HTML-a

Elementi mogu da sadre atribute kojima se opisuju specifini parametri elementa kao to su duina, visina, lokacija objekta sa koje se elemenat uitava i slino. Atributi se uvek ukljuuju u poetni tag, nikako u zavrni. Atribut se sastoji iz kljua i njemu dodeljene vrednosti i to se zapisuje na sledei nain: Naziv_Atributa="Vrednost_Atributa". Vrednost atributa ukoliko postoji je ograniena dvostrukim ili jednostrukim navodnicima (uobiajeno je da se navode dvostruki kako bi u okviru njih mogli postaviti i jednostruke ako se ukae potreba za tim).

Na primer, img elemenat poseduje src atribut koji obezbeuje lokaciju slike sa koje se slika uitava i atribut alt koji obezbeuje alternativni tekst koji e biti prikazan na mestu predvienom za prikazivanje slike ukoliko uitavanje slike na HTML stranicu ne uspe iz bilo kog razloga. Sintaksa img elementa je sledea:

.

Na primer:

gde je "Slike\" lokacija slike, a SlikaLeviBaner.jpg je ime slike koja se uitava.

| 5 Poto je pitanje ispravnog navoenja lokacije objekata koje ukljuujete u HTML stranicu od sutinske vanosti za njeno ispravno funkcionisanje, rei emo neto vie o adresiranju. ta praktino znai izraz "\Slike\"? Znai da se fascikla Slike koja sadri 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 nain adresiranja zove se relativno adresiranje.

Postoji i apsolutno adresiranje, odnosno navoenje pune adrese od korenskog direktorijuma, root-a. Recimo da se i fascikla Slike i HTML stranica koja sadri gornji img tag nalaze na C disku ili na sajtu cnti.info. Apsolutne adrese u src atributu imgtag-a bi u tom sluaju izgledale ovako

odnosno

Prednost relativnog adresiranja je u tome to Vi bez bojazni moete premetati 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 premetanju morate menjati direktno u HTML kodu sve adrese. To je u redu ako uitavate samo jednu sliku na stranicu, ali ta ako ih je vie? Iako programi kao Dreamweaver, to emo videti kasnije, imaju rutinu koja e pokuati da Vas spase greke ako premetate fajlove koji su linkovani (slike u naem primeru) i da zameni stare nevaee linkove novima, greke su uvek mogue.

Povedite rauna o tome gde smetate slike i sline objekte koje ukljuujete u HTML kod, jer se vrlo lako moe desiti da se isti objekti ne prikau ispravno na HTML stranici ako ste neto zabrljali sa adresama. O adresama bie opet rei u nekom od sledeih tekstova, kad budemo govorili o postavljanju Internet prezentacije na Web server.

Vaa prva prava Internet stranica

Pre nego preemo na izradu same HTML stranice, potrebno je da napomenemo da je svrha ovog primera da ukae na jednostavnost izrade stranica uz pomo HTML-a. Radiemo u lokalu, na Vaem raunaru 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. Pronaite jednu lepu sliku na Vaem disku i iskopirajte je u fasciklu Slike, pa je zatim preimenujte u SlikaLeviBaner. U naem primeru slika je tipa jpg, ali Vi ne morate slediti na primer, moete 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 konano napravimo Vau prvu pravu Internet stranicu. Svi programeri i informatiari sigurno su u ivotu nebrojeno puta napravili aplikaciju Zdravo svete poinjui da ue neki programski jezik, pa zato bismo mi bili izuzetak? Dakle, napraviemo Internet stranicu na kojoj pie 'Zdravo HTML svete!'. Otvorite novi Notepad dokumenat i ukucajte u njemu:

[zdravosvete.html-code]

Moja prva Internet stranica

Zdravo HTML svete!

Pri snimanju dajte ime dokumentu, recimo zdravosvete.html, i smestite ga u fasciklu Radna. Pokrenite ovu stranicu dvoklikom na ikonicu dokumenta zdravosvete.html. Uoite da ova stranica ima naslov Moja prva Internet stranica zahvaljujui tagu title koji se smeta u okviru head taga.

| 6 Kao to je ve jednom napomenuto body tag sadri atribute za kontrolu i format prikaza koji se odnose na telo dokumenta. Jedan od njih je bgcolor - pomou 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 zato su one bitne...

Adrese su od velike vanosti za ispravno funkcionisanje Web-a. Ako imate neispravnu adresu, da li ete stii na eljeno odredite? Verovatno ne. Zato emo adresama na samom poetku obratiti punu panju. 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 odreena 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 moe biti na istom ili drugom domenu.

esto hyperlink skraujemo na link. Hypertext (u znaenju vie od teksta) je oblik teksta koji egzistira na Web-u koji je funkcionalno bogatiji od obinog tekstualnog dokumenta jer omoguava korisniku da istrauje druge Hiper tekstove, odnosno Web stranice povezanih sa prvom stranicom specifinim reima ili slikama. Veza izmeu prve stranice i drugih se ostvaruje upravo hiperlinkovima definisanim na specifinim reima, slikama,... Hiperlink nije nita drugo do adresa zapisana u odreenom obliku.

Kada kreiramo hiperlink, odredite ove adrese je zapisano u konkretnom formatu, koji se jo skraeno naziva URL (Uniform Resource Locator). URL sadri u sebi adresu web servera (lista poddomena sve do internet domena najvieg nivoa), putanju do stranice (fajla) i sam naziv fajla (web stranice). URL takoe 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 moemo razvrstati na relativne i apsolutne. Apsolutni hiperlinkovi (URL-ovi) sadre potpune adrese, ukljuujui tip protokola, naziv web servera, putanju do fajla i naziv fajla. Relativnom URL-u nedostaje jedan ili vie delova potpune adrese. Nedostajui delovi adrese se formiraju u odnosu na tekuu 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 tekuu stranicu Uobiajena je praksa da se unutar stranica na Web-u koriste relativni URL-ovi koji sadre samo deliminu putanju i naziv fajla.

Koncentriimo se samo na adrese. Uzmimo da postoji sledea hijerarhija fascikli na naem 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 obraate apsolutnom adresom slici logo.jpg ona glasi ovako http://www.cnti.info/Primer/Slike/jpg/logo.jpg . Ovakvom adresom moemo se obratiti dokumentu

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

Ako se obraate 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 sluaju 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 moe pogreiti. Druga potencijalno problematina osobina asolutnih adresa je njihova duina koja raste sa uslonjavanjem hijerarhije i to je adresa dua lake je pogreiti odnosno tee je baratati njome.

Ako elimo da referenciramo sliku logo.jpg na stranici index.htm to moemo da uradimo referenciranjem apsolutne i relativne adrese. Videli smo da apsolutna adresa u sebe ukljuuje 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 bie ispravno referencirana. Ukoliko fajlove sajta premestimo na neki drugi server, recimo www.cnti.co.rs gornji link nee 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 tekueg fajla sa kojeg referenciramo do prvog zajednikog pretka sa fajlom na

koji se referenciramo, a zatim navodimo putanju od zajednikog pretka do fajla na koji se referenciramo. U naem primeru, da bi referencirali sa Index.htm dokumenat logo.jpg ispravna relativna adresa bi bila sledea ../Slike/jpg/logo.jpg. Podsetimo da je u fascikli Docs dokumenat Index.htm, a u fascikli jpg slika logo.jpg.

Dakle, sekvenca znakova ../ ima znaenje nivo vie, i ve na tom nivou u naem primeru smo stigli do prvog zajednikog pretka naa dva fajla (fascikla Primer):

onog koji referencira (Index.htm) i

onog na koji se referencira (logo.jpg).

Zamislite da se fiziki kreete 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 moete premetati fasciklu Primer sa njenim sadrajem koliko god hoete, gornji relativni link e ispravno raditi dokle god se ne narui postojea hijerarhija.

Napominjemo ovde da ak i prosto preimenovanje fascikle jpg naruava konzistentnost svih adresa koje se referenciraju na sadraj fascikle jpg pre njenog preimenovanja. Jednostavno reeno, nemojte menjati imena fascikli nakon to ste se linkovali na njihov sadraj. Ovo pravilo vai 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. Uoite, ponovo napominjemo, da u nastavku putanje nakon domena nije svejedno da li su mala ili velika slova. Da bi adresa bila

ispravna moraju se identino navesti imena fascikli u putanji do odredinog fajla. U tom smislu adrese

../Slike/jpg/logo.jpg

../Slike/Jpg/logo.jpg

nikako nisu iste, i na to treba obratiti panju od samog starta. Ovakve greke su jako teko uoljive, sa adresama treba baratati oprezno.

Nastavak sage o HTML-u Podsetimo se i proirimo svoja znanja:

HTML -je skraeno od Hyper Text Markup Language.

HTML dokument je obina tekstualna datoteka sa tekstom i tagovima. HTML je case insensitive, ne pravi

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

Sadraj dokumenta opisujemo tagovima, odn tagove koristimo da definiemo izgled dokumenta. Svaki tag ima otvarajui tag: . Veina ih ima i zatvarajui tag: . Oni tagovi koji nemaju zatvarajui elementa zovu se prazni tagovi. Prazan tag izgleda ovako: a sree se i u obliku . Potonji zapis je praktiniji.

Da rezimiramo, tag je specijalni tekst tkz. "markup"-marker koji je ograen sa "". A zavrni tag ukljuuje i znak "/" posle znaka "

| 9 Komentare U HTML-u zapoinjemo sekvencom znakova . Ono to se nalazi u komentaru, browser-i potpuno ignoriu.

Ispod se nalazi primer jedne potpuno funkcionalne HTML stranice koja e po uitavanju u browser u njegovoj naslovnoj liniji imati ispisan tekst Hello World!, kao sadraj stranice imae tekst Zdravo ivahni svete! Skup karaktera upotrebljenih na ovoj stranici je slian Unicode-u i oznaava se sa utf-8 u okviru meta taga i omoguie da se sva naa slova na ovoj html stranici ispravno prikau.

Primer01.html

Hello World!

Zdravo ivahni svete!

Obrada teksta

Pasusi teksta (paragrafi) se navode izmeu tagova. Svi tagovi poinju u novom redu. Iza zavrnog taga, prelazi se u novi red, sa dodatnim praznim prostorom izmeu. Ukoliko treba ubaciti praznu liniju bez dodavanja praznog prostora, koristi se tag . U okviru poetnog taga moe se navesti atribut align, koji odreuje horizontalno poravnanje paragrafa; vrednost ovog atributa moe biti jedna od sledeih: left, center, right i justify. Ukoliko se navede samo poetni tag , podrazumeva se da je sledei element u novom redu. Zavrni tag je opcioni ali vam preporuujemo da ga koristite.

Primer02.html

Pasusi

Ovo je 1. pasus.

Ovo je 2. pasus.

Ovo je 3. pasus ispred kog je bio jedan prazan red.

Ovo je pasus koji je desno poravnat.

Ovo je pasus koji je centriran.

Naslovi se mogu istai korienjem elemenata h1, h2, h3, h4, h5 i h6. Tag h1 uokviruje naslov prvog reda, koji je, prirodno, najvei, a h6 uokviruje naslov estog reda koji je najmanji. Svaki od ovih elemenata poinje u novom redu, a browser-i dodaju jo malo praznog mesta pre zaglavlja. U okviru zaglavlja se moe navesti atribut align, koji odreuje horizontalno poravnanje zaglavlja; vrednost ovog atributa moe biti jedna od sledeih: left, center, right.

Primer03.html

Naslovi

Ovo je veliina slova u zaglavlju H1

| 10 Ovo je veliina slova u zaglavlju H2 Ovo je veliina slova u zaglavlju H3

Ovo je veliina slova u zaglavlju H4

Ovo je veliina slova u zaglavlju H5

Ovo je veliina slova u zaglavlju H6

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

(horizontal ruler) ispred i iza koje postoji prazan red. Mogue je podesiti visinu korienjem atributa size="n" (n je broj piksela), irinu pomou atributa width="n" i poravnanje pomou atributa align (mogue vrednosti su left, right, center).

Tag blockquote se esto koristi za citate. Puno se koristio za uvlaenje duih blokova teksta u odnosu na ostatak teksta to treba izbegavati.

Tag cite se koristi takoe za citate i ispisuje tekst italikom. Tag code slui za ispis programskog koda odnosno formula kao to su matematike formule. Tag pre (preformatted) obezbeuje prikaz teksta onako kako je unet (svi enteri, tab-ovi i

razmaci se prikazuju kako su uneti).

Primer04.html

Rad sa tekstom

Ovo je tekst koji je levo poravnat.

Ovo je deo teksta koji ce biti uvuen u odnosu na

prethodni pasus.

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

e biti naveden citat.

Ovo emo posmatrati kao citat.

Ukoliko treba promeniti sam izgled teksta, koriste se sledei elementi:

b - za podebljan tekst, boldiranje, preporuuje se za upotrebu na jednom znaku, strong , isto kao i b samo za vie teksta

i - za iskoen (italik) tekst, mogu se u svrhu iskoenja iskoristiti i em, def, var, cite u - za podvuen tekst, treba izbegavati jer je uobiajeno da je podvuen tekst link big - daje vei font za 1 od zadatog, small - daje manji font za 1 od zadatog, blink - daje tekst koji treperi, nije podran os svih browser-a, recimo u firefox-u radi, u IE ne

radi..

Tag omoguava da se menja boja, veliina i vrsta fonta; sav tekst izmeu poetnog i zavrnog taga bie prikazan sa specificiranim karakteristikama. Atributi u okviru poetnog taga su:

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

skali),

size - menjanje veliine, weight - debljina slova.

Primer05.html

Formatiranje teksta

| 11 Sledei tekst ce prikazati upotrebu atributa za menjanje karakteristika teksta:

Ovo je podebljan tekst.

Ovo je iskoen tekst.

Ovo je podvuen tekst.

Ovo su slova uobiajene velicine, a ovo su slova za jedan

vea od uobiajenih.

Ovo su slova uobiajene velicine, a ovo su slova za

manja vea od uobiajenih.

Ovo je tekst crvene boje, slova su

veliine 10.

I dalje traje saga o HTML-u

Pre nastavka...

Za poetak, sve primere koje smo pravili do sada bi bilo zgodno da grupiemo u jednu fasciklu, nazovimo je Primeri i smestimo je u korenskom direktorijumu WAMP-a na Vaem raunaru. Ukoliko ste pratili

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

c:\wamp\www\Primeri\. Svaki pojedinani 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 pojedinanom dokumentu iz ove fascikle obraamo se sledeom adresom koju unosimo u address baru browser-a:

http://localhost/Primeri/PrimerXY.html

Kada elite da napravite izmene u HTML kodu Vaih dokumenata, prosto ih otvorite notepad-om ili nekim naprednijim tekst editorom kao to je notepad plus, ConTEXT i slini, najzgodnije je drati istovremeno otvorene i tekst editor i Web pretraiva sa uitanom HTML stranom. U Notepad-u izmenite HTML kod i sauvajte izmene (File -> Save). Da biste videli promenu u browser-u u kom je ve otvorena Vaa stranica, morate osveiti stranicu sa Refresh (F5 funkcijski taster).

Liste

Postoje dve vrste lista: unordered (neoznaena, neureena) lista i ordered (nabrajanje, ureena) lista.

Neoznaena lista predstavlja spisak elemenata ispred kojih se nalazi bullet ili oznaka liste. Neoznaena lista poinje tagom (Unordered List). Elementi liste se oznaavaju tagom (List Item).

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

elemenata sa rednim brojevima. Poetni broj ureene liste se moe zadati atributom start.

Primer06.html

Uredjena lista

Primer ureene liste:

Azijske drave:

Evropske drave

Primer neureene liste:

Srbija

Francuska

Nemaka

Primer kombinacije ureene i neureene liste. Svaka stavka

ureene liste ima kao podlistu neureenu listu. Ureena lista

poinje rednim brojem 3 to je obezbeeno atributom start i njemu

| 12 dodeljenom vrednou 3. Ukoliko se ovaj atribut ne navede lista poinje brojem jedan. Stavka Mongolija je boldirana, a stavka

Srbija je boldirana i italik.

Azijske drave:

Kina

Mongolija

Singapur

Evropske drave:

Srbija

Francuska

Nemaka

Rad sa slikama....

Primer dobre prakse je da sve slike grupiemo 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 nae

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 opiemo 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 naem konkretnom sluaju, 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. Uitava ga liniju po liniju i interpretirajui HTML tagove formatira web stranu. Kada bi browser naleteo na prethodnu relativnu adresu, u slobodnoj

intrepretaciji, on bi je proitao 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 definiemo sliku koja e se pojaviti u HTML dokumentu. Atribut src (source-izvor) sadri ime slike koja treba da se nae u dokumentu, odnosno putanju do te slike dok atribut alt (alternate text -Alternativni tekst) sadri tekst koji e biti ispisan na mestu slike, ukoliko se ona iz nekog razloga nije uspeno uitala na web stranicu. Dimenzije slike se zadaju preko atributa height - visina i width - irina. Slika moe biti poravnata u odnosu na ostatak teksta u dokumentu, a eljena vrednost se daje u artibutu align koji moe 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 koristei sledei HTML kod:

Primer07.html

Slike

Iznad se nalazi slika koja se nee prikazati, sem u sluaju da

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

| 13 html u kojoj se konano nalazi slika.gif. Ukoliko se ispostavi da posedujete F disk sa identinom putanjom sa navedenom slikom,

molim Vas da se javite, trebalo bi da u tom sluaju uplatimo

zajedno jedan loto tiket.

Poto browser nije uspeo da nae sliku, slika ne moe biti

uitana pa e se umesto slike prikazati u okvir predvienih

dimenzija (147x56) ovien linijom debljine 1 i u njemu ispisan

alternativni tekst (Snoopy).

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

pojavie se Vaa slika SlikaLeviBaner.jpg veliine 400x100

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

nastavlja sa desne strane slike.

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

pojavie se Vaa slika SlikaLeviBaner.jpg veliine 400x100

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

bi trebao da se prethodi slici sa njene leve strane.

Linkovi

Linkovi predstavljaju jednu od bitnih razlika izmeu teksta i hiperteksta jer omoguavaju da se kreemo kroz stranice nesekvencijalno ve prema elji. U argonu obino se kae posetiti link, a ako to prevedemo u jezik pokreta i akcija to znai kliknuti miem na ponueni link da bismo preli 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 moe bit arhiva (.zip,.rar), .pdf, .doc, .xls, .php dokumenti odnosno bilo koji resurs koji je dozvoljen na

datom domenu.

Odredini objekat se identifikuje uz pomo mehanizma URI (Uniform Resource Identifiers). URL (Uniform Resource Locator) je podskup URI, i slui za lociranje nekog resursa na Internetu, i sledeeg je oblika: protokol://raunar:port/putanja/datoteka

Poto smo u nekoliko navrata priali o adresama, o apsolutnim i realtivnim adresama neemo ponovo ovde govoriti.U Primeru08.html navedenom ispod moete videti kako se prave linkovi. Poetni tag sadri slovo a (anchor) i href atribut koji je obavezan i ija je vrednost apsolutna ili relativna adresa nekog resursa. Nakon poetnog taga ide takozvano telo linka, odnosno objekat za koji se vezuje link. Najee je to tekst ili slika. Na kraju ide obavezno zatvarajui tag.

Primer08.html

Linkovi

Linkovi

Ovaj primer sadri link ka stranici

Primer07, u pitanju je relativna putanja na prethodni primer.

Ovaj primer sadri link ka

stranici Google Search , sa apsolutnom adresom poetne

stranice Google-a.

Imenovana sidra su mesta u dokumentu na koja moete "skoiti" kad kliknete neki link sidra. Vrlo est

| 14 primer je sidra link koji ste sigurno koristili na Web-u, imenuje se obino sa Top ili Vrh, pa kad kliknete na njega browser Vas prebaci na poetak stranice. Sidra su zgodna kod "dugakih " web stranica, jer pomou njih moete "skakati" po dokumentu, to e korisnici izuzetno ceniti na vaim stranicama sa puno materijala. Skrolovati miem kroz "dugake" stranice zna biti vrlo naporno.

Sidra se prave na sledei nain: Prvo se izabere mesto u dokumentu za koje elimo da bude "mesto doskoka" uslovno reeno. Na tom mestu dodajemo poetni tag koji sadri slovo a (anchor) i umesto href atributa sadri 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 zatvarajui 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 skoiti predvoeno sa tarabom.

Primer09.html

Imenovan sidra

Oznaavanje delova dokumenata

Ovaj pasus obeleen je imenom

vrh_stranice, odnosno za njega je vezano sidro

vrh_stranice. Ceo ovaj pasus je telo sidra.

Ovo je link ka sidru koje se nalazi na

dnu ove stranice.

Neki pasus - tekst

Neki pasus - tekst

Neki pasus - tekst

... Da bi bilo oiglednije kako rade sidra, treba iskopirati na

ovom mestu bar 30tak redova.

Neki pasus - tekst

Ovde to nije uraeno samo zbog prostora, ali vi kad budete pravili

ovaj primer uradite to.

Neki pasus - tekst

Neki pasus - tekst

Neki pasus - tekst

Ovaj tekst je obeleen je imenom

dno_stranice, odnosno za njega je vezano sidro

dno_stranice.

Ovo je link 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...

Da, HTML saga nije gotova...

Mapiranje na slikama...

Tag definie geometrijske zone na slici koje e predstavljati linkove. Atribut usemap u img tagu odreuje putanju do opisa zona (do taga). Ove geometrijske onblasti su vrlo sline Hot Spotovima u multimedijalnim programima, koji su osetljivi na radnje miem (prelazak, klik,...).

Definicija oblasti:

Poligonalana oblast definisana sa tri para taaka: prva taka 395,145, druga taka 322,91, trea taka 393,32. U ovom konkretnom sluaju u pitanju je trougao. Navoenjem vie taaka moe se definisati bilo koji mnogougao.

| 15 Pravougaona oblast opisuje se sa dve take, gornjom levom i donjom desnom takom.

Oblast u obliku kruga, opisuje se takom centra i poluprenikom.

Matematiki reeno :

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

Ako je oblast circ (circle) - Vrednosti koordinata su "centarx,centary,poluprenik" 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 naeg dokumenta Primer10.html, postoji slika koja se zove slika.jpg

Mape

Delovi slike predstavljaju linkove. Pronaite ih.

Dodatni atributi body taga

Vrednost atribut bgcolor definie boju pozadinu stranice. Atribut link definie boju linka. Atribut vlink (visited link) definie boju poseenog linka. Atribut alink definie boju aktivnog (selektovanog) linka. Atribut background definie putanju do pozadinske slike.

Primer11.html

Atributi body taga

Oznacavanje delova dokumenata

Ovaj pasus obeleen je imenom "prvi".

Ovo je link na prvi deo.

Ovaj pasus obeleen je imenom "drugi".

Ovo je link na drugideo.

Primer12.html

Body tag i dalje

| 16

Pozadinska slika

Vrednost atribut bgcolor definie

boju pozadinu stranice. Atribut link definie boju linka.

Atribut vlink (visited link) definie boju poseenog linka.

Atribut alink definie boju aktivnog (selektovanog) linka.

Atribut background definie putanju do pozadinske slike.

Atribut text definie boju teksta na stzranici..

Ovaj tekst

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

inae bi bio crvene boje..

Ovaj tekst je crvene podrazumevane boje za tekst na stranici.

Preporuujemo da izbegavate upotrebu ovih atributa,

odnosno da koristite stilove umesto ovih atributa...

Specijalni karakteri

Specijalni karakteri navode se u sledeem formatu: &oznaka_karaktera;

Primeri: & < > Proizvoljan Unicode karakter moe se navesti kao: hex_kod;

Primer13.html

Specijalni karakteri

Specijalni karakteri

Specijalni karakteri navode se u sledeem formatu:

&oznaka_karaktera;

Znak ampersand (&) ima specijalno znaenje i

predstavlja poetak navodenja specijalnog karaktera. Kada

treba ugraditi ba ovaj znak u tekst to se ini

sekvencom &

Ako ne definiete kao skup znakova starnice utf-8, da biste

dobili naa slova moete da koristite sledee specijalne

karaktere...

Ovo je samo primer, nikako ne navodimo ceo skup znakova,

preporuka je da koristite utf-8, jer je standard.

Pogledajte jednu kompletniju tabelu specoijalnih simbola HTML-a

ovde.

Meta tagovi

Definiu dodatne informacije koje se ne prikazuju. Dodatne informacije se definiu kao parovi (naziv, vrednost), tj. atributi name i content taga. oriste se za obezbeivanje informacija pretraivaima interneta (yahoo, google, itd.): author, description, keywords; informacije za druge namene (proizvoljne

vrednosti). Atribut http-equiv definie podatke koji se smetaju u zahlavlje http odgovora klijentu.

Definicija kljunih rei za maine za pretragu:

Definicija opisa web stranice:

Definie poslednju izmenu Vae stranice:

| 17 Osveava prikaz svakih 7 sekundi:

Primer14.html

META tagovi

META tagovi

Pogledajte izvorni kod dokumenta, desni klik View source.

Primer15.html

META tagovi

META tagovi

Malo unicode teksta:

Latinica

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.

Pomou taga th definiu se zaglavlja vrsta ili kolona. U okviru poetnog taga , mogue je definisati poravnanje tabele u dokumentu (atribut align, koji moe imati vrednosti left ili right), debljinu ivice tabele (atribut border) i boju pozadine (atribut bgcolor), stim to svaka elija tabele moe imati i svoju boju. Za svaku eliju se moe definisati koliko e obuhvatiti kolona ili vrsta, pomou atributa colspan i rowspan. Atribut cellspacing definie rastojanje izmeu elija u tabeli, a atribut cellpadding definie rastojanje od ivice do sadraja elije.

Tag (Table Row) definie vrste u tabeli. Tag sadri tagove (Table Heading), koji odreuju zaglavlje tabele, i tagove (Table Data) koji predstavljaju elije u tabeli. U tagu mogu se nalaziti sledei atributi:

1. align - horizontalno poravnanje tabele (center, left, right), 2. valign - vertikalno poravnanje sadraja u eliji (basline, bottom, middle, top), 3. bgcolor - boja pozadine.

Element caption definie naslov tabele. Tag se koristi unutar taga , a ne unutar tagova ili . Atribut align specificira mesto naslova u odnosu na tabelu, a mogue vrednosti su mu bottom (naslov e biti ispod tabele) i top (naslov e biti iznad tabele).

Primer16.html

| 18 Tabela

English

Spanish

German

oneunoein

twodoszwei

threetresdrei

tabela 1: brojanje na raznim

jezicima

Upload fajlova...

Upload fajlova na server (FTP)

File Transfer Protocol (FTP) je mreni protokol koji se koristi za transfer podataka sa jednog raunara na drugi posredstvom mree kao to je Internet. FTP je protokol za transfer podataka za razmenu i manipulaciju podacima preko raunarske mree zasnovane na TCP (Transfer Control Protocol).

Da pojednostavimo, FTP protokolom se definiu pravila manipulacije i razmene fajlova na Internetu. FTP se najee 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 Vaem PC-ju da biste se spojili uspeno na host, ili server. FTP klijent je softver koji se konektuje na FTP server da bi manipulisao podacima na

tom serveru. Jednom kad se uspeno prijavite na neki server ili host, imate pristup na nivou direktorijuma sa definisanim pravima (definisano Vaim nalogom).

Fajlovi se kopiraju sa lokacije na Vaem raunaru na lokaciju na Web-u naizgled isto kao da se sve deava u lokalu na Vaem raunaru, jedina vidljiva razlika je u brzini kopiranja, jer realno, lokacija na koju kopirate mogue je da se nalazi na serveru koji je na drugom kontinentu.

ta emo raditi u okviru ove lekcije:

Govoriemo o dostupnom FTP softveru Definisaemo svoj nalog ili ftp konekciju uz pomo podataka o host-u, korisnikom imenu i

lozinci koje emo pronai kasnije u ovoj lekciji. Koristei definisanu konekciju/nalog izvriemo probu postavljanje/upload fajlova na server/host.

Izbor FTP softvera

Ako nemate FTP program, trebae Vam jedan. Ovde navodimo neke od softvera koje moete koristiti. Svi softveri tipa komander mogu se vrlo uspeno koristiti za FTP transfer fajlova. Od ovakvih softvera preporuujemo vrlo rairen i popularan kod korisnika TotalComander, odnosno FreeCommander koji je potpuno besplatan. Od specijalizovanih FTP softvera preporuujemo da isprobate sledee:

AceFTP. Vrlo jednostavan program, podrava drag-and-drop nain 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. Mogue je i vriti nekoliko transfera istovremeno. Download AceFTP.

FileZilla. Ovo je jednostavan besplatna, open-source FTP aplikacija. Mogue je i vriti nekoliko transfera istovremeno. Za trensfer osetljivih informacija program podrava SFTP (secure file transfer protocol). Odlian alat za upravljanje manjim sajtovima. Download FileZilla

RightFTP. Takoe besplatan FTP klijent za Windows platformu sa irokim opsegom integrisanih alata. Jednostavan je i za poetnike a poseduje u sebi dovoljno alata da zadovolji i zahteve i profesionalaca. Interfejs je vrlo nalik Explorer-ovom, tako da je ovaj program vrlo korisniki prijateljski nastrojen, podrava drag-and-drop nain rada, konekcija se reava sa samo nekoliko klikova miem. Dodatne funkcionalnosti ukljuuju 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 obezbeuje hosting) je u obavezi da Vam dostavi relevantne informacije odnosno potrebne FTP instrukcije i uputstva (FTP adresa, user name and password). Poto je u ovom sluaju dok traje seminar cnti.info Va provajder za potrebe seminara, dostavljamo Vam sledee potrebne informacije, koje preporuujemo da negde zapiete:

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. korisnika imena su

web0i@cnti.info, i=1..8. Na primer, ako ste lan grupe web03 username Vam je web03@cnti.info password vam je web0i, i=1..8. Na primer, ako ste lan grupe web03, password Vam je web03.

Dakle svi lanovi jedne grupe pristupaju zajednikoj lokaciji, to otvara mogunost da jedni drugima neto i obriete, pokvarite itd... Iako smo mogli ovaj rizik izbei, smatramo da je poeljno da radite u to je mogue realnijim uslovima koji odgovaraju stvarnosti. A realnost je takva da obino vie ljudi barata sa istim pravima istim objektima, tako da je odgovornost za ispravnost na svakome lei jednako. Vodite rauna da postoji log fajl u kojem se pie svaka aktivnost na odreenoj lokaciji i da je preko evidentirane IP adrese i vremena pristupa mogue uvek utvrditi ko je, gde je i ta je radio,...

Upoznajmo i testirajmo jedan FTP program

Bie Vam potrebno neko vreme da se odluite koji ete program koristiti, a videete da svi oni imaju iste osnovne operacije. Mi emo za potrebe seminara koristiti FreeCommander, ali to ne znai 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

odgovarajua polja parametre koji su gore navedeni (FTP adresa, user name and password). Kada je u pitanju FTP, vrlo esto postoji i mogunost Anonymous (anonimnog) pristupa na odreenim lokacijama. To ne vai za nas.

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

arhivama, i moe biti jedan od tri sledea tipa prenosa: o ASCII,

o Binary,

o Autodetect

ASCII se koristi pri transferu HTML fajlova ili uopte fajlova tekstualne prirode, a binary kada se vri transfer grafikih fajlova, arhiva,... U naem sluaju podrazumevana vrednost za transfer je Autodetect koja pretpostavlja da program sam prepozna prirodu objekta kojim barata.

Veina FTP programa je podeena 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 veini sluajeva ignorisaete ostala podeavanja kao to su: o Use firewall,

o PASV mode,

o Description, i slino.

| 20 Naravno, ukoliko Vam provajder ne sugerie suprotno. Recimo PASV mode se koristi kad se oekuju problemi sa Firewall-om i sigurnosnim ogranienjima sa strane FTP klijenta, tj Vas.

Proverite imena fascikli i fajlova. Koristite samo mala slova u imenima, inae moete imati problema na UNIX zasnovanim host-ovima. Veina provajdera ove probleme ipak reava interno, izmenama u hodu, i time rastereuje korisnika razmiljanja 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, kreiraete na Vaem raunaru jednu novu fasciklu i nazvaete je svojim korisnikim imenom, imenom kojim se prijavljujete na moodle. Naglaavamo da ne koristite ime grupe, ve iskljuivo korisniko ime koje imate na sistemu. Ovo je bitno radi kasnije provere uraenog. Sa jedne strane u prozoru FreeCommander-a pronaite tu faciklu, a sa druge otvorite FTP konekciju koristei se gornjim parametrima. Da li e na ovoj lokaciji na serveru biti neega zavisi od toga da li je neko od kolega bio malo bri i vredniji od Vas. Selektujte napravljenu fasciklu i pritisnite F5. Pojavie se sledei 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 sadrine 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, odredina lokacija na koju se upload-uje Transfer type (ASCII, binary, Autodetect), tip transfera

Transfer in background omoguava da se trenutni upload/download ili uopte transfer gurne u pozadinu i time se dobija mogunost da se pokrene neki drugi transfer (simultani rad)

Convert file names to lower case vri koverziju slova u imenima fajlova u mala slova Always overwrite without prompt. Program Vas nee ni pitati da li elite da nastavi zapoeti

transfer ili da pregazi fajl novom kopijom ve e pregaziti novom kopijom. Kada se ovo deava? Vrlo esto. Ako konekcija ka serveru pukne iz bilo kog razloga imate izbor da nastavite transfer ili da krenete ispoetka sa novom kopijom

Ovako neto ili vrlo slino sreete u svim gore navedenim ftp klijentima.

Na sledei zadatak je da vidimo kako se pravi direktno na serveru fascikla. Uite u Vau fasciklu na serverskoj strani commander-a. Pritisnite F7 i unesite ime slike. Ovu fasciklu emo iskoristiti za smetanje slika. Sad selektujte sa serverske strane fasciklu slike i pritisnite F5 i ona e biti iskopirana na Va lini raunar. 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 oekuje da posedujete iskustvo u radu sa programima ovog tipa.

Radionica

Da biste uspeno realizovali ovu radionicu potrebno je prethodno realizujete zahteve navedene u lekciji o

| 21 upload-u fajlova, odnosno da kreirate fasciklu na ftp.cnti.info koja e se zvati Vaim korisnikim 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 sledei: potrebno je napraviti Web stranicu (html dokumenat) koja treba da sadri otprilike iste informacije kao i Va CV.

Treba da sadri sledee informacije:

ime i prezime,

Vau sliku interesovanja i hobi ako ga imate,

zavrena kole zvanje i dodatna znanja, mesta zaposlenja,

Line kontakt podatke o adresa

o telefon,

o mail,

o (lini podaci ne moraju biti tani ali moraju postojati na stranici), podatke koli u kojoj radite (samo jednoj, ako radite u vie 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 odluujete sami i ogranieni ste samo svojom kreativnou. 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 peke, i da obavezno upotrebite bar na jednom mestu tabelu, ureenu i neureenu listu, kao i da koristite bilo naa irilina bilo latinina slova.

Izraenu stranicu nazovite index.html i neophodno je upload-ovati ovaj fajl u gore pomenutu fasciklu koja se zove po Vaem korisnikom imenu, slike koje koristite na ovoj stranici moraju biti smetene u fasciklu slike, koja je smetena u fascikli koja se zove po Vaem korisnikom imenu. Dakle, nemojte zaboraviti da obe fotografije takoe upload-ujete. Jednu fotografiju (Vau linu 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 preporuujem da koristite WAMP dok ne budete zadovoljni dobijenom HTML stranicom, i tek onda je upload-ujte

koristei napravljenu ftp konekciju.

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

nalazi Vaa stranica (oznaka grupe je oblika web0i, i=1..8). Na primer, recimo da je Vae korisniko ime joe, i pripadate osmoj korisnikoj grupi web08, ako sve uradite prema uputstvu, Vaa web stranica e se nalaziti na sledeoj adresi: http://www.cnti.info/infoseminar/web08/joe/index.html.

CSS Cascading Style Sheets

Kaskadni stilovi

HTML je originalno dizajniran sa definie sadraj dokumenta. On je trebao da bude jednostavan opisni jezik sadraja koji kae Ovo je tabela (table), Ovo je paragraf (paragraph), Ovo je zaglavlje (header) koristei tagove , ,... Izgled je trebao da definie browser bez korienja ijednog taga za formatiranje. Tadanji velikani meu browser-ima, Netscape i Internet Explorer, su originalnoj specifikaciji HTML dodavali HTML tagove i atribute (na primer tag i color atribut).

Kako je HTML postajao komplikovaniji, bilo je sve vie mogunosti za definiciju izgleda elemenata, ali je istovremeno postajao neitljiviji i tei za odravanje dok je izrada web stranica u kojima je jasno odvojen sadraj od izgleda je postala nemogu zadatak. Dodatno, razliiti browser-i su prikazivali

| 22 dokumente na razliite naine, i postojala je potreba za jedinstvenom tehnikom definisanja prikaza elemenata na stranici. I te potrebe nastao je CSS (Cascading Style Sheets), jezik formatiranja pomou kog se definie izgled elemenata web-stranice.

Dakle, nekada je HTML sluio da definie kompletan izgled, strukturu i sadraj web-stranice, ali je od verzije 4.0 HTML-a uveden CSS kojim se definie izgled, dok je HTML ostao zaduen za definisanje strukture i sadraja.

CSS Sintaksa

CSS sintaksa se sastoji od opisa izgleda elemenata u dokumentu. Opis moe da definie izgled vie elemenata, ali i vie opisa moe da definie jedan element. Na taj nain se opisi slau jedan preko drugog da bi definisali konani izgled odreenog elementa. Tako je nastao i naziv Cascading (Eng. cascade - crep), da bi se doaralo slaganje jednog stila preko drugog u definisanju konanog izgleda elementa

Svaki opis se sastoji od tri elementa:

definicija ciljnih elemenata

svojstva (atributi)

vrednosti

Nakon to definiemo ciljne elemente, tj. elemente na koje e se trenutni opis odnositi, nizom parova svojstvo-vrednost definiemo izgled svakog ciljnog elementa.

Sintaksa koja se pri tome definie je sledeeg oblika:

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

CSS podrava i komentare, dakle navode se izmeu znakova /* i */ .

Ciljni elementi

Ciljni elementi se definiu na tri naina:

1. navodei HTMLtagciljnih elemenata 2. navodei klasu elemenata

3. navodei direktnu identifikacionu vrednost (ID) elementa Kada definiemo stil preko HTML taga (1.), to znai da e ovaj opis uticati na sve elemente u dokumentu koji imaju ovaj tag. Definicija ciljnih elemenata se tada vri preko direktnog upisa odgovarajueg 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 odreenu istu klasu) se vri tako to upiemo znak take (.) a zatim naziv klase:

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

Ovaj opis e, dakle, imati uticaja na sve elemente u dokumentu koji su definisani na sledei nain:

... ...

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

dokumentu identifikacione vrednosti moraju biti jedinstvene, tj. moe postojati samo jedan element sa odreenom identifikacionom vrednou, to znai da ovakvi opisi mogu uticati samo na po jedan element u dokumentu. Definiu se pomou 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

Stilovi

| 23

/* 1. navodei HTML tag ciljnih elemenata */

p {color: #0000ff;

}

/* 2. navodei klasu elemenata */

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

}

/* 3. navodei direktnu identifikacionu vrednost (ID) elementa */

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

}

Prvi pasus. Tekst je levo poravnat i plave boje.

Drugi pasus. Tekst je desno poravnat i zelene

boje.

pasus. Tekst je centriram i crvene boje.

Gde moe da se nalazi CSS kod

CSS kod se moe zadavati na tri standardna mesta:

1. direktno u HTML tag-u, koristei 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.) moe biti prihvatljiv, ali za vee dokumente ne moe jer se na ovaj nain stil definie za svaki elemenat ponaosob. Ovo treba izbegavati jer nepotrebno gomila kod u dokumentu i potire osnovni razlog uvoenja CSS razdvajanje definicije izgleda

od samog sadraja i negativno utie na itljivost ime se oteava i odravanje stranice. Argument style taga se najee koristi ako neki element ne pripada nijednoj grupi i ima posebne zahteve u odnosu na sve ostale elemente.

Definicija stilova se najee radi grupiui elemente u klase, pomou argumenta class taga, a zatim

definiui izgled tih klasa bilo u okviru elementa style u zaglavlju (2.) ili u eksternoj datoteci (3.). Ako definiemo 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 naina (stilovi definisani u zaglavlju i inline stilovi), a to je da pomou eksterne datoteke moemo da utiemo na elemente vie dokumenata. Dovoljno je da Web dizajner bude dosledan u definisanju klasa elemenata, da bi jedan fajl

sa stilovima odreivao izgled svih stranica. Bilo koja izmena u fajlu sa stilovima utie na sve stranice koje koriste te stilove. Na ovaj nain pomou eksterne datoteke moemo centralizovano da upravljamo stilovima i izgledom dela ili celog sajta. Eksterna datoteka u kojoj se uvaju CSS stilovi je obina tekstualna datoteka sa ekstenzijom .css

Redosled slaganja (prioritet) i interpretacije stilova

Koji e stil biti korien ako definiemo stil za isti elemenat na vie mesta?

Uopteno govorei, moemo rei da se stilovi slau u jedan virtuelni stil pri emu su poreani po starini, to je vei broj nabrajanju stil ima vei prioritet.

1. Browser default 2. External style sheet 3. Internal style sheet (unutar taga) 4. Inline style (unutar HTML elementa)

Znai inline CSS (unutar (inline) HTML elementa) ima najvei prioritet, to znai da e pregaziti svaku definicije u prethodna etiri sluaja. 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 sledei primer. Recimo da imamo jedan eksterni CSS fajl u kojem je definisan izgled za HTML elemenat, u naem primeru definisali smo za 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 taga u okviru 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 navodei liniju koda . Naravno, relativna dresa

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

stilovi02.html

Stilovi

p {color:#ff0000;

}

Prvi pasus.

Drugi pasus.

Treci pasus.

Rezultat bi trebalo da bude sledei: Drugi pasus bie uvek plave boje jer je inline stil najstariji, zatim e vaiti CSS definicaja p taga definisan unutar stila u okviru head sekcije dokumenta, zato e prvi i trei pasus biti crvene boje, a zelene boje nee 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 trei pasus vaie pravilo definisano u eksternom css fajlu i bie zelene boje.

Svojstva i vrednosti

Svojstva na koja elimo da utiemo u datom opisu se definiu preko niza kljunih rei definisanih u W3C standardu, a koje se kategoriu u sledee grupe:

definicija pozadine elementa

ivica

okvir

prikaz

dimenzije

font

generisani sadraj margine

| 25 unutranji prazan prostor pozicija

izgled pripadajueg teksta Vrednosti pojedinih svojstava se definiu na dva naina:

predefinisanim kljunim reima brojevnim vrednostima

Predefinisane kljune rei za vrednosti svojstava se koriste u situacijama kada dato svojstvo ima ogranien broj mogunosti. Tako na primer svojstvo za definiciju pozadine elementa moe biti samo

scroll (da se kree uvek zajedno sa sadrajem elementa) i fixed (da stoji uvek na istom mestu bez obzira na sadraj).

Brojevne vrednosti se mogu zadavati na nekoliko naina:

zadajui samo brojevnu vrednost

navodei i jedinicu veliine skupa sa opisom (px, em, pt, ...)

Ponovimo naueno i nauimo neto novo o CSS-u

Tri su mogua naina da sauvamo CSS pravila:

1. izvan HTML dokumenta (external style sheets)

Lepota i snaga CSS-a lei upravo u mogunosti da se svi stilovi koje ete koristiti na celom sajtu smeste izvan HTML dokumenta. To nam omoguava da promenom stila na jednom jedinom mestu promenimo prikaz na celom sajtu!

Ovom metodom sve stilove smetamo u zaseban CSS dokument - obian fajl sa .css ekstenzijom kojeg moete 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 pomou tag-a u sekciji:

Naslov stranice

Jednom kad poveete HTML dokument sa .css fajlom, stilovi definisani u njemu primenjuju se na tagove pomou class atributa.

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

CSS definiemo unutar specijalnog tag-a:

naslov stranice

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

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

Ova metoda definisanja CSS stilova dobra je ako razliitim HTML stranicama elite dodati razliite stilove.

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

Stilove moemo umetati u gotovo svaki HTML tag pomou atributa style i direktnog specificiranja stila na sledei nain:

neki tekst paragrafa prikazan velikim slovima i crvenom bojom

Napomena! Nemojte pomeati tag koji smo koristili u metodi pod 2) i style atribut koji koristimo

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

Inline stilovi mogu biti korisni ako vam odreeni stil treba samo na jednom jedinom mestu i nigde vie - tada bi bilo glupo taj stil definisati globalno i nepotrebno poveavati veliinu CSS dokumenta. Inline stilovi imaju najvii 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 najee i koriste.

Ponovimo sintaksu

Svako CSS pravilo piemo u sledeem obliku (kd se radi preglednosti obino pie u nekoliko linija):

selektor {

ime-stila1: vrednost1;

ime-stila2: vrednost1 vrednost2 }

Selektor definie kojem HTML tagu elite dodati CSS stil i u vitiastoj zagradi odreujete kako e taj stil izgledati. Stil odreujete tako da naznaite ime stila i dodelite mu vrednost. Ako definiete vie stilova, odvajajte ih taka zarezom. Taka zarez ne pie se iza poslednjeg navedenog stila. Jednom stilu moete dodeliti vie 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 naem 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, dvotake i taka zarezi i ne moete pogreiti. S vremenom ete nauiti i koje izraze koristiti kao atribut i vrednost - postoji samo ogranien broj mogunosti koje se mogu pojaviti na tim mestima. Proirimo sad osnovnu sintaksu CSS-a!

Nizanje selektora

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

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

Svi naslovi sadrani u heading tag-ovima h1, h2 i h3 bie zeleni i poravnati u desno. Svaki put kad isti skup stilova elite primeniti na nekoliko razliitih tag-ova, koristite nizanje selektora. Primetite samo da kod nizanja selektore morate odvojiti zarezom.

Kontekstualni selektori

CSS vam omoguava da odreene stilove primenite samo kad se neki HTML tag nalazi u odreenom kontekstu, tj. u odreenoj okolini. Zamislite da elite sadraj u italic tagu obojen zelenom bojom, ali samo u naslovu drugog reda. Tada biste napisali sledei 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 sadraja nee biti zelen. Na ovaj nain moete usloviti prikazivanje stilova. Zapamtite samo da u ovom sluaju ne smete koristiti zareze jer e to browser protumaiti kao nizanje.

Kontekstualne selektore moete kombinovati s nizanjem:

h1 i, h3 i { color: blue; font-weight: bold }

Svaki italic tekst unutar h1, i h3 naslova bie plav i podebljan.

Dosad smo CSS pravila pisali tako da smo birali HTML tag i odredili koje stilove e on poprimiti. Na taj nain smo odreeni skup stilova uvek ograniavali na odreene tagove. Meutim, CSS stilove moemo koristiti i univerzalno i tada koristimo klase.

Kao to smo videli klasa je skup CSS pravila koji se definie imenom klase. Da biste videli efekte koje ste u klasi definisali, ime klase trebate pozvati u HTML dokumentu u okviru nekog HTML tag-a pomou

| 27 class atributa.

Generike klase

Generika klasa nije vezana za pojedini HTML tag i moe se upotrebljavati na neogranienom broju lokacija unutar HTML dokumenta. Definiemo je proizvoljnim imenom kojem prethodi taka:

.plavo { color: blue}

Generiku klasu pozivate pomou class atributa:

Ovo je primer linka

Klase specifine za pojedine HTML tagove

Odreenu klasu moete vezati uz pojedini HTML tag. U tom sluaju ispred take navodite tag na koji e se klasa primenjivati:

p.zeleno { color: green }

Ovim smo definisali klasu zeleno i dodelili klasu HTML tagu . Svaki put kad elite neki paragraf obojiti zeleno, moraete unutar HTML dokumenta pozvati klasu na sledei nain:

Zeleni tekst pasusa

Pseudo-klase

Pseudo-klase nam omoguavaju da definiemo izgled pojedinih HTML tag-ova u odreenim stanjima. Najpoznatije i najkoritenije pseudoklase su one koje odreuju izgled linkova, tj. izgled tag-a .

Pseudo-klase se (umesto takom) od HTML tag-a odvajaju dvotakom.

Pseudo-klase su zasad definisane samo za i tagove:

a:link - odreuje izgled HREF neposeenog linka

a:active - odreuje izgled HREF aktivnog linka

a:visited - odreuje izgled HREF linka kojeg smo ve posetili

p:first-line - kontrolie izgled prve linije paragrafa

p:first-letter - kontrolie izgled prvog slova paragrafa

Na primer, moemo odrediti da link ne bude podvuen i da bude crvene boje ali kad se nacilja miem da postane podvuen

:link {text-decoration: none; color: red} :hover {text-

decoration: underline;}

Koritenje ID oznaka kao klasa

Kao klasu moemo koristiti ID oznake, ali podsetimo se, postoji jedna velika razlika. Dok istu klasu moete koristiti na vie mesta i za vie HTML tag-ova, ID oznake ne moemo viestruko koristiti. One se koriste da bi se odreenom elementu dodelio specifian stil koji nee imati nijedan drugi element u HTML dokumentu.

Sintaksa je jednostavna. Na istom mestu gde bismo inae definisali klasu, definiemo ID oznaku:

#crno { color: black }

ID oznaku pozivate pomou ID atributa unutar raznih HTML tag-ova :

Ovo je naslov drugog reda crne boje.

Neki browser-i e vam moda dozvoliti da ID oznaku koristite na vie mesta, ali to definitivno nije eljeno ponaanje i bolje je da u tu svrhu koristimo klase.

Tagovi i

Ova dva HTML tag-a jesu odlian nain da bilo kojem HTML elementu ili delu HTML koda dodate CSS stil. Ovi tagovi se koriste i najee u svrhu grupisanja odreenih HTML elemenata i

| 28 definisanja CSS stilova za njih. Razlika izmeu ova dva tag-a je u tome to se koristi unutar teksta za primenu stila na odreena slova, dok oznaava poetak i kraj odreene sekcije (division) dokumenta i uvek umee prekid unutar teksta, postavljajui sadraj u novi red.

Da bismo primenili stilove na HTML elemente grupirane u i tagove, koristimo class

atribut unutar tih tag-ova:

Tag span moemo primeniti na tekst

bez umetanja prekida.

Hajde da u ovom istom primeru tag zamenimo sa tag-om i da vidimo ta e se dogoditi. Generalno, text e u browser-u biti prikazan s prekidom linije tamo gde je umetnut tag.

Vrednosti atributa stilova

Atributima stila dodeljujemo vrednosti i za to imamo na raspolaganju 4 mogua naina: numerike vrednosti, boju, URL i rezervisana imena.

Numerike vrednosti

Numerike vrednosti zadajemo pomou brojeva koje kombinujemo s razliitim 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 pomou RGB vrednosti (npr. #000000) ili navoenjem 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 drugaije nego u HTML standardu.

Primer:

.pozadina { background-image: url(slika.gif) }

URL se poziva navoenjem rezervisane rei url i definisanjem putanje u malim zagradama. Ne smete ostaviti razmak izmeu rei url i otvorene zagrade. Putanja koji se definie u zagradi moe biti apsolutna (u tom sluaju 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 veliinu teksta (large, medium, small), imena raznih efekata (dotted, underline, bold) itd.

este upotreba stilova

Postoji nekoliko desetaka razliitih stilova koji kontroliu prikaz vaeg HTML dokumenta. Sve stilove grupiemo prema tome kakav prikaz kontroliu:

fontovi, tekst i boje

| 29 pozadina box i stilovi bordera (borders)

liste

pozicioniranje

Fontovi, tekst i boje

Neemo ulaziti u popisivanje svih moguih stilova koji postoje, nego emo samo navesti to sve u ovoj kategoriji moete kontrolisati pomou CSS-a.

Sve na ta ste navikli u HTML tagu nalazi se i ovde: odreivanje fonta (Arial, Verdana...), zatim efekti poput podebljanog ili kurzivnog teksta, veliina, boja... Tekst se moe ulepati nekim novim efektima kao to je visina reda teksta, razmak izmeu slova, rei i redova, poravnavanje i uvlaenje 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 odreujete u tagu kao do sada, primenite CSS! Moemo odrediti boju, pozadinsku sliku, nain prikaza pozadine (fiksirana ili pokretna slika, ponavljanje samo po x- ili y-osi) ak i poziciju pozadine.

Primer klase koja definie sliku kao fiksiranu pozadinu:

.pozadina {

background-image: url(poz.gif);

background-repeat: no-repeat;

background-attachment: fixed }

Ovako definisanu klasu jednostavno pozovite iz tag-a li nekog drugog tag-a:

...

Liste

Liste su u CSS-u dobile nove efekte, poput mogunosti odreivanja neke gif sliice 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 sloenija pa emo je obraditi posebno.

Implementacija Box Modela

Box stilovi omoguavaju 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 izmeu sadraja element a i ivice (border-a).

Margin je vrednost koja odreuje razmak izmeu elemenata u HTML dokumentu. Kad nekom elementu odredimo marginu, mi poveavamo prostor koji taj element zauzima tj dodajemo mu nevidljivi prostor do ivice margine (na slici je taj nevidljivi ivica margine izraena veim pravouganikom od isprekidane linije).

Ako su vrednosti margine i padding-a na nuli, element zauzima samo prostor odreen njegovom sopstvenom irinom (element width). Poveavamo li njihove vrednosti, element zauzima sve vie i vie mesta.

Za svaki element moe se definisati pozadina i svi stilovi pozadine - naglasimo samo da e se pozadina prostirati i na delu kojeg odredimo s vrednou za padding.

Do sada smo u standardnom HTML-u kod ivica (borders) mogli odrediti samo irinu i boju. CSS nam omoguava 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 moemo imati takastu, isprekidanu, dvostruku ivicu, i jo neke zgodne efekte.

Sledee slike (2D,3D) lepo ilustruju hijerarhiju box modela sa naglaenim delovima koji mogu biti transparentni.

| 31

Box model je najbolje ilustrovati kratkim primerima. Da bismo sraunali koliko nam je ukupno prostora potrebno za jedan elemenat, raunamo to na sledei nain:

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 sadre 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 veliina elementa na koji bi bila primenjena gornja klasa se rauna na sledei nain:

Ukupna irina = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px

Ukupna visina = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

Gornji raun ilustrujemo sledeom 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 zakljuno

Dreamweaver koji e biti predmet naih buduih izuavanja ima solidno i vrlo jednostavno okruenje za izradu CSS stilova. Stilovi su Vam ve navedeni i na nama je da samo odredimo vrednost njihovih atributa izborom iz padajuih menija. Umetanje CSS klasa je takoe vrlo jednostavno i izvodi se sa dva-tri klika miem. Kao zakljuak dovoljno je da samo navedemo da je CSS neto to ne smemo zaobii 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 najjaih alata web dizajna za ije izuavanje i savlaivanje se neminovno isplati odvojiti i mnogo vie vremena nego to smo mu mi posvetili u ove dve kratke lekcije.

Zato Vam toplo preporuujemo da posvetite neko dodatno vreme za izuavanje CSS, sigurni smo da e se isplatiti...

Uvod u HTMLHYPER JE SUPER!ta to bee HTML?Elementi HTML-aStruktura HTML dokumentaHEADBODYKomentar u HTML kodu

Atributi elemenata HTML-aVaa prva prava Internet stranica

O adresamaAdrese i zato su one bitne...Hyperlink (Hiper veza)Apsolutni i relativni hiprelinkoviKako se pravi relativna adresa?

Nastavak sage o HTML-uStruktura HTML dokumentaObrada teksta

I dalje traje saga o HTML-uPre nastavka...ListeRad sa slikama....Linkovi

Da, HTML saga nije gotova...Mapiranje na slikama...Dodatni atributi body tagaSpecijalni karakteriMeta tagoviTabele

Upload fajlova...Upload fajlova na server (FTP)Izbor FTP softveraPotrebni FTP parametriUpoznajmo i testirajmo jedan FTP programRadionica

CSS Cascading Style SheetsKaskadni stiloviCSS SintaksaCiljni elementiGde moe da se nalazi CSS kodRedosled slaganja (prioritet) i interpretacije stilovaSvojstva i vrednostiPonovimo naueno i nauimo neto novo o CSS-uPonovimo sintaksuNizanje selektoraKontekstualni selektoriGenerike klaseKlase specifine za pojedine HTML tagovePseudo-klaseKoritenje ID oznaka kao klasaTagovi i

Vrednosti atributa stilovaNumerike vrednostiBojaURLRezervisana imena

este upotreba stilovaFontovi, tekst i bojePozadinaListe

CSS Box modelImplementacija Box Modela

CSS zakljuno