CENTAR ZA RAZVOJ 1 PRIMENU NAUKE, TEHNOLOGIJE l INFORMATIKE NOVI SAD

Osnove HTML-a i CSS-a

2008.

Sadrzaj

Osnove HTML-a 1 CSS-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....... 2

Uvod u HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . ...... 2

HYPER SUPER! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...... 2

Sta to bese HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .......... 2

Elementi HTML-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. ......

Struktura HTML dokumenta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ................

HEAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......

BODY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...... 4

Komentar u L kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ............ 4

Atributi elemenata HTML-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .............. 4

Vasa prva prava lnternet stranica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ........... . ..... 5

adresama . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...... 6

Adrese i zasto su itne... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . ............ 6

Hyperlink (Hiperveza) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ........... 6

Apsolutni i relativni hiprelinkovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ........... 6

Kako se pravi relativna adresa? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ............ 7

Nastavak sage L-u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......... 7

Struktura HTML dokumenta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...... . ..... 8

Obrada teksta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . 9

1 dalje traje saga HTML-u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ............ 10

Pre nastavka... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . 11

Liste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 11

Rad sa slikama .... 12

Linkovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 13

Da, HTML saga i gotova ... 14

Mapiraje slikama... ............................................................................. 14

Dodati atributi body taga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......... 15

Specijali karakteri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...... 16

Meta tagovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ..... 16

Tabele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Upload fajlova... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...... 18

Upload fajlova server (FTP) .................................................................... 18

lzbor FTP softvera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . 18

Potreb i FTP parametri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . 19

Upozajmo i testirajmo d FTP program ................................................... 19

CSS - Cascadig Style Sheets .................................................................... 21

Kaskadi stilovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ..... 21

CSS Sitaksa ........ "."."."."."."." ....... "."."."."."."." ....... "."."."."."."... 22

Gde moze da se alazi CSS kod .................................................................. 23

Redosled slagaja (prioritet) iiterpretacije stilova . . . . . . . . . . . . . . . . . . . . . . . .................. 23

Kojicestilbltikorisceakodefiisemostilzaistielemeatavisemesta? ................ 23

Svojstva i vredosti ............................. " ............................ " .... "....... ......... 24

Poovimo u i aucimo esto v CSS-u ................ """ """""......... 25

Poovimo sitaksu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...... 26

Geericke klase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .... 27

Klase specifice za pojedie HTML tagove ............................ "...................... 27

Pseudo-klase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 27

Koristeje ID ozaka kao klasa ............. """ " ....................... " """....... ......... 27

Tagovi i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....... 27

Vrednosti atributa stilova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ............. 28

Numericke vrednosti ................................ .................................................... 28

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 28

URL .......................................................................................................... 28

Rezervisana imena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......... 28

Ceste upotreba stilova ................................................................................. 28

Fontovi, tekst i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ........ 29

Pozadina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .... 29

Liste ......................................................................................................... 29

CSS model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .... 29

lmplementacija Modela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ............ 29

CSS zakljucno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . .... 32

Osnove HTML-a i CSS-a

U VOD U HTML """""""".""""""""""""""""""""""""" 2

HVPER SUPER! ............................................................ 2 S 5 HTML? ........................................................... 2 ELEMENI HTML-A ............................................................ 3

STRUKTURA HTML DOKUMENTA"""""""""""""""""""""" 3

ATRIBUTI ELEMENATA HTML-A""""""""""""""""""""""" 4

VASA PRVA PRAVA INERNET STRANICA """""""""""""""""" 5

ADRESAMA """""""."."""""""""""""""."""""".""" 6 ADRESE 1 ZASTO SU ONE BITNE"""""""""""""""""""""""" 6

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

APSOLUTNI 1 RELAIVNI HIPRELINKOVI ...................................... 6

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

0BRADA TEKSTA ................................................................. 9

1 DALJE TRAJE SAGA HTML-U """""""""""""""""""" 11 PRE NASTAVKA ... .............................................................. 11

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

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

LINKOVI ............................................ " ........... " ............... 13

DA, HTML SAGANIJE GOTOVA"""""""""""""""""""".14

MAPIRANJE NA SLIKAMA". """"""""""""" """""""""""" 14

DDDATNI ATRIBUTI BODY TAGA """""""""""""""""""""" 15

Uvod u HTML

HYPER SUPER!

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

META TAGOVl .................................................................. 16

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

UPLOAD FAJLOVA" . .. "".""".""""""""""""""""."""""18

U PLOAD FAJLOVA NA SERVER (FTP) """"""""""""""""""". 18

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

PDTREBNI FTP PARAMETRl"""""""""""""""""""""""""19

UPOZNAIMO I TESTIRAIMO JEDAN FTP PROGRAM ...... " ..... " ...... 19

CSS- CASCADING STYLE SHEES """"""."""""""""""". 21 KASKADNI SILOVI ............................................................. 21

(55 SINTAKSA ........... ....................................................... 22 (IUNI ELEMENTI ............................................................... 22

G DE MOZE DA SE NALAZI CSS KOD """""""""""""""""""" 23 REDOSLED SLAGANJA (PRIORITET) l INTERPREACIJE SILOVA """" 23

SVOJSTVA 1 VREDNOSI """"""""""""""""""""""""""". 24

PONOVIMO NAUCENO 1 NAUCIMO NESTO NOVO css-u"""""" 25 PONOVIMO SINTAKSU ........................................................ 26

VREDNOSI ATRIBUTA STILOVA ....... " .. " ... """""."."."."" ..... 28

CESTE UPOTREBA STILOVA ................................................... 28

css MODEL """"""""""""""""""""""".""""""". 29 css ZAKUUCNO ............................................................... 32

Da biste bili uspesan stvaralac Internet stranica morate dobro savladati Hyper Text Markup Language tj . L. L jednostavan jezik za opis strukture i opis sadri.aja Internet dokumenata koj i se prikazuju Internet citacima (browser-ima). Postoje mnogi programi koji pojednostavljuju kreiranje L Internet strana (Macromedia Dreamweaver i Microsoft Front Page, recimo) ali potpuna kontrola nad izradom Internet dokumenta podrazumeva mnoge akcije i korekcije na najnizem nivou, odnosno intervencije samom HTML kodu. Zato neophodno da savladate osnove L-, ako zelite da se upustite avanturu izrade Internet stranica. Znanje L- nije prednost, vec uslov da bi bili uspesan kreator Internet prezentacija. U ovoj lekcij i pronaci cete samo osnovne i uvodne informacije HTL-u, sledecim lekcijama i mnogo vise, ovom jednostavnom istovremeno mocnom alatu za izradu Internet stranica. Kad budemo familijarni sa HTL-om, upoznacemo se i sa osnovama kaskadnih stilova, mocnom alatkom za opis izgleda sadrzaja Internet dokumenata (Cascading Style Sheets) i sa gore pomenutim alatom Macromedia Dreamweaver-om.

Sta to bese HTML? Internet, kao svetsku mreza racunara, mozete koristiti na vise n. Jedan od najpopularnij ih nacina upotrebe pregledanje Internet stranica, proces popularno nazvan surfovanje Internetom. Svaka Internet stranica hipertekstualan (Hypertext) dokumenat. ipertekst se sastoji od medusobno povezanih delova teksta (ili drugih objekata) tako da citalac (korisnik) interaktivno odreduje redosled citanja (pregledanja). prakticno znaci da dokumente na Internetu ne morate da citate sekvencijalno kao knjigu, vec se mozete setati kroz dokumenat, ili dokumente zelji . MoZda bi bila najbolja analogija sa knj igom koja sadrzi puno fusnota, gde citalac kad naide na nepoznat termin oznacen fusnotom, on prede na proucavanje fusnote na dnu stranice ili na kraju knjige (endnote, index pojmova), i zavrsetku se vraca na mesto citanja gde se nalazi nepoznat termin, dalje nastavlja citanje redom, tj . sekvencijalno.

Kad su pitanju Internet dokumenti, sekvencijalno citanje uopste nije neophodno. Korisnik se krece kroz Internet dokumente koristeci veze (linkove), pomocu kojih skace na razlicite delove dokumenta ili

1 2

posebne dokumente, skladu sa svojim interesovanj ima i potrebama. Kretanje kroz takve dokumente 1 naziva se navigacija ne citanje . Veze (eng. Links) se nazivaju jos i hipervezama (Hyperlinks). Ove veze ugradujemo Internet dokumenat, pogadate, uz pomoc HTJ'vfL-a. Medusobno povezani dokumenti na Internet-u ne sadrze samo tekstove vec i razlicite sadrfuje kao sto su slike, zvuci, animacije, video materijale, se Internet moze nazvati i hipermedijalnim sistemom. Sve ove medije i nj ihov medusoban odnos opisujemo i ugradujemo Internet stranicu, opet uz pomoc HTJ'vfL-a. Dakle, osnovni jezik za kreiranje strukture i sadrzaja, kao i formatiranje sadrzaja stranica na Internetu jeste HTJ'vfL.

Prica nastanku HTJ'vfL-a stara koliko i sam Internet. Sa razvojem Interneta razvijao se i HTJ'vfL, jedan od najvecih 'krivaca' za to firma Netscape, koja na samom pocetku na svoju ruku uvodila nestandardna prosirenja HTJ'vfL jezik. Naravno, ni ostali proizvodaci browser-a nisu puno zaostajali za Netscape-om, za taj period razvoja Interneta vezana i prica takmicenju pro izvodaca browser-a uvodenju nestandardnih prosirenja iste, poznata pod imenom 'Rat Browser-a' . Da bi se izbegli dalj i ' ratovi' medu gigantima softverske industrije, prosirenj ima, standardima i novim verzijama HTML-a bavi se posebno zvanicno telo zvano W komitet. Dakle, HTJ'vfL ziv jezik koj i se razvija !

HTJ'vfL nije programski jezik onom smislu kom su to ++ ili Visual Basic, jer ne sadrzi komande, tipove podataka, operatore, promenlj ive i slicne stvari. HTJ'vfL vise jezik za opis Internet dokumenata. Pomocu njega mozete menjati boju i velicinu teksta, boju pozadine, umetnuti sliku i zvuk na Internet stranicu, ali ne mozete izracunati koliko 2+2. U svojoj sustini HTJ'vfL dokumenat obican tekstualni dokumenat sa ekstenzijom . htm ili . html, tako da se moze kreirati i bilo kom od tekst editora, kao sto su Notepad, WordPad, MS Word. Iako izrada HTJ'vfL stranica vrlo jednostavna, postoje pravila koja morate znati i postovati ih pri izradi HTJ'vfL dokumenata. Svaki HTJ'vfL dokument sasto ji se od deklaracija, elemenata i atributa elemenata. deklaracijama reci cemo vise nekoj od sled ecih lekcija, sada cemo se posvetiti elementima i atributima.

Elementi HTML-a

Elementima formiramo strukturu i opisujemo izgled delova sadrzaja HTJ'vfL dokumenata. Elementi mogu da se nalaze bilo gde okviru HTJ'vfL dokumenta. Svaki elemenat sastoj i se iz tri dela: pocetni tag, sadrzaj i zavrsni tag. Tag specijalna sekvenca znakova - takozvani marker ( 'Markup' ) koj i ograden znacima '' . Zavrsni tag razlikujemo od pocetnog znaku '/' posle znaka '

BODY

Sve ono sto vidimo prozoru ws-, tj . sadrzaj stranice i L elementi za formatiranje (opis) tog sadrzaja, nalazi se te1u dokumenta koje uokviruje tag. U L dokumentu sme da postoji samo jedan par tagova . Ovaj element specificira glavni sadrzaj dokumenta. Pocetni tag ima atribute koj i omogucavaju da se specificiraju karakteristike koje va\e na nivou dokumenta ( pozadine ili slika, teksta, posecenih i neposecenih linkova, itd.)

Komentar HTML ko du Komentari L kodu se navode sledecem obliku:

1 Komentar pocinje sekvencom znakova (izmedu ova dva znaka moze doci i razmak). Sve sto se nalazi izmedu ove dve sekvence znakova Web ws ignorisati.

Ispod se nalazi jedan primer pravilno struktuiranog html dokumenta.

[ struktura.html- code]

Naslov

Tekst dokumenta .

U HTL-u ne postoji razlika izmedu malih i velikih slova za elemente tagovima tako npr. , , i predstavljaju iste elemente. Preporucujemo da elemente L- pisete malim slovima. Takode sve suvisne znakove razmaka (space), tabulator i znake za novi red Internet dokumentu Internet citac ignorise, ali nj ihovo postojanje utice na velicinu Internet dokumenata. Stoga preporucujemo da ih izbegavate, jer popularnost i posecenost Vasih stranica, osim izgleda i sadrzaja

zavisi velikoj meri i od brzine ucitavanja istih.

Neki elementi dopustaju da se izuzme zavrsni tag, na primer elemenat . Elemenat sluzi za prelom reda L- (kao kad pritisnete Shift+ENTER programu za obradu teksta). Elemenat ne zahteva zavrsni tag obliku . Jos jedan prime1 L elementa koji dozvoljava da se izuzme zavrsni tag img elemenat, namenjen ukljucivanju slika na Internet stranicu.

Atriuti elemenata HTML-a

Elementi mogu da sadrze atribute koj ima se opisuju specificni parametri elementa kao sto su duzina, visina, lokacija objekta sa koje se elemenat ucitava i slicno. Atributi se uvek ukljucuju pocetni tag, nikako zavrsni. Atribut se sastoji iz kljuca i njemu dodeljene vrednosti i to se zapisuje na sledeci nacin: Naziv_Atributa="Vrednost_Atributa" . Vrednost atributa ukoliko postoji ogranicena dvostrukim ili jednostrukim navodnicima (uobicajeno da se navode dvostruki kako bi okviru nj ih mogli postaviti i jednostruke ako se ukaze potreba za tim).

Na primer, img elemenat poseduje s atribut koj i obezbeduje lokaciju slike sa koje se slika ucitava i atribut alt koji obezbeduje alternativni tekst koji biti prikazan na mestu predvidenom za prikazivanje slike ukoliko ucitavanje slike na L stranicu ne uspe iz bilo kog razloga. Sintaksa img elementa sledeca:

.

Na primec

gde "S like\" lokacija slike, ' S likaLeviBaner.jpg' ime slike koja s e ucitava.

1 4

Posto pitanje ispravnog navodenja lokacije objekata koje ukljucujete HvfL stranicu od sustinske 1 s vaznosti za njeno ispravno funkcionisanje, reci nesto vise adresiranju. sta prakticno znaci izraz "\S like\"? Znaci da se fascikla 'Slike' koja sadrzi s liku 'S likaLeviBaner.jpg' nalazi na istoj lokacij i (u istoj fascikli, na istom disku" . ) na kojoj se nalazi i HvfL stranica cijem kodu se nalazi gore pomenuti img tag. Pomenuti nacin adresiranja zove se relativno adresiranje.

Postoji i apsolutno adresiranje, odnosno navodenje pune adrese od korenskog direktorijuma, t-. Recimo da se i fascikla 'Slike' i L stranica koja sadrzi gornji img tag nalaze na disku ili na sajtu cnti. info. Apsolutne adrese s atriutu imgtag-a tom slucaju izgledale ovako

odnosno

Prednost relativnog adresiranja tome sto Vi bez bojazni mozete premestati L stranicu i fasciklu 'S like' gde god zelite, sve 6 funkcionisati sjajno dok god su stranica i fascikla 'Slike' na istoj lokacij i. Ako koristite apsolutne adrese, tada pri svakom premestanju morate menjati direktno L kodu sve adrese. redu ako ucitavate samo jednu sliku na stranicu, ali sta ako ih vise? Iako programi kao Dreamweaver, sto 6emo videti kasnije, imaju rutinu koja 6 pokusati da Vas spase greske ako premestate faj love koji su linkovani (slike nasem primeru) i da zameni stare nevaze6e linkove novima, greske su uvek mogu6e.

Povedite racuna tome gde smestate slike i slicne objekte koje ukljucujete L kod, jer se vrlo lako moze desiti da se isti objekti ne prikazu ispravno na L stranici ako ste nesto zabrljali sa adresama. adresama 6 opet reci nekom od slede6ih tekstova, kad budemo govorili postavljanju Internet prezentacije na Web server.

Vasa prva prava Internet stranica

Pre nego predemo na izradu same L stranice, potrebno da napomenemo da svrha ovog primera da ukaze na jednostavnost izrade stranica uz pomo6 L-. Radi6emo lokalu, na Vasem racunaru tako da 6emo koristiti apsolutne adrese ovom primer. Napravimo nekoliko fascikli koje 6emo smestiti stranicu i sve objekte koju 6emo ugraditi nju. Na disku napravite novu fasciklu i dajte ime 'Radna'. U fascikli 'Radna' napravite novu fasciklu 'S like'. Pronadite jednu lepu sliku na Vasem disku i iskopirajte fasciklu 'Slike', zatim preimenujte 'SlikaLeviBaner'. U nasem primeru slika tipa

jpg, ali Vi ne morate slediti nas primer, mozete iskoristiti sliku l kog tipa, recimo png ili gif. Naravno, tada morate i svuda gde se L kodu pojavljuje ime 'S likaLeviBaner.jpg' zameniti ga sa 'SlikaLeviBaner.png' ili 'SlikaLeviBaner.gif, zavisnosti od tipa slike koju ste iskopirali.

V reme da konacno napravimo Vasu prvu pravu Internet stranicu. Svi programeri i informaticari sigurno su zivotu nebrojeno puta napravili aplikaciju "Zdravo svete" pocinju6i da neki programski jezik, zasto smo mi li izuzetak? Dakle, napravi6emo Internet stranicu na kojoj pise 'Zdravo L svete! ' . Otvorite novi Notepad dokumenat i ukucajte njemu:

[zdravosvete.html-code]

Moja prva Internet stranica Zdravo HTML svete !

Pri snimanju dajte ime dokumentu, recimo 'zdravosvete.html', i smestite ga fasciklu 'Radna'. Pokrenite ovu stranicu dvoklikom na ikonicu dokumenta zdravosvete.html. Uocite da ova stranica ima naslov ' prva Internet stranica' zahvaljuju6i tagu title koj i se smesta okviru head taga.

sto ve6 jednom napomenuto body tag sadrzi atriute za kontrolu i format prikaza koj i se odnose na 1 6 telo dokumenta. Jedan od nj ih bgcolo - pomo6u koga se navodimo boju pozadine. zadajete kao heksadecimalan broj prema RGB (RedGreenlue - CrvenaZelenaPlava) ko lornoj semi, kojoj prethodi znak #. Prva dva heksadecimalna broja se odnose na crvenu, druga dva na zelenu i zadnja dva na plavu (npr. Crvena #FFOOOO, Bela #FFFFFF, crna #000000, " . ) .

adresama

Adrese i zasto su itne". Adrese su od velike vaznosti za ispravno funkcionisanje Web-a. Ako imate neispravnu adresu, da li 6ete sti6i na zeljeno odrediste? Verovatno ne. Zato 6emo adresama na samom pocetku obratiti punu paznju. Napominjemo jos jednom da proemi sa adresama cine 80% proema sa koj ima 6ete se susretati svom radu sa Web-om. Pretpostavljamo da kao nastavnici informatike posedujete odredena znanja adresama.

Hyperlink (Hiper veza)

Neformalna definicija Hyperlink-a: hyperlink referenca ili navigacioni elemenat dokumentu ka drugoj sekciji istog ili drugog dokumenta koji moze iti na istom ili drugom domenu.

Cesto hyperlink skra6ujemo na link. Hypertext (u znacenju vise od teksta) oik teksta koji egzistira na Web-u koj i funkcionalno bogatiji od oicnog tekstualnog dokumenta jer omogu6ava korisniku da istrazuje druge Hiper tekstove, odnosno Web stranice povezanih sa prvom stranicom specificnim recima ili slikama. Veza izmedu prve stranice i drugih se ostvaruje upravo hiperlinkovima definisanim na specificnim recima, slikama, " . Hiperlink nije nista drugo do adresa zapisana odredenom oiku.

Kada kreiramo hiperlink, odrediste ove adrese zapisano konkretnom formatu, koji se jos skra6eno naziva URL (Uniform Resource Locator). URL sadrzi sei adresu web servera (lista poddomena sve do internet domena najviseg nivoa), putanju do stranice (faj la) i sam naziv faj la (web stranice). URL takode identifikuje protokol koji upravlja datim tipom resursa (faj lova), kao sto su ili FTP.

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

http: // oznaka Hyper Text Transfer Protocol-a www. cnti. info adresa servera, www poddomen domena cnti, su poddomeni domena

info /forumi/phpBinf/ putanja do faj la (web stranice) Index.php ime faj la (web stranice)

Apsolutni i relativni hiprelinkovi

Hiperlinkove mozemo razvrstati na relativne i apsolutne. Apsolutni hiperlinkovi (URL-ovi) sadrze potpune adrese, ukljucuju6i tip protokola, naziv web servera, putanju do faj la i naziv faj la. Relativnom URL-u nedostaje jedan ili vise delova potpune adrese. Nedostaju6i delovi adrese se formiraju odnosu na teku6u stranicu na kojoj se nalazi sam URL. Na primer, ukoliko nedostaju tip protokola i web server, web citac iskoristiti, protokol i naziv domena sa trenutne stranice.

http://www. cnti. info/forumi/phpBBinf/index.php apsolutna adresa /forumi/phpBBinf/index. php primer relativne adresa odnosu na neku teku6u stranicu

Uoicajena praksa da se unutar stranica na Web-u koriste relativni URL-ovi koj i sadrze samo delimicnu putanju i naziv faj la.

Koncentrisimo se samo na adrese. Uzmimo da postoji slede6a hijerarhija fascikli na nasem serveru www. cnti. info, odnosno korenskom direktorijumu www.

Primer fQ Docs

fQ Slike 11 jpg

Recimo da fascikli Docs postoji dokumenat l ndex .htm. Recimo da fascikli jpg postoji slika logo.j pg.

Ako se obra6ate apsolutnom adresom slici logo.jpg ona glasi ovako http://www. cnti. info/Prime1'/Slike/jpg/logo.jpg . Ovakvom adresom mozemo se obratiti dokumentu

logo.jpg sa l koje stranice na Web-u.

Ako se obra6ate dokumentu ldex.htm koj i se nalazi fascikli Docs apsolutnom adresom ona 6 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 faj la. U slucaju Web-a korenska fascikla se zamenjuje prvo oznakom protokola http:// zatim i imenom web servera/domenom www. cnti. info i na nju se dodaje putanja do faj la sa imenom faj la na kraju.

Kada apsolutno adresiranje nije dobro? Ako premestite sajt na novi server svuda svim dokumentima treba promeniti prvi deo (domenski deo) adrese. Na primer ako selite www.cnti.co.yu na adresu www. cnti. info onda neophodno svuda 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 pitanju posao koji nije naivan i vrlo lako se moze pogresiti. Druga potencijalno proematicna osona asolutnih adresa nj ihova duzina koja raste sa usloznjavanjem hijerarhije i sto adresa duza lakse pogresiti odnosno teze baratati njome.

Ako zelimo da referenciramo sliku logo.jpg na stranici index.htm to mozemo da uradimo referenciranjem apsolutne i relativne adrese. Videli smo da apsolutna adresa sebe ukljucuje punu putanju do faj la http://www.cnti.info/Primer/Slike/jpg/logo.jpg. Na l kojem faj lu okviru cnti. info domena i na celom Web-u da upotrete ::L kodu ovu adresu slika logo.jpg 6 ispravno referencirana. Ukoliko faj love sajta premestimo na neki drugi server, recimo www. cnti .co.rs gornji link ne6e raditi sve dok ga ne zamenimo ispravnim (http://www. cnti.eo.rs/Primer/Slike/jpg/logo.jpg).

Kako se pravi relativa adresa?

Proeme apsolutnih adresa zaolazimo upotrebom relativnih adresa. Relativna adresa se pravi tako sto navodimo putanju od tekuceg faj la sa koj eg referenciramo do prvog zajedickog pretka sa faj lom koj i se ref ere ciramo, zatim navodimo putanju od zajedickog pretka do fajla koj i se refere ciramo. U nasem primer, da referencirali sa Index.htm dokumenat logo.jpg ispravna relativna

adresa l slede6a "/S like/jpg/logo.jpg. Podsetimo da fascikli Docs dokumenat ldex.htm, fasciklijpg slika logo.jpg.

Dakle, sekvenca znakova . . / ima znacenje nivo vise, i ve6 na tom nivou nasem primeru smo stigli do prvog zajednickog pretka nasa dva faj la (fascikla Primer):

onog koji referencira (Index. htm) i onog na koji se referencira (logo.jpg).

Zamislite da se fizicki kre6ete kroz hijerarhiju: izlazimo iz fascikle Docs i nalazimo se fascikli Primer. Odatle prosto putujemo do dokumenta logo.jpg kroz fasciklu S like i fasciklu jpg.

Prednost relativnog adresiranja tome sto mozete premestati fasciklu Primer sa njenim sadrzajem koliko god ho6ete, gornj i relativni link 6 ispravno raditi dokle god se ne narusi postoje6a hijerarhija.

Napominjemo ovde da cak i prosto preimenovanje fascikle jpg narusava konzistentnost svih adresa koje se referenciraju na sadrzaj fascikle jpg pre njenog preimenovanja. Jednostavno receno, nemojte menjati imena fascikli nakon sto ste se linkovali na nj ihov sadrzaj . Ovo pravilo vazi iz apsolutne i za relativne

adrese ravnopravno. Ovde postoji i izuzetak, kad pitanju domen, sve komnacije su dozvoljene. Na primer, www.cnti. info i www. cnti.INFO i www.CNII . info su iste adrese. Uocite, ponovo napominjemo, da nastavku putanje nakon domena i svejedno da li su mala ili velika slova. Da adresa l ispravna moraju se identicno navesti imena fascikli putanji do odredisnog faj la. U tom smislu adrese

"/Slike/jpg/logo.jpg "/Slike/Jpg/logo.jpg

nikako nisu iste, i na to treba obratiti paznju od samog starta. Ovakve greske su jako tesko uocljive, sa adresama treba baratati oprezno.

Nastavak sage HTML-u Podsetimo se i prosirimo svoja znanja:

::L - skra6eno od Hyper Text Markup Language.

L dokument n tekstualna datoteka sa tekstom i tagovima. L case insensitive, ne pravi

1 7

se razlika izmedu malih i velikih slova Hv1L elementima (BODY = Body = body). Preporka da 1 8 koristimo mala slova.

Sadrzaj dokumenta opisujemo tagovima, odn tagove koristimo da definisemo izgled dokumenta. Svaki tag ima otvaraju6i tag: . Ve6ina ih ima i zatvaraju6i tag: . Oni tagovi koji nemaju zatvaraju6i elementa zovu se prazni tagovi. Prazan tag izgleda ovako: sre6e se i oiku . Potonji zapis prakticnij i.

Da rezimiramo, tag specijalni tekst tkz. "markup"-marker koji ograden sa "" . zavrsni tag ukljucuje i znak "/" posle znaka "

Komentare U HTL-u zapocinjemo sekvencom znakova . Ono sto se nalazi komentaru, browser-i potpuno ignorisu.

Ispod se nalazi primer jedne potpuno funkcionalne L stranice koja ucitavanju browser njegovoj naslovnoj linij i imati ispisan tekst Hello World! , kao sadrzaj stranice ima6e tekst Zdravo zivahni svete! Skup karaktera upotrejenih na ovoj stranici slican U nicode-u i oznacava se sa utf-8 okviru meta taga i omogu6i6e da se sva nasa slova na ovoj html stranici ispravno prikazu.

1 PrimerOl.html ...--

Hello World ! < meta http-equiv= "Content-Typ e " content="text/html ; charset=ut f- " / > < ! - I spod se nala z i sadrzaj dokumenta -> Zdravo zivahni svete !

brada teksta

Pasusi teksta (paragrafi) se navode izmedu tagova. Svi tagovi pocinju novom redu. Iza zavrsnog taga, prelazi se novi red, sa dodatnim praznim prostorom izmedu. Ukoliko treba ubaciti praznu liniju bez dodavanja praznog prostora, koristi se tag
. U okviru pocetnog taga moze se navesti atriut align, koji odreduje horizontalno poravnanje paragrafa; vrednost ovog atriuta moze ti jedna od slede6ih: left, center, right i justify. Ukoliko se navede samo pocetni tag , podrazumeva se da slede6i element novom redu. Zavrsni tag opcioni ali vam preporucujemo da ga koristite.

1 Primer02.html ...--

Pasusi < meta http-equiv= "Content-Typ e " content="text/ html ; charset=ut f- " / >

Ovo 1 . pasus .

Ovo 2 . pasus .

Ovo 3 . pasus ispred kog bio j edan prazan red .

Ovo pasus koj i desno poravnat . Ovo pasus koj i centri ran .

Naslovi se mogu ista6i koris6enjem elemenata hl, h2, h3, h4, h5 i h. Tag h 1 uokviruje naslov prvog reda, koji , prirodno, najve6i, h uokviruje naslov sestog reda koj i najmanj i. Svaki od ovih elemenata pocinje novom redu, browser-i dodaju jos malo praznog mesta pre zaglavlja. U okviru zaglavlja se moze navesti atriut align, koji odreduje horizontalno poravnanje zaglavlja; vrednost ovog atriuta moze ti jedna od slede6ih: left, center, right.

1 Primer03.html

Naslovi < meta http-equiv= " Content-Type " content="text/html ; charset=ut f- " / > Ovo velicina slova u z aglavl j u Hl

0vo velicina slova u z aglavl j u H2 Ovo velicina slova u z aglavl j u 0vo velicina slova u z aglavl j u H4 0vo velicina slova u z aglavl j u H5 Ovo velicina slova u z aglavl j u H6

Za grubo razdvajanje teksta koristi se prazan tag . On dodaje jednu horizontalnu liniju (horizontal ruler) ispred i iza koje postoji prazan red. Mogu6e podesiti visinu koris6enjem atriuta size="n" (n je broj piksela), sirinu pomo6u atriuta width="n" i poravnanje pomo6u atriuta align (mogu6e vrednosti su left, right, center) .

Tag ockquote se cesto koristi za citate. Puno se koristio za uvlacenje duzih okova teksta odnosu na ostatak teksta sto treba izbegavati.

Tag cite se koristi takode za citate i ispisuje tekst italikom. Tag code sluzi za ispis programskog koda odnosno formula kao sto su matematicke formule. Tag pre (preformatted) obezbeduje prikaz teksta "onako kako unet" (svi enteri, tab-ovi i

razmaci se prikazu kako su uneti).

1 Primer04.html Rad sa tekstom < meta http-equiv= "Content-Typ e " content="text/html ; charset=ut f- " / >

Ovo tekst koj i levo p oravnat .

Ovo deo teksta koj i ti uvucen u odnosu na prethodni pasus .

Ovo 3 . pasus i spred kog j edan prazan red, i z a koga ti naveden citat .

Ovo posmatrati kao citat .

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

- za podejan tekst, boldiranje, preporucuje se za upotrebu na jednom znaku, strong, isto kao i samo za vise teksta

i - za iskosen (italik) tekst, mogu se svrhu iskosenja iskoristiti i em, def, var, cite u - za podvucen tekst, treba izbegavati jer uocajeno da podvucen tekst link ig - daje ve6i font za 1 od zadatog, small - daje manji font za 1 od zadatog, ink - daje tekst koji treperi, nije podrzan os svih browser-a, recimo firefox-u radi, IE ne

radi .. Tag omogu6ava da se menja , velicina i vrsta fonta; sav tekst izmedu pocetnog i zavrsnog taga 6 prikazan sa specificiranim karakteristikama. Atriuti okviru pocetnog taga su:

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

skali), size - menjanje velicine, weight - dejina slova.

1 Primer05.html

Formatiranj e teksta < meta http-equiv= "Content-Typ e " content="text/html ; cha rset=utf- " / >

1 10

Sledeci tekst prikazati upotrebu atributa za menj anj e karakteristika teksta :

Ovo pode j an tekst . < /b>

Ovo i s kosen tekst .

Ovo podvucen tekst .

Ovo su slova uocaj ene vel i cine , a ovo su slova za j edan veca od uocaj enih .

Ovo su slova uocaj ene ve licine , a ovo su s l ova za manj a veca od uocaj enih .

Ovo tekst crvene , slova su velicine 1 0 .

1 dalje traje saga HTML-u Pre nasta vka".

Za pocetak, sve primere koje smo pravili do sada bi bilo zgodno da grpisemo jednu fasciklu, nazovimo Pimai i smestimo korenskom direktorijumu W - na Vasem racunaru. Ukoliko ste pratili preporuke, to na adresi : \wamp\www \. Dakle puna putanja do nase fascikle Pimai bi bila : \wamp\www\Primeri \. Svaki pojedinacni dokumenat smo nazvali do sada PrimerXY. html, gde , mogu biti cifre od do 9 (PrimerOl.html, Primer02.html,."). Ukoliko niste tako nazvali, preimenujte ih sada i smestite fasciklu Pimai. Svakom pojedinacnom dokumentu iz ove fascikle obracamo se sledecom adresom koju unosimo address baru browser-a:

http : / / localhost/ Primeri/ PrimerXY . html

Kada zelite da napravite izmene HTivfL kodu Vasih dokumenata, prosto ih otvorite notepad-om ili nekim naprednijim tekst editorom kao sto notepad plus, ConTEXT i slicni, najzgodnije drzati istovremeno otvorene i tekst editor i Web pretrazivac sa ucitanom HTivfL stranom. U Notepad-u izmenite HTivfL kod i sacuvajte izmene (File -> Save) . Da biste videli promenu browser-u kom vec otvorena Vasa stranica, morate osveziti stranicu sa Refresh (F5 funkcijski taster).

Liste

Postoje dve vrste lista: unordered (neoznacena, neuredena) lista i ordered (nabrajanje, uredena) lista.

Neoznacena lista predstavlja spisak elemenata ispred kojih se nalazi bullet ili oznaka liste. Neoznacena lista pocinje tagom (Unordered List). Elementi liste se oznacavaju tagom (List Item).

Ako se umesto taga koristi element , dobija se brojna lista (Ordered List), odnosno spisak elemenata sa rednim brojevima. Pocetni broj uredene liste se moze zadati atributom start.

1 Primer06.html

Uredj ena lista

Primer uredene l i st e :

Azij s ke drzave : Evropske drzave

Primer neuredene l i ste :

S ri j a Francus ka Nemacka

Primer komnaci j e uredene i neuredene l iste . Svaka stavka uredene liste ima kao podlistu neuredenu li stu . Uredena lista pocinj e rednim broj em 3 sto obezbedeno atributom s t a r t i nj emu

1 11

dodelj eom vredoscu 3 . Uko l i ko se ovaj atribut avede lista i broj em d . Stavka Mogol i j a boldi raa , stavka S rbi j a boldi raa i ital i k .

Azij s ke drzave :

Kia Mogoli j a Sigapur

Evrop s ke drzave :

S rbij a Fracuska Nemacka

Rad sa slikama""

Primer dobre prakse da sve slike grupisemo jednu fasciklu, nazovimo Slike i smestimo fascikli Pimai. Ukoliko ste pratili preporuke, to na adresi : \wamp\www\ Primeri . Puna putanja do nase fascikle Slike tada glasi : \wamp\www\ Primeri \ S l i ke\ .

U fascikli Slike sm estite jednu sliku i nazovite S l i kaLevi Baer . j pg. Napravimo malu analizu adresama na ovom konk1etnom primeru pre nego opisemo tag img.

Apsolutna ad1esa ove slike Sli kaLeviBaer . j p g iz fascikle Slike glasi ovako: http : / / localhost/ Primeri / S l i ke / S l i kaLeviBaer . j pg.

Relativna adresa slike S l i kaLeviBaer . j pg zavisi od lokacije dokumenta kome se referenciramo na ovu sliku. U ovom nasem konkretnom slucaju, mi pozivati ovu sliku iz dokumenta Prime r 0 7 . html koji se nalazi fascikli Pimai, dakle na istoj lokaciji na kojoj se nalazi i fascikla Slike relativna adresa glasi ovako S l i ke/ S l i kaLeviBaer . jpg. Podsetimo se: browser zapravo interpretator HTivfL koda. Ucitava ga lini ju liniju i interpretirajuci HTivfL tagove formatira web stranu. Kada bi browser naleteo na prethodnu relativnu adresu, slobodnoj intrepretaciji, on bi procitao kao: pogledaj fascikli Slike koja se nalazi pored Primer0 7 . html dokumenta da li njoj ima slika imenu SlikaLeviBaer . j p g

Vratimo se tagu img kojim definisemo sliku koja se pojaviti HTivfL dokumentu. Atribut src (sourceizvor) sadrzi ime slike koja treba da se nade dokumentu, odnosno putanju do te slike dok atribut alt (alternate text -Alternativni tekst) sadrzi tekst koji biti ispisan na mestu slike, ukoliko se ona iz nekog razloga ni je uspesno ucitala na web stranicu. D imenzije slike se zadaju preko atributa height - visina i width - sirina. Slika moze biti poravnata odnosu na ostatak teksta dokumentu, zeljena vrednost se daje artibutu align koji moze uzeti vrednosti left, right, centerodnosno levo, desno i centrirano zadatom 1edosledu. D ebljina ivice slike se zadaje atributom border (okvir). Napravite Prime r 0 7 . html i snimite ga fasciklu imai koristeci sledeci HTivfL kod:

1 Primer07.html ....--

S l i ke < meta http-equiv= " Cotet-Type " cotet="text / html ; charset=utf " > I zad se al a z i s l i ka koj a se prikazati , sem u sluca j u da poseduj ete F di sk , F di s ku pri sute fsciklu Web u fa sciklu

1 12

Linkovi

html u koj oj se k al a z i slika . gi f . Uko l i ko se i spostavi da poseduj ete F di s k sa ideticom putaj om sa avedeom s l i kom, molim Vas da se j avit e , trebalo bi da u tom sluca j u uplatimo zaj edo d loto ti ket .

Posto browser i uspeo da d s l i ku , s l i ka mo z e b i ti ucitaa se umesto s l i ke prika zati u okvir predvideih dimez i j a ( 1 475 6 ) ovice lii j om d i 1 i u j emu i spisa alterativi tekst ( S ) . < />

Ako ste uradi li sve kako vd gore , i zad ovog teksta poj avice se Vasa s l i ka Sli kaLeviBaer . j pg velicie 4 0 0 1 0 0 poravata uz levu ivicu pro z ora . Ovaj tekst b i trebao d a s e astavl j a sa dese st rae s l i ke .

Ako ste uradil i sve ka ko vd gor e , i zad ovog teksta poj avice se Vasa s l i ka Sli kaL eviBaer . j pg vel icie 4 0 0 1 0 0 poravata u z desu ivicu prozora s a okvi rom d i 3 . Ovaj tekst bi trebao da se prethodi slici sa leve strae .

Linkovi predstavljaju jednu od bitnih razlika izmedu teksta i hiperteksta jer omogucavaju da se krecemo kroz stranice nesekvencijalno vec prema zelji. u zargonu obicno se kaze posetiti link, ako to prevedemo jezik pokreta i akci ja to znaci kliknuti misem na ponudeni link da bismo presli na zeljeni resurs na koji link 11cilja11 Linkovi mogu da ukazu na:

drugi dokument, drugi deo unutar istog ili drugog dokumenta, bilo koji resurs (ni je obavezno HT11L datoteka ili deo okviru ove datoteke). Na primer to moze

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

Odredisni objekat se identifikuje uz pomoc mehanizma URI (Uniform Resource Identifiers). URL (Uniform Resource Locator) podskup URI, i sluzi za lociranje nekog resursa na Internetu, i sledeceg olika: protokol://racunar:port/putanja/datoteka

Posto smo nekoliko navrata pricali adresama, apsolutnim i realtivnim adresama necemo ponovo ovde govoriti.U Primeru08.html navedenom ispod mozete videti kako se prave linkovi. Pocetni tag sadrzi slovo (anchor) i href atribut koji obavezan i ci ja vrednost apsolutna ili relativna adresa nekog resursa. Nakon pocetnog taga ide takozvano telo linka, odnosno objekat za koji se vezuje link. Najcesce to tekst ili slika. Na kraju ide obavezno zatvarajuci tag.

1 PrimerO 8.html ..-----.

Likovi < meta http-equiv= " Cotet-Typ e " cotet="text / html ; charset=utf!"I ">

Likovi Ovaj primer sadrzi lik ka straici Prime r 0 7, u pitaj u relativa putaj a prethodi prime r . Ovaj primer sadrzi lik ka straici Google Search , sa apsolutom adresom t straice Google-a .

Imenovana sidra su mesta dokumentu na koja mozete 11skociti 11 kad kliknete neki link sidra. Vrlo cest

l 13

primer sidra link koji ste sigurno koristili na Web-u, imenuje se obicno sa ili Vrh, kad kliknete l 14 na njega browser Vas prebaci na pocetak stranice. Sidra su zgodna kod " dugackih " web stranica, jer pomo6u nj ih mozete " skakati" dokumentu, sto 6 korisnici izuzetno ceniti na vasim stranicama sa puno materijala. Skrolovati misem kroz "dugacke" stranice zna biti vrlo naporno.

S idra se prave na slede6i nacin: Prvo se izabere mesto dokumentu za koje zelimo da bude "mesto doskoka" uslovno receno . Na tom mestu dodajemo pocetni tag koji sadrzi slovo (anchor) i umesto href atributa sadrzi atribut . V1ednost name atributa treba da imenom da asocira na mesto "doskoka" dokumentu, na primer vrh _stranice, dno _stranice," " zatim ide standardno telo linka, odnosno sidra, i na kraju zatvaraju6i tag. Ovako se postavljaju sidra. Ali kako se koriste ova postavljena sidra? Jednostavno se negde dokumentu na mestu sa kojeg zelimo skok na sidro postavi jedan link sa atributom href cija vrednost ime sidra na koje treba skociti predvodeno sa tarabom.

1 Prier09.htl .------.

Imenovan s i dra < / title> O z nacavanj e d e l ova do kume n a t a Ova j p a s u s o be l e z en imenom vrh s t r anice , odn o s n o za n j ega ve z a n o s i dro vrh=s t rani ce . ova j p a s u s telo s i dra . Ovo l i n k< / a> ka s i dru ko j e se nal a z i na dnu ove s t rani c e .

Neki p a s u s - t e k s t

Neki p a s u s - t e k s t

Ne ki p a s u s - t e k s t

. . . Da bi b i l o o c i g l edni j e ka ko rade s i dra , t reba i s ko p i r a t i na ovom me s t u b a r O t a k redova .

Neki p a s u s - t e k s t

Ovde to ni j e u r adeno s amo z b o g p r o s t o r a , a l i vi kad bude t e p ravi l i ova j p rime r u r a d i t e t o .

Neki p a s u s - t e k s t

Neki p a s u s - t e k s t

Neki p a s u s - t e k s t

< name = " dno_s t r ani ce " >Ova j t e k s t o be l e z en imenom dno_s t r a n i c e , odn o s n o za n j ega ve z a n o s i dro dno s t r a n i c e . Ovo - l i n k< / a> ka s i dru vrh_s t ra n i c e ko j e s e n a l a z i na vrhu s t ra n i c e . Kad ga kli kne t e t r e b a l o b i da V a s b rows e r pome r i na me s t o u do kumentu g d e s e n a l a z i o v o s id r o , t j . na vrh s t r a n i c e . . .

Da, HTML saga nije gotova . . .

Mapiranje slikama . . . Tag definise geometrijske zone na slici koje 6 predstavljati linkove. Atribut usemap img tagu odreduje putanju do opisa zona (do taga). Ove geometrijske onblasti su vrlo slicne Hot Spotovima multimedijalnim programima, koj i su osetlj ivi na radnje misem (prelazak, klik, " . ) .

Definicija oblasti:

Poligonalana oblast definisana sa tri para tacaka: prva tacka 395, 1 45, druga tacka 322,91 , tre6a tacka 393,32. U ovom konkretnom slucaju pitanju trougao. Navodenjem vise tacaka moze se definisati bilo koj i mnogougao.

Pravougaona oblast opisuje se sa dve tacke, gornjom levom i donjom desnom tackom. Olast obliku kruga, opisuje se tackom centra i poluprecnikom.

Matematicki receno :

Ako oblast rect (rectangle) - Vrednosti koordinata su "leva,gornja, desna,donja " Ako oblast circ (circle) - Vrednosti koordinata su "centax, centary,polupecnik" Ako oblast poly (polygon) - Vrednosti koordinata su "xl, yl,x2, y2, " ,xn, yn"

Pretpostavimo kao i ranije da fascikli Slike koja se nalazi pored naseg dokumenta PrimerlO.html, postoji slika koja se zove slika.jpg

Mape< /title> Del ovi s l i ke p r e d s t avl j a j u l i kove . P r o a d i t e ih .

Dodatni atriuti body taga

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

1 Primerl l.html

At ributi body t a g a O z acavaj e del ova do kume a t a Ova j p a s u s o be l e z e imeom " p r vi " . Ovo l i k p rvi deo . Ova j p a s u s o be l e z e imeom " d rugi " . Ovo l i k drugideo .

1 Primer12.html Body t a g i dal j e< / title>

l 15

Pozadiska s l i ka

Vredost atribut bgcolor de fiise boj u pozadiu straice . At ribut lik de fii se boj u l ika . Atribut vlik ( visited lik) de fiise b o j u pos eceog lika .
Atribut alik de fii se b o j u a ktivog ( selektovaog ) lika .
Atribut backgroud de fii se puta j u do pozadiske s l i ke .
Atribut text de fii se b o j u teksta s t z raici . .

Ova j tekst bele j er smo to de fiisali tagom fot i atributom color , i bi bio crvee . .

Ovaj tekst crvee podra zumevae za tekst straici .
Preporucuj emo da i zbegavate upot rebu ovih atribut a ,
ds da kori stite stilove umesto ovih atributa . . .

Specijalni karakteri Specijalni karakteri navode se sledecem formatu: &oznaka _ karaktera;

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

1 Primer13.html ,...,_--

< h t m l > Speci j ali karakteri Specij ali karakteri Specij ali karakteri avode se u slede & # 2 6 3 ; em formatu :

&amp ; o zaka karaktera ;

Zak ampersad ( & ; ) ima speci j alo z & # 2 6 9 ; i predstavl j a po 6 9 ; etak vd specij alog karaktera . Kada treba ugraditi ba&scaro; ova j zak u tekst to se & # 2 6 9 ; ii sekvecom &amp ; amp ;

Ako de fii sete kao s kup zakova starice utf- , da biste dobili s s lova mo zete da koristite sledece specij ale karaktere . . .

Ovo samo primer , ikako avodimo s kup zakova , preporuka da koristite utf- , j er stada rd .

Pogleda j te j edu kompleti j u tabelu specoij alih s imbola HTML-a ovde .

Meta tagovi Definisu dodatne informacije koje se ne prikazuju. Dodatne informacije se definisu kao parovi (naziv, vrednost), tj . atributi name i content taga. Koriste se za obezbedivanje informacija pretrazivacima interneta (yahoo, google, itd .) : author, description, keywords; informacije za druge namene (proizvoljne vrednosti) . Atribut http-equiv definise podatke koj i se smestaju zahlavlje http odgovora klijentu.

Definicija kljucnih reci za masine za pretragu:

Definicija opisa web stranice:

Osvezava prikaz svakih 7 sekundi:

1 Primer14.html ....-

META tagovi META tagovi

Pogleda j te i zvorni kod dokument a , desni kli k View source .

1 Primer15.html

Tabele

META tagovi META tagovi

Malo unicode teksta :

Latinica sdccz

Tabele se sastoje od vrsta i kolona. U HTJ\1L-u tabela se sastoji od redova koj i su podeljeni na polja, prva polja svih redova cine prvu kolonu, druga polja drugu kolonu, itd. Za kreiranje tabele potrebna su tri taga:

table - za tabelu, tr - za red, td - za polje.

Pomocu taga th definisu se zaglavlja vrsta ili kolona. U okviru pocetnog taga , moguce definisati poravnanje tabele dokumentu (atribut align, koji moze imati vrednosti left ili right), debljinu ivice tabele (atribut border) i boju pozadine (atribut bgcolor), s 'tim sto svaka celija tabele moze imati i svoju boju. Za svaku celiju se moze definisati koliko obuhvatiti kolona ili vrsta, pomocu atributa colspan i rowspan. Atribut cellspacing definise rastojanje izmedu celija tabeli, atribut cellpadding definise rastojanje od ivice do sadrzaja celije.

Tag (Table Row) definise vrste tabeli. Tag sadrzi tagove (Table Heading), koji odreduju zaglavlje tabele, i tagove (Table Data) koj i predstavljaju celije tabeli. U tagu mogu se nalaziti sledeci atributi:

1 . align - horizontalno poravnanje tabele ( center, left, right), 2. valign - vertikalno poravnanje sadrzaja celij i (basline, bottom, middle, top), 3 . bgcolor - pozadine.

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

1 Primer16.html

l 17

Tabela English Spani sh German oneunoein twodoszwei threetresdrei tabela 1 : b roj anj e na raznim j e zicima

Upload fajlova ...

Upload fajlova server (FTP) File Transfer Protocol (FTP) mrezni protokol koji se koristi za transf er podataka sa jednog racunara na drugi posredstvom mreze kao sto Internet. FTP protokol za transf er podataka za razmenu i manipulaciju podacima preko racunarske mreze zasnovane na (Transfer Control Protocol).

Da pojednostavimo, FTP protokolom se definisu pravila manipulacije i razmene fajlova na Internetu. FTP se najcesce koristi za preuzimanje faj lova sa host-a putem Interneta (download) i postavljanje faj lova na host putem Internet-a (upload) ali i za ostale manipulativne radnje nad podacima(preimenovanje, brisanj , . . . ) .

Kako radi FTP? FTP zahteva klijent (FTP program) instaliran na Vasem PC-ju da biste se spoj ili uspesno na host, ili server. FTP klijent softver koji se konektuje na FTP server da bi manipulisao podacima na tom serveru. Jednom kad se uspesno prijavite na neki server ili host, imate p1istup na nivou direktorijuma sa definisanim pravima ( definisano Vasim nalogom).

Faj lovi se kopiraju sa lokacije na Vasem racunaru na lokaciju na Web-u naizgled isto kao da se sve desava lokalu na Vasem racunaru, jedina vidlj iva razlika brzini kopiranja, jer realno, lokacija na koju kopirate moguce da se nalazi na serveru koj i na drugom kontinentu.

Sta cemo raditi okviru ove lekcije :

Govoricemo dostupnom FTP softveru Definisacemo svoj nalog ili ftp konekciju uz pomoc podataka host-u, korisnickom imenu i

lozinci koje cemo pronaci kasnije ovoj lekciji . Koristeci definisanu konekciju/nalog izvrsicemo probu postavljanje/upload faj lova na serYer/host.

lzbor FTP softvera Ako nemate FTP program, trebace Vam jedan. Ovde navodimo neke od softvera koje mozete

koristiti. Svi softveri tipa komander mogu se vrlo uspesno koristiti za FTP transfer fajlova. Od ovakvih softvera preporucujemo vrlo rasiren i popularan kod korisnika TotalComander, odnosno FreeCommander koji potpuno besplatan. Od specijalizovanih FTP softvera preporucujemo da isprobate sledece:

AceFTP. Vrlo jednostavan program, podrzava drag-and-drop nacin rada sa interfejsom Windows maniru, sam transfer faj lova brz i efikasan sa intuitivnom navigacijom. Ovo

l 18

brz, robustan i besplatan FTP software. Moguce i vrsiti nekoliko transfera istovremeno. Download AceFTP.

FileZilla. Ovo jednostavan besplatna, open-source FTP aplikacija. Moguce i vrsiti nekoliko transfera istovremeno . Za trensfer osetlj ivih informacija program podrzava SFTP (secure file transfer pl'otocol). Odlican alat za upravljanje manj im sajtovima. Download FileZilla

RightFTP. Takode besplatan FTP klijent za Windows platformu sa sirokim opsegom integrisanih alata. Jednostavan i za pocetnike poseduje sebi dovoljno alata da zadovolj i i zahteve i profesionalaca. Interfejs vrlo nalik Explorer-ovom, tako da ovaj program vrlo korisnicki prijateljski nastrojen, podrzava drag-and-drop nacin rada, konekcija se resava sa samo nekoliko klikova misem. Dodatne funkcionalnosti ukljucuju site profile manager, remote editing," .Download ( self-installing)Download (ZIP archive)

TomaWeb's S imple FTP. Download twftpfree20. exe Core FTP LE. Core FTP LE 1 . 3 : free version. Cyberduck. Information and download.

Potrebni FTP parametri Provajder (onaj koji obezbeduje hosting) obavezi da Vam dostavi relevantne informacije odnosno potrebne FTP instrukcije i uputstva (FTP adresa, user name and passwol'd). Posto ovom slucaju dok traje semina1 cnti. info Vas provajder za potrebe seminara, dostavljamo Vam sledece potrebne informacije, koje preporucujemo da negde zapisete:

FTP adresa kojoj cete pristupati je ftp. cnti. info, port je standardno 21 user name Vam je napravljen prema grupi cij i ste Clan webOi, gde i=l " 8 . korisnicka imena su

webOi@cnti. info, i=l "8 . Na primer, ako ste Clan grupe w username Vam je webO @cnti. info password vam je webOi, i=l "8 . Na primer, ako ste Clan grupe w , password Vam je w .

Dakle svi Clanovi jedne grupe pristupaju zajednickoj lokacij i, sto otvara mogucnost da jedni drugima nesto i obrisete, pokvarite itd" . Iako smo mogli ovaj rizik izbeci, smatramo da pozeljno da radite sto moguce realnij im uslovima koji odgovaraju stvarnosti. realnost takva da obicno vise ljudi barata sa istim pravima istim objektima, tako da odgovornost za ispravnost na svakome lezi jednako. Vodite racuna da postoji log faj l kojem se pise svaka aktivnost na odredenoj lokacij i i da p1eko evidentirane IP adrese i vremena pristupa moguce uvek utvrditi ko , gde i sta radio," .

Upoznajmo i testirajmo jedan FTP program Bice Vam potrebno neko vreme da se odlucite koj i cete program koristiti, videcete da svi oni imaju iste osnovne operacije. Mi cemo za potrebe seminara koristiti FreeCommander, ali to ne znaci da druge programe ne trebate probati, naprotiv.

Preuzmite instalacioni faj l sa lokacije za preuzimanje (ovonedeljni resurs). Instalacija FreeCommandre-a standa1dna.

Kliknite na FTP dugme sa jedne strane. Dvokliknite na N ew F connection i unesite odgovarajuca polja parametre koji su g navedeni (FTP adresa, user name and password). Kada pitanju FTP, vrlo cesto postoji i mogucnost Anonymous (anonimnog) pristupa na odredenim lokacijama. ne vazi za nas.

Sam FTP transfer se razlikuje odnosu na to da li baratamo tekstualnim faj lovima ili na primer arhivama, i moze biti jedan od tri sledeca tipa prenosa:

ASCII, Binary, Autodetect

ASCII se koristi pri transfer L fajlova ili uopste faj lova tekstualne prirode, binary kada se vrsi transfer grafickih faj lova, arhiva," . U nasem s lucaju podrazumevana vrednost za transfer Autodetect koja p1etpostavlja da program sam prepozna prirodu objekta kojim barata.

Vecina FTP programa podesena da koristi podrazumevano Port 2 1 . Ovo nemojte menja ti sem ukoliko ne dobijete od provajdera informaciju da se za FTP transfer koristi neki drugi Port.

u vecini slucajeva ignorisacete ostala podesavanja kao sto su: U se fitewall, PASV mode, Description, i slicno.

l 19

Naravno, ukoliko Vam provajder ne sugerise suprotno. Recimo PASV mode se koristi kad se ocekuju 1 20 proemi sa P irewall-om i sigurnosnim ogranicenjima sa strane PTP klijenta, tj Vas.

Proverite imena fascikli i faj lova. Koristite samo mala slova imenima, inace mozete imati proema na UNIX zasnovanim host-ovima. Ve6ina provajdera ove proeme ipak resava interno, izmenama hodu, i time rastere6uje korisnika razmisljanja tome. Ipak, najbolj i lek za sve proeme prevencija, dakle navikavajte se da koristite mala slova. Nemojte koristiti specijalne znake i karaktere imenima. Nemojte koristiti vise odjedne ekstenzije imenu faj la.

Da smo proverili da li nas radi, kreira6ete na Vasem racunaru jednu novu fasciklu i nazva6ete svojim korisnickim imenom, imenom kojim se prijavljujete na moodle. Naglasavamo da ne koristite ime grupe, ve6 iskljucivo korisnicko ime koje imate na sistemu. Ovo tno radi kasnije provere uradenog. Sa jedne strane prozoru PreeCommander-a pronadite tu faciklu, sa druge otvorite konekciju koriste6i se gornj im parametrima. Da li 6 na ovoj lokacij i na

serveru ti necega zavisi od toga da li j e neko od kolega malo brzi i vredniji od Vas. Selektujte napravljenu fasciklu i pritisnite 5. Pojyi6e se slede6i prozor.

S ource Crack from : \

Targel lftp : ! /ftp. cnti. info

IAutodetect :::: Tr ansfer type Transfer 1n background Convert f1le names to lower case Always overwrite without prompt

.,/

Iz ovog primera se vidi da se uploaduje fascikla imenu Cmck na ftp. cnti. info. Nakon klika na , fascikla 6 ti upload-ovana. Istovremeno 6emo doti spisak njene sadrzine i prikaz napretka upload-a progres bar-om.

Da pojasnimo malo ovaj dijalog.

Source izvor, ono sto se kopira/upload-uje Target meta, destinacija, odredisna lokacija na koju se upload-uje Transfer type (ASCII, nary, Autodetect), tip transfera Tansfa in backgound omogu6ava da se trenutni upload/download ili uopste transfer "gurne"

pozadinu i time se d mogu6nost da se pokrene neki drugi transfer (simultani rad) Convatjlle names to lowa case vrsi koverziju slova imenima fajlova mala slova Always ovetwite without t. Program Vas ne6e ni pitati da li zelite da nastavi zapoceti

transfer ili da pregazi faj l novom kopijom ve6 6 pregaziti novom kopijom. Kada se ovo desava? V rlo cesto. Ako konekcija ka serveru pukne iz l kog razloga imate izbor da nastavite transf er ili da krenete ispocetka sa novom kopijom

Ovako nesto ili vrlo slicno sres6ete svim gore navedenim ftp klijentima.

Nas slede6i zadatak da vidimo kako se pravi direktno na serveru fascikla. Udite Vasu fasciklu na serverskoj strani commander-a. Pritisnite 7 i unesite ime slike. Ovu fasciklu 6emo iskoristiti za smestanje slika. Sad selektujte sa serverske strane fasciklu slike i pritisnite 5 i ona 6 ti iskopirana na Vas licni racunar. Isti proces (kopiranje) zavisno od smera kopiranja zovemo upload ili do\vnload.

Sam PreeCommander se vrlo jednostavno koristi jer njegov interfejs vrlo intuitivan, tako da operacije brisanja, preimenovanja, isecanja, " . se jednostavno pronalaze i koriste. PreeCommander sam s on nije predmet seminara i od Vas se ocekuje da posedujete iskustvo radu sa programima ovog tipa.

Radionica

Da ste uspesno realizovali ovu radionicu potrebno prethodno realizujete zahteve navedene lekcij i

upload-u fajlova, odnosno da kreirate fasciklu na ftp. cnti. info koja 6 se zvati Vasim korisnickim imenom 1 21 (ne koristite ime grupe za ime ove fascikle). U njoj prema zahtevima lekcije napravite i fasciklu koja 6 se zvati slike.

Zadatak radionice slede6i: potrebno napraviti Web stranicu (html dokumenat) koja treba da sadrzi otprilike iste informacije kao i Vas CV.

Treba da sadrzi slede6e informacije: . . .

1me 1 prez1me, Vasu sliku interesovanja i hobi ako ga imate, zavrsena skole zvanje i dodatna znanja, mesta zaposlenja, Licne kontakt podatke

adresa telefon, mail, . . . (licni podaci ne moraju biti tacni ali moraju postojati na stranici),

podatke skoli kojoj radite (samo jednoj, ako radite vise skola izaberite jednu) naz1v, mesto, adresa, mail, kratak opis, slika skole.

izgledu i rasporedu informacija na ovoj web stranici odlucuj ete sami i ograniceni ste samo svojom kreativnos6u. N stranici mogu biti upotrebljeni svi HvfL elementi ko smo spomenuli lekcijama, i oni koje nismo. Jedini uslov da napravite L stranicu bez upotrebe specijalizovanih programa za tu namenu, dakle peske, i da obavezno upotrebite bar na jednom mestu tabelu, uredenu i neuredenu listu, kao i da koristite bilo nasa 6irilicna bilo latinicna slova.

lzradenu stranicu nazovite index. html i neophodno upload-ovati ovaj faj l gore pomenutu fasciklu koja se zove Vasem korisnickom imenu, slike koje koristite na ovoj stranici moraju biti smestene fasciklu slike, koja smestena fascikli koja se zove Vasem korisnickom imenu. Dakle, nemojte zaboraviti da fotografije takode upload-ujete. Jednu fotografiju (Vasu licnu ili sliku skole) referencirajte relativnom adresom drugu fotografiju apso lutnom adresom.

Ako Vam se izgled stranice index.html ne svidi, izmenite L kod, snimite stranicu i ponovo upload-ujete" . Direktne izmene L koda vremenski zahtevan posao, stoga Vam preporucujem da koristite W Al\1P dok ne budete zadovoljni dobijenom L stranicom, i tek onda upload-ujte koriste6i napravljenu ftp konekciju.

Proverite da li se na adresi: http://www. cnti. info/infoseminar/oznakagrupe/korisnickoime/index.html nalazi Vasa stranica ( oznaka grupe oblika webOi, i= l " 8). Na primer, recimo da Vase korisnicko ime , i pripadate osmoj korisnickoj grupi web08, ako sve uradite prema uputstvu, Vasa web stranica 6 se nalaziti na slede6oj adresi: http://www.cnti. info/infoseminar/web08/joe/index. html.

CSS - Cascading Style Sheets

Kaskadni stilovi L originalno dizajniran sa definise sadrzaj dokumenta. On trebao da bude jednostavan opisni jezik sadrzaja koji kaze "Ovo tabela (table)", "Ovo paragraf (paragraph)", "Ovo zaglavlje (header)" koriste6i tagove ,

," . Izgled trebao da definise browser bez koris6enja ijednog taga za formatiranje. Tadasnj i velikani medu browser-ima, Netscape i Internet Expler, su originalnoj specifikaciji L dodavali L tagove i atribute (na primer tag i l atribut). Kako L postajao komplikovanij i, bilo sve vise mogu6nosti za definiciju izgleda elemenata, ali istovremeno postajao necitlj iviji i tezi za odrzavanje dok izrada web stranica kojima jasno odvojen sadrzaj od izgleda postala nemogu6 zadatak. Dodatno, razliciti browser-i su prikazivali

dokumente na razlicite n, i postojala potreba za jedinstvenom tehnikom definisanja prikaza 1 22 elemenata na stranici. 1 te potrebe nastao CSS (Cascading Style Sheets), jezik formatiranja pomo 6u kog se definise izgled elemenata web-stranice.

Dakle, nekada L sluzio da definise kompletan izgled, strukturu i sadrzaj web-stranice, ali od verzije 4 .0 L- uveden CSS kojim se definise izgled, dok L ostao zaduzen za definisanje strukture i sadrzaja.

CSS Sintaksa CSS sintaksa se sastoji od opisa izgleda elemenata dokumentu. Opis moze da definise izgled vise elemenata, ali i vise opisa moze da definise jedan element. Na taj nacin se opisi slazu jedan preko drugog da bi definisali konacni izgled odredenog elementa. Tako nastao i naziv Cascading (Eng. cascade -crep), da bi se docaralo slaganje jednog stila preko drugog definisanju konacnog izgleda elementa

Svaki opis se sasto ji od tri elementa:

definicija ciljnih elemenata svoj stva (atributi) vrednosti

Nakon sto definisemo ciljne elemente, tj . elemente na koje 6 se trenutni opis odnositi, zom parova svojstvo-vrednost definisemo izgled svakog ciljnog elementa.

S intaksa koja se pri tome definise slede6eg oblika:

ciljni elementi { atributl : vrednostl ; atribut2: vrednost2; } CSS podrzava i komentare, dakle navode se izmedu znakova / * i * /

Ciljni elementi Ciljni elementi se definisu na tri nacina:

1 . navode6i HTMLtagciljnih elemenata 2. navode6i klasu elemenata 3 . navode6i direktnu identifikacionu vrednost (ID) elementa

Kada definisemo stil preko L taga ( 1 . ) , to znaci da 6 ovaj opis uticati na sve elemente dokumentu koji imaju ovaj tag. Definicija ciljnih elemenata se tada vrsi preko direktnog upisa odgovaraju6eg L taga:

{ svoj stvo : vrednos t ; }

Klasa L elementa je rec koju stavimo kao vrednost argumenta c l a s s p1i definicij i tog elementa (2. ) . Definicija ciljnih elemenata (svih koji imaju odredenu istu klasu) se vrsi tako sto upisemo znak tacke ( .) zatim naziv klase:

. imeKlase { svoj stvo l : vrednos t l ; svoj s tvo2 : vrednost2 ; }

Ovaj opis 6, dakle, imati uticaja na sve elemente dokumentu koji su definisani na slede6i nacin:

. . . . . .

Identifikaciona vrednost elementa vrednost argumenta pri definiciji tog elementa (3). U jednom dokumentu identifikacione vrednosti moraju biti jedinstvene, tj . moze postojati samo jedan element sa odredenom identifikacionom vrednos6u, sto znaci da ovakvi opisi mogu uticati samo na jedan element dokumentu. Definisu se pomo6u znaka tarabe (#) zatim identifikacionu vrednost:

#IDVrednost { svoj stvo l : vrednost l ; svo j s tvo2 : vrednost2 ; }

Ovaj 6, dakle, opis uticati na sve elemente koj i svojoj L definiciji imaju id= 11 I DVrednost 11

Pogledajte primer ispod:

1 stiloviOl.html .-----..

Stilovi

/ * 1 . navodeci HTML t a g cilj nih elemenata * /

{ colo r : # O O O O ff ; }

/ * 2 . navodeci klasu elemenata * /

. redtext { color : # f fO O O O ; text-align : cente r ; }

/ * 3 . navodeci direktnu ident i fi kacionu vrednost ( ID ) elementa * /

#greentext { colo r : # O O ff O O ; text-align : right ; }

rvi pasus . Tekst levo p oravnat i plave . Drugi pasus . Tekst desno poravnat i zelene . pasus . Tekst centri ram i crvene .

Gde moze da se nalazi CSS kod CSS kod se moze zadavati na tri standardna mesta:

1 . direktno Hvll., tag-u, koriste6i argument style ( inline ) 2. zaglavlju dokumenta unutar taga style 3 . eksternoj datoteci, koja se linkuje tag-om link

Za jako male dokumente, argument style nekom tagu ( 1 . ) moze biti prihvatlj iv, ali za ve6e dokumente ne moze jer se na ovaj nacin stil definise za svaki elemenat ponaosob. Ovo treba izbegavati jer nepotrebno gomila kod dokumentu i potire osnovni razlog uvodenja CSS razdvajanje definicije izgleda od samog sadrzaja i negativno utice na citlj ivost cime se otezava i odrzavanje stranice. Argument style taga se najces6e koristi ako neki element ne pripada nijednoj grupi i ima posebne zahteve odnosu na sve ostale elemente.

Definicija stilova se najces6e radi grupisu6i elemente klase, pomo6u argumenta class taga, zatim definisu6i izgled tih klasa bilo okviru elementa style zaglavlju (2 .) ili eksternoj datoteci (3 . ) . Ako definisemo stil zaglavlju njegov opseg vidlj ivosti ta stranica, to jest samo elementi na ovoj stranici mogu koristiti stilove definisane zaglavlju stranice.

Stilovi eksternoj datoteci imaju jednu p1ednost odnosu na p1eostala dva nacina (stilovi definisani zaglavlju i inline stilovi), to da pomo6u eksterne datoteke mozemo da uticemo na elemente vise dokumenata. Dovoljno da Web dizajne1 bude dosledan definisanju klasa elemenata, da bi jedan faj l sa stilovima od1edivao izgled svih stranica. Bilo koja izmena faj lu sa stilovima utice na sve stranice koje koriste te stilove. Na ovaj nacin pomo6u eksterne datoteke mozemo centralizovano da upravljamo stilovima i izgledom dela ili celog sajta. Eksterna datoteka kojoj se cuvaju CSS stilovi obicna tekstualna datoteka sa ekstenzijom . css

Redosled slaganja (prioritet) i interpretacije stilova Koji stil iti koriscen ako definisemo stil za isti elemenat na vise mesta?

Uopsteno govo1e6i, mozemo 1e6i da se stilovi slazu jedan virtuelni stil p1i cemu su poredani sta1ini, sto ve6i broj nabrajanju stil ima ve6i pl'iol'itet.

1 . Browse1 default 2. External style sheet 3 . Internal style sheet (unuta1 taga) 4. Inline style (unuta1 HvfL elementa)

Znaci inline CSS (unutar (inline) HTML elementa) ima najve6i prioritet, sto znaci da 6 "pregaziti" svaku definicije pt'ethodna cetil'i slucaja. Stil definisan unuta1 head sekcije dokumenta sta1iji od eksternog faj la i browse1 default-a. Bl'owse1 default zavisi od podrazumevanih postavki konk1etnog browse1-a.

1 23

Pogledajmo slede6i primer. Recimo da imamo jedan eksterni CSS faj l kojem definisan izgled za 1 24 L elemenat, nasem primeru definisali smo za tag da zelene i snimili ovaj faj l pod imenom eksterni. css.

1 ekstemi.css

Sada pravimo faj l stilovi02.html sa definicijom izgleda taga okviru sekcije L dokumenta kojim smo definisali da svaki pasus crvene i sa jednom definicijom stila okviru taga unutar body sekcije kojem smo rekli da tekst plave . Linkujemo sa faj lom eksterni. css navode6i liniju koda . Naravno, relativna dresa podrazumeva da se faj lovi stilovi02.html i eksterni. css nalaze istoj fascikli.

1 stilovi02.html ....-

Stilovi

< ! -- definici j a stila u okviru head s e kci j e dokumenta u pomoc style taga -->

{ color : # f fO O O O ; }

< ! -- linkovanj e faj la css ekstenzi j e koj i unutar sebe sadrzi defini c i j u stila --> < ! -- Zamislite d a s e sadrzaj dokumenta eksterni . cs s umece ovo mesto u dokumentu-->

Prvi pasus .

< ! -- inline definicij a stila u okvi ru konkretnog taga --> Drugi pasus .

Treci pasus .

Rezultat bi trebalo da bude slede6i: Drugi pasus bi6e uvek plave jer inline stil najstarij i, zatim 6 vaziti CSS definicaja taga definisan unutar stila okviru head sekcije dokumenta, zato 6 prvi i tre6i pasus biti crvene , zelene ne6e biti nijedan deo teksta iako definisan eksternom faj lu jer definicija okviru head sekcije dokumenta starija od definicije eksternom CSS faj lu. Tek ukoliko uklonite definiciju stila za tag head sekcij i dokumenta za prvi i i tre6i pasus vazi6e pravilo definisano eksternom css fajlu i bi6e zelene .

Svojstva i vrednosti Svojstva na koja zelimo da uticemo datom opisu se definisu preko niza kljucnih reci definisanih W standardu, koje se kategorisu slede6e grupe:

definicija pozadine elementa 1v1ca okvir prikaz dimenzije font generisani sadrzaj marge

unutrasnji prazan prostor poz1c1Ja izgled pripadajuceg teksta

Vrednosti pojedinih svojstava se definisu na dva nacina:

predefinisanim kljucnim recima bro jevnim vrednostima

Predefinisane kljucne reci za vrednosti svoj stava se koriste situacijama kada dato svojstvo ima ogranicen broj mogucnosti. Tako na primer svojstvo za definiciju pozadine elementa moze biti samo

scroll (da se krece uvek zajedno sa sadr.:lajem elementa) i fixed (da stoji uvek na istom mestu bez obzira na sadrzaj) .

Brojevne vrednosti se mogu zadavati na nekoliko nacina:

zadajuci samo brojevnu vrednost navodeci i jedinicu velicine skupa sa opisom (, em, p t, " . )

Ponovimo nauceno i naucimo nesto novo CSS-u Tri su moguca naCina da sacuvamo CSS pravila:

1 . izvan HTML dokumenta (extemal style sheets)

Lepota i snaga CSS-a lezi upravo mogucnosti da se svi stilovi koje cete koristiti na celom sajtu smeste izvan HTML dokumenta. nam omogueava da promenom stila na jednom jedinom mestu promenimo prikaz na celom sa jtu !

Ovom metodom sve stilove smestamo zaseban CSS dokument - oican fajl sa .css ekstenzijom kojeg mozete napisati Notepadu i snimiti npr. root di1ektorijumu kojem se nalazi i homepage (index.html) . U njemu cemo definisati sva CSS pravila koja vam treaju na sajtu i nazvati faj l npr. mojstil. css . Eksterni . css fajl treba povezati s L dokumentom. se radi uglavnom pomocu tag-a sekcij i :

Naslov stranice

Jednom kad povezete L dokument sa . css faj lom, stilovi definisani njemu primenjuju se na tagove pomocu class atriuta.

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

CSS definisemo unutar specijalnog tag-a:

naslov stranice { font-s i z e : large; color : red

Primetite da unutar tag-a obavezno morate definisati tip stila: ovde to type= "text/css ". Ova metoda definisanja CSS stilova dobra ako razlicitim L stranicama zelite dodati razlicite stilove.

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

Stilove mozemo umetati gotovo svaki L tag pomocu atriuta style i direktnog specificiranja stila na sledeci nacin:

neki tekst paragrafa prika z an veli kim slovima i crvenom boj om

Napomena! Nemojte pomesati tag koji smo koristili metodi pod 2) i style atribut koj i koristimo

1 25

ovde. Radi se dve razlicite stvari (jedno tag, drugo atribut) .

Inline stilovi mogu biti korisni ako vam odredeni stil treba samo na jednom jedinom mestu i nigde vise -tada bi bilo glupo taj stil definisati globalno i nepottebno pove6avati velicinu CSS dokumenta. Inline stilovi imaju najvisi prioritet od svih metoda za umetanje CSS stilova - specifikacija inline stilu 6 pregaziti sve ostale CSS specifikacije. Upravo tu svrhu se inline stilovi naj ces6e i koriste.

Ponovimo sintaksu Svako CSS pravilo pisemo slede6em obliku (kd se radi preglednosti obicno pise nekoliko linija):

selektor { ime-stilal : vrednos t l ; ime- stila2 : vrednostl vrednost2

Selektor definise kojem L tagu zelite dodati CSS stil i viticastoj zagradi odredujete kako 6 taj stil izgledati. Stil odredujete tako da naznacite ime stila i dodelite mu vrednost. Ako definisete vise stilova, odvajajte ih tacka zarezom. Tacka zarez ne pise se iza poslednjeg navedenog stila. Jednom stilu mozete dodeliti vise vrednosti i tada ih samo navodite bez interpunkcija.

Primer:

t { background-color : u ; border : 2 solid red }

Ovim smo kao selektor odabrali tag t i odredili da 6 svaka tabela nasem dokumentu imati plavu pozadinu i ivicu sirine 2 piksela iscrtan punom linijom crvene .

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

Ova osnovna sintaksa vrlo jednostavna - zapamtite gde id zagrade, dvotacke i tacka zarezi i ne mozete pogresiti. S vremenom 6ete nauciti i koje izraze koristiti kao atihut i vednost - postoji samo ogranicen broj mogu6nosti koje se mogu pojaviti na tim mestima. Prosirimo sad osnovnu sintaksu CSS-a !

Nizanje selektora

Jedan te isti stil mozemo primeniti na nekoliko selektora (L tag-ova) odjednom:

h l , h2 , h { color : green; text-al ign : right }

Svi naslovi sadrzani heading tag-ovima hl , h2 i h bi6e zeleni i poravnati desno. Svaki put kad isti skup stilova zelite pl'imeniti na nekoliko razlicitih tag-ova, koristite nizanje selektora. Primetite samo da kod nizanja selektore morate odvojiti zarezom.

Kontekstualni selektori

CSS vam omogu6ava da odredene stilove primenite samo kad se neki L tag nalazi odredenom kontekstu, tj. odredenoj okolini. Zamislite da zelite sadrzaj italic tagu obojen zelenom bojom, ali samo naslovu drugog reda. Tada biste napisali slede6i stil:

l 112 i { color : green } Svaki put kad browser naleti na italic tekst unutar h2 naslova, on 6 taj tekst prikazati zelenom bojom. Italic tekst ostatku sadrzaja ne6e biti zelen. Na ovaj nacin mozete usloviti prikazivanje stilova. Zapamtite samo da ovom slucaju smete koristiti zareze jer 6 to browser protumaciti kao nizanje .

Kontekstualne selektore mozete kombinovati s nizanjem:

1 hl i , h i { color : u ; font-we i ght : bold Svaki italic tekst unutar hl , i h naslova bi6e plav i podeljan.

Dosad smo CSS pravila pisali tako da smo birali L tag i odredili koje stilove 6 on poprimiti. Na taj nacin smo odredeni skup stilova uvek ogranicavali na odredene tagove. Medutim, CSS stilove mozemo koristiti i univerzalno i tada koristimo klase.

sto smo videli klasa skup CSS pravila koji se definise imenom klase. Da biste videli efekte koje ste klasi definisali, ime klase trebate pozvati L dokumentu okviru nekog L tag -a pomo6u

1 26

class atriuta.

Genericke klase

Genericka klasa nije vezana za pojedini L tag i moze se upotrebljavati na neogranicenom broju lokacija unutar HT11L dokumenta. Definisemo proizvoljnim imenom koj em prethodi tacka:

1 . plavo { color : u } Genericku klasu pozivate pomocu class atributa:

Ovo p rimer lika

lase specificne za pojedine HTML tagove

Odredenu klasu mozete vezati uz pojedini HTML tag. U tom slucaju ispred tacke navodite tag na koj i se klasa primenjivati:

1 . zeleo { color : gree } Ovim smo definisali klasu zeleno i dodelili klasu HT11L tagu . Svaki put kad zelite neki paragraf jiti zeleno, moracete unutar HT11L dokumenta pozvati klasu na sledeci nacin:

Ze lei tekst pasusa

Pseudo-klase

Pseudo-klase nam omogucavaju da definisemo izgled pojedinih HT1'1L tag-ova odredenim stanj ima. Najpoznatije i najkoristenije pseudoklase su one koje odreduju izgled linkova, tj . izgled tag-a .

Pseudo-klase se (umesto tackom) od HT11L tag-a odvajaju dvotackom.

Pseudo-klase su zasad definisane samo za i tagove:

a:link - odreduje izgled HREF neposecenog linka

a:active - odreduje izgled HREF aktivnog linka

a:visited - odreduje izgled HREF linka kojeg smo vec posetili

p:first-line - kontrolise izgled prve linije paragrafa

p:first-letter - kontrolise izgled prvog slova paragrafa

Na primer, mozemo odrediti da link ne bude podvucen i da bude crvene ali kad se nacilja misem da postane podvucen

a : lik { text-decoratio : ; color : red } a : hover { textdecoratio : uderlie ; }

Koristenje ID oznaka kao klasa

klasu mozemo koristiti ID oznake, ali podsetimo se, postoji jedna velika razlika. Dok istu klasu mozete koristiti na vise mesta i za vise L tag-ova, ID oznake ne mozemo visestruko koristiti. One se koriste da bi se odredenom elementu dodelio specifican stil koji nece imati nijedan drugi element HT1'1L dokumentu.

S intaksa jednostavna. Na istom mestu gde bismo inace definisali klasu, definisemo ID oznaku:

1 #crno { color : k } ID oznaku pozivate pomocu atriuta unutar raznih HT11L tag-ova :

Ovo aslov drugog reda r boj e .

N eki browser-i vam moZda dozvoliti da ID oznaku koristite na vise mesta, ali to definitivno zeljeno ponasanje i bolje da tu svrhu koristimo klase.

Tagovi i

Ova dva L tag-a jesu odlican nacin da bilo ko jem HT11L elementu ili delu L koda dodate SS stil. Ovi tagovi se koriste i najcesce svrhu grupisanja odredenih HTML elemenata i

1 27

definisanja CSS stilova za njih. Razlika izmed ova dva tag-a tome sto se koristi ntar 1 28 teksta za primen stila na odredena slova, dok oznacava pocetak i kraj odredene sekcije (division) dokmenta i vek m prekid ntar teksta, postavljajci sadriaj novi red.

Da bismo primenili stilove na L elemente grpirane i tagove, koristimo class atribt ntar tih tag-ova:

Tag span mo zemo primeniti < span class=" zeleno "> tekst bez umetanj a prekida .

Hajde da ovom istom primer tag zamenimo sa tag-om i da vidimo sta se dogoditi.

Generalno, text browse1- biti prikazan s prekidom linije tamo gde metnt tag.

Vrednosti atriuta stilova Attibtima stila dodeljjemo vrednosti i za to 1mamo na raspolaganj 4 mogca nacina: nmericke vrednosti, , URL i rezervisana imena.

Numericke vrednosti

Nmericke v1ednosti zadajemo m brojeva koje kombinjemo s razlicitim mernim jedinicama:

pixel () - point (pt) - pica () - (em) - () - Inches (in)

millimeters (mm) - centimeters (cm) - percentage (%)

Primer:

1 t { borde r : 2 } zadajemo m RGB vrednosti (npr. #000000) ili navodenjem imena . Imena t ili g dodeljena s samo osnovnom set od 1 6 . Koristite Color Picker. Primer:

. t { background-color : white }

daje tabeli l pozadin isto kao i

. t { background-color : #FFFFFF }

URL

URL se zadaje drgacije nego L standard.

Primer:

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

URL se poziva navodenjem rezervisane reci / i definisanjem ptanje malim zagradama. Ne smete ostaviti razmak izmed reci / i otvorene zagrade. Ptanja ko ji se definise zagradi moze biti apsolutna ( tom sl navodi se n ptanjazajedno s http ://) ili relativna (s obzirom na URL definisanog C SSa) . Kad zadajemo tn relativno, relativnost se odnosi na lokacij definisanja stila. Ako stil definisan eksternoj datoteci, ptanja biti relativna odnos na t . css datotek. Ako pak koristimo embedded ili inline CSS stil, ptanja relativna odnos na L dokment kojem definisan CSS

stil.

Rezervisana imena Cesto se vrednosti stilova zadaj imenima koja s predefinisana CSS standard. Neka od tih imena s imena koja smo vec spomenli. Rezervisana imena koja cete cesto koristiti s npr. imena za velicin teksta (lage, medim, small), imena raznih efekata (dotted, ndeline, bold) itd.

Ceste upotreba stilova Postoj i nekoliko desetaka razlicitih stilova koji kontrolis prikaz vaseg L dokmenta. Sve stilove grpisemo prema tome kakav prikaz kontrolis:

fontovi, tekst i

pozadina i stilovi bordera (borders) liste poz1cranJe

Fontovi, tekst i

Necemo ulaziti popisivanj e svih mogucih stilova koji postoje, nego cemo samo navesti sto sve ovoj kategoriji mozete kontrolisati pomocu CSS-a.

Sve na sta ste navikli L tagu nalazi se i ovde: odredivanje fonta (Arial, Verdana" . ), zatim efekti poput podeljanog ili kurzivnog teksta, velicina, " . Tekst se moze ulepsati nekim novim efektima kao sto visina reda teksta, razmak izmedu slova, reci i redova, poravnavanje i uvlacenje teksta, zatim ef ekti poput potcrtavanja, precrtavanja itd.

Primer definisanja stila teksta unutar jednog tag-a :

Pozadina

. s i rokitext { font- fami l y : Verdana , Arial , Helvetic a , sans - s er i f ; font- s i z e : x-small ; color : # 0 0 0 0 0 0 ; letter-spacing :

Umesto da izgled pozadine eksplicitno odreduj ete tagu kao do sada, primenite CSS ! Mozemo odrediti boju, pozadinsku sliku, nacin prikaza pozadine (fiksirana ili pokretna slika, ponavljanje samo - ili y-osi) cak i poziciju pozadine.

Primer klase ko definise sliku kao fiksiranu pozadinu:

. po zadina { background- image : url ( p o z . gi f ) ; background- repeat : no- repe a t ; background-attachment : fixed }

Ovako definisanu klasu jednostavno pozovite iz tag-a li nekog drugog tag-a: 1 dy clas s"po , adina " > .

Liste

Liste su CSS-u dobile nove efekte, poput mogucnosti odredivanja neke gif slicice koja se prikazivati umesto bullet-a. Primer liste koja umesto kao bullet koristi neku sliku:

1 ul { list-style-image : url ( bullet l . gi f ) } CSS model Tematika CSS modela malo slozenija cemo obraditi posebno.

Implementacija Modela

stilovi omogucavaju sasvim nove efekte. Da biste ih razumeli, potrebno znati da CSS svaki element L stranice tretira kao da oko njega opisan pravougaonik (). Pogledajmo to na slici :

1 29

r _,_ - - -;;- -- -;;g-; ::;; - - - - - , 1 1 Bard(! r 1 1- - - - - - - - - - - -- - - -1 1 11 1 Pedriing 1 1 1 ! LM LB 1 LP 1 ,,.,t 1 ' R 1 gh

1

. . 1 1 1

1

1 1

L - - - - - - - - - - - - - - -

1 11 1 - - - - - - - - - - - - - - - - - - - - - - - ct .cr

t'i!r. "11 t::d;:;u - Burdu1r

Paddi '" ;; cdgc 11 te n g

Svaki od ovih svojstava: width, border, padding i margin mogu se zasebno kontrolisati.

Padding razmak izmedu sadrzaja element i ivice (border-a).

Margin vrednost koja odreduje razmak izmedu elemenata L dokumentu. Kad nekom elementu odredimo marginu, mi povecavamo prostor koj i taj element zauzima tj dodajemo mu nevidlj ivi prostor do ivice margine (na slici taj nevidlj ivi ivica margine izrazena vecim pravouganikom od isprekidane linije) .

Ako su vrednosti margine i padding-a na nuli, element zauzima samo prostor odreden njegovom sopstvenom sirinom ( element width) . Povecavamo li njihove vrednosti, element zauzima sve vise i vise mesta.

Za svaki element moze se definisati pozadina i svi stilovi pozadine - naglasimo samo da se pozadina prostirati i na delu ko