Osnove HTML-a i CSS-a

Transcription

1 CENTAR ZA RAZVOJ I PRIMENU NAUKE, TEHNOLOGIJE I INFORMATIKE NOVI SAD 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 2 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 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 PRE NASTAVKA LISTE RAD SA SLIKAMA LINKOVI DA, HTML SAGA NIJE GOTOVA MAPIRANJE NA SLIKAMA DODATNI ATRIBUTI BODY TAGA SPECIJALNI KARAKTERI META TAGOVI TABELE UPLOAD FAJLOVA UPLOAD FAJLOVA NA SERVER (FTP) IZBOR FTP SOFTVERA POTREBNI FTP PARAMETRI UPOZNAJMO I TESTIRAJMO JEDAN FTP PROGRAM CSS CASCADING STYLE SHEETS KASKADNI STILOVI CSS SINTAKSA CILJNI ELEMENTI GDE MOŽE DA SE NALAZI CSS KOD REDOSLED SLAGANJA (PRIORITET) I INTERPRETACIJE STILOVA SVOJSTVA I VREDNOSTI PONOVIMO NAUČENO I NAUČIMO NEŠTO NOVO O CSS-U PONOVIMO SINTAKSU VREDNOSTI ATRIBUTA STILOVA ČESTE UPOTREBA STILOVA CSS BOX MODEL CSS ZAKLJUČNO 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 3 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 '' i završni HTML tag,''. 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] Struktura HTML dokumenta Da bi ova stranica ipak bila prava HTML stranica fali joj sadržaj. Tag je okvir u kom se nalaze svi ostali tagovi. HTML dokument uvek počinje tagom, a završava se tagom. 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 4 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>. 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] <title>naslov</title> <body> Tekst dokumenta. 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: Na primer: <img src="lokacija\imeslike" alt="alternativni_tekst">. <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 5 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 odnosno <img src="c:\slike\slikalevibaner.jpg." alt="levi baner"> <img src=" 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] <title>moja prva Internet stranica</title> <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"> 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 6 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 je oznaka Hyper Text Transfer Protocol-a 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. 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 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 Ovakvom adresom možemo se obratiti dokumentu

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 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 a zatim i imenom web servera/domenom 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 na adresu 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 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 gornji link neće raditi sve dok ga ne zamenimo ispravnim ( 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, i i 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 7

8 se razlika izmeďu malih i velikih slova u HTML elementima (BODY = Body = body). Preporuka je da 8 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 je okvir u kom se nalaze svi ostali tagovi. HTML dokument uvek počinje tagom, a završava se tagom. Tag uokviruje zaglavlje u kom se nalaze informacije o samom dokumentu (naslov, opis, ključne reči, ime autora,...); opcion je. Završni tag je. Browser ne prikazuje informacije koje se nalaze izmeďu tagova i, 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 o title - Naslov dokumenta 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> 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 9 Obrada teksta <title>hello World!</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body> <!- Ispod se nalazi sadržaj dokumenta -> Zdravo živahni svete! 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 <title>pasusi</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <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> 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 <title>naslovi</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body> <h1>ovo je veličina slova u zaglavlju H1</h1>

10 <h2>ovo je veličina slova u zaglavlju H2</h2> <h3>ovo je veličina slova u zaglavlju H3</h3> <h4>ovo je veličina slova u zaglavlju H4</h4> <h5>ovo je veličina slova u zaglavlju H5</h5> <h6>ovo je veličina slova u zaglavlju H6</h6> 10 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 <title>rad sa tekstom </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <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> 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 <title>formatiranje teksta</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <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> 11 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: 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 <meta http-equiv="content-type" content="text/html; charset=utf- 8"> <title>uredjena lista</title> <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> 12 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: 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 (sourceizvor) 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 <title>slike</title> <meta http-equiv="content-type" content="text/html; charset=utf- 8"> <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=" 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> 13 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 <title>linkovi</title> <meta http-equiv="content-type" content="text/html; charset=utf- 8"> <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=" ka stranici Google Search </a>, sa apsolutnom adresom početne stranice Google-a. </p> Imenovana sidra su mesta u dokumentu na koja možete "skočiti" kad kliknete neki link sidra. Vrlo čest

14 primer je sidra link koji ste sigurno koristili na Web-u, imenuje se obično sa Top ili Vrh, pa kad kliknete 14 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 <title>imenovan sidra </title> <meta http-equiv="content-type" content="text/html; charset=utf- 8"> <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> <p>neki pasus - tekst</p> <p>neki pasus - tekst</p>... Da bi bilo očiglednije kako rade sidra, treba iskopirati na ovom mestu bar 30tak redova. <p>neki pasus - tekst</p> Ovde to nije urađeno samo zbog prostora, ali vi kad budete pravili ovaj primer uradite to. <p>neki pasus - tekst</p> <p>neki pasus - tekst</p> <p>neki pasus - tekst</p> <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> 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. 15 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 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>mape</title> <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" href="primer08.html"> <area shape="circle" alt="krug" coords="546,194,76" href="primer07.html"> </map> 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 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>atributi body taga</title> <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> Primer12.html <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>body tag i dalje</title>

16 <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> 16 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 Meta tagovi <title>specijalni karakteri</title> <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š ovaj znak u tekst to se čini sekvencom &amp; </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=" target="_blank">ovde</a>. </p> 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" /> 17 Primer14.html Primer15.html Tabele <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 "> <body> <h1>meta tagovi</h1> <p>pogledajte izvorni kod dokumenta, desni klik View source. </p> <title>meta tagovi</title> <meta http-equiv="content-type" content="text/html; charset=utf- 8"> <meta http-equiv="refresh" content="3"> <body> <h1>meta tagovi</h1> <p>malo unicode teksta:</p> <p>latinica šđčćž</p> <p>ћирилица шђчћж </p> 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

18 <title>tabela</title> <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> 18 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 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 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. 19

20 Naravno, ukoliko Vam provajder ne sugeriše suprotno. Recimo PASV mode se koristi kad se očekuju 20 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

21 upload-u fajlova, odnosno da kreirate fasciklu na ftp.cnti.info koja će se zvati Vašim korisničkim imenom 21 (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: 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: 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>,... 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

22 dokumente na različite načine, i postojala je potreba za jedinstvenom tehnikom definisanja prikaza 22 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 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <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> <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> 23 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 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> 24 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 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 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>stilovi</title> <!-- definicija stila u okviru head sekcije dokumenta u pomoć style taga --> <style type="text/css"> p {color:#ff0000; } </style> <!-- linkovanje fajla css ekstenzije koji unutar sebe sadrži definiciju stila --> <link href="eksterni.css" rel="stylesheet" type="text/css" /> <!-- Zamislite da se sadržaj dokumenta eksterni.css umeće na ovo mesto u dokumentu--> <body> <p>prvi pasus.</p> <!-- inline definicija stila u okviru konkretnog taga --> <p style="color:#0000ff">drugi pasus. </p> <p>treci pasus.</p> 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: 25 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. mojstil.css. Eksterni.css fajl treba povezati s HTML dokumentom. To se radi uglavnom pomoću <LINK> tag-a u sekciji: <TITLE> Naslov stranice </TITLE> <LINK rel="stylesheet" type="text/css" href=" Jednom kad povežete HTML dokument sa.css fajlom, stilovi definisani u njemu primenjuju se na tagove pomoću class atributa. 2. unutar tag-a HTML dokumenta (embedded, document-level style sheets) CSS definišemo unutar specijalnog <style> tag-a: <title> naslov stranice </title> <style type="text/css"> p { font-size: large; color: red } </style> 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 26

27 class atributa. 27 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=" 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 {textdecoration: 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 28 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 ili relativna (s obzirom na URL definisanog CSSa). 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 29 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">... 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: CSS Box model ul { list-style-image: url(bullet1.gif) } 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 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 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 = = 352px Ukupna visina = = 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