You are on page 1of 234

1

2
ZASLUGE 7
PREDGOVOR 9
1. POGLAVLJE: VODIC KROZ KNJIGU 12
HTML: Jezik za izradu World Wide Web stranica 13
Sto cete pronaci u ovoj knjizi 16
Sto necete pronaci u ovoj knjizi 16
Koncepcija knjige 17
Kome je knjiga namijenjena 18
Sto je na disketama 18
Pogled na jedan HTML dokument 19
2. POGLAVLJE: POGLED KROZ PAUKOVU MREZU 21
World Wide Web 22
Hipertekst i hipermedija 22
Mosaic i Netscape 24
URL adrese 26
URL sintaksa 26
Upotreba i konstruiranje URL adresa 27
URL servisi 29
HTTP (HyperText Transler Protocol) 29
FTP (File Transler Protocol) 30
Gopher 31
Mailto (elektronicka posta) 32
Telnet 33
WAIS (Wide Area Inlormation Search) 34
Usenet konlerencije 34
File (datoteke s konkretnim nazivom) 35
Prospero (Prospero Directroy Service) 36
Posebni znakovi 37
Pretrazivanje Weba 37
Yahoo 38
3
Lycos 38
WebCrawler 39
EINet Galaxy 39
CUI W3 Catalog 40
3. POGLAVLJE: OSNOVE HTML-A 41
Odabir Web posluzitelja 42
Prvi HTML dokument 44
Tekst bez oznaka 44
Pocetna i zavrsna oznaka 45
Tekst s oznakama 46
Objavljivanje gotovih Web stranica 49
The Mosaic What`s New Page 50
Special Internet Connections 50
World Wide Web Virtual Library 51
The Living City 51
The InterNIC Directory ol Directories 52
The Internet Mall 52
Apollo Advertising 52
Pretplatnicka lista za objavljivanje 53
Najbolji nacin 53
4. POGLAVLJE: JEZIK HTML 55
Osnovna HTML sintaksa 56
Naslovi 59
Tekstualni stilovi 60
Logicki stilovi 63
Pisma i posebni znakovi 65
Komentari i vodoravne linije 69
Liste 72
Delinitna lista 72
Nepobrojana lista 73
Pobrojana lista 75
4
Hipertekstualne veze 78
Veza s drugim Web stranicama 78
Povezivanje dokumenata u iste Web stranice 80
Veze unutar istog dokumenta 83
Slike i multimedija 87
Rad sa slikama 87
Razmjestaj slika u dokumentu 90
Multimedijalni zapisi 95
5. POGLAVLJE: KOMUNIKACIJA S KORISNIKOM 97
Obrasci 98
Tekstualni prozori 100
Kontrolni kvadratici 102
Kruzni izbornici 105
Padajuci izbornici i izborne liste 106
Ostali elementi obrazaca 109
CGI (Common Gateaay Interface) programi 112
6. POGLAVLJE: NAPREDNE MOGUCNOSTI 116
Slikovne mape 117
Rad s bojama i uzorcima 123
Promjena pozadinske boje 123
Popunjavanje pozadine slikovnim uzorkom 124
Promjena boje teksta i hipertekstualne veze 125
Prozirne slike 126
HTML+ prosirenja 127
Tablice 130
7. POGLAVLJE: FORMIRANJE STRUKTURE DOKUMENTA 136
Konstrukcija stranice 137
Prikupljanje citatelja 138
Razvijanje zeljenog izgleda 140
5
Dizajn pocetne stranice 141
Dizajn preostalih stranica 142
Deset kratkih savjeta 143
8. POGLAVLJE: STILISTICKE MOGUCNOSTI HTML-A KROZ
PRIMJERE 145
Primjer osobnih stranica 146
Primjer Web stranica tvrtke 150
DODATAK A: POPIS SVIH HTML NAREDBI 168
DODATAK B: STO JE NA DISKETAMA 218
Instalacija 219
WebEdit 1.2 220
Map THIS! 1.10 224
LView Pro 1.C 225
DODATAK C: REFERENCE 227
HTML prirucnici 228
Iz tvrtke CERN: 228
Iz tvrtke NCSA: 228
Druga dokumentacija: 228
Pretrazivacki programi za World Wide Web 229
Pretrazivacki programi s tekstualnim gralickim suceljima: 229
Pretrazivacki programi za Microsolt Windows okruzje: 229
Pretrazivacki programi za Macintosh racunala: 230
Pretrazivacki programi za X-Windows okruzja: 230
VMS pretrazivaci: 231
Pretrazivacki programi za druge platlorme: 231
HTML editori 231
Editori za Microsolt Windows okruzje: 231
Editori za Macintosh racunala: 232
6
Editori za X-Windows okruzja: 232
Publikacije o Internetu i World Wide Webu 232
Arhive slika i zvukova 233
GIF slike i ikone: 233
Zvukovi i videozapisi: 233
Arhive pomocnih programa za izradu Web stranica 234
Druge reference vezane uz World Wide Web 234
USENET konlerencije: 234
Pretplatnicke liste: 235
7
Zasluge
Mnogi ljudi zasluzni su za objavljivanje ove knjige.
Ovom bih se prilikom zahvalio Dariu Susnju koji je procitao prvi
rukopis knjige i upozorio me na neke nedostatke koji su njegovom
zaslugom na vrijeme ispravljeni. Velika mi je cast sto je predgovor
za moju knjigu napisao upravo Dario, veliki poznavatelj racunalnih
komunikacija i iskusni Internaut. To znanje Dario redovito primjenjuje
telelonirajuci i po nekoliko sati dnevno, cesto o stvarima koje su
rijetko kada vezane uz posao.
Hvala Nevenu Prasnikaru koji nije niti svjestan da me bas on
inspirirao za pisanje ove knjige objavom jednog teksta o jeziku HTML u
MIPS-u br. 7. Neven je glavni i odgovorni urednik novine MIPS, a
zanimljivo je da mu je kao i Dariu omiljen hobi teleloniranje. Zelio
bih mu se takoder zahvaliti i na monitoru kojega mi je posudio u
presudnim trenucima pisanja knjige, a za kojega je bolje da niti ne
zna kojim se sve prevoznim sredstvima vozio.
Zahvaljujem se i Kennu Nesbittu, autoru HTML editora WebEdit koji je
samo za ovu knjigu napravio posebnu shareware inacicu svojeg sjajnog
programa. Hvala Michaelu J. Hannahu koji mi je dozvolio da dio
njegovog prirucnika "HTML Relerence Manual" koji se ditribuira u
obliku Web stranice upotrijebim kao dodatak knjizi u kojem je dan
popis svih HTML naredbi s kratkim objasnjenjima, te Leonardu H.
Loureiru koji je dozvolio da se na disketama prilozenima uz knjigu
nalazi i njegov program LView Pro.
Hvala Martini koja je sanjala Nevenov monitor one noci kada je to bilo
najpotrebnije.
8
Zelio bih se zahvaliti svima u Znaku koji su radili na realiziaciji
ove knjige, a posebice Borisu Sremicu koji je zasluzan za njezinu
tehnicku pripremu, Tomislavu Horvateku za izradu nekih slika, Goranu
Jednacku koji je sastavio instalacijski program za prilozene diskete,
Ivanki Janjic za trud ulozen u gralicku pripremu, jezicnom uredniku
Okiju, te dakako, uredniku Mladenu Majdaku koji je u pravom trenutku
osjetio potrebu za objavljivanjem ovakve knjige. Za razliku od Daria
i Nevena, Mladen se ne voli igrati s telelonima. Nasi telelonski
razgovori najcesce su vrlo kratki:
Mladen: "Dragan bok!"
Ja: "Bok..."
Mladen: "Kako napreduje knjiga?"
Ja: "Pa... tak, do-"
Mladen: "Cuj, imam guzvu, daj me nazovi sutra."
Ja: "-bro. Kaj velis?"
TU - TU - TU - TU
Ja: "Halo? Mladen?"
I na kraju, hvala Diani, te mami i tati na podrsci pruzenoj tijekom
rada na knjizi. Sada ce procitati barem ovu stranicu.
9
Predgovor
Citateljima koji drze ovu knjigu u rukama zacijelo ne treba posebno isticati
prednosti Interneta: vjerojatno ste vec koristili tu distribuiranu i
decentraliziranu svjetsku mrezu. Iako Internet jos uvijek pati od nekih
nedostataka zbog kojih je nedodirljiv ponekim korisnicima, upravo je s pojavom
World Wide Weba znatno snizen prag potrebnog znanja za koristenje Mreze.
Nestali su neljubazni naredbeni retci s kripticnim unixolikim naredbama, a
zamijenili su ih slika, pokret, zvuk i - interakcija s korisnikom.
Vise uopce nije neizvjestan odgovor na pitanje hoce li World Wide Web postati
osnovno sucelje za pristup Internetu, pronalazenje, pretrazivanje i prenosenje
podataka. Mnogi korisnici vec ga i sada poistovjecuju sa samim Internetom, iako
to, naravno, nije posve tocno. Medutim, vec i sama cinjenica da koristeci neki
pretrazivac za Web korisnik moze pristupati razlicitim uslugama, koje su sada
objedinjene u jednu, dovoljna je da bi se odgovorilo na pitanje kamo Internet
ide.
Kao sto prve televizijske postaje nisu imale mnogo sponzora i reklama sve dok
cijena prijemnika nije pala tako nisko da se on mogao masovno prodavati, tako
je i komercijalni aspekt Interneta sve donedavno bivao zanemarivan. Nakon
pojave World Wide Weba to je tema koja se upravo najvise spominje. Iako ce
mnogi korisnici napraviti svoje vlastite WWW stranice kako bi priopcili cijeloj
internautskoj publici nesto sto smatraju vaznim (a ova knjiga ce im kod toga
mnogo pomoci svojim mnogobrojnim savjetima i primjerima), naglasak treba
staviti na mogucnost koristenja ove usluge za oglasavanje, reklamu, stvaranje
elektronickih baza podataka i casopisa, te - za sada samo eksperimentalne, a
uskoro i svakodnevne - odlaske u virtualnu trgovinu. Prednost World Wide Weba i
Interneta u odnosu na ostale medije su neposrednost i prepustanje korisniku da
sam, tempom koji mu odgovara, razgledava ono sto ga zanima. On je vec danas
mnogima sasvim svakodnevni medij, dok se mnogi tek trebaju susresti s tim vrlo
sretnim brakom racunalnih komunikacija i multimedije.
Internet i Hrvatska? Vjerujem da znate kako se stvari krecu kod nas. Dok je
Dragan pisao knjigu (pa cak i u trenutku dok pisem ovaj predgovor), CARNet je
jos uvijek bio jedina organizacija koja je pruzala pristup Internetu iz
Hrvatske. Organiziran pod okriljem Vlade i Ministarstva znanosti i tehnologije,
pruzao je pristup Mrezi uglavnom akademskim korisnicima. (Svi danasnji hrvatski
Internauti "sa stazom", pa i Dragan i ja, mozemo upravo CARNetu zahvaliti na
stecenom znanju u koristenju Interneta.) Najavljenim skorim pojavljivanjem
HPT-a na trzistu kao dobavljaca Internetovih usluga otvaraju se siroke
mogucnosti i za mnogobrojne tvrtke koje zele neposrednu vezu s Internetom.
10
Vjerujem, naravno, da HPT nece biti jedini komercijalni dobavljac usluga, vec
da u ne tako dalekoj buducnosti mozemo ocekivati i nove, nezavisne. Bit ce to
mnogima prilika da se relativno jeltino i brzo predstave publici u Hrvatskoj i
- sto je jos vaznije - svijetu.
Iako World Wide Web izgleda vrlo lijepo sa strane korisnika, sa strane onoga
tko stvara te stranice on i dalje nije nista vise od mnogo redaka teksta. HTML,
jezik kojim se stvaraju Web stranice, u osnovi je zamisljen vrlo jednostavno,
ali su mnogi nezavisni proizvodaci samostalno prosirivali taj jezik dodatnim
naredbama i lunkcijama paralelno sa sluzbenim objavama novih HTML standarda.
Trenutna situacija u najmanju je ruku zbunjujuca, pa ako namjeravate izradivati
bilo kakve WWW stranice, dobar je prirucnik neophodan. Nemojte zaboraviti da
publiku mozete privuci samo atraktivnom i dobro osmisljenom WWW stranicom!
Naravno, bilo koju knjigu koja pokriva tehnologiju koja se ovako brzo mijenja,
kao sto je to slucaj s racunalnim komunikacijama, nemoguce je
napisati tako da uvijek bude aktualna; kad se pise o Internetu, to posebice
dolazi do izrazaja. No, Draganova knjiga uspijeva "zamrznuti" HTML u stanju u
kojem je danas, objasnjavajuci ono sto postoji (sluzbeno ili nesluzbeno) i ono
sto bismo mogli ocekivati u skoroj buducnosti. Prisjetimo li se price o
komercijalnim mogucnostima Mreze u Hrvatskoj, ova knjiga nije se mogla pojaviti
u boljem trenutku. Bez obzira za sto koristite Internet, World Wide Web
zasigurno vam moze pomoci da biste bolje predstavili svoje ideje ili prodali
svoj proizvod; naucite HTML i budite korak ispred ostalih!
Dario Susanj
Koautor Znakove knjige Internet@HR
11
I. Dio: Uvod
12
1. poglavlje: Vodic kroz knjigu
13
HTML: Jezik za izradu World Wide Web stranica
Hypertext Markup Language (HTML) je jezik koji uz pomoc jednostavnih kodova opisuje gralicki
izgled hipertekstualnog dokumenta, namijenjenog objavljivanju na mrezi Internet putem servisa
World Wide Web (WWW). Osim sto odreduje kako ce se tekst i slike smjestati na dokumentu,
HTML delinira i nacin na koji ce se razliciti dokumenti medusobno povezivati hipertekstualnim
vezama (linkovima). Mogucnosti takvih veza gotovo su neogranicene, pa tako uz njihovu pomoc i
pomoc ostalih kontrolnih kodova koje vam pruza HTML mozete na jednostavan nacin napraviti
pravu interaktivnu multimedijalnu aplikaciju koja ce biti neovisna o tipu racunala s kojeg se
pokrece. Buduci da se ipak radi o vrlo jednostavnim aplikacijama koje ce svoju publiku steci prije
svega ponudom kvalitetnih inlormacija i gralickim izgledom, a ne lunkcionalnoscu, najcesce ih
nazivamo HTML dokumentima, Web dokumentima ili jednostavno dokumentima.
HTML nije programski jezik, niti su HTML dokumenti pravi racunalni programi. Gotovi racunalni
programi, cesto sastavljeni od izvrsne datoteke i jos par datoteka u kojima se cuvaju potrebni
podaci, zapravo su nizovi naredbi koje se u pravilu primjenjuju na inlormacije koje unosi sam
korisnik. HTML dokument je, medutim, sam po sebi inlormacija koju krajnji korisnik moze samo
procitati, a ne i izmijeniti. Jezik HTML je skup gramatickih i sintaktickih pravila koja
pretrazivackim programima za World Wide Web (browserima) kazuje na koji nacin da
interpretiraju ucitani dokument. Pretrazivacki programi, od kojih su danas najpoznatiji Netscape
Navigator i NCSA Mosaic, dakle, sluze prikazivanju HTML dokumenata.
HTML je nadasve jednostavan jezik i svatko ga moze nauciti vrlo brzo. Zapravo je sama
jednostavnost HTML-a doprinijela nevjerojatnoj popularizaciji World Wide Weba u kratkom
vremenskom razdoblju, jer je njegovom pojavom prvi puta korisnicima Interneta omoguceno da na
lak nacin predstave podatke u obliku gralike i multimedije, a ne samo teksta. Nije vam potrebno
nikakvo tehnicko obrazovanje ili pretjerano inlormaticko predznanje kako biste naucili sastavljati
vlastite Web stranice s ovim jezikom. Jednostavne dokumente znat cete oblikovati nakon nekoliko
minuta upoznavanja sa sintaksom.
Pravila jezika HTML zasnivaju se na vec postojecem standardu za opis tekstualnih dokumenata,
poznatijem po imenu SGML (Standard Generalized Markup Language), koji se dosta koristio prije
pojave World Wide Weba. SGML se u svojim pocecima zvao GML (General Markup Language),
a nastao je krajem sezdesetih u IBM-u kako bi rijesio neke probleme oko prenosenja dokumenata
na razlicite racunalne sustave. SGML je puno opcenitiji jezik od HTML-a, jer osim sto jednim
svojim dijelom opisuje kako ce dokument izgledati, on odreduje i tip dokumenta, te popisuje
znacenje pojedinih kontrolnih naredbi za svaki od postojecih tipova. HTML je puno jednostavniji
jer je prenosiv na sve platlorme, pa kod njegove upotrebe ne morate navoditi nikakve tipove i
popise pojedinih naredbi, vec samo opisujete gralicki izgled dokumenta. GML je postao SGML
kada ga je Medunarodna Organizacija za Standarde (ISO) iz Zeneve prihvatila kao standard, i
dodijelila mu oznaku ISO 8879.1986.
SGML dokument se sastoji od tri dijela. Prvi opisuje skup koristenih znakova i, sto je jos vaznije,
delinira koji se znakovi koriste za razlikovanje obicnog teksta od samih naredbi jezika. Drugi dio
deklarira tip dokumenta i popisuje sve legalne naredbe, tj. one koje se smiju koristiti kod
14
lormatiranja dokumenta. Tek se treci dio dokumenta sastoji od teksta i drugih elemenata koji se
prikazuju dokumentom i naredbi koje gralicki opisuju, odnosno lormatiraju dokument. Ta se tri
dijela moraju lizicki nalaziti u istoj datoteci, sto na kraju djeluje vrlo nepregledno i
prekomplicirano za korisnika koji bi i sam htio izradivati prenosive dokumente. Zahvaljujuci
klijent/server principu koji u potpunosti predstavlja temelj World Wide Weba, SGML se mogao
svesti na puno jednostavniji jezik koji bi koristio samo jedan tip dokumenta i jedan skup naredbi, te
bi se sastojao samo od treceg dijela datoteke - tekstualnog sadrzaja i naredbi za lormatiranje. Tako
je nastao jezik HTML u kojem se dokumenti pohranjuju u jednu jedinu tekstualnu (ASCII)
datoteku, nakon cega su uz minimalna provjeravanja spremni za objavljivanje na Internetu.
Jednostavnije receno, HTML dokument nalazi se u obliku tekstualne datoteke na disku nekog
posluziteljskog racunala (servera), te se na zahtjev klijenta, tj. vaseg pretrazivackog programa za
World Wide Web prenosi Internetom do vaseg racunala, gdje ga isti klijent predstavlja u obliku
hipertekstualnog dokumenta i prikazuje na vasem ekranu. Ovim klijent/server principom zaobidene
su sve moguce nekompatibilnosti vaseg i posluziteljskog racunala, buduci da se radi o obicnim
tekstualnim datotekama koje ionako obraduje klijentski, pretrazivacki program. Da bi se uz to
uspjesno predstavile i hipertekstualne veze koje medusobno mogu povezati i dva dokumenta
smjestena na razlicitim krajevima svijeta, te mnogi drugi elementi koji sacinjavaju HTML
dokument, koristi se komunikacijski protokol HTTP (Hypertext Transfer Protocol).
HTTP je metoda po kojoj se dokumenti prenose s posluziteljskog racunala do vaseg pretrazivackog
programa dok radite s World Wide Web servisom. Takva racunala na kojima je postavljen HTTP
soltver, tj. podrska tom protokolu, nazivaju se HTTP posluzitelji, sto je i cesto koristen naziv za
sam soltver, bez obzira na njegovog proizvodaca. Svi se HTTP posluzitelji pridrzavaju odredenog
standarda koji im omogucava nesmetanu komunikaciju s velikim krugom klijenata. Oni imaju
mogucnost da prihvate zahtjev klijenta za odredenim podatkom, (u ovom slucaju dokumentom),
potraze ga i u obliku dokumenta razumljivog tom klijetu posalju pretrazivackom programu. Taj
razgovor izmedu klijenta i posluzitelja naziva se dogovaranje lormata, sto znaci da posluzitelj
mora znati u kojem ce lormatu poslati podatke klijentu. Najjednostavniji lormat kojega razumije
svaki klijent i posluzitelj je HTML, pa se on gotovo uvijek i koristi na World Wide Webu.
HTML dokument je, ukratko, datoteka koja sadrzi tekst dokumenta i naredbe koje taj tekst
oblikuju, a koje su takoder zapisane tekstualno. To nam, kao sto smo vec rekli, omogucava da
dokument pohranimo u obliku obicne ASCII datoteke. Osnovni skup znakova koji se upotrebljava
kod oblikovanja World Wide Web stranica je ISO 8859/1, poznatiji kao Latin-1. Radi se o 8-
bitnom skupu znakova u kojem se nalaze slova potrebna za vecinu americkih i europskih jezika.
Standard ISO 646, kojega cesto nazivamo ASCII je 7-bitni podskup standarda Latin-1. Dovoljno je
da se u svojem HTML dokumentu koristite tim skupom od 128 uobicajenih ASCII znakova, cime
on dobiva na svojoj lleksibilnosti. Upotreba 7-bitnog ASCII standarda vam, naime, omogucava da
bez imalo problema uredujete svoj dokument u bilo kojem editoru teksta, na bilo kojem tipu
racunala, te da ga saljete kroz mrezu cak i putem najjednostavnijih komunikacijskih protokola i
programa za rukovanje elektronickom postom. Ako ipak zelite koristiti neke nestadardizirane
znakove koji ne pripadaju skupu Latin-1, HTML vam omogucava da ih prikazete pomocu
kombinacije obicnih ASCII znakova. Zelite li, primjerice, upotrijebiti slovo e s naglaskom, na
odgovarajuce mjesto u dokumentu upisat cete è, sto je u jeziku HTML jedna od oznaka
za upotrebu nestandardiziranih znakova. Ostale oznake istog tipa takoder zapocinju znakom &, a
zavrsavaju tockom sa zarezom.
15
Sve HTML naredbe, tj. svi HTML kodovi koji se odnose na lormatiranje gralickog izgleda
dokumenta obuhvaceni su znakovima < i >. Oni se pojavljuju pojedinacno, poput kda <P> koji
oznacava kraj odlomka u tekstu, odnosno u parovima, gdje razlikujemo pocetni i krajnji kd. Dobar
primjer za drugi slucaj je oznaka <I>Oprez!</I>, sto znaci da ce se rijec Oprez! u
pretrazivackom programu prikazati kosim slovima. U knjizi cemo za slicne oznake koristiti
nekoliko razlicitih termina, sto ste vjerojatno vec i primijetili. Tako cemo umjesto izraza oznaka
cesto koristiti i izraze naredba, te kd. Postoje naredbe pomocu kojih se lormatira tekst, naredbe
koje odreduju hipertekstualnu vezu, naredbe koje ukljucuju zvuk i slike u dokument, te neke
slozenije naredbe putem kojih se citatelju gotove Web stranice omogucava da sam unese neke
podatke na osnovi kojih ce se prikazati neki novi dokument.
Skup svih HTML naredbi sacinjavaju, dakle, sve oznake za upotrebu nestandardiziranih znakova i
oznake namijenjene lormatiranju teksta, hipertekstualnih veza i drugih elemenata koji utjecu na
konacni gralicki izgled dokumenta. Naredbi u HTML-u ima dosta i s vremenom ih se pojavljuje
sve vise i vise. Do danas je prihvaceno nekoliko sluzbenih inacica HTML-a, koje se s obzirom na
slozenost svrstavaju u razine.
HTML razine 1, ili krace, HTML 1, je razina jezika koju podrzava svaki pretrazivacki program za
WWW. Ovdje su podrzane sve mogucnosti jezika koje su se koristile kod prvih pretrazivaca, te je
dodana mogucnost upotrebe slika.
HTML 2 pokriva sve mogucnosti razine HTML 1, uz podrsku poljima u koja korisnik unosi svoje
podatke, te nekim multimedijalnim zapisima. Gotovo svaki pretrazivacki program danas podrzava
HTML razine 2, sto i ne cudi, s obzirom da je zahvaljujuci ovoj inacici sam World Wide Web
postigao nevjerojatno naglu popularnost.
Razina 3 jezika HTML trenutno je u razvoju, no vec se zna koje ce sve pruzati mogucnosti, pa
postoje pretrazivacki programi koji tu inacicu vec sada podrzavaju. Mnogi HTML 3 nazivaju i
HTML +, sto je vjerojatno posljedica toga da sam standard jos uvijek nije prihvacen, no ocekuje se
da ce se to rijesiti do trenutka kada cete citati ovu knjigu. HTML 3 donosi mnoge zanimljive
novosti, poput podrske tablicama i matematickim jednadzbama, te ce ta inacica u ovoj knjizi biti u
potpunosti pokrivena.
Najpopularniji pretrazivacki program na mnogim racunalnim platlormama, Netscape Navigator,
osim sto podrzava razinu 3 jezika HTML, donosi i neke nove naredbe koje nisu predlozene za tu
razinu standarda, ali su zacijelo korisnicima najatraktivnije. Izmedu ostalog, Netscapeova
prosirenja HTML-a omogucavaju vam mijenjanje boje ili uzorka na pozadini dokumenta,
centriranje slika, razlicite nacine poravnavanja teksta i slika, te mnoge druge elemente estetske
prirode. Sva Netscapeova prosirenja takoder su pokrivena u ovoj knjizi, a mnogi se nadaju da ce
biti ukljucena i u samu deliniciju standarda HTML 3.
Gotovo sav rad vezan uz razvoj HTML-a, obavljen je putem World Wide Weba, i to u raznim
diskusijskim grupama u kojima su se razmatrale prednosti i mane mnogih prijedloga. HTML nema
autora, vec ga sastavljaju mnogi entuzijasti iz svih krajeva svijeta, u cemu se vjerojatno i krije
njegova jednostavnost, tocnost i snaga. Cjelovite specilikacije HTML jezika uvijek se mogu
pronaci negdje na Webu, pa cemo kroz knjigu navesti nekoliko WWW adresa korisnih za svakog
autora HTML dokumenata. Na World Wide Webu se takoder mogu pronaci i mnogi drugi tekstovi
vezani uz HTML, te mnostvo pomocnih alata koji vam olaksavaju oblikovanje Web stranica.
Najbolje od svih alata pronaci cete na disketama prilozenim uz ovu knjigu.
16
Sto cete pronaci u ovoj knjizi
Naucite HTML i oblikujte sami efektne World Wide Web stranice knjiga je koja ce vas u potpunosti
nauciti pravilima jezika HTML. Pored osnovnih mogucnosti jezika s kojima se vrlo lako mogu
kreirati jednostavniji dokumenti, ova ce vas knjiga provesti i kroz napredno koristenje HTML-a, u
sto ubrajamo izradu slikovnih mapa, obrazaca za unos podataka od strane korisnika, tablica, te
nekih drugih elemenata koji ce vasu Web stranicu uciniti ljepsom i zanimljivijom. Takoder su dane
i upute za izradu stilski doradenih HTML dokumenata, a pri kraju knjige mozete pronaci i primjere
dvaju Web stranica popracene slikama i cjelovitim HTML kodom dokumenta. Citanjem ove knjige
i pokusima s vasim omiljenim pretracivackim programom za WWW, te soltverom koji dolazi na
prilozenim disketama, necete se nauciti tek povrsnoj upotrebi jezika HTML, vec i oblikovanju
atraktivnih Web dokumenata koje cete bez srama moci objaviti na Internetu. Kroz knjigu cete naici
i na nekolicinu adresa koje su namijenjene objavljivanju vasih Web stranica, ali i na mnostvo
drugih zanimljivih FTP, e-mail i WWW adresa od kojih su neke itekako znacajne za svakog
HTML prolesionalca. U dodatku je dan i popis svih HTML naredbi, sto ce vam jednom kada
usvojite sintaksu jezika uvijek dobro doci kao relerentni prirucnik pri izradi kompleksnijih
dokumenata.
Prelistavanjem ste mozda vec primijetili da knjiga obiluje slikama i ispisima gotovog HTML kda.
Svaki skup novih HTML naredbi s kojima cete se upoznavati kroz poglavlja popracen je primjerom
kojega mozete pronaci i na jednoj od prilozenih disketa, te ga uz pomoc pretrazivackog programa
pogledati i na vlastitom ekranu.
Vec cete pri sredini knjige uociti da se uz samo malo truda i potrosenog vremena mogu na
Internetu prezentirati razne inlormacije putem Weba, i to na zanimljiv, vizualno atraktivan i, sto je
najvaznije, zabavan nacin. HTML je jezik koji vam omoucava da u potpunosti prikazete
kreativnost svojih ideja, te mastovitost dizajna koji ce biti prepoznatljiv samo za vas kao autora
World Wide Web stranica. U svemu tome ce vam pomagati i ova knjiga.
Sto necete pronaci u ovoj knjizi
Knjiga vas nece upoznati s Internetom, niti ce vam objasniti kako se dobiva pristup do Interneta.
Ukratko su, medutim, objasnjeni servisi koje vam nudi mreza svih mreza s posebnim naglaskom
na World Wide Web, buduci da se radi o servisu koji je usko vezan uz samu tematiku knjige. Ako
vas zanimaju podrobnije inlormacije o Internetu, te o nacinima kako do njega doci, potrazite knjigu
Hane Breyer, Ana-Marije Cecuk, Darije Meter i Daria Susnja, InternetZHR - Kako na Mrezu iz
Hrvatske, koja je izasla u izdanju Znaka. O svakom pojedinom servisu kojeg vam pruza Internet, te
o nacinu njegove upotrebe saznat cete u knjizi Johna Levinea i Carol Baroudi, Internet za
neznalice, takoder tiskanoj u izdanju Znaka.
Ovdje takoder necete pronaci uputstva o postavljanju Web posluzitelja, buduci da postoji nekoliko
proizvodaca soltvera koji se time bave, te da se na razlicitim tipovima racunala gotovo u pravilu
radi o drugacijem postupku. U Hrvatskoj, medutim, vecina racunala koja su povezana na Internet
17
vec posjeduju instaliran sav potreban soltver, pa vam je za primjenjivanje znanja stecenih ovom
knjigom dovoljan korisnicki racun na nekom od tih racunala i tek neznatna kolicina dobre volje.
U knjizi se ne govori o nacinu povezivanja vaseg racunala s Internetom putem modemske veze, niti
o nacinima prenosenja datoteka s vaseg diska na disk racunala na kojemu imate otvoren korisnicki
racun, sto bi vam u nekim situacijama moglo biti korisno. O tome cete pronaci detaljna uputstva u
spomenutoj knjizi InternetZHR - Kako na Mrezu iz Hrvatske, te u knjizi Olega Mastruka, Internet
za Windows 95, jos jednom Znakovom izdanju vezanom uz Internet.
Koncepcija knjige
Knjiga Naucite HTML i oblikujte sami efektne World Wide Web stranice podijeljena je u tri dijela,
od kojih svaki sadrzi dva do tri poglavlja. Pri kraju se nalaze dva dodatka, a uz knjigu se dobijaju i
dvije diskete. Sadrzaj je po poglavljima rasporeden ovako:
Poglavlje 1: ^Vodic kroz knjigu, vec vas je upoznalo sa samim pojmom HTML, te vam je dalo
do znanja sto se nalazi, a sto ne u ovoj knjizi. U prvom cete poglavlju jos saznati i kome je knjiga
namijenjena, sto se nalazi na prilozenim disketama, te kako da stupite u kontakt s autorom.
Poglavlje 2: ^Pogled kroz paukovu mrezu, ukratko ce vas upoznati s World Wide Webom,
pretrazivackim programima Mosaic i Netscape, pojmovima kakvi su hipertekst i hipermedija, URL
adresama, te o nacinu pretrazivanja Web stranica na Internetu. Poglavlje je namijenjeno
pocetnicima koji se jos nisu susreli s navedenim pojmovima, a prilicno je vazno da ih upoznaju.
Ako su vam navedeni izrazi poznati, drugo poglavlje mozete preskociti ili ga procitati kako biste
osvjezili svoja znanja potrebna za sto ucinkovitiji rad s HTML-om.
Poglavlje 3: ^Osnove HTML-a, upoznat ce vas vrlo sazeto s World Wide Web posluziteljima, te
o nacinima objavljivanja vasih Web stranica na Internetu. U ovom cemo poglavlju izraditi prvi
jednostavan HTML dokument, te cemo se upoznati s najosnovnijim naredbama jezika. Ovo je
posljednje poglavlje prvog dijela knjige.
Poglavlje 4: ^Jezik HTML, naucit ce vas svim elementima jezika potrebnima za izradu
jednostavnih i srednje slozenih dokumenata. Govorit ce se o lormatiranju teksta, razinama naslova,
odvajanju odlomaka, listama (bulletima), hipertekstualnim vezama, slanju elektronickih poruka
putem Weba, te ukljucivanju slika, zvuka i videa u vase dokumente te njihovom uklapanju u okolni
tekst.
Poglavlje 5: ^Komunikacija s korisnikom, govori o obrascima koji omogucavaju korisnicima
vase stranice da unose vlastite podatke u dokument, te o CGI (Common Gateway Interface)
pogramima pomocu kojih se ti podaci na razlicite nacine mogu obradivati.
Poglavlje 6: ^Napredne mogucnosti, upoznat ce vas s izradom tablica i slikovnih mapa koje
svaku Web stranicu cine posebno atraktivnom. Takoder ce biti rijeci o dodacima standarda HTML
+, te o dotjerivanju dokumenta bojama i slikovnim uzorcima.
Poglavlje 7: ^Formiranje strukture dokumenta, prvo je poglavlje treceg dijela knjige koji se
bavi dobrim HTML stilom. Ovdje ce biti rijeci o osmisljanju dobre strukture vasih Web stranica, te
18
o mnogim naizgled nevaznim sitnicama koje bi mogle biti presudne za dobru posjecenost vaseg
dokumenta.
Poglavlje 8: ^Stilisticke mogucnosti HTML-a kroz primjere, prikazat ce primjer izrade
osobnih Web stranica, te Web stranica hrvatske tvrtke, gdje ce biti oblikovane stranice Znaka. Na
Znakovim ce stranicama biti prezentirane neke knjige, a u njihovoj ce se izradi koristiti gotovo sve
sto se spominjalo kroz knjigu. Sve primjere iz ovog poglavlja takoder mozete pronaci na jednoj od
prilozenih disketa. Osmo poglavlje je ujedno i posljednje poglavlje u knjizi.
Dodatak A: ^Pregled HTML naredbi, abecedno popisuje sve oznake koje se koriste u jeziku
HTML, ukljucivsi u to i oznake uvedene standardom HTML 3, te sve oznake Netscapeovih
prosirenja HTML-a.
Dodatak B: ^Opis disketa, donosi uputstva o instaliranju soltvera koji se nalazi na prilozenim
disketama, te vas ukratko upoznaje s mogucnostima pojedinog instaliranog programa.
Kome je knjiga namijenjena
Cak i ako niste izravno povezani s Internetom, moci cete upotrebom ove knjige i soltvera nauciti
HTML i tehnike oblikovanja kvalitetnih Web stranica. Sve sto vam je potrebno je obican editor
teksta ili neki jednostavniji tekstni procesor, te jedan od mnogih pretrazivackih programa za World
Wide Web, od kojih je svakako ponajbolji Netscape Navigator, tvrtke Netscape Communications
Corporation. Dakako, bit ce vam puno lakse i jednostavnije oblikovati bilo kakav HTML dokument
ukoliko upotrijebite neki za to specijalizirani editor. Takvih editora teksta, koji se obicno nazivaju
HTML editori, postoji na desetke za razne tipove racunalnih sustava i uglavnom se svi distribuiraju
kao shareware programi, sto znaci da ih smijete isprobati prije no sto ih kupite. Jedan takav editor
pronaci cete i na jednoj od disketa koje dolaze uz ovu knjigu.
Knjigu, prema tome, mogu koristiti svi koji zele nauciti oblikovati atraktivne Web stranice uz
pomoc jezika HTML, bilo da se radi o citatelju koji ima pristup Internetu, ili osobi koja ga nema, a
zeli prezentirati inlormacije na Internet na neki drugi nacin. Naucite HTML i oblikujte sami efektne
World Wide Web stranice je knjiga koju takoder mogu procitati sadasnji i buduci administratori
Web stranica nekog instituta, lakulteta ili komercijalne tvrtke, sto znaci da je namijenjena
pocetnicima koji tek zele nauciti nesto o samom jeziku i naprednima koji su s HTML-om vec
upoznati, a zele upotpuniti svoje znanje ili koristiti knjigu kao podsjetnik.
Sto je na disketama
Vec ste vjerojatno primijetili da se uz knjigu dobijaju dvije diskete koje su zapakirane na
unutrasnjoj strani zadnjih korica. Tematki su te dvije diskete u potpunosti drugacije, pa ce tako
njihov sadrzaj biti primjenjiv u razlicitim situacijama pri izradi HTML dokumenta. Ukoliko odmah
zelite isprobati diskete, procitajte uputstva za instalaciju koja se nalaze u Dodatku B.
19
Na prvoj se disketi nalazi kolekcija od preko 650 malih slicica pohranjenih u lormatu GIF, koje
mozete iskoristiti za gralicko dotjerivanje svojih Web stranica. Te slicice se zbog svoje neznatne
velicine nazivaju ikonama. Ovdje cete izmedu ostalog pronaci i pedesetak gralickih uzoraka koji se
mogu iskoristiti kao pozadina Web stranice, cime se uz minimalan trud postizu vrlo elektni gralicki
rezultati. Nakon instalacije diskete, na vasem ce se tvrdom disku kreirati direktorij u kojem su
ikone rasporedene u nove poddirektorije, vec prema tome radi li se o kuglicama, linijama,
strelicama, pozadinskim uzorcima ili necemu drugome.
Poslije instalacije druge diskete, takoder cete na tvrdom disku dobiti nekoliko novih direktorija. U
jednome od njih se nalaze svi primjeri HTML dokumenata iz knjige koje odmah mozete pogledati s
pretrazivackim programom, dok se u preostalima nalazi po jedan pomocni program koji ce vam na
odreden nacin olaksati izradu Web stranica. Izmedu ostalog, tu je i jedan od najboljih shareware
HTML editora, WebEdit, koji u potpunosti podrzava standard HTML 3 i sva Netscapeova
prosirenja tog standarda. Spomenimo jos i besplatni (freeware) programcic Map This!, koji izradu
slikovnih mapa o kojima ce biti vise rijeci u petom poglavlju dovodi do krajnje jednostavnosti,
shareware program LView Pro - jedan od rijetkih crtacih alata namijenjenih Windows okruzju koji
vam omogucava pohranjivanje slika u GIF lormatu s prozirnom pozadinom, sto je od neizmjerne
vaznosti za svakog autora HTML dokumenata, te program WWWStat, koji sluzi izradi statistike
citanosti vasih Web stranica.
Pogled na jedan HTML dokument
Sada kada vas vec zasigurno zanima kako izgleda neki HTML dokument, prikazat cemo jedan
primjer koji sadrzi dio ovog poglavlja iz knjige, i to slikom i ispisom odgovarajuceg HTML kda.
Na slici 1-1 vidi se kako dokument iz primjera izgleda kada ga prikazemo pretrazivackim
programom Netscape.
S//ka 1-1: Web stranica prikazana programom Netscape
Sada slijedi ispis HTML dokumenta koji opisuje Web stranicu sa slike 1-1.
primjer.htm
<HTML>
<HEAD>
<TITLE>Pogled na jedan HTML dokument</TITLE>
</HEAD>
<BODY>
<IMG SRC="koncep.gif" ALT="Koncepcija knjige">
20
<HR>
<H3>Poglavlje 1: Vodi~ kroz knjigu,</H3>
ve} vas je upoznalo sa samim pojmom HTML, te vam je dalo do znanja
{to se nalazi, a {to ne u ovoj knjizi. U ovom }ete poglavlju jo{
saznati i kome je knjiga namijenjena, {to se nalazi na priloenim
disketama, te kako da stupite u kontakt s autorom.
<H3>Poglavlje 2: Pogled kroz paukovu mreu,</H3>
ukratko }e vas upoznati s World Wide Webom, pretraiva~kim
programima Mosaic i Netscape, pojmovima kakvi su hipertekst i
hipermedija, URL adresama, te o na~inu pretraivanja Web stranica
na Internetu. Ovo je poglavlje namijenjeno po~etnicima koji se jo{
nisu susreli s navedenim pojmovima, a prili~no je vano da ih
upoznaju. Ako su vam navedeni izrazi poznati, drugo poglavlje
moete presko}iti ili ga pro~itati kako biste osvjeili svoja
znanja potrebna za {to u~inkovitij rad s HTML-om.
<P>
<I>I tako dalje...</I>
</BODY>
</HTML>
Jos prije no sto stignete do polovice ove knjige znat cete oblikovati jednostavne Web stranice,
poput ove sa slike 1-1. Kada procitate cijelu knjigu znat cete izradivati i puno slozenije dokumente,
te ce vam se ovaj primjer ciniti iznimno jednostavnim, sto zapravo i jest. Takoder cete znati zasto
gralicki izgled upotrebljen u primjeru nije nuzno najbolji nacin da se prezentiraju inlormacije na
jednom od najpopularnijih medija danasnjice, World Wide Webu.
Ukoliko zelite stupiti u kontakt s autorom, posaljite elektronicku poruku na adresu
drpetric@student.math.hr, ili posjetite WWW stranicu http://student.ma-
th.hr/~drpetric. Sve kritike, prijedlozi i pitanja su u svako doba dobrodosli.
21
2. poglavlje: Pogled kroz paukovu mrezu
22
World Wide Web
Tijekom proteklih nekoliko godina dogadala se prava revolucija u svijetu telekomunikacijskih
mreza. Najveci dio te revolucije predstavlja World Wide Web ciji je vrtoglavi rast zapanjujuc.
Naravno, niti jedna revolucija ne dolazi ni od kuda, pa je takvo stanje i s World Wide Webom.
Razni proizvodaci hardvera i soltvera ponajvise su zasluzni za danasnju izuzetnu popularnost
Weba. Racunala koja su nekada koristili samo oni koji su se mogli nositi s mukotrpnim
programiranjem u kripticnim programskim jezicima danas su dio svakidasnjice, bilo da se govori o
poslovnoj, edukativnoj, umjetnickoj ili nekoj sasvim drugacijoj sleri. Mreza Internet, koja se
zapravo zasniva na skupu protokola koji omogucavaju sveucilistima, znanstvenim institutima i
drugim velikim organizacijama da razmjenjuju podatke, postala je najvrucjim trendom danasnjice.
World Wide Web je kao jedan od Internetskih servisa povezao ta dva cimbenika na najbolji moguci
nacin, razbijajuci pritom lizicku prepreku koja je onemogucavala ostvarivanje ideje globalnog
elektronickog naselja.
World Wide Web omogucava svakom korisniku Interneta da pristupi bilo kojem podatku
pohranjenom na mrezi bez poznavanja nacina na koji se ti podaci prenose i pohranjuju.
Hipermedijalni temelji Weba prosiruju potencijale Interneta, te obicnom covjeku koji se ne bavi
racunalima pruzaju mogucnost da na jednostavan nacin uz vrlo male troskove pribavlja i objavljuje
inlormacije, misljenja, multimedijalne zapise i druge materijale pred milijunskom publikom diljem
svijeta.
Ono sto Web cini posebno zabavnim i zanimljivim jest cinjenica da se stranice koje sadrze
inlormacije mogu pohranjivati na svim mogucim tipovima racunala smjestenima po cijeloj
zemaljskoj kugli. Same stranice mogu biti poprilicno slozeni dokumenti, ali samim time medijski
nezamislivo snazni i potentni. Veliki dio te snage proizlazi iz mogucnosti medusobnog
hipertekstualnog povezivanja dokumenata. Na svojoj Web stranici, primjerice, mozete umjesto
jednostavnog ispisivanja teksta Hrvatska je prelijepa turisticka zemlja, sto vam citatelj kojemu
ste namijenili tekst moze ali i ne mora povjerovati, ubaciti uz taj tekst i vezu na postojece Web
stranice na kojima se nalaze slike mnogih hrvatskih gradova.
Hipertekst i hipermedija
Da bi se bolje razumio World Wide Web, potrebno je sto bolje shvatiti sto je to hipertekst, odnosno
hipermedija. Najjednostavnije receno, hipertekst je tekst koji nije organiziran linearno. Kada cete,
na primjer, citati ovu knjigu, vjerojatno cete tu i tamo preskociti pokoju stranicu, a vjerojatno cete
katkada zaviriti i u dodatke. Knjiga je, medutim, vama jos uvijek prezentirana kao linearni niz
stranica. Za razliku od toga, hipertekst organizira inlormacije kao isprepletenu mrezu medusobno
povezanih tekstova. Razni citatelji mogu predstavljene tekstove pratiti razlicitim redoslijedom, vec
prema tome sto ih u odredenom trenutku najvise zanima. Hipermedija je pojam koji se odnosi na
hipertekstualne dokumente koji pored teksta sadrze i multimedijalne objekte poput slika, te zvucnih
i videozapisa. Takav nacin organizacije inlormacija vise nema previse smisla nazivati
23
dokumentom, sto asocira na papirnati medij, pa se nerijetko govori o hipertekstualnim, tj.
hipermedijalnim aplikacijama. HTML vam kroz siroku paletu raznih naredbi omogucava da u
svojim Web stranicama koristite sve tipove multimedijalnih objekata, pa je to i jedan od jacih
argumenata zbog kojih se kaze da World Wide Web pociva na hipermedijalnim temeljima.
U hipertekstualnom dokumentu izradenom jezikom HTML, podcrtani tekst koji sluzi kao pocetak
veze naziva se sidrom (anchor). Sidra se mogu implementirati i kroz druge HTML elemente, sto
vam omogucava da na zanimljiv nacin kreirate popise hipertekstualnih veza. Kao sidro
hipertekstualne veze moze vam, primjerice, posluziti i nekakva slika. Ukoliko upotrijebite sliku
manjeg lormata, na svojim cete Web stranicama postici elekt gumbiju, odnosno ikona koje se
koriste u aplikativnim programima. Ovo je posebno korisno kada zelite kreirati skup upravljackih
ikona jednolikog izgleda na citavoj seriji Web stranica. Slike se takoder mogu podijeliti na manja
podrucja od kojih ce svako predstavljati sidro za neku drugu hipertekstualnu vezu. Takve se slike
zovu mape, i o njima ce biti vise rijeci u petom poglavlju.
Ono sto je posebno primamljivo kod hiperteksta je njegova sposobnost dodavanja dodatne
dimenzije sadrzaju vaseg djela. Uz pomoc hiperteksta mozete dijelove teksta povezivati na bilo
koji drugi nacin pored uobicajenog kada radite s poglavljima, odjeljcima ili odlomcima po
zadanom redoslijedu sadrzaja. Hipertekstualno je djelo ograniceno jedino lizickim kapacitetom
slobodnog prostora predvidenog za pohranjivanje dokumenata. Za World Wide Web i Internet to
predstavlja terabajte podataka, a valja imati na umu i cinjenicu da je WWW servis koji danas raste
brze no sto ga itko moze u cijelosti pratiti. S dotjeranim gralickim pretrazivackim programima koji
su se pojavili prije dvije godine, svaki korisnik Interneta moze doslovno iskusiti senzacionalnost
plovidbe po bespucima inlormacijskog svemira.
Pojam hiperteksta i hipermedije koristio se puno prije pojave samog World Wide Weba - sjetite se
samo sustava pomoci u Windows okruzju ili na racunalima Macintosh, te raznih multimedijalnih
CD-ROM izdanja enciklopedijskog tipa. Termine koji se i danas upotrebljavaju osmislio je Ted
Nelson 1965. godine, a prvu je hipermedijalnu aplikaciju Aspen Movie Map napravila 1978.
tvrtka MIT, koristeci tehnologiju videodiskova i ekrana osjetljivih na dodir. Tvrtka Apple je godine
1987. predstavila Hypercard, autora Billa Atkinsona, sustav koji je obuhvacao vecinu elemenata
danasnje hipermedije. Razvoju hipermedije posebice je pridonijela popularizacija spomenutih CD-
ROM-ova koji su svojom niskom cijenom i atraktivnim sadrzajem ostvarili san o izradi gigantskih
multimedijalnih aplikacija. Godine 1989. su Tim Berners-Lee i Robert Cailliau predlozili svojim
kolegama u kompaniji CERN izradu hipermedijalnog sustava zasnovanog na klijent/server
principu, i tako se rodio World Wide Web.
Hipermedijalne HTML aplikacije po mnogocemu su slicne Hypercard aplikacijama s racunala
Macintosh, pa je tako moguce prebacivati jednostavnije Hypercard aplikacije u HTML i obrnuto.
Jedna razlika, medutim, od prevelikog je znacaja, a to je nemogucnost pokretanja Hypercard
aplikacija na bilo kojem drugom racunalu osim Macintosha. HTML, dakle, predstavlja neku vrst
univerzalnog jezika za izradu hipermedijalnih dokumenata, a kako je nastao tek prije par godina,
mnogi s pravom predvidaju da ce zasjeniti sve druge jezike koji sluze istoj namjeni u razlicitim
domenama inlormatike jednakom brzinom kojom je uspio izdignuti World Wide Web iznad svih
drugih servisa koje nudi Internet.
HTML aplikaciju mozemo zamisliti kao stranicu koja sadrzi lormatirani tekst i slike. HTML
dokument moze biti dugacak i nekoliko stranica, slicno poglavlju u nekoj knjizi, no pretrazivacki
ga program, medutim, prikazuje kao jednu dugacku stranicu pazeci pritom na prelamanje teksta u
24
linije i smjestaj slika. Hipertekstualne veze se u takvom dokumentu aktiviraju klikom misa na
posebno oznacen tekst (obicno podcrtan i prikazan u drugacijoj boji od okolnog teksta) ili sliku.
Veza moze biti na drugo mjesto na istoj stranici, na neku sasvim drugu Web stranicu, ili na neki
drugi objekt na lokalnoj mrezi ili opcenito Internetu. Buduci da HTML moze povezivati dokumente
pohranjene na medusobno udaljenim Web posluziteljima, HTML aplikacije su vrlo prakticne za
organiziranje i prezentaciju statickih inlormacija mreznoj publici.
Kada se kaze da je HTML dokument negdje na Webu, to znaci da je svaki element koji ga
sacinjava (tekstovi, slike i drugo) pohranjen u nekom direktoriju koji je dostupan Web posluzitelju.
To, medutim, ne znaci da na nekoj postojecoj Web stranici mora postojati veza na vasu Web
stranicu, kako bi i ona predstavljala dio Weba. WWW pridruzuje jedinstvenu adresu koja se naziva
URL (Unilorm Resource Locator) svakom objektu kojega prepoznaje. Postoje URL adrese za
objekte koji nisu HTML dokumenti, poput raznih Gopher sustava, WAIS baza podataka, FTP
arhiva, Usenet konlerencija i racunala koja dozvoljavaju pristup Telnetom, o cemu ce biti vise
rijeci kasnije u ovom poglavlju. Kako vecina pretrazivackih programa pruza mogucnost izravnog
upisivanja URL adrese od strane korisnika, gotovo sve sto se nalazi na Internetu nalazi se i na
World Wide Webu.
Mosaic i Netscape
U zadnje se vrijeme puno pise o Internetu, World Wide Webu, Mosaicu i Netscapeu. Po mnogima
je Mosaic najvece soltversko otkrice devedesetih koje je na najbolji moguci nacin usavrsila
aplikacija Netscape. Danas pri upotrebi World Wide Weba pomocu Netscapea svi imaju
jednostavno i za upotrebu lako sucelje za pristup svim kompjutoriziranim inlormacijama na svijetu.
Citavo more podataka nalazi se pod dlanovima svakog vlasnika racunala.
Mosaic je bio prvi pretrazivacki program za World Wide Web s gralickim suceljem, a najnovije
inacice proizvode se uvijek za Macintosh, Windows i UNIX X-Windows sustave, pa se stoga o
njemu i najvise pisalo u strucnim novinskim izdanjima. Najbolji pretrazivacki program za sve tri
navedene platlorme je zbog svojih raznih prosirenja i brzine ipak Netscape, dok se za ostale
operativne sustave koriste neki drugi programi. Pod sustavom OS/2, primjerice, koristi se program
Web Explorer tvrtke IBM, a pod sustavom NeXTStep besplatni program A, i gotovo da nema
racunala na kojem ne postoji neki program s kojim mozete istrazivati Web. Popis svih postojecih
pretrazivackih programa za WWW mozete pronaci na adresi:
http://info.cern.ch/hypertext/WWW/Clients.html.
Tvrtka NCSA koja je napravila program Mosaic otvorena je prema drugim proizvodacima, pa je
zapocela s prodavanjem licence na ime programa i tehnologiju koja se u njemu koristi, te se
ocekuje da ce se s vremenom pojaviti dosta komercijalnih pretrazivackih programa koji ce
posjedovati mnostvo dodatnih opcija. Jedan takav program vec postoji, a proizvela ga je tvrtka
Quarterdeck koja je takoder upotrijebila naziv Mosaic.
S//ka 2-1: NCSA Mosaic - glavni `krivac' za danasnju popularnost Weba
25
Osim pretrazivackih programa s gralickim suceljem, postoje i tekstualni pretrazivacki programi,
koji se mogu koristiti kod upotrebe World Wide Weba putem Telneta ili BBS-ova. Najpopularniji
takav program je Lynx, sveucilista u Kansasu, kod kojega se umjesto misa koriste kursorske tipke
kako bi se aktivirale hipertekstualne veze. Vazna razlika izmedu gralickih i tekstualnih
pretrazivackih programa jest ta da se gralicki programi pokrecu s vaseg osobnog racunala gdje
koriste sve mogucnosti vaseg operativnog sustava, dok se tekstualni pokrecu s nekog drugog
racunala s kojim je vase racunalo povezano kao udaljeni terminal.
S//ka 2-2: Netscape Navigator - najbolji pretrazivacki program danasnjice
Kako biste mogli pokrenuti Netscape ili Mosaic, na vasem racunalu mora biti postavljen mrezni
soltver za rad s Internetom kojega obicno sacinjava skup protokola nazvan TCP/IP (Transler
Control Protocol/Internet Protocol). Ako vase racunalo nije izravno povezano s Internetom, onda
morate posjedovati i komunikacijski soltver s kojim cete uz pomoc modema ostvariti Internetsku
vezu. Uz takav se soltver najcesce dobiva i pokretacki program (driver) za protokole SLIP (Serial
Line Interlace Protocol) ili PPP (Point to Point Protocol). Taj pokretacki program omogucava
Netscapeu i drugim klijentskim aplikacijama za Internet, poput onih za rad s Telnetom ili
Gopherom, da se izvrsavaju istodobno, svaka u svojem zasebnom prozoru. TCP/IP uzima
inlormacije od klijentske aplikacije te ih oblikuje u pakete s adresom na Internetu. Gotovi paketi se
potom proslijeduju komunikacijskom programu koji ih modemom salje na Internet putem
telelonskih linija. Vise o komunikacijskim protokolima i uspostavljanju modemske veze mozete
procitati u knjizi Caroline M. Halliday, Sluzbeni Hayesov prirucnik za modemske komunikacije, u
izdanju Znaka.
Mosaic i Netscape mogu pristupiti dokumentima lokalno, sto znaci da mozete stvarati HTML
aplikaciju na svojem osobnom racunalu ili na nekom racunalu spojenom u lokalnoj mrezi, a da ta
mreza uopce nije spojena s Internetom. Da bi vase stranice, medutim, bile dio World Wide Weba,
moraju biti dostupne Web posluzitelju koji mora biti izravno spojen na Internet. Soltver za
postavljanje Web posluzitelja postoji za najrazlicitije tipove racunalnih sustava. Proizvodi tvrtki
CERN i NCSA su besplatni, pa ih mozete vrlo jednostavno nabaviti i instalirati. Ipak, najbolje je da
pronadete racunalo na kojemu je vec instaliran Web posluzitelj, kakvih u Hrvatskoj ima mnogo.
Ukoliko na nekom racunalu posjedujete korisnicki racun za pristup Internetu, raspitajte se kod
administratora sustava je li postavljen sav potreban soltver za objavljivanje vlastitih WWW
stranica i smijete li ga koristiti.
Internet je osnovan 1960. godine kao projekt americkog Saveznog instituta za obranu kojemu je
namjera bila povezati u mrezu racunala svih sveucilista i vojno-istrazivackih instituta. Godine
1980. je vojska osnovala vlastitu mrezu, a Internet je zazivio vise nego ikada, premda ga nitko ne
posjeduje niti odrzava. Internet je najveca lunkcionalna anarhija na svijetu, a posljednjih je
nekoliko godina njegov rast bio eksplozivan. Svakodnevno se na Mrezu spajaju tisuce novih
racunala kojima pristupa jos veci broj potencijalnih korisnika. Hipertekst se pokazao kao idealan
nacin organizacije nevjerojatno velike kolicine podataka na Internetu, pa se World Wide Web
pojavio bas u pravo vrijeme.
26
S//ka 2-3: Lynx - pretrazivacki program s tekstualnim suceljem
Mnogi World Wide Web poistovjecuju s Internetom, sto je u neku ruku i ispravno. Internet je
lizicki puno veci od Weba, pa tako danas, primjerice, jos uvijek postoji vise Gopher posluzitelja od
Web posluzitelja. Medutim, svaki se objekt na Internetu moze adresirati pomocu hipertekstualne
veze, odnosno URL adrese unutar Weba, sto znaci da je Web zapravo Internet shvacen na drugi
nacin, neovisan o lizickom hardveru s kojega se njime koristite.
URL adrese
URL (Unilorm Resource Locator) adrese su, kao sto je vec navedeno, jedinstvene oznake kojima
se odreduje lokacija odredenog objekta dostupnog putem Interneta. Te adrese omogucavaju ljudima
i soltverskim aplikacijama da pristupe raznim oblicima inlormacija putem razlicitih protokola na
Internetu. Najcesce cete se susretati s URL adresama kod upotrebe svojeg pretrazivackog programa
za World Wide Web, buduci da se one koriste kod povezivanja raznih WWW stranica u
hipertekstualni slijed. Tekst koji u pretrazivackom programu upisujete u okvir za dijalog
location, i koji gotovo uvijek zapocinje slovima http: primjer je URL adrese. Datoteke koje su
dostupne putem drugih protokola koji nisu HTTP, kakvi su FTP ili Gopher takoder se mogu
oznaciti URL adresama. Cak se i postupak telneta na udaljeno racunalo na Internetu i necija e-mail
adresa mogu adresirati kao URL, jer se i ovdje radi o nekoj vrsti objekta koji sacinjava Internet.
URL se moze usporediti s vasom cijelom postanskom adresom: on sadrzi sve potrebne inlormacije
koje netko mora navesti na koverti koju vam namjerava poslati postom. Medutim, URL adrese su i
puno vise od toga jer se mogu odnositi na objekte razlicitog tipa. Puno vjernija analogija bio bi
nekakav sustav koji bi na jednolik nacin odredivao vasu postansku adresu, broj telelona ili mjesto
na kojem upravo citate ovu knjigu. Ukratko, URL je vrlo tocan i jednostavan nacin za usmjeravanje
ljudi i aplikacija na neku datoteku, Web stranicu, e-mail adresu ili bilo sto drugo dostupno putem
Internetskih servisa. Poznavanje upotrebe i konstruiranja URL adresa neophodno je za izradu imalo
slozenijih HTML dokumenata i opcenito za sto ucinkovitije istrazivanje cijelog Interneta.
URL sintaksa
URL adrese imaju tocno odredenu sintaksu koja odgovara ovom lormatu:
<servis>:<informacije_ovisne_o_servisu>
Primjeri razlicitih servisa su http, gopher, ltp ili news. Svi su servisi pojedinacno
objasnjeni kasnije u ovom poglavlju. Navodenje servisa govori aplikaciji koja koristi URL ili nama
27
kakvom tipu podataka pokusavamo pristupiti i kojim nacinom se do njega moze doci. Inlormacije
ovisne o servisu u pravilu se navode drugacije za svaki pojedini servis, te su kasnije detaljno
objasnjene. Ipak, vecina servisa koristi dva razlicita tipa inlormacija: racunalo na Internetu na
kojemu se nalazi zeljena datoteka (ili neki drugi objekt), te punu putanju kroz direktorije koja
dovodi do te datoteke. Kod takvih servisa se najcesce ispred adrese racunala upisuju dvije kose crte
(//), a sama se adresa od putanje datoteke razdvaja jednom kosom crtom (/). FTP, HTTP i Gopher
URL adrese opcenito se pojavljuju u ovom obliku:
servis://adresa.ra~unala/puna_putanja_datoteke
Za konkretan cemo se primjer posluziti URL adresom Web stranica na kojima mozete pronaci
inlormacije o pretrazivackom programu Netscape:
http://www.mcom.com/info/index.html
Servis naveden u ovoj adresi je http, sto je zapravo oznaka za protokol koji se koristi za
prenosenje Web stranica, ali se ovdje vjerojatno navodi umjesto servisa zato jer je World Wide
Web jedini servis koji upotrebljava taj protokol. Adresa ciljanog racunala na Internetu je
www.mcom.com, a puna putanja do datoteke koja sadrzi zeljenu Web stranicu je
/info/index.html. Kada cete raditi s World Wide Webom, vecina ce URL adresa nalikovati
adresi navedenoj u ovom primjeru.
Primijetit cete da ce pri upotrebi URL adresa za FTP, HTTP i Gopher puna putanja datoteke
ponekad zavrsavati kosom crtom. To znaci da se ona ne odnosi na neku odredenu datoteku, vec na
neki direktorij smjesten na navedenom racunalu. U tom slucaju ce posluzitelj vratiti osnovni
indeks tog direktorija. Osnovni indeks moze biti popis datoteka dostupnih u tom direktoriju, ili
neka odredena datoteka koju posluzitelj automatski trazi u zadanom direktoriju. Kod HTTP
posluzitelja ta se datoteka najcesce naziva index.html, no ponekad se koriste i nazivi
homepage.html, home.html, welcome.html ili default.html.
Upotreba i konstruiranje URL adresa
Kada naidete na neku URL adresu, morate znati sto s njom valja uciniti. Neke vam aplikacije
dozvoljavaju da jednostavno dva put kliknete na URL i ako je vase racunalo ispravno
konligurirano, pokrenut ce se odgovarajuci klijent-program koji ce pribaviti objekt oznacen
adresom. Katkada cete morati rucno prepisati URL adresu u aplikaciju s kojom namjeravate doci
do zeljene inlormacije. Vecina pretrazivackih programa za WWW, primjerice, posjeduje okvir za
dijalog location ili go to u kojega mozete upisati URL adresu, pritisnuti tipku Enter i pricekati
da objekt stigne do vaseg racunala.
28
Vas program u ulozi klijenta, medutim, mozda ne podrzava odredeni servis naveden u URL adresi,
pa cete sami morati otkriti o cemu se radi. U tom slucaju najprije pogledajte koji je servis naveden i
pogledajte sto je o tom servisu napisano kasnije u ovom poglavlju. Ako, na primjer, naidete na
URL adresu koja zapocinje s mailto:, saznat cete da se radi o necijoj e-mail adresi. Zatim morate
otkriti koju cete aplikaciju iskoristiti za upotrebu ove URL adrese. U nasem se primjeru mozete
posluziti programom za razmjenu poste elm. Sada morate saznati koje podatke vam daje dio URL
adrese koji smo do sada zvali inlormacijom ovisnom o servisu. U ovom se slucaju radi o e-mail
adresi, pa uzmimo, primjerice, zamisljenu adresu pero@public.srce.hr. Na kraju jos morate
saznati kako da ovaj podatak proslijedite svom klijentu, odnosno programu elm. Ucinit cete to tako
da odabirom naredbenog slova m zapocnete s kreiranjem nove e-mail poruke, nakon cega ce vas
elm upitati e-mail adresu, gdje morate upisati pero@public.srce.hr.
Konstruiranje URL adresa zna biti nesto slozenije. Cesto cete nailaziti na podatak o tome gdje se
nalazi neka zanimljiva datoteka ili dokument, te putem kojeg servisa je mozete nabaviti, no necete
uvijek dobivati i gotovu URL adresu. U tom cete slucaju morati sami konstruirati URL adresu,
ukoliko radite s programom koji koristi do sada opisivani lormat. Zapravo se radi o obrnutom
postupku od onoga koristenog u posljednjem primjeru u kojemu smo samostalno otkrivali sto
konkretna URL adresa predstavlja.
Uzmimo, na primjer, da nekome zelite kazati kako da nabavi pretrazivacki program Netscape za
rad s racunalom Macintosh, te da ste ga vi nedavno pronasli na FTP posluzitelju cija je adresa
ftp.mcom.com, u direktoriju /netscape/mac. Ime datoteke neka je netscape.sea.hqx.
Ako pogledate opis koji stoji uz servis FTP kasnije u ovom poglavlju, znat cete da ispravno
konstruirana URL adresa za ovu datoteku izgleda ovako:
ftp://ftp.mcom.com/netscape/mac/netscape.sea.hqx
Ovdje se, u stvari, radi o jednostavnijem obliku zapisivanja URL adrese koji je sasvim dovoljan za
razumijevanje i potpuno odreduje nacin na koji se dolazi do podatka. Postoji, medutim, nesto
preciznija sintaksa koja URL adrese razlikuje od URI adresa. (Skup svih URL adresa je dio skupa
svih URI, tj. Uniform Resource Identifier adresa. URI je naziv za bilo koji tip oznake koji
predstavlja adresu nekog objekta na Internetu, iz cega i slijedi cinjenica da je svaka URL adresa
ujedno i URI adresa.) Prema toj sintaksi se ispred same adrese navodi preliks <URL:, te se na
kraju dodaje suliks >. Prethodni se primjer prema tome moze preciznije zapisati kao:
<URL:ftp://ftp.mcom.com/netscape.mac/netscape.sea.hqx>
Nekada ce vas pokusaj da iskoristite neku URL adresu zavrsiti neuspjehom. Ako ciljano racunalo
odbija uspostaviti komunikacijsku vezu, moguce je da je dio njegove lokalne mreze prezaposlen,
sto se cesto dogada s popularnim FTP arhivama u nekim odredenim vremenskim intervalima
tijekom dana. Ako vas pretrazivacki program za WWW ili neki drugi klijent ne moze pronaci neku
datoteku, provjerite jeste li tocno upisali URL adresu. Pokusajte iz adrese izostaviti ime datoteke
29
kako biste se obratili direktoriju koji ju navodno sadrzi. Mozda vam je netko neispravno naveo ime
datoteke kada ga je prepisivao, pa cete vjerojatno naici na tocno ime cim se prikaze ispis
direktorija. Ne uspijete li niti na taj nacin doci do podatka, mozda ga je netko premjestio u neki
drugi direktorij, pa pokusajte s uzastopnim izostavljanjem jednog po jednog poddirektrija iz URL
adrese, sve dok ne dodete do korijenskog direktrorija, odnosno do same adrese racunala. Uz malo
srece cete pronaci zeljenu datoteku bez da prethodno upitate osobu koja vas je na nju uputila da
vam jos jednom procita ispravnu URL adresu.
URL servisi
U ovom se odjeljku nalazi popis svih servisa kojima se mozete obratiti putem URL adresa zajedno
s odgovarajucom sintaksom. Opcenito cete najcesce nailaziti na HTTP, FTP, Gopher, News i
Mailto servise, no ovdje smo opisali i preostale radi potpunosti.
HTTP (HyperText Transfer Protocol)
Vec smo napomenuli da je HTTP protokol napravljen za prenosenje podataka na World Wide
Webu, pa cete se s njime najvise i susretati. Sintaksa koja se koristi kod HTTP URL adresa je:
http://<host>:<port>/<putanja>?<pretraivanje>
Host je Internetska adresa WWW posluzitelja, iza cega slijedi broj porta putem kojega se izvrsava
spajanje. U vecini se slucajeva port moze izostaviti (zajedno s dvotockom koja mu prethodi),
buduci da je osnovna vrijednost koja se za njega koristi standardizirana i nosi oznaku 80. Putanja
govori WWW posluzitelju kojoj datoteci zelite pristupiti, te ako ju izostavite, smatrat ce se da zelite
pogledati uvodnu stranicu (home page) tog posluzitelja. Posljednji dio adrese koji je oznacen kao
pretrazivanje moze se koristiti za prosljedivanje odredenih podataka posluzitelju, najcesce putem
izvrsnih CGI skripti, no rijetko kada cete na njega naici. U pravilu se taj dio URL adrese izostavlja
zajedno s upitnikom koji ga razdvaja od putanje trazenog dokumenta.
S//ka 2-4: Dokument ucitan pomocu HTTP URL adrese
Specijalna oznaka na koju cete puno cesce nailaziti prilikom istrazivanja Weba kod ovog tipa URL
adrese je #, sto se moze koristiti kao pokazivac na imenovano sidro smjesteno na odredeno mjesto
u dokumentu. Autor HTML dokumenta moze omoguciti pretrazivackim programima da prikazu
dokument od nekog dijela na kojem je kreirano takvo sidro. Tada ce se URL adresa koja sadrzi
znak # i ime sidra odnositi na taj dio dokumenta. Ovaj nacin upotrebe HTTP protokola koristan je
30
kod izrade vecih HTML dokumenata u kojima se hipertekstualnim vezama moze skakati s
jednog mjesta na drugo, ne ucitavajuci pritom novi dokument.
Primjeri HTTP URL adresa bili bi:
http://www.hrt.com.hr/
http://tjev.tel.etf.hr/
http://bookweb.cwis.uci.edu:8042/Anime/AMG/intro.html
FTP (File Transfer Protocol)
FTP je protokol koji se koristi za prenosenje datoteka putem Interneta. Premda postoji dosta
prednosti za koristenje HTTP protokola umjesto FTP protokola, mnogi sustavi ne pruzaju potpunu
podrsku HTTP-u, a i klijentski programi jos uvijek nisu toliko razvijeni poput onih za FTP. Zbog
toga se najvise datoteka na Internetu prenosi putem FTP-a. Najvrjednija stvar kod FTP URL adresa
je nacin na koji ih mnogi pretrazivacki programi interpretiraju. Kada, naime, takvom URL adresom
navedete neki direktorij s kakvog udaljenog racunala u svijetu, pretrazivacki ce programi ispisati
njegov sadrzaj na ekran nakon cega cete moci prelaziti u nove direktorije ili uzimati datoteke
jednim klikom misa na odredeni element ucitanog direktorija. Ako umjesto direktorija navedete
konkretnu datoteku, pretrazivacki program ce uspostaviti vezu s posluziteljem i zapocet ce s
prenosenjm datoteke na vase racunalo. Rad s FTP-om je, prema tome, puno jednostavniji putem
World Wide Weba, nego putem nekog FTP klijenta.
S//ka 2-5: Upotreba servisa FTP putem Weba
Na Mrezi su vam dostupni milijuni datoteka koje se mogu preuzeti FTP-om. Na najvecem broju
racunala umreznih na Internet uopce vam ne treba korisnicki racun kako biste dosli do tih datoteka.
To se ostvaruje zahvaljujuci postupku koji se naziva anonimni FTP, a koji vam dozvoljava da se na
neko racunalo prijavite kao korisnik s imenom anonymous, te svojom e-mail adresom kao
lozinkom. Iako se, medutim, vecina poslova vezanih uz FTP obavlja anonimno, isti se protokol
moze koristiti i za pristup datotekama na udaljenom racunalu koje ne dozvoljava anonimni ulaz, a
na kojem vi posjedujete korisnicki racun. Tada se, dakako, prijavljujete pod svojim korisnickim
imenom i s lozinkom koju inace koristite na tom sustavu. Puno vise o FTP protokolu mozete
procitati u Znakovim knjigama Internet za neznalice, autora Johna Levinea i Carol Baroudi, te 10
minuta do uspjeha - Vodic kroz Internet, autora Petera Kenta.
Sintaksa koja se koristi za FTP URL adrese je:
ftp://<login>:<password>@<host>:<port>/<putanja>;type=<kod_tipa>
31
Ako uspostavljate vezu s racunalom koje dozvoljava anonimni FTP pristup, mozete izostaviti dio
adrese koji je oznacen s login i password, te dvotocku i znak Z izmedu kojih je smjestena rijec
password. Host je Internetska adresa nekog FTP posluzitelja, dok se port kao i u prethodnom
slucaju moze izostaviti. Potom se upisuje puna putanja datoteke koju namjeravate prebaciti na
svoje racunalo, odnosno direktorija ciji vas sadrzaj zanima. Dio adrese koji slijedi na kraju, a
oznacen je s type=<kod_tipa> odnosi se na metodu kojom ce se prenositi datoteke. Ta metoda
moze biti ascii ili binary, no zasad jos ne postoji znatniji broj klijentskih programa koji podrzavaju
ovakvu sintaksu. Neki programi cak taj dio adrese shvacaju kao dio imena datoteke, pa je najbolje
da izbjegnete bilo kakvo navodenje metode kod URL adresa namijenjenih servisu FTP.
Donosimo i nekoliko primjera FTP URL adresa:
ftp://avalon.irb.hr/pub/win3
ftp://ftp.zel.etf.hr/
ftp://drpetric:xxxxxxxx@student.math.hr/ftp/gdraw30.zip
Gopher
Ako ste se vec susretali sa servisom Gopher, znat cete da se radi o hijerarhijski organiziranom
sustavu izbornika koji sluzi pretrazivanju raznih datotecnih i tekstualnih arhiva, sto u neku ruku
podsjeca na jace razgranato stablo direktorija nekog diska. Element Gopher izbornika moze biti
datoteka ili novi izbornik, pa se stoga odabirom jednog elementa mozete spustiti za jednu razinu
nize u stablu, odnosno prebaciti datoteka na vlastito racunalo.
Sintaksa koja se koristi kod servisa Gopher slicna je prethodnim dvjema:
gopher://<host>:<port>/<gopher_putanja>
Host je i u ovom slucaju adresa racunala kojemu zelimo pristupiti na Internetu. Takoder se i port
moze zajedno s dvotockom koja mu prethodi ispustiti iz adrese, osim ako nije upotrebljavana neka
nestandardizirana vrijednost za pristup racunalu. Gopher putanja odreduje tip objekta kojem se
pristupa (izbornik, tekstualna datoteke i drugo), te eventualnu putanju kroz direktorije u kojima su
smjesteni podaci. Najcesce se medutim taj posljednji dio Gopher URL adrese ispusta jer se
navodenjem samo adrese posluzitelja dobiva korijensko stablo izbornika nakon cega se puno lakse
moze doci do zeljene inlormacije. Zbog toga na ovom mjestu necemo detaljnije ulaziti u
objasnjavanje potpune sintakse za ovaj tip adrese.
32
S//ka 2-6: Upotreba Gophera na Webu krajnje je jednostavna
Primjeri Gopher adresa koje mozete i sami pogledati su:
gopher://rujan.srce.hr/
gopher://press-gopher.uchicago.edu:70/
gopher://wiretap.spies.com/
Mailto (elektronicka posta)
Mailto URL adrese razlikuju se od prethodna tri tipa i ne oznacavaju datoteku ili direktorij
dostupan putem Interneta, vec e-mail adresu nekog korisnika kojemu ste i inace mogli slati
elektronicku postu.
Sintaksa koja se koristi za e-mail URL adrese prilicno je jednostavna:
mailto:<login@host>
Iza rijeci mailto i dvotocke navodi se cjelovita e-mail adresa osobe kojoj zelite poslati
elektronicku poruku. Neki pretrazivacki programi jos uvijek ne podrzavaju Mailto URL adrese,
buduci da je slanje e-mail poruka kroz World Wide Web ipak nesto nespretnije no sto je slucaj s
pravim postanskim programima. Mosaic i Netscape ih, medutim, podrzavaju. Netscape sadrzi
vlastiti podprogramcic za slanje poste, dok ce Mosaic pokrenuti odvojeni postanski program
ukoliko navedete neku Mailto URL adresu. Imajte na umu da iz Weba mozete slati, no ne i primati
elektronicku postu.
S//ka 2-7: Prozor za elektronicku postu u Netscapeu
Nekoliko primjera Mailto URL adresa su:
mailto:drpetric@student.math.hr
mailto:president@whitehouse.gov
mailto:info@cdrom.com
33
Telnet
Prenosenje datoteka FTP protokolom u velikoj je mjeri doprinijelo popularizaciji Interneta kao
globalne mreze. Jos jedan servis zbog kojega su se se mnogi zainteresirali za rad na Mrezi je Telnet
koji svakom korisniku daje mogucnost prijavljivanja na druga racunala iz cijelog svijeta. Ukoliko
posjedujete korisnicki racun na nekom racunalu koje je lizicki jako udaljeno od vas, mozda cak i na
nekom drugom kontinentu, Telnetom cete moci raditi s tim racunalom na isti nacin kao da se to
racunalo nalazi na vasem radnom stolu. Tek malen broj racunala na Internetu ne podrzava pristup
Internetu, no s njima cete se ionako rjede susretati.
Sintaksa za koristenje Telnet URL adrese je:
telnet://<login>:<password>@<host>:<port>/
Korisnicko ime i lozinka se mogu ispustiti, a tada se ispusta i znak Z koji je smjesten izmedu
lozinke i adrese racunala nad kojim se vrsi telnet. Takoder se moze izostaviti i port. U tom slucaju
se za njegovu vrijednost uzima standardizirana brojka 23.
S//ka 2-8: Upotreba Telneta kroz program EWAN
Telnetirati se mozete i na racunala koja zahtijevaju TN3270 emulaciju terminala, koja se koristi
kod starijih IBM-ovih racunalnih sustava. S ovom vrstom URL adrese se najvjerojatnije necete
nikada susresti, a sintaksa koja se koristi je vrlo slicna obicnoj sintaksi za Telnet URL adrese:
tn3270://<login>:<password>@<host>:<port>/
Kod upotrebe Telnet URL adresa vas ce pretrazivacki program pokusati pokrenuti odvojeni
program u ulozi Telnet klijenta, sto znaci da cete ovaj tip adrese moci koristiti samo ako ste
prethodno instalirali neki program tog tipa na svoje racunalo, kakav je, primjerice, NCSA Telnet.
Mosaic, Netscape, MacWeb i drugi pretrazivaci, dakle, nemaju ugradenu opciju s kojom biste
mogli ostvariti telnetsku vezu. Vise o programima za Telnet procitajte u Znakovoj knjizi
InternetZHR - Kako na Mrezu iz Hrvatske, autora Darije Meter, Hane Breyer, Ana-Marije Cecuk i
Daria Susnja.
Slijedi nekoliko primjera Telnet URL adresa:
telnet://drpetric:xxxxxxxx@student.math.hr/
telnet://jagor.srce.hr/
telnet://media.mit.edu/
34
WAIS (Wide Area Information Search)
WAIS je oblik baze podataka na Internetu u kojoj se pojmovi pretrazuju po nekom dijelu datoteke
ili njenom sadrzaju. Ovaj je servis poznat po vrlo neugodnom korisnickom sucelju, pa ga je puno
lakse koristiti putem WWW-a. Valja jos napomenuti da je WAIS jedan od najrjede koristenih
Internetskih servisa, pa cete se s ovim tipom URL adrese susretati vrlo rijetko.
Sintaksa WAIS URL adrese obicno se zapisuje u tri razlicita oblika:
wais://<host>:<port>/<baza_podataka>
wais://<host>:<port>/<baza_podataka>?<pretraivanje>
wais://<host>:<port>/<baza_podataka>/<tip>/<putanja>
Host i port predstavljaju adresu racunala i pristupni port kao sto je to bio slucaj i kod prethodnih
servisa. Port se, dakako, i u ovom slucaju moze izostaviti. Prvi oblik adrese koristi se za neku
odredenu WAIS bazu podataka, a drugi za pretrazivanje neke baze podataka po zadanom pojmu.
Posljednji oblik se koristi kod upotrebe posebnog tipa dokumenta smjestenog na zadanoj putanji i
gotovo se nikada ne koristi.
S//ka 2-9: WAIS na WWW-u
Evo i nekoliko primjera za WAIS URL adrese:
wais://quake.think.com/
wais://info.funet.fi/
wais://sunsite.umc.edu/
Usenet konferencije
Pristup Usenet konlerencijama se putem World Wide Weba moze ostvariti na dva nacina, ovisno o
tome je li na racunalu s kojega ste pokrenuli pokretacki program instaliran Usenet posluzitelj ili
nije. Ukoliko je vase racunalo ujedno i posluzitelj za Usenet konlerencije, ili ako svom
pretrazivackom programu mozete navesti adresu nekog drugog racunala na kojem je instaliran
Usenet posluzitelj, moci cete koristiti sljedeca dva oblika URL adrese:
35
news:<ime_konferencije>
news:<broj_poruke>
Ako u adresi navedete ime konlerencije, dobit cete popis svih poruka koje su u njoj sadrzane, te
cete klikom misa moci odabrati zeljenu poruku. Navedete li broj poruke koji se moze pronaci u
zaglavlju svake poruke pod oznakom Message-ID, dobit cete ispis samo te poruke, sto je prilicno
besmisleno. Umjesto imena konlerencije mozete staviti samo zvjezdicu (*), sto ce rezultirati
ispisom svih dostupnih konlerencija. Time vam je odabir zeljene konlerencije donekle olaksan,
buduci da ne morate pamtiti njezino tocno ime.
S//ka 2-10: Citanje Usenet konferencija pomocu Netscapea
Kako u Hrvatskoj postoji samo jedno racunalo koje je Usenet posluzitelj i kako od poznatijih
pretrazivackih programa samo Mosaic i Netscape posjeduju mogucnost upisivanja adrese tog
racunala, lako se moze dogoditi da cete se morati posluziti drugacijim oblikom sintakse za pristup
konlerencijama. Kod ovog oblika sintakse adresa Usenet posluzitelja sacinjava dio URL adrese:
nntp://<host>:<port>/<ime_konferencije>/<broj_poruke>
Host kojega valja upisati ukoliko koristite pretrazivacki program u Hrvatskoj je
nippur.irb.hr, dok se port moze izostaviti. Najbolje bi svakako bilo kada biste se koristili
prvim oblikom sintakse, sto je moguce ukoliko nabavite pretrazivacki program Netscape koji, kao
sto smo vec i naveli, postoji u inacicama za Windows okruzje, Macintosh racunala i X Windows
okruzje za rad pod UNIX-om.
Evo nekoliko primjera Usenet URL adresa koje mozete sami isprobati:
news://hr.comp.literature/
news://comp.sys.ibm-pc.announce/
nntp://nippur.irb.hr/hr.rec.humor/
File (datoteke s konkretnim nazivom)
File URL adrese odreduju datoteke za koje se tocno zna ime i adresa racunala na kojima su
smjestene. Za razliku od FTP URL adresa kod kojih se unaprijed zna protokol kojim ce se datoteka
36
prebaciti na lokalno racunalo, upotrebom File adrese ce klijent sam odrediti metodu po kojoj ce se
datoteka prenositi. U nekim ce slucajevima to cak biti i sam FTP protokol. Ukoliko znate tocno ime
datoteke i adresu racunala na Internetu, bolje je da koristite FTP oblik URL adrese. File URL-ovi
ce vam puno vise koristiti kod ucitavanja lokalnih HTML dokumenata smjestenih na vasem
osobnom racunalu ili na nekom racunalu povezanom u lokalnu mrezu.
Sintaksa koja se upotrebljava za File URL adrese je:
file://<host>/<putanja>
Host je adresa racunala na kojemu se nalazi datoteka, a izostavlja se iz URL adrese kod rada s
vlastitim racunalom. Putanja je puno ime datoteke, zajedno sa svim direktorijima koji su joj
nadredeni. Zelite li sto tocnije sastaviti URL adresu za datoteku smjestenu na vasem racunalu, za
host upisite rijec localhost.
S//ka 2-11: Ucitavanje obicne datoteke u Netscape
Primjeri za File URL adrese (od kojih su neki izmisljeni jer se ne radi o vasem osobnom racunalu)
su:
file://index.html
file://readme.txt
file://oak.oakland.edu/SimTel/win3/internet/slnot100.zip
Prospero (Prospero Directroy Service)
Prospero URL adrese omogucavaju vam lociranje inlormacija dostupnih putem istoimenog servisa
koji jos uvijek nije dostigao zavrsnu etapu razvoja i koji se koristi iznimno rijetko. Vise o samome
servisu mozete pronaci na adresi: ftp://prospero.isi.edu/
pub/prospero/doc/prospero-protocol.PS.Z.
Sintaksa za ovaj tip URL adrese je:
prospero://<host>:<port>/<ime_podatka><polje>=<vrijednost>
37
Posebni znakovi
URL adrese imaju i neka manja ogranicenja, od kojih je najvaznije ono da ne smiju sadrzavati
razmake. Drugo dosta znacajno ogranicenje je osjetljivost URL adresa na velika i mala slova, sto
znaci da cete morati paziti na tu sitnicu cak i onda kada radite na racunalu ciji datotecni sustav ne
razlikuje velika slova od malih.
Ukoliko, primjerice, neka Gopher adresa sadrzi razmak ili cak vise razmaka, morat cete svakoga od
njih prevesti u posebni niz znakova kojeg ce klijentski programi razumjeti prilikom interpretacije
URL adrese. Ne smijete koristiti podvlaku (_) kao zamjenu za razmak, sto se u nekim sustavima
obicno radi, buduci da i podvlaka moze biti dio te iste Gopher URL adrese, te bi doslo do
poistovjecivanja dvaju razlicitih znakova.
Umjesto toga, URL specilikacije dozvoljavaju da se bilo koji znak unutar adrese zamijeni s
njegovom heksadecimalnom ASCII vrijednoscu kojoj prethodi znak postotka (%). Ako, na primjer,
zelite u Gopher adresi upotrijebiti izraz vremenska prognoza, morat cete ga prevesti u jednu
rijec bez razmaka koja izgleda ovako: vremenska%20prognoza. (Heksadecimalna ASCII
vrijednost za razmak je 20). U tablici 2-1 navedene su ASCII vrijednosti nekih cesce
upotrebljavanih posebnih znakova, zajedno s odgovarajucom URL zamjenom.
Znak Heksadecimalna vrijednost URL zamjena
Razmak 20 %20
Tab 09 %09
Enter 10 %10
% 25 %25
< 3C %3C
> 3E %3E
# 23 %23
~ 7E %7E
; 3B %3B
/ 2F %2F
? 3F %3F
: 3A %3A
@ 40 %40
= 3D %3D
& 26 %26
Tab//ca 2-1: Posebni URL znakovi
Pretrazivanje Weba
38
Posjedovati svoje vlastite Web stranice danas je veliki trend, no prava zabava zapocinje tek kada ih
ljudi pocnu sve vise i vise citati. Osnovno pitanje koje se namece svakom korisniku Weba, ali i
Interneta opcenito, je kako da pronadem neku informaciju. Ako sami ne mozete pronaci neki
podatak, vjerojatno ce i drugi imati teskoca s nalazenjem podataka koje vi prezentirate. Do danas je
smisljeno nekoliko razlicitih strategija koje rjesavaju problem indeksiranja dostupnih inlormacija,
pocev od kreiranja jednostavnih baza podataka, sve do automatiziranih aplikacija koje ce same
posjetiti vasu stranicu i ubaciti je u svoj veliki indeks.
Milijuni dokumenata su dostupni putem WWW-a, no vrlo malen broj racunala nudi pomoc pri
trazenju odredene inlormacije. Najveca baza podataka za World Wide Web kojoj se pristupa putem
samog Weba zove se Yahoo. Vrlo znacajne pretrazivacke baze su i EINet Galaxy, te CUI W3
Catalog, dok se posebno zanimljiv pristup postupku pretrazivanja moze osjetiti na bazama Lycos i
WebCrawler.
Yahoo
Kao sto je vec navedeno, najveca svjetska arhiva World Wide Web adresa zove se Yahoo, a
smjestena je na adresi http://www.yahoo.com/. Yahoo odrzavaju David Filo i Jerry Yang,
koji su i sam pretrazivacki sustav na sveucilistu Stanlord. Danas se Yahoo nalazi na posebnom,
vrlo snaznom racunalu, a u svom indeksu sadrzi vise od 40.000 Web adresa s kratkim opisima. Na
slici 2-12 vidi se pocetna stranica baze Yahoo.
S//ka 2-12: Baza podataka Yahoo
Ako zelite pronaci odredenu inlormaciju na Yahoo bazi podataka, kliknite na opciju search u
ponudenom izborniku. (Izbornik je dio Web dokumenta, a ne pretrazivackog programa.) Kako
izgleda prozor za pretrazivanje, mozete pogledati na slici 2-13.
S//ka 2-13: Pretrazivanje baze Yahoo
Yahoo se moze pretrazivati i rucno, jednostavnom setnjom kroz njegove hipertekstualne veze.
Dovoljno je da na pocetnoj stranici odaberete neko tematsko podrucje, nakon cega cete dobiti
stranicu s cijelim nizom hipertekstualnih veza koje vas od zeljene inlormacije dijele samo jednim
klikom misa.
Lycos
39
Koristeci pomalo neobican nacin indeksiranja, baza Lycos smjestena na sveucilistu Carnegie-
Mellon, s adresom http://lycos.cs.cmu.edu/ cuva u svom popisu vise od dva milijuna
Web dokumenata. Za svaki je dokument indeksirana URL adresa i nekoliko redaka teksta koji
opisuju sadrzaj tog dokumenta. Iako su pruzene tek najosnovnije tekstualne inlormacije,
pretrazivanje s bazom Lycos iznenadujuce je ucinkovito. Slika 2-14 prikazuje pocetnu stranicu ove
baze.
S//ka 2-14: Lycos.
Rezultati pretrazivanja s Lycos indeksom, iako dosta kvalitetni, prilicno su zbunjujuci jer su
prikazani u lormatu kakav se moze svidjeti samo prolesionalnim kompjutorasima. Osim
prikazivanja samo hipertekstualne veze i URL adrese na pronadene dokumente, Lycos ce takoder
prikazati i podosta statistickog materijala.
WebCrawler
Slicno kao i Lycos, WebCrowler automatski kopka po Webu spremajuci adrese svih pronadenih
dokumenata u vlastitu bazu podataka. To se obavlja pomocu algoritama karakteristicnih za
Internetski servis WAIS, no ovdje su rezlutati prikazani puno preglednije i jednostavnije. Baza
podataka smjestena je na adresi http://webcrawler.com/.
S//ka 2-15: WebCrawler
Pretrazivanje na WebCrawleru je prilicno jednostavno. Dovoljno je da upisete jednu ili vise
kljucnih rijeci, te po zelji ogranicite broj trazenih dokumenata. Takoder mozete odrediti moraju li
pronadeni dokumenti sadrzavati sve navedene kljucne rijeci ili barem jednu od njih, sto se regulira
posebnim gumbom smjestenim desno od gumba search. Kako to sve izgleda, mozete pogledati na
slici 2-15. Nedostatak ove baze je prikazivanje samo naslova pronadenih dokumenata koji ujedno
predstavljaju i hipertekstualnu vezu putem koje im mozete pristupiti.
EINet Galaxy
EINet Galaxy je pretrazivacka baza koja najvise nalikuje bazi Yahoo, no organizirana je puno
nepreglednije. Adresa na kojoj se nalazi je http://www.einet.net/. Kao sto se vidi sa slike
2-16, upotreba ovog indeksa prilicno je slozena. Polje za upis kljucne rijeci po kojoj ce se baza
pretrazivati nalazi se na samom dnu stranice.
40
S//ka 2:16: EINet Galaxy
Poput pocetne stranice, zbunjujuca je i stranica s pronadenim adresama dokumenata. EINet Galaxy
zna s vremena na vrijeme u popis naslova pronadenih dokumenata smjestiti i dokumente koji uopce
nemaju naslove (iako se pretrazuje po samom naslovu), a gumbi s kojima se upravlja ovom bazom
podataka prilicno su besmisleni.
CUI W3 Catalog
Sveucilicni racunalni centar sveucilista u Zenevi (zovu li ga i oni SRCE?) odrzava bazu Web
stranica u kojoj je indeksirano vise od 15.000 adresa u lormatu slicnom onome koji se koristi kod
baze Yahoo. Slika 2-17 prikazuje pocetnu stranicu ove baze podataka. Ovaj katalog koji ce
korisnicima u Hrvatskoj biti posebno zanimljiv zbog njegovog smjestaja u Svicarskoj, a ne u
Americi, nalazi se na adresi http://cuiwww.unige.ch/w3catalog.
S//ka 2-17: CUI W3 Catalog
Ova ce baza podataka pronaci najmanju kolicinu dokumenata kod pretrazivanja po kljucnoj rijeci,
no umjesto da napise samo adresu i kratak opis dokumenta, kao sto je to slucaj kod vecine drugih
baza, CUI W3 ce svaki pronadeni dokument opisati sa cak nekoliko opsirnih recenica. Organizacija
baze je intuitivna, pa nitko ne bi trebao imati problema prilikom njezine upotrebe.
41
3. poglavlje: Osnove HTML-a
42
Odabir Web posluzitelja
Na pocetku ovog poglavlja upoznat cete se s tipovima Web posluzitelja. Za objavljivanje vasih
HTML dokumenata na Internetu vazno je da znate koji je Web posluzitelj instaliran na racunalu na
kojem su smjesteni ti dokumenti, kako biste znali u kojim se oni direktorijima smiju nalaziti i kako
da pratite citanost svojih Web stranica. Najbolje bi bilo da pitate administratora mreze na kojoj
radite koji je Web posluzitelj instaliran, te da u ovom poglavlju pronadete njegov kratak opis i URL
adresu na kojoj se nalazi puno vise inlormacija o tom posluzitelju.
Na racunalima u Hrvatskoj koja su spojena na Internet uglavnom se koristi soltver tvrtke NCSA, a
katkada cete naici i na Web posluzitelja tvrtke CERN. Oba dva proizvoda su besplatna i
lunkcionalno vrlo slicna, a smatraju se za najbolji soltver te vrste napisan za UNIX platlormu.
Kako je vecina racunala smjestenih u hrvatskim sveucilistima i znanstvenim institutima zasnovana
na operativnom sustavu UNIX, ne cudi cinjenica da se ponajvise koriste Web posluzitelji tvrtki
NCSA i CERN.
Medutim, najavljenom komercijalizacijom Interneta ocekuje se da ce cak i pojedinci moci
postavljati vlastite Web posluzitelje koji ce biti instalirani na obicnim kucnim racunalima s 32-
bitnim operativnim sustavima kakvi su Windows 95, OS/2 Warp i Macintosh System 7.5. Postupak
instalacije Web posluzitelja nece ovdje biti opisivan buduci da se on razlikuje od proizvoda do
proizvoda, no bit ce opisana osnovna svojstva desetak najpoznatijih soltverskih proizvoda u ulozi
World Wide Web posluzitelja. Vise o raznim Internetskim posluziteljima i radu s Internetom preko
Windowsa 95 procitajte u Znakovoj knjizi Internet za Windows 95, autora Olega Mastruka.
Primijetit cete da neki Web posluzitelji u svojem imenu sadrze i oznaku protokola koji se koristi za
prenosenje WWW dokumenata, HTTP. Radi se o tome da se Web posluzitelji cesto nazivaju i
HTTP posluziteljima, sto u nekim situacijama moze djelovati zbunjujuce, no nikakve razlike
izmedu proizvoda koji sadrze tu oznaku i onih koji ju ne sadrze ne postoje.
U ovom cemo poglavlju takoder kreirati i prvi HTML dokument, te cemo objasniti nacine
objavljivanja gotovog dokumenta na Internetu. Time je na jednostavan nacin objasnjen cijeli
postupak izrade Web stranica - od upoznavanja s instaliranim Web posluziteljem, sve do
upoznavanja javnosti s postojanjem novog dokumenta. Ovim poglavljem zavrsava uvodni dio
knjige, nakon cega slijedi drugi dio u kojem je detaljno objasnjena sintaksa jezika HTML, te
napredne mogucnosti dizajniranja stranica koje vam taj jezik pruza.
Tablica 3-1 popisuje najpoznatije Web posluzitelje, platlorme kojima su namijenjeni, te donosi
njihov kratak opis i URL adresu na kojoj ih mozete nabaviti ako su besplatni, odnosno saznati kako
se nabavljaju ukoliko se radi o komercijalnim soltverskim proizvodima.
43
Platforme Posluzitelj Opis URL adresa
UNIX
VMS
CERN Server Vrlo cjelovit WWW program koji
podrzava autorizaciju pristupa,
pretrazivacke alate i drugo. Neki ga
cak koriste i kod drugih tipova
posluzitelja, nevezanih uz WWW.
http://info.cern.ch/
hypertext/WWW/Daemon
/Status.html
UNIX
Windows NT
NCSA Posluztelj napisan u C-u, ciji se izvorni
kd distribuira besplatno. Prilicno je
kompletan, te posjeduje sva svojstva
koja podrzava i posluziteljski soltver
tvrtke CERN.
http://info.cern.ch/
hypertext/WWW/NCSA_h
ttpd/Overview.html
UNIX GN Posluziteljski soltver za pristup
datotekama putem HTTP-a i Gophera
spojen u jedan proizvod. Napisan je u
C-u za potrebe sto lakseg prijelaza s
Gophera na WWW.
http://www.ncsa.uiuc
.edu/SDG/Software/Mo
saic/Notes/gn-1.0-
release.txt
UNIX Perl Web posluztelj kojega je napisao Marc
Van Heyningen u programskom jeziku
Perl za UNIX. Ne upotrebljava se
cesto zbog nekih manjih nedostataka.
http://www.cs.indian
a.edu/perl-
server/intro.html
UNIX
Windows NT
Plexus Zasniva se na proizvodu Perl Marca
Van Heyningena i posluziteljskim
algoritmima Tonya Sandersa, te sadrzi
i podrsku za protokol Archie.
http://www.bsdi.com/
server/doc/plexus.ht
ml
Macintosh MacHTTP Najpopularniji World Wide Web
posluzitelj za Appleovu seriju
racunala.
http://info.cern.ch/
hypertext/WWW/MacHTT
P/Status.html
Windows NT HTTPS lor
Windows NT
Ovaj Web posluzitelj ugraduje se u
Control Panel vasih Windowsa NT,
odakle ga mozete i konligurirati.
http://info.cern.ch/
hypertext/WWW/HTTPS/
Status.html
VAX
VMS
VAX/VMS
Server
Posluzitelj namijenjen brzim DEC-
ovim procesorima.
http://kcgl1.eng.ohi
o-
state.edu/www/dos/se
rverinfo.html
UNIX
Windows
Macintosh
Netsite Vrlo brz i elikasan komercijalni Web
posluzitelj tvrtke Netscape
Corporation. Postoje dva proizvoda:
jeltiniji koji je manje siguran za
prenosenje podataka i skuplji koji
koristi silriranje.
http://home.mcom.com
/MCOM/products_docs/
server/html
Tab//ca 3-1: Web posluzitelji za razlicite platforme
44
Prvi HTML dokument
Racunalo na kojem imate korisnicki racun najvjerojatnije posjeduje instaliran Web posluziteljski
soltver tvrtke NCSA ili CERN. Svoju pocetnu WWW stranicu zahvaljujuci tome mozete smjestiti
u poddirektorij svojeg osnovnog direktorija cije je ime public_html. Time ce URL adresa vase
stranice biti ovog oblika:
http://host/~login/
HTML dokument koji sadrzi tu stranicu tada se mora nalaziti u datoteci s imenom index.html.
Ukoliko, primjerice, racunalo s kojim radite ima adresu public.srce.hr, a vase korisnicko
ime je perica, URL adresa vase pocetne stranice bit ce
http://public.srce.hr/~perica/. Naravno, svoju Web stranicu mozete smjestiti i u
bilo koji drugi direktorij dostupan WWW posluzitelju, no tada ce njezina URL adresa morati
sadrzavati potpunu putanju do datoteke u kojoj je sadrzana, a ne samo vase korisnicko ime ispred
kojega se nalazi tilda (~). Ne zaboravite pomocu UNIX naredbe chmod otvoriti citateljima pristup
do direktorija u kojem je smjesten vas dokument. Parametri koje morate navesti kod te naredbe
ovise o inacici UNIX-a instaliranog na racunalu kojega koristite, pa je najbolje da se o tome
raspitate kod administratora sustava.
Tekst bez oznaka
Vjerojatno se pitate kako bi pretrazivacki programi za World Wide Web interpretirali dokument
koji ne sadrzi niti jednu HTML oznaku. Pretpostavimo da ste kreirali datoteku prvi.html, ali da
ona trenutno sadrzi samo tekst. (Za sada necemo raditi s datotekom koja se zove index.html jer
ne izradujemo nikakvu ozbiljnu Web stranicu.) Neka ta datoteka izgleda ovako:
Hrvoje d.o.o.
Ilica 55, Zagreb
5. kolovoz 1995.
Dragi ^itatelju,
Zahvaljujem se na posje}ivanju moje prve Web stranice, ali ao
mi je {to vas moram
obavijestiti da ona jo{ uvijek nije gotova. Sve }e biti sre|eno
_uskoro_, ali ne ovaj tjedan.
Pozdrav,
Hrvoje Horvat
45
Tekst izgleda prilicno citljivo, osim sto je jedan redak nesto kraci no sto bi se moglo ocekivati.
Slika 3-1 prikazuje tu datoteku ucitanu u pretrazivacki program Netscape.
S//ka 3-1: Datoteka prvi.html ucitana u Netscape
Ovo sto se vidi na slici 3-1 zasigurno niti izdaleka nije ono sto biste zeljeli imati na svojoj Web
stranici i prilicno je zbunjujuce za citatelja. Primijetite takoder da upotreba podvlaka ispred i iza
neke rijeci uopce ne utjece na nacin interpretacije te rijeci u pretrazivackom programu, sto bi se na
nekim drugim sustavima moglo protumaciti kao oznaka za podcrtanu rijec. Podvlake, dakle, u
jeziku HTML ostaju netaknute, bez obzira na njihov utjecaj na citatelja Web stranice.
Dokumentu sa slike 3-1 potrebno je nekoliko HTML oznaka, odnosno nekoliko inlormacija koje bi
pretrazivacki program mogao upotrijebiti za lormatiranje konacnog izgleda stranice. Formatiranje
razmacima i prebacivanjem teksta u novi redak koje je upotrijebljeno kod nase datoteka nedostatno
je za bilo koji pretrazivacki program jer se ne sastoji od HTML oznaka. Ovaj primjer je ujedno i
pouka da se svaki dokument kojega sastavite mora detaljno pregledati. Korisno bi bilo obaviti
testiranje dokumenta sa sto vise razlicitih pretrazivackih programa.
Pocetna i zavrsna oznaka
Iako se mnoge HTML naredbe sastoje od samo jedne kratke oznake, neke od njih dolaze u
parovima gdje razlikujemo pocetnu i zavrsnu oznaku. Izmedu tih dvaju oznaka se nalazi tekst ili
neki drugi objekt na kojega se naredba odnosi.
Jedna od najosnovnijih HTML naredbi je naredba <HTML>, koja sav tekst koji iza nje slijedi
oznacava kao dokument pisan u jeziku HTML. To je naredba koja se sastoji od pocetne i zavrsne
oznake, pa stoga na kraju dokumenta morate dodati zavrsnu oznaku koja je jednaka pocetnoj, uz
dodatak kose crte: </HTML>. Sve sto se nalazi izmedu ovih dviju oznaka prema tome predstavlja
jedan HTML dokument.
Ako se u nekom trenutku zabunite i, primjerice, umjesto kose crte upotrijebite obrnutu kosu crtu, tj.
napisete <\HTML>, pretrazivacki program nece razumjeti zavrsnu oznaku i jednostavno ce je
ignorirati. U tom ce slucaju naredba koja je zadana pocetnom oznakom djelovati i na tekst koji se
nalazi iza krivo ispisane oznake, sve dok se ne naide na ispravno upisanu zavrsnu oznaku, sto moze
biti vrlo zbunjujuce kod oznaka koje sluze lormatiranju izgleda slova, poput onih za kosa i masna
slova. U ovom slucaju se radi o beznacajnom problemu, buduci da se oznaka <\HTML> ionako
smjesta na sam kraj dokumenta, jer iza nje ne postoji nikakav tekst koji bi mogao biti krivo
interpretiran. Valja se, medutim, ipak drzati svih sintaktickih pravila jer su neki sustavi na Mrezi
jako bezobrazni, pa kaznjavaju i najmanju neispravnost ili nepostivanje pravila izbacivanjem
kojekakvih cudnih rezultata.
46
Pitate li se sto bi se dogodilo kada biste neku oznaku stavili pod navodne znakove? Zamislite,
primjerice, da vas dokument zapocinje oznakom <HTML> umjesto <HTML>. Bili ste u pravu
ako ste mislili da ce pretrazivacki program prikazati cijelu oznaku zajedno s navodnim znakovima
kao tekstualni dio dokumenta. Morate imati na umu da se pretrazivacki programi vrlo strogo drze
sintakse jezika HTML, te da ce sve sto ne predstavlja konkretnu oznaku s nekim znacenjem
prikazati kao obican tekst.
Valja, dakle, u potpunosti postivati sintaksu jezika, te se moraju zatvarati sve naredbe otvorene
pocetnim oznakama jer za HTML ne postoje nikakvi kompilatori koji ce vas upozoriti na pogresku.
Tekst s oznakama
Jedna od najvaznijih naredbi koje cete nauciti i vjerojatno jedna od onih koje cete najvise koristiti
je naredba koja oznacava kraj odlomka, odnosno prelazak teksta u novi red. Postoji nekoliko
oznaka kojima se moze realizirati ova radnja, no dvije s kojima cete oblikovati najcitljivije Web
dokumente su <P> i <BR>.
Zelite li na nekom mjestu postaviti kraj odlomka, upotrijebite oznaku <P> (radi se o jednostrukoj
oznaci ciji naziv dolazi od rijeci paragraf). Sljedeci primjer dodaje nekoliko <P> oznaka datoteci
prvi.html i cijelu je smjesta pod oznake za HTML dokument, <HTML> i </HTML>:
<HTML>
Hrvoje d.o.o.
Ilica 55, Zagreb
5. kolovoz 1995.
<P>
Dragi ^itatelju,
<P>
Zahvaljujem se na posje}ivanju moje prve Web stranice, ali `ao
mi je {to vas moram
obavijestiti da ona jo{ uvijek nije gotova. Sve }e biti sre|eno
_uskoro_, ali ne ovaj tjedan.
<P>
Pozdrav,
<P>
Hrvoje Horvat
</HTML>
Slika 3-2 prikazuje ovaj HTML dokument u Netscapeu.
47
S//ka 3-2: Oznake za kraj odlomka u datoteci prvi.html
Na slici 3-2 osjeca se prilican napredak nad slikom 3-1, no neki problemi jos uvijek postoje.
Najuocljiviji problem je taj da prvih par redaka jos uvijek ne izgleda onako kako mi to zelimo.
Pretrazivacki programi ce bez obzira na to koliko ste vi puta pritisnuli tipku Enter kod pisanja
izvornog dokumenta pokusati smjestiti sto je moguce vise teksta u jedan redak. Taj nacin
interpretacije teksta koristan je kod glavnog odlomka koji sacinjava nas prvi dokument, no ne i kod
prvih nekoliko redaka koji bi izgledali puno bolje kada ne bi svi bili nabijeni u jednu jedinu liniju
teksta.
Linije se u jeziku HTML razdvajaju pomocu naredbe <BR> (break). Kao i svaka druga oznaka,
tako se i <BR> smije smjestiti bilo gdje u izvornom tekstu, pa tako i na kraju linije koju zelimo
prelomiti. Prethodnom cemo primjeru sada dodati i oznake za razdvajanje linija:
<HTML>
Hrvoje d.o.o.<BR>
Ilica 55, Zagreb<BR>
5. kolovoz 1995.<BR>
<P>
Dragi ^itatelju,<BR>
<P>
Zahvaljujem se na posje}ivanju moje prve Web stranice, ali ao
mi je {to vas moram
obavijestiti da ona jo{ uvijek nije gotova. Sve }e biti sre|eno
_uskoro_, ali ne ovaj tjedan.
<P>
Pozdrav,<BR>
<P>
Hrvoje Horvat<BR>
</HTML>
Slika 3-3 prikazuje izgled datoteke prvi.html nakon najnovijih izmjena.
S//ka 3-3: Datoteka prvi.html s oznakama <P> i <BR>
Radi sto bolje preglednosti gotovih HTML dokumenata preporucljivo je stavljati oznake za
razdvajanje odlomaka u zasebne retke, a oznake za kraj linije na sam kraj retka kojega zelite
prelomiti. Primijetit cete da se takav stil kreiranja dokumenata koristi kroz cijelu ovu knjigu.
Jos jedan problem koji je preostao: potpis s pozdravom trebao bi se u pretrazivackom programu
prikazati pomaknut par centimetara prema desno, a ne na samoj lijevoj margini dokumenta kao i
sav preostali tekst. Da izbjegnete ovu situaciju, mozete upotrijebiti naredbu <PRE> (preformated
48
information). To je naredba koja se sastoji od pocetne i zavrsne oznake, pa ce se svi razmaci i
pritisci na tipku Enter uvazavati sve dok se ne umetne oznaka za kraj lormatiranog ispisa,
</PRE>. U sljedecem primjeru mozete vidjeti nas dokument uz primjenu ove naredbe na
posljednjih nekoliko redaka od kojih se sastoji potpis:
<HTML>
Hrvoje d.o.o.<BR>
Ilica 55, Zagreb<BR>
5. kolovoz 1995.<BR>
<P>
Dragi ^itatelju,<BR>
<P>
Zahvaljujem se na posje}ivanju moje prve Web stranice, ali ao
mi je {to vas moram
obavijestiti da ona jo{ uvijek nije gotova. Sve }e biti sre|eno
_uskoro_, ali ne ovaj tjedan.
<PRE>
Pozdrav,
Hrvoje Horvat
</PRE>
</HTML>
Nakon dodavanja naredbe <PRE> postigli smo zeljeni nacin lormatiranja dokumenta, no time se
pojavio novi problem: sav tekst koji se nalazi izmedu oznaka <PRE> i </PRE> pojavio se u
drugacijem tipu pisma koje koristi slova jednake debljine. Razliku cete primijetiti ako malo
detaljnije pogledate sliku 3-4.
S//ka 3-4: Tekst je ispravno formatiran, ali s novim pismom
Zasad cemo se zadovoljiti ovakvim tekstualnim izgledom dokumenta. Iskoristit cemo, medutim,
jos i mogucnost upotrebe slika u HTML dokumentu, pa cemo na kraju naseg primjera ubaciti
slicicu koja ce predstavljati autorov autogram. To se postize pomocu naredbe <IMG> koja uz
obavezan argument SRC kojim se navodi ime datoteke koja sadrzi sliku, moze sadrzavati i
argument ALT pomocu kojega se zadaje tekst koji ce se pojaviti umjesto slike u tekstualnim
pretrazivackim programima kakav je Lynx. (Za ovu naredbu postoje jos neki opcionalni argumenti
o kojima ce biti vise rijeci u cetvrtom poglavlju.) Neka je autorov autogram pohranjen u datoteci
potpis.gif. Tada naredba za dodavanje tog potpisa dokumentu izgleda ovako:
<IMG SRC=potpis.gif ALT=autogram>
49
Konacan izgled nase datoteke prvi.html prikazan je ovim primjerom:
prvi.htm
<HTML>
Hrvoje d.o.o.<BR>
Ilica 55, Zagreb<BR>
5. kolovoz 1995.<BR>
<P>
Dragi ^itatelju,<BR>
<P>
Zahvaljujem se na posje}ivanju moje prve Web stranice, ali ao
mi je {to vas moram
obavijestiti da ona jo{ uvijek nije gotova. Sve }e biti sre|eno
_uskoro_, ali ne ovaj tjedan.
<PRE>
Pozdrav,
</PRE>
<IMG SRC=potpis.gif ALT=autogram>
</HTML>
Kako to izgleda u Netscapeu, mozete pogledati na slici 3-5, ili ako ucitate istoimenu datoteku s
jedne od prilozenih disketa u vlastiti pretrazivacki program.
S//ka 3-5: Konacan izgled datoteke prvi.html
Objavljivanje gotovih Web stranica
World Wide Web se sastoji od velikog broja dokumenata kojima mozete pristupiti, i to je dobro sve
dok se ne zamislite kako da ljude primamite da procitaju vasu Web stranicu. Zahvaljujuci iznimno
brzom rastu WWW-a, u svijetu se svakodnevno pojavljuju stranice na kojima mozete objaviti
kratak opis i URL adresu vlastite Web stranice, sto ce mnogim citateljima omoguciti da procitaju
bas vas dokument. Takvih stranica namijenjenih objavljivanju postoji podosta, no u ovom su
poglavlju odabrane samo one koje su najposjecenije i koje raspolazu najvecim bazama najnovijih
HTTP URL adresa.
50
The Mosaic What`s New Page
Mjesto na kojemu morate obavezno najaviti svoju prisutnost na World Wide Webu je stranica
Mosaic What`s New Page tvrtke NCSA, smjestena na adresi
http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/whats-new.html.
Pocetnu stranicu ovog dokumenta mozete vidjeti na slici 3-6. Ono sto se ne vidi na slici je velika
kolicina najnovijih Web adresa. Obicno cete ih pronaci i po 150, u ovisnosti o tome koliko je ljudi
sastavilo novi dokument.
S//ka 3-6: The Mosaic What's New Page
Adrese su poslagane abecedno, sto nije najbolje rjesenje u ovom slucaju. Adrese Web stranica bi
trebale biti poslagane po tematici koju obraduju, jer se time znacajno olaksava posao onome tko
trazi adresu odredenog tipa. Iako je Mosaic What`s New Page vazno mjesto za objavljivanje
vlastitih stranica, nemojte se iznenaditi ako ih posjeti tek malen broj ljudi jer je doista tesko uociti
neciju objavu u citavoj dzungli adresa.
Kako biste povecali sanse da vas netko sto lakse uoci, posluzite se jednim trikom. Neka pocetno
slovo imena vase Web stranice bude pri vrhu abecede. Stranice s imenom AA-astroteka posjetit ce
vise pretrazivackih programa od stranica s imenom Zvona u europskoj povijesti.
Special Internet Connections
Scott Yanoll je u doba svojih studentskih dana na sveucilistu u Madisonu zapoceo s kreiranjem
zanimljivog popisa poznatog po imenu Special Internet Connections. On i danas odrzava taj popis u
kojem se nalaze tisuce korisnih adresa na Internetu. Kako izgleda Web stranica s tim popisom,
mozete provjeriti na adresi http://www.uwm.edu/Mirror/inet.services.html.
Pocetnu stranicu mozete pogledati i na slici 3-7.
S//ka 3-7: Special Internet Connections
Kao sto se vidi na slici, Web adrese su na ovom popisu svrstane po kategoriji u koju svojom
tematikom pripadaju. Kada jednom zavrsite s izradom vlastite Web stranice, i ucini li vam se ona
zanimljivom za siroku javnost, obavijestite o tome Scotta Yanolla putem njegovog popisa Web
adresa (tamo cete pronaci njegovu najnoviju e-mail adresu). Hoce li vas uvrstiti u svoj popis, ovisi
o dojmu kojega ce na njega ostaviti vasa stranica, a ako ste izradili komercijalni Web dokument,
Scott ce najvjerojatnije proslijediti vasu objavu u bazu podataka Internet Mall, o kojoj ce biti rijeci
kasnije u ovom poglavlju.
51
World Wide Web Virtual Library
Grupa ljudi iz Svicarske koji su osnovali World Wide Web i koji su sastavili originalnu inacicu
jezika HTML, takoder su dizajnirali atraktivnu listu Web adresa u kojoj su podaci svrstani po
kategoriji. Ta se lista zove Virtual Library, a nalazi se na adresi
http://www.w3.org/hypertext/DataSources/bySubject/Overview.html. Na
slici 3-8 mozete vidjeti pocetnu stranicu ovog popisa.
S//ka 3-8: World Wide Web Virtual Library
Odrzavanje ovog popisa organizirano je na vrlo pametan nacin. Za svaku se kategoriju, naime,
brine jedan covjek, cime je otvorena mogucnost provjere sadrzaja svake stranice za koju pristigne
najava. Na drugim popisima se rijetko provjerava sadrzaj svake pojedine stranice, buduci da prijava
za objavljivanje ima mnogo, a o njima se najcesce brine samo jedna osoba. E-mail adresu na koju
se morate javiti ukoliko zelite da u ovom popisu bude i vasa Web stranica, pronaci cete na stranici
koja ce se ucitati nakon sto kliknete na kategoriju u kojoj zelite da se ona objavi.
The Living City
Engleska tvrtka CADVision odrzava potpuno drugaciji tip stranice za objavu novih Web adresa.
Radi se o Web stranici The Living City koju mozete pogledati na adresi
http://www.cadvision.com/top.html. Slika 3-9 prikazuje pocetnu stranicu ovog
popisa, sto je ujedno i vrlo dobar primjer upotrebe slikovnih mapa pri izradi WWW stranica.
S//ka 3-9: The Living City
Upotreba ovog popisa vrlo je jednostavna. Najbolje bi bilo da za pocetak odaberete opciju Internet
Hierarchy. Tamo se nalazi indeks kojega sacinjavaju tisuce zanimljivih Web adresa za dokumente
smjestene po cijelom svijetu. Pronalazenje puta do stranice na kojoj mozete objaviti svoj Web
dokument, medutim, prilicno je slozeno, pa je najbolje da posaljete e-mail poruku na adresu
city@cadvision.com, u kojoj morate navesti ime svoje stranice, URL adresu i bilo koje
druge podatke za koje zelite da budu objavljeni. Druga mogucnost je da se pokusate izravno
povezati s njihovom najnovijom Web stranicom cija je adresa
http://daffy.cadvision.com/newlinks.html.
52
The InterNIC Directory of Directories
Ovaj prilicno velik popis novih stvari na Internetu odrzava tvrtka AT&T na adresi
http://ds.internic.net/ds/dsdirofdirs.html. Vjerovali ili ne, na ovim Web
stranicama necete pronaci hipertekstualne veze koje bi vas mogle dovesti do odredenog
dokumenta, vec samo URL adrese koje morate prepisati, ili ih na neki drugi nacin proslijediti
pretrazivackom programu. Premda to predstavlja veliki nedostatak, radi se o dosta vaznom popisu
na kojemu nikada nije lose objaviti svoju najnoviju Web stranicu. Kako izgleda The InterNIC
Directory ol Directories, pogledajte na slici 3-10.
S//ka 3-10: The InterNIC Directory of Directories
Inlormacije koje pruza ovaj popis prilicno su opsirne. Zelite li i vi ovdje objaviti svoju stranicu,
pronadite najnoviju e-mail adresu na koju se morate javiti pri dnu pocetne stranice popisa.
The Internet Mall
The Internet Mall je najveca Web stranica koja popisuje komercijalne dokumente na Internetu,
posebice onih tvrtki koje prodaju nekakvu robu ili usluge. Adresa na kojoj mozete razgledati tu
stranicu je http://www.mecklerweb.com/imall/. Ukoliko ste administrator WWW
posluzitelja u nekoj hrvatskoj tvrtki, ne zaboravite na ovom mjestu objaviti URL adresu svojih Web
stranica. Na slici 3-11 mozete vidjeti kako izgleda The Internet Mall.
S//ka 3-11: The Internet Mall
Dizajn ove stranice prikazuje jedan od najboljih nacina na koji mozete iskoristiti slicice, a da i dalje
zadrzite zanimljiv gralicki oblik: neka vasi gralicki gumbi budu zanimljivi svakom citatelju.
Apollo Advertising
U Engleskoj je na adresi http://apollo.co.uk/ smjesten popis s vrlo zanimljivim nacinom
organiziranja inlormacija koji se zove Apollo Advertising. Pocetnu stranicu mozete vidjeti na slici
3-12. Iako se radi o gralicki vrlo slozenoj stranici (karta svijeta je zapravo slikovna mapa s puno
sitnih dijelova) koja ce nesto duze putovati do vaseg racunala, ovo je vrlo atraktivno mjesto na
53
kojem mozete objaviti svoje Web stranice. Kao i The Internet Mall, tako i Apollo Advertising
popisuje samo komercijalne dokumente.
S//ka 3-12: Apollo Advertising
Na ovoj se Web stranici ispod karte svijeta nalazi popis svih sadrzanih adresa za pojedinu zemlju.
Taj ce popis omoguciti i korisnicima tekstualnih pretrazivackih programa da ravnopravno koriste
ovaj WWW dokument. Nastojte i vi u svojim stranicama svaku hipertekstualnnu vezu koju citatelj
moze ostvariti putem slike napraviti dostupnom i putem teksta.
Pretplatnicka lista za objavljivanje
Iako se najveci broj mjesta na kojima mozete objaviti svoju Web stranicu nalazi, naravno, na
samom World Wide Webu, postoji i jedna pretplatnicka lista koju mozete koristiti za objavu i za
otkrivanje najnovijih Web dokumenata dostupnih putem Interneta. Ta se lista zove Net-
Happenings, a administrira ju organizacija InterNIC (Internet Network Inlormation Center).
Na Net-Happenings se mozete pretplatiti tako da posaljete e-mail poruku na adresu
majordomo@is.internic.net. Sadrzaj poruke mora biti subscribe net-happenings.
Ukoliko zelite objaviti svoju novu Web stranicu, posaljite poruku u kojoj cete tu stranicu opisati na
e-mail adresu net-happenings@is.internic.net.
Ovisno o tome svida li vam se vise upotreba pretplatnickih lista ili Usenet konlerencija, mozda ce
vam biti lakse da Web stranicu objavite uz pomoc programa za pracenje konlerencija, u
konlerenciji comp.internet.net-happenings.
Najbolji nacin
Najbolji nacin da privucete paznju javnosti na svoje Web stranice je da postanete aktivni na
Internetu. Navedite URL adresu svojih stranica u svim dokumentima, privatnim porukama, javnim
konlerencijama i datotekama koje stavljate na Mrezu. Pronadite nekoliko vama zanimljivih Web
dokumenata, te nekoliko dokumenata po tematici slicnih vasemu, te u svoju Web stranicu ugradite
hipertekstualnu vezu putem koje se moze do njih doci. Zamolite autore tih stranica da i oni u svoje
dokumente stave vezu na vase stranice. Gotovo svi ce bez ikakvih pitanja odmah pristati na
medusobno ukljucivanje Web adresa u svoje dokumente.
54
II. Dio: Kreiranje Web
stranica
55
4. poglavlje: Jezik HTML
56
Osnovna HTML sintaksa
Postoji samo nekoliko opcih pravila kojih se treba drzati kod izrade Web dokumenata. Svaki je
HTML dokument podijeljen u dva dijela - zaglavlje i tijelo dokumenta. Zaglavlje sadrzi
inlormacije o dokumentu, dok se tijelo sastoji od teksta i drugih elemenata koji sacinjavaju
stranicu. Za oznacavanje zaglavlja i tijela koriste se HTML oznake <HEAD> i <BODY>, pa bi
najmanji moguci sintakticki ispravan HTML dokument mogao izgledati ovako:
<HTML>
<HEAD></HEAD>
<BODY>
Tekst od kojega se sastoji dokument
</BODY>
</HTML>
U ovom se primjeru zaglavlje ne sastoji niti od jednog elementa. Tijelo dokumenta takoder moze
ostati prazno (tada bi to doista bio najmanji HTML dokument koji se moze sastaviti), no u ovom je
primjeru upisana jedna recenica. U suprotnom bi pretrazivacki program prikazao praznu stranicu.
Drugo vazno pravilo, ako ga tako mozemo nazvati, jest cinjenica da naredbe HTML dokumenta
mogu biti smjestene bilo gdje u tekstu, tj. da nikada ne morate pritiskati tipku Enter kako biste
presli u novi red, osim ako to ne zelite. Prethodni primjer bio bi potpuno ispravan kada bi bio
zapisan i u ovakvom obliku:
<HTML><HEAD></HEAD><BODY>Tekst od kojega se sastoji
dokument</BODY></HTML>
Dakako, ovakav nacin zapisivanja je jako nepregledan. Nastojte uvijek unositi HTML oznake na
logickim mjestima koja se lako zapazaju, jer ce vam se inace cak i jednostavniji dokumenti ciniti
vrlo slozenima ukoliko s njima ne radite svakodnevno po nekoliko sati. Nemojte nikada stedti
prostor stavljanjem vise HTML naredbi u jedan redak. Premda bi vam se takav dokument mogao
uciniti urednijim i kompaktnijim, on ce biti vrlo nepregledan i gotovo neupotrebljiv za kasniju
upotrebu.
Jezik HTML ne razlikuje velika slova od malih, tako da sve oznake mozete pisati onako kako vam
najvise odgovara. Umjesto da napisete <HTML>, mozete, na primjer, napisati <html> ili
<Html>. Kod pisanja oznaka, medutim, postoji jedno drugo ogranicenje, a ono govori da se ne
smiju ubacivati suvisni razmaci izmedu znakova < i >. Oznaka < HTML >, dakle, nece biti
interpretirana od strane pretrazivackog programa.
57
Najosnovniji element kojega mozete staviti u zaglavlje dokumenta i opcenito na svaku Web
stranicu je naslov dokumenta. Za tu se namjenu koristi naredba <TITLE>. Naslov koji na taj nacin
pridruzite svojem dokumentu nece se prikazati na samoj stranici, vec na okviru prozora vaseg
pretrazivackog programa. Ako u zaglavlju ne navedete nikakav naslov, na okviru prozora
pretrazivackog programa bit ce ispisano ime datoteke koja sadrzi HTML dokument.
U nas primjer za najmanji dokument sada mozemo dodati i naslov:
mali.htm
<HTML>
<HEAD>
<TITLE>Najmanji dokument</TITLE>
</HEAD>
<BODY>
Tekst od kojega se sastoji najmanji dokument koji je u me|uvremenu
malo narastao.
</BODY>
</HTML>
Konacan izgled ovog primjera prikazan je na slici 4-1. Primijetite razliku na okviru Netscapeovog
prozora kod ove slike i svih slika u prethodnom poglavlju.
S//ka 4-1: Naredba TITLE ce odrediti ime prozoru s Netscapeom.
Pokusajte dokumentima koje namjeravate objaviti na Internetu davati zanimljiva i inlormativna
imena kako bi ih procitalo sto vise ljudi. Mnoge Web stranice na kojima mozete objaviti svoj
dokument, naime, jednostavno preuzmu naslov vaseg dokumenta kao njegov opis i postave ga kao
hipertekstualnu vezu. Ako, primjerice, izradujete Web stranicu s receptima za izradu raznih
sladoleda, a zelite da ju posjete citatelji iz cijelog svijeta, naredba <TITLE>Icecream: The
Quest for the Perfect Taste</TITLE> bit ce puno bolja od naredbe
<TITLE>Icecream Home Page</TITLE>. Najbolje je da uopce ne upotrebljavate izraze
poput home page ili Web u naslovima svojih dokumenata.
Imajte na umu da se naslovi koriste i kod izrade osobnih baza podataka sa zanimljivim mjestima na
Webu (u pretrazivackim se programima te baze najcesce nazivaju bookmark ili hotlist). Popis
naslova The Internet Mall, Best PC Shareware Programs, Croatian Physical Society i Digital
Games Review nudi vam puno vise inlormacija od popisa Moja Web stranica, General inlormation
i Data on the Web.
Kao sto je dobro na pocetak dokumenta staviti naslov, dobro je i na kraj dokumenta upisati
inlormacije o njegovom autoru, kontaktnu adresu i znak za zastitu autorskog prava. Naredba koja
se koristi za navodenje kontaktne adrese i slicnih inlormacija je <ADDRESS>, a tekst na koji se
58
odnosi vecina ce pretrazivackih programa ispisati kosim slovima. Prethodnom primjeru, dakle
mozemo dodati i potpis:
<HEAD>
<TITLE>Najmanji dokument</TITLE>
</HEAD>
<BODY>
Tekst od kojega se sastoji dokument koji je u me|uvremenu malo
narastao.
<ADDRESS>
Stranicu dizajnirao Dragan Petric (drpetric@student.math.hr)
</ADDRESS>
</BODY>
</HTML>
Dakako, podatke o autoru i naslov, te oznake za zaglavlje i tijelo dokumenta uopce ne morate
koristiti jer ce svaki pretrazivacki program uspjeti prikazati stranice bez tih elemenata. Time se,
medutim, gubi smisao HTML dokumenta jer se ne postuje osnovna sintaksa jezika. Premda je
takav nacin sastavljanja dokumenata pogresan, on ce najcesce zavrsiti uspjesno jer pretrazivacki
programi svaku pogresku jednostavno ignoriraju. Premda smo vec jednom to napomenuli, vazno je
da zapamtite da za jezik HTML ne postoji kompilator koji ce vam prijaviti sintakticke pogreske, pa
stoga nastojte postivati sintaksu jezika u najvecoj mogucoj mjeri jer time ne gubite nista, a dobivate
veci broj citatelja vase Web stranice.
Najosnovnije HTML naredbe, odnosno one koje su do sada uvedene u ovom poglavlju, te sve koje
su koristene kod izrade prvog dokumenta iz prethodnog poglavlja, popisane su u tablici 4-1. U
tablicu nije uvrstena jedino naredba <IMG>, jer ce o njoj biti puno vise rijeci pri kraju ovog
poglavlja.
Pocetna oznaka Zavrsna oznaka Znacenje
<ADDRESS> </ADDRESS>
Adresa autora dokumenta
<BODY> </BODY>
Tijelo HTML dokumenta
<BR> -
Kraj retka
<HEAD> </HEAD>
Zaglavlja HTML dokumenta
<HTML> </HTML>
Oznacava Web lormatiranu datoteku
<P> -
Kraj odlomka
<PRE> </PRE>
Tekst lomatiran razmacima
59
Tab//ca 4-1: Osnovne HTML naredbe
Naslovi
HTML podrzava sest razina naslova cije su oznake <H1>, <H2>, <H3>, <H4>, <H5> i <H6>. To
je i vise nego dovoljno za bilo kakav oblik hipertekstualnog dokumenta, buduci da HTML
podrzava velik broj drugih struktura namijenjenih gralickom oblikovanju Web stranice.
H1 je najvisa razina za naslove i uobicajeno je da se takav naslov uvijek koristi kao prvi element
tijela dokumenta. Upotrebom bilo koje razine naslova implicira se promjena stila u dokumentu,
cime se ujedno ostvaruje i vidljivi razmak u tekstu, kako ispred, tako i iza naslova. Unutar teksta od
kojega se sastoji naslov, mogu se koristiti razne HTML oznake, poput onih za razdvajanje
odlomaka ili ubacivanje slika, no to ni u kom slucaju nije preporucljivo, buduci da ne predstavlja
nikakvu logicki smislenu lormaciju.
Naslovi bi se trebali koristiti prirodnim hijerarhijskim redoslijedom. Premda je moguce preskakati
razine naslova, bolje je to ne ciniti jer se kod nekih manje poznatih pretrazivackih programa ciji
programeri nisu predvidjeli takvu mogucnost mogu pojaviti nezeljeni rezultati. Slicno je i s raznim
programima za prevodenje HTML dokumenta u tekst. U nastavku je dan primjer Web stranice
kojom se ilustrira upotreba svih sest razina naslova:
naslovi.htm
<HTML>
<HEAD>
<TITLE>Razine naslova</TITLE>
</HEAD>
<BODY>
<H1>Naslov razine 1</H1>
Prvi blok teksta.
<H2>Naslov razine 2</H2>
Drugi blok teksta.
<H3>Naslov razine 3</H3>
Tre}i blok teksta.
<H4>Naslov razine 4</H4>
^etvrti blok teksta.
<H5>Naslov razine 5</H5>
Peti blok teksta.
<H6>Naslov razine 6</H6>
[esti blok teksta.
</BODY>
</HTML>
60
Slika 4-2 prikazuje kako ovi naslovi izgledaju prikazani u Netscapeu. Drugi pretrazivacki programi
ce mozda drugacije prikazati ovu HTML stranicu. Svaki ce od njih, medutim, naslove vise razine
prikazati vecim slovima od naslova nize razine.
S//ka 4-2: Sest razina naslova u jeziku HTML
Netscape vam omogucava i koristenje nekih dodatnih argumenata kod naredbi za kreiranje naslova,
no kako one ne predstavljaju nikakvu novost koja se ne bi mogla izvesti standardnim HTML
oznakama, ovdje ih necemo predstavljati. Detaljnije opise svih HTML naredbi, pa tako i naredbi za
sest razina naslova pogledajte u dodatku A.
Tekstualni stilovi
U prethodnom je poglavlju navedeno da naredba koja se na mnogim mjestima koristi za
podcrtavanje rijeci - ubacivanje podvlake ispred prvog i iza zadnjeg slova - nije ispravna u jeziku
HTML, te da ce pretrazivacki programi umjesto da podcrtaju tu rijec, jednostavno ignorirati vasu
zamisao i prikazati ubacene podvlake kao da su dio rijeci.
Jedna od najvaznijih karakteristika gralickog izgleda bilo kojeg dokumenta, bilo da se radi o Web
stranici ili pisanom materijalu, jest upotreba razlicitih pisama i stilova koji omogucavaju citatelju
jednostavnije pracenje sadrzaja. Zamislite, primjerice. ovu stranicu bez ikakvih praznina, razdiobe
na poglavlja, naslova te kosih i masno otisnutih rijeci. Izgledala bi prilicno dosadno i necitljivo.
Takve stranice tesko bi se pretrazivale kod prelistavanja knjige, i bilo bi gotovo nemoguce doci do
odredenog podatka ukoliko se svaka stranica ne bi citala od pocetka do kraja.
Naredbe za kosa i masno otisnuta slova u jeziku HTML sastoje se, naravno, od pocetne i zavrsne
oznake izmedu kojih se upisuje tekst koji zelimo posebno naglasiti. Za kosa se slova koristi
naredba <I> (italic), a za masno otisnuta <B> (bold).
U sljedecem je primjeru prikazana upotreba ovih dvaju oznaka:
stilovi.htm
Krajem 1994. godine u kinima se prikazivao film <B>Forest Gump</B>
koji je osvojio 7 Oscara na ovogodi{njoj dodjeli te prestine
filmske nagrade. Jednog Oscara dobio je i glumac <I>Tom Hanks</I>
kojem je ovo ve} druga takva nagrada za glavnu mu{ku ulogu...
Slika 4-3 prikazuje ovaj primjer nakon ucitavanja u Netscape. Primijetite da su ovaj put
izostavljene standardne HTML oznake koje sluze razdvajanju zaglavlja od tijela dokumenta, te
dodjeljivanja naslova dokumentu. Jos jednom se mozete uvjeriti da zbog toga Netscapeov okvir
61
sadrzi samo ime datoteke, a ne i neki suvisli naslov. Pokusate li ovaj primjer dodati u Netscapeovu
bookmark listu, takoder cete dobiti ispisano samo ime datoteke. U nastavku knjige ce mnogi
primjeri, medutim, biti ispisani bez osnovnih oznaka radi ustede prostora i bolje preglednosti.
S//ka 4-3: Primjer koso i masno otisnutih slova
Sljedece dvije oznake s kojima cemo se upoznati sluze podcrtavanju teksta, te ispisivanju teksta
neproporcionalnim pismom (sva su slova jednake debljine) unutar tekstualnog odlomka. Naredba
za podcrtavanje teksta je <U> (underline), a za ispisivanje teksta jednolikim slovima <TT>
(typewriter-style text).
Neproporcionalno pismo se zove tako jer sva slova koja se njime ispisu zauzimaju jednaku kolicinu
prostora, cak i ako je neko slovo prilicno tanko, poput slova i. Tekst ispisan tim pismom izgleda
kao da je sastavljen na pisacem stroju. Ovo je primjer neproporcionalnog pisma.
Najcesce se ipak upotrebljavaju proporcionalna pisma, pa je i ovaj tekst kojega upravo citate
ispisan proporcionalnim pismom. Debljina svakog slova nije jednaka, cime se olaksava citanje.
Ako uzmete ravnalo i izmjerite, na primjer, slovo i (iiiii), vidjet cete da je ono puno tanje od slova
m (mmmmm).
Oznake za podcrtavanja i neproporcionalno pismo nije dobro koristiti precesto, zbog mogucih
problema. Mosaic, primjerice, ne razumije oznaku <TT>, dok neke starije inacice Netscapea
ignoriraju naredbu <U>. Kada kreirate Web dokumente koji sadrze hipertekstualne veze za druge
dokumente, one se najcesce prikazuju u plavoj boji. Medutim, kako bi ih uocili i korisnici s crno-
bijelim monitorima, te se veze obicno pojavljuju i podcrtane. To je jos jedan razlog da se sto manje
koristi oznaka <U>, jer mnogi korisnici nece moci razlikovati podcrtane rijeci od hipertekstualnih
veza. Slika 4-4 jasnije prikazuje ovaj problem. Na njoj se nalazi prikaz sljedeceg primjera u
Netscapeu:
problem.htm
Krajem 1994. godine u kinima se prikazivao film <U>Forest Gump</U>
koji je osvojio 7 Oscara na ovogodi{njoj dodjeli te prestine
filmske nagrade. Jednog Oscara dobio je i glumac <U>Tom Hanks</U>
kojem je ovo ve} druga takva nagrada za glavnu mu{ku ulogu...
S//ka 4-4: Podcrtani tekst ili hipertekstualna veza?
Zbog spomenutih nedostataka podcrtavanja, puno je korisnija upotreba neproporcionalnog pisma,
premda se i ona prakticira vrlo rijetko. Ukoliko, primjerice, zelite simulirati izlaz i ulaz podataka
na racunalu, mozete se posluziti neproporcionalnim pismom kao u ovom primjeru:
62
pisma.htm
Umjesto naredbe <B><TT>DIR</TT></B>, koja se koristi za
pregledavanje direktroija u DOS-u, korisnici ra~unala s
operativnim sustavom UNIX moraju upotrijebiti nredbu
<B><TT>ls</TT></B>:
<PRE>
$ <B>ls</B>
datoteka1 datoteka2 datoteka3
</PRE>
Primjer prikazuje i upotrebu oznake <PRE>, koja takoder sluzi ispisivanju teksta
neproporcionalnim pismom, no ovaj put su zapamceni i prijelazi u novi red, te visestruki
razmaci. Oznaka <TT> visestruke razmake i pritiske na Enter ignorira, jer ju pretrazivacki
programi shvacaju kao naredbu za lormatiranje unutar tekstualnog odlomka.
U ovom smo primjeru prvi puta upotrijebili kombinaciju dvije HTML oznake kako bismo postigli
zeljeni vizualni elekt. Na slici 4-5 su rijeci DIR i ls prikazane masnim slovima u
neproporcionalnom pismu.
S//ka 4-5: Upotreba kombiniranih oznaka i neproporcionalnog pisma
Ovisno o pretrazivackom programu za WWW kojega koristite, neke cete HTML oznake moci
medusobno kombinirati, dok druge necete. Postoji nekoliko pretrazivackih programa koji vam ne
dozvoljavaju da kombinirate oznake za kosa i masno otisnuta slova, dok naredbu <TT> uvijek
smijete upotrebljavati u kombinaciji s bilo kojom drugom oznakom.
Jedan od mnogih dodataka jeziku HTML koji je uveden pojavom pretrazivackog programa
Netscape je naredba <CENTER> koja dolazi u paru s </CENTER>. Bilo koji elementi Web
stranice koji se nalaze izmedu ove dvije oznake bit ce centrirani u Netscapeovom prozoru. Ovo
prosirenje jezika je vrlo korisno, posebice kod uvodnih slika za neku Web stranicu ili kod
naglasavanja naslova. S vremenom cete najvjerojatnije naici i na mnoga druga mjesta gdje cete
moci upotrijebiti ovu naredbu.
Sljedecim je primjerom ilustrirana upotreba naredbe za centriranje. Kako taj primjer izgleda ucitan
u Netscape, pogledajte na slici 4-6.
center.htm
<CENTER>
<H1>Filmska kritika</H1>
</CENTER>
Krajem 1994. godine u kinima se prikazivao film <B>Forest Gump</B>
koji je osvojio 7 Oscara na ovogodi{njoj dodjeli te prestine
63
filmske nagrade. Jednog Oscara dobio je i glumac <I>Tom Hanks</I>
kojem je ovo ve} druga takva nagrada za glavnu mu{ku ulogu...
S//ka 4-6: Centriranje naslova u Netscapeu
Logicki stilovi
Tekstualni stilovi o kojima je do sada bilo rijeci jasni su i razumljivi. Jezik HTML takoder
podrzava takozvane logicke stilove koji autoru omogucavaju da na jos jednostavniji nacin izvrsi
naglasavanje odredenog teksta.
Najcesce upotrebljavane naredbe koje se koriste za oznacavanje logickih stilova su <EM>
(emphasis) i <STRONG> (stronger emphasis). Slika 4-7 prikazuje primjer upotrebe ovih dvaju
oznaka.
S//ka 4-7: Logicki stilovi za naglasavanje teksta
Tekst koji je na ovoj slici otisnut kosim slovima oznacen je u HTML dokumentu kao
<EMnaglasen tekst</EM, dok su rijeci koje se vide otisnute masno oznacene kao
<STRJNGjace naglasen tekst</STRJNG. Vecina pretrazivackih programa ce poput
Netscapea kosim slovima prikazati tekst oznacen s <EM>, a masnim slovima tekst oznacen sa
<STRONG>.
Naredbom <BLOCKQUOTE> mozete oznaciti tekst koji predstavlja citat jednog ili vise odlomaka
teksta. Sav tekst obuhvacen ovom naredbom bit ce razdvojen od okolnog teksta i malo uvucen u
desno. Zelite li citirati samo nekoliko rijeci unutar neke recenice, upotrijebite oznaku <CITE>.
Tekst koji je obuhvacen ovom naredbom vecina ce pretrazivackih programa ispisati kosim slovima
i nece ga razdvajati od okolnog teksta. U nastavku je dan primjer za upotrebu ovih dvaju naredbi:
citati.htm
U knjizi <I>Nau~ite HTML i oblikujte sami efektne World Wide Web
stranice</I> nalazi se odlomak:
<BLOCKQUOTE>
HTML razine 1, ili kra}e, HTML 1, je razina jezika koju podrava
svaki pretraiva~ki program za WWW. Ovdje su podrane sve
mogu}nosti jezika koje su se koristile kod prvih pretraiva~a, te
je dodana mogu}nost upotrebe slika.
</BLOCKQUOTE>
U prvom se poglavlju knjige tako|er navodi da <CITE>HTML nije
programski jezik</CITE>.
64
Na slici 4-8 vidi se kako ovaj primjer izgleda nakon ucitavanja u Netscape.
S//ka 4-8: Citiranje u jeziku HTML
Sada cemo se jos jednom vratiti na oznaku <P>, koja sluzi razdvajanju odlomaka u tekstu. HTML
razine 3 prosiruje ovu naredbu dodavajuci joj neke argumente i zavrsnu oznaku </P>. Zavrsna
oznaka za razdvajanje odlomaka se, medutim, uvijek moze izostaviti jer ce svaki pretrazivacki
program postaviti tekst u novi odlomak i u slucaju da naide na pocetnu oznaku <P>. Upotreba
oznake </P> smislena je tek u slucaju kada koristimo neki dodatni argument za oznacavanje
odlomka, kakav je, primjerice, ALIGN koji sluzi poravnavanju odlomka po nekom zadanom
modelu.
Pretrazivacki programi zasad ne podrzavaju ovaj argument u potpunosti. U Netscapeu, na primjer,
argumentu ALIGN mozete pridruziti samo vrijednost CENTER, sto znaci da ce doticni odlomak biti
centriran na Web stranici u kojoj je sadrzan. Ostale vrijednosti koje se mogu dodijeliti ovom
argumentu popisane su u dodatku A, no one ce se moci koristiti tek nakon usvajanja standarda
HTML 3. Sljedecim je primjerom prikazano centriranje odlomka u Netscapeu.
center2.htm
<P ALIGN=CENTER>
Krajem 1994. godine u kinima se prikazivao film <B>Forest Gump</B>
koji je osvojio 7 Oscara na ovogodi{njoj dodjeli te prestine
filmske nagrade. Jednog Oscara dobio je i glumac <I>Tom Hanks</I>
kojem je ovo ve} druga takva nagrada za glavnu mu{ku ulogu...
</P>
Na slici 4-9 mozete pogledati kako kako ovaj odlomak izgleda prikazan u Netscapeu.
S//ka 4-9: Centriranje odlomka u Netscapeu
Upotreba logickih stilova za naglasavanje nekog teksta jednostavnija je od upotrebe tekstualnih
stilova jer autor dokumenta ne mora sam izmisljati na koji nacin da naglasi neki specilicni dio
teksta. Ukoliko se, primjerice, upotrijebi oznaka za citat unutar odlomka umjesto oznake <I>,
pretrazivackom se programu ostavlja na volju kako ce taj tekst biti prikazan. To je vrlo korisno kod
izrade velikih dokumenata u kojima se citiranje, naglasavanje, centriranje odlomaka ili nesto drugo
koristi na vise razlicitih mjesta, jer autor vise ne mora pamtiti koji je tekstuani stil upotrijebio kod
svakog od navedenih elemenata.
65
Ovdje je spomenuto tek nekoliko najcesce upotrebljavanih logickih stilova. Dodatne naredbe za
oznacavanje tekstualnih i logickih stilova mozete pronaci u tablici 4-2. U tu su tablicu uvrstene i
neke oznake koje pripadaju skupu naredbi iz standarda HTML 3, no sve ih mozete upotrebljavati u
pretrazivackom programu Netscape.
Pocetna oznaka Zavrsna oznaka Znacenje
<DFN> </DFN>
Oznaka za rijec koju se delinira
<CODE> </CODE>
Koristi se za kd ispisan u programskom jeziku
<KBD> </KBD>
Oznacava tekst kojega valja utipkati
<SAMP> </SAMP>
Tekst kojega ispisuje racunalo
<VAR> </VAR>
Oznaka za neku varijablu, poput imena datoteke
<XMP> </XMP>
Kao i <PRE> uz ignoriranje svih HTML oznaka
<STRIKE> </STRIKE>
Precrtan tekst
<SUB> </SUB>
Subscript - malo snizen tekst, koristi se za indekse
<SUP> </SUP>
Superscript - malo uzdignut tekst ispisan sitnije
<TR> </TR>
Tekst se ispisuje pismom Times Roman
<HV> </HV>
Tekst se ispisuje pismom Helvetica
<BLINK> </BLINK>
Netscapeovo prosirenje za tekst koji titra
Tab//ca 4-2: Neke oznake za tekstualne i logicke stilove
Pisma i posebni znakovi
Jedan od najvecih nedostataka jezika HTML je potreba za koristenjem naslova ukoliko zelite nesto
istaknuti slovima vecim od onih koja sacinjavaju cijeli dokument. Kako naslovi ne mogu biti
sadrzani unutar nekog tekstualnog odlomka, vec predstavljaju odlomak za sebe, moze se vrlo lako
dogoditi da vam naruse dizajn stranice.
Ovaj se problem moze zaobici Netscapeovim prosirenjem jezika HTML koje se odnosi na rad s
pismima. Ako zelite promijeniti osnovnu velicinu pisma u svojem dokumentu, upotrijebite naredbu
<BASEFONT> zajedno s njezinim argumentom SIZE=n, gdje n predstavlja velicinu pisma.
Velicina se u ovom slucaju ne mjeri istim jedinicama na koje ste navikli pri upotrebi raznih crtacih
programa i tekstnih procesora, vec ona mora biti postavljena na neku vrijednost izmedu 1 i 7.
Osnovna velicina pisma s kojom pretrazivacki programi prikazuju dokumente je tri.
Zelite li promijeniti velicinu pisma za samo neku rijec ili skup rijeci, mozete se posluziti naredbom
<FONT SIZE=n>. Ponovno, velicina koju navedete mora biti izmedu 1 i 7, premda mozete
koristiti i oznake za relativnu promjenu velicine, +n ili -n, sve dok se konacni rezultat nalazi u
intervalu od 1 do 7. Ova naredba je vrlo korisno Netscapeovo prosirenje koje ce vam pomoci da
dotjerate svoju Web stranicu u mnogim prilikama. Sve promjene u velicini pisma zavrsit ce se s
66
oznakom </FONT>. Sljedeci primjer prikazuje upotrebu mnogih do sada uvedenih HTML oznaka,
ukljucivsi i oznake za rad s pismima:
pisma2.htm
<HTML>
<HEAD>
<TITLE>Serija za neznalice</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE=+1>
<CENTER>
<FONT SIZE=6><B>Serija za neznalice</B></FONT><BR>
<FONT SIZE=3><I>Najbolje prodavana serija informati~kih knjiga
svih vremena</I></FONT>
<P>
[to o ovim knjigama misle ~itatelji
</CENTER>
<P>
<I>Suzane Goraj</I>, San Francisco, o knjizi <I><FONT
SIZE=+1>Windows za neznalice</FONT></I>, Andyja Rathbonea:
<BLOCKQUOTE>
Nakon oranja po {est priru~nika koje sam dobila sa svojim novim
sistemom, drago mi je da sam pla~u}i otr~ala do prve knjiare po
ne{to toplije i prijateljskije. Andy je stvarno duhovit.
</BLOCKQUOTE>
<I>Steve Deyo</I>, Computer User Magazine, SAD, o knjizi <I><FONT
SIZE=+1>Internet za neznalice</FONT></I>, J. Levinea i C. Baroudi:
<BLOCKQUOTE>
Nedajte da vas zavede naslov: Internet za neznalice mo`e
pretvoriti neznalicu u znalca. Sadr`i sve {to trebate znati, uz
ba{ onoliko detalja koliko je potrebno.
</BLOCKQUOTE>
</BODY>
</HTML>
Detaljnijim proucavanjem ovog primjera primijetit cete da je i kod naredbe <BASEFONT>
upotrebljena relativna oznaka za velicinu pisma. Argumentom SIZE=+1 se postize da tekst cijelog
dokumenta bude ispisan pismom tek nesto vecim od obicnog. Kako ovaj primjer izgleda ucitan u
Netscape, pogledajte na slici 4-10.
S//ka 4-10: Upotreba naredbi za rad s pismima
67
Tri znaka iz ASCII skupa znakova, znak manje od (<), znak vece od (>) i znak & (ampersand)
imaju posebno znacenje u jeziku HTML, pa se stoga ne mogu koristiti kao takvi unutar teksta od
kojega se sastoji Web stranica. (Znakovi manje i vece od koriste se za oznacavanje pocetka i kraja
HTML naredbe, a znak & za oznacavanje posebnog znaka.) Abecede raznih svjetskih jezika cesto
sadrze i nekoliko posebnih znakova koji se ne mogu pronaci na obicnoj americkoj tipkovnici, pa se
stoga nesto teze unose i u HTML dokumente.
Ukoliko zelite upotrijebiti jedan od tri rezervirana znaka ili neko posebno slovo, morat cete se
posluziti odgovarajucom naredbom iz popisa danog u tablici 4-3. Ako u svom dokumentu,
primjerice, morate napisati 3 < 7, koristit cete se ovakvim nacinom zapisivanja: 3 &lt; 7.
Znak HTML oznaka Znacenje
& &amp; ampersand
< &lt;
manje od
> &gt;
vece od
&reg;
registrirana oznaka
&copy;
copyright- autorsko pravo
&aacute;
malo a s desnom kosom crticom
&agrave;
malo a s lijevom kosom crticom
&acirc;
malo a s obrnutom kvacicom
&auml;
malo a s preglasom (dvije tockice)
&aring;
malo a s kruzicem
&ccedil;
malo c s kukicom, lrancusko slovo
&ntilde;
malo n s tildom
&oslash;
malo o prekrizeno kosom crtom
&szling;
njemacko slovo ostro s
&aelig;
posebna oznaka za izgovor
&thorn;
malo islandsko slovo thorn
&eth;
malo islandsko slovo eth
&nbsp;
neizbrisivi razmak
&#161;
obrnuti usklicnik, spanjolsko slovo
&#191;
obrnuti upitnik, spanjolsko slovo
&#162;
cent
&#163;
lunta
&#165;
jen
&#188;
jedna cetvrtina
&#189;
jedna polovina
&#190;
tri cetvrtine
Tab//ca 4-3: Posebni znakovi u jeziku HTML
Svi pretrazivacki programi ne prepoznaju svaku od oznaka navedenih u tablici 4-3, posebice na
manje poznatim operativnim sustavima s prozorima. Ako u svojem HTML dokumentu koristite
68
posebne znakove, isprobajte taj dokument na nekoliko razlicitih pretrazivackih programa i
racunalnih platlormi kako biste bili sigurni da koristite ispravnu zamjensku oznaku.
Zadnjih nekoliko oznaka iz tablice koje sadrze znak # i neki broj predstavljaju Netscapeovo
prosirenje jezika HTML. To prosirenje omogucuje koristenje bilo kojeg znaka iz ASCII tablice,
jednostavnim navodenjem njegovog decimalnog kda iza znakova & i #, a ispred tocke sa zarezom.
Organizacije koje se brinu za usvajanje raznih HTML standarda donijele su prijedlog i za uvodenje
posebnih matematickih oznaka kako bi se na Webu mogle prezentirati i matematicke lormule, no
njihovo je uvrstavanje u HTML razine 3 jos u tijeku, pa ih stoga trenutno ne podrzava niti jedan
pretrazivacki program.
Zelite li kreirati poseban znak koji je naveden u tablici, ali s velikim umjesto malog slova,
jednostavo prvo slovo u HTML oznaci iza znaka & zamijenite s istim tim velikim slovom. Ako, na
primjer, namjeravate napisati rijec CPENHAGEN, upotrijebite ovaj niz znakova:
C&Oslash;PENHAGEN. Ako se u tablici ne nalazi neko slovo koje biste zeljeli upotrijebiti, a
postoji neko drugo slovo s istom dodatnom oznakom koja vam treba, takoder je dovoljno zamijeniti
to slovo sa zeljenim slovom na prvom mjestu iza znaka &.
Sljedecim je primjerom prikazana upotreba nekolicine posebnih znakova:
znakovi.htm
Sljede}i tekst je formatiran oznakom &lt;I&gt; za kosa slova i
oznakom &lt;B&gt; za masno otisnuta slova.
<P>
<B>Gibt es ein Caf&eacute; in der N&auml;he?</B><BR>
<I>Postoji li u blizini kafi}?</I>
<P>
<B>Je voudrais un d&icirc;ner.</B><BR>
<I>@elim pojesti ve}eru.</I>
<P>
<B>Y una mesa por ma&ntilde;ana, por favor.</B><BR>
<I>Tako|er i stol za sutra, molim</I>
Slika 4-11 prikazuje kako izgleda ovaj primjer u Netscapeu.
S//ka 4-11: Posebni znakovi u jeziku HTML
S posebnim hrvatskim slovima kakva su c, s, z i druga, stvar je nesto jednostavnija ako koristite
Netscape ili neki drugi pretrazivacki program koji posjeduje opciju za mijenjanje pisma kojim se
ispisuje osnovni tekst. U tom slucaju je dovoljno HTML dokument pisati po jednoj od postojecih
kodnih stranica koje podrzavaju nasa slova, te u pretrazivackom programu promijeniti osnovno
pismo u neko koje sadrzi hrvatska slova. Drugo rjesenje bilo bi upotreba inacice Windowsa za
Istocnu Europu, gdje cak i osnovno pismo sadrzi nasa slova. Takoder se mozete posluziti i raznim
69
shareware programima domacih autora koji rjesavaju taj problem kod obicne inacice Windowsa.
Jedan takav program je i TipkaWin, autora Tomislava Bronzina, a mozete ga pronaci na adresi
http://fly.cc.fer.hr/tbronzin/.
Veliki je problem, medutim, u tome sto kod nas postoji nekoliko standarda po kojima mozete
koristiti hrvatska slova, tako da nece svaki posjetitelj vase Web stranice koristiti pismo s istim
razmjestajem nasih slova kao i vi. Neki taj problem zaobilaze kreiranjem vise istih dokumenata
pisanih po razlicitim kodnim stranicama, dok drugi jednostavno koriste slova c, z, s i druga umjesto
posebnih hrvatskih znakova. HTML, nazalost, nema posebne oznake za nasa slova jer se ona niti ne
nalaze u prosirenom ASCII skupu znakova.
Komentari i vodoravne linije
Do ovog dijela poglavlja uvedeno je dovoljno HTML naredbi za kreiranje jednostavnih
dokumenata koji se sastoje samo od lormatiranog teksta. U nastavku ce biti rijeci o slozenijim
HTML elementima, kakvi su pobrojane i nepobrojane liste, hipertekstualne veze i ukljucivanje
slika u dokument, pa je sada pravo vrijeme da se uvede pojam komentara, jer ce kreirane stranice
biti vece, te samim time i nepreglednije. Iz istog cemo se razloga sada upoznati i s vodoravnim
linijama koje osim sto daju vizualan elekt gotovom dokumentu, pomazu i u stvaranju preglednijih i
urednijih HTML stranica.
HTML posjeduje pomalo cudnu sintaksu za ubacivanje komentara u dokument. Bilo koji tekst koji
je okruzen oznakama <!-- i --> smatra se komentarom, te ce ga svaki pretrazivacki program za
WWW ignorirati. Upotrebu komentara mozete vidjeti u sljedecem primjeru:
komentar.htm
<HTML>
<!-- Zadnji put promijenjeno: 13.8.1995. -->
<HEAD>
<TITLE>Upotreba komentara</TITLE>
</HEAD>
<BODY>
<!-- U Netscapeu se nakon u~itavanja ovog dokumenta ne}e vidjeti
ni{ta osim jednog jedinog naslova. Zahvaljuju}i komentarima, ~ak
se i mali dokumenti mogu ~initi velikima. -->
<H1>Dokument bez sadraja</H1>
</BODY>
</HTML>
Nakon sto ucitate ovaj primjer u svoj pretrazivacki program, vidjet cete samo jedan redak s
tekstom, kao na slici 4-12. Komentare ne morate upotrebljavati, no ako izradujete slozene Web
stranice, tek kratko oznacavanje pojedinih dijelova dokumenta jednog bi vam dana moglo biti od
70
neprocjenjive vaznosti. Pokusajte redovito unositi kratke komentare, bez obzira sto to povecava
dokument.
S//ka 4-12: Dokument s komentarima koji se ne vide
Vrlo korisna naredba koja ce pridonijeti gralickom izgledu vasih dokumenata je oznaka za
vodoravnu liniju <HR> (horizontal rule). Na svakom mjestu gdje se navede ova naredba bit ce
nacrtana tanka vodoravna linija kroz cijelu sirinu stranice. Upotreba oznake <HR> prikazana je u
sljedecem primjeru kojega smo vec koristili za prikazivanje naredbi za rad s pismima. Ovaj put je
taj dokument lormatiran malo drugacije:
linije.htm
<HTML>
<HEAD>
<TITLE>Serija za neznalice</TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT SIZE=7><B>Serija za neznalice</B></FONT><BR>
<FONT SIZE=4><I>Najbolje prodavana serija informati~kih knjiga
svih vremena</I></FONT>
<BR>
[to o ovim knjigama misle ~itatelji
<P>
<HR><BR>
</CENTER>
<I>Suzane Goraj</I>, San Francisco, o knjizi <B>Windows za
neznalice</B>, Andyja Rathbonea:
<BLOCKQUOTE>
Nakon oranja po {est priru~nika koje sam dobila sa svojim novim
sistemom, drago mi je da sam pla~u}i otr~ala do prve knjiare po
ne{to toplije i prijateljskije. Andy je stvarno duhovit.
</BLOCKQUOTE>
<HR><BR>
<I>Steve Deyo</I>, Computer User Magazine, SAD, o knjizi
<B>Internet za neznalice</B>, J. Levinea i C. Baroudi:
<BLOCKQUOTE>
Nedajte da vas zavede naslov: Internet za neznalice mo`e
pretvoriti neznalicu u znalca. Sadr`i sve {to trebate znati, uz
ba{ onoliko detalja koliko je potrebno.
</BLOCKQUOTE>
<HR>
</BODY>
</HTML>
71
Na slici 4-13 vidi se ovaj primjer prikazan u Netscapeu.
S//ka 4-13: Upotreba vodoravnih linija
Kao i za vecinu do sada uvedenih elemenata, Netscape posjeduje prosirenja i za naredbu kojom se
kreiraju vodoravne linije. Ta se prosirenja ocituju kroz cetiri dodatna argumenta koja se mogu
dodati oznaci <HR>, a to su SIZE, WIDTH, ALIGN i NOSHADE. Svakom od prva tri navedena
argumenata mora se dodijeliti neka vrijednost.
Argument SIZE vam omogucava da odredite debljinu vodoravne linije u pikselima. Piksel je jedna
tockica koja predstavlja sastavni dio slike na vasem ekranu. Vodoravna linija debljine 1 je, dakle,
najtanja linija koju mozete upotrijebiti. Ona se dobiva naredbom <HR SIZE=1>.
WIDTH se koristi za odredivanje duljine vodoravne linije. Duljinu mozete zadati u kolicini piksela
(prosjecna sirina Netscapeovog prozora krece se izmedu 600 i 1000 piksela, ovisno o konliguraciji
vaseg Windows okruzja), ili relativno, navodeci postotak sirine prozora u kojem je prikazan vas
pretrazivacki program. Ako, primjerice, zelite upotrijebiti vodoravnu liniju koja zauzima cetvrtinu
sirine cijelog prozora, upotrijebit cete naredbu <HR WIDTH=25%> unutar svojeg HTML
dokumenta.
Buduci da mozete koristiti linije koje ne zauzimaju citavu sirinu prozora s pretrazivackim
programom, Netscape vam omogucava da navedete mjesto na koje zelite smjestiti liniju. To se
postize upotrebom argumenta ALIGN, cija vrijednost moze biti LEFT, RIGHT ili CENTER,
odnosno linija moze biti smjestena uz lijevi rub prozora, uz desni rub ili u sredinu Netscapeovog
prozora. Ako, na primjer, namjeravate nacrtati vodoravnu liniju koja je siroka kao polovica
prozora, a da bude smjestena u sredinu, postici cete to naredbom <HR WIDTH=50%
ALIGN=CENTER>.
Konacno, ako malo detaljnije pogledate vodoravne linije koje iscrtava Netscape, primijetit cete da
one posjeduju sjenu cime se postize elekt trodimenzionalnosti. Ako ne zelite raditi s
trodimenzionalnim linijama, vec s obicnim crnim pravokutnicima, dodajte u naredbu za crtanje
vodoravne linije argument NOSHADE.
Sve ove argumente mozete kombinirati tako da postignete zanimljive elekte, kao u sljedecem
primjeru:
piramida.htm
<CENTER>
<H2>Posjeta piramidama...</H2>
<HR SIZE=4 WIDTH=5%>
<HR SIZE=4 WIDTH=10%>
<HR SIZE=4 WIDTH=20%>
<HR SIZE=4 WIDTH=30%>
72
<HR SIZE=4 WIDTH=40%>
<HR SIZE=4 WIDTH=50%>
<HR SIZE=4 WIDTH=60%>
<HR SIZE=3 WIDTH=100% NOSHADE>
</CENTER>
Ovakvi detalji izgledaju dosta slozeno kao HTML dokumenti, no rezultati su prilicno zanimljivi,
kao sto se vidi na slici 4-14.
S//ka 4-14: Piramida prikazana uz pomoc vodoravnih linija
Ako ovaj primjer, medutim, ucitate u neki drugi pretrazivacki program, elekt nece biti niti izdaleka
zanimljiv kao u Netscapeu. Kako ovaj primjer izgleda ucitan u Mosaic, pogledajte na slici 4-15.
S//ka 4-15: I nije neka piramida kad je prikazana Mosaicom
Tu se krije jedina opasnost koja se pojavljuje kod rada s Netscapeovim prosirenjima jeziku HTML.
S tim prosirenjima moci cete napraviti zaista vrlo elektne World Wide Web stranice, no kada ih
ucitate u druge pretrazivacke programe, one ce izgledati sasvim drugacije - mozda cak i besmisleno
ili ruzno. Nastojte stoga, ukoliko ste se koristili mnogim Netscapeovim prosirenjima, navesti
negdje na pocetnoj stranici svojeg Web dokumenta da bi bilo pozeljno pregledavati vase stranice
upravo s tim pretrazivackim programom.
Liste
HTML podrzava nekoliko struktura za izradu listi unutar dokumenta. Lista se moze delinirati kao
niz odlomaka koji mogu biti oznaceni brojevima (pobrojana lista), kruzicima ili nekim drugim
geometrijskim likom (nepobrojana lista), a mogu takoder ostati i neoznaceni (delinitna lista).
Definitna lista
Jedan od najcesce upotrebljavanih elemenata u slozenim dokumentima koji se sastoje od vise
stranica je kazalo kljucnih rijeci, skup delinicija ili popis nekog relerentnog materijala poput
koristene literature ili zanimljivih URL adresa. Kratki rjecnici predstavljaju najbolji primjer; rijeci
su popisane abecedno, a iza svake se nalazi sazeta delinicija. U jeziku HTML se takav nacin
popisivanja moze napraviti pomocu definitne liste, koja se u cijelosti mora nalaziti unutar oznaka
73
<DL> i </DL> (definition list). Sve dok je na snazi naredba za rad s listom, mogu se koristiti
oznake <DT> (define term) za navodenje nekog pojma i <DD> (define description) za ispisivanje
delinicije tog pojma.
Sljedecim je primjerom prikazana upotreba delinitne liste:
lista1.htm
<H3>Pojmovi vezani uz operativne sustave</H3>
<DL>
<DT>MS DOS
<DD>Operativni sustav tvrtke Microsoft koji se upotrebljava sve
manje i manje. Koristi se tekstualnim su~eljem, a tu su i mnoga
druga ograni~enja.
<DT>OS/2 Warp
<DD>IBM-ov 32-bitni operativni sustav koji podrava multitasking
DOS, Windows i OS/2 aplikacija. Najve}i konkurent mu je operativni
sustav Windows 95.
<DT>Windows 95
<DD>Microsoftov proizvod koji je tek s ovom ina~icom postao
operativni sustav, a koristi se grafi~kim su~eljem. Multitasking
podrava samo pri radu s 32-bitnim Windows aplikacijama.
<DT>X Windows
<DD>Grafi~ko korisni~ko su~elje za rad s ra~unalima koja se
zasnivaju na UNIX platformi. Postoje razni proizvo|a~i ove
grafi~ke ljuske za UNIX, a multitasking je u potpunosti podran.
</DL>
Na slici 4-16 prikazan je ovaj primjer nakon ucitavanja u Netscape, gdje se odmah i uocava
automatsko lormatiranje teksta.
S//ka 4-16: Definitna lista u funkciji rjecnika
Vazno je da ne zaboravite ubaciti oznake za pocetak i kraj delinitne liste. Ukoliko te oznake
izostavite, pretrazivacki program ce mozda listu prikazati tocno, a mozda i nece. U svakom slucaju,
zasigurno postoji nekoliko pretrazivaca koji ce prikazati neurednu hrpu delinicija umjesto
preglednog rjecnika, medu kojima su Netscape i Mosaic. Ovo je jos jedna dobra prilika da se
podsjetite kako gotove dokumente valja prije objavljivanja na Mrezi najprije dobro pregledati s
nekoliko razlicitih pretrazivackih programa.
Nepobrojana lista
74
Premda su delinitne liste prilicno korisne, puno cete cesce na Webu nailaziti na nepobrojane liste
gdje su svi elementi oznaceni crnim kruzicima, kvadraticima ili necim slicnim (tzv. bullets). Takve
liste zapocinju oznakom <UL>, a zavrsavaju, naravno, s </UL> (unordered list). Svaki clan liste
oznacava se naredbom <LI> (list item). Nacin upotrebe vrlo je slican onome kod delinitnih lista,
sto se vidi i u sljedecem primjeru:
lista2.htm
Najpoznatiji operativni sustavi su:
<UL>
<LI>MS DOS - 16-bitni, tekstualno su~elje, bez multitaskinga
<LI>OS/2 Warp - 32-bitni, grafi~ko su~elje, multitasking
<LI>Windows 95 - multitasking 32-bitnih aplikacija, grafi~ko
su~elje
</UL>
Rezultati nakon ucitavanja u Netscape izgledaju dosta lijepo, premda malo zbunjujuce, sto se vidi
na slici 4-17.
S//ka 4-17: Nepobrojana lista
Dva tipa listi koje smo do sada upoznali mogu se kombinirati u jednu slozeniju strukturu. U
sljedecem cemo primjeru upotrijebiti delinitnu listu ciji ce elementi biti otisnuti masnijim slovima,
cime se postize dodatni gralicki elekt. Ta ce se lista sastojati i od tri nepobrojane liste. Takva se
struktura u HTML jeziku najcesce naziva ugnjezdena lista.
lista3.htm
Najpoznatiji operativni sustavi su:
<DL>
<DT><B>MS DOS</B>
<UL>
<LI>16-bitni
<LI>tekstualno su~elje
<LI>bez multitaskinga
</UL>
<DT><B>OS/2 Warp</B>
<UL>
<LI>32-bitni
<LI>grafi~ko su~elje
<LI>multitasking DOS, Windows i OS/2 aplikacija
</UL>
75
<DT><B>Windows 95</B>
<UL>
<LI>32-bitni
<LI>grafi~ko su~elje
<LI>multitasking 32-bitnih aplikacija
</UL>
</DL>
Slika 4-18 prikazuje rezultate ovog HTML ispisa nakon ucitavanja u Netscape.
S//ka 4-18: Ugnjezdena lista
Slika 4-18 predstavlja ono sto smo i zeljeli postici prilikom sastavljanja prethodnog dokumenta, no
to ne mora znaciti da smo do dobrog rezultata dosli na najbolji moguci nacin. Razmislite, koristili
smo oznake <DT> za deliniciju pojma, a niti jedanput nismo upotrijebili oznaku <DD>. U ovom je
slucaju koristenje ugnjezdene liste bilo bespotrebno jer se naziv svakog pojedinog operativnog
sustava mogao navesti kao obican tekst otisnut masnim slovima. Pokusajte sami rekonstruirati
prethodni primjer tako da upotrijebite samo tri nepobrojane liste, a ne i delinitnu listu. Prilikom
oblikovanja Web stranice uvijek se drzite pravila: ako je nesto rijeseno jednostavnije, to ce prije
proraditi ispravno sa svakim pretrazivackim programom.
Autori Netscapea osmislili su i jedno jednostavno, ali i vrlo atraktivno prosirenje jeziku HTML za
rad s nepobrojanim listama. Ako ste se malo poigrali s prethodnim primjerom, vjerojatno ste
primijetili da Netscape ovisno o razini na kojoj se nalazi lista, njezine elemente oznacava s punim
ili prazim kruzicima, te kvadraticima. Prosirenje o kojemu je rijec omogucava vam da sami
odredite koja ce se oznaka koristiti kod neke liste i to uz pomoc argumenta TYPE koji se moze
navesti kod naredbe <UL>. Vrijednosti koje taj argument moze primiti su DISC, CIRCLE i
SQUARE, ovisno o tome zelite li koristiti pune ili prazne kruzice, te kvadratice. Ako, primjerice,
zelite da vasa lista sadrzi elemente oznacene s kvadraticima, upotrijebit cete naredbu <UL
TYPE=SQUARE>. Isti argument mozete koristiti i s naredbom <LI>, u slucaju da namjeravate
promijeniti oznaku uz samo jedan element liste.
Pobrojana lista
Pobrojane liste jednake su kao i nepobrojane, samo sto se kod njih elementi oznacavaju s
brojevima, a ne s geometrijskim likovima. Oznake unutar kojih se mora nalaziti pobrojana lista su
<OL> i </OL> (ordered list), a kao i kod nepobrojanih lista, i ovdje se elementi oznacavaju
naredbom <LI>. Clanovi liste bit ce redom oznacavani brojevima pocev od jedinice, pa na dalje.
Kod ovog tipa liste najbolje se moze uociti smisao naredbi koje oznacavaju pocetak i kraj liste jer
mora postojati neki nacin da se zaustavi povecavanje brojeva koji sluze kao oznake i da se ponovno
76
krene od broja jedan. Sljedeci primjer prikazuje pobrojanu listu ugnjezdenu s nepobrojanom, ovaj
puta osmisljenu na dobar nacin.
lista4.htm
<H3>Kako napraviti juhu</H3>
<OL>
<LI>U posudu staviti litru vode i sve zagrijati na vatri
<LI>Nakon {to voda zakipi, u posudu dodati:
<UL TYPE=DISC>
<LI>jednu kocku za gove|u ili koko{ju juhu
<LI>tjestenine po elji
</UL>
<LI>Pri~ekati nekoliko minuta da se skuha tjestetnina i povremeno
mije{ati
<LI>Posluiti uku}anima i pojesti
</OL>
Na slici 4-19 prikazan je ovaj dokument ucitan u Netscape. Primijetite da je kod nepobrojane liste u
drugoj tocki upotrebljen argument za odredivanje tipa oznake TYPE=DISC. Na slici se takoder
vidi kako se liste ovisno o razini sve vise i vise pomicu prema desno.
S//ka 4-19: Automatsko numeriranje pobrojane liste
Obicne pobrojane liste ne posjeduju nikakve dodatne opcije, pa tako kod upotrebe ugnjezdenih listi
od kojih je svaka pobrojana ne mozete uvesti neki drugaciji nacin oznacavanja, sto bi bilo vrlo
korisno. Kod listi koje su sadrzane unutar drugih listi bilo bi lijepo vidjeti da se elementi
oznacavaju slovima, pocev od A prema dalje, ili rimskim brojevima, no to se u standardnom jeziku
HTML ne moze izvesti.
Ako, medutim, koristite pretrazivacki program Netscape, ovaj cete problem moci rijesiti
zahvaljujuci jos jednom naizgled malenom, ali vrlo korisnom prosirenju jezika HTML. Kao i kod
nepobrojanih listi, tako i kod pobrojanih mozete naredbi <OL> dodijeliti argument TYPE. Koje sve
vrijednosti taj argument moze poprimiti, te kakvi se time postizu rezultati, pogledajte u tablici 4-4.
Vrijednost argumenta Nacin oznacavanja
TYPE=A
Velikim slovima abecede (A, B, C...)
TYPE=a
Malim slovima abecede (a, b, c...)
TYPE=I
Velikim rimskim brojevima (I, II, III...)
TYPE=i
Malim rimskim brojevima (i, ii, iii...)
TYPE=1
Obicna arapska numeracija (1, 2, 3...)
77
Tab//ca 4-4: Nacini oznacavanja pobrojene liste
Drugi argument kojega mozete napisati uz naredbu <OL> je START=n, gdje n predstavlja
vrijednost s kojom ce zapoceti odbrojavanje liste. Ako, na primjer, zelite da vasa lista bude
oznacena velikim rimskim brojevima gdje je prvi element oznacen peticom, napisat cete naredbu
<OL TYPE=I START=5>.
Oznaci <LI> mozete dodijeliti argument VALUE=n ako zelite promijeniti broj uz samo jedan
element pobrojane liste. Vrijednost n predstavlja broj koji zelite navesti uz taj element. Sljedeci
primjer prikazuje upotrebu Netscapeovih prosirenja za pobrojane liste.
lista5.htm
<H3>Kako napraviti juhu</H3>
<OL TYPE=I>
<LI>U posudu staviti litru vode i sve zagrijati na vatri
<LI>Nakon {to voda zakipi, u posudu dodati:
<OL TYPE=a START=24>
<LI>jednu kocku za gove|u ili koko{ju juhu
<LI>tjestenine po elji
</OL>
<LI>Pri~ekati nekoliko minuta da se skuha tjestetnina i povremeno
mije{ati
<LI>Posluiti uku}anima i pojesti
</OL>
Na slici 4-20 prikazan je ovaj primjer nakon ucitavanja u Netscape.
S//ka 4-20: Netscapeova prosirenja pobrojanim listama
Jezik HTML podrzava jos dva tipa listi koje se upotrebljavaju vrlo rijetko zbog toga sto daju iste
rezultate kao i neke od do sada spominjanih listi, ovisno o pretrazivackom programu u koji ih se
ucita. Te se liste moraju nalaziti unutar oznaka <MENU> i </MENU>, odnosno <DIR> i </DIR>,
sto bi trebalo znaciti da su pogodne za ispisivanje raznih izbornika i sadrzaja direktorija, no na to se
ne treba obazirati jer ih gotovo svaki pretrazivacki program interpretira drugacije. Elementi obiju
lista oznacavaju se s <LI>, a Netscape ne posjeduje nikakva prosirenja vezana uz njih. Ocekuje se
da bi u nekoj buducoj inacici jezika HTML, lista <MENU> mogla podrzavati ispisivanje elemenata
u vise stupaca, sto se trenutno moze izvesti samo uz pomoc tablica koje predstavljaju jedan od
noviteta u jeziku HTML razine 3. O izradi tablica ce biti vise rijeci u sljedecem poglavlju.
78
Hipertekstualne veze
Jedan od najvaznijih cimbenika koji HTML dokumente razdvaja od obicnih dokumenata koji se
mogu sastaviti i u tekstualnom procesoru je mogucnost ugradivanja hipertekstualnih veza. Te veze
se mogu ostvariti unutar istog dokumenta, s nekim drugim dokumentom koji predstavlja sastavni
dio vasih Web stranica ili cak s nekim drugim Web stranicama koje su smjestene na sasvim
drugom kraju svijeta. Naredba koja u jeziku HTML oznacava hipertekstualnu vezu je <A>, sto
proizlazi iz rijeci sidro (anchor) a osim sto uvijek dolazi u paru sa zavrsnom oznakom </A>,
obavezno mora sadrzavati barem jedan argument. Bez navodenja ikakvih argumenata, ova naredba
ne bi imala nikakvog smisla i uopce ne bi utjecala na podatke koji se nalaze izmedu njezine
pocetne i zavrsne oznake. U nastavku ovog poglavlja bit ce rijeci o tome koji se argument koristi za
koji tip hipertekstualne veze.
Veza s drugim Web stranicama
Ukoliko naredbu <A> zelite iskoristiti za ostvarivanje hipertekstualne veze s nekim drugim
dokumentom na Webu, potrebno je dodijeliti joj argument HREF=objekt (hypertext
reference). Isti se argument koristi i kod povezivanja raznih dokumenata koji sacinjavaju iste Web
stranice, o cemu ce biti vise rijeci kasnije. Objekt kojega u ovom slucaju valja navesti s
argumentom HREF je URL adresa Web stranica s kojima namjeravate ostvariti vezu, a izmedu
pocetne i zavrsne oznake za hipertekstualnu vezu navodi se tekst koji ce posluziti kao sidro. Da se
podsjetite sto je sidro hipertekstualne veze prolistajte drugo poglavlje. Sav tekst u lunkciji sidra bit
ce u pretrazivackom programu posebno istaknut. Najcesce se takav tekst prikazuje podcrtan i u
plavoj boji, sto je slucaj i s Netscapeom i Mosaicom. Sljedecim je primjerom prikazano
ostvarivanje hipertekstualne veze s nekoliko Web stranica smjestenih na razlicitim lokacijama u
svijetu.
veza1.htm
<HTML>
<HEAD>
<TITLE>Zanimljive Web stranice</TITLE>
<HEAD>
<BODY>
Na Internetu mo`ete bez problema preputovati cijeli svijet bez da
se dignete da svoje stolice, ponajprije zahvaljuju}i World Wide
Webu. Od nogih mjesta koja su vrlo zabavna i ~esto posje}ivana,
rijetka su zanimljiva kao i Web stranice <A
HREF=http://www.whitehouse.gov/>Bijele Ku}e</A>. Druga
zanimljiva mjesta ravrstana su po tematici.
<H3>Hrvatska na Webu</H3>
<UL>
79
<LI> <A HREF=http://tjev.tel.etf.hr/>O Hrvatskoj</A>
<LI> <A HREF=http://regoc.srce.hr/>SRCE</A>
<LI> <A HREF=http://www.hrt.com.hr/>Hrvatska radio
televizija</A>
</UL>
<H3>Korisne informacije</H3>
<UL>
<LI> <A HREF=http://www.ziff.com/~pcmag/>PC Magazin</A>
<LI> <A HREF=http://www.yahoo.com/>Yahoo Web adresar</A>
<LI> <A HREF=http://lycos.cs.cmu.edu/>Lycos Web adresar</A>
</UL>
i.t.d.
</BODY>
</HTML>
Na slici 4-21 nalazi se ovaj primjer prikazan u Netscapeu. Slozene URL adrese se ne vide na
gotovoj Web stranici, sto citatelju omogucava da do zeljenog dokumenta dode jednostavnim
klikom misa na njegovo ime.
S//ka 4-21: Hipertekstualne veze s drugim Web stranicama
Za ostvarivanje veze s objektima na Internetu koji nisu Web stranice dovoljno je samo da uz
argument HREF navedete odgovarajucu URL adresu. Kako se kreiraju URL adrese, objasnjeno je u
drugom poglavlju. Ako u svoju Web stranicu, primjerice, zelite uvrstiti hipertekstualnu vezu za
FTP arhivu avalon.irb.hr, napisat cete naredbu <A
HREF=ftp://avalon.irb.hr/>Avalon</A>. Na isti se nacin mogu ostvarivati veze s
Gopher posluziteljima, Usenet konlerencijama i drugim objektima na Internetu. Sljedecim je
primjerom ilustrirana upotreba razlicitih tipova URL adresa kod kreiranja hipertekstualne veze u
HTML dokumentu.
veza2.htm
<H3>Gopher</H3>
<UL>
<LI> <A HREF=gopher://gopher.loc.gov/>Library of Congres -
najve}a knji`nica u Americi</A>
<LI> <A HREF=gopher://rujan.srce.hr/>Gopher poslu`itelj na
SRCU</A>
</UL>
<H3>FTP</H3>
<UL>
<LI> <A HREF=ftp://avalon.irb.hr/pub/win3/>CICA mirror arhiva na
Avalonu</A>
80
<LI> <A HREF=ftp://carnet.hr/>CARNet FTP poslu`itelj</A>
</UL>
<H3>Elektroni~ka po{ta</H3>
<UL>
<LI> <A HREF=mailto:president@whitehouse.gov>Bill Clinton</A>
<LI> <A HREF=mailto:vice-president@whitehouse.gov>Al Gore</A>
</UL>
Slika 4-22 prikazuje ovaj primjer nakon ucitavanja u Netscape. Ona ujedno i prikazuje kako se
pomocu World Wide Weba moze slati elektronicka posta. U Hrvatskoj, na zalost, necete za sada
moci slati e-mail iz vaseg pretrazivackog programa jer za to nije instaliran potreban soltver na
racunalima koja vam omogucavaju da ostvarite modemsku vezu s Internetom putem protokola
SLIP. Vise o SLIP-u i Internetu u Hrvatskoj procitajte u Znakovoj knjizi InternetZHR - Kako na
Mrezu iz Hrvatske.
S//ka 4-22: Veze s objektima koji nisu na Webu
Vjerojatno ste vec primijetili da pretrazivacki programi prikazuju svako sidro hipertekstualne veze
na jednak nacin, bez obzira o kojoj se vrsti objekta povezanoj s tom vezom radi. HTML naredbama
necete moci razne tipove hipertekstualnih veza oznacavati na razlicite nacine, no taj cete problem
moci uspjesno rijesiti ubacivanjem slicica sa simbolima pojedinog tipa veze pokraj samog sidra.
Veliki broj takvih slicica pronaci cete na jednoj od prilozenih disketa, a kako se one ukljucuju u
Web stranicu bit ce objasnjeno na kraju ovog poglavlja. Sidro za hipertekstualnu vezu moze
predstavljati i slika, a ne samo tekst, o cemu ce takoder biti vise rijeci na kraju poglavlja.
Povezivanje dokumenata u iste Web stranice
Mnoge se Web stranice u svijetu sastoje od samo jednog dokumenta u kojem se nalazi nekoliko
odlomaka teksta, par slika i mozda kakva lista drugih zanimljivih stranica na Webu, no jos je vise
onih koje sacinjavaju i po nekoliko dokumenata medusobno povezanih hipertekstualnim vezama.
Vise dokumenata se moze povezati u iste Web stranice na dva nacina. Tezi nacin bio bi slican
izradi hipertekstualnih veza o kakvima je bilo rijeci u prethodnih nekoliko odlomaka, navodenjem
cijele URL adrese za svaki pojedini dokument. Takav oblik povezivanja dokumenata koji su
najvjerojatnije smjesteni u istom podstablu direktorija, ako ne i u istom direktoriju, nema previse
smisla jer vas pretrazivacki program tada bespotrebno uspostavlja novu vezu s istim racunalom.
Laksi nacin spajanja dokumenata je jednostavno navodenje njihovih imena ako se nalaze u istom
direktoriju, odnosno punih putanja ako su smjesteni u razlicitim direktorijima. Ako je, primjerice,
vasa pocetna stranica smjestena u datoteci index.html, a takoder ste sastavili i dokument s
imenom podaci.html, moci cete kreirati ovakvu hipertekstualnu vezu:
81
Tako|er mo`ete pogledati i <A HREF=podaci.html>statisti~ke
podatke</A> vezane uz ovaj materijal...
Ako se vase stranice sastoje od vise dokumenata, dobro bi bilo da osmislite zanimljiv i
lunkcionalan nacin da ih medusobno povezete i na taj nacin ih uredno organizirate. Jedno od boljih
rjesenja je upotreba hijerarhijske strukture smjestanja datoteka po tematski razdvojenim
direktorijima. Sljedeci primjer prikazuje kako mozete na dobar nacin organizirati stranice na
kojima pohranjujete zanimljive shareware programe.
veza3.htm
<HTML>
<HEAD>
<TITLE>Shareware za svakoga</TITLE>
</HEAD>
<BODY>
<H2>Dobrodo{li na arhivu zanimljivih shareware programa</H2>
<B>HTML alati</B>
<UL>
<LI><A HREF=htmlalat/webedit.html>Web Editor for Windows</A>
<LI><A HREF=htmlalat/mapthis.html>Map This!</A>
<LI><A HREF=htmlalat/lview.html>LView Pro</A>
<LI><A HREF=htmlalat/wwwstat.html>WWW Stat</A>
</UL>
<B>Programi za crtanje</B>
<UL>
<LI><A HREF=crtanje/neopaint.html>Neopaint 3.1</A>
<LI><A HREF=crtanje/psp.html>Paint Shop Pro 3.11</A>
<LI><A HREF=crtanje/wjpeg.html>Win JPEG 2.76</A>
</UL>
Pro~itajte tako|er i neke napomene o na~inu distribucije <A
HREF=share.html><I>shareware</I> programa</A>.
</BODY>
</HTML>
Kada redoviti posjetitelji ovakve Web stranice zele provjeriti ima li na njima kakvih novih
shareware programa ili ako odluce uputiti svoje prijatelje na te stranice, morat ce upotrijebiti
njihovu URL adresu. Kad se ucita pocetna stranica, odnosno dokument iz ovog primjera, na ekranu
ce se vidjeti tekst kao i na slici 4-23. Citatelji, medutim, ne moraju pamtiti URL adrese za svaki
pojedini program pohranjen na tim stranicama, vec je dovoljno da ucitaju pocetnu stranicu i na njoj
pronadu hipertekstualnu vezu za ono sto ih zanima.
82
S//ka 4-23: Dobro organizirana shareware arhiva
Ako citatelj zeli saznati cemu sluzi program Map This!, kliknut ce misem na hipertekstualnu vezu
Map This!, te ce se potom u prozoru njegovog pretrazivackog programa prikazati dokument koji
je smjesten u poddirektoriju htmlalat pod imenom mapthis.html. Pogledajte u sljedecem
primjeru koji je ovdje u ulozi tog dokumenta na koji je nacin rijeseno ostvarivanje hipertekstualne
veze s pocetnom stranicom.
mapthis.htm
<HTML>
<HEAD>
<TITLE>Map This!</TITLE>
</HEAD>
<BODY>
<H1>Map This!</H1>
<B>Map This!</B> je program namijenjen izradi slikovnih mapa koje
se mogu ugraditi u va{e Web stranice. Mape daju poseban grafi~ki
efekt dokumentima na Webu, no prili~no ih je te{ko izraditi bez
ovog pomo}nog programa.
<P>
I vi mo`ete <A HREF=ftp:mapthis.zip>isprobati Map This!</A> uz
uvijet da autoru uredno platite program ako vam se svidi i ako ga
namjeravate zadr`ati.
<P>
Tako|er vam preporu~ujemo da isprobate i program <A
HREF=../crtanje/psp.html>Paint Shop Pro 3.0</A> za crtanje slika
koje vam kasnije mogu poslu`iti kao mape.
<P><HR><P>
<A HREF=../index.html>Povratak na po~etnu stranicu</A>
</BODY>
</HTML>
Na slici 4-24 mozete pogledati ovaj dokument ucitan u Netscape.
S//ka 4-24: Stranica o programu Map Th/s!
Vjerojatno ste primijetili da se u dokumentu sa slike 4-24 nalazi i naredba <A
HREF=ftp:mapthis.zip>. Ona predstavlja hipertekstualnu oznaku pomocu koje citatelj
moze preuzeti navedenu datoteku putem FTP protokola. Nakon sto citatelj klikne na podcrtani tekst
oznacen ovom naredbom, pretrazivacki program ce zapoceti s prebacivanjem datoteke
83
mapthis.zip na njegovo racunalo. U ovom se slucaju, dakako, ta datoteka mora nalaziti u istom
direktoriju kao i dokument mapthis.html na posluziteljskom racunalu.
Ostvarivanje hipertekstualne veze s pocetnom stranicom ostvareno je u ovom slucaju navodenjem
putanje i imena datoteke u kojem je sadrzana. Putanja nekog dokumenta se uvijek mora zapisivati
pocev od direktorija u kojem se nalazi datoteka iz koje se ostvaruje hipertekstualna veza s tim
dokumentom, sto je i razlog zbog cega se na pocetku obiju putanji iz prethodnog primjera navode
dvije tocke (oznaka za jedan korak nize u stablu poddirektorija).
Veze unutar istog dokumenta
Do sada su u knjizi uglavnom bili prikazivani kratki primjeri koji bi nakon ucitavanja u Netscape
cijeli bili prikazani na jednom ekranu. Takav pristup dizajnu Web dokumenata uvijek ce rezultirati
stranicama kojima se lako upravlja i koje su uredne i pregledne. Katkada je, medutim, nemoguce
napraviti dokument koji se ne rasteze barem kroz nekoliko ekrana, pa se njime mora upravljati
pomocu pomicne trake smjestene uz desni rub prozora pretrazivackog programa.
Zamislite da je cijelo ovo poglavlje napravljeno kao jedan HTML dokument. Mozda bi bilo bolje
rastaviti cijelo poglavlje u nekoliko dokumenata, no cak bi i tada vecina tih dokumenata bila
preopsirna da stanu u jednu stranicu koja nije veca od dva do tri ekrana. Ukoliko namjeravate na
Webu prezentirati neki veci dokument koji sadrzi nekoliko naslova poput ovog poglavlja, najbolje
je da ga smjestite u jednu stranicu koja pri svom vrhu sadrzi hipertekstualne veze pomocu kojih
citatelj moze skociti do pojedinog naslova.
Cesto ce vam se dogadati da se nadete u situaciji kada morate odluciti je li neki dokument
predugacak da ga smjestite u jednu stranicu ili nije. Imajte na umu da stranice ne smiju biti jako
dugacke jer im tada treba vise vremena da se prenesu preko Internetskih veza do citatelja, no ne
smiju biti niti prekratke jer cete ih na taj nacin rastaviti u velik broj malih datoteka sto ih cini
nepreglednima. Ovo bi se poglavlje, primjerice, moglo smjestiti u jedan dokument, no cijela knjiga
bi bez sumnje morala biti rastavljena u vise manjih dokumenata.
Kako bi vasi dugacki dokumenti bili sto pregledniji, morat cete ih obogatiti hipertekstualnim
vezama cijom upotrebom vas pretrazivacki program prebacuje na neko tocno odredeno mjesto u
dokumentu. Ocito je da takvo mjesto mora biti na neki nacin oznaceno kako biste ga u naredbi
<A>, koja sluzi kreiranju veze mogli navesti kao argument. HTML naredba namijenjena navodenju
mjesta koje ce predstavljati cilj hipertekstualne veze je <A NAME=oznaka> i valja je smjestiti
bas na to mjesto u dokumentu. Vazno je napomenuti da ova oznaka ne dolazi u paru sa zavrsnom
oznakom, odnosno da ne morate nigdje navesti i naredbu </A>. Argumentu NAME se pridruzuje
bilo koji niz znakova ili brojeva, no preporucljivo je da to bude neka smislena oznaka poput
poglavlje1 ili literatura. Neki pretrazivacki programi inzistiraju na tome da se oznaka sastoji samo
od malih slova, pa je uvijek korisno drzati se i tog pravila, posebice kod dokumenata koje ce citati
veci broj ljudi.
Naredba za kreiranje hipertekstualne veze pomocu koje ce se moci ostvariti skok do oznake
kreirane prethodnom naredbom ista je kao i ona kojom su se kreirale hipertekstualne veze za
povezivanje vise dokumenata u iste Web stranice i za povezivanje s drugim Web stranicama u
84
svijetu, samo sto se umjesto imena datoteke ili URL adrese navodi oznaka koju ste naveli kao cilj
veze prethodena oznakom #. Sve ovo zvuci prilicno slozeno, no uvjerit cete se u suprotno kada
pogledate sljedeci primjer.
Pretpostavimo da ste kreirali veliki dokument u kojem se pri kraju nalazi nekakav popis literature.
Mjesto s tim popisom mozete oznaciti s <A NAME=literatura>, dok na pocetku
dokumenta mozete ubaciti ovaj redak:
Pri kraju ovog dokumenta nalazi se i <A HREF=#literatura>popis
literature</A>.
Nastojte tekst koji vam sluzi kao sidro za hipertekstualnu vezu sto bolje implementirati unutar
okolnog teksta kao sto je to ucinjeno u prethodnom primjeru. Izbjegavajte naredbe poput ove:
<A HREF=#literatura>Kliknite ovdje</A> za popis literature.
Ovakve hipertekstualne oznake cine vase stranice dosadnima, a vas osobom koja ne zna sastaviti
zanimljiv tekst za primamljive Web dokumente. Izraz kliknite ovdje ne voli niti jedan citatelj
Weba i stranice koje ga sadrze obicno odmah preskace.
Jedna vazna stvar koju morate imati na umu je cinjenica da mjesto u dokumentu na koje ubacujete
oznaku za cilj hipertekstualne veze pretrazivacki programi stavljaju na vrh svojeg prozora. Sljedeci
primjer prikazuje cestu pogresku kod kreiranja ovakvih veza.
<H2>Popis literature</H2>
<A NAME=literatura>
<UL>
<LI>^arobnjak iz Oza
<LI>Ivica i Marica
<LI>Kona~no dimenzionalni vektorski prostori
</UL>
Citatelj koji ce pri zamisljenom vrhu ovog dokumenta upotrijebiti hipertekstualnu vezu koja ga
prebacuje na mjesto oznaceno s literatura nece na ekranu pretrazivackog programa vidjeti
naslov oznacen s naredbom <H2> jer se on nalazi iznad oznake cilja. Prvi redak teksta koji ce se u
ovom slucaju vidjeti prikazan na ekranu bit ce Carobnjak iz Oza. U elektno oblikovanim Web
stranicama ovo bi mjesto u dokumentu bilo sastavljeno ovako:
85
<A NAME=literatura>
<H2>Popis literature</H2>
<UL>
<LI>^arobnjak iz Oza
<LI>Ivica i Marica
<LI>Kona~no dimenzionalni vektorski prostori
</UL>
Hipertekstualne veze unutar istog dokumenta cesto se koriste kod izrade vecih abecednih popisa
kako bi citatelju pomogle da sto prije dode do zeljenog podatka. Sljedeci primjer prikazuje jedan
takav dokument.
veza4.htm
<HTML>
<HEAD>
<TITLE>Serija za neznalice</TITLE>
</HEAD>
<BODY>
<H1>Abecedni popis knjiga iz serije ..za neznalice</H1>
<HR><BR>
Pre~ice po dijelovima:
<A HREF=#a-h>A-H</A> ---
<A HREF=#i-p>I-P</A> ---
<A HREF=#r-`>R-@</A>
<P><HR><P>
<A NAME=a-h>
<H2>A-H</H2>
<UL>
<LI><I>Access 2 za neznalice</I><BR> Scott Palmer<P>
<LI><I>AutoCAD za neznalice</I><BR> Bud Smith<P>
<LI><I>CorelDraw! 5 za neznalice</I><BR> Deke McClelland<P>
<LI><I>Excel za neznalice</I><BR> Greg Harvey<P>
<LI><I>FoxPro 2.6 za neznalice</I><BR> John Kaufeld
</UL>
<A NAME=i-p>
<H2>I-P</H2>
<UL>
<LI><I>Internet za neznalice</I><BR>
John Levine i Carol Braoudi<P>
<LI><I>Microsof Office za neznalice</I><BR> Roger C. Parker<P>
<LI><I>Multimedija i CD-ROM-ovi za neznalice</I><BR>
Andy Rathbone<P>
<LI><I>Nadogradnja i popravak PC-a za neznalice</I><BR>
Andy Rathbone<P>
<LI><I>Paradox 5 for Windows za neznalice</I><BR> John Kaufeld<P>
<LI><I>PC-i za neznalice</I><BR> Dan Gookin i Andy Rathbone
86
</UL>
<A NAME=r-`>
<H2>R-@</H2>
<UL>
<LI><I>Video i kamkorderi za neznalice</I><BR> Gordon McComb<P>
<LI><I>Windows 3.11 za neznalice</I><BR> Andy Rathbone<P>
<LI><I>Windows 95 za neznalice</I><BR> Andy Rathbone<P>
<LI><I>Word for Windows 6 za neznalice</I><BR> Dan Gookin
</UL>
</BODY>
</HTML>
Slika 4-25 prikazuje ovaj primjer nakon ucitavanja u Netscape, no pravi cete osjecaj o tome kako
rade hipertekstualne veze unutar istog dokumenta dobiti tek ako ga sami isprobate u vlastitom
pretrazivackom programu. Na slici se, naravno, ne vidi cijeli dokument jer on ne stane u jedan
Netscapeov prozor.
S//ka 4-25: Hipertekstualne veze unutar istog dokumenta
Iako HTML kd u prethodnom primjeru izgleda prilicno slozeno, na slici se vidi da on rezultira
preglednom Web stranicom koja je uz to i lako upotrebljiva. Ovakvi popisi najcesce su puno duzi
od ovog primjera, te kod njih lunkcionalnost ovakvih hipertekstualnih veza posebno dolazi do
izrazaja. Zamislite da je svaka od navedenih knjiga u popisu iz primjera ujedno i sidro za
hipertekstualnu vezu cijom upotrebom se dolazi do dokumenta koji opisuje tu knjigu. Tada HTML
kd postaje jos slozeniji, ali i Web stranice postaju kompletnijima. Uz sve to se moze dodati jos i
nekoliko gralickih elekata kako bi stranice izgledale jos bolje, pa se tri crtice koje razdvajaju slova
abecede na vrhu stranice mogu zamijeniti raznobojnim kuglicama. O tome ce biti vise rijeci na
kraju ovog poglavlja.
Kao sto se mogu postavljati hipertekstualne veze za pojedina mjesta u istom dokumentu, tako se
mogu na slican nacin postavljati veze i za odredena mjesta u drugim dokumentima. To je vrlo
korisna opcija ukoliko zelite citatelja uputiti samo na dio nekog velikog dokumenta za koji smatrate
da bi ga mogao zanimati. Premda je ovo vrlo korisna mogucnost jezika HTML, rijetko tko je
upotrebljava zbog potrebe za cestim ispitivanjem ispravnog djelovanja svih ovako postavljenih
hipertekstualnih veza.
Pretpostavimo da se dokument iz prethodnog primjera nalazi na URL adresi
http://public.srce.hr/info/knjige/neznalice/popis.html i da zelite
citatelja svoje Web stranice uputiti na dio tog dokumenta koji je oznacen s <A NAME=i-p>. U
tom cete slucaju unutar HTML dokumenta koji predstavlja vasu Web stranicu napisati sljedecu
naredbu:
87
Vi{e o <I>Internetu za neznalice</I> i o drugim naslovima iz iste
serije saznat }ete ako pro~itate <A HREF=http://public.srce.hr/
info/knjige/neznalice/popis.html#i-p>opis svake pojedine
knjige</A>.
Dakle, nakon sto argumentu HREF u naredbi <A> dodijelite URL adresu zeljenog dokumenta,
navedite jos i ime odgovarajuce oznake, te ta dva elementa razdvojite znakom #.
Hipertekstualne veze koje pokazuju na odredeni dio nekog drugog dokumenta na jednostavan nacin
ce obogatiti vase Web stranice, posebice onda kada se sastoje od vise velikih i slozenih
dokumenata. Kod njihove upotrebe, medutim, morate biti vrlo oprezni jer se moze lako dogoditi da
promijenite ime nekoj oznaci koja predstavlja cilj veze, a da isto zaboravite uciniti i u svim
dokumentima koji sadrze vezu za tu oznaku. Ovo pogotovo valja imati na umu kada tu opciju
koristite s dokumentima koje odrzava netko drugi, a ne vi osobno jer tada necete niti znati da je
doslo do nekakve promjene ako redovito ne testirate svoje Web stranice. Lako cete primijetiti ako
neki dokument nestane s Weba, no sanse su puno manje ako autor tog dokumenta izvrsi samo
nekakve promjene.
Slike i multimedija
Ubacivanje slika i ostalih multimedijalnih zapisa u HTML dokumente posljednji je element jezika
o kojemu ce biti rijeci u ovom poglavlju. Slike se, kao sto vam je vec poznato, ugraduju u Web
stranicu vrlo jednostavno, pomocu naredbe <IMG> (image) koja moze imati nekoliko argumenata.
Jedno ogranicenje, medutim, postoji, a to je cinjenica da slike moraju biti pohranjene u lormatu
GIF (CompuServe Graphics Interchange Format) ili JPEG (Joint Photographic Expert Group
format). Ako sliku koju zelite objaviti na Webu imate pohranjenu u nekom drugom lormatu kakav
je, primjerice, TIFF ili PCX, morat cete je prethodno konvertirati u jedan od podrzanih lormata uz
pomoc nekog programa namijenjenog toj radnji. Na jednoj od prilozenih disketa uz ovu knjigu
nalazi se i program LView Pro koji vam pruza mogucnost medusobnog konvertiranja mnogih
gralickih lormata datoteka.
Rad sa slikama
Naredba <IMG> mora sadrzavati argument SRC=datoteka kojim se navodi ime datoteke u
kojoj je pohranjena slika koju zelite prikazati. Sljedeci primjer prikazuje upotrebu ove naredbe u
dokumentu koji opisuje Znakovu knjigu Internet za neznalice.
slika1.htm
88
<HTML>
<HEAD>
<TITLE>Internet za neznalice</TITLE>
</HEAD>
<BODY>
<IMG SRC="znintnet.gif">
<H1>Internet za neznalice</H1>
Pro{vrljajte Internetom pomo}u ovog jednostavnog i zabavnog vodi~a
kroz naredbe, uslune servise, osnovne komunikacije ra~unalom i
na~ine povezivanja na Internet!
<P>
@elite li saznati vi{e o ovoj knjizi?
<A HREF="inter2.html">Da</A> --- Ne
</BODY>
</HTML>
Slika 4-26 prikazuje ovaj primjer nakon ucitavanja u Netscape. Kao sto i vidite, datoteka u kojoj je
pohranjena naslovnica knjige zove se znintnet.gif, i smjestena je u istom direktoriju kao i
sam dokument.
S//ka 4-26: Slika unutar HTML dokumenta
Slike i dokumenti ne moraju nuzno biti smjesteni u istom direktoriju na disku. U tom se slucaju
argumentu SRC mora dodijeliti i relativna putanja datoteke zajedno s njezinim imenom kako bi je
pretrazivacki program mogao pronaci na posluziteljskom racunalu. Kada bi, na primjer, datoteka iz
prethodnog primjera bila smjestena u poddirektoriju slike direktorija u kojemu se nalazi
dokument, tada bi argumentu SRC trebali dodijeliti vrijednost slike/znintnet.gif. Kod
takvih navodenja putanja valja biti vrlo oprezan da se ime svakog direktorija i datoteke sa slikom
navede ispravno, jer u suprotnom pretrazivacki program nece iscrtati sliku. Sto se dogada kada se
pogresno upise ime datoteke koja sadrzi sliku, pogledajte na slici 4-27.
S//ka 4-27: Netocno navedeno ime datoteke sa slikom
Na dobro dizajniranim Web stranicama cesto se upotrebljavaju slicice umjesto teksta, koje se
nazivaju ikone. Stranicu s prethodnim primjerom mozemo uljepsati ako umjesto teksta Da i
Ne, te tri crtice koje se nalaze u istom retku, ubacimo ikone. To je ucinjeno u sljedecem
primjeru.
slika2.htm
89
<HTML>
<HEAD>
<TITLE>Internet za neznalice</TITLE>
</HEAD>
<BODY>
<IMG SRC="znintnet.gif">
<H1>Internet za neznalice</H1>
Pro{vrljajte Internetom pomo}u ovog jednostavnog i zabavnog vodi~a
kroz naredbe, uslune servise, osnovne komunikacije ra~unalom i
na~ine povezivanja na Internet!
<P>
@elite li saznati vi{e o ovoj knjizi?
<A HREF="inter2.html"><IMG SRC="da.gif"></A>
<IMG SRC="ball.gif"> <IMG SRC="ne.gif">
</BODY>
</HTML>
Slika 4-28 prikazuje novu i ljepsu Web stranicu od prethodne.
S//ka 4-28: Upotreba ikona umjesto teksta
Vjerojatno ste primijetili da je u ovom primjeru slicica s oznakom Da obuhvacena naredbom za
ostvarivanje hipertekstualne veze. Time je ujedno i prikazano kako se za sidro hipertekstualne veze
moze koristiti slika umjesto teksta - dovoljno je naredbu za ubacivanje slike napisati na mjestu gdje
bi inace bio smjesten tekst. Kako bi citatelji mogli prepoznati sliku koja predstavlja sidro za
hipertekstualnu vezu, pretrazivacki programi ce tu sliku posebno uokviriti i to najcesce plavom
bojom.
Mnogi korisnici Weba zbog sporih veza na Internetu koriste opciju u svojim pretrazivackim
programima koja im omogucava da pregledavaju dokumente bez ucitavanja slika. Zbog toga neke
Web stranice koje inace izgledaju lijepo mogu djelovati itekako besmisleno kada ih gledaju
korisnici s iskljucenom gralikom u pretrazivackom programu ili korisnici tekstualnih
pretrazivackih programa. Uvijek je dobro pregledati gotov dokument prije njegovog objavljivanja
na Internetu i s iskljucenom gralikom u pretrazivacu, kako biste se uvjerili da stranica i tada
izgleda dobro.
Na PC i Macintosh racunalima najvise se koriste programi Netscape i Mosaic za setnju po World
Wide Webu, no na sustavima koji rade pod UNIX platlormom najpopularniji je pretrazivacki
program Lynx koji ima tekstualno gralicko sucelje (vise o tome mozete pronaci u drugom
poglavlju). Lynx se, dakle, koristi mnogo, ali on nema mogucnost prikazivanja slika unutar
dokumenta. Kako bi i taj problem bio rijesen, u jeziku HTML postoji argument ALT=tekst
koji se moze pridruziti naredbi <IMG> s ciljem navodenja teksta koji ce se u pretrazivackim
programima s tekstualnim suceljem prikazati umjesto slika. Sljedeci primjer prikazuje kako se uz
male izmjene prethodni dokument moze napraviti preglednim i za korisnike Lynxa.
90
slika3.htm
<HTML>
<HEAD>
<TITLE>Internet za neznalice</TITLE>
</HEAD>
<BODY>
<IMG SRC="znintnet.gif" ALT="*Slika s naslovnicom*">
<H1>Internet za neznalice</H1>
Pro{vrljajte Internetom pomo}u ovog jednostavnog i zabavnog vodi~a
kroz naredbe, uslune servise, osnovne komunikacije ra~unalom i
na~ine povezivanja na Internet!
<P>
@elite li saznati vi{e o ovoj knjizi?
<A HREF="inter2.html"><IMG SRC="da.gif" ALT="*Da*"></A>
<IMG SRC="ball.gif" ALT="---"> <IMG SRC="ne.gif" ALT="*Ne*">
</BODY>
</HTML>
Na slici 4-29 prikazan je sljedeci primjer nakon ucitavanja u Lynx. Kod navodenja alternativnog
teksta za slike ne morate navoditi nikakve zagrade ili druge slicne oznake, kao sto je to ucinjeno u
ovom primjeru, no uvijek je dobro dokument napraviti sto preglednijim za svakog citatelja.
Zagrade koje su koristene ovdje zasigurno bi pomogle korisniku Lynxa da shvati koja je lunkcija
pojedine slike u dokumentu.
S//ka 4-29: Tekstualne oznake umjesto slika u Lynxu
Razmjestaj slika u dokumentu
Ako jos jednom pogledate sliku 4-28, vidjet cete da je tekst Zelite li saznati vise o ovoj knjizi?
poravnat s donjim rubom ikona koje nose oznake Da i Ne, te s kuglicom koja je smjestena
izmedu njih. Ako zelite slike poravnati nekako drugacije, morat cete uz naredbu <IMG> navesti
argument ALIGN, kojim se odreduje nacin smjestaja slike u okolni tekst. U standardnom jeziku
HTML tom argumentu mozete dodijeliti vrijednosti TOP, MIDDLE i BOTON, vec prema tome
zelite li tekst poravnati s gornjim rubom, sredinom ili donjim rubom slike. Sljedeci primjer ilustrira
sve tri mogucnosti.
slika4.htm
91
<H1>Na~ini poravnavanja slika</H1>
<H3>ALIGN=TOP</H3>
@elite li saznati vi{e o ovoj knjizi?
<IMG SRC="da.gif" ALIGN=TOP> <IMG SRC="ball.gif" ALIGN=TOP>
<IMG SRC="ne.gif" ALIGN=TOP>
<H3>ALIGN=MIDDLE</H3>
@elite li saznati vi{e o ovoj knjizi?
<IMG SRC="da.gif" ALIGN=MIDDLE> <IMG SRC="ball.gif" ALIGN=MIDDLE>
<IMG SRC="ne.gif" ALIGN=MIDDLE>
<H3>ALIGN=BOTTON</H3>
@elite li saznati vi{e o ovoj knjizi?
<IMG SRC="da.gif" ALIGN=BOTTON> <IMG SRC="ball.gif" ALIGN=BOTTON>
<IMG SRC="ne.gif" ALIGN=BOTTON>
Slika 4-30 prikazuje ovaj primjer nakon ucitavanja u Netscape.
S//ka 4-30: Nacini poravnavanja slike
Prilikom razmjestanja slika u dokumentu, imajte na umu da svi citatelji vase Web stranice nemaju
prozor pretrazivackog programa postavljen na jednaku velicinu, te da zbog toga ona moze izgledati
drugacije kod nekih korisnika. Pokusajte prilikom testiranja svog dokumenta prozor pretrazivackog
programa rastezati na razlicite velicine kako biste uocili eventualne nepravilnosti na ekranu, buduci
da pretrazivacki programi sami prebacuju tekst i slike u novi redak u ovisnosti o sirini prozora u
kojem se prikazuju. Ukoliko ne zelite da se iza neke slike nalazi bilo kakav tekst, najbolje je da iza
naredbe <IMG> dodate oznaku <BR>.
U standardnom jeziku HTML se u ravnini sa slikom moze nalaziti najvise jedan redak teksta, sto
znaci da pokraj slike ne mozete smjestiti neki malo duzi tekst. U nekim slucajevima je vrlo korisno
imati vise redaka teksta u ravnini sa slikom, pa su stoga autori Netscapea napisali prosirenja jeziku
koja to i omogucavaju. Zapravo se radi o prosirenom skupu vrijednosti koje se mogu dodijeliti
argumentu ALIGN u naredbi <IMG>. Koje je znacenje svake od tih vrijednosti, pogledajte u tablici
4-5.
Vrijednost argumenta Znacenje
ALIGN=LEFT
Popunjavanje tekstom desno od slike
ALIGN=RIGHT
Popunjavanje tekstom lijevo od slike
ALIGN=TEXTTOP
Poravnavanje slike s najvisim slovom u tekstu
ALIGN=ABSMIDDLE
Isto kao i ALIGN=MIDDLE
ALIGN=ABSBOTTOM
Isto kao i ALIGN=BOTTOM
Tab//ca 4-5: Netscapeova prosirenja za razmjestaj slika
92
Iako Netscapeova prosirenja za razmjestaj slika pruzaju puno vise mogucnosti, ona znaju biti i
zbunjujuca. Neke od novih oznaka zapravo su sinonimi za oznake podrzane standardnim jezikom
HTML, sto je besmisleno. Kod upotrebe preostalih prosirenja uvijek morate imati na umu da
stranica mora izgledati dobro i na ekranima korisnika koji upotrebljavaju neki drugi pretrazivacki
program umjesto Netscapea. Ukoliko se toga ne pridrzavate, vas ce dokument mozda izgledati
dobro u Netscapeu, ali i prilicno nepregledno i neuredno u Mosaicu ili nekom trecem
pretrazivackom programu. Zbog toga je najbolje da uopce ne upotrebljavate vrijednosti TEXTTOP,
ABSMIDDLE i ABSBOTTOM s argumentom ALIGN jer se njima postizu gotovo isti rezultati kao i s
vrijednostima TOP, MIDDLE i BOTTOM koje podrzavaju svi pretrazivacki programi.
Puno su korisnije nove Netscapeove vrijednosti LEFT i RIGHT ciju je upotrebu bolje prikazati
primjerom nego objasnjavati. Sljedeci primjer koristi obje vrijednosti.
slika5.htm
<IMG SRC="word.gif" ALIGN=LEFT>
<B>Word for Windows 6.0</B><BR>
S desne strane se nalazi ikona tekstnog procesora <I>Word for
Windows 6.0</I> za kojega mnogi tvrde da je najbolja aplikacija
tog tipa napravljena za Windows okruje.
<P><HR><P>
<IMG SRC="math.gif" ALIGN=RIGHT>
<B>Mathematica 2.2.2</B><BR>
Program <I>Mathematica 2.2.2</I> je numeri~ki i simboli~ki
kalkulator, sustav za vizualizaciju, programski jezik, alat za
modeliranje i analizu podataka, te platforma za razvoj softvera u
slubi znanosti.
Slika 4-31 prikazuje kako ovaj primjer izgleda nakon ucitavanja u Netscape. Na njoj se odmah
primjecuje znatan napredak nad primitivnim opcijama za razmjestaj slika koje podrzava standardni
jezik HTML.
S//ka 4-31: Slike poravnate uz pomoc Netscapeovih prosirenja
Buduci da drugi pretrazivacki programi ne podrzavaju ovakav nacin integracije slike i teksta,
uvijek je dobro pogledati kako stranica koja koristi tu mogucnost izgleda u jednom od tih
programa. Na slici 4-32 nalazi se isti ovaj primjer ucitan u Mosaic, gdje se odmah vide jasne
razlike sa slikom 4-31 kada je koristen Netscape. Zahvaljujuci kratkim naslovima koji su otisnuti
masnim slovima, ova stranica izgleda pregledno i u Mosaicu. Kod upotrebe ovakvog poravnavanja
slike s tekstom uvijek se mora paziti na to sto ce biti prikazano uz sliku u drugim pretrazivackim
programima osim Netscapea.
93
S//ka 4-32: Isti primjer ucitan u Mosaic
Ako ste malo detaljnije pogledali prethodni primjer, primijetili ste da oznaka <BR> nece novi
redak teksta prebaciti ispod slike, vec jednostavno ispod prethodnog retka u podrucju desno,
odnosno lijevo od slike. Isto se dogada i s drugim slicnim oznakama kakve su <P> i <HR>, sve dok
se ne popuni sav prostor pokraj slike. To katkada nije elekt kojega zelite postici, posebice kada
radite s velikim slikama za koje nemate dovoljno popratnog teksta, pa se mozete posluziti
Netscapeovim prosirenjem naredbe <BR> koje vam omogucava da tekst ponovno postavite na rub
stranice. Kada zelite prijeci u novi red teksta koji se mora nalaziti ispod slike smjestene pomocu
argumenta ALIGN=LEFT, upotrijebite naredbu <BR CLEAR=LEFT>, a kada zelite napraviti isto
sa slikom smjestenom uz desni rub ekrana, upotrijebite naredbu <BR CLEAR=RIGHT>. Ako ste
koristili vise slika koje ste postavljali i uz desni i uz lijevi rub Netscapeovog prozora, a namjeravate
ih sve zaobici, zadajte naredbu <BR CLEAR=ALL>. Sljedeci primjer prikazuje upotrebu ovog
zanimljivog Netscapeovog prosirenja.
slika6.htm
<IMG SRC="word.gif" ALIGN=LEFT>
<IMG SRC="math.gif" ALIGN=RIGHT>
<CENTER>
<B>Word for Windows 6.0<BR>
Mathematica 2.2.2</B>
</CENTER>
<BR CLEAR=ALL>
<HR><P>
Gore desno se nalazi ikona tekstnog procesora <I>Word for Windows
6.0</I> za kojega mnogi tvrde da je najbolja aplikacija tog tipa
napravljena za Windows okruje.
<P><HR><P>
Program <I>Mathematica 2.2.2</I> je numeri~ki i simboli~ki
kalkulator, sustav za vizualizaciju, programski jezik, alat za
modeliranje i analizu podataka, te platforma za razvoj softvera u
slubi znanosti.
Na slici 4-33 mozete vidjeti ovaj primjer nakon ucitavanja u Netscape.
S//ka 4-33: Primjena razlicitih Netscapeovih prosirenja
Autori Netscapea napisali su jos nekoliko prosirenja za naredbu <IMG>, od kojih vam jedno
omogucava da navedete sirinu i visinu slike u pikselima. To se postize pomocu argumenata
WIDTH=x i HEIGHT=y, sto ce rezultirati brzim prikazivanjem Web stranice u pretrazivacki
94
program, jer ce Netscape prilikom ucitavanja dokumenta umjesto slike prikazati kvadratni okvir
zadane velicine, te ce nastaviti s ispisivanjem teksta. Tek kada se prikaze cijeli tekst ucitat ce se i
slike, pa ce citatelji moci prije doznati sto ste predstavili putem svoje Web stranice.
Jos jedno korisno Netscapeovo prosirenje je argument BORDER=n koji vam omogucava da sliku
obrubite plavim kvadratnim okvirom debljine n piksela. Ukoliko za vrijednost n navedete nulu,
slika nece imati nikakav okvir. Ova mogucnost je vrlo korisna kada zelite ujednaciti izgled vise
slika od kojih samo neke predstavljaju sidro za hipertekstualnu vezu, kao u sljedecem primjeru.
border.htm
@elite li saznati vi{e o ovoj knjizi?
<A HREF="inter2.html"><IMG SRC="da.gif" ALIGN=MIDDLE></A>
<IMG SRC="ball.gif" ALIGN=MIDDLE>
<IMG SRC="ne.gif" ALIGN=MIDDLE BORDER=2>
Slika 4-34 prikazuje ovaj primjer nakon ucitavanja u Netscape.
S//ka 4-34: Dodavanje okvira slikama
Posljednja dva Netscapeova prosirenja za naredbu <IMG> o kojima ce biti rijeci su argumenti
VSPACE=x i HSPACE=y kojima se moze odrediti velicina slobodnog prostora oko slike u
pikselima. Primijetili ste da se tekst koji je naveden uz slike prikazuje previse blizu slikama, sto
zasigurno nije elekt kojega zelite postici. Taj problem mozete rijesiti argumentom HSPACE
kojemu valja dodijeliti taman onoliku veliku vrijednost da slike budu odvojene od teksta na
prihvatljivu udaljenost. Najcesce se kao vrijednost navodi brojka 12. Argument VSPACE korisniji
je u slucaju kada zelite desno ili lijevo od slike smjestiti vise teksta no sto ga na to podrucje zaista
stane, a da se on na odredenom mjestu ne pomakne do ruba Netscapeovog prozora. Tada ovim
argumentom mozete prosiriti prazno podrucje iznad i ispod slike za zeljeni broj piksela. Sljedeci
primjer prikazuje upotrebu ovih dvaju argumenata.
slika7.htm
<IMG SRC="word.gif" ALIGN=LEFT HSPACE=12 VSPACE=15>
<H3>Word for Windows 6.0</H3>
S desne strane se nalazi ikona tekstnog procesora <I>Word for
Windows 6.0</I> za kojega mnogi tvrde da je najbolja aplikacija
tog tipa napravljena za Windows okruje.
<P><HR><P>
<IMG SRC="math.gif" ALIGN=LEFT HSPACE=12 VSPACE=15>
<H3>Mathematica 2.2.2</H3>
Program <I>Mathematica 2.2.2</I> je numeri~ki i simboli~ki
95
kalkulator, sustav za vizualizaciju, programski jezik, alat za
modeliranje i analizu podataka, te platforma za razvoj softvera u
slubi znanosti.
Na slici 4-35 nalazi se ovaj primjer prikazan u Netscapeu.
S//ka 4-35: Jos jedna primjena Netscapeovih prosirenja
Multimedijalni zapisi
Zvucni i videozapisi takoder se mogu ugraditi unutar HTML dokumenta, ali na nesto drugaciji
nacin od slika. Kod upotrebe tih multimedijalnih zapisa postoji jedno veliko ogranicenje, a to je
cinjenica da se oni ne mogu odsvirati ili prikazati iz pretrazivackih programa vec iz posebnih
dodatnih alata koji se katkada dobijaju, a katkada i ne s pretrazivackim programom. I ovdje se
uglavnom radi o shareware ostvarenjima i o besplatnim programima u javnom vlasnistvu.
Zvucni zapisi vrlo su zabavni i lijepo je vidjeti Web stranicu koja zna govoriti ili koja moze
odsvirati nekakvu pjesmu na vasem racunalu. Zvukovi se prilicno jednostavno ugraduju u HTML
dokument i to pomocu oznake za hipertekstualnu vezu kojoj se dodjeljuje argument HREF s
dodijeljenim imenom odgovarajuce datoteke. Tako se zvuk moze pokrenuti klikom misa na
nekakav tekst ili neku prikladnu slicicu. Najbolje je uzeti slicicu zvucnika, note ili nekog drugog
simbola koji asocira na glazbu i zvuk. Pozeljno je da zvuk bude pohranjen u micro-law lormatu
koji je prepoznatljiv po nastavku .au u imenu datoteke jer gotovo svaki pretrazivacki program zna
koji pomocni program mora pokrenuti da bi ga odsvirao. Ukoliko se posluzite nekim drugim
lormatom zapisa, postoji opasnost da neki citatelji nece moci odslusati vas zvucni zapis. U
nastavku je dan primjer naredbe kojom se zvuk moze ugraditi u HTML dokument.
A sada vas pozivam da odslu{ate <A HREF="pjesma.au">jednu
pjesmu</A> s mog posljednjeg albuma.
Isto se moze na elektan nacin ostvariti i sljedecim primjerom:
Sada moete odslu{ati jednu pjesmu s mog posljednjeg albuma:
<A HREF="pjesma.au"><IMG SRC="zvucnik.gif" ALT="<play>"></A>
96
Kada korisnik klikne na tekst jednu pjesmu, odnosno na slicicu sa simbolom zvucnika, datoteka
pjesma.au ce se prebaciti na njegovo racunalo (obicno se radi o datoteci velicine 100 K ili vise),
te ce je neki program kojega pokrene pretrazivacki program odsvirati. Budite oprezni pri ugradnji
zvucnih zapisa u svoje dokumente jer oni znaju biti iznimno veliki. U nekim slucajevima deset
sekundi zvuka moze biti pohranjeno u datoteci velikoj cak 150 K, sto predstavlja prilicno veliko
vremensko razdoblje za prenosenje na Internetu preko sporih komunikacijskih veza.
Videozapisi se na Internetu pohranjuju u dva lormata: QuickTime i MPEG (Motion Picture Experts
Group format). MPEG je, medutim, pravi lormat kojega valja odabrati za distribuciju putem
WWW-a, jer vecina pretrazivackih programa zna koji pomocni programcic mora pokrenuti kako bi
se videozapis mogao prikazati. Takoder, za prikazivanje MPEG videa postoji najvise besplatnih
programa za PC i za Macintosh racunala, te racunala s operativnim sustavom UNIX.
Koliko god zvucni zapisi mogu zauzimati puno prostora na disku, videozapisi mogu i po nekoliko
puta vise, pa ih ugradujte u svoje Web stranice samo ako su dovoljno kratki i zanimljivi, bez obzira
na to koliko oni cine vasu stranicu zanimljivijom. Ponovno se morate prisjetiti da citatelj koji se
nalazi na nekom drugom kontinentu nema previse strpljenja cekati da se cijela datoteka prebaci na
njegovo racunalo.
Naredba kojom se videozapisi ugraduju u HTML dokument ista je kao i ona za zvucne zapise, sto
pokazuje ovaj primjer:
Sada moete pogledati i moj najnoviji <A HREF="spot.mpeg">video
spot</A>.
Kao i u prethodnom slucaju i ovdje mozete unutar oznake za hipertekstualnu vezu ubaciti naredbu
za ugradnju slicice, po mogucnosti neke koja ce podsjecati na lilmski zapis ili neke koju ste
preuzeli iz samog video materijala. Puno takvih slicica mozete pronaci i na jednoj od prilozenih
disketa uz ovu knjigu.
O radu s gralikom i multimedijalnim zapisima moze se reci jos puno toga, pa stoga procitajte i
sedmo poglavlje u kojemu je objasnjen rad sa slikovnim mapama i nekim drugim naprednim
mogucnostima jezika HTML. Jedna stvar je sigurna, a to je da na samome Webu mozete pronaci
na tisuce raznih crteza, ikona, kuglica, vodoravnih linija, strelica, te zvukova, video i drugih zapisa
koje slobodno mozete ukrasti pomocu svojeg pretrazivackog programa jer su ih ljudi i napravili
da ih koriste mnogi. Pripazite, medutim, na ukrase koje koristite u svojem radu, jer bi netko bez
imalo problema mogao preuzeti temu, poruku ili sadrzaj vase Web stranice.
97
5. poglavlje: Komunikacija s korisnikom
98
Obrasci
Vrlo popularan element jezika HTML su obrasci, odnosno Web stranice koje citatelju
omogucavaju da u njih upise neke podatke te ih posalje nazad Web posluzitelju na kojem su one
smjestene. Obrasci se mogu primjenjivati na razlicite nacine, pa tako postoje oni manji koji vam
pruzaju mogucnost da upisete svoju e-mail adresu ili neku rijec po kojoj ce se izvrsiti nekakvo
pretrazivanje i nesto veci koji se katkada sastoje i od nekoliko stranica koje valja popuniti raznim
podacima.
Obrasci su u jeziku HTML obuhvaceni oznakama <FORM ACTION=URL
METHOD=PROTOKOL> i </FORM>. Argumentu ACTION mora se dodijeliti URL adresa izvrsnog
programa koji ce obraditi podatke s kojima je popunjen obrazac. Taj program je, zapravo,
takozvani CGI (Common Gateway Interlace) skript kojega mora sastaviti autor Web stranice u
nekom programskom jeziku, te ga kompilirati u izvrsnu datoteku. O CGI skriptama ce biti vise
rijeci kasnije u ovom poglavlju. Argument METHOD namijenjen je odredivanju protokola kojim ce
Web posluzitelj dobivene podatke proslijediti CGI programu navedenom kod argumenta ACTION.
Kao protokol se moze navesti vrijednost GET ili POST.
Ukoliko se argumentu METHOD dodijeli vrijednost GET, svi podaci s kojima je popunjen obrazac
bit ce proslijedeni CGI programu kao dio navedene URL adrese i to na taj nacin da se prilijepe
na njezin kraj, pa je ona primjenjiva samo kod manjih obrazaca. S druge strane, vrijednost POST
salje podatke Web posluzitelju kao normalan niz inlormacija, sto omogucuje stvaranje obrazaca
najrazlicitijih velicina i slozenosti. O ovim ce metodama biti vise rijeci kasnije u ovom poglavlju,
kada ce se obradivati i CGI skripte. Vazno je, medutim, napomenuti da se vrijednost POST uvijek
mora navoditi velikim slovima.
U HTML dokumentu je unutar naredbe <FORM> dozvoljena upotreba svih standardnih HTML
oznaka namijenjenih gralickom oblikovanju stranice, osim nove oznake za obrazac. To znaci da ne
smijete kreirati ugnjezdene obrasce, premda se u jednom HTML dokumentu moze nalaziti vise
obrazaca. Novi cete, dakle, moci ubaciti tek kada prethodnog zatvorite oznakom </FORM>.
Slika 5-1 prikazuje primjer jednog vrlo jednostavnog obrazaca.
S//ka 5-1: Probni obrazac
U nastavku je dan ispis HTML naredbi kojima se izraduje obrazac prikazan na ovoj slici.
obrazac1.htm
<FORM ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query"
METHOD=POST>
Upi{ite svoje ime: <INPUT NAME="ime">
99
<INPUT TYPE=submit VALUE="Isprobaj obrazac">
</FORM>
U ovom je primjeru argumentu ACTION dodijeljena URL adresa programa smjestenog na racunalu
tvrtke NCSA koji se zove post-query. Taj program je NCSA napravila za potrebe testiranja
vasih obrazaca i on ce vam jednostavno vratiti sadrzaj i imena svih polja sadrzanih unutar obrasca
kojega mu posaljete. Uvijek je dobro sve obrasce isprobati pomocu programa post-query, prije
no sto ih objavite na World Wide Webu jer se u njima mogu kriti kojekakve pogreske i nedostaci.
Ako ste, medutim, kao metodu za slanje podataka CGI programu naveli protokol GET, a ne POST,
tada cete svoje obrasce moci isprobavati programom query koji se nalazi na istoj URL adresi kao
i program post-query.
Naredba <INPUT NAME=ime> kreira unutar dokumenta bijeli kvadratic u kojega citatelj
moze upisati svoje ime (ili bilo sto drugo). Vecina naredbi za kreiranje razlicitih elemenata unutar
obrazaca zapocinje s oznakom <INUPT NAME=vrijednost, a zavrsava jednostavno s >.
Argument NAME odreduje ime kojim ce biti oznacen podatak unesen u tom elementu obrasca,
odnosno jedinstvenu varijablu koju CGI program koristi za procesiranje upravo tog podatka. Kao
vrijednost koju morate dodijeliti tom argumentu mozete navesti bilo koje ime, sve dok se ono
sastoji samo od slova, brojeva i podvlaka i dok pocinje sa slovom. Elementima obrazaca nastojte
dodjeljivati smislena imena, kako biste se i nakon duzeg vremena mogli lako snalaziti u HTML
dokumentu koji ga sadrzi. Argumentom TYPE odreduje se vrsta elemenata u obrascu (kontrolni
kvadratici, kruzni izbornici, tekstualna polja...). O svakom pojedinom tipu elementa bit ce vise
rijeci u nastavku poglavlja.
Unutar naredbe koja kreira polje u kojemu korisnik mora upisati svoje ime nije naveden nikakv tip
elementa. U tom se slucaju podrazumijeva upotreba upravo takvog polja po kojem korisnik moze
pisati i brisati jedan redak teksta. Bolje je, medutim, uvijek navoditi tip elementa kojega
upotrebljavamo u obrascu kako bi HTML kd bio sto pregledniji, pa bi doticnu naredbu bilo ljepse
zapisati kao <INPUT TYPE=text NAME=ime>. Dodatni elekti koje mozemo koristiti kod
tekstualnih polja velicine jednog retka su odredivanje teksta koji ce se odmah pojaviti u polju, te
duzinu polja zadanu u slovima. To se postize dodavanjem argumenata VALUE=tekst i
SIZE=n naredbi <INPUT>, sto je prikazano sljedecim primjerom.
obrazac2.htm
<FORM ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query"
METHOD=POST>
Upi{ite svoje ime:
<INPUT TYPE=text NAME="ime" VALUE="Vlado Kalember" SIZE=40>
<INPUT TYPE=submit VALUE="Isprobaj obrazac">
</FORM>
Na slici 5-2 nalazi se obrazac iz ovog primjera. Ukoliko ga isprobate u svojem pretrazivackom
programu, primijetit cete da u tekstualno polje mozete upisati i vise od 40 slova, jer ce se u tom
100
slucaju tekst poceti micati prema lijevo. Ukoliko ne zelite da korisnik upise vise od 40 slova, polje
cete moci ograniciti dodavanjem argumenta MAXLENGTH=40 naredbi s kojom ste ga i kreirali.
S//ka 5-2: Prosireno polje za upis teksta
Promotrimo sada naredbu <INPUT TYPE=submit VALUE=Isprobaj obrazac>. Svi
obrasci moraju sadrzavati tocno jedan element tipa submit. Time se kreira gumb kojega korisnik
moze pritisnuti misem nakon sto popuni cijeli obrazac, pa ga uvijek valja smjestiti kao posljednjega
u nizu elemenata. Ukoliko obrazac ne sadrzi taj gumb, u potpunosti se gubi njegov smisao jer
korisnik nece nikako moci poslati popunjene podatke posluzitelju. Gumb mozete oznaciti bilo
kojim rijecima upotrebom argumenta VALUE, kao sto je to ucinjeno i u nasem primjeru. Ako se
argument VALUE izostavi iz naredbe, gumb ce biti oznacen sa Submit.
Kada korisnik klikne na gumb koji je u ovom slucaju oznacen s Isprobaj obrazac, pretrazivacki
program ce skupiti vrijednosti svih ulaznih polja u obrascu, te ce ih poslati Web posluzitelju
naznacenom u URL adresi koja je dodijeljena argumentu ACTION u naredbi <FORM>. Web
posluzitelj ce potom podatke proslijediti CGI programu koji je takoder naveden u istoj URL adresi
upotrebom protokola koji je naveden argumentom METHOD. Sto ce se dalje dogoditi, ovisi o CGI
skriptu koji procesira dobivene podatke, no u vecini slucajeva ce Web posluzitelj korisniku poslati
neku povratnu inlormaciju u obliku HTML dokumenta.
S vremenom cete mozda doci do ideje da kreirate obrazac koji sadrzi vise od jednog gumba tipa
submit, od kojih bi svaki mogao izvoditi neku drugaciju radnju (jedan, primjerice, moze posluziti
za pretplacivanje na neku pretplatnicku listu, a drugi za odjavljivanje pretplate). Nazalost, to se ne
moze izvesti s danasnjim World Wide Web standardima, niti s bilo kakvim prosirenjima jezika
HTML. Katkada cete moci simulirati takvu situaciju upotrebom vise obrazaca u istom dokumentu,
od kojih svaki posjeduje svoj gumb za slanje podatka (i najvjerojatnije niti jedan drugi element).
Ukoliko, medutim, u isti obrazac ubacite vise takvih gumba, svi ce oni izvrsavati istu radnju koja se
svodi na slanje podataka Web posluzitelju, sto je bez sumnje, prilicno besmisleno.
Tekstualni prozori
Ukoliko unutar obrasca zelite upotrijebiti tekstualne prozore, odnosno polja za unos teksta koja se
sastoje od vise redaka, upotrijebit cete HTML oznake <TEXTAREA> i </TEXTAREA>.
Argumenti koji se mogu pridruziti naredbi <TEXTAREA> su ROWS=n i COLS=m, a njima se
odreduje visina, odnosno sirina tekstualnog prozora. Te se velicine mjere u broju tekstualnih linija
za visinu, te u kolicini slova za sirinu prozora. Dakako, i ova naredba mora sadrzavati argument
NAME koji oznacava ime varijable koja sluzi pohranjivanju teksta upisanog u tekstualni prozor.
Tekstualni prozori vrlo su korisni u slucaju kada od citatelja zelite cuti komentar vase Web
stranice, kritiku, ocjenu ili nekakvo objasnjenje. Radi se o vrlo popularnom elementu za izradu
obrazaca na kojega cete nailaziti cesto ukoliko se redovito prosecete Webom. Sljedeci primjer
prikazuje jedan od nacina za njegovu upotrebu.
101
textarea.htm
<H2>Kritika ~itatelja</H2>
<FORM ACTION="http://.../post-query" METHOD=POST>
O ovim Web stranicama imam ovakvo mi{ljenje:<BR>
<TEXTAREA NAME="kritika" ROWS=7 COLS=40></TEXTAREA>
<P>
Za postojanje ovog dokumenta saznao sam preko...<BR>
<TEXTAREA NAME="izvor" ROWS=3 COLS=60></TEXTAREA>
<P>
Moja E-mail adresa je:
<INPUT TYPE=text NAME="e-mail" SIZE=35>
<P>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Brisanje">
</FORM>
Na slici 5-3 nalazi se ovaj primjer nakon ucitavanja u Netscape.
S//ka 5-3: Obrazac s tekstualnim prozorima
Vjerojatno ste odmah primijetili i upotrebu novog gumba u prethodnom primjeru, koji je na slici
oznacen s tekstom Brisanje. Ukoliko korisnik klikne misem na taj gumb, svi podaci iz obrasca
postavit ce se ponovno na pocetne vrijednosti, sto u ovom slucaju znaci da ce se sva tekstualna
polja izbrisati. U to se mozete uvjeriti ako isprobate ovaj primjer u svojem pretrazivackom
programu.
Oznake kojima se odreduje visina i sirina tekstualnog prozora ne ogranicavaju kolicinu teksta koju
korisnik moze upisati u jednom retku ili broj redaka koje moze ispisati u cijelom polju, vec
jednostavno lormatiraju velicinu prozora. Kada korisnik zeli preci u novi red, pritisnut ce tipku
Enter, a ako upise vise teksta no sto se moze vidjeti u jednom prozoru, upotrijebit ce klizne pruge
koje se nalaze uz donji i uz desni rub prozora.
Kao i kod malih tekstualnih polja, tako se i kod tekstualnih prozora moze prilikom izrade obrasca
zadati tekst koji ce vec biti upisan kada citatelj ucita dokument u svoj pretrazivacki program. Tekst
koji zelite da se uvijek pojavljuje u tekstualnom prozoru upisite u HTML dokument izmedu oznaka
<TEXTAREA> i </TEXTAREA>, kao sto je to ucinjeno u sljedecem primjeru. Izmedu tih dviju
oznaka ne smiju se nalaziti nikakve druge HTML naredbe, vec samo cisti tekst.
obrazac3.htm
<H2>Kritika ~itatelja</H2>
<FORM ACTION="http://.../post-query" METHOD=POST>
102
O ovim Web stranicama imam ovakvo mi{ljenje:<BR>
<TEXTAREA NAME="kritika" ROWS=7 COLS=40>Jako su dobre!</TEXTAREA>
<P>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Brisanje">
</FORM>
Slika 5-4 prikazuje ovaj primjer nakon ucitavanja u Netscape. Vazno je napomenuti da neki manje
poznati pretrazivacki programi ne mare za sav tekst koji ste namijenili automatskom upisivanju u
tekstualni prozor, pa morate imati na umu da ga nece vidjeti svaki citatelj. Zbog toga nikada
nemojte unutar tekstualnog prozora automatski ubacivati neki za citatelja vazan tekst, vec samo
kratku ideju koja bi ga mogla namamiti da vam pise.
S//ka 5-4: Automatski ubacen tekst u tekstualni prozor
Kontrolni kvadratici
Kontrolni kvadratic, poznatiji pod imenom checkbox, omogucava korisniku da nesto iskljuci ili
ukljuci u svoj izbor, odnosno da nesto sto mu je ponudeno po zelji odabere. Prilikom klika misem
na kontrolni kvadratic u njemu ce se pojaviti krizic koji se moze izbrisati ponovnim klikom. Kada
je u kvadraticu prisutan krizic, opcija koja je njime oznacena je odabrana ili ukljucena, dok u
suprotnom nije odabrana ili je iskljucena.
Kontrolni kvadratic mozete ugraditi unutar obrasca upotrebom naredbe <INPUT> uz koju morate
nadopisati i argument TYPE kojemu je dodijeljena vrijednost checkbox. Pored tog argumenta
morat cete navesti i argument NAME koji kao i kod drugih elemenata oznacava ime varijable
dodijeljene tom elementu, a opcionalno mozete upotrijebiti i argument VALUE=oznaka. Tom
argumentu mozete dodijeliti tekstualnu oznaku koju zelite koristiti kao vrijednost varijable zadane
argumentom NAME u slucaju da korisnik odabere opciju oznacenu s kontrolnim kvadraticem.
Najbolje je za tu oznaku koristiti izraz da ili neke jednostavne simbole poput zvjezdice, plusa ili
nekog slova, premda je dopustena upotreba i puno duzih naziva. Ukoliko se argument VALUE
izostavi iz naredbe, ta ce vrijednost biti postavljena na izraz on, a u slucaju da korisnik nije
odabrao opciju oznacenu kvadraticem, CGI programu nece biti vracena nikakva vrijednost bez
obzira na prisustvo argumenta. Sljedecim je primjerom ilustrirana upotreba kontrolnog kvadratica.
kvadrat.htm
<FORM ACTION="http://.../post-query" METHOD=POST>
<INPUT TYPE=checkbox NAME="stariji" VALUE="x">
Imate li manje od 18 godina?
103
<P>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Brisanje">
</FORM>
Na slici 5-5 nalazi se ovaj primjer ucitan u Netscape. Ako se u kontrolnom kvadraticu ne nalazi
krizic, znaci da pitanje nije dobilo potvrdan odgovor. Ovime je ujedno prikazana i upotreba
kontrolnih kvadratica kod postavljanja konkretnih pitanja citatelju, na koje on moze odgovoriti
samo s da ili ne.
S//ka 5-5: Kontrolni kvadratic
Kada bi citatelj u prethodnom primjeru pritisnuo gumb oznacen s Brisanje, kontrolni kvadratic bi
se iskljucio (postavio na negativan odgovor) bez obzira na to ja li se u njemu prije toga nalazio
krizic ili nije. Upotreba tog gumba, dakle, nema previse smisla ako se obrazac sastoji od samo
jednog kontrolnog kvadratica, jer se on moze iskljuciti i ponovnim klikom na njega. Gumb je puno
korisniji u situaciji kada se vise kvadratica grupira u kontrolnu listu iz koje citatelj moze odabrati
one elemente koji mu odgovaraju. Takve liste se cesto koriste i puno su lunkcionalnije od
pojedinacnih kontrolnih kvadratica u sto se mozete uvjeriti ako malo prosecete vec objavljenim
obrascima na Webu. Ako, medutim, zelite napraviti listu iz koje zelite da citatelj odabere samo
jednu mogucnost, upotrijebit cete kruzne izbornike o kojima ce biti vise rijeci u sljedecem odjeljku
poglavlja. U nastavku je dan primjer jedne kontrolne liste.
kontrol.htm
<H2>Odaberite operativne sustave kojima se sluite</H2>
<FORM ACTION="http://.../post-query" METHOD=POST>
<INPUT TYPE=checkbox NAME="dos" VALUE="x"> MS DOS<BR>
<INPUT TYPE=checkbox NAME="win" VALUE="x"> Windows 95<BR>
<INPUT TYPE=checkbox NAME="os2" VALUE="x"> OS/2 Warp 3.0<BR>
<INPUT TYPE=checkbox NAME="unix" VALUE="x"> UNIX<BR>
<INPUT TYPE=checkbox NAME="mac" VALUE="x"> Mac System 7.5<BR>
<INPUT TYPE=checkbox NAME="drugi" VALUE="x"> neki drugi:
<INPUT TYPE=text NAME="koji">
<P>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Brisanje">
</FORM>
Kako ovaj primjer izgleda nakon ucitavanja u Netscape, pogledajte na slici 5-6. Uocite usput nacin
na koji je kod zadnjeg elementa u kontrolnoj listi korisniku omogucen upis elementa po vlastitoj
zelji.
104
S//ka 5-6: Kontrolna lista
U ovom je primjeru svaki element liste postavljen u zasebni redak kako bi dokument izgledao sto
preglednije. Isti su elementi mogli biti popisani i u jednom retku, sto se moglo postici
izostavljanjem naredbi <BR> u HTML kdu dokumenta, no tada bi stranica izgledala prilicno
neuredno. Zanimljivi elekti mogu se postici upotrebom pobrojanih i nepobrojanih listi, koje su
pokrivene u prethodnom poglavlju, ali i mnogim drugim elementima jezika HTML.
Ukoliko korisniku zelite sugerirati nekakav izbor iz liste, moci cete automatski ukljuciti neke
kontrolne kvadratice i to uvrstavanjem argumenta CHECKED unutar naredbe <INPUT>. Oni
kontrolni kvadratici uz ciju se naredbu nalazi dopisan i ovaj argument sadrzavat ce krizic odmah
nakon ucitavanja dokumenta s obrascem u pretrazivacki program. U novom primjeru je prikazana i
ova mogucnost.
automat.htm
<H2>Odaberite operativne sustave kojima se sluite</H2>
<FORM ACTION="http://.../post-query" METHOD=POST>
<INPUT TYPE=checkbox NAME="dos" VALUE="x" CHECKED> MS DOS<BR>
<INPUT TYPE=checkbox NAME="win" VALUE="x"> Windows 95<BR>
<INPUT TYPE=checkbox NAME="os2" VALUE="x" CHECKED>
OS/2 Warp 3.0<BR>
<INPUT TYPE=checkbox NAME="unix" VALUE="x" CHECKED> UNIX<BR>
<INPUT TYPE=checkbox NAME="mac" VALUE="x"> Mac System 7.5<BR>
<INPUT TYPE=checkbox NAME="drugi" VALUE="x"> neki drugi:
<INPUT TYPE=text NAME="koji">
<P>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Ponovni odabir">
</FORM>
Na slici 5-7 nalazi se ovaj primjer ucitan u Netscape.
S//ka 5-7: Automatski odabrane opcije u listi
U ovom se slucaju nakon pritiska na gumb kreiran naredbom <INPUT TYPE=reset> nece svi
kontrolni kvadratici iskljuciti, vec ce se sve vrijednosti vratiti u pocetni polozaj, odnosno u ono
stanje u kojemu su bile neposredno nakon sto se stranica ucitala u pretrazivacki program.
105
Kruzni izbornici
Kruzni izbornici omogucavaju korisniku da odabere samo jednu od ponudenih opcija. Nakon sto se
korisnik odluci za odabir neke opcije, bilo koji prethodni izbor bit ce izbrisan. Pokraj svakog
elementa ovakvog izbornika nalazi se bijeli kruzic unutar kojega se pojavljuje crna tocka ukoliko
ga korisnik odabere. Kruzni izbornici pogodni su kod izrade raznih anketa i konkretnih pitanja na
koja korisnik moze odgovoriti jednim od vise ponudenih odgovora.
Naredba za upotrebu kruznog izbornika u obrascu je takoder <INPUT>, no uz dodjelu vrijednosti
radio argumentu TYPE. Jedan izbornik sastoji se od onoliko naredbi <INPUT> koliko sadrzi
elemenata. Kod svake naredbe koja predstavlja element kruznog izbornika mora se dopisati i
argument NAME, no sada uvijek s istom vrijednoscu koja predstavlja ime varijable namijenjene
oznacavanju korisnikova izbora. Ta ce varijabla poprimiti jednu od vise razlicitih vrijednosti koje
su dodijeljene argumentima VALUE u svakoj naredbi <INPUT> od koje se sastoji kruzni izbornik.
Premda sve ovo djeluje dosta slozeno, navedeni primjer ce vas uvjeriti u suprotno.
krug.htm
<H2>Kojim poslom se bavite?</H2>
<FORM ACTION="http://.../post-query" METHOD=POST>
<INPUT TYPE=radio NAME="posao" VALUE="ucenik">
u~enik<BR>
<INPUT TYPE=radio NAME="posao" VALUE="student" CHECKED>
student<BR>
<INPUT TYPE=radio NAME="posao" VALUE="informatika">
zaposlen u struci vezanoj uz ra~unalstvo<BR>
<INPUT TYPE=radio NAME="posao" VALUE="zaposlen">
zaposlen u struci nevezanoj uz ra~unalstvo<BR>
<INPUT TYPE=radio NAME="posao" VALUE="nezaposlen">
nezaposlen<BR>
<P>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Brisanje">
</FORM>
Na slici 5-8 nalazi se ovaj primjer nakon ucitavanja u Netscape.
S//ka 5-8: Kruzni izbornik
Vjerojatno ste odmah primijetili da se u prethodnom primjeru uz element izbornika koji je oznacen
kao student vec nalazi crna tocka kao prijedlog izbora. To se kao i kod kontrolnih kvadratica
postize koristenjem argumenta CHECKED u naredbi <INPUT>, no u ovom je slucaju dozvoljena
106
upotreba tog argumenta samo jedanput unutar jednog izbornika. Ukoliko niti jedan element
izbornika ne oznacite kao odabran, citatelj mozda niti sam nece odabrati jednu od opcija, pa
pretrazivacki program nece Web posluzitelju vratiti nikakvu vrijednost za kruzni izbornik. Zbog
toga je uvijek dobro jednu opciju oznaciti kao odabranu, a ako se ne mozete odluciti niti za jednu,
ucinite to s prvom koja je dana u popisu jer je to i inace uobicajen nacin prikazivanja kruznih
izbornika. Ako unutar istog kruznog izbornika automatski postavite vise opcija kao odabrane, moze
se vrlo lako dogoditi da Web posluzitelj javi korisniku pogresku, posebice onda kada on sam ne
odabere neku od ponudenih mogucnosti i time ispravi vas previd.
Vrijednost koja je dodijeljena argumentu VALUE u onoj naredbi kruznog izbornika koja stoji uz
tekst kojega je odabrao korisnik, bit ce u prethodnom primjeru dodijeljena varijabli posao, te kao
takva proslijedena CGI programu smjestenom na Web posluzitelju.
Padajuci izbornici i izborne liste
Padajuci izbornici vrlo su slicni kruznima jer korisniku omogucavaju da izabere jednu od
ponudenih opcija. Zapravo se radi o elementu koji obavlja istu lunkciju kao i kruzni izbornik, ali na
nesto drugaciji nacin. Nakon ucitavanja Web stranice koja sadrzi obrazac s padajucim izbornikom
u pretrazivacki program, korisnik ce vidjeti samo jednu od ponudenih opcija u tom izborniku i
strelicu usmjerenu prema dolje smjestenu s desne strane izbornika. Klikom misa na strelicu
izbornik se aktivira, te se na ekranu pojavljuje lista s popisom svih opcija ponudenih u izborniku.
Korisnik tada moze odabrati neki element iz popisa nakon cega lista nestaje s ekrana. Kruzni
izbornici cesce se koriste kada je korisniku ponuden manji broj opcija, a padajuci kada se odabir
svodi na veci broj mogucnosti radi sto racionalnijeg iskoristavanja prostora na stranici dokumenta.
Padajuci izbornik mora biti smjesten unutar oznaka <SELECT> i </SELECT>, a svaka pojedina
opcija koja se njime nudi oznacava se naredbom <OPTION>. Naredba <SELECT> mora
sadrzavati i argument NAME kojem se i u ovom slucaju dodjeljuje ime varijable namijenjene
oznacavanju odabranog elementa. Ta ce varijabla poprimiti vrijednost navedenu pod onom
naredbom <OPTION> koja odgovara opciji izbornika odabranoj od strane korisnika. U nastavku je
dan primjer koji prikazuje upotrebu padajucih izbornika.
pada.htm
<H2>[to najvi{e volite jesti i piti?</H2>
<FORM ACTION="http://.../post-query" METHOD=POST>
Omiljena hrana:
<SELECT NAME="klopa">
<OPTION>riba
<OPTION>meso
<OPTION>pomfree
<OPTION>salata
</SELECT>
Omiljeno pi}e:
<SELECT NAME="cuga">
107
<OPTION>Fanta
<OPTION>Sprite
<OPTION>Stock
<OPTION>Stock-Cola
</SELECT>
<P>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Ponovni odabir">
</FORM>
Slika 5-9 prikazuje ovaj primjer nakon ucitavanja u Netscape. Lijevi padajuci izbornik nije
aktiviran, za razliku od desnoga kod kojeg se spustio popis s mogucim odabirom.
S//ka 5-9: Padajuci izbornici
Padajuci izbornik moze se automatski prikazati i u obliku izborne liste ubacivanjem argumenta
SIZE=n u naredbu <SELECT>. Broj n predstavlja kolicinu redaka od kojih ce se sastojati izborna
lista, a moze poprimiti vrijednosti od jedan prema vise. Ukoliko je n manji od ukupnog broja
elemenata koji sacinjavaju listu, s desne strane izbornika ce se aktivirati i klizna pruga pomocu
koje korisnik moze pregledati i one elemente koji se u datom trenutku ne vide na ekranu. U
suprotnom klizna pruga nece biti aktivirana.
Kao i kod drugih elemenata s kojima se mogu oblikovati obrasci, tako se i kod padajucih izbornika
i izbornih listi korisniku moze unaprijed sugerirati odabir nekog elementa. To se postize
dodavanjem argumenta SELECTED onoj naredbi <OPTION> koja stoji uz odgovarajuci element
izbornika. Sljedecim su primjerom prikazane dvije izborne liste razlicitih velicina, od kojih je u
jednoj korisniku unaprijed predlozen izbor.
izbor.htm
<H2>[to najvi{e volite jesti i piti?</H2>
<FORM ACTION="http://.../post-query" METHOD=POST>
Omiljena hrana:
<SELECT NAME="klopa" SIZE=3>
<OPTION>riba
<OPTION>meso
<OPTION>pomfree
<OPTION>salata
</SELECT>
Omiljeno pi}e:
<SELECT NAME="cuga" SIZE=5>
<OPTION>Fanta
<OPTION>Sprite
<OPTION SELECTED>Stock
108
<OPTION>Stock-Cola
</SELECT>
<P>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Ponovni odabir">
</FORM>
Slika 5-10 prikazuje ovaj primjer nakon ucitavanja u Netscape. U desnoj je izbornoj listi
pretrazivacki program oznacio element koji je u HTML dokumentu oznacen kao unaprijed
odabran.
S//ka 5-10: Izborne liste
U prethodnim je primjerima varijabla oznacena argumentom NAME poprimala upravo onu
vrijednost koja se vidi i na ekranu kada je korisnik odabere, a ne neku simbolicku kao sto je to bio
slucaj s kruznim izbornicima. To je vrlo neprakticno u slucaju kada korisniku zelite ponuditi opcije
koje se moraju opisati s nekoliko rijeci jer ce se tada i vrijednot prijenosne varijable sastojati od
svih tih rijeci. Kako biste zaobisli ovaj problem i sto jednostavnije upravljali podacima dobivenima
iz obrasca u CGI programu, mozete upotrijebiti argument VALUE za naredbu <OPTION> kojom
cete uvesti neku kracu oznaku za svaki moguci odabir, kao sto je prikazano u novom primjeru.
anketa.htm
<H2>[to biste danas eljeli napraviti?</H2>
<FORM ACTION="http://.../post-query" METHOD=POST>
<SELECT NAME="radnja" SIZE=5>
<OPTION VALUE="piti">Popiti cappucino
<OPTION VALUE="tv">Pogledati Santa Barbaru
<OPTION VALUE="banana">Oguliti bananu
<OPTION VALUE="breskva" SELECTED>Ukrasti susjedovu breskvu
<OPTION VALUE="mrav">Nahraniti mrava
<OPTION VALUE="let">Letjeti helikopterom
</SELECT>
<P>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Ponovni odabir">
</FORM>
Naredbi <SELECT> moze se dodijeliti i argument MULTIPLE kojim se korisniku omogucuje
odabir vise elemenata iz izbornika. Korisnik razlicite elemente moze odabrati tako da drzi
pritisnutu tipku Control i usput misem klikce na zeljene elemente, odnosno tako da drzi pritisnutu
tipku Shift, te klikne na prvi i zadnji element u listi kojega zeli odabrati. U ovom slucaju se
109
argument SELECTED smije navesti kod vise od jedne naredbe <OPTION>. Takav oblik padajuceg
izbornika ili izborne liste koristi se vrlo rijetko buduci da se ista stvar moze puno elegantnije rijesiti
kontrolnim kvadraticima. Ako ipak zelite raditi s argumentom MULTIPLE, pogledajte sljedeci
primjer i isprobajte ga u svojem pretrazivackom programu kako biste osjetili slozenost odabira vise
elemenata iz liste.
anketa.htm
<H2>S kime biste rado popili kavicu?</H2>
<FORM ACTION="http://.../post-query" METHOD=POST>
<SELECT NAME="kavica" MULTIPLE SIZE=6>
<OPTION VALUE="minea">Minea
<OPTION VALUE="gibonni">Gibonni
<OPTION VALUE="pitt">Brad Pitt
<OPTION VALUE="latin">Denis Latin
<OPTION VALUE="vlatka">Vlatka Pokos
<OPTION VALUE="aki">Aki Rahimovski
</SELECT>
<P>
<I>Drite pritisnutu tipku <B>Ctrl</B> za odabir me|usobno
razdvojenih elemenata liste, odnosno tipku <B>Shift</B> za
elemente koji su smje{teni jedan uz drugoga</I>
<P>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Ponovni odabir">
</FORM>
Prethodna dva primjera prikazana su na slici 5-11 nakon njihovog ucitavanja u Netscape.
S//ka 5-11: Dodatne mogucnosti izbornih listi
Ostali elementi obrazaca
Naredbom <INPUT TYPE=password> korisniku se omogucuje da unutar obrasca upise lozinku
ili neku drugu tajnu rijec. Upotreba ove naredbe rezultirat ce pojavom obicnog tekstualnog polja u
prozoru pretrazivackog programa, no prilikom upisivanja nekog teksta u tom se polju nece vidjeti
otipkana slova vec samo zvjezdice. Time je korisnik osiguran od znatizeljnika i drugih
zlonamjernika koji bi mogli iskoristiti njegovu lozinku za neke ilegalne poslove. Naredbi se mora
dodijeliti i argument NAME koji nosi oznaku prijenosne varijable. Ta ce varijabla poprimiti onu
110
vrijednost koju korisnik upise kao element polja. U nastavku je dan primjer kojim je ilustrirana
upotreba polja za upisivanje tajne rijeci ili lozinke.
lozinka.htm
<FORM ACTION="http://.../post-query" METHOD=POST>
<B>Kako se zove va{a ljubavnica?</B>
<INPUT TYPE=password NAME="komad" SIZE=12>
<INPUT TYPE=submit VALUE="Slanje">
</FORM>
Na slici 5-12 prikazan je ovaj primjer nakon ucitavanja u Netscape. U primjeru je upotrijebljen
argument SIZE kod naredbe <INPUT TYPE=password>, koji se koristi za odredivanje duzine
tekstualnog polja za upis lozinke. Duzina polja izrazava se u slovima. Isto kao i kod obicnih
tekstualnih polja, tako se i polju za lozinku moze dodati jos i argument MAXLENGTH=n kojim se
odreduje granica za najduzu mogucu rijec koju korisnik smije upisati. Vrijednost n i u ovom
slucaju predstavlja broj slova.
S//ka 5-12: Upisivanje tajne rijeci
Zasigurno najcudnija naredba za izradu obrazaca, ali i za cijeli jezik HTML je naredba <INPUT
TYPE=hidden>, namijenjena kreiranju nevidljivog elementa u obrascu. Ona obavezno mora
sadrzavati i argumente NAME i VALUE. Upotrebom ove naredbe pretrazivacki program nece
prikazati nista u svojem prozoru, vec ce varijabli dodijeljenoj argumentu NAME pridruziti onu
vrijednost koju ste dodijelili argumentu VALUE. Nekakvog posebnog razloga da koristite ovu
mogucnost jezika HTML vjerojatno nikada necete imati. Neki ovu naredbu koriste kako bi testirali
ispravnost svojeg CGI programa, a primjenjuje se i u slucajevima kada jedan CGI program sluzi
procesiranju vise razlicitih obrazaca kako bi se naznacilo o kojem je obrascu rijec.
Posljednji element za izradu obrazaca o kojem ce biti rijeci potpuno je drugaciji od svih ostalih.
Ukoliko zelite u svoju Web stranicu ugraditi samo jedno tekstualno polje namijenjeno upisivanju
kljucne rijeci za neko pretrazivanje, mozete upotrijebiti jedinu makro-naredbu jezika HTML,
<ISINDEX>. Ta ce oznaka kreirati dvije vodoravne linije izmedu kojih ce se nalaziti tekst This is
a searchible index. Enter search keywords: i jedno tekstualno polje. Korisnik u to polje moze
upisati neku rijec, a nakon sto pritisne tipku Enter, ona ce biti poslana Web posluzitelju. Naredba
<ISINDEX> ne smije se nalaziti unutar oznaka <FORM> i </FORM>, buduci da ona sama za sebe
predstavlja jedan mali obrazac. Autori Netscapea osmislili su i jedno prosirenje za ovu naredbu
koje je realizirano pomocu argumenta PROMPT=tekst. Tom argumentu dodjeljuje se recenica
za koju zelite da se pojavi u prozoru pretrazivackog programa umjesto maloprije navedene poruke.
U nastavku je dan primjer za upotrebu ove naredbe i njezinog prosirenja.
111
isindex.htm
<H2>Rje~nik stranih rije~i</H2>
<ISINDEX PROMPT="Upi{ite klju~ne rije~i za pretraivanje: ">
Slika 5-13 prikazuje ovaj primjer nakon ucitavanja u Netscape.
S//ka 5-13: Upotreba makro-naredbe <ISINDEX>
Sada ce biti prikazan primjer obrasca koji koristi vecinu elemenata prikazanih u ovom poglavlju.
To ce biti obrazac namijenjen narudzbi jela i pica u zamisljenom restoranu na Internetu. (Ukoliko
je takav restoran smjesten negdje u zgradi vase tvrtke, ova ideja vam se nece ciniti nimalo
besmislenom. U svijetu je vec otvoreno nekoliko cyberspace kalica u kojima se moze narucivati uz
posjedovanje odgovarajuce lozinke.) Slicni obrasci mogu se koristiti za bilo kakav drugi oblik
narudzbe ili kupovine putem World Wide Weba, sto danas postaje sve popularniji oblik trgovine.
obrazac4.htm
<FORM ACTION="skuhaj-klopu.cgi" METHOD=POST>
<CENTER>
<H3><I>Fast-food restoran MACI - obrazac za narudbu</I></H3>
</CENTER>
<HR><BR>
Va{e ime? <INPUT TYPE=text NAME="ime" SIZE=30><BR>
Tajni k&ocirc;d: <INPUT TYPE=password NAME="lozinka">
<P><HR><BR>
Odaberite hranu:
<SELECT NAME="klopa" SIZE=4 MULTIPLE>
<OPTION VALUE="juha">Juha od gljiva
<OPTION VALUE="pizza">Pizza
<OPTION VALUE="ham">Hamburger
<OPTION VALUE="riba">Kuhana riba
<OPTION VALUE="pomfree">Pomfree
<OPTION VALUE="hotdog">Hot-dog
<OPTION VALUE="tartar">Tartar biftek
</SELECT>
&nbsp;&nbsp;&nbsp;
Odaberite pi}e:
<SELECT NAME="cuga" SIZE=4>
<OPTION VALUE="cola">Coca-cola
<OPTION VALUE="fanta">Fanta
<OPTION VALUE="sprite">Sprite
<OPTION VALUE="pivo">Pivo
<OPTION VALUE="limun">Limunada
112
</SELECT>
<P><HR><BR>
<B>Na~in pla~anja:</B><BR>
<INPUT TYPE=radio NAME="platiti" VALUE="lova">gotovom lovom
<SELECT NAME="valuta">
<OPTION>Kune <OPTION>Marke <OPTION>Lire
</SELECT><BR>
<INPUT TYPE=radio NAME="platiti" VALUE="papir">~ekom<BR>
<INPUT TYPE=radio NAME="platiti" VALUE="plastika">kreditnom
karticom
<SELECT NAME="kartica">
<OPTION>Visa <OPTION>Eurocard <OPTION>Diners
</SELECT><BR>
<INPUT TYPE=radio NAME="platiti" VALUE="pranje">pranjem posu|a
<P><HR><BR>
<INPUT TYPE=checkbox NAME="prvi" VALUE="da">
Ovo je moj prvi posjet ovom resoranu.
<P><HR><BR>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Brisanje">
</FORM>
Na slici 5-14 nalazi se ovaj primjer ucitan u Netscape. Sva polja unutar obrasca na toj su slici vec
popunjena.
S//ka 5-14: Obrazac za narudzbu iz fast-food restorana
Obrasci se vrlo cesto koriste i kod izrade Web pristupnika (tzv. gateway sustava) za druge servise
na Internetu, a ponajvise za servis Archie, namijenjen pretrazivanju baza podataka u kojima se
cuvaju lokacije pojedinih datoteka na Mrezi. Nerijetko cete naici i na obrasce postavljene u
lunkciju anketnih listica, te raznih drugih upitnika za popunjavanje, a vjerojatno cete ubrzo i sami
doci na ideju kako da iskoriste tu vrlo zanimljivu mogucnost jezika HTML.
CGI (Common Gateaay Interface) programi
Kreiranje obrazaca prije bi se moglo nazvati zabavnom nego teskom radnjom, no u trenutku kada
treba razmisljati o tome kako ce se obraditi inlormacije koje je korisnik poslao putem obrazaca,
stvari postaju nesto slozenije.
Upravljanje podacima dobivenim putem obrazaca prilicno je slozeno, buduci da nacin na koji ce se
ti podaci procesirati najvise ovisi o operativnom sustavu racunala na kojem je instaliran Web
posluzitelj. Sastavljanje pristupnika, odnosno CGI programa koji sluzi obradi HTML obrazaca, u
113
potpunosti se razlikuje kod rada s UNIX sustavima, te Windows ili Macintosh racunalima. Tu su
jos i mnoge druge popularne platlorme poput Amige, Windowsa NT i drugih koje ovaj posao cine
jos slozenijim.
Najveca razlika ocituje se u programskim jezicima i alatima koji postoje za pojedinu platlormu. Na
UNIX sustavima prilicno je jednostavno sastaviti tzv. Shell skript, Perl skript ili cak program u C-u
koji bi mogao obraditi pristigle podatke. Na racunalima Macintosh ne postoji nista sto bi bilo nalik
Shell skriptama (koje sluze programiranju u UNIX ljusci), pa se umjesto toga koristi jezik
AppleScript. Korisnici PC racunala s instaliranim operativnim sustavom Windows moraju se
posluziti nekim objektnim alatom za programiranje ili kakvim drugim programskim jezikom za
DOS i Windowse. Srecom, programski jezik Perl postoji i za DOS racunala, pa se stoga on najvise
i koristi.
Kao sto je bilo objasnjeno u prethodnom odjeljku ovog poglavlja, obrasci se mogu proslijediti CGI
programu putem protokola nazvanih GET i POST. Kada se koristi GET metoda, inlormacije se
priljepljuju na kraj URL adrese navedene u naredbi za obrazac, te se u tom obliku salju CGI
skriptu. URL adresa i inlormacije odijeljene su upitnikom, a izmedu svakog pojedinog podatka
nalazi se tocka sa zarezom. Upotreba metode POST rezultirat ce slanjem inlormacija putem jednog
paketa i to u nepromijenjenom obliku, bez dodatnih upitnika, tocka-zareza ili nekih drugih
posebnih znakova i bez produzivanja URL adrese. Ta se metoda nekada koristila vrlo rijetko
premda je puno bolja u slucaju da obrazac sadrzi vecu kolicinu inlormacija. Danas, medutim,
gotovo svi koriste tu metodu, dok se protokol CGI polako zaboravlja i izbacuje iz upotrebe.
Kako bi vam ovo objasnjenje bilo sto jasnije, u nastavku je dan primjer URL adrese putem koje bi
se obrazac za narudzbe u last-lood restoranu proslijedio CGI programu kada bi se koristila metoda
GET. Na slici 5-14 mozete pogledati koje je korisnik podatke unio u taj obrazac.
skuhaj-klopu.cgi?ime=Vinko%20Coce;lozinka=mljac;klopa=ham+pomfree;
cuga=sprite;platiti=pranje;prvi=da
Oznaka %20 upotrebljena je umjesto razmaka kako bi URL adresa ostala sintakticki ispravna
(sjetite se da URL adresa ne smije sadrzavati razmake). U primjeru takoder mozete primijetiti da se
lozinka salje posluzitelju onako kako ju je korisnik i upisao, iako su se na ekranu vidjele samo
zvjezdice. CGI program sada mora rastaviti ovaj dugacak niz inlormacija, te ga na odreden nacin
obraditi.
CGI program ce nakon obrade podataka korisniku poslati HTML dokument kojim ga obavjestava
da su podaci primljeni. Sadrzaj tog dokumenta moze, ali i ne mora ovisiti o primljenim podacima,
vec prema tome kako je sastavljen skript. Gruba slika CGI skripta u pseudojeziku mogla bi
izgledati otprilike ovako:
zamijeni svaki %20 i "+" s " "
zamijeni svaki ";" s enterom
po{alji zahtjev u kuhinju
114
vrati slijede}e korisniku:
<HTML>
<HEAD>
<TITLE>Klopa se priprema!</TITLE>
</HEAD>
<BODY>
Zahvaljujemo se na va{oj narudbi. Hrana koju ste naru~ili upravo
se priprema, pa moete do}i u fast-food restoran <B>MACI</B> za
petnaestak minuta da ju preuzmete.
<HR>
<A HREF="maci.html">Povratak u restoran</A>
</BODY>
</HTML>
Naravno, procesiranje podataka puno je slozenije i za taj je postupak potrebno poznavati neki
konkretan programski jezik. Sljedecim je primjerom prikazan CGI skript napisan u jeziku Perl koji
obraduje jedan vrlo jednostavan obrazac koji se sastoji od tri dijela: korisnickog imena (login),
citateljeve e-mail adrese (email), te komentara koji je citatelj upisao (komentar). Skript
ovakvog oblika moze se koristiti na UNIX sustavu ili na PC racunalu nakon sto se Perl
kompilatorom prevede u izvrsnu datoteku namijenjenu odgovarajucoj racunalnoj platlormi.
Komentari su u primjeru oznaceni znakom #.
#!/usr/local/bin/perl
$mail = /usr/lib/sandmail; # program za slanje e-maila
$prima = webmaster; # primatelj podataka iz obrazaca
# ispis prvog dijela povratnog dokumenta
print "<HTML>";
print "<HEAD>";
print "<TITLE>Zahvaljujem na komentaru!</TITLE>";
print "</HEAD><BODY>"
print "Dajemo sve od sebe kako bi ova Web stranica bila tako";
print "zabavna i bla-bla-bla ....... i jako smo vam zahvalni!";
# preuzmanje podatke od korisnika sa standardnog ulaza
read(STDIN, $buffer, $ENV{CONTENT_LENGTH});
# podjela "name=value" parova u alociran niz
@info = split(/&/, $buffer);
foreach $pair (@info)
{
($name, $value) = split(/=/, $pair);
# Prevedi %20 i + u razmake
$value=~ tr/+/ /;
$value=~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
# pohrani sve u niz DATA
$DATA($name) = $value;
}
open (MAIL, "|$mail $prima") || die "Ne mogu pokrenuti $mail!\n";
115
print MAIL "Subject: Komentar Web korisnika\n\n";
print MAIL "Reply-to: $DATA{email} ($DATA{login})\n";
print MAIL "$DATA{email} ($DATA{login}) sent:\n";
print MAIL "$DATA{komentar}";
close (MAIL);
print "<HR><A HREF="index.html">Povratak...</A>";
print "</BODY></HTML>";
Na slici 5-15 vidi se dokument kojega Web posluzitelj salje korisniku nakon upotrebe CGI
programa iz ovog primjera.
S//ka 5-15: Povratna informacija posiljaocu obrazaca
Puno vise podataka o sastavljanju CGI programa pronaci cete na adresi
http://www.yahoo.com/Computers/World_Wide_Web/Programming gdje se
nalazi i popis vrlo korisnih shareware alata svrstanih po tipu racunala i po operativnom sustavu za
koje su namijenjeni. CGI programi se primjenjuju u raznim situacijama, a s Web posluziteljem se
cesto dobiva i nekoliko vec kompiliranih programa koji sluze nekoj konkretnoj namjeni. Jedan
takav program zove se imagemap, a dobiva se sa svakim Web posluziteljem. Namjena tog
programa je upravljanje slikovnim mapama, o cemu cete saznati puno vise u sestom poglavlju.
116
6. poglavlje: Napredne mogucnosti
117
Slikovne mape
Slikovne mape koje se mogu ugradivati u HTML dokumente zapravo su obicne slike, no one
korisniku Web stranice omogucuju da na vizualno elektivniji nacin odabere novi dokument kojega
ce ucitati. Naime, u ovisnosti o podrucju slike na kojega je korisnik kliknuo misem, Web
posluzitelj ce poslati novi HTML dokument njegovom pretrazivackom programu. Takve slikovne
mape, koje se cesto nazivaju i samo mapama, vrlo su korisne kod izrade slozenih dokumenata u
kojima se na pocetnoj stranici citatelju pruza mogucnost odabira nekog uzeg tematskog podrucja.
Primjere dobro napravljenih mapa mozete pronaci na adresama http://tjev.tel.etf.hr/,
gdje se nalazi zemljopisna karta Hrvatske na kojoj je mapom rijesen odabir nekog grada, te
http://www.ziff.com/, na kojoj cete putem slikovne mape moci odabrati Web stranice
jednog od mnogih casopisa u izdanju poznate kuce Zill-Davis. Ova dva primjera mozete pogledati
i na slikama 6-1 i 6-2.
S//ka 6-1: Slikovna mapa u funkciji zemljopisne karte Hrvatske
S//ka 6-2: Odabir nekog casopisa u Ziff-Davis izdanju
Slikovne mape se izraduju upotrebom argumenta ISMAP u naredbi <IMG> koja, kao sto znate,
sluzi za ugradivanje slika u dokument, te dodatne datoteke cije ime zavrsava s nastavkom .MAP, u
kojoj su popisani svi dijelovi slike s odgovarajucim URL adresama razlicitih Web dokumenata.
Argument ISMAP Web posluzitelju porucuje da se radi o mapi, sto znaci da je vazno na koji je dio
slike citatelj kliknuo misem, jer o tome ovisi daljnji tijek ucitavanja HTML dokumenata u njegov
pretrazivacki program.
Ako u svojim Web stranicama zelite koristiti slikovne mape morat cete posjedovati pristup vec
kompiliranim CGI programima koji su instalirani na vasem World Wide Web posluzitelju. O CGI
programima je bilo nesto vise rijeci u prethodnom poglavlju. Ukoliko mozete na racunalu na
kojemu posjedujete korisnicki racun za rad s Internetom objavljivati svoje Web stranice, onda
vjerojatno vec posjedujete pristup gotovim CGI programima, no najbolje bi bilo da najprije o tome
pitate svojeg administratora sustava (ili Web administratora, buduci da se ne radi uvijek o istoj
osobi).
Druga vazna napomena je da slike koje koristite za izradu slikovnih mapa moraju biti pohranjene u
GIF lormatu. Kod obicnih slika ste smjeli koristiti i JPEG lormat zapisa, no ovo je ogranicenje
uvedeno kod slikovnih mapa zbog nekih posebnih svojstava JPEG lormata koja GIF ne posjeduje, a
mogla bi predstavljati problem prilikom rada s mapom. (JPEG slike se katkada same po sebi
koriste kao mape u kojima se cuvaju manje skice drugih slika.)
Sada mozemo kreirati i prvu vlastitu mapu koja ce za pocetak biti vrlo jednostavna. Ona ce se
sastojati od jedne GIF slicice, nekoliko redaka HTML kda i jedne .MAP datoteke. Pretpostavimo
118
da izradujete dokument kroz kojega citatelja upoznajete sa svojstvima razlicitih boja, te da za svaku
boju posjedujete zaseban HTML dokument u kojemu je ona detaljnije objasnjena. Zbog
jednostavnosti primjera, ogranicit cemo se na crnu i bijelu boju. U nastavku je dan ispis HTML
naredbi za taj primjer. Obratite paznju na dodavanje argumenta ISMAP naredbi <IMG>.
boje.htm
<H2>Mali priru~nik o bojama</H2>
<A HREF="/cgi-bin/imagemap/boje.map">
<IMG SRC="boje.gif" ISMAP></A>
<P>
Odaberite boju o kojoj elite saznati vi{e.
Na slici 6-3 nalazi se ovaj primjer nakon ucitavanja u Netscape. Imajte na umu da cete primjere
slikovnih mapa koji se nalaze na jednoj od prilozenih disketa moci samo prikazati u svojem
pretrazivackom programu, no necete moci provjeriti kako oni doista rade, buduci da su pohranjeni
na vasem osobnom racunalu koje nije Web posluzitelj. Zelite li ih ipak i isprobati, morat cete ih
prebaciti na racunalo na kojem namjeravate objaviti svoje Web stranice, tj. na racunalo koje je
ujedno i Web posluzitelj.
S//ka 6-3: Prva jednostavna mapa
Prethodnim je primjerom ilustrirana i sintaksa koju valja postovati prilikom izrade slikovnih mapa.
Kao sidro hipertekstualne veze uvijek se mora navesti puna putanja CGI programa imagemap. Ta
putanja ovisi o Web posluzitelju koji je instaliran na racunalu kojega koristite, no u vecini slucajeva
je to /cgi-bin/imagemap, pa se time mozete bez problema posluziti i u svojim dokumentima.
Vazno je, medutim, jos jednom ponoviti da morate posjedovati slobodan pristup direktoriju /cgi-
bin u kojemu se nalaze razni CGI programi medu kojima je i onaj koji se koristi kod izrade
slikovnih mapa. Opca sintaksa za izradu slikovnih mapa, prema tome, izgleda ovako:
<A HREF="/cgi-bin/imagemap/MAP_datoteka">
<IMG SRC="slika.gif" ISMAP></A>
Iza navodenja imena CGI programa /cgi-bin/imagemap, valja upisati i punu putanju .MAP
datoteke. U toj su datoteci popisani dijelovi slike na koje citatelj prilikom klika misem pokrece neki
novi dokument. Ukoliko radite s NCSA Web posluziteljem, postojanje mape u svojem dokumentu
morat cete prijaviti unutar konliguracijske datoteke /httpd/conf/imagemap.conf koja je
smjestena na Web posluzitelju. Radi se o obicnoj tekstualnoj datoteci u kojoj su popisane URL
adrese svih .MAP datoteka koje se upotrebljavaju u Web dokumentima smjestenima na racunalu na
kojem se nalazi i Web posluzitelj. Svoju mapu mozete nadopisati u ovu datoteku pomocu obicnog
119
uredivaca teksta i to tako da najprije napisete skraceno ime .MAP datoteke (ime bez nastavka
.MAP), te potom njezinu punu putanju. Mnogi administratori sustava zahtijevaju da sve mape budu
smjestene u istom direktoriju, pa je ta putanja najcesce jednaka za sve datoteke. Najbolje bi bilo da
se oko ovih detalja raspitate kod svojeg Web administratora. Redak teksta koji za prethodni primjer
morate dodati u konliguracijsku datoteku moze ovisno o direktoriju u kojem je smjestena mapa
izgledati ovako:
boje : /httpd/conf/maps/boje.map
Imajte na umu da konliguracijska datoteka imagemap.conf postoji samo na NCSA Web
posluziteljima. Nakon sto u njoj deklarirate postojanje vase slikovne mape, unutar HTML
dokumenta necete morati navoditi punu putanju .MAP datoteke, vec samo njezino skraceno ime,
sto je pokazano iducim primjerom:
<H2>Mali priru~nik o bojama</H2>
<A HREF="/cgi-bin/imagemap/boje">
<IMG SRC="boje.gif" ISMAP></A>
Kako bismo za nas primjer mogli napraviti .MAP datoteku, morat cemo sliku boje.gif ucitati u
neki program za crtanje kakav je i LView Pro koji dolazi uz ovu knjigu. Sada treba pomocu misa
ustanoviti koje su koordinate sredista dviju kruznica na ucitanoj slici, buduci da ih treba navesti u
datoteku s mapom. Lako se provjerava da su koordinate sredista bijele kruznice 53,39, a crne
146,39. (Koordinata 0,0 nalazi se u gornjem lijevom kutu slike.)
Geometrijski likovi koji se mogu koristiti kod mapiranja slike su kruznica, pravokutnik, poligon i
tocka. Mi cemo se u nasem primjeru, naravno, posluziti kruznicama, sto takoder valja navesti u
datoteci s mapom. Ta se datoteka sastavlja po tocno odredenoj sintaksi i ovdje stvari postaju nesto
slozenije jer tocan lormat .MAP datoteke ovisi o Web posluzitelju koji je pokrenut na racunalu na
kojemu objavljujete svoje Web stranice. Do sada ste bili upoznati s HTML naredbama koje kreiraju
drugacije elekte kod razlicitih pretrazivackih programa, no ovo je prvi puta da neka radnja ovisi o
soltveru koji se nalazi na drugom kraju veze - Web posluzitelju.
Kao sto vec znate, u Hrvatskoj se gotovo svugdje koriste Web posluzitelji tvrtke CERN ili NCSA.
CERN je, da se podsjetimo, svicarska organizacija zasluzna za osnivanje World Wide Weba, a
NCSA americka tvrtka koja je razvila popularni pretrazivacki program Mosaic. Najprije cemo
pogledati kako .MAP datoteka mora izgledati kada se slikovna mapa nalazi unutar stranice
objavljene na racunalu s instaliranim NCSA Web posluziteljem, buduci da se on koristi nesto vise
od CERN-ovog.
U svakom retku datoteke opisuje se po jedan dio slikovne mape i to tako da se najprije navede
geometrijski lik, potom URL adresa dokumenta koji ce se ucitati kada korisnik klikne na dio slike
omeden tim likom, te na kraju koordinate samog geometrijskog lika. Kako kruznice mogu biti
razlicitih radijusa, iza koordinata sredista navode se i koordinate bilo koje tocke koja se nalazi na
120
njihovom rubu. U nastavku je prikazana gotova datoteka boje.map, kakvu bismo koristili kada bi
nas primjer objavljivali na Web posluzitelju tvrtke NCSA.
default boje.html
circle bijela.html 53,39 87,69
circle crna.html 146,39 180,69
Druga i treca linija datoteke deliniraju bijelu i crnu kruznicu na koje korisnik moze kliknuti kako bi
u svoj pretrazivacki program ucitao dokument bijela.html, odnosno crna.html. Srediste
bijele kruznice se, kao sto smo vec uocili, nalazi na koordinatama 53,39, dok koordinate 87,69
predstavljaju neku od tocaka na rubu bijele kruznice. Svejedno je koju cete tocku na rubu kruznice
odabrati, vazno je samo da to ucinite sto tocnije u nekom od programa za crtanje. Slicno je i s
crnom kruznicom na kojoj je odabrana tocka s koordinatama 180,69. Kljucna rijec koja na NCSA
Web posluziteljima predstavlja kruznicu je circle, pa je stoga i navedena na pocetku drugog i
treceg retka datoteke.
Buduci da korisnik moze kliknuti i negdje izvan obiju kruznica na slici, u prvom je retku datoteke
navedeno koji se, u tom slucaju, dokument mora ucitati u njegov pretrazivacki program. To se, kao
sto vidite, postize navodenjem kljucne rijeci default, iza koje je upisano ime odgovarajuceg
HTML dokumenta. Naravno, umjesto navodenja samo imena HTML dokumenata koji su povezani
slikovnom mapom, u .MAP datoteku se mogu upisivati i cijele URL adrese bilo kojih objekata
smjestenih negdje na Internetu. Ovdje to nije ucinjeno, jer pretpostavljamo da su ciljani dokumenti
smjesteni u istom direktoriju kao i dokument sa slikovnom mapom, sto je u vecini slucajeva i
najelegantnije rjesenje.
Ako s druge strane radite na racunalu s instaliranim Web posluziteljem tvrtke CERN, vasa ce
.MAP datoteka izgledati nesto drugacije. Dijelovi slike se kao i kod NCSA-inog posluzitelja
odvajaju u zasebne retke u datoteci, no ovaj put se iza geometrijskog lika najprije navode njegove
koordinate obuhvacene oblim zagradama, a tek potom odgovarajuca URL adresa. U nastavku je
dan ispis datoteke boje.map koji bi bio ispravan za rad s CERN-ovim Web posluziteljem.
default boje.html
circ (53,39) 34 bijela.html
circ (146,39) 34 crna.html
Odmah ste vjerojatno primijetili da je kljucna rijec za kruznicu u ovom slucaju circ, te da se
velicina kruznice ne odreduje koordinatama neke tocke na njezinom rubu. Broj 34 koji je ovdje
naveden iza koordinata sredista obiju kruznica, zapravo je njihov radijus izrazen u pikselima.
Ovakav nacin zapisivanja zasigurno je puno pregledniji od onoga koji se koristi kod NCSA Web
posluzitelja, no ipak je puno jednostavnije u nekom crtacem programu odrediti koordinate bilo koje
tocke na rubu neke kruznice, nego njezin radijus.
121
Koordinate za preostala tri geometrijska lika koja se mogu koristiti u slikovnim mapama odreduju
se na jednak nacin kod obadva tipa posluzitelja, samo sto ih kod CERN-a uvijek morate zapisivati
unutar zagrada. Kod pravokutnika se redom navode koordinate njegovog gornjeg lijevog, te donjeg
desnog kuta. Kod poligona se upisuju koordinate svih njegovih kuteva, bilo u smjeru kazaljke na
satu ili obrnuto od njega, sve dok se navode nekim redom. Tocaka koje odreduju poligon smije biti
najvise 100. Ukoliko zelite kao sastavni dio slikovne mape navesti i tocku, dovoljno je da
jednostavno navedete njezine koordinate.
Prilikom upotrebe pravokutnika i tocke koriste se iste kljucne rijeci za NCSA i CERN Web
posluzitelje, a to su rect i point, dok se kod poligona koristi kljucna rijec poly za NCSA-in
posluzitelj, odnosno polygon za CERN-ov. Kod slikovnih mapa koje se sastoje od velikog broja
dijelova korisno je posluziti se i komentarima u .MAP datoteci, sto se kod oba tipa posluzitelja
ostvaruje upisivanjem znaka # kao prvog slova u nekom retku, iza cega se moze navesti bilo kakav
tekst. Neke starije inacice CERN-ovog posluzitelja ne podrzavaju upotrebu tocaka u slikovnim
mapama, dok se kod najnovijih inacice mogu koristiti i NCSA-ine kljucne rijeci za geometrijske
likove. Sljedecim primjerom ilustrirana je upotreba svih geometrijskih likova u slikovnoj mapi, te
komentara u datoteci s mapom ciji je ispis dan i za NCSA-in i za CERN-ov Web posluzitelj.
Najprije pogledajte HTML kd za novi primjer.
likovi.htm
<CENTER>
<H2>Geometrijski likovi</H2>
<A HREF="/cgi-bin/imagemap/likovi.map">
<IMG SRC="likovi.gif" ISMAP></A>
<P>
Odaberite geometrijski lik o kojem elite podrobnije informacije.
</CENTER>
Slikovnu mapu likovi.gif pogledajte na slici 6-4.
S//ka 6-4: Razni geometrijski likovi unutar slikovne mape
Nakon odredivanja svih kljucnih koordinata za ovu sliku, potrebno je sastaviti .MAP datoteku u
ovisnosti o tipu Web posluzitelja. Ukoliko je na racunalu instaliran posluzitelj tvrtke NCSA,
datoteka likovi.map trebala bi izgledati ovako:
# Datoteka likovi.map, NCSA Web poslu`itelj.
default likovi.html
# pravokutnik
rect pravokutnik.html 32,16 93,133
# kru`nica
122
circle krug.html 176,54 209,82
# poligoni
poly trokut.html 22,329 221,450 21,450 22,329
poly poligon.html 347,259 451,268 435,435 293,395 400,350 347,259
# to~ka
point tocka.html
Pri radu s CERN-ovim Web posluziteljem, potrebno je sastaviti datoteku sa sadrzajem danim u
sljedecem primjeru. Ne zaboravite da s najnovijom inacicom CERN-ovog posluzitelja smijete
koristiti iste kljucne rijeci za geometrijske likove kao i kod NCSA-inog.
# Datoteka likovi.map, CERN Web poslu`itelj.
default likovi.html
# pravokutnik
rectangle (32,16) (93,133) pravokutnik.html
# kru`nica
circ (176,54) 33 krug.html
# poligoni
polygon (22,329) (221,450) (21,450) (22,329) trokut.html
polygon (347,259) (451,268) (435,435) (293,395) (400,350)(347,259)
poligon.html
# to~ka
point 110,169
Vjerojatno odmah primjecujete da su kod poligona (u ovom slucaju trokuta i peterokuta) koordinate
iste tocke navedene na pocetku i na kraju popisa s koordinatama. To je jedno od pravila koje se
treba postivati kod upotrebe poligona u slikovnim mapama, bilo da se radi o CERN ili NCSA Web
posluzitelju. Takoder, na istom se primjeru uocava i besmislenost upotrebe tocaka u slikovnim
mapama. Tocke se kod mapa ne upotrebljavaju gotovo nikada, buduci da je svakom korisniku tesko
misem pogoditi bas onu tocku na slici kojom se poziva neki drugi HTML dokument jer se ona od
svoje okolice moze razlikovati eventualno svojom bojom. Tesko je uopce vjerovati da bi bilo koji
korisnik Web stranice mogao pomisliti da je nekakva tocka zapravo aktivni dio slikovne mape, pa
ih stoga nastojte u potpunosti izbjegavati. (U posljednjem primjeru tocka je uvrstena samo zbog
potpunosti prikaza - cak je i na slici nesto povecana kako bi bila lakse uocljiva.)
Premda je kod slozenijih slikovnih mapa, poput onih koje su prikazane na slikama 5-1 i 5-2 prilicno
zamorno odredivati koordinate svih kljucnih tocaka, rezultati koji se tim postupkom postizu znaju
biti itekako elektni. Problem, medutim, postaje sve slozniji kod slika koje sadrze puno poligona i
velik broj razlicitih geometrijskih likova, pa su zato neki autori shareware programa napravili alate
koji vam olaksavaju izradu slikovnih mapa. Jedan takav alat je i program MapThis! koji se dobiva
na disketama s ovom knjigom, a namijenjen je radu s Windows okruzjem. Posao oko izrade
slikovnih mapa ovim vam je programom olaksan utoliko da vise ne morate programima za crtanje
odredivati mnostvo koordinata, vec ih MapThis! sam automatski racuna dok vi misem doslovno
rezuckate sliku na dijelove od kojih je sastavljena mapa. Vise o tom programu mozete procitati u
123
dodatku B. Ukoliko vas zanima neki slican program za rad s nekim drugim operativnim sustavom
koji nije Windows, najbolje bi bilo da posjetite Web stranice na adresi:
http://www.yahoo.com/Computers/World_Wide_Web/Programming/Imagemaps
Rad s bojama i uzorcima
Pojavom Netscape Navigatora 1.1 jezik HTML je postao bogatiji za jedno osobito atraktivno
prosirenje kojega danas podrzava cak i Mosaic, te mnogi drugi pretrazivacki programi. Radi se o
skupu argumenata za naredbu <BODY> kojima se moze odredivati boja pozadine i teksta, odnosno
slikovni uzorak (tekstura) kojim ce biti ispunjena Web stranica. Pojam ispunjavanja slikovnim
uzorkom vam je zasigurno vec poznat, buduci da se radi o slicnoj mogucnosti koju vam nudi
Windows okruzje kroz opciju Wallpaper u izborniku Desktop programa Control Panel.
Pretrazivacki programi s tekstualnim korisnickim suceljem, dakako, ne prepoznaju ova
Netscapeova prosirenja jezika HTML, no kako ona nikako ne mogu utjecati na izgled Web stranice
ucitane u takav pretrazivacki program, nema razloga da ih ne koristite kada god vam se to ucini
prikladnim.
Promjena pozadinske boje
Kako biste mogli odrediti boju pozadine za svoju Web stranicu, morat cete najprije decimalnu
RGB (red, green, blue) vrijednost te boje pretvoriti u heksadecimalnu. Premda se kod Windows,
X-Windows, OS/2 te mnogih drugih gralickih operativnih sustava ovisno o gralickoj kartici moze
koristiti i puno veci raspon boja, morat cete se ograniciti na paletu od 256 boja jer u suprotnom
vasa Web stranica nece biti prikazana onako kako biste zeljeli. Mnogi citatelji ne koriste cak niti
256 boja pri radu sa svojim racunalom, pa je najbolje da za pozadinu odaberete neku osnovnu boju
za koju ste uvjereni da ce kod svakog korisnika izgledati onako kako ste vi zamislili. Tablicom 5-1
je popisano 20 boja koje mozete koristiti bez straha da ce na nekim gralickim suceljima biti
prikazane neispravno, buduci da pripadaju skupu najosnovnijih boja koje se koriste svakodnevno
pri radu s racunalom. Ujedno su dane i odgovarajuce heksadecimalne RGB vrijednosti. U tablici su
te vrijednosti za nijansu crvene, zelene i plave boje odvojene zarezom, no kao sto cete ubrzo
uvidjeti, zarezi se izostavljaju unutar HTML naredbe kojom se odreduje boja pozadine.
Boja Heksadecimalni RGB kodovi
Crna
00,00,00
Tamnocrvena
80,00,00
Tamnozelena
00,80,00
Tamnozuta
80,80,80
Tamnoplava
00,00,80
Tamnoljubicasta
80.00,80
124
Tamnocian
00,80,80
Svijetlosiva
C0,C0,C0
Svijetlozelena
C0,DC,C0
Svijetloplava
A6,CA,F0
Oker
FF,FB,F0
Svijetlosmeda
A0,A0,A4
Tamnosmeda
80,80,80
Crvena
FF,00,00
Zelena
00,FF,00
Plava
00,00,FF
Zuta
FF,FF,00
Ljubicasta
FF,00,FF
Cian
00,FF,FF
Bijela
FF,FF,FF
Tab//ca 6-1: Heksadecimalni RGB kodovi nekih osnovnih boja
Boja pozadine Web stranice odreduje se tako da se naredbi <BODY> koja oznacava tijelo
dokumenta dodijeli argument BGCOLOR kojemu je pridruzena heksadecimalna vrijednost zeljene
boje, kao sto je ucinjeno u sljedecem primjeru.
pozadina.htm
<HTML>
<HEAD><TITLE>Bijela pozadina</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>Web stranica s bijelom pozadinom</H1>
</BODY>
</HTML>
Heksadecimalne vrijednosti pojedine RGB nijanse se nesmiju razdvajati zarezom, dok je svejedno
hocete li se posluziti velikim ili malim slovima. Kako ovaj primjer izgleda nakon ucitavanja u
Netscape, pogledajte na slici 6-5.
S//ka 6-5: Promjena pozadinske boje u HTML dokumentu
Popunjavanje pozadine slikovnim uzorkom
125
Slikovni uzorak kojim se moze ispuniti pozadina Web stranice mora biti pohranjen u GIF lormatu,
a pozeljno je da sama datoteka bude sto kraca kako bi iscrtavanje stranice moglo zapoceti cim se
ona u potpunosti prebaci na citateljevo racunalo. Ime datoteke se dodjeljuje argumentu
BACKGROUND koji kao i u proslom slucaju stoji uz naredbu <BODY>. Vazno je napomenuti da
vrijednost koja se dodjeljuje tom argumentu moze biti bilo koja URL adresa koja oznacava neku
GIF datoteku na Internetu, premda je najbolje upotrijebiti neku slicicu koja je smjestena na
lokalnom racunalu. Nacin upotrebe ovog zanimljivog argumenta prikazan je u novom primjeru.
uzorak.htm
<HTML>
<HEAD><TITLE>Pozadina popunjena uzorkom</TITLE></HEAD>
<BODY BACKGROUND="raindrop.gif">
<H1>Web stranica sa slikovnim uzorkom</H1>
</BODY>
</HTML>
Na slici 6-6 nalazi se ovaj primjer ucitan u Netscape.
S//ka 6-6: Pozadina popunjena slikovnim uzorkom
Promjena boje teksta i hipertekstualne veze
Pored mijenjanja pozadinske boje, Netscape vam omogucava da promijenite i boju teksta, te boju
kojom se oznacava sidro hipertekstualne veze. Boja se odabire na isti nacin kao i kod pozadine -
preracunavanjem RGB nijansi u heksadecimalne vrijednosti. Boju kojom zelite da se ispisuje
osnovni tekst vaseg HTML dokumenta dodijelite argumentu TEXT, a onu kojom zelite da budu
oznacena sidra hipertekstualnih dokumenata argumentu LINK. Naravno, obadva argumenta pisu se
uz naredbu <BODY>, a kao i kod pozadine, najbolje je da odaberete neku boju iz tablice 6-1.
Sintaksa je vrlo jednostavna:
<BODY TEXT="#RRGGBB" LINK="#RRGGBB>sadr`aj dokumenta</BODY>
Kako bi citatelji vase Web stranice mogli razlikovati sidra hipertekstualnih veza koja su vec
koristili, pozeljno je da ona budu oznacena drugacijom bojom od sidra jos neposjecenih veza. Ta se
boja moze oznaciti pomocu argumenta VLINK, gdje pocetno slovo V dolazi od engleske rijeci
visited (posjeceno). Sidra onih veza koje korisnik upravo odabire takoder mogu biti oznacena
126
posebnom bojom, sto se postize upotrebom argumenta ALINK, po rijeci active (aktivno).
Sljedecim primjerom prikazana je upotreba svih triju argumenata opisanih u ovom odjeljku
poglavlja, te argumenta BGCOLOR kojim se mijenja boja pozadine HTML dokumenta.
obojana.htm
<HTML>
<HEAD><TITLE>Web stranica s bojicama</TITLE></HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF"
LINK="#FFFF00" VLINK="#0000FF" ALINK="#FF0000">
<H1>Web stranica s <A HREF="tekst.htm">tekstom</A> u boji</H1>
</BODY>
</HTML>
Na slici 6-7 mozete pogledati kako izgleda ovaj primjer nakon ucitavanja u Netscape. Najbolje bi,
medutim, bilo da ga sami isprobate na svojem racunalu kako biste uocili promjenu boje prilikom
klika na sidro hipertekstualne veze, te nakon njegove upotrebe.
S//ka 6-7: Bijelo na crnom!
Prozirne slike
Vrlo atraktivni gralicki elekti mogu se postici upotrebom slika koje sadrze prozirnu boju, odnosno
dijelove ispod kojih se vidi pozadina prozora pretrazivackog programa. Prozirne slike (koje se
mogu pohranjivati samo u GIF lormatu) posebno su korisne pri radu s pozadinama koje su
ispunjene slikovnim uzorkom, buduci da ostavljaju dojam crteza izravno otisnutog u podlogu, a ne
slike koja pluta nad stranicom.
Na slici 6-8 vide se dvije iste ikone, s time da je kod donje bijela boja oznacena kao prozirna.
Donja slika djeluje puno uvjerljivije od gornje.
S//ka 6-8: Razlika izmedu obicne i prozirne slike
Iako tek rijetke gralicke aplikacije podrzavaju rad s prozirnim GIF slikama (ili uopce GIF slikama),
postoji nekolicina jednostavnih shareware programa koji vam omogucavaju da posebnom
kapaljkom kliknete na boju koju zelite oznaciti kao prozirnu i potom pohranite sliku. Jedan takav
program je i LView Pro koji se nalazi na prilozenim disketama, a namijenjen je radu s Windows
okruzjem.
127
Korisnici racunala Macintosh mogu se posluziti pogramom Transparency autora Aarona Gilesa.
Program mozete pronaci na adresi ftp://sunsite.unc.edu/pub/packages/
infosystems/WWW/tools/giftrans.
Ako radite s UNIX strojem ili u DOS okruzju, posluzite se programom GIFTool koji je dostupan
putem adrese http://www.homepages.com/tools/.
HTML+ prosirenja
Mnoga prosirenja jezika HTML koja su predlozena standardom HTML+ vec su vam poznata,
buduci da ih sada podrzava pretrazivacki program Netscape ciji su autori i osmislili dobar dio
novih oznaka. HTML+ zapravo predstavlja skup naredbi koje bi trebale biti prihvacene standardom
HTML 3 koji bi se vrlo brzo trebao sluzbeno usvojiti, cak mozda i do trenutka kada cete citati ovaj
tekst. Mnogi vjeruju da ce taj standard obuhvacati sve oznake HTML+ prosirenja, te sve oznake
Netscapeovih prosirenja koje nisu obuhvacene standardom HTML+.
Uz sve naredbe namijenjene lormatiranju teksta kod standarda HTML+ mogu se koristiti dva nova
argumenta, LANG i ID. Argument LANG namijenjen je odredivanju jezika cijim skupom znakova
mora biti ispisan tekst na kojega se odnosi naredba kojoj je pridruzen. Taj skup mora biti razlicit od
uobicajenog ISO-Latin 1 skupa znakova. Argument ID koristi se za dodjeljivanja raznih imena
lormatiranom tekstu koja ce posluziti kao ciljevi za hipertekstualne veze unutar istog dokumenta.
Time se izbjegava upotreba naredbe za stvaranje hipertekstualne veze uz koju je dopisan i
argument NAME, sto je prikazano sljedecim primjerom. Naredba
<H2 ID="literatura">Popis literature</H2>
moze se upotrijebiti umjesto skupa naredbi
<H2><A NAME="literatura">Popis literature</H2>
HTML+ donosi i jedan novi argument za naredbu <P>, koji je namijenjen oznacavanju odlomka u
kojem tekst nikada ne smije preci u novi redak. Radi se o argumentu WRAP, a za sada mu mozete
dodijeliti samo vrijednost off. Ako u odlomku oznacenom ovim argumentom ipak zelite preci u
novi redak morat cete se na odgovarajucem mjestu posluziti naredbom <L>. Ta naredba za razliku
od vec poznate oznake <BR> moze primiti i upravo spominjan argument ID.
Vrlo zanimljiva novost je i oznaka <RENDER> koja se mora smjestiti u zaglavlje dokumenta (dio
obuhvacen oznakama <HEAD> i </HEAD>), a sluzi deliniranju novih tekstualnih stilova za
upotrebu u tijelu dokumenta. Naredba <RENDER> mora obavezno sadrzavati dva argumenta, od
kojih je prvi TAG, a mora mu se dodijeliti ime koje ce se upotrebljavati kao oznaka za novi stil.
128
Drugi obavezan argument je STYLE koji sluzi deliniranju nacina kojim ce se lormatirati tekst
oznacen upravo deliniranom oznakom. Najbolje je ovu naredbu upoznati kroz konkretan primjer.
<HTML>
<HEAD>
<TITLE>Definiranje korisni~kih stilova</TITLE>
<RENDER TAG="NASLOV" STYLE="U,B">
</HEAD>
<BODY>
<NASLOV>Ovo je zapravo podcrtan i masno otisnut tekst</NASLOV>
</BODY>
</HTML>
Argumentu STYLE dodjeljuje se popis drugih HTML oznaka namijenjenih lormatiranju teksta koje
se moraju razdvajati zarezima. Naredbe koje smijete upotrijebiti u popisu su I, B, U, S, SUP, SUB,
te TT, a dozvoljena je i upotreba naredbe P ako zelite da tekst oznacen novonastalim stilom bude
automatski odvojen od okolnog teksta kao zaseban odlomak.
Naredbe <FOOTNOTE> i </FOOTNOTE>, te <MARGIN> i <MARGIN> takoder su dio HTML+
prosirenja, a sluze za ugradnju dodatnih komentara glavnom tekstu dokumenta. Prilikom
ispisivanja Web stranice naredbom Print u pretrazivackom programu, tekst oznacen naredbom
<FOOTNOTE> bit ce smjesten pri dnu papira, dok ce tekst oznacen naredbom <MARGIN> biti
ispisan uz lijevi rub stranice. Na ekranu ce se, medutim, na mjestu gdje se nalaze ove dvije naredbe
nalaziti sidro hipertekstualne veze prikazano u obliku nekog simbola ili ikone. U trenutku kada
korisnik klikne na takvu ikonu, unutar prozora s pretrazivackim programom pojavit ce se novi
prozorcic u kojem ce biti smjesten odgovarajuci tekst. Taj tekst ne smije sadrzavati oznake za
razdvajanje odlomaka, liste, obrasce i ostale slozene elemente jezika HTML koji ne sluze
lormatiranju teksta unutar istog odlomka.
Cesto cete se naci u situaciji kada cete htjeti da jedan tekst bude prikazan na stranici u trenutku
kada je citatelj gleda na svojem ekranu, a neki drugi u papirnatoj lormi dokumenta koju citatelj
moze dobiti ako stranicu ispise na pisacu. Tekst obuhvacen oznakama <PRINTED> i
</PRINTED> vidjet ce se samo na ispisanoj stranici, dok ce se samo na ekranu moci citati tekst
koji se nalazi unutar oznaka <ONLINE> i </ONLINE>.
HTML+ prosirenja dozvoljavaju vam da uz slike koje ugradujete unutar Web stranica napisete i
kratke komentare koji ih opisuju. Takve slike se ne ubacuju u dokument putem naredbe <IMG>,
vec pomocu oznaka <FIG> i </FIG>. Komentar koji zelite smjestiti uz sliku morate navesti
unutar oznaka <CAPTION> i </CAPTION> i to odmah nakon pocetne naredbe <FIG>. Sav tekst
koji se nalazi iza komentara, a ispred zavrsne oznake </FIG> predstavlja alternativni tekst za
sliku koji se kod naredbe <IMG> dodjeljivao argumentu ALT. Argumenti kojima se kod naredbe
<FIG> odreduje nacin smjestanja slike na stranicu i datoteka koja sadrzi sliku su ALIGN i SRC, te
se upotrebljavaju na isti nacin kao i kod naredbe <IMG>. U nastavku je dan vrlo jednostavan
primjer koji prikazuje nacin na koji mozete upotrijebiti ovu naredbu.
129
<FIG SRC="karta.gif" ALIGN=left>
<CAPTION>Karta Europe</CAPTION>
*slika Europe*
</FIG>
Specilikacije za podrsku matematickim jednadzbama jos su uvijek u razvoju i ocekuje se da ce
uskoro biti objavljene. Za sada se zna da ce dio dokumenta koji sadrzi matematicke jednadzbe biti
obuhvacen oznakama <MATH> i </MATH>, te da ce se koristiti standardni ISO skup znakova za
prikazivanje posebnih matematickih simbola. Tako ce se, primjerice, znak integrala oznacavati s
&int;, a znak za beskonacnu vrijednost s &infin;. Ostali elementi jednadzbi grupirat ce se
unutar oznaka <BOX> i </BOX>, te <ARRAY> i </ARRAY>, dok ce se razlomacka crta
oznacavati naredbom <OVER>. Ako vec sada imate potrebu za ugradnjom matematickih jednadzbi
unutar svoje Web stranice, najbolje bi bilo da ih sastavite u nekom za to specijaliziranom programu
te da ih pohranite u obliku GIF slike. Takvu sliku potom mozete vrlo jednostavno uvrstiti u svoj
dokument pomocu naredbe <IMG>.
Najatraktivnije od svih prosirenja koje nam pruza standard HTML+ bez sumnje je mogucnost
izrade tablica unutar Web stranice, sto vec sada podrzavaju mnogi pretrazivacki programi medu
kojima su Mosaic i Netscape. O tablicama ce biti puno vise rijeci u sljedecem odjeljku ovog
poglavlja, buduci da se radi o vrlo korisnom dodatku koji se moze primjenjivati u mnogim
situacijama.
Ostala HTML+ prosirenja koja se vjerojatno nece precesto koristiti zbog toga sto ne donose
nikakvu pretjerano korisnu novost popisana su u tablici 5-1. Za svako prosirenje dana je
odgovarajuca pocetna i zavrsna HTML oznaka, te kratko objasnjenje njezine lunkcije.
Pocetna oznaka Zavrsna oznaka Znacenje
<ABBREV> </ABBREV>
Oznaka za skracenicu unutar teksta
<ACRONYM> </ACRONYM>
Skracenica dobivena od pocetnih slova nekog imena
<ARG> </ARG>
Oznaka za argument unutar neke naredbe; npr. -a
<AU> </AU>
Ime autara Web stranice
<CMD> </CMD>
Oznaka za naredbu kakva je, primjerice, ls
<LIT> </LIT>
Kao i <PRE> uz upotrebu proporcionalnog pisma
<PERSON> </PERSON>
Oznaka za osobna imena; npr. Hrvoje Horvat
<Q> </Q>
Kratak citat unutar neke recenice
<S> </S>
Ozaka za precrtan tekst (isto kao i <STRIKE>)
Tab//ca 6-2: Neka jednostavnija HTML+ prosirenja
130
Tablice
Tablice su zasigurno jedino HTML+ prosirenje kojega vec sada podrzava vecina pretrazivackih
programa, pa se stoga sve vise i vise koriste. One se mogu primjenjivati u raznim tehnoloskim
dokumentima, popisima, prospektima, te mnogim drugim materijalima kakvi se susrecu na Webu,
a buduci da u kombinaciji sa slikama i hipertekstualnim vezama mogu znatno utjecati na gralicki
izgled stranice, bio bi veliki propust ne upotrijebiti ih u nekom slozenijem dokumentu. Neki autori
Web stranica jos se uvijek suzdrzavaju od upotrebe tablica, buduci da oznake namijenjene
njihovom kreiranju nisu jos sluzbeno prihvacene, no kako ih svi poznatiji pretrazivaci znaju
ispravno prikazati na ekranu, nema razloga da ih i vi ne koristite.
Svi podaci smjesteni u nekoj tablici moraju se nalaziti unutar oznaka <TABLE> i </TABLE>.
Naredbi <TABLE> moze se dodijeliti argument BORDER=n kojim se odreduje hoce li tablica
posjedovati okvir i koje ce on biti debljine. Broj n mora sadrzavati neku vrijednost vecu od nule, a
ona oznacava debljinu okvira u pikselima. Ukoliko se ne navede nikakva vrijednost, tablica ce biti
najtanja moguca. Preporuka je da se okviri u svakom slucaju koriste, jer u suprotnom podaci
smjesteni u tablici izgledaju vrlo nepregledno.
Odmah iza pocetne oznake <TABLE> moze se smjestiti i par naredbi <CAPTION> i
</CAPTION> izmedu kojih se upisuje komentar koji sluzi kao opis tablice. Opis ce biti smjesten u
sredinu iznad tablice, no vi ga mozete postaviti i ispod tablice ako naredbi <CAPTION> dodijelite
argument ALIGN=BOTTOM. Kod opisa se mozete posluziti i drugim HTML oznakama
namijenjenima lormatiranju teksta unutar istog odlomka.
Svaki redak tablice valja obuhvatiti oznakama <TR> i </TR>, a svako pojedino polje u retku
oznakama <TD> i </TD>. Za naredbu <TR> postoje dva atributa kojima se moze odredivati nacin
smjestanja podataka u retku, a to su ALIGN za vodoravno poravnavanje i VALIGN za okomito
poravnavanje. Podaci se vodoravno mogu poravnati uz lijevi ili desni rub polja, odnosno u srediste
polja, sto se redom postize dodjeljivanjem vrijednosti LEFT, RIGHT te CENTER argumentu
ALIGN. Argumentu VALIGN mogu se dodijeliti vrijednosti TOP, MIDDLE i BOTTOM, sto znaci da
se podaci mogu smjestati uz gornji rub, uz sredinu ili uz donji rub polja. Sve ovo je, dakako,
najbolje ilustrirati jednim primjerom.
tablica1.htm
<TABLE BORDER>
<CAPTION><H2>Vrijeme saimanja datoteke u minutama</H2></CAPTION>
<TR>
<TD></TD><TD>Saimanje 3.052.259 bajtova</TD>
<TD>Saimanje 10.976.256 bajtova</TD>
<TD>Saimanje 108.338.210 bajtova</TD></TR>
<TR ALIGN=CENTER>
<TD>ARJ 2.41</TD><TD>00:37</TD>
<TD>01:48</TD><TD>28:35</TD></TR>
<TR ALIGN=CENTER>
131
<TD>LHA 2.13</TD><TD>00:44</TD>
<TD>02:08</TD><TD>30:14</TD></TR>
<TR ALIGN=CENTER>
<TD>PkZip 2.04g</Td><TD>00:27</TD>
<TD>01:04</TD><TD>17:43</TD></TR>
<TR ALIGN=CENTER>
<TD>RAR 1.54</TD><TD>00:32</TD>
<TD>01:02</TD><TD>22:35</TD></TR>
<TR ALIGN=CENTER>
<TD>UC II 3.0</TD><TD>01:14</TD>
<TD>01:25</TD><TD>37:10</TD></TR>
</TABLE><BR>
<I>Podaci su preuzeti iz MIPS-a br. 9</I>
Na slici 6-9 vidi se ovaj primjer nakon ucitavanja u Netscape. Primijetite da je prvo polje u prvom
retku tablice prikazano kao dio okvira. Taj elekt se postize tako da se unutar oznaka <TD> i
</TD> ne upise nikakav podatak, sto je ucinjeno i u ovom primjeru.
S//ka 6-9: Jednostavan primjer tablice
Tablica na ovoj slici izgleda pregledno, no vizualno bi u svakom slucaju mogla biti bolja. Bilo bi
dobro kada bi podaci u prvom retku i prvom stupcu bili drugacije oznaceni kako bi se lakse
uocavalo da predstavljaju naslove za pojedini redak ili stupac, a zadnja tri stupca djelovala bi puno
elektnije kada bi bila nesto uza. Oznakama <TH> i </TH> moze se obuhvatiti podatak kojega
zelimo posebno istaknuti kao naslov retka ili stupca, no tada se ne smiju upotrijebiti oznake <TD> i
</TD>. Naredbi <TH> mogu se dodijeliti isti argumenti za poravnavanje podatka u polju kao i
naredbi <TR> koji tada imaju prioritet nad argumentima kojima se odreduje poravnavanje cijelog
retka. Podatak oznacen ovom naredbom bit ce ovisno o pretrazivackom programu prikazan
drugacije od uobicajenog podatka, najcesce nesto deblje otisnutim slovima i centriranjem podatka
sadrzanog u polju.
Autori Netscapea osmislili su i dva prosirenja za samu naredbu <TABLE> koja se ostvaruju
upotrebom argumenata CELLSPACING=n i CELLPADDING=m. Argumentu CELLSPACING
mozete dodijeliti vrijednost koja ce predstavljati kolicinu piksela za koju ce medusobno biti
razmaknuto svako polje, a argumentu CELLPADDING kolicinu piksela koja se mora nalaziti
izmedu ruba pojedinog polja i u njemu sadrzanog podatka. Istoj naredbi mozete dodijeliti i
argument WIDTH=n koji vam omogucava da navedete sirinu polja sadrzanih u tablici. Taj
argument je takoder Netscapeovo prosirenje, a mozete ga primijeniti i kod naredbi <TD> i <TH>
ukoliko zelite odrediti sirinu samo nekom odredenom stupcu tablice. (Sirina stupca u tablici
automatski se prilagodava najsirem polju sadrzanom u tom stupcu.) Sljedecim primjerom
prikazana je upotreba sva tri Netscapeova prosirenja, te upotreba naredbe <TH>.
132
tablica2.htm
<TABLE BORDER=5 CELLSPACING=8 CELLPADDING=5>
<CAPTION><H2>Vrijeme saimanja datoteke u minutama</H2></CAPTION>
<TR>
<TD WIDTH=100></TD><TH WIDTH=115>Saimanje 3.052.259 bajtova</TH>
<TH WIDTH=115>Saimanje 10.976.256 bajtova</TH>
<TH WIDTH=115>Saimanje 108.338.210 bajtova</TH></TR>
<TR ALIGN=CENTER>
<TH ALIGN=LEFT>ARJ 2.41</TH><TD>00:37</TD>
<TD>01:48</TD><TD>28:35</TD></TR>
<TR ALIGN=CENTER>
<TH ALIGN=LEFT>LHA 2.13</TH><TD>00:44</TD>
<TD>02:08</TD><TD>30:14</TD></TR>
<TR ALIGN=CENTER>
<TH ALIGN=LEFT>PkZip 2.04g</TH><TD>00:27</TD>
<TD>01:04</TD><TD>17:43</TD></TR>
<TR ALIGN=CENTER>
<TH ALIGN=LEFT>RAR 1.54</TH><TD>00:32</TD>
<TD>01:02</TD><TD>22:35</TD></TR>
<TR ALIGN=CENTER>
<TH ALIGN=LEFT>UC II 3.0</TH><TD>01:14</TD>
<TD>01:25</TD><TD>37:10</TD></TR>
</TABLE><BR>
<I>Podaci su preuzeti iz MIPS-a br. 9</I>
Slika 6-10 prikazuje ovaj primjer nakon ucitavanja u Netscape.
S//ka 6-10: Lijepo oblikovana tablica
Katkada je korisno unutar tablice ubaciti polje koje ce biti siroko kao nekoliko stupaca, odnosno
visoko kao nekoliko redaka. Takva polja se obicno koriste kod naslova koji se odnose na dva stupca
ili retka, te na mjestima gdje se upisuje nekakva ukupna vrijednost ili zbroj. Ukoliko zelite neko
polje u tablici prosiriti na nekoliko stupaca, naredbi <TH> ili <TD> (vec prema tome koju ste
upotrijebili za to polje) dodijelit cete argument COLSPAN=n, gdje je n vrijednost koja oznacava
sirinu polja u stupcima. Slicno, zelite li polje rastegnuti na velicinu od nekoliko redaka, naredbi
kojom ste oznacili to polje dodijelite argument ROWSPAN=m. Broj m je, dakako, visina polja dana
u kolicini redaka. Ako unutar neke tablice, primjerice, namjeravate kreirati polje sirine tri stupca i
visine dva retka, obiljezit cete ga oznakom <TH COLSPAN=3 ROWSPAN=2>. Prilikom
upisivanja ostalih podataka u tablicu, obavezno morate izostaviti ona polja koja su vec zauzeta na
ovaj nacin prosirenim poljem jer ce u suprotnom doci do gubljenja podataka i krivog interpretiranja
tablice na ekranu. U nastavku je dan primjer koji ilustrira upotrebu ovih dvaju argumenata.
133
tablica3.htm
<TABLE BORDER=3 CELLSPACING=8 CELLPADDING=5>
<CAPTION><H2>Usporedni test programa za saimanje</H2></CAPTION>
<TR>
<TD WIDTH=100 ROWSPAN=2></TD>
<TH WIDTH=160 COLSPAN=2>
Saimanje 3.052.259 bajtova (200 datoteka)</TH>
<TH WIDTH=160 COLSPAN=2>
Saimanje 10.976.256 bajtova (1 datoteka)</TH>
<TH WIDTH=160 COLSPAN=2>
Saimanje 108.338.210 bajtova (500 datoteka)</TH></TR>
<TR ALIGN=CENTER>
<TD WIDTH=80>vrijeme saimanja</TD>
<TD WIDTH=80>dobivena veli~ina</TD>
<TD WIDTH=80>vrijeme saimanja</TD>
<TD WIDTH=80>dobivena veli~ina</TD>
<TD WIDTH=80>vrijeme saimanja</TD>
<TD WIDTH=80>dobivena veli~ina</TD></TR>
<TR ALIGN=CENTER>
<TH ALIGN=LEFT>ARJ 2.41</TH>
<TD>00:37</TD><TD>1.703.401</TD>
<TD>01:48</TD><TD>1.043.784</TD>
<TD>28:35</TD><TD>59.169.534</TD></TR>
<TR ALIGN=CENTER>
<TH ALIGN=LEFT>LHA 2.13</TH>
<TD>00:44</TD><TD>1.720.258</TD>
<TD>02:08</TD><TD>1.071.112</TD>
<TD>30:14</TD><TD>60.306.629</TD></TR>
<TR ALIGN=CENTER>
<TH ALIGN=LEFT>PkZip 2.04g</TH>
<TD>00:27</TD><TD>1.709.788</TD>
<TD>01:04</TD><TD>1.037.877</TD>
<TD>17:43</TD><TD>58.364.899</TD></TR>
<TR ALIGN=CENTER>
<TH ALIGN=LEFT>RAR 1.54</TH>
<TD>00:32</TD><TD>1.690.149</TD>
<TD>01:02</TD><TD>1.045.335</TD>
<TD>22:35</TD><TD>58.268.732</TD></TR>
<TR ALIGN=CENTER>
<TH ALIGN=LEFT>UC II 3.0</TH>
<TD>01:14</TD><TD>1.651.098</TD>
<TD>01:25</TD><TD>1.024.926</TD>
<TD>37:10</TD><TD>57.901.116</TD></TR>
</TABLE><BR>
<I>Podaci su preuzeti iz MIPS-a br. 9</I>
134
Na slici 6-11 nalazi se ovaj primjer ucitan u Netscape. Isti rezultati dobivaju se i ucitavanjem
primjera u Mosaic, te mnoge druge poznatije pretrazivacke programe za razne operativne sustave,
premda se radi o elementu jezika HTML koji nije jos sluzbeno prihvacen.
S//ka 6-11: Tablica s razlicitim velicinama polja
Vrlo zanimljivi vizualni elekti mogu se postici upotrebom tablica u kombinaciji s hipertekstualnim
vezama, slikama i slikovnim mapama, u sto se mozete uvjeriti ako pogledate primjere Web stranica
danih u sedmom poglavlju. Tablice su ujedno i posljednji element jezika HTML kojega trebate
usvojiti kako bi vase poznavanje tog jezika bilo potpuno. Sada posjedujete svo znanje koje vam je
potrebno za kreiranje HTML dokumenata svih razina slozenosti. Kako ce ti dokumenti biti
koncepcijski i vizualno osmisljeni, ovisi o vasoj masti i dizajnerskim sposobnostima. Neke upute,
medutim, mozete pronaci u nastavku knjige koji je oznacen kao treci dio, a bavi se pisanjem
HTML dokumenata dobrim stilom.
135
III. Dio: Dobar HTML
stil
136
7. poglavlje: Formiranje strukture dokumenta
137
Konstrukcija stranice
Sastavljanje Web stranica u jeziku HTML vam se nakon upoznavanja s pojedinim naredbama moze
uciniti toliko jednostavnim da niti ne stignete primijetiti neke uobicajene pogreske prije no sto
gotovu stranicu objavite na Mrezi. Vrlo cesto se dogada da neprolesionalno uradene stranice
obiluju pravopisnim pogreskama, tiplelerima, neispravno navedenim URL adresama kod
najvaznijih hipertekstualnih veza, nedovoljno obradenim slikama i drugim naizgled nevaznim
sitnicama koje itekao mogu utjecati na citanost dokumenta. Mnogi autori HTML dokumenata, na
zalost, pokazuju premalo obzira prema krajnjem korisniku. Ovo ce vam poglavlje pomoci da na
najbolji moguci nacin osmislite strukturu svojeg dokumenta, te da ga ucinite elektnim i elegantnim.
Mnogi savjeti na koje cete naici u ovom poglavlju korisni su i kod dizajna drugacijih vrsta
dokumenata, poput onih napravljenih u nekom tekstnom procesoru ili tablicnom kalkulatoru.
Prva odluka koju morate donijeti kada se odlucite na izradu Web stranice je nacin na koji cete u
njoj prikazati zeljene inlormacije. Kao sto znate, slozene Web stranice se sastoje od nekoliko
dokumenata, pa je dobro u svakoga uvrstiti one dijelove koji su tematski i lunkcionalno povezani.
Jedan dokument, primjerice, moze sadrzavati sidra za hipertekstualne veze drugih zanimljivih
stranica na World Wide Webu, dok se u drugome moze nalaziti soltver kojega citatelj moze
prebaciti na svoje racunalo. Vazno je da svaka tema bude sadrzana u posebnom HTML dokumentu,
jer se time olaksava nadogradnja i eventualno unosenje promjena u postojece stranice.
Kada sastavite sve dokumente od kojih ce se sastojati vase stranice, morat cete osmisliti nacin na
koji cete ih medusobno povezati hipertekstualnim vezama. Uvijek je dobra ideja skicirati strukturu
gotovih Web stranica, kao sto se vidi na slici 7-1. Takoder je vazno da se iz pocetne stranice moze
u jednom koraku doci do gotovo svih drugih dokumenata, kako biste redovite citatelje natjerali da
upravo pocetnu stranicu koriste kao polaznu tocku svojeg pretrazivanja. Time vam je omoguceno
da vazne novosti uvijek objavite na istom mjestu.
S//ka 7-1: Skicirajte strukturu svojih Web stranica jos prije njihove izrade
Razlicitim dokumentima od kojih se sastoji vasa Web stranica moze se izravno pristupiti preko
hipertekstualnih veza koje su drugi autori uvrstili u svoje dokumente na racunalima smjestenim po
cijelome svijetu. Imajte to na umu jer se radi o cinjenici koja znatno utjece na strukturu vaseg
dokumenta. Radi toga je dobro da osnovni dizajnerski element vasih stranica bude oznaka koja ce
citateljima posluziti da se vrate na pocetnu stranicu iz bilo kojeg dokumenta kojega u tom trenutku
proucavaju. To moze biti nekakva slicica, simbol ili jednostavno tekstualna oznaka - vazno je samo
da se radi o hipertekstualnoj vezi na pocetnu stranicu koja je jasna, te samim time i inlormativna.
Takoder je korisno da svaki dokument sadrzi i sidra za hipertekstualne veze kojima se citatelju
omogucuje ucitavanje prethodnog, odnosno sljedeceg dokumenta koji je kao takav predstavljen u
logicnom slijedu stranica. Na slici 7-2 vidi se dno jednog od mnogih dokumenata koji sacinjavaju
Web stranice casopisa PC Week. Svi dokumenti tih stranica pri dnu sadrze upravo takvu sliku.
138
Primijetite da se na njoj nalaze jos puno drugih oznaka kojima se citatelju u velikoj mjeri olaksava
pracenje sadrzaja.
S//ka 7-2: Upravljacke ikone za citanje Web stranica casopisa PC Week
Dizajniranje i izrada Web stranice, prema tome nije tako jednostavan posao. Budite spremni na
velik broj izmjena i na puno ekperimentiranja. Kako biste ipak taj posao ucinili sto jednostavnijim,
prije izrade stranica tocno odredite koji su vam ciljevi i sto zapravo zelite prezentirati. Dokument
koji citateljima nudi samo nekakvu odredenu inlormaciju moze biti vrlo lunkcionalan cak i ako se
sastoji samo od nekoliko hipertekstualnih veza koje ce korisnika uputiti na prava mjesta na Mrezi.
Web stranice velike tvrtke, s druge strane, moraju sadrzavati jasnu poruku iz koje ce citatelj saznati
sto ta tvrtka nudi i kakvim se poslovima bavi.
Mozda ce vam ovo zvucati previse jednostavno, no najvaznija stvar koju morate napraviti je odluka
o tome sto zelite napraviti. Najbolji nacin da dodete do ispravnog odgovora je da se upitate Nakon
sto citatelj zavrsi s proucavanjem moje Web stranice, sto ja zelim da on sazna o mojoj ponudi?
Svaki dokument kojega napravite mora biti podreden prvotnoj odluci. Vazno je da ostanete na
pravom putu i da ne izgubite vezu s ciljevima koje ste si u pocetku postavili.
Ako su vase Web stranice, na primjer, namijenjene prezentiranju shareware programa ciji ste autor,
vas ce cilj zasigurno biti prikupljanje sto vise registriranih korisnika. Da biste dosli do tog cilja,
naglasite razlike izmedu shareware i komercijalne inacice vaseg programa, obogatite stranice
slikama komercijalne inacice i omogucite citateljima da sa sto vise razlicitih mjesta mogu prebaciti
shareware inacicu na svoje racunalo i tamo je isprobati. Naravno, nemojte zaboraviti navesti svoju
adresu, nacin registriranja, cijenu, te bilo koji drugi podatak kojega smatrate vaznim za sto brze
postizanje svojeg cilja.
Prikupljanje citatelja
Nakon sto odaberete sve materijale koje namjeravate prezentirati, morat cete se odluciti za
dizajnerske elemente koji ce biti sastavni dio vasih stranica. Vasim dokumentima bit ce potreban
look, ali i tocno deliniran skup citatelja. Takoder je vrlo vazno imati na umu ogranicenja koja
mogu biti postavljena pred vase citatelje koja su nastala kao posljedica hardverske opreme i
pretrazivackog programa kojega koriste.
Buduci da ce korisnici skakutati na najrazlicitije nacine po vasim dokumentima, nije toliko
neophodno da svi dokumenti posjeduju ujednacen izgled, koliko bi bilo u slucaju da se radi o
papirnatom izdavastvu. Ipak, jako je pozeljno da izgradite gralicku strukturu vasih stranica koja ce
se ocitovati u svim sadrzanim dokumentima.
Ujednacena gralicka struktura ce vam olaksati eventualni posao prebacivanja Web stranica u
papirnati dokument jer nece biti potrebe da se brinete oko raznih vizualnih elemenata koji ga
sacinjavaju, poput, primjerice, dodavanja zaglavlja na svaki list. Slicno tome, vazno je da citatelji
139
znaju cije Web stranice proucavaju cak i onda kada pocetna stranica nije prva kojoj pristupaju. To
je ponajvise korisno kod komercijalnih stranica, a jedini pravi nacin da se ostvari je izgradnjom
prepoznatljivog gralickog kostura za svaki pojedini dokument. Dovoljno je samo staviti logotip
tvrtke na pocetak ili kraj svake stranice i citatelj ce u svakom trenutku znati tko stoji iza
prezentiranih inlormacija.
Nedostatak gralicke ujednacenosti ostavlja dojam neprolesionalnosti, a to si rijetko koja tvrtka
moze priustiti. Cak i ako na Webu prikazujete inlormacije koje medusobno uopce nisu povezane,
dobro je stvoriti barem neki mali vizualni identitet koji ce citatelju pomoci da ih lakse pretrazuje.
Bolje je uopce ne izradivati Web stranice, nego izradivati stranice koje izgledaju amaterski i time
kvare sliku o vasem osobnom karakteru i karakteru cijele kompanije.
Uvijek je dobro sto vise vremena posvetiti razmisljanju o tome kojem tipu publike su namijenjene
vase Web stranice. Ako svoju poruku ucinite prejednostavnom ili preslozenom, citatelja cete ili
uvrijediti, ili cete mu postati dosadni. Tocne pretpostavke su da su svi koji pristupaju vasim
dokumentima pismeni, ali i da se najvjerojatnije bave najrazlicitijim zanimanjima, pocev od
astronautike pa sve do aranziranja cvijeca, bez obzira na to koju vrstu podataka prezentirate na
Mrezi. Svi vasi citatelji su zasigurno znatizeljni, sto ukljucuje podjednako hakere desetogodisnjake
i znanstvenike od sedamdeset godina.
Morat cete se dosjetiti koji trik cete upotrijebiti kako biste se obratili upravo onoj publici kojoj ste i
namijenili sadrzaj svojih Web stranica. Mozda je najbolje da ovisno o krugu pozeljnih citatelja
odaberete jezicni stil kojim cete sastaviti tekstualni dio dokumenta. Uvrstavanje raznih anketa,
nagradnih pitanja, zabavnih igara i duhovitih slicica bez sumnje ce pridonijeti posjecenosti vasih
stranica. Ipak, morate biti umjereni s dodavanjem simpaticnih neozbiljnosti ukoliko se obracete
prolesionalnom citatelju kojega prvenstveno zanimaju podaci. Malo razonode, medutim, nikada
vam nece donijeti stetu, a i predstavit ce vas kao veselu osobu s kojom je ugodno suradivati.
Imajte na umu hardversku i soltversku opremu s kojom ce citatelji proucavati vase Web stranice -
postoji neizmjerno velik broj razlicitih hardverskih konliguracija i pretrazivackih programa na
kojima dokumenti mogu izgledati prilicno drugacije. Racunala i tekstualni terminali na kojima se
mogu pokretati samo pretrazivacki programi s tekstualnim gralickim suceljima nece moci prikazati
slike koje ste uvrstili u dokumente, sto ne znaci da vase stranice na njima ne moraju izgledati lijepo
i nelunkcionalno. Na Internetu postoji velik broj Web stranica s kojima je vrlo ugodno raditi na
tekstualnom terminalu, ali i jos veci broj onih koje izgledaju neukusno cak i u Netscapeu i
Mosaicu.
Dobro je da pri dnu pocetne stranice ukratko navedete koji ste pretrazivacki program koristili
prilikom testiranja vasih dokumenata kako bi korisnici znali kada vase stranice izgledaju najbolje.
Dovoljno je da napisete recenicu slicnu sljedecoj: `Ove Web stranice izgledaju najbolje kada su
ucitane u pretrazivacki program Netscape Navigator'. To moze biti i neka puno zabavnija
recenica, sto opet ovisi o tipu citateljstva kojemu se obracate. Kako bi sve bilo jos potpunije i
prolesionalnije, navedeni pretrazivacki program predstavite kao sidro hipertekstualne veze putem
koje ce citatelj moci prebaciti taj program na svoje racunalo ukoliko ga vec ne posjeduje.
Sto se tice hardverskih ogranicenja, nesmijete biti suvise popustljivi. Zasigurno postoje osobe koje
vezu s Internetom ostvaruju putem modemske veze na 2400 bpsa. Takoder, postoje i osobe koje
koriste gralicko sucelje preko CGA gralicke kartice i njezine smijesne razlucivosti. Takve
korisnike mozete bez problema ignorirati. Ucinite svoje Web stranice optimalne za prikazivanje na
140
onoj hardverskoj i soltverskoj opremi koja se u danom trenutku najvise koristi u svijetu. Kada biste
se prilagodavali najnizim postojecim standardima, ne biste, primjerice, u svoje Web stranice mogli
ukljuciti niti jednu datoteku vecu od stotinjak kilobajta koju zelite da citatelj prebaci na svoje
racunalo, jer bi vrijeme prenosenja bilo neizmjerno dugacko s modemom od 2400 bpsa.
Danasnji optimalni standardi su rad sa SVGA gralikom na razlucivosti od 800 x 600 piksela s 256
boja ili vecoj. Premda se u nasim krajevima i na notebook racunalima jos uvijek dosta koristi
razlucivost od 640 x 480 piksela sa 16 boja, slobodno mozete izradivati stranice namijenjene boljoj
razlucivosti jer danasnji pretrazivacki programi vrlo lijepo znaju prilagoditi tekst razlicitim
velicinama prikaza i u stanju su iznimno dobro provesti dither postupak kojim se na slikama
smanjuje broj boja. Najmanja brzina modema o kojoj biste trebali razmisljati je 14.400 bpsa. To
znaci da ce prenosenje Web stranice ukupne velicine stotinjak kilobajta potrajati otprilike jednu
minutu, sto je ujedno i gornja granica strpljivosti prosjecnog citatelja.
Razvijanje zeljenog izgleda
Svaki pojedini dokument vasih stranica mora sadrzavati odredene elemente, medu kojima su
najvaznije korisne inlormacije, hipertekstualne veze, naslov, ali i prepoznatljiv identitet. Zapamtite
da mnogi nece pristupiti vasim stranicama preko pocetne stranice i da morate paziti da vas citatelji
odmah prepoznaju bez obzira na dokument kojega koriste kao ulaznu tocku. Pored poruke koju
zelite prezentirati, najvaznije je da se citatelju predstavite. Nije vazno hocete li to napraviti
uvrstavanjem logotipa tvrtke na svaki dokument, vaseg imena ili jednostavno hipertekstualne veze
na pocetnu stranicu; vazno je da citatelj ne razmislja o tome cije su to zapravo stranice i kome da se
obrati ako zeli doci do nekih detaljnijih inlormacija.
Izgled vase prezentacije je presudan za puno stvari o kojima je do sada bilo rijeci. Prisjetite se
gralickog izgleda vasih papirnatih pisama, memoranduma, omotnica i drugih sitnica koje koristite
kada ne radite s Internetom. Vjerojatno svaku od njih povezuje neka jedinstvena oznaka poput boje,
vrste slova ili prepoznatljive recenice. Uvrstite sve te elemente i u svoje Web stranice. Vizualna
konstrukcija stranice, kolicina nepopunjenog prostora, organizacija sadrzaja i lakoca pristupa
odredenoj inlormaciji znatno ce utjecati na kvalitetu vasih dokumenata.
Razmislite o tome kako stranice uciniti ugodnima za upotrebu i gralicki atraktivnima uz
ogranicenja i mogucnosti koje vam pruza jezik HTML. Osjecate li se dobrodoslima kada se
odmaknete od ekrana i iz daljine se zagledate u pretrazivacki program? Ako nemate dovoljno
umjetnickog duha i dizajnerskog talenta ne smijete odmah odustati. Potrazite nekoga tko ce posao
zasigurno obaviti dobro. U svijetu postoje tvrtke koje nude uslugu dizajniranja i odrzavanja Web
stranica, sto znaci da i kod nas postoje osobe koje ce za odredeni honorar drage volje izraditi i vase
stranice.
Velicina slika ukljucenih u sadrzaj dokumenata takoder je vrijedna razmatranja. Kolicina teksta na
ekranu u svakom bi trenutku trebala biti proporcionalna s velicinom i smjestajem gralickih
elemenata. Nemojte natrpati stranice s previse teksta. Zlobnici takve stranice nazivaju sivim
stranicama buduci da tekst gotovo u cijelosti prekriva pozadinu. Citateljima su dosadne stranice
koje sadrze previse teksta, a i sam njihov izgled je prilicno neuravnotezen i monoton.
141
Premda ne mozete utjecati na razmak izmedu redova teksta i izmedu pojedinih slova i rijeci, uvijek
imajte potpunu kontrolu nad brojem rijeci sadrzanih u jednom odlomku. Svi pretrazivacki programi
ubacuju dodatni prazan prostor izmedu odlomaka, pa to iskoristite kao dizajnersko sredstvo.
Dubina sadrzaja jos je jedan vazan cimbenik kod izgradnje Web dokumenata. Ljepota izdavastva
na Webu najvise se ocituje u mogucnosti medusobnog povezivanja raznih elemenata
hipertekstualnim vezama. Neka vase stranice budu kratke, jasne i posvecene odredenoj temi.
Uvrstite u stranice hipertekstualne veze za druge dokumente koji pokrivaju slicnu temu, bilo da ste
ih sami kreirali ili da se nalaze negdje drugdje na Internetu. Time ce upotreba vasih stranica biti do
krajnosti pojednostavljena, a odrzavanje olaksano utoliko da cete eventualne promjene koje se ticu
neke teme morati unositi samo na jednom mjestu.
Lakocu upotrebe uvijek morate imati na umu. Ako su vase stranice medusobno povezane bez neke
logike i ako citatelj mora dugo tragati za odredenim podatkom koji se sigurno nalazi tu negdje,
najvjerojatnije ce ubrzo odustati od vasih dokumenata i potrazit ce neke druge i bolje kakve
zasigurno u tom slucaju postoje na Webu. Iako vecina pretrazivackih programa omogucuje
korisnicima da se odluce zele li ili ne ucitavati i slike koje su sadrzane u Web stranicama, mnogi
toga nisu niti svjesni. Ako vase stranice sadrze velike slike, vrijeme njihovog prenosenja kroz spore
komunikacijske veze moze potrajati toliko dugo da citatelj postane nestrpljiv i odustane od daljnjeg
proucavanja. Ako unutar stranica uvrstavate slike (a trebali biste), neka one budu malene. Ucinite
te male slike sidrima za hipertekstualne veze putem kojih ce citatelji moci ucitati istu sliku veceg
lormata. Navedite uz to i velicinu same slike u kilobajtima kako bi citatelj mogao procijeniti
vrijeme prenosenja. U nastavku je dan jednostavan primjer.
<A HREF="velika.gif"><IMG SRC="mala.gif" ALT="velika slika"></A>
Puna veli~ina slike: 69 K.
Redovito provjeravajte ispravnost hipertekstualnih veza na druge Web stranice s Interneta koje ste
uvrstili u svoje dokumente. Cesto se dogada da se neke stranice prebacuju na novu adresu, ili se
jednostavno brisu. Tesko je vjerovati da ce vas netko na cije ste stranice uvrstili hipertekstualnu
vezu obavijestiti o bilo kakvim promjenama, pa cete ih morati otkriti sami. Prilikom setnje po
Webu nailazak na mrtvu URL adresu zna biti vrlo iritantan, a zasigurno ne zelite da upravo vase
stranice naljute nekog citatelja. Stoga je jako vazno da cesto provjeravate ispravnost svih
hipertekstualnih veza, te da ih redovito obnavljate. Takoder, ukoliko premjestate svoje Web
stranice na novu adresu, obavijestite sve za koje znate da posjeduje vezu na njih o promjeni, kako
opet ne biste sudjelovali u iritiranju korisnika.
Dizajn pocetne stranice
Dobra ideja za dizajn pocetne stranice je izrada preglednog sadrzaja svih preostalih sadrzanih
dokumenata. Taj se sadrzaj moze otjeloviti kroz tablicu, slikovnu mapu ili najjednostavnije,
upotrebom pobrojane ili nepobrojane liste. Na slici 7-3 nalazi se pocetna stranica elektronickog
izdanja novine MIPS (http://pubwww.srce.hr/mips/) na kojoj je sadrzaj razvrstan u
142
tablicu. U svakom se polju nalazi simbolicka slicica, sidro hipertekstualne veze i datum zadnje
promjene doticnog dokumenta. Obratite paznju na to da stranica zapocinje logotipom novine iza
cega je u jednoj kratkoj recenici navedeno o kakvoj se novini radi. Pozadina je ispunjena uzorkom
sa stiliziranim logotipom, a pri dnu je navedeno da je stranice najbolje pregledavati pretrazivackim
programom Netscape. Gralicka ujednacenost ocituje se kroz osam slicica koje su sve uradene na
isti nacin, te kroz vodoravne crne linije koje ce se pojavljivati i u preostalim dokumentima.
S//ka 7-3: Pocetna stranica novina MIPS on-line
Za pocetnu je stranicu vazno da dobro izgleda na svim pretrazivackim programima - pocev od onih
s tekstualnim korisnickim suceljem, sve do onih s najvecim brojem prosirenja kakav je Netscape.
Korisnik na pocetnoj stranici kasnije moze procitati s kojim pretrazivackim programom stranice
izgledaju najbolje. Nije losa ideja izraditi nekoliko pocetnih stranica koje su sadrzajno podjednake,
ali optimizirane za razlicite skupine pretrazivackih programa. U tom se slucaju na svaku pocetnu
stranicu mogu ugraditi hipertekstualne veze koje ce citatelja usmjeriti na pravu stranicu ovisno o
tome koji pretrazivacki program koristi. Dovoljno je, medutim, upotrebom argumenta ALT kod
svih naredbi <IMG> navesti alternativni tekst za pojedine slike, pa da stranice izgledaju jednako
dobro u Lynxu i Netscapeu.
Ukupna velicina pocetne stranice moze biti nesto veca od preostalih stranica, buduci da korisnici
najcesce koriste nju kao polaznu tocku razgledavanja, a da vecina pretrazivackih programa
posjeduje meduspremnik u kojemu se pohranjuju cesce ucitavane slike s Interneta. To znaci da ce
samo prvi puta cijela pocetna stranica putovati do korisnika, buduci da ce vec sljedeci put vecina
slika biti ucitana s citateljeva tvrdog diska, a ne s diska onog racunala na kojem su pohranjene vase
stranice. U tom ce slucaju prikazivanje stranice potrajati puno krace jer ce se komunikacijskom
vezom prenositi samo tekstualni dio dokumenta. Preostale dokumente nacinite nesto kracima jer ih
citatelji posjecuju rjede, pa je manje vjerojatno da ce slike imati pohranjene u meduspremniku na
svojim diskovima.
Dizajn preostalih stranica
Mnogi elementi dizajna koje ste koristili kod pocetne stranice mogu se primijeniti i kod preostalih
dokumenata. Ono sto je posebno vazno za te dokumenate je da budu orijentirani samo ka jednoj
uzoj temi. Kada citatelj pozeli procitati neki dokument koji se nalazi u sadrzaju pocetne stranice,
ocekuje da ce tamo pronaci tocno one podatke na koje ste ga i uputili, a ne i nesto drugo. Ako
kreirate slozene Web stranice poput elektronickog izdanja neke knjige, bit ce dobro da jedan od
dokumenata dostupnih s pocetne stranice bude pregled sadrzaja sastavljen od pobrojanih i
nepobrojanih listi putem kojih ce citatelj moci u jednom potezu ucitati zeljeno poglavlje. Dobar
primjer Web stranice koja je napravljena radi pregleda sadrzaja nalazi se na slici 7-4, a mozete ju
pronaci na adresi http://newproducts.jpl.nasa.gov/magellan/guide.html.
143
S//ka 7-4: The Magellan Venus Explorer's Guide je dobar primjer hipertekstualnog pregleda
sadrzaja
Dokumenti koji nisu pocetna stranica moraju biti jednostavni. I ovdje vrijedi pravilo da stranice
koje sadrze previse teksta rijetko tko cita. Nastojte napraviti dokumente tako da sadrze barem 50
posto neispunjenog prostora. Prilikom sastavljanja dokumenta, odmaknite se od ekrana na
udaljenost s koje ne mozete procitati tekst i provjerite je li kolicina sivila (dijelova popunjenih
tekstom) dovoljno sazeta i ugodna vasem oku.
Cesto upotrebljavajte tekstualne stilove. Dobro je koristiti sto vise razina naslova, kosih i masnih
slova, uvlacenja odlomaka udesno, raznih tipova listi i drugih HTML elemenata namijenjenih
lormatiranju teksta. Sve te naredbe u jeziku HTML su na kraju krajeva i osmisljene samo zato da
vam se pruzi mogucnost lormatiranja teksta na najrazlicitije nacine. Ubacite u svaki dokument i
pokoju slicicu, ali nemojte pretjerivati s njihovom kolicinom ili velicinom kako biste stranicu
odrzali kratkom. Razne ikone i sitni simboli ucinit ce vas dokument ljepsim, a opet ne prevelikim
za prenosenje po Internetu. Nemojte zaboraviti da je dobro kada sve stranice posjeduju ujednacen
vizualni identitet, bilo da se on ocituje kroz zaglavlje dokumenta ili njegovo dno.
Dajte citateljima razlog da se ponovno vrate na vase Web stranice. Postoje mnoge stranice na
Mrezi koje ljudi posjecuju samo jednom i to zato sto se njihov sadrzaj nikada ne mijenja ili
nadograduje. Kreirajte dokument u kojemu cete jednom tjedno ili cesce stavljati novi popis
zanimljivih adresa na Internetu. Takoder mozete redovito objavljivati strip, nekakav tecaj, niz
savjeta, listu zanimljivih shareware programa ili nesto slicno. Takvi dokumenti neka obavezno
sadrze hipertekstualnu vezu za pocetnu stranicu, jer je vrlo vjerojatno da ce mnogi citatelji koristiti
upravo njih kao ulaznu tocku.
Ako vase Web stranice sadrze dokument na kojemu se nalazi obrazac za nekakvu narudzbu ili
anketu koju zelite da ispuni sto vise ljudi, uvrstite hipertekstualnu vezu na taj dokument u podnozju
svih drugih dokumenata. Jednako mozete postupiti i u slucaju kada vam stranice sadrze neki drugi
dokument za kojega je dobro da bude sto je moguce bolje posjecen, ali ga je neprikladno staviti kao
pocetnu stranicu. Svakako kreirajte dokument koji ce sadrzavati obrazac putem kojega ce korisnici
moci izraziti svoje misljenje o vasim Web stranicama i materijalu kojega prezentirate. Odgovori
koje cete primiti bit ce vam od velike pomoci prilikom nadogradnje Web stranica i njihovog
redovitog poboljsavanja.
Deset kratkih savjeta
U ovom poglavlju je na malenom broju stranica pokriven velik broj ideja cija primjena ce uciniti
vase stranice boljima. U sljedecem poglavlju se nalaze konkretni primjeri kroz koje cete se jos
jednom podsjetiti na nacin upotrebe mnogih HTML naredbi, ali i upravo opisanih savjeta. U
nastavku se nalazi popis od deset kratkih napomena koje uvijek morate imati na umu prilikom
izrade Web stranica, a koje ste osim kroz ovo poglavlje upoznali i u prva dva dijela knjige.
144
1. Odlucite sto tocno zelite napraviti. Ako ne znate sto zapravo prezentirate na Webu, necete
moci napraviti kvalitetne stranice. Najlakse cete se koncentrirati na izradu dokumenata ukoliko
imate zacrtane ciljeve i skiciranu strukturu cjelokupnih stranica.
2. Predstavite se svojim citateljima. Sada kad je na red doslo vasih pet minuta na velikoj svjetskoj
pozornici - Internetu, iskoristite ih na najbolji moguci nacin. Neka svaka stranica sadrzi bilo
kakav objekt koji ce ju ciniti prepoznatljivom i u vasem stilu.
3. Odredite svoju publiku. Upotrijebite rjecnik koji ce se najvise dopasti toj publici. Time ce
citatelji kojima su namijenjene prezentirane inlormacije pozeljeti procitati jos vasih
dokumenata, dok ce ostali ubrzo shvatiti da se ne radi o njima zanimljivom materijalu i
prepustit ce komunikacijsku vezu drugima.
4. Gralicki dizajn stranica mora biti jednostavan. Upotrijebite slicice kao sidra za hipertekstualne
veze koje ce citateljima omoguciti da ih pogledaju u vecem lormatu. Obavezno obogatite
stranice ikonama, simbolima i drugim elementima koje ce ih uciniti vedrijima.
5. Koristite razlicite stilove za lormatiranje teksta. Pored osnovnih naredbi za oblikovanje
odlomaka, ne zaboravite da postoje i naredbe za izradu tablica, listi, obrazaca i drugih
atraktivnih elemenata. Njihovom upotrebom necete utjecati na velicinu stranica u bajtovima,
ali cete znatno ozivjeti njihov izgled.
6. Svaki dokument od kojih se sastoje Web stranice mora sadrzavati naslov. Kao sto znate,
naslov se navodi u zaglavlju HTML dokumenta izmedu oznaka <TITLE> i </TITLE>, a
prikazat ce se u gornjem rubu prozora s pretrazivackim programom i u bookmark listi svakog
korisnika koji se odluci cesce posjecivati vase stranice.
7. Ne postoji ogranicenje na broj stranica koje mozete kreirati. Upravo zato morate sto bolje
organizirati logicku hijerarhiju dokumenata, a svakoga od njih uciniti sto kracim i
jednostavnijim. Ako pomislite da citatelj zeli procitati vise o nekoj odredenoj temi, kreirajte
novu stranicu ili ga hipertekstualnom vezom usmjerite na neke druge postojece stranice na
Mrezi.
8. Kod kuce je najljepse. Nastojte u svaki pojedini dokument uvrstiti hipertekstualnu vezu na
pocetnu stranicu kako biste citatelju omogucili da u sto manjem broju koraka dode do razlicitih
inlormacija. Takoder je korisno svugdje kreirati vezu na prethodni i sljedeci dokument u
logickom nizu stranica kojega ste skicirali prije njihove izrade.
9. Budite originalni i ocuvajte ujednacenost gralickog izgleda na svim stranicama. Kreirajte
elemente koji ce biti prisutni u svakom dokumentu, ali koji nece biti dosadni, vec duhoviti i u
svakom trenutku zanimljivi. Pokusajte izmisliti nesto novo sto jos niste susreli na drugim Web
stranicama. To moze biti nacin za upravljanje stranicama, ali i slikovni uzorak s kojim cete
popuniti pozadinu.
10. Zatrazite od citatelja reakciju na vase stranice. Kreirajte obrazac putem kojega ce korisnici
moci kritizirati i hvaliti vasu prezentaciju. Ukoliko primite velik broj negativnih misljenja,
pokusajte zaposliti nekog tko se bolje snalazi u dizajnerskim vodama, a u suprotnom nastavite
s dobrim radom. Stranice redovito odrzavajte, nadogradujte i testirajte kako ne bi sadrzavale
iritantne pogreske, a kako bi uvijek bile zanimljive podjednako onima koji ih cesto posjecuju i
onima koji ce to tek uciniti.
145
8. poglavlje: Stilisticke mogucnosti HTML-a
kroz primjere
146
Primjer osobnih stranica
Osobne World Wide Web stranice su danas vrlo popularne, pa ih tako samo u Hrvatskoj ima vise
od stotinu. Ono sto osobne stranice cini posebno zanimljivima je cinjenica da se putem njih mogu
detaljnije upoznati osobe koje ste na Internetu susretali kroz neke druge servise poput Usenet
sustava konlerencija ili elektronicke poste. O nekome tko vam je donedavno bio poznat samo po
imenu i prezimenu na kojega ste nailazili u nekoj konlerenciji ili na IRC-u moci cete kroz Web
stranicu saznati puno vise osobnih detalja. Najcesce se radi o datumu rodenja, kratkom zivotopisu,
popisu hobija te slici doticne osobe. Mnogi korisnici Weba posjecuju osobne stranice upravo zato
da na slici pogledaju kako izgleda netko tko je poslao zanimljiv komentar na Usenet ili netko s
kime su maloprije vodili zanimljiv razgovor u jednom od mnogobrojnih IRC kanala.
Iako kratke autobiogralije predstavljaju najcesci sadrzaj osobnih stranica, na njima cete nerijetko
nailaziti i na tehnicku podrsku za shareware program i programe u javnom vlasnistvu ciji su autori
upravo one osobe koje su i kreirale stranicu. U Hrvatskoj postoji nekoliko Web stranica putem
kojih se moze sazanti dosta detalja o kvalitetnim shareware proizvodima koji poticu iz Hrvatske, a
svaka od tih stranica omogucava i prebacivanje probne inacice programa na racunalo citatelja
putem hipertekstualne veze. Mnoge svjetske udruge shareware programera savjetuju svojim
clanovima koji posjeduju pristup Internetu da kreiraju osobne stranice putem kojih ce pruzati
tehnicku podrsku za svoje autorsko ostvarenje.
Cesto cete nailaziti i na osobne stranice koje nude neki specijalizirani sadrzaj, cesto vrlo
zanimljivog karaktera. Tu se redovito radi o prezentiranju vlastitog hobija, izdavanju zanimljivih
elektronickih novina, davanju podrske nekom nogometnom ili kosarkaskom klubu, te mnogim
drugim pothvatima slicnog tipa Stranice koje nude takve inlormacije najcesce se redovito mijenjaju
pa su stoga i cesce posjecivane od osobnih stranica s autobiogralskim sadrzajem. Ukoliko se
odlucite za kreiranje osobnih stranica, ucinite ih dovoljno zanimljivima da se citatelji odluce na
njihovo redovito posjecivanje, ali obavezno u njih ukljucite i jedan dokument koji ce sadrzavati
vasu sliku i ponesto osobnih podataka.
Svoju privatnu Web stranicu mozete objaviti u popisu kojega odrzava Damir Orlic. Taj popis
mozete pogledati na adresi http://regoc.srce.hr/~orlic/preson/, a u njemu su
sadrzana i kratka uputstva o prijavljivanju novih osobnoh stranica. Za podrobnije detalje mozete se
obratiti na e-mail adresu orlic@regoc.srce.hr. Kako izgleda Damirova stranica s popisom
privatnih WWW adresa, pogledajte na slici 8-1.
S//ka 8-1: Popis svih osobnih stranica u Hrvatskoj.
Kao primjer osobnih stranica, za ovu smo knjigu kreirali dokument putem kojega se pruza tehnicka
podrska shareware programu SmartDraw, namijenjenom izradi dijagrama toka u Windows
okruzju. Taj program doista postoji (i vrlo je kvalitetan), no njegov autor nije iz Hrvatske, pa smo
ga posudili samo radi izrade ovog primjera. Pretpostavimo dakle, da namjeravate izraditi osobnu
147
Web stranicu putem koje cete plasirati svoj program SmartDraw, s namjerom da ta stranica bude
korisna i vasim postojecim korisnicima koji zasigurno imaju nekakva pitanja tehnicke prirode.
Najprije bi trebalo, kao sto je navedeno u prethodnom poglavlju, tocno zacrtati ciljeve koje zelite
postici, te skicirati strukturu cjelokupnih stranica. Cilj je vise-manje jasan: namamiti sto vise
citatelja da isprobaju vas program i dati im do znanja da se uvijek mogu vratiti na vase stranice
ukoliko imaju nekakva pitanja. Bilo bi dobro da citatelje dio pocetne stranice podsjeca na to da
moraju registrirati svoju kopiju programa jer upravo to ono sto zaista zelite postici. Jedan od
dokumanata neka bude i vasa kratka biogralija, buduci da ce mnogi domaci Internauti koje cete
susretati kroz razne obike komuniciranja htjeti vidjeti vasu sliku i upoznati neke vase osobine.
Pocetna stranica neka stoga sadrzava kratak opis programa, mogucnost prebacivanja probne
inacice programa na racunalo citatelja, podatke o nacinu placanja registracije, te vasu osobnu i
elektronicku adresu. Ostali dokumenti od kojih se sastoje vase stranice mogu redom sadrzavati
odgovore na najcesce postavljana pitanja o vasem programu, nekoliko slika s prozorom programa,
vasu kratku biograliju i po mogucnosti neku dodatnu zanimljivost. U nasem se primjeru ta
zanimljivost ocituje kroz sidro hipertekstualne veze putem koje se moze pristupiti popisu preostalih
shareware programa koji potjecu iz Hrvatske.
Sada je potrebno kreirati gralicki dizajn svakog pojedinog dokumenta. Pozeljno je da on bude
ujednacen za svaku stranicu, prepoznatljiv i jednostavan. Svaka dokument neka sadrzi
hipertekstualnu vezu za povratak na pocetnu stranicu, a pocetna stranica hipertekstualnu vezu na
svaki drugi dokument. Sto se velicine stranica tice, pokusajte ih uciniti sto kracima, ali pritom
pazite da ne povrijedite njhovu lunkcionalnost. Najbolje bi bilo da pocetna stranica ne sadrzava
previse gralickih elemenata kako bi sto prije stigla do citatelja. Gralicka obogacenost pocetne
stranice korisna je samo kod Web dokumenata vecih organizacija poput poznatih tvrtki ili
elektronickih izdanja poznatih casopisa, buduci da takve stranice nude puno vecu kolicinu
inlormacija koja nece djelovati kaoticno samo ako je prezentirana kroz slike i crteze. Preostali
dokumenti osobnih stranica mogu sadrzavati vise slika jer citatelj sada tocno zna sto ga ocekuje
nakon klika na neku hipertekstualnu vezu.
Gralicki dizajn naseg primjera ocituje se kroz bijelu pozadinu na kojoj su uocljiva mjesta oznacena
crvenom bojom (pogledajte primjer s disketa kako biste zapazili nacin bojanja stranice). Tu su jos i
vodoravne crne linije te ujednacena razina koristenih naslova. Iako je u knjizi izraden primjer samo
za pocetnu stranicu (preostale doista nije tesko kreirati sada kada je osmisljena struktura i vizualni
identitet), hipertekstualne veze za ostale dokumente su prisutne kako biste uocili nacin na koji su
implementirane. Kao sto se mozete uvjeriti ako pogledate sliku 8-2, niti jedna veza nije ostvarena
kroz recenicu oblika Kliknite ovdje ako zelite..., vec su sve doslovno ugradene u okolni tekst. Na
stranicu s osobnim podacima dolazi se klikom na ime i prezime autora koje je smjesteno pri dnu
stranice. U nastavku je dan izvorni HTML kd primjera s pocetnim dokumentom nasih osobnih
stranica, a kako on izgleda nakon ucitavanja u Netscape, pogledajte na slici 8-2.
osobna.htm
<HTML>
<HEAD>
<TITLE>SmartDraw - shareware za izradu dijagrama toka</TITLE>
</HEAD>
148
<BODY BGCOLOR="#FFFFFF" LINK="#FF0000"
VLINK="#C40000"ALINK="#8080FF">
<CENTER>
<img src="sdraw.gif">
</CENTER>
<P><HR SIZE=4 NOSHADE><P>
<H2>SmartDraw - [to je to?</H2>
SmartDraw je program namijenjen izradi dijagrama toka.Pored
raznoraznih vi{e-manje poznatih geometrijskih likova, svoje
dijagrame }ete ovim programom mo}i obogatiti i raznim tipovima
strelica, tablica i linija, te mnogobrojnim sli~icama iz priloene
clipart kolekcije. Tu je jo{ i opcija <I>Tip of the day</I>,
mogu}nost potpune reorganizacije grafi~kog su~elja, te razgranat
sustav pomo}i. Svim elementima nacrtanog dijagrama moe se
promijeniti boja, tip okvira i, naravno, tekst ako se radi o nekom
geometrijskom liku koji predstavlja ~vor dijagrama. U tekstu
moete koristiti razli~ite veli~ine fontova, stilove za
ozna~avanje pojedinih dijelova teksta (italic, bold,
superscript...), a mogu}e je promijeniit i sami font, te njegovu
boju. Cijela slika se moe zumirati na velik broj predefiniranih
veli~ina, a podrana je i undo opcija. Na nacrtani dijagram moete
primjeniti jedan od dvadesetak sadranih stilskih <I>wizarda</I>
koji }e se pobrinuti oko toga da krajnji rezultat bude {to
pregledniji i upe~atljiviji. Na taj je na~in mogu}e kreirati
dijagram s efektom trodimenzionalnosti ili, primjerice,
monokromatski dijagram koji je idealan za ispis na laserskim
pisa~ima.<P>
Ako ve} jeste korisnik programa <B>SmartDraw</B>, a nai{li ste na
neki problem prilikom njegovog kori{tenja, pogledajte stranicu s
odgovorima na <A HREF="faq.html">~esto postavljana pitanja</A>.
<P><HR SIZE=4 NOSHADE><P>
<H2>Download</H2>
<A HREF="shareware/index.html">
<IMG SRC="smallcsh.gif" ALIGN=left HSPACE=12></A>
Predlaem Vam da sami isprobate
<A HREF="ftp:smartdrw.zip">smartdrw.zip</A> (400 KB).
Tako|er moete isprobati i druge
<A HREF="http://student.math.hr/~drpetric/shareware/">
shareware programe iz Hrvatske</A>.<BR>
Ako va{a trenutna veza s Internetom nije prespora, pogledajte i
<A HREF="slike.html">nekoliko slika</A> kreiranih programom
SmartDraw.
<BR CLEAR=LEFT>
<P><HR SIZE=4 NOSHADE><P>
<H2>Regisriranje</H2>
Ukoliko elite registrirati svoju kopiju programa SmartDraw,
po{aljite:
<UL>
<LI> 100 Kn ako ivite u Hrvatskoj
149
<LI> 30 DEM ako ivite negdje drugdje u Europi
<LI> $30 ako ivite negdje drugdje u svijetu
</UL>
Najbolje bi bilo da {aljete gotov novac, zbog mogu}ih
komplikacija pri radu s ~ekovima i kreditnim karticama. Dobro bi
bilo da se prije uplate detaljnije dogovorimo putem e-maila, pa
predlaem da se javite na moju elektroni~ku adresu s dna
stranice.<P>
Ako ste u urbi, po{aljite svoju e-mail adresu i dobit }ete
elektroni~kom po{tom "uuenkodiranu" ina~icu SmartDrawa ~im primim
nov~anu uplatu. U nastavku stranice nalazi se moja adresa.
<P><HR SIZE=4 NOSHADE><P>
<H2>Kontakt s autorom</H2>
Sva pitanja, pohvale i kritike su dobrodo{li. Elektroni~ku poruku
moete mi poslati na adresu:
<P>
<A HREF="mailto:autor@public.srce.hr">
<IMG SRC="mail.gif"></A><BR>
<A HREF="mailto:autor@public.srce.hr">
<I>autor@public.srce.hr</I></A>
<P>
Moja ku}na adresa je:
<P>
<A HREF="ja.html">Hrvoje Horvat</A><BR>
Pantov~ak 111<BR>
10000 Zagreb, Hrvatska
<P>
Zahvaljujem Vam na kori{tenju programa <B>SmartDraw</B>.
Nadam se da ga smatrate korisnim i da uivate u njegovoj
upotrebi.
<P><HR SIZE=4 NOSHADE>
</BODY>
</HTML>
U ovom su primjeru koristena tek rijetka Netscapeova prosirenja jezika HTML, sto je dobro s
obzirom da se radi o osobnim stranicama. Osobne je stranice, naime, tesko testirati s nekoliko
pretrazivackih programa i na nekoliko razlicitih racunalnih platlormi buduci da ih izraduje samo
jedna osoba. Ukoliko se ipak odlucite na upotrebu veceg broja Netscapeovih prosirenja, morat cete
nabaviti vise razlicitih pretrazivackih programa, te stranice dotjrati do one mjere kada ce izgledati
prihvatljivo u svakome od njih. Takoder bi bilo korisno isprobati i u Lynxu, te na vise razlicitih
operativnih sustava kakvi su Windowsi, OS/2, Macintosh System, X-Windows i drugi jer su
moguce razlicite komplikacije s interpretacijom pojedinih boja. Velike si tvrtke mogu dozvoliti
upotrebu raznih prosirenja jezika HTML jer postoji specijalizirano osoblje koje ce Web stranice
testirati u najrazlicitijem mogucem rasponu uvjeta.
150
S//ka 8-2: Primjer osobne stranice u funkciji prezentacije shareware programa.
Primjer Web stranica tvrtke
Mnoge poznate svjetske kompanije vec su odavno prisutne na Webu. Slicno je i s Hrvatskom gdje
se komercijalizacija Itnerneta provodi tek sada. Unatoc neprolitabilnom ustrojstvu CARNeta,
hrvatskog ogranka Itnerneta, tvrtkama koje su to trazile dozovoljeno da izraduju svoje Web stranice
uz uvjet da od njih ne dobivaju nikakvu materijalnu korist. Zahvaljujuci tome danas su na Webu
prisutne mnoge domace tvrtke, ali i velik broj raznih obrazovnih ustanova, znanstvenih instituta,
neprolitabilnih organizacija i drugih. Spomenimo, na primjer, tvrtke Computech, Globtour,
HrOpen, HRT, 4MATE, Skolska knjiga, te Zagrebacku burzu, casopis BUG, Ured Predsjednika i
novine o racunalima MIPS.
Neke se od spomenutih tvrtki i organizacija, medutim, nisu pretjerano trudili oko svojih Web
stranica, vec su ih kreirali tek tako da budu prisutni na Webu. Neplanirano prezentiranje velikih
kompanija na Webu, ali i prezentiranje bilo kakvog drugog materijala, zasigurno nece pridonjeti
dobrom ugledu tvrtke niti ce joj imalo koristiti kao reklama. Cak stovise, povrsno sastavljene Web
stranice ostavit ce na citatelja negativan dojam pa ih zasigurno nece vise niti jednom posjetiti. Kod
nas postoji velik broj pojedinaca cije su osobne stranice koje ne obiluju zanimljivim podacima,
puno rade posjecivane od zapustenih stranica nekih poznatih tvrtki i organizacija. Publika na
Internetu je neizmjerno velika i njezinu volju za proucavanjem i zelju za upijanjem bilo kakvih
korisnih inlormacija svi autori Web stranica trebali bi u potpunosti iskoristiti.
Kao podlogu za primjer Web stranica tvrtke odabrali smo, dakako, Znak. Sarolika ponuda knjiga
ove izdavacke kuce moze se na najrazlicitije nacine ponuditi citateljstvu World Wide Weba. Ne
radi se ovdje samo o mediju koji ima iznimno velik broj potencijalnih korisnika takve Web
stranice, vec su tu i mnogobrojne mogucnosti prezntiranja kakve ne nude cak niti televizija,
casopisi ili radio postaje. Hipertekst i interaktivno upravljanje ponudenim inlormacijama velika su
prednost Weba nad bilo kojim drugim nacinom ostvaraivanja kontakata izmedu tvrtke i njezinog
korisnika, pa se svaka investicija u izradu Web stranice uvijek isplati. Uzme li se u obzir i cinjenica
da citatelji mogu posjetiti Web stranicu kada oni to zele, a ne kada im se to namece, kao sto je
slucaj s drugim medijima, te mogucnost izrade razlicitih nagradnih igara kroz obrasce i razlicitih
multimedijalnih prikaza, lako se dolazi do zakljucka da su dobro izradene stranice jamstvo za
podjednako dobar uspjeh tvrtke na trzistu.
Pogledajmo primjer Znaka. Cilj Web stranice je prikazati citateljima svaku pojedinu knjigu i dati
mu razloge da se prosece do knjizare i da je kupi. Broj knjiga koje su izasle u izdanju Znaka
prevelik je da se na pocetnu stranicu smjesti hipertekstualna veza za svaku od njih, pa se one mogu
grupirati po serijalnim izdanjima ili tematskom podrucju. U nadolazecem primjeru nalazi se
pocetna stranica putem koje se citatelj moze odluciti za jednu od tri serije knjiga ili za opise knjiga
o operativnom sustavu Windows 95. Ogranicili smo se, naravno, samo na jedan manji dio knjiga iz
cijele ponude jer bi u suprotnom primjer Znakovih Web stranica bio prevelik za ovo poglavlje.
151
Osim slikovne mape putem koje se odabiru grupacije knjiga, na pocetnoj se stranici nalazi logotip
tvrtke, te njezina adresa i telelon. Ispod mape su smjestena sidra hipertekstualnih veza koje su
inace ostvarive kroz tu mapu kako biste stranice mogli isprobati na vlastitom racunalu. (Prisjetite se
da slikovne mape mozete koristiti samo na racunalu na kojem je instaliran Web posluzitelj.) Pri
dnu pocetne stranice nalazi se upozorenje o koristenom standardu za hrvatska slova, prporuka za
koristenje Netscapea kao pretrazivackog programa i e-mail adresa tvrtke. Mozda ce vam se ovaj
dokument uciniti prekratkim za pocetnu stranicu, ali imajte na umu da bi on u stvarnosti bilo puno
veci, buduci da bi obuhvacao sve knjizevne serijale i svaku pokrivenu granu racunarstva. Nista
drugo nije potrebno smjestiti na pocetnu stranicu osim, po mogucnosti, hipertekstualne veze za
stranicu u kojoj je dana kratka povijest tvrtke. Mi cemo se u nasem primjeru usmjeriti ka zeljenom
cilju, a to je prezentacija knjiga.
Sada kada smo odlucili kako ce biti strukturirane stranice, prostaje nam osmisljavanje gralickog
dizajna. Na slici 8-3 mozete uociti da je pozadina stranice ispunjena slikovnim uzorkom na kojem
se nalazi stilizirani logotip tvrtke, te da su logicki djelovi stranice odvojeni valovitim vodoravnim
linijama. Takav dizajn bit ce koristen i kod vecine preostalih dokumenata koji sacinjavaju nase
umanjene Znakove Web stranice. Ukoliko iste stranice isprobate na svojem racunalu, primjetit
cete da su gotovo u potpunosti izradene u crno-bijeloj tehnici. To je bi u svakom slucaju bio los
izbor kada bi se stranice doista objavile na Webu, no kada bismo ovdje koristili slike u bojama,
primjer ne bi niti izbliza mogao stati na dvije prilozene diskete.
Dva spomenuta gralicka emementa (logotip u pozadini i valovite linije) sasvim su dovoljna da
ucinie ove stranice prepoznatljivima i ujednacenima. Citatelji ce u svakom trenutku znati cije
stranice posjecuju, a njihovo prenosenje kroz komunikacijske veze bit ce krace zbog pohranjivanja
u meduspremnik na disku onih slika koje se pojavljuju cesce (ponovno se radi o logotipu i valovitoj
liniji). HTML kd pocetne Znakove stranice dan je nastavku teksta.
znakhome.htm
<HTML>
<HEAD>
<TITLE>ZNAK - Kvaliteta, bez kompromisa!</TITLE>
</HEAD>
<BODY BACKGROUND="backlogo.gif">
<IMG SRC="znaklogo.gif" ALT="ZNAK - Kvaliteta bez kompromisa!"
ALIGN=left HSPACE=28>
<TABLE BORDER=4 CELLSPACING=3 CELLPADDING=3 WIDTH=350>
<TR ALIGN=CENTER>
<TH>Kneza Mislava 11, 10000 Zagreb<BR>
Hrvatska - Croatia, p.p. 951</TH></TR>
<TR ALIGN=CENTER>
<TD><EM>telefon</EM>: +385 1 415 622<BR>
<I>telefax:</I> +385 1 410 859</TD></TR>
<TR ALIGN=CENTER>
<TD><I>@iro ra~un:</I> 30105-603-18668<BR>
<I>Devizni ra~un:</I> ZABA HR XX 2500-3802230</TD></TR>
</TABLE>
<BR CLEAR=left>
152
<CENTER>
<IMG SRC="waveline.gif"><P>
<A HREF="http:///cgi-bin/imagemap/izbor.map">
<IMG SRC="mapica.gif" ISMAP BORDER=0></A>
<IMG SRC="waveline.gif"><P>
<B>
<A HREF="10min/10min.html">10 minuta do uspjeha</A><BR>
<A HREF="win95/win95.html">Knjige o Windowsima 95</A><BR>
<A HREF="internet/internet.html">Serija INTERNET</A><BR>
<A HREF="dummies/dummies.html">
Serija <I>...ZA NEZNALICE</I></A><BR>
<A HREF="form/form.html">Narudbenica</A>
</B>
<P><IMG SRC="waveline.gif"><P>
Znakove Web stranice izgledaju najbolje kada su u~itane u
<A HREF="http://www.mcom.com/info/index.html/">
Netcape Navigator</A><BR>
Za posebne hrvatske znakove kori{ten je standard MS Win CE
(EE kodna stranica 1250)
<P><A HREF="mailto:znak@public.srce.hr">
<IMG SRC="mail.gif" BORDER=0></A><P>
<B><I>E-mail: <A HREF="mailto:znak@public.srce.hr">
znak@public.srce.hr</A></I></B><BR>
<FONT SIZE=-1>
Zadnji put promijenjeno: <I>23.10.1995.</I>
</FONT>
<P><IMG SRC="waveline.gif"><P>
</CENTER>
</BODY>
</HTML>
Kako ovaj HTML dokument izgleda nakon ucitavanja u Netscape, pogledajte na slici 8-3.
S//ka 8-3: Znakova pocetna stranica.
Pogledajmo sada stranicu sa serijom knjiga 10 minuta do uspjeha. Na njoj se nalazi slika na kojoj
su pojedine knjige iz serije slozene jedna na drugu, tako da se vidi naslov samo najgornje knjige.
Kada bi za svaku pojedinu knjigu iz serija bila prilozena slika, cijela stranica bi zauzimala puno
veci prostor na disku Web posluzitelja (cak visestruko veci), pogotovo ako bi se koristile slike u
boji. Nije potrebno niti spominjati koliko se ovim trikom stedi vremena potrebnog za prenosenje
cjelokupnog sadrzaja stranice do citateljeva racunala. Pokraj slike se nalazi kratak opis ovog
serijala u kojemu se korisniku skrece paznja na prednosti ovih kratkih vodica. Slijedi popis svih
naslova iz serijala zajedno s imenima autora te brojem stranica. Popis je u nasem primjeru smjesten
u tablicu cime se dobiva na kompaktnisti dokumenta. Cijela stranica bila bi, naime, predugacka
153
kada bi se za popis koristile pobrojane ili nepobrojane liste, a i djelovala bi prilicno isprazno i
neugledno.
Tablici su izbrisani okviri kako bi se postigao dojam trostupcanog poravnavanja teksta, a naslovi su
otisnuti masnim slovima kako bi se isticali u ostatku dokumenta. Kada bi ova stranica doista bila
prisutna na Webu, svaki naslov bi trebao predstavljati sidro hipertekstualne veze za dokument u
kojemu se nalaze detaljniji opisi pojedine knjige, zajedno s njihovim slikama naslovnica. Za svaku
bi se knjigu morao napraviti poseban dokument, s time da bi svi morali izgledati podjednako. U
ovoj knjizi to nije napravljeno iz spominjanih razloga, no na Webu su takve stvari neizbjezne.
Primijetite da i ovaj dokument sadrzi iste dizajnerske elemente kao i pocetna stranica, ali i to da je
sada na dnu dokumenta smjestena hipertekstualna veza putem koje se citatelj moze vratiti na
pocetak. Kako bi u stvarnosti stranice bile puno vece, osim ove hipertekstualne veze bilo bi dobro
postaviti i veze na nekolicinu drugih dokumenata koji su tematski bliski s trenutnom stranicom.
Vise detalja o tome mozete pronaci u prethodnom poglavlju. Slijedeci primjer sadrzava HTML kd
dokumenta koji opisuje seriju 10 minuta do uspjeha.
10min.htm
<HTML>
<HEAD>
<TITLE>10 minuta do uspjeha</TITLE>
</HEAD>
<BODY BACKGROUND="../backlogo.gif">
<CENTER>
<IMG SRC="naslov.gif" ALT="10 minuta do uspjeha">
</CENTER>
<BR>
<IMG SRC="../waveline.gif">
<BR>
<IMG SRC="10min.gif" ALIGN=left HSPACE=18><BR>
Ovi jednostavno napisani i pregledni priru~nici podijeljeni su
u niz lakih vjebi od kojih svaku moete svladati za 10 minuta
- ili manje! Otud, dakako, dolazi i ime seriji. Svaka vjeba,
ovisno o pojedinom programu, prikazuje neku od osnovnih operacija.
Na primjer: stvaranje dokumenta, ispis, rad s pismima, uvoz i
izvoz datoteka i sl. Knjige }e vam stoga posluiti i kao odli~an
podsjetnik na korake koje morate slijediti da biste neki posao
najlak{e obavili. Knjige su bogato ilustrirane, a postupci koje
morate slijediti, trikovi koji }e vam olak{ati rad te upozorenja
na zamke kojih se morate ~uvati jasno su nazna~eni
karakteristi~nim sli~icama. Knjige su otisnute u dvobojnom tisku,
olak{avaju}i time ~itatelju traenje pojedinosti koja ga zanima -
kombinacije tipaka koju mora primijeniti da bre i lak{e obavi
pojedinu radnju, na primjer.
<BR CLEAR=LEFT>
<IMG SRC="../waveline.gif">
<CENTER>
154
<TABLE CELLPADDING=16>
<TR VALIGN=TOP>
<TD><B>Vodi~ kroz Windows 95</B><BR>
<I>Trudi Reisner</I>, 176 stranica</TD>
<TD><B>Vodi~ kroz MS-DOS 6.2</B><BR>
<I>Jennifer Fulton</I>, 176 stranica</TD>
<TD><B>Vodi~ kroz Internet</B><BR>
<I>Peter Kent</I>, 176 stranica</TD></TR>
<TR VALIGN=TOP>
<TD><B>Vodi~ kroz Excel 5.0</B><BR>
<I>Joe Kraynak</I>, 176 stranica</TD>
<TD><B>Vodi~ kroz PowerPoint 4.0</B><BR>
<I>Joe Kraynak</I>, 176 stranica</TD>
<TD><B>Vodi~ kroz osobna ra~unala</B><BR>
<I>Joe Kraynak</I>, 173 stranica</TD></TR>
<TR VALIGN=TOP>
<TD><B>Vodi~ kroz kupovanje ra~unala</B><BR>
<I>Shelly OHara</I>, 176 stranica</TD>
<TD><B>Vodi~ kroz Word 6.0</B><BR>
<I>Peter Aitken</I>, 160 stranica</TD>
<TD><B>Vodi~ kroz Acces 2.0</B><BR>
<I>Carl Townsend</I>, 160 stranica</TD></TR>
<TR VALIGN=TOP>
<TD><B>Vodi~ kroz WinFax PRO 4.0</B><BR>
<I>Joe Kraynak</I>, 176 stranica</TD>
<TD><B>Vodi~ kroz Lotus Organizer 2.0</B><BR>
<I>Jennifer Fulton</I>, 150 stranica</TD>
<TD><B>Vodi~ kroz Lotus 1-2-3 5.0</B><BR>
<I>Peter Aitken</I>, 176 stranica</TD></TR>
</TABLE>
<IMG SRC="../waveline.gif">
<A HREF="../znakhome.html"><IMG SRC="../back.gif" BORDER=0><BR>
Povratak na po~etnu stranicu</A>
<BR><IMG SRC="../waveline.gif">
</CENTER>
</BODY>
</HTML>
Na slici 8-4 nalazi se ovaj primjer nakon ucitavanja u Netscape. Stranica bi izgledala jednako i u
Mosaicu, samo sto bi tekst koji opisjue seriju knjiga bio smjesten ispod slicice s knjigama, a ne
desno od nje.
S//ka 8-4: Stranica sa serijom `10 minuta do uspjeha'.
155
Sljedeci primjer sadrzava Web stranicu koja opisuje knjige vezane uz operativni sustav Windows
95. Radi se o cetiri knjige koje ne pripadaju niti jednoj specijaliziranoj seriji naslova, pa se za nit
koja ih povezuje uzima upravo zajednicka tematika koju obraduju. Gralicki trik kojim smo se
posluzili u prethodnom primjeru iskoristen je i ovdje, pa se tako umjesto cetiri slike svake pojedine
naslovnice na ovj stranici nalazi samo jedna slika gdje su te naslovnice medusobno preklopljene.
Tu su koristene mogucnosti izrade slikovnih mapa i hipertekstualnih veza kojima je omoguceno
povezivanje raznih mjesta unutar istog dokumenta. Klikom na dio slike s odredenom naslovnicom,
dokument ce se prabaciti do one tocke na kojoj se nalazi opis odgovarajuce knjige.
Naslovi knjiga su i u ovom slucaju posebno istaknuti nad ostatkom teksta, a opis svake pojedine
knjige razdijeljen je malom kuglicom. Kada bi se umjesto kuglice koristila valovita linija koja
predstavlja dio gralickog identiteta Znakovih stranica, cijeli dokument bi izgledao previse
jednoliko zbog prevelike gustoce vodoravnih linija. Autor Web stranice mora imati dobar osjecaj
za razmjestaj gralickih elemenata kako bi znao procijeniti u kojem ce slucaju upotrijebiti neku
prepoznatljivu slicicu, a u kojem ce se odluciti za neko drugo rjesenje.
Pri samom pocetaku stranice nalazi se veliki naslov (koji je pohranjen kao dvobojna prozirna slika
radi postizanja boljeg vizualnog elekta i ocuvanja sto manje ukupne velicine stranice), dok se na
dnu nalazi vec prepoznatljiva hipertekstualna veza za povratak na pocetak. HTML kd ovog
primjera dan je u nastavku.
win95.htm
<HTML>
<HEAD>
<TITLE>Windows 95 knjige</TITLE>
</HEAD>
<BODY BACKGROUND="../backlogo.gif">
<CENTER>
<IMG SRC="naslov.gif" ALT="Windows 95">
<IMG SRC="../waveline.gif"><P>
<A HREF="http:///cgi-bin/imagemap/izbor.map">
<IMG SRC="knjige.gif" BORDER=0 ISMAP></A><P>
<IMG SRC="../waveline.gif"><P>
<A NAME="iznutra">
<FONT SIZE=+2><B>Windows 95 iznutra</B></FONT><BR>
<I>Adrian King</I>, 515 stranica<P>
Windows 95 su otjelovljenje Microsoftovog koncepta grafi~kog
ra~unalstva - lagani su za kori{tenje ali i mo}ni kao klijent
u velikim sistemima. Upoznajte filozofiju, dizajn i arhitekturu
nove generacije Windowsa iz pera pravog znalca, Adriana Kinga,
biv{eg Microsoftovog direktora za operativne sustave!
Neizostavno {tivo za sve profesionalne korisnikem programere,
sistemske inenjere, informati~ke menadere i - ljubitelje
kompjutera.<P>
<IMG SRC="ball.gif"><P>
<A NAME="tajne">
<FONT SIZE=+2><B>Windows 95 tajne</B></FONT><BR>
156
<I>Brian Livingston</I>, 1008 stranica<P>
Prijevod ovog tre}eg izdanja najve}eg svjetskog Windows
bestselera za napredne korisnike - prethodna dva izdanja
prodana su samo u Americi u vi{e od 500.000 primjeraka!
Trikovi i tajne koje znaju samo majstori poput Briana. Iz
sadraja izdvajamo: savjeti za nadogradnju na novu ina~icu,
kako podesiti i optimizirati Windowse 95, nedokumentirane
funkcije, kratice i sve ono {to vam je Microsoft zaboravio
re}i...<P>
<IMG SRC="ball.gif"><P>
<A NAME="kako">
<FONT SIZE=+2><B>Kako rade Windows 95</B></FONT><BR>
<I>Simon Collin</I>, 128 stranica<P>
Najnovija iz serije <I>O^IGLEDNIH VODI^A</I>, ovo je jedina
knjiga koja <I>o~igledno</I> pokazuje kako se sluiti
Windowsima! Uvjerite se i sami na svoje o~i {to sve znaju i
~emu sve mogu posluiti novi, mo}ni Windowsi 95. U knjizi }ete
prona}i osnove Windowsa 95 i efikasnog kori{tenja va{eg PC-a,
prikaz rada s pomo}nim programima, te sve o novim funkcijama
koje olak{avaju rad s ra~unalom.<P>
<IMG SRC="ball.gif"><P>
<A NAME="sistemski">
<FONT SIZE=+2><B>Microsoft Windows 95 sistemski
priru~nik</B></FONT><BR>
<I>Microsoft Corporation</I>, 1380 stranica<P>
Po prvi puta Microsoft objavljuje slubenu tehni~ku
dokumentaciju za neki svoj proizvod usporedo s njegovom
promocijom. Znak u susradnji s Microsoft Pressom donosi i
hrvatskim profesionalnim korisnicima, programerima i sistemskim
inenjerima koji podravaju Windowse ove dragocjene informacije
na vlastitom jeziku i u najkra}em mogu}em vremenu. Za Windows
profesionalce nema dileme: ova seknjiga ne propu{ta!<P>
<IMG SRC="../waveline.gif">
<A HREF="../znakhome.html"><IMG SRC="../back.gif" BORDER=0><BR>
Povratak na po~etnu stranicu</A>
<BR><IMG SRC="../waveline.gif">
</CENTER>
</BODY>
</HTML>
Na slici 8-5 nalazi se ovaj primjer nakon ucitavanja u Netscape. U ovom slucaju ce stranica
izgledati potpuno jednako i u najnovijoj inacici Mosaica koja podrzava nekolicinu Netscapeovih
prosirenja jezika HTML koristenih u ovom primjeru.
S//ka 8-5: Stranica s knjigama o Windowsima 95.
157
Novi primjer sadrzava stranicu u kojoj su opisane knjige iz Serije Internet. (Izmedu ostalog i ova
knjiga. Kao da cijelo poglavlje nije dovoljno velika reklama za Znak. He, he...) Sada vec zasigurno
primjecujete da je naslov svakog pojedinog dokumenta ispisan razlicitim tipom slova, te da se
redovito radilo o prozirnim slikama. Takav pristup izradi Web stranica takoder se moze shvatiti kao
ostvarivanje gralickog identiteta. Najvaznije je da citatelj u svakom trenutku zna cije su stranice, te
sto se na njima nudi. U ovom primjeru je, medutim, izostavljen jedan dizajnerski element koji je
bio prisutan kod svih drugih dokumenata. Pogadate da se radi o pozadini ispunjenoj s uzorkom
stiliziranog logotipa.
Tu se radi o situaciji koja je objasnjena u prethodnom poglavlju: iako bi se kroz svaki dokument
trebala ocitovati gralicka ujednacenost vasih Web stranica, to na znaci da u pojedinim slucajevima
necete odstupati od uobicajenog. Ovakvim postupkom razbit cete svaki trag monotonije, a vecina
citatelja najvjerojatnije nece niti uociti prisutnu razliku. Na kraju krajeva, prepoznatljivost
dizajnerskog stila u ovom se slucaju sasvim dovoljno osjeca kroz prisutnost sada vec dobro nam
znanih valovitih vodoravnih linija.
Umjesto stiliziranog logotipa, u ovom smo primjeru za pozadinu uzeli slikovni uzorak koji je sirok
preko 1200 piksela, ali visok svega cetrdesetak piksela. Prva petina ove duguljaste slicice je
obojana svjetlo sivom bojom, te je neznatno nazubljena. Buduci sa je slicica poprilicno siroka,
mozemo biti sigurni da ce na svim razlucivostima i u svim velicinama prozara u kojem je smjesten
pretrazivacki program ona samo jednom stati u jedn redak pozadinskog prostora, cime je posignut
elekt obojanosti samo prve petine cijelog dokumenta. U rezlutate se mozete uvjeriti ako pogledate
sliku 8-6. Slican trik moze se izvoditi na mnostvo razlicitih nacina, pocev od bojanja samo sredine
slicice ili nekog njezinog dijela, do najrazlicitijih mogucih oblika nazubljenosti. Pokusajte se sami
poigrati s ovakvim pozadinama.
Sama stranica opisuje tri knjige. U sva tri slucaja je slika naslovnice smjestena na lijevoj strani
dokumenta (gdje je i obojana petina), dok je desni dio (bijeli) popunjen s tablicom koja popisuje
autora, broj stranica, kratki sadrzaj i neke druge podatke. Sadrzaj je ispisan nesto manjom
velicinom slova kako bi se naslovi koji su nesto duzi nego kod ostalih knjiga mogli bolje isticati.
Kada pogledate HTML kd ovog primjera, primijetit cete da je koristen velik broj Netscapeovih
prosirenja jezika HTML, no uvjerit cete se da se trud isplati jer je konacan izgled stranice zaista
poseban.
internet.htm
<HTML>
<HEAD>
<TITLE>Serija INTERNET</TITLE>
</HEAD>
<BODY BACKGROUND="interbg.gif">
<CENTER>
<IMG SRC="title.gif" ALT="Serija INTERNET">
</CENTER>
<BR>
<IMG SRC="../waveline.gif">
<BR>
<IMG SRC="interhr.gif" ALIGN=left VSPACE=12 HSPACE=18>
158
<TABLE CELLPADDING=10 WIDTH=500>
<CAPTION>
<FONT SIZE=+1>Internet.HR</FONT><BR>
Kako na mreu iz Hrvatske
</CAPTION>
<TR VALIGN=TOP>
<TD>
<I>Darija Meter<BR>
Hana Breyer<BR>
Ana-Marija ^e~uk<BR>
Dario Su{anj</I>
<P>
<FONT SIZE=-1>
<B>ISBN:</B> 953-6185-77-6<BR>
<B>Stranica:</B> 500<BR>
<B>Format:</B> 19 x 23.5 cm<BR>
Za sve razine predznanja
</FONT></TD>
<TD WIDTH=350>
<FONT SIZE=-1>
Sve informacije pohranjene na Internetu bit }e nakon ~itanja
ove knjige nadohvat ruke svim korisnicima DOS-a, Windowsa 3.1,
Windowsa 95, OS/2, UNIX-a i X-Windowsa. Preko opisa mogu}nosti
pristupa Internetu iz Hrvatske, odabira potrebnog softvera i
hardvera i njegovog pode{avanja, pa do mnogih prakti~nih
savjeta i naprednih tehnika, ovaj je priru~nik dragocjen vodi~
za svakodnevni rad i snalaenje s Internetovim uslugama. Knjiga
sadri i prvi popis svih mrenih usluga u Hrvatskoj, kao i
odabir najzanimljivij sadraja na Internetu u svijetu.
</FONT></TD>
</TR>
</TABLE>
<BR CLEAR=left>
<BR>
<IMG SRC="../waveline.gif">
<BR>
<IMG SRC="inter95.gif" ALIGN=left VSPACE=12 HSPACE=18>
<TABLE CELLPADDING=10 WIDTH=500>
<CAPTION>
<FONT SIZE=+1>Internet</FONT><BR>
za Windows 95
</CAPTION>
<TR VALIGN=TOP>
<TD>
<I>Oleg Ma{truko</I><BR>
<P><BR>
<FONT SIZE=-1>
<B>ISBN:</B> 953-6185-78-4<BR>
<B>Stranica:</B> 300<BR>
159
<B>Diskete:</B> 2<BR>
<B>Format:</B> 19 x 23.5 cm<BR>
Za sve razine predznanja
</FONT></TD>
<TD WIDTH=350>
<FONT SIZE=-1>
Dvije super vru}e teme udruene u jednu! Saznajte sve o
podr{ci za pristup Internetu u Windowsima 95, Internet
protokolima i uslugama, potrebnom hardveru i softveru,
formatima datoteka, pravlima pona{anja na Mrei, Windowsima
95 kao serverskoj platformi na Internetu... Sve je obja{njeno
na zanimljiv i jednostavan na~in - samo se udobno smjestite u
fotelju i krenite na put oko svijeta u vlastitom aranmanu.
</FONT></TD>
</TR>
</TABLE>
<BR CLEAR=left>
<BR>
<IMG SRC="../waveline.gif">
<BR>
<IMG SRC="html.gif" ALIGN=left VSPACE=12 HSPACE=18>
<TABLE CELLPADDING=10 WIDTH=500>
<CAPTION>
<FONT SIZE=+1>Nau~ite HTML</FONT><BR>
i oblikujte sami efektne WWW stranice
</CAPTION>
<TR VALIGN=TOP>
<TD>
<I>Dragan Petric</I><BR>
<P><BR>
<FONT SIZE=-1>
<B>ISBN:</B> 953-6185-79-2<BR>
<B>Stranica:</B> 260<BR>
<B>Diskete:</B> 2<BR>
<B>Format:</B> 19 x 23.5 cm<BR>
Za sve razine predznanja
</FONT></TD>
<TD WIDTH=350>
<FONT SIZE=-1>
Ova }e vas knjiga nau~iti svim pravilima izrade
hipertekstualnih dokumenata lako i jednostavno, putem mno{tva
primjera. No, to nije samo priru~nik za HTML, ve} i vodi~ kroz
tajne dobrog oblikovanja World Wide Web stranica i
prezentiranja va{ih ideja na Mrei. HTML tehnike, Netscapeova
pro{irenja, popis naredbi i kodova, opis softvera... Na
priloenim disketama se izme|u ostalog nalaze i svi primjeri
iz knjige.
</FONT>
</TD></TR>
160
</TABLE>
<BR CLEAR=left>
<BR><IMG SRC="../waveline.gif">
<CENTER>
<A HREF="../znakhome.html"><IMG SRC="../back.gif" BORDER=0><BR>
Povratak na po~etnu stranicu</A>
<BR><IMG SRC="../waveline.gif">
</CENTER>
</BODY>
</HTML>
Slika 8-6 prikazuje ovaj primjer nakon njegovog ucitavanja u Netscape. Ako pokusate ucitati ovaj
primjer u Mosaic ili neki drugi pretrazivacki program, stranica ce izgledati dobro, ali to nece biti
niti izbliza elektno kao u slucaju Netscapea. Osim Netscapea, ovaj ce primjer poprimiti zeljeni
oblik jedino u pretrazivackom programu Microsoft Internet Explorer 2.0 koji je jos uvijek u lazi
beta testiranja. Taj 32-bitni pretrazivacki program je, nazalost, namijenjen radu samo u Windows
95 okruzju, pa je krug njegovih korisnika daleko manji od Netscapeovog. Vazno je, dakle, na
pocetnoj stranici navesti pretrazivacki program s kojim stranice izgledaju najbolje, te po
mogucnosti ugraditi hipertekstualnu vezu putem koje korisnik moze prebaciti kopiju programa na
svoje racunalo.
S//ka 8-6: Stranica sa `Serijom Internet'.
Stranica koja je opisana u sljedecem primjeru opisuje knjige iz serije ...za neznalice. Naslov
stranice ispisan je pismom koje je karakteristicno za cijelu seriju. Pozadinski uzorak sad ponovno
sadrzi Znakov logotip, premda ne bi bila losa ideja da je sastavljen od vise malenih natpisa ...za
neznalice buduci da se radi o najvecoj i najpoznatijoj seriji knjiga izaslih u izdanju Znaka. Kada bi
stranice bile u boji, za pozadinu bi se jednostavno mogla uzeti zuta boja po kojoj je ova serija
prepoznatljiva. Mogucnosti su prema tome neogranicene, a izbor je uvijek prepusten autoru Web
stranice.
U ovom su primjeru predstavljene tri knjige - svaka u svojem stupcu tablice. Naslovi knjiga su kao
i u prethodnim slucajevima ispisani nesto vecim slovima od ostalog teksta, no vjerojatno ste vec
primijetili da je gralicko uredenje svakog dosadasnjeg primjera rjeseno drugacije. Svaki dokument
od kojega se sastoje stranice koje izradujemo u ovom dijelu poglavlja osmisljene su drugacije, no
kostur je uvijek isti: pozadinski uzorak, valovite linije, strelica za povratak na pocetnu stranicu i
krupnim slovima ispisan naslov dokumenta. Time je pokazano da stranice bilo koje tvrtke ili
organizacije mogu posjedovati prepoznatljive elemente dizajna, ali da uz to budu i medusobno
razlicite. Nastojte izbjegavati kreiranje medusobno jednakih stranica koje se razlikuju samo po
tekstu kojega sadrze. Izgradite svoj stil kroz sitne detalje koji ujednaciti vizualnu strukturu vasih
dokumenata, no pokusajte svaki puta uvesti neki novitet kako ne biste citatelju postali dosadni.
Gotovo u svako dokumentu kojega smo proucavali koristene su tablice. Taj element jezika HTML
najbolji je u slucajevima kada zelite postici elekt visestupcanog sloga kao sto je slucaj u ovom
161
primjeru. Vec je navedeno u sestom poglavlju da danas tablice podrzava gotovo svaki pretrazivacki
program, te da se netrebate dvoumiti oko njihove upotrebe. Mnogi smatraju tablice i mogucnost
promjene velicine pisma najjacim alatima za lormatiranje stranica jezikom HTML jer je raspon
elekata koji se njima mogu postici zaista neogranicen. U to se mozete uvjeriti ako pogledate
primjer sa stranicama ...za neznalice.
dummies.htm
<HTML>
<HEAD>
<TITLE>Serija ...ZA NEZNALICE</TITLE>
</HEAD>
<BODY BACKGROUND="../backlogo.gif">
<CENTER>
<IMG SRC="naslov.gif" ALT="... ZA NEZNALICE">
<BR>
<IMG SRC="../waveline.gif">
<BR>
<TABLE CELLPADDING=10>
<TR>
<TD><IMG SRC="inter.gif"></TD>
<TD><IMG SRC="word.gif"></TD>
<TD><IMG SRC="win95.gif"></TD></TR>
<TR VALIGN=TOP>
<TD>
<B>Internet za neznalice</B><BR>
<I>Jonh Levine, Carol Baroudi</I>
<P><FONT SIZE=-1>
<B>ISBN:</B> 953-6185-59-8<BR>
<B>Stranica:</B> 452<BR>
<B>Format:</B> 19 x 23.5 cm<BR>
Za sve razine predznanja<P>
Pro{vrljajte Internetom pomo}u ovog jednostavnog i zabavnog
vodi~a kroz naredbe, uslune servise, osnove komuniciranja
ra~unalom i na~ine povezivanja na Internet!<P>
<B>IZ SADR@AJA</B><BR>
<UL>
<LI>Kako se povezivati na razli~ite izvore i pronalaziti
najzanimljivije stvari na mrei
<LI>Detalji o karakteristikama i ponudi razli~itih
informacijskih servisa
<LI>Namijenjeno podjednako DOS, Windows, Macintosh i UNIX
korisnicima
</UL>
<B>O AUTORIMA</B><P>
<B>John Levine</B> pi{e bestselere i vodi diskusijske grupe
na Internetu. <B>Carol Baroudi</B> ivi od pisanja ~lanaka i
knjiga o ra~unalima.</TD>
162
<TD>
<B>Word for Windows 6 za neznalice</B><BR>
<I>Dan Gookin</I>
<P><FONT SIZE=-1>
<B>ISBN:</B> 953-6185-48-2<BR>
<B>Stranica:</B> 378<BR>
<B>Format:</B> 19 x 23.5 cm<BR>
Za sve razine predznanja<P>
Prikazuju}i novu ina~icu iznimno popularnog MS Worda Dan
Gookin napisao je priru~nik zanimljiv svima, spajaju}i svoju
vrhunsku stru~nost i neodoljiv smisao za humor!<P>
<B>IZ SADR@AJA</B><BR>
<UL>
<LI>Upoznajte novo korisni~ko su~elje s prilagodljivim
trakama s alatom, brzim menijima i automatiziranim
funkcijama.
<LI>Kako se sluiti ~arobnjacima, AutoFormatom, stilovima...
<LI>Kako iskoristiti punu snagu Wordovih ugra|enih funkcija
</UL>
<B>O AUTORU</B><P>
<B>Dan Gookin</B> je "izmislio" seriju <I>...ZA NEZNALICE</I>
i autor je nekoliko velikih svjetskih bestselera (npr.
<I>PC-i za neznalice</I>).</TD>
<TD>
<B>Windows 95 za neznalice</B><BR>
<I>Andy Rathbone</I>
<P><FONT SIZE=-1>
<B>ISBN:</B> 953-6185-58-X<BR>
<B>Stranica:</B> 400<BR>
<B>Format:</B> 19 x 23.5 cm<BR>
Za sve razine predznanja<P>
Napokon, Windows 95 su ovdje! Ovakav doga|aj zasluuje i
ovakvu knjigu - proku{ani "NEZNALICA" Andy Rathbone sigurno
vas vodi kroz zanimljiv svijet jednih sasvim novih
Windowsa!<P>
<B>IZ SADR@AJA</B><BR>
<UL>
<LI>Windows 95 - {to je novo i kako moete njihove nove,
velike mogu}nosti iskoristiti u potpunosti.
<LI>Savjeti za {to lak{i, bri i jednostavniji rad
<LI>Jednostavno i brzo snalaenje, podjednako u knjizi i u
Windowsima
</UL>
<B>O AUTORU</B><P>
<B>Andy Rathbone</B> autor je brojnih hitova i jedan od
najuspje{nijih autora kompjuterskih knjiga uop}e. Njegovi
<I>Windowsi</I> doivjeli su ~ak ~etiri izdanja!
</TD>
</TR>
163
</TABLE>
<BR><IMG SRC="../waveline.gif">
<A HREF="../znakhome.html"><IMG SRC="../back.gif" BORDER=0><BR>
Povratak na po~etnu stranicu</A>
<BR><IMG SRC="../waveline.gif">
</CENTER>
</BODY>
</HTML>
Na slici 8-7 vidi se ovaj primjer nakon ucitavanja u Netscape. Kada bi stranica bila prisutna na
Webu, dobro bi bilo negdje na njezinom dnu ugraditi i male slicice preostalih naslova iz ove serije
kako bi citatelj mogao procitati sadrzaj drugih triju knjiga ...za neznalice. Ovaj ce primjer
izgledati podjednako u vecini pretrazivackih programa jer su koristena tek rijetka Netscapeova
prosirenja jezika HTML.
S//ka 8-7: Stranice sa serijom knjiga `...za neznalice'.
Za kraj donosimo primjer obrasca koji je namijenjen izravnom narucivanju knjiga. Kako se ocekuje
skora komercijalizacija Interneta u Hrvatskoj, ovakvih ce se narudzbi zasigurno pojaviti mnogo. U
prilozenom primjeru ovaj puta naslov nije ispisan krupnim veselim pismom jer se radi o malo
ozbiljnijem dokumentu. Preostali elementi dizajnerskog identiteta su ipak prisutni. Kao sto se vidi
na slici 8-8, mogucem kupcu su ponudena tri polja za narucivanje knjiga, sto opet zavisi o izboru
autora stranice. Ukoliko citatelja zanimaju vise od tri knjige, uvijek ce moci popuniti obrazac
nekoliko puta.
Niti u ovom primjeru nismo zaboravili na tablice. One predstavljaju jedino rjesenje za
poravnavanje polja u obrascu (mogli bi upotrebljavati HTML naredbu <PRE>, no to bi uvjetovalo
upotrebu neproporcionalnog pisma), cime se postize slicnost s pravim papirnatim obrascima. Kada
polja u obrascu ne bi bila poravnata, dokument bi izgledao nepregledno sto bi moglo zbuniti
korisnika koji je pocetnik, te bi narudzbenica mogla biti neispravno popunjena. U nastavku je dan
izvorni HTML kd posljednjeg primjera od kojih se sastoje Znakove stranice.
lorm.htm
<HTML>
<HEAD><TITLE>Odabir knjige</TITLE>
</HEAD>
<BODY BACKGROUND="../backlogo.gif">
<H1>Narudbenica za knjige</H1>
<IMG SRC="../waveline.gif"><P>
Ako ste se odlu~ili za nabavku nekih izdanja iz na{eg izdava~kog
programa, predlemo Vam da putem ovog obrasca odabrane naslove
naru~ite po najpovoljnijim uvjetima! Svojim izravnik kupcima ZNAK
uz redovan popust nudi i posebne dodatne koli~inske popuste za
164
kupnju ve}eg broja knjiga. Za detaljnije informacije o uvjetima
kupnje, molimo nazovite.
<P><IMG SRC="../waveline.gif"><P>
<FORM ACTION="/cgi-bin/obrazac" METHOD=POST>
<TABLE>
<TR>
<TD>Ime i prezime:</TD>
<TD><INPUT TYPE=text NAME="ime" SIZE=40></TD></TR>
<TR>
<TD>Adresa i telefon:</TD>
<TD><INPUT TYPE=text NAME="adresa" SIZE=40></TD></TR>
<TR>
<TD>Tvrtka:</TD>
<TD><INPUT TYPE=text NAME="tvrtka" SIZE=40></TD></TR>
</TABLE>
<P>
<TABLE>
<TR VALIGN=TOP>
<TD ROWSPAN=3>Naru~ujem sljede}e naslove:</TD>
<TD><INPUT TYPE=text NAME="knjiga1" SIZE=30></TD>
<TD>Komada
<SELECT NAME="komada1">
<OPTION>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5
</SELECT>
</TD></TR>
<TR>
<TD><INPUT TYPE=text NAME="knjiga2" SIZE=30></TD>
<TD>Komada
<SELECT NAME="komada2">
<OPTION>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5
</SELECT>
</TD></TR>
<TR>
<TD><INPUT TYPE=text NAME="knjiga3" SIZE=30></TD>
<TD>Komada
<SELECT NAME="komada3">
<OPTION>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5
</SELECT>
</TD></TR>
</TABLE>
<P>
<B>Na~in pla~anja:</B><BR>
<INPUT TYPE=radio NAME="lova" VALUE="pouze}e" CHECKED>
Pouze}em. Na ra~unu navedite
<SELECT NAME="navesti">
<OPTION VALUE="osobu">moje osobno ime
<OPTION VALUE="tvrtku">naslov moje tvrtke
</SELECT>
<BR>
165
<INPUT TYPE=radio NAME="lova" VALUE="predra~un">
Po predra~unu. (Samo za poduze}a.)
<P>
<B>[to je utjecalo na Va{u kupovinu ovih knjiga?</B><BR>
<INPUT TYPE=checkbox NAME="osoba" VALUE="x"> osobna preporuka<BR>
<INPUT TYPE=checkbox NAME="oglas" VALUE="x"> oglas u ~asopisu<BR>
<INPUT TYPE=checkbox NAME="ponuda" VALUE="x"> ponuda u
knjiari<BR>
<INPUT TYPE=checkbox NAME="katalog" VALUE="x"> katalog
"Znaka"<BR>
<INPUT TYPE=checkbox NAME="drugo" VALUE="x"> drugo:
<INPUT TYPE=text NAME="utjecaj" SIZE=30>
<P>
<INPUT TYPE=submit VALUE="Slanje">
<INPUT TYPE=reset VALUE="Brisanje">
<P>
</FORM>
<CENTER>
<IMG SRC="../waveline.gif">
<A HREF="../znakhome.html"><IMG SRC="../back.gif" BORDER=0><BR>
Povratak na po~etnu stranicu</A><BR>
<IMG SRC="../waveline.gif">
</CENTER>
</BODY>
</HTML>
Na slici 8-8 nalazi se ovaj primjer nakon ucitavanja u Netscape. Vecina pretrazivackih programa
prikazat ce ovu stranicu jednako jer je koristen malen broj Netscapeovih prosirenja i elemenata
predlozenih standardom HTML 3 (obrasci su uvedeni u inacici HTML 2). Kod ovakvih stranica
koje putem kojih se izvrsava izravna narudzba ili se uspostavlja kontakt izmedu citatelja i tvrtke
pokusajte koristiti one elemente jezika za koje ste sigurni da ce ih vecina pretrazivaca znati
prikazati jer je vazno da ih svaki korisnik na svojem ekranu vidi onako kako ste zamislili. Ovo je
jos jedan podsjetnik da svoje dokumente testirate ne sto je moguce vecem broju razlicitih platlormi
i pretrazivackih programa.
S//ka 8-9: Narudzbenica za knjige.
Ukoliko sami zelite isprobati Znakove Web stranice koje su izradene u ovom poglavlju, ucitajte
odgovarajuce datoteke s prilozenih disketa u svoj pretrazivacki program - po mogucnosti Netscape,
kao sto je preporuceno na pocetnoj stranici. Najbolje bi, medutim bilo kada biste datoteke prebacili
na racunalo s instaliranim Web posluziteljem jer je to jedini nacin da i slikovne mape budu
lunkcionalne. U tom cete slucaju morati u ovisosti o proizvodacu posluzitelja kreirati MAP datoteke
koje ovdje namjerno nisu uvrstene kako biste sami uvjezbali njihovo kreiranje. U tu svrhu je
166
najbolje posluziti se programom Map This koji se nalazi na prilozenim disketama, a cije je
upotreba opisana u dodatku B.
167
IV. Dio: Dodaci
168
Dodatak A: Popis svih HTML naredbi
169
Komentar
Opis
Komentari se u jeziku HTML obuhvacaju oznakama <-- i -->. Sav tekst koji se nalazi izmedu
ovih dvaju oznaka nece se prikazati u prozoru pretrazivackih programa. Komentar moze sadrzavati
bilo kakav tekst osim novih oznaka za komentar, a unutar zavrsne oznake --> dozvoljena je i
upotreba razmaka sto inace nije uobicajeno za ostale HTML oznake.
Obavezni argumenti
<!--tekst...-->
Uobicajena upotreba
<!--
tekst...
tekst...
-->
Napomene
Neki pretrazivaci zaboravljaju ignorirati HTML oznake koje se nalaze unutar komentara.
Zanimljivo je da takoder postoje pretrazivacki programi koji ce kao pocetnu naredbu za komentar
shvatiti bilo koju oznaku koja zapocinje s <!, sto znaci da u nekim slucajevima nece doci do
pogreske ako zaboravite navesti i dvije dodatne crtice. Radi se zapravo o sintaksi koja se za
komentare koristi u jeziku SGML o kojemu mozete vise procitati u prvom poglavlju knjige.
Najbolje bi bilo da dvije crtice ne koristite nigdje unutar komentara osim u pocetnoj i zavrsnoj
oznaci jer bi neki manje poznati pretrazivacki programi mogli krivo interpretirati tekst sadrzan u
komentaru.
A
Opis
Oznakom A obuhvaca se dio teksta ili slika koja ce biti prikazana kao sidro za hipertekstualnu
vezu. Naredbi se obavezno mora pridruziti argument HREF kojim se navodi URL adresa
dokumenta koji predstavlja cilj hipertekstualne veze, odnosno argument NAME kojim se oznacava
cilj hipertekstualne veze unutar istog dokumenta u kojemu se nalazi i sidro. Ako s naredbom A
koristite argument NAME, necete morati upotrijebiti zavrsnu oznaku </A>, buduci da u tom slucaju
ova naredba ne sluzi oznacavanju teksta koji ce biti prikazan na neki poseban nacin.
Obavezni argumenti
<A HREF="..." >tekst... </A>
ili
170
<A NAME="..." >
Svi moguci argumenti
<A HREF="..." NAME="..." REL="..." REV="..." URN="..." TITLE="..."
METHODS="..." ID="..." LANG="..." CLASS="..." MD="..."
SHAPE="...">tekst... </A>
Elementi cija je upotreba dozvoljena unutar naredbe
<IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT> <B>
<I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
Standardima HTML+ i HTML 3 predlozena je promjena imena argumenta NAME u ID. Takoder je
predlozeno da se argument ID moze koristiti unutar bilo koje oznake kako bi slika ili tekst
lormatiran tom oznakom mogao predstavljati cilj hipertekstualne veze unutar istog dokumenta u
kojemu se nalazi i pocetak veze. Argumenti REV i REL se jos uvijek koriste vrlo rijetko, no
ocekuje se njihova sve cesca upotreba buduci da u velikoj mjeri olaksavaju automatsko obnavljanje
hipertekstualnih veza na World Wide Webu. Trenutno se ta dva argumenta najvise koriste s
naredbom LINK koja se mora nalaziti u zaglavlju dokumenta. METHODS je argument koji se
koristi vrlo rijetko, a podrzavaju ga samo neki pretrazivacki programi. Argumenti LANG, CLASS i
MD predlozeni su za uvrstavanje u standard HTML 3, a njihova tocna sintaksa jos uvijek nije
delinirana. Standard HTML 3 donosi i argument SHAPE kojim ce se unutar dokumenta moci
kreirati slikovne mape bez potrebe za kreiranjem dodatnih CGI datoteka s koordinatama slike.
Naredba A uvrstena je u jezik HTML od samog njegovog pocetka.
ABBREV
Opis
Naredba ABBREV je namijenjena oznacavanju teksta koji bi se u pretrazivackom programu trebao
prikazati kao skracenica. Skracenice se najcesce prikazuju kosim slovima.
Obavezni argumenti
<ABBREV>tekst... </ABBREV>
Svi moguci argumenti
<ABBREV ID="..." LANG="..." CLASS="...">tekst... </ABBREV>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
171
Napomene
Uvrstavanje ovog elementa u jezik HTML predlozeno je za standard HTML 3.
ACRONYM
Opis
Naredba ACRONYM namijenjena je oznacavanju teksta koji unutar odlomka predstavlja ime
sastavljeno od pocetnih slova nekog naziva koji se sastoji od vise rijeci. Dobri primjeri za takve
nazive su CIA, AIDS i RGB.
Obavezni argumenti
<ACRONYM>tekst... </ACRONYM>
Svi moguci argumenti
<ACRONYM ID="..." LANG="..." CLASS="...">tekst... </ACRONYM>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ovog elementa u jezik HTML predlozeno je za standard HTML 3.
AU
Opis
Naredba <AU> namijenjena je oznacavanju teksta koji predstavlja ime autora Web stranice. Vecina
pretrazivackih programa ce ime autora prikazati koso otisnutim slovima.
Obavezni argumenti
<AU>tekst... </AU>
Svi moguci argumenti
<AU ID="..." LANG="..." CLASS="...">tekst... </AU>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
172
Napomene
Uvrstavanje ovog elementa u jezik HTML predlozeno je za standard HTML 3.
ADDRESS
Opis
Naredbom ADDRESS se obicno oznacava vise redaka teksta koji predstavljaju neku adresu.
Najcesce se radi o e-mail adresi autora Web stranice, no to moze biti i necija kucna adresa ili
adresa neke ustanove. Tekst oznacen ovom naredbom bit ce prikazan kosim slovima, a neki ce ga
pretrazivacki programi malo pomaknuti udesno.
Obavezni argumenti
<ADDRESS>tekst... </ADDRESS>
Svi moguci argumenti
<ADDRESS ID="..." LANG="..." CLASS="..."
CLEAR=left|right|all|"..." NOWRAP>tekst... </ADDRESS>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I> <P>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <FORM>
Napomene
Ova je naredba uvrstena u jezik HTML vec u prvoj inacici standarda, dok je uvrstavanje
argumenata ID, LANG, CLASS, CLEAR i NOWRAP predlozena tek za standard HTML 3.
B
Opis
Tekst koji je obuhvacen oznakom <B> bit ce prikazan masno otisnutim slovima.
Obavezni argumenti
<B>tekst... </B>
Svi moguci argumenti
<B ID="..." LANG="..." CLASS="...">tekst... </B>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
173
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
Pretrazivacki programi koji ne podrzavaju prikazivanje teksta masnim slovima istaknut ce tekst
obuhvacen ovom naredbom na neki drugi nacin. Naredba B podrzana je jos od prve inacice jezika
HTML, dok je uvrstavanje argumenata ID, LANG i CLASS predlozeno tek za standard HTML 3.
BANNER
Opis
Naredba BANNER predlozena je za oznacavanje logotipa tvrtke, navigacijskih ikona, te bilo kakvih
drugih elemenata koji bi trebali biti prikazani u prozoru pretrazivackog programa cijelo vrijeme.
Obavezni argumenti
<BANNER>tekst... </BANNER>
Svi moguci argumenti
<BANNER ID="..." LANG="..." CLASS="...">tekst... </BANNER>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<BODY>
Napomene
Uvrstavanje ovog elementa u jezik HTML predlozeno je za standard HTML 3.
BASE
Opis
Elementom BASE se u zaglavlju dokumenta oznacava svaka pojedina URL adresa koja se koristi u
tijelu dokumenta. Cesto se ovom naredbom jednostavno navodi URL adresa samog dokumenta u
kojemu je sadrzana kako bi posebni alati za prebacivanje citavih nizova Web stranica na novu
lokaciju sto lakse obavljali svoj posao.
Obavezni argumenti
<BASE HREF="...">
Svi moguci argumenti
<BASE HREF="...">
174
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<HEAD>
Napomene
Ova je naredba podrzana jos od prve inacice jezika HTML, premda se ne koristi bas redovito.
BASEFONT
Opis
Naredbom BASEFONT moze se promijeniti osnovna velicina pisma kojim se prikazuje tekst
dokumenta u pretrazivackom programu. Podrzano je sedam razlicitih velicina, a uobicajeno pismo
za prikazivanje teksta je velicine 3.
Obavezni argumenti
<BASEFONT SIZE=1|2|3|4|5|6|7>
Svi moguci argumenti
<BASEFONT SIZE=1|2|3|4|5|6|7>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Naredba BASEFONT je Netscapeovo prosirenje jezika HTML.
BIG
Opis
Naredba BIG namijenjena je oznacavanju teksta koji ce se u prozoru pretrazivackog programa
prikazati nesto vecim slovima od uobicajenih.
Obavezni argumenti
<BIG>tekst... </BIG>
Svi moguci argumenti
<BIG ID="..." LANG="..." CLASS="...">tekst... </BIG>
175
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3.
BLINK
Opis
Naredbom BLINK moze se oznaciti tekst koji ce u prozoru pretrazivackog programa titrati.
Obavezni argumenti
<BLINK>tekst... </BLINK>
Svi moguci argumenti
<BLINK>tekst... </BLINK>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Ova naredba nije sluzbeno uvrstena niti u jedan standard jezika HTML, pa ju mnogi pretrazivacki
programi ignoriraju. Njezina se upotreba preporuca samu u rijetkim situacijama kada je potrebno
posebno istaknuti neki naslov ili kakvu novu vijest. Netscape 1.1N dozvoljava korisnicima da
iskljuce titranje teksta obuhvacenog ovom naredbom.
BLOCKQUOTE
Opis
Naredbom BLOCKQUOTE oznacava se odvojeni odlomak teksta koji se u pretrazivackom programu
mora prikazati kao citat. Citati se najcesce ispisuju koso otisnutim slovima u odlomku koji je malo
pomaknut udesno.
Obavezni argumenti
<BLOCKQUOTE> </BLOCKQUOTE>
Svi moguci argumenti
176
<BLOCKQUOTE> </BLOCKQUOTE>
Elementi cija je upotreba dozvoljena unutar naredbe
<H1> <H2> <H3> <H4> <H5> <H6> <P> <UL> <OL> <DIR> <MENU> <DL>
<PRE> <BLOCKQUOTE> <FORM> <ISINDEX> <HR> <ADDRESS>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <DD> <FORM> <LI>
Napomene
Naredba BLOCKQUOTE uvrstena je u jezik HTML u njegovoj prvoj inacici, a za standard HTML 3
se predlaze njezino zamjenjivanje kracom naredbom BQ. Neki pretrazivacki programi na pocetak
svakog retka citata ubacuju znak vece od (>), sto je uobicajena praksa za oznacavanje citiranog
teksta u elektronickim porukama na Internetu.
BODY
Opis
Unutar oznaka <BODY> i </BODY> smjesteno je tijelo dokumenta, za razliku od zaglavlja koje se
oznacava naredbom <HEAD>. Sav tekst koji se prikazuje u prozoru pretrazivackog programa mora
se nalaziti u tijelu dokumenta.
Obavezni argumenti
-
Svi moguci argumenti
<BODY ID="..." LANG="..." CLASS="..." BACKGROUND="..."
BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb"
ALINK="#rrggbb"> </BODY>
Elementi cija je upotreba dozvoljena unutar naredbe
<H1> <H2> <H3> <H4> <H5> <H6> <P> <UL> <OL> <DIR> <MENU> <DL>
<PRE> <BLOCKQUOTE> <FORM> <ISINDEX> <HR> <ADDRESS>
Elementi unutar kojih je dozvoljena upotreba naredbe
<HTML>
Napomene
Naredba BODY uvedena je u jezik HTML standardom HTML 2, a trenutno je njezina upotreba
opcionalna. Standardom HTML 3 predlozeno je dodavanje argumenata ID, LANG, CLASS i
BACKGROUND ovoj naredbi, dok argumenti BGCOLOR, LINK, VLINK i ALINK predstavljaju
Netscapeova prosirenja. Preporuka je da se ova naredba obavezno koristi u svakom HTML
dokumentu.
177
BQ
Opis
Naredbom BQ oznacava se odvojeni odlomak teksta koji se u pretrazivackom programu mora
prikazati kao citat. Unutar ove naredbe moze se ubaciti i naredba <CREDIT> koja je namijenjena
navodenju autora citata.
Obavezni argumenti
<BQ> </BQ>
Svi moguci argumenti
<BQ ID="..." LANG="..." CLASS="..." CLEAR=left|right|all|"..."
NOWRAP> </BQ>
Elementi cija je upotreba dozvoljena unutar naredbe
<CREDIT>
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Naredba BQ predlozena je za uvrstavanje u jezik HTML standardom HTML 3, i to kao zamjena za
naredbu BLOCKQUOTE.
BR
Opis
Naredba BR namijenjena je oznacavanju mjesta unutar odlomka na kojemu bi tekst trebao prijeci u
novi redak.
Obavezni argumenti
<BR>
Svi moguci argumenti
<BR CLEAR=left|right|all|"..." ID="..." LANG="..." CLASS="...">
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
Argument CLEAR je Netscapeovo prosirenje jeziku HTML, a njegovo je uvrstavanje predlozeno i
za standard HTML 3. Sama naredba BR sastavni je dio jezika jos od pocetka njegove upotrebe.
178
CAPTION
Opis
Naredba CAPTION namijenjena je oznacavanju komentara za tablice i slike.
Obavezni argumenti
<CAPTION>tekst... </CAPTION>
Svi moguci argumenti
<CAPTION ALIGN=top|bottom|left|right ID="..." LANG="..."
CLASS="...">tekst... </CAPTION>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<FIG> <TABLE>
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3. Kod rada s tablicama,
argumentu ALIGN se mogu dodijeliti samo vrijednosti top i bottom. Ova je naredba
Netscapeovo prosirenje jezika HTML.
CENTER
Opis
Svi elementi Web stranice koji su obuhvaceni naredbom CENTER bit ce centrirani u sredistu
Netscapeovog prozora, odnosno prozora nekog drugog pretrazivackog programa koji podrzava
njezinu upotrebu.
Obavezni argumenti
<CENTER>tekst... </CENTER>
Svi moguci argumenti
<CENTER>tekst... </CENTER>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<A>
Napomene
179
Naredba CENTER je Netscapeovo prosirenje jezika HTML. Radi se o vrlo korisnoj naredbi, pa se
mnogi cude cinjenici da nije predlozeno njezino uvrstavanje u standard HTML 3.
CITE
Opis
Naredbom CITE oznacava se dio teksta unutar odlomka koji predstavlja kratak citat. Taj ce tekst u
vecini slucajeva biti prikazan kosim slovima.
Obavezni argumenti
<CITE>tekst... </CITE>
Svi moguci argumenti
<CITE ID="..." LANG="..." CLASS="...">tekst... </CITE>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
Naredba CITE uvrstena je u jezik HTML standardom HTML 2, dok je uvrstavanje argumenata
ID, LANG i CLASS predlozeno tek za standard HTML 3.
CODE
Opis
Naredbom CODE oznacava se dio dokumenta koji predstavlja ispis u nekom programskom jeziku.
Tekst oznacen ovom naredbom najcesce se prikazuje u neproporcionalnom pismu.
Obavezni argumenti
<CODE>tekst... </CODE>
Svi moguci argumenti
<CODE ID="..." LANG="..." CLASS="...">tekst... </CODE>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
180
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
Naredba CODE uvrstena je u jezik HTML standardom HTML 2, dok je uvrstavanje argumenata
ID, LANG i CLASS predlozeno tek za standard HTML 3.
CREDIT
Opis
Naredbom CREDIT oznacava se ime autora nekog citata ili crteza uvrstenog u dokument.
Obavezni argumenti
<CREDIT>tekst... </CREDIT>
Svi moguci argumenti
<CREDIT ID="..." LANG="..." CLASS="...">tekst... </CREDIT>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<BQ> <FIG>
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3. Jos nije tocno
delinirano kako bi se trebao prikazivati tekst oznacen ovom narednom.
DD
Opis
Naredba DD namijenjena je oznacavanju delinicije nekog pojma unutar delinitne liste koja se
dobiva naredbom DL.
Obavezni argumenti
<DD>tekst...
Svi moguci argumenti
<DD>tekst... </DD>
Elementi cija je upotreba dozvoljena unutar naredbe
181
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I> <P> <UL> <OL> <DIR> <MENU> <DL> <PRE> <BLOCKQUOTE> <FORM>
<ISINDEX>
Elementi unutar kojih je dozvoljena upotreba naredbe
<DL>
Napomene
Tekst oznacen ovom naredbom obicno se prikazuje ispisan obicnim pismom, ali malo pomaknut
prema desno. Upotreba zavrsne oznake </DD> je opcionalna, a naredba je podrzana jos od prve
inacice jezika HTML.
DEL
Opis
Naredbom DEL oznacava se tekst koji bi zapravo trebao biti obrisan, poput naputaka koji su
promijenjeni u nekom sluzbenom dokumentu. Tekst oznacen ovom naredbom najcesce se u
pretrazivackim programima prikazuje prekrizen.
Obavezni argumenti
<DEL>tekst... </DEL>
Svi moguci argumenti
<DEL ID="..." LANG="..." CLASS="...">tekst... </DEL>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3. Preporuca se upotreba
ove naredbe umjesto naredbi S i STRIKE buduci da je vec sada podrzana u mnogim poznatim
pretrazivackim programima.
DFN
Opis
Naredbom DFN oznacava se termin koji se unutar dokumenta delinira. Tekst oznacen ovom
naredbom najcesce se prikazuje otisnut masnim, odnosno kosim i masnim slovima.
Obavezni argumenti
182
<DFN>tekst... </DFN>
Svi moguci argumenti
<DFN ID="..." LANG="..." CLASS="...">tekst... </DFN>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Ova je naredba uvrstena u jezik HTML standardom HTML 2, no mnogi pretrazivacki programi je
jos uvijek nisu implementirali, pa se koristi dosta rijetko.
DIR
Opis
Naredba DIR delinira nepobrojanu listu ciji se sadrzaj moze prikazati u vise stupaca na ekranu.
Obavezni argumenti
<DIR> </DIR>
Svi moguci argumenti
<DIR COMPACT> </DIR>
Elementi cija je upotreba dozvoljena unutar naredbe
<LI>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <DD> <FORM> <LI>
Napomene
Ovu naredbu prepoznaju tek rijetki pretrazivacki programi i interpretiraju je jednako kao u naredbi
UL koja je takoder namijenjena deliniranju nepobrojane liste. Naredba DIR uvrstena je u jezik
HTML od samog pocetka.
DL
Opis
Naredba DL namijenjena je kreiranju delinitne liste. Ocekuje se da se svaki element takve liste
sastoji od dva dijela koja se oznacavaju naredbama DT i DD.
183
Obavezni argumenti
<DL></DL>
Svi moguci argumenti
<DL COMPACT ID="..." LANG="..." CLASS="..."
CLEAR=left|right|all|"..."> </DL>
Elementi cija je upotreba dozvoljena unutar naredbe
<LH> <DT> <DD>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <DD> <FORM> <LI>
Napomene
Upotrebom argumenta COMPACT delinitna lista ce biti prikazana kao kompaktan skup pojmova i
delinicija, bez suvisnih praznina namijenjenih gralickom dotjerivanju stranice. Mnogi pretrazivacki
programi, medutim, ne podrzavaju ovaj argument. Sama naredba DL sastavni je dio jezika HTML
od njegove prve inacice, dok je uvrstavanje argumenata ID, LANG, CLASS i CLEAR predlozeno
tek za standard HTML 3.
DT
Opis
Naredbom DT oznacava se pojam koji se delinira unutar delinitne liste koja se kreira naredbom DL.
Obavezni argumenti
<DT>tekst...
Svi moguci argumenti
<DT>tekst... </DT>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<DL>
Napomene
Pojam oznacen ovom naredbom vecina pretrazivackih programa ispisuje masnim slovima i to uz
lijevi rub prozora. Upotreba zavrsne oznake </DT> je opcionalna. Ova naredba uvrstena je u jezik
HTML jos od njegove prve inacice.
EM
184
Opis
Naredba EM namijenjena je oznacavanju teksta unutar odlomka kojega zelite posebno naglasiti.
Najveci broj pretrazivackih programa tekst oznacen ovom oznakom ispisuje kosim slovima.
Obavezni argumenti
<EM>tekst... </EM>
Svi moguci argumenti
<EM ID="..." LANG="..." CLASS="...">tekst... </EM>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
Ova je naredba uvrstena u jezik HTML standardom HTML 2, dok je uvrstavanje argumenata ID,
LANG i CLASS predlozeno za standard HTML 3.
FIG
Opis
Naredba FIG je napredniji oblik naredbe IMG, a namijenjena je ugradivanju slika unutar HTML
dokumenata.
Obavezni argumenti
<FIG SRC="..."></FIG>
Svi moguci argumenti
<FIG SRC="..." ID="..." LANG="..." CLASS="..."
CLEAR=left|right|all|"..." NOFLOW MD="..."
ALIGN=left|right|center|justify|bleedleft|bleedright
WIDTH=vrijednost HEIGHT=vrijednost UNITS="..."
IMAGEMAP="..."></FIG>
Elementi cija je upotreba dozvoljena unutar naredbe
<OVERLAY> <CAPTION> <CREDIT>
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
185
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3. Njome bi se trebala
zamijeniti naredba IMG s posebnim naglaskom na mogucnost izrade slikovnih mapa bez potrebe za
pisanjem CGI programa koji sadrze kljucne koordinate slike.
FN
Opis
Naredba FN namijenjena je izradi lusnota unutar HTML dokumenta. Uz nju se obavezno mora
koristiti argument ID kojemu se dodjeljuje oznaka cilja hipertekstualne veze. Sidro za lusnotu
oznacava se naredbom A kojoj se dodjeljuje argument HREF. Kada korisnik klikne na sidro
hipertekstualne veze, na ekranu ce se pojaviti novi prozor sa sadrzajem teksta lusnote.
Obavezni argumenti
<FN ID="...">tekst... </FN>
Svi moguci argumenti
<FN ID="..." LANG="..." CLASS="...">tekst... </FN>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ovog elementa u jezik HTML predlozeno je za standard HTML 3. Za sada tek rijetki
pretrazivacki programi podrzavaju ovu naredbu, pa se ne preporuca njezino ucestalo koristenje.
FONT
Opis
Naredbom FONT moze se odrediti jedna od sedam razlicitih velicina pisma kojom ce se ispisivati
tekst unutar odlomka. Promjena se moze zadati konkretnom vrijednoscu, odnosno relativnim
pomakom u velicini pisma.
Obavezni argumenti
<FONT SIZE=[+|-]1|2|3|4|5|6|7>
Svi moguci argumenti
<FONT SIZE=[+|-]1|2|3|4|5|6|7>
Elementi cija je upotreba dozvoljena unutar naredbe
186
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Ova naredba je Netscapeovo prosirenje jezika HTML, a usko je povezana uz naredbu BASEFONT.
FORM
Opis
Naredbom FORM kreiraju se obrasci unutar HTML dokumenta. Pretrazivacki programi omogucuju
korisniku da upise odredene podatke u polja obrasca te da ih posalje CGI skriptu smjestenom na
URL adresi koja je dodijeljena argumentu ACTION. Pored ovog argumenta, uz naredbu za
kreiranje obrazaca moze se koristiti i argument METHOD kojim se odreduje protokol namijenjen
slanju podataka od korisnickog racunala do CGI programa. Unutar ove naredbe ocekuje se da ce se
barem jednom pojaviti naredba INPUT, SELECT ili TEXTAREA.
Obavezni argumenti
<FORM></FORM>
Svi moguci argumenti
<FORM ACTION="..." METHOD=GET|POST ENCTYPE="..." SCRIPT="...">
</FORM>
Elementi cija je upotreba dozvoljena unutar naredbe
<H1> <H2> <H3> <H4> <H5> <H6> <P> <UL> <OL> <DIR> <MENU> <DL>
<PRE> <BLOCKQUOTE> <ISINDEX> <HR> <ADDRESS> <INPUT> <SELECT>
<TEXTAREA>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <DD> <LI>
Napomene
Ova naredba uvedena je u jezik HTML standardom HTML 2. Uvrstavanje argumenta SCRIPT u
jezik predlozena je za standard HTML 3, a njime bi se odredivala URL adresa skripta pisanog
jednostavnim jezikom koji bi se prenosio do racunala s pretrazivackim programom i tamo
izvrsavao. Time bi se izbjegla upotreba argumenta ACTION.
H1
Opis
187
Naredba H1 je namijenjena oznacavanju naslova prve razine unutar HTML dokumenta.
Obavezni argumenti
<H1>tekst... </H1>
Svi moguci argumenti
<H1 ID="name" LANG="..." CLASS="..."
ALIGN=left|center|right|justify CLEAR=left|right|all|"..."
SEQNUM=nnn SKIP=nnn DINGBAT=naziv SRC="..." MD="..." NOWRAP>tekst...
</H1>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <FORM>
Napomene
Ova je naredba podrzana u jeziku HTML jos od njegove prve sluzbene inacice. Uvrstavanje svih
argumenata koji se mogu koristiti s naredbom predlozeno je za standard HTML 3. Naslovi se u
pretrazivackim programima prikazuju ispisani vecim pismom, masnijim slovima i odvojeno od
okolnog teksta.
H2
Opis
Naredba H2 je namijenjena oznacavanju naslova druge razine unutar HTML dokumenta.
Obavezni argumenti
<H2>tekst... </H2>
Svi moguci argumenti
<H2 ID="name" LANG="..." CLASS="..."
ALIGN=left|center|right|justify CLEAR=left|right|all|"..."
SEQNUM=nnn SKIP=nnn DINGBAT=naziv SRC="..." MD="..." NOWRAP>tekst...
</H2>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <FORM>
Napomene
Ova je naredba podrzana u jeziku HTML jos od njegove prve sluzbene inacice. Uvrstavanje svih
argumenata koji se mogu koristiti s naredbom predlozeno je za standard HTML 3. Naslovi se u
188
pretrazivackim programima prikazuju ispisani vecim pismom, masnijim slovima i odvojeno od
okolnog teksta.
H3
Opis
Naredba H3 je namijenjena oznacavanju naslova trece razine unutar HTML dokumenta.
Obavezni argumenti
<H3>tekst... </H3>
Svi moguci argumenti
<H3 ID="name" LANG="..." CLASS="..."
ALIGN=left|center|right|justify CLEAR=left|right|all|"..."
SEQNUM=nnn SKIP=nnn DINGBAT=naziv SRC="..." MD="..." NOWRAP>tekst...
</H3>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <FORM>
Napomene
Ova je naredba podrzana u jeziku HTML jos od njegove prve sluzbene inacice. Uvrstavanje svih
argumenata koji se mogu koristiti s naredbom predlozeno je za standard HTML 3. Naslovi se u
pretrazivackim programima prikazuju ispisani vecim pismom, masnijim slovima i odvojeno od
okolnog teksta.
H4
Opis
Naredba H4 je namijenjena oznacavanju naslova cetvrte razine unutar HTML dokumenta.
Obavezni argumenti
<H3>tekst... </H3>
Svi moguci argumenti
<H3 ID="name" LANG="..." CLASS="..."
ALIGN=left|center|right|justify CLEAR=left|right|all|"..."
189
SEQNUM=nnn SKIP=nnn DINGBAT=naziv SRC="..." MD="..." NOWRAP>tekst...
</H3>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <FORM>
Napomene
Ova je naredba podrzana u jeziku HTML jos od njegove prve sluzbene inacice. Uvrstavanje svih
argumenata koji se mogu koristiti s naredbom predlozeno je za standard HTML 3. Naslovi se u
pretrazivackim programima prikazuju ispisani vecim pismom, masnijim slovima i odvojeno od
okolnog teksta.
H5
Opis
Naredba H5 je namijenjena oznacavanju naslova pete razine unutar HTML dokumenta.
Obavezni argumenti
<H5>tekst... </H5>
Svi moguci argumenti
<H5 ID="name" LANG="..." CLASS="..."
ALIGN=left|center|right|justify CLEAR=left|right|all|"..."
SEQNUM=nnn SKIP=nnn DINGBAT=naziv SRC="..." MD="..." NOWRAP>tekst...
</H5>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <FORM>
Napomene
Ova je naredba podrzana u jeziku HTML jos od njegove prve sluzbene inacice. Uvrstavanje svih
argumenata koji se mogu koristiti s naredbom predlozeno je za standard HTML 3. Naslovi se u
pretrazivackim programima prikazuju ispisani vecim pismom, masnijim slovima i odvojeno od
okolnog teksta.
H6
190
Opis
Naredba H6 je namijenjena oznacavanju naslova seste razine unutar HTML dokumenta.
Obavezni argumenti
<H6>tekst... </H6>
Svi moguci argumenti
<H6 ID="name" LANG="..." CLASS="..."
ALIGN=left|center|right|justify CLEAR=left|right|all|"..."
SEQNUM=nnn SKIP=nnn DINGBAT=naziv SRC="..." MD="..." NOWRAP>tekst...
</H6>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <FORM>
Napomene
Ova je naredba podrzana u jeziku HTML jos od njegove prve sluzbene inacice. Uvrstavanje svih
argumenata koji se mogu koristiti s naredbom predlozeno je za standard HTML 3. Naslovi se u
pretrazivackim programima prikazuju ispisani vecim pismom, masnijim slovima i odvojeno od
okolnog teksta.
HEAD
Opis
Naredbom HEAD se oznacava zaglavlje HTML dokumenta koje sadrzi osnovne podatke o Web
stranici poput njezinog naslova. Elementi koji su obuhvaceni ovom oznakom nece biti prikazani u
prozoru pretrazivackog programa. Sav tekst koji se vidi u pretrazivackom programu sadrzan je u
tijelu dokumenta koje se oznacava naredbom BODY.
Obavezni argumenti
-
Svi moguci argumenti
<HEAD> </HEAD>
Elementi cija je upotreba dozvoljena unutar naredbe
<TITLE> <ISINDEX> <BASE> <META> <NEXTID> <LINK>
Elementi unutar kojih je dozvoljena upotreba naredbe
<HTML>
Napomene
191
Ova naredba je uvedena u jezik HTML standardom HTML 2, a njezina upotreba je trenutno
opcionalna. Preporuka je, medutim, da se ova naredba koristi u svakom HTML dokumentu.
HPn
Opis
Naredbom HPn, gdje je n neki broj veci ili jednak jedinici, oznacava se tekst koji ce biti prikazan
jednim od nekoliko posebno deliniranih stilova u pojedinom pretrazivackom programu.
Obavezni argumenti
<HPn>tekst... </HPn>
Svi moguci argumenti
<HPn>tekst... </HPn>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Standard HTML 2 izbacio je ovu naredbu iz upotrebe buduci da je prilicno beskorisna, pa ju danas
gotovo nitko ne koristi.
HR
Opis
Naredba HR je namijenjena kreiranju vodoravne linije unutar HTML dokumenta.Vodoravne linije
posebno su elektne kod podjele dokumenta na logicke cjeline.
Obavezni argumenti
<HR>
Svi moguci argumenti
<HR ID="..." CLASS="..." CLEAR=left|right|all|"..." SRC="..."
MD="..." SIZE=broj WIDTH=broj|percent ALIGN=left|right|center
NOSHADE>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
192
<BLOCKQUOTE> <BODY> <FORM> <PRE>
Napomene
Ova naredba je podrzana u jeziku HTML jos od njegove prve inacice, dok je uvrstavanje
argumenata ID, CLASS, CLEAR, SRC i MD predlozeno za standard HTML 3. Argumenti SIZE,
WIDTH, ALIGN i NOSHADE su Netscapeova prosirenja jeziku HTML.
HTML
Opis
Naredba HTML namijenjena je oznacavanju cijelog sadrzaja HTML dokumenta. Svi elementi
dokumenta, ukljucivsi zaglavlje i tijelo, moraju biti obuhvaceni ovom naredbom.
Obavezni argumenti
-
Svi moguci argumenti
<HTML> </HTML>
Elementi cija je upotreba dozvoljena unutar naredbe
<HEAD> <BODY>
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Ova je naredba uvedena u jezik HTML standardom HTML 2, a njezina upotreba je trenutno
opcionalna. Koristenje naredbe HTML se, medutim, preporuca kod svakog HTML dokumenta.
I
Opis
Naredbom I se oznacava tekst koji ce se u pretrazivackom programu prikazati ispisan kosim
slovima.
Obavezni argumenti
<I>tekst... </I>
Svi moguci argumenti
<I ID="..." LANG="..." CLASS="...">tekst... </I>
Elementi cija je upotreba dozvoljena unutar naredbe
193
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
Ova naredba uvedena je u jezik HTML vec njegovom prvom inacicom, dok je uvrstavanje
argumenata ID, LANG i CLASS predlozeno za standard HTML 3.
IMG
Opis
Naredbom IMG omoguceno je ugradivanje slika unutar HTML dokumenta. Argumentom ALT
oznacava se tekst koji ce umjesto slike biti prikazan u pretrazivackim programima s tekstualnim
korisnickim suceljem. URL adresa datoteke koja sadrzi sliku namijenjenu prikazivanju unutar Web
stranice dodjeljuje se argumentu SRC. Argumentom ISMAP oznacava se crtez koji predstavlja
slikovnu mapu.
Obavezni argumenti
<IMG SRC="...">
Svi moguci argumenti
<IMG SRC="..." ALT="..." ISMAP ID="..." LANG="..." CLASS="..."
ALIGN=bottom|middle|top|left|right|texttop|absmiddle|baseline|
absbottom HEIGHT=vrijednost WIDTH=vrijednost UNITS="..."
BORDER=vrijednost LOWSRC="..." HSPACE=vrijednost
VSPACE=vrijednost>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <SAMP> <STRONG> <TT> <VAR>
Napomene
Argumenti BORDER, HEIGHT, WIDTH, HSPACE, VSPACE i LOWSRC su Netscapeova prosirenja
jeziku HTML, dok je uvrstavanje argumenata ID, LANG, CLASS i MD predlozeno za standard
HTML 3. Sama naredba je uvrstena u jezik jos od njegove prve inacice.
INPUT
194
Opis
Naredba INPUT je namijenjena ugradivanju polja unutar obrasca u kojemu korisnik moze upisati
neke svoje podatke. Argumentom NAME delinira se simbolicko ime polja koje ce posluziti kao
prijenosna varijabla za upisani podatak prilikom prenosenja popunjenog obrasca CGI programu.
Tip polja odreduje se argumentom TYPE, dok se argumentu VALUE dodjeljuje sugerirani podatak
za upis u polje.
Obavezni argumenti
<INPUT>
Svi moguci argumenti
<INPUT TYPE=type ID="..." LANG="..." CLASS="..." NAME="..."
VALUE="..." DISABLED ERROR="..." SRC="..." MD="..." CHECKED
SIZE="..." MAXLENGTH="..." MIN=broj MAX=broj
ALIGN=top|middle|bottom|left|right ACCEPT="...">
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<FORM>
Napomene
Ova je naredba uvedena u jezik HTML standardom HTML 2, a uvrstavanje argumenata ID, LANG,
CLASS, DISABLED, ERROR, MIN, MAX, ACCEPT i MD predlozeno je tek za standard HTML 3..
INS
Opis
Naredbom INS oznacava se tekst koji bi trebao biti naknadno ubacen u sadrzaj dokumenta, poput
neke promjene koja se uvodi u sluzbenom dokumentu.
Obavezni argumenti
<INS>tekst... </INS>
Svi moguci argumenti
<INS ID="..." LANG="..." CLASS="...">tekst... </INS>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je standardom HTML 3.
195
ISINDEX
Opis
Naredba ISINDEX koristi se kao jednostavan obrazac unutar HTML dokumenta u kojemu korisnik
upisuje kljucnu rijec po kojoj zeli provesti nekakvo pretrazivanje. Ako je naredba smjestena u
zaglavlju dokumenta, cijela Web stranica zapravo predstavlja kazalo u kojemu se moze
pretrazivati.
Obavezni argumenti
<ISINDEX>
Svi moguci argumenti
<ISINDEX ACTION="..." PROMPT="...">
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <DD> <FORM> <HEAD> <LI>
Napomene
Ova je naredba uvrstena u jezik HTML jos od njegovih samih pocetaka. Argument PROMPT je
Netscapeovo prosirenje jezika HTML.
KBD
Opis
Naredba KBD namijenjena je oznacavanju teksta koji se u pretrazivackom programu mora prikazati
kao niz znakova upisan na tipkovnici. Vecina pretrazivackih znakova tekst obuhvacen ovom
naredbom prikazuje neproporcionalnim pismom.
Obavezni argumenti
<KBD>tekst... </KBD>
Svi moguci argumenti
<KBD ID="..." LANG="..." CLASS="...">tekst... </KBD>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
196
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
Ova je naredba uvedena u jezik HTML standardom HTML 2, dok je uvrstavanje argumenata ID,
LANG i CLASS predlozeno tek za standard HTML 3.
LANG
Opis
Tekst oznacen naredbom LANG bit ce prikazan slovima iz standardnog skupa znakova unutar
odlomka koji je ispisan po nekoj posebnoj kodnoj stranici.
Obavezni argumenti
<LANG>tekst... </LANG>
Svi moguci argumenti
<LANG ID="..." CLASS="...">tekst... </LANG>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3.
LH
Opis
Naredbom LH oznacava se naslov za delinitnu, pobrojanu ili nepobrojanu listu. Upotreba ove
naredbe ne preporuca se kod rada s ugnjezdenim listama.
Obavezni argumenti
<LH>tekst... </LH>
Svi moguci argumenti
<LH ID="..." LANG="..." CLASS="...">tekst... </LH>
Elementi cija je upotreba dozvoljena unutar naredbe
-
197
Elementi unutar kojih je dozvoljena upotreba naredbe
<DL> <OL> <UL>
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3.
LI
Opis
Naredbom LI oznacava se svaki pojedini element pobrojane ili nepobrojane liste.
Obavezni argumenti
<LI>tekst...
Svi moguci argumenti
Za nepobrojanu listu: <LI TYPE=disk|circle|square>tekst...</LI>
Za pobrojanu listu: <LI TYPE=A|a|I|i|1 VALUE=n>tekst...</LI>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I> <P> <UL> <OL> <DIR> <MENU> <DL> <PRE> <BLOCKQUOTE> <FORM>
<ISINDEX>
Elementi unutar kojih je dozvoljena upotreba naredbe
<DIR> <MENU> <OL> <UL>
Napomene
Ova je naredba uvrstena u jezik HTML jos od njegove prve inacice. Argumenti TYPE i VALUE su
Netscapeova prosirenja jezika HTML.
LINK
Opis
Naredbom LINK oznacava se uzajamna povezanost dvaju dokumenata na Webu. Obavezna je
upotreba argumenta HREF kojemu se dodjeljuje URL adresa stranice s kojom je dokument povezan
nacinom cija je oznaka pridruzena argumentu REL. Ova se naredba mora nalaziti unutar zaglavlja
dokumenta.
Obavezni argumenti
<LINK HREF="..." >
Svi moguci argumenti
198
<LINK HREF="..." REL="..." REV="..." URN="..." TITLE="..."
METHODS="..." >
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<HEAD>
Napomene
Naredba LINK uvrstena je u jezik HTML jos s pojavom njegove prve inacice, no ne koristi se bas
cesto buduci da nema neku prakticnu primjenu.
LISTING
Opis
Naredbom LISTING oznacava se dio dokumenta koji predstavlja ispis u nekom programskom
jeziku. Vecina pretrazivackih programa ce tekst oznacen ovom naredbom prikazati
neproporcionalnim pismom. Svi prijelazi teksta u novi redak bit ce zapamceni, sto znaci da
unutar ove naredbe nije potrebno koristiti oznaku BR.
Obavezni argumenti
<LISTING>tekst... </LISTING>
Svi moguci argumenti
<LISTING WIDTH="..." >tekst... </LISTING>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <HR> <BR> <TT> <B> <I> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR>
<CITE>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <DD> <FORM> <LI>
Napomene
Ova je naredba uvedena u jezik HTML njegovom prvom inacicom, a s vremenom je zamijenjena
naredbom PRE. Standardom HTML 2 naredba LISTING je sluzbeno izbacena iz upotrebe, no neki
pretrazivacki programi je jos uvijek podrzavaju, vjerojatno zbog kompatibilnosti sa starijim
dokumentima.
MENU
Opis
199
Naredbom MENU se delinira nepobrojana lista u kojoj svaki element moze, ali i ne mora biti
oznacen sa crnom tockom, kvadraticem ili nekim drugim geometrijskim likom. Lista kreirana
naredbom MENU razlikuje se od liste delinirane s UL utoliko sto je njezin sadrzaj lormatiran
kompaktnije.
Obavezni argumenti
<MENU></MENU>
Svi moguci argumenti
<MENU COMPACT> </MENU>
Elementi cija je upotreba dozvoljena unutar naredbe
<LI>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <DD> <FORM> <LI>
Napomene
Ova je naredba uvrstena u jezik HTML vec s njegovom prvom inacicom, a standardom HTML 3 se
predlaze njezino sluzbeno ukidanje.
META
Opis
Naredbom META se unutar zaglavlja dokumenta ugraduju podaci koji nisu delinirani drugim
HTML elementima, koji najcesce ovise o tipu Web posluzitelja na kojemu se nalazi dokument.
Argumentom CONTENT odreduje se tip posednog podatka koji se ugraduje ovom naredbom.
Obavezni argumenti
<META CONTENT="..." >
Svi moguci argumenti
<META HTTP-EQUIV="..." NAME="..." CONTENT="..." URL="..." >
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<HEAD>
Napomene
Ova naredba je uvrstena u jezik HTML standardom HTML 2, no jos uvijek je njezina upotreba vrlo
rijetka.
200
NEXTID
Opis
Naredbom NEXTID se unutar zaglavlja dokumenta odreduje sljedeci objekt (najcesce se radi o jos
jednom HTML dokumentu) kojega ce automatizirani hipertekstualni pretrazivaci ucitati u
korisnikovo racunalo.
Obavezni argumenti
<NEXTID N="..." >
Svi moguci argumenti
<NEXTID N="..." >
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<HEAD>
Napomene
Ova naredba podrzana je u jeziku HTML jos od njegovih samih pocetaka.
NOBR
Opis
Naredba NOBR je namijenjena oznacavanju dijela dokumenta unutar kojega se ne smije pojaviti niti
jedan prelazak teksta u novi red.
Obavezni argumenti
<NBOR>tekst... </NOBR>
Svi moguci argumenti
<NOBR>tekst... </NOBR>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Ova naredba je jedno od mnogih Netscapeovih prosirenja jezika HTML.
201
NOTE
Opis
Naredbom NOTE oznacava se tekst koji se u prozoru pretrazivackog programa mora prikazati kao
dodatna napomena uz dokument. Argumentu SRC moze se dodijeliti ime datoteke u kojoj je
sadrzana slika koja ce biti smjestena ispred napomene.
Obavezni argumenti
<NOTE>tekst... </NOTE>
Svi moguci argumenti
<NOTE ID="..." LANG="..." CLASS="..." CLEAR=left|right|all|"..."
SRC="..." MD="..."</NOTE>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3.
OL
Opis
Naredbom OL delinira se pobrojana lista u kojoj je svaki element oznacen rednim brojem.
Obavezni argumenti
<OL></OL>
Svi moguci argumenti
<OL COMPACT ID="..." LANG="..." CLASS="..."
CLEAR=left|right|all|"..." CONTINUE SEQNUM=vrijednost
TYPE=A|a|I|i|1></OL>
Elementi cija je upotreba dozvoljena unutar naredbe
<LH> <LI>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <DD> <FORM> <LI>
Napomene
Ova je naredba podrzana u jeziku HTML vec u njegovoj prvoj inacici, dok je uvrstavanje
argumenata ID, LANG, CLASS, SEQNUM i CLEAR predlozeno tek za standard HTML 3. Argument
TYPE je Netscapeovo prosirenje jezika HTML.
202
OPTION
Opis
Naredbom OPTION oznacava se jedan od mogucih izbora u polju obrasca koje je delinirano
oznakom SELECT. Upotrebom argumenta SELECTED korisniku se sugerira izbor mogucnosti
oznacene ovom naredbom. Ako je u naredbi SELECT prisutan argument MULTIPLE, moci cete
argumentom SELECTED oznaciti vise od jedne izborne opcije. Ukoliko se s ovom naredbom
upotrijebi argument DISABLED, opcija ce biti prikazana u prozoru pretrazivackog programa, no
korisnik ju nece moci odabrati.
Obavezni argumenti
<OPTION>tekst...
Svi moguci argumenti
<OPTION SELECTED DISABLED VALUE="..." ID="..." LANG="..."
CLASS="..." ERROR="..." SHAPE="..." >tekst... </OPTION>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<SELECT>
Napomene
Ova naredba je uvedena u jezik HTML standardom HTML 2, dok je uvrstavanje argumenata ID,
LANG, CLASS, ERROR i SHAPE predlozeno tek za standard HTML 3. Argumentom ERROR moze
se odrediti tekst koji ce se pojaviti na ekranu ukoliko korisnik pogresno obavi svoj odabir, dok je
argument SHAPE namijenjen deliniranju geometrijskog lika koji ce predstavljati dio slike navedene
argumentom SRC na kojega korisnik moze kliknuti kako bi odabrao neku opciju.
OVERLAY
Opis
Naredba OVERLAY omogucava postavljanje novih slika u HTML dokument koje ce biti
postavljene preko vec ugradenih slika naredbom FIG. Argumenti X i Y predstavljaju koordinate u
staroj slici na kojima ce biti smjesten gornji lijevi rub nove slike.
Obavezni argumenti
<OVERLAY SRC="...">
Svi moguci argumenti
203
<OVERLAY SRC="..." MD="..." UNITS=pixels|en X=vrijednost
Y=vrijednost WIDTH=vrijednost HEIGHT=vrijednost IMAGEMAP="...">
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<FIG>
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3.
P
Opis
Naredbom P oznacava se kraj odlomka unutar HTML dokumenta. Mnoge druge oznake, poput
naslova, citata i raznih tipova listi, takoder ce uzrokovati razdvajanje tekstualnih odlomaka.
Obavezni argumenti
<P>tekst...
Svi moguci argumenti
<P ID="name" ALIGN=center|left|right|justify|indent WRAP=on|off
NOWRAP CLEAR=left|right|all|"..." LANG="..." CLASS="...">tekst... </P>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<ADDRESS> <BLOCKQUOTE> <BODY> <DD> <FORM> <LI>
Napomene
Ova je naredba uvrstena u jezik HTML vec u njegovoj prvoj inacici, dok je zavrsna oznaka </P>,
cija je upotreba opcionalna, uvedena tek standardom HTML 2. Uvrstavanje argumenata ID, NAME,
ALIGN, WRAP i NOWRAP predlozeno je za standard HTML 3.
PERSON
Opis
Naredbom PERSON oznacava se tekst koji se u prozoru pretrazivackog programa mora prikazati
kao ime neke osobe.
204
Obavezni argumenti
<PERSON>tekst... </PERSON>
Svi moguci argumenti
<PERSON ID="..." LANG="..." CLASS="...">tekst... </PERSON>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3.
PLAINTEXT
Opis
Naredba PLAINTEXT je namijenjena oznacavanju teksta unutar kojega ce biti zapamceni svi
prijelazi u novi red i visestruki razmaci. Tekst obuhvacen ovom naredbom smije sadrzavati bilo
koje HTML oznake, buduci da ce ih pretrazivacki programi ignorirati, odnosno prikazati kao dio
obicnog teksta.
Obavezni argumenti
<PLAINTEXT>tekst... </PLAINTEXT>
Svi moguci argumenti
<PLAINTEXT WIDTH="..." >tekst... </PLAINTEXT>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Vecina pretrazivackih programa ce tekst oznacen ovom naredbom ispisati neproporcionalnim
pismom. Sama je naredba uvrstena u jezik HTML jos njegovom prvom inacicom, dok je
standardom HTML 2 predlozeno njezino sluzbeno ukidanje i zamjenjivanje naredbom PRE.
PRE
Opis
205
Tekst obuhvacen naredbom PRE bit ce u prozoru pretrazivackog programa prikazan
neproporcionalnim pismom, zajedno sa svim prijelazima u novi red i visestrukim razmacima.
HTML naredbe sadrzane u tom tekstu, medutim, nece biti ignorirane, pa ih mozete koristiti za
daljnje lormatiranje ispisa.
Obavezni argumenti
<PRE>tekst... </PRE>
Svi moguci argumenti
<PRE WIDTH="..." ID="..." LANG="..." CLASS="..."
CLEAR=left|right|all|"..." >tekst... </PRE>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <HR> <BR> <TT> <B> <I> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR>
<CITE>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <DD> <FORM> <LI>
Napomene
Ova naredba je uvedena u jezik HTML standardom HTML 2. Standardom HTML 3 predlozeno je
uvrstavanje argumenata ID, LANG, CLASS i CLEAR, te naredbe TAB koja se moze iskoristiti
unutar teksta kao oznaka za tabulator. Argument WIDTH namijenjen je odredivanju najveceg broja
slova koji se moze pojaviti u jednom retku teksta, no kako se koristi vrlo rijetko, standard HTML 3
predlaze njegovo ukidanje.
Q
Opis
Naredba Q namijenjena je oznacavanju teksta koji ce u pretrazivackom programu biti prikazan kao
kratak citat smjesten unutar odlomka. Pretrazivacki programi koji prepoznaju ovu naredbu, kratke
citate smjestaju unutar navodnih znakova.
Obavezni argumenti
<Q>tekst... </Q>
Svi moguci argumenti
<Q ID="..." LANG="..." CLASS="...">tekst... </Q>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3.
206
S
Opis
Naredbom S oznacava se tekst koji se u prozoru pretrazivackog programa mora pojaviti precrtan.
Obavezni argumenti
<S>tekst... </S>
Svi moguci argumenti
<S ID="..." LANG="..." CLASS="...">tekst... </S>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je standardom HTML 3, kako bi se zamijenila
oznaka STRIKE, uvedena standardom HTML 2.
SAMP
Opis
Naredba SAMP namijenjena je oznacavanju teksta koji se u prozoru pretrazivackog programa mora
prikazati kao niz znakova ili rijeci. Vecina pretrazivackih programa prikazat ce tekst obuhvacen
ovom naredbom neproporcionalnim pismom.
Obavezni argumenti
<SAMP>tekst... </SAMP>
Svi moguci argumenti
<SAMP ID="..." LANG="..." CLASS="...">tekst... </SAMP>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B><I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
207
Ova je naredba uvedena u jezik HTML standardom HTML 2, dok je uvrstavanje argumenata ID,
LANG i CLASS predlozeno za standard HTML 3.
SELECT
Opis
Naredbom SELECT se unutar obrasca delinira polje kojim se korisniku omogucuje odabir jedne ili
vise ponudenih opcija. Ocekuje se da ce se unutar dijela dokumenta koji je obuhvacen ovom
naredbom nalaziti barem jedna oznaka OPTION. Argumentom SIZE odreduje se broj opcija koji
ce biti vidljiv u prozoru pretrazivackog programa. Ukoliko je prisutan i argument MULTIPLE,
korisniku ce biti omogucen visestruki izbor ponudenih opcija.
Obavezni argumenti
<SELECT NAME="...">tekst... </SELECT>
Svi moguci argumenti
<SELECT NAME="..." SIZE=vrijednost MULTIPLE ID="..." LANG="..."
CLASS="..." ALIGN=top|middle|bottom|left|right DISABLED
ERROR="..." SRC="..." MD="..." WIDTH=vrijednost HEIGHT=vrijednost
UNITS=pixels|em>tekst... </SELECT>
Elementi cija je upotreba dozvoljena unutar naredbe
<OPTION>
Elementi unutar kojih je dozvoljena upotreba naredbe
<FORM>
Napomene
Ova naredba je uvedena u jezik HTML standardom HTML 2, dok je uvrstavanje argumenata ID,
LANG, CLASS, ALIGN, DISABLED, ERROR, SRC, MD, WIDTH, HEIGHT i UNITS predlozeno
tek za standard HTML 3. Argumentu ERROR moze se dodijeliti tekst koji ce se pojaviti na ekranu
ukoliko korisnik pogresno obavi svoj odabir, dok se argumentom SRC moze odrediti URL adresa
slike koja ce biti prikazana umjesto opcija koje se oznacavaju naredbom OPTION. Ovisno o dijelu
slike na kojega ce korisnik kliknuti misem bit ce obavljen odabir neke ponudene opcije.
SMALL
Opis
Naredba SMALL namijenjena je oznacavanju teksta koji ce u prozoru pretrazivackog programa biti
prikazan pismom manje velicine od uobicajene.
208
Obavezni argumenti
<SMALL>tekst... </SMALL>
Svi moguci argumenti
<SMALL ID="..." LANG="..." CLASS="...">tekst... </SMALL>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3.
STRIKE
Opis
Naredbom S oznacava se tekst koji se u prozoru pretrazivackog programa mora pojaviti precrtan.
Obavezni argumenti
<STRIKE>tekst... </STRIKE>
Svi moguci argumenti
<STRIKE>tekst... </STRIKE>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
Ova je naredba uvedena u jezik HTML standardom HTML 2, no njezino je ukidanje predlozeno
vec u sljedecoj inacici jezika, gdje se predlaze njezino zamjenjivanje kracom naredbom S.
STRONG
Opis
209
Naredbom STRONG oznacava se tekst koji ce u prozoru pretrazivackog programa biti jako
naglasen. Vecina pretrazivackih programa ce tekst obuhvacen ovom naredbom ispisati masnim
slovima.
Obavezni argumenti
<STRONG>tekst... </STRONG>
Svi moguci argumenti
<STRONG ID="..." LANG="..." CLASS="...">tekst... </STRONG>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
Napomene
Ova je naredba uvedena u jezik HTML standardom HTML 2, dok je uvrstavanje argumenata ID,
LANG i CLASS predlozeno tek za standard HTML 3.
SUB
Opis
Naredba SUB je namijenjena oznacavanju teksta koji se prikazuje ispisan nesto nize od
uobicajenog, a najcesce se koristi kod zapisivanja indeksa uz neke oznake.
Obavezni argumenti
<SUB>tekst... </SUB>
Svi moguci argumenti
<SUB ID="..." LANG="..." CLASS="...">tekst... </SUB>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Ova je naredba uvedena u jezik HTML standardom HTML 2, no tada jos nije bilo predlozeno
smanjivanje velicine pisma kojim se ispisuje tekst kojega obuhvaca. Ta je promjena uvedena
standardom HTML 3, gdje se predlaze i uvrstavanje argumenata ID, LANG i CLASS.
210
SUP
Opis
Naredba SUP je namijenjena oznacavanju teksta koji se prikazuje ispisan nesto vise od
uobicajenog, a najcesce se koristi kod zapisivanja eksponenata ili oznake za stupnjeve.
Obavezni argumenti
<SUP>tekst... </SUP>
Svi moguci argumenti
<SUP ID="..." LANG="..." CLASS="...">tekst... </SUP>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Ova je naredba uvedena u jezik HTML standardom HTML 2, kada jos nije bilo predlozeno
smanjivanje velicine pisma kojim se ispisuje tekst kojega obuhvaca. Ta je promjena uvedena
standardom HTML 3, gdje se predlaze i uvrstavanje argumenata ID, LANG i CLASS.
TABLE
Opis
Naredba TABLE je namijenjena kreiranju tablica unutar HTML dokumenta. U dijelu dokumenta
koji je obuhvacen ovom naredbom moze se nalaziti oznaka CAPTION koja je namijenjena
deliniranju naslova tablice. Ocekuje se da ce se unutar naredba TABLE nalaziti barem jedna
naredba TR kojom se oznacava svaki pojedini redak u tablici. Pojedino polje tablice moze se
oznaciti naredbom TD ili TH, ovisno o tome sadrzi li ono obican podatak ili naslov za neki redak ili
stupac u tablici.
Obavezni argumenti
<TABLE></TABLE>
Svi moguci argumenti
<TABLE ID="..." LANG="..." CLASS="..." CLEAR=left|right|all|"..."
NOFLOW ALIGN=left|right|center|justify|bleedleft|bleedright
UNITS=en|relative|pixels COLSPEC="..." DP="..." WIDTH=vrijednost
BORDER=vrijednost NOWRAP></TABLE>
Elementi cija je upotreba dozvoljena unutar naredbe
<CAPTION> <TR> <TABLE>
211
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3. Argumenti
CELLSPACING i CELLPADING su Netscapeova prosirenja jezika HTML.
TD
Opis
Naredba TD je namijenjena oznacavanju svakog pojedinog polja unutar tablice.
Obavezni argumenti
<TD>
Svi moguci argumenti
<TD ID="..." LANG="..." CLASS="..." COLSPAN=vrijednost
ROWSPAN=vrijednost ALIGN=left|right|center|justify|decimal
DP="..." VALIGN=top|middle|bottom|baseline NOWRAP AXIS="..."
AXES="..." WIDTH=vrijednost>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<TABLE>
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3, dok je argument
WIDHT Netscapeovo prosirenje jezika. Upotreba zavrsne oznake </TD> je opcionalna, buduci da
ce sljedece polje u tablici biti otvoreno cim pretrazivacki program naide na novu naredbu TD ili
oznaku za kraj retka.
TEXTAREA
Opis
Naredbom TEXTAREA omoguceno je kreiranje tekstualnih prozora unutar obrasca. Sav tekst koji
je obuhvacen ovom naredbom bit ce automatski upisan u tekstualni prozor, cime se korisniku
sugerira sto moze unijeti kao podatak. Ukoliko se izmedu pocetne i zavrsne oznake ne navede
nikakav tekst, na ekranu ce se pojaviti prazan tekstualni prozor. Argumentima ROWS i COLS
odreduje se velicina prozora u retcima, odnosno broju slova koji se moze smjestiti u jednom retku.
212
Obavezni argumenti
<TEXTAREA NAME="..." ROWS="..." COLS="..."> </TEXTAREA>
Svi moguci argumenti
<TEXTAREA NAME="..." ROWS="..." COLS="..." ID="..." LANG="..."
CLASS="..." ALIGN=top|middle|bottom|left|right DISABLED
ERROR="...">tekst... </TEXTAREA>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<FORM>
Napomene
Ova je naredba uvedena u jezik HTML standardom HTML 2, dok je uvrstavanje argumenata ID,
LANG, CLASS, ALIGN, DISABLED, ERROR predlozeno tek za standard HTML 3. Argumentom
ERROR delinira se tekst koji ce se pojaviti u prozoru pretrazivackog programa ukoliko korisnik
neispravno popuni tekstualni prozor.
TH
Opis
Naredbom TH oznacava se polje u tablici u kojem je sadrzan naslov nekog retka ili stupca te
tablice. Vecina pretrazivackih programa ce tekst obuhvacen ovom naredbom prikazati masnim
slovima.
Obavezni argumenti
<TH>
Svi moguci argumenti
<TH ID="..." LANG="..." CLASS="..." COLSPAN=vrijednost
ROWSPAN=vrijednost ALIGN=left|right|center|justify|decimal
DP="..." VALIGN=top|middle|bottom|baseline NOWRAP AXIS="..."
AXES="..." WIDTH=vrijednost>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<TABLE>
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3, dok je argument
WIDHT Netscapeovo prosirenje jezika. Upotreba zavrsne oznake </TH> je opcionalna, buduci da
ce sljedece polje u tablici biti otvoreno cim pretrazivacki program naide na novu naredbu TH, TD
ili oznaku za kraj retka.
213
TITLE
Opis
Naredbom TITLE se unutar zaglavlja HTML dokumenta delinira naslov Web stranice. Vecina
pretrazivackih programa ce naslov obuhvacen ovom naredbom prikazati u gornjem okviru svojeg
prozora. Zbog toga bi naslovi Web stranica morali biti sto kraci ali i dovoljno inlormativni kako bi
citatelju dali do znanja sto je sadrzano u dokumentu.
Obavezni argumenti
<TITLE>tekst... </TITLE>
Svi moguci argumenti
<TITLE>tekst... </TITLE>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<HEAD>
Napomene
Ova je naredba uvrstena u jezik HTML jos od njegove prve inacice. Neki pretrazivacki programi ce
skratiti naslov dokumenta ukoliko ga ne mogu cijelog smjestiti u okvir prozora.
TR
Opis
Naredba TR je namijenjena kreiranju retka unutar tablice. Ocekuje se da ce se unutar ove naredbe
nalaziti barem jedna oznaka TH ili TD.
Obavezni argumenti
<TR>
Svi moguci argumenti
<TR ID="..." LANG="..." CLASS="..."
ALIGN=left|right|center|justify|decimal DP="..."
VALIGN=top|middle|bottom|baseline NOWRAP>
Elementi cija je upotreba dozvoljena unutar naredbe
<TD> <TH>
Elementi unutar kojih je dozvoljena upotreba naredbe
<TABLE>
214
Napomene
Uvrstavanje ove naredbe u jezik HTML predlozeno je za standard HTML 3, kojim se ujedno i
predlaze opcionalna upotreba pocetne oznake za prvi redak u tablici. Trenutno je opcionalna i
upotreba zavrsne oznake kod svakog retka, buduci da se zna da novi redak zapocinje sljedecom
oznakom TR ili ga nema ukoliko se naide na zavrsnu oznaku za tablicu.
TT
Opis
Naredba TT namijenjena je oznacavanju teksta koji se u prozoru pretrazivackog programa mora
pojaviti ispisan neproporcionalnim pismom.
Obavezni argumenti
<TT>tekst... </TT>
Svi moguci argumenti
<TT ID="..." LANG="..." CLASS="...">tekst... </TT>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
Ova je naredba uvedena u jezik HTML standardom HTML 2, dok je uvrstavanje argumenata ID,
LANG i CLASS predlozeno za standard HTML 3.
U
Opis
Naredba U je namijenjena oznacavanju teksta koji se u prozoru pretrazivackog programa mora
pojaviti podcrtan. Upotreba ove naredbe se ne preporuca, buduci da korisnici crno-bijelih monitora
ne mogu razlikovati podcrtan tekst od hipertekstualne veze.
Obavezni argumenti
<U>tekst... </U>
Svi moguci argumenti
<U ID="..." LANG="..." CLASS="...">tekst... </U>
215
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Ova je naredba uvedena u jezik HTML standardom HTML 2, ali se koristi vrlo rijetko. Mnogi
pretrazivacki programi tekst obuhvacen ovom naredbom prikazuju kosim slovima, umjesto da ga
podcrtavaju. Uvrstavanje argumenata ID, LANG i CLASS u jezik HTML predlozeno je za standard
HTML 3.
UL
Opis
Naredbom UL delinira se nepobrojana lista unutar HTML dokumenta. Svaki element liste bit ce u
prozoru pretrazivackog programa oznacen crnim kruzicem, kvadraticem ili nekim drugim
geometrijskim likom.
Obavezni argumenti
<UL></UL>
Svi moguci argumenti
<UL COMPACT ID="..." LANG="..." CLASS="..."
CLEAR=left|right|all|"..." PLAIN SRC="..." MD="..." DINGBAT="..."
WRAP=vert|horiz TYPE=disk|circle|square> </UL>
Elementi cija je upotreba dozvoljena unutar naredbe
<LH> <LI>
Elementi unutar kojih je dozvoljena upotreba naredbe
<BLOCKQUOTE> <BODY> <DD> <FORM> <LI>
Napomene
Ova je naredba podrzana u jeziku HTML vec u njegovoj prvoj inacici, dok je uvrstavanje
argumenata ID, LANG, CLASS, CLEAR, PLAIN, SRC, MD, DINGBAT i WRAP predlozeno tek za
standard HTML 3. Upotrebom argumenta PLAIN kreirat ce se lista ciji elementi nisu oznaceni niti
s jednim geometrijskim likom. Argument TYPE je Netscapeovo prosirenje jezika HTML.
VAR
Opis
216
Naredba VAR je namijenjena oznacavanju teksta koji ce u prozoru pretrazivackog programa biti
prikazan kao programska varijabla ili argument neke naredbe. Vecina pretrazivackih programa ce
tekst oznacen ovom oznakom prikazati kosim slovima.
Obavezni argumenti
<VAR>tekst... </VAR>
Svi moguci argumenti
<VAR ID="..." LANG="..." CLASS="...">tekst... </VAR>
Elementi cija je upotreba dozvoljena unutar naredbe
<A> <IMG> <BR> <EM> <STRONG> <CODE> <SAMP> <KBD> <VAR> <CITE> <TT>
<B> <I>
Elementi unutar kojih je dozvoljena upotreba naredbe
<A> <ADDRESS> <B> <CITE> <CODE> <DD> <DT> <EM> <H1> <H2> <H3> <H4>
<H5> <H6> <I> <KBD> <LI> <P> <PRE> <SAMP> <STRONG> <TT> <VAR>
Napomene
Ova naredba je uvedena u jezik HTML standardom HTML 2, dok je uvrstavanje argumenata ID,
LANG i CLASS predlozeno tek za standard HTML 3.
WBR
Opis
Naredbom WBR se korisniku omogucava oznacavanje mjesta na kojemu tekst mora prijeci u novi
red pri upotrebi naredbe NOBR koja je namijenjena oznacavanju teksta unutar kojega se takvi
prijelazi nece ostvarivati automatski.
Obavezni argumenti
<WBR>
Svi moguci argumenti
<WBR>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
<NOBR>
Napomene
Ova naredba je Netscapeovo prosirenje jezika HTML.
217
XMP
Opis
Naredba XMP namijenjena je oznacavanju teksta unutar kojega ce bit zapamceni svi prijelazi u
novi red i visestruki razmaci. Sve HTML naredbe koje se nalaze u tom tekstu biti ce ignorirane i
prikazane u pretrazivackom programu kao dio obicnog teksta. Pretrazivacki programi koji
podrzavaju ovu naredbu ce tekst koji je njome oznacen prikazati neproporcionalnim pismom.
Obavezni argumenti
<XMP>tekst... </XMP>
Svi moguci argumenti
<XMP WIDTH="..." >tekst... </XMP>
Elementi cija je upotreba dozvoljena unutar naredbe
-
Elementi unutar kojih je dozvoljena upotreba naredbe
-
Napomene
Ova naredba je podrzana u jeziku HTML jos od njegove prve inacice, no standardom HTML 2 je
predlozeno njezino ukidanje te zamjena novom naredbom PRE.
218
Dodatak B: Sto je na disketama
219
Instalacija
Soltver koji se nalazi na prilozenim disketama pohranjen je u sazetom lormatu. Kako biste ga
instalirali na tvrdi disk, morat cete pokrenuti instalacijski program s prve diskete. Za tu vam je
radnju potrebno najmanje 4 MB slobodnog prostora na vasem tvrdom disku. Evo kako se pokrece
instalacijski program:
1. Ako koristite Windowse 95 kliknite misem na ikonu Start, te odaberite opciju Run. U
slucaju da radite s nekom starijom inacicom Windowsa, iz programa File Manager ili Program
Manager odaberite opciju Run iz izbornika File.
2. Upisite <disk>SETUP i pritisnite Enter. <disk> je slovna oznaka disketnog pogona u
kojem se nalazi disketa. Primjerice, ako je disketa u pogonu A:, otipkajte A:SETUP i pritisnite
Enter.
Pratite upute sa zaslona vaseg monitora jer ce vas instalacijski program u jednom trenutku upitati
da u disketni pogon ubacite drugu disketu. Datoteke ce se instalirati u direktorij \HTML ukoliko ne
navedete neki drugi tijekom instalacije.
Kada instalacija zavrsi, unutar kreiranog direktorija pronaci cete nekoliko korisnih programa koji
ce vam olaksati izradu HTML stranica, mnostvo ikona pohranjenih u GIF lormatu koje mozete
koristiti u svojim dokumentima, te svi primjeri iz knjige. Dakako, sve je to rasporedeno u zasebne
poddirektorije:
Poddirektorij WEBEDIT sadrzi instalacijski program za HTML editor WebEdit 1.2. Ovo je
jedini program koji posjeduje vlastitu instalacijsku proceduru, pa cete je morati pokrenuti kako
biste ga mogli koristiti. Postupak je vrlo slican instalaciji prilozenih disketa: odaberite opciju
Run iz odgovarajuceg izbornika i upisite \HTML\WEBEDIT\SETUP. (Direktorij HTML
zamijenite s nekim drugim ako ste tako naveli kod instalacije disketa.) Sada je dovoljno samo
pratiti upute s ekrana. Vise o ovom programu procitajte u nastavku ovog dodatka.
Unutar poddirektorija MPTHIS11 nalazi se program Map THIS! 1.10 koji je namijenjen
izradi slikovnih mapa. Map THIS! mozete pokrenuti tako da nakon odabira opcije Run upisete
\HTML\MPTHIS11\MAPTHIS, no bit ce najbolje da datoteku MAPTHIS.EXE misem
odvucete iz programa Windows Explorer (Windowsi 95) ili File Manager (stariji Windowsi)
u neku programsku grupu ako ga zelite koristiti i u buduce. U nastavku dodatka ovaj je
program opisan detaljnije.
Poddirektorij LVIEWP1C sadrzi program LView Pro 1.C s kojim cete moci kreirati prozirne
slike i GIF datoteke koje posjeduju elekt preplitanja. Program se pokrece upisivanjem naredbe
\HTML\LVIEWP1C\LVIEWPRO, ali kao i u prethodnom slucaju, bit ce najbolje da kreirate
ikonu za ovaj program odvlacenjem datoteke L V I E W P R O . E X E u neku programsku grupu.
Pri kraju dodatka nalazi se detaljniji opis i ovog programa.
Poddirektroriji PRIMJERI, OSOBNA i ZNAK sadrze sve primjere koji se nalaze u ovoj knjizi i
to redom one koji su smjesteni u prva dva dijela knjige, primjer osobne stranice koja je
221
naziva WYSIWYG (What You See Is What You Get - Ono Sto vidis, to ces i dobiti). Svaki
pretrazivacki program poput Netscapea ili Mosaica HTML dokumente interpretiraju na drugaciji
nacin i tek krajnji korisnik ima cjelovitu kontrolu nad velicinom stranice i stilovima pisama.
Prisilni rad s HTML oznakama redovito ce vas podsjecati na to da zapravo izradujete tekstualni
dokument koji je djelomicno sastavljen od inlormacija koje zelite prezentirati, te naredbi kojima
klijentskom programu objasnjavate na koji se nacin ta prezentacija izvrsava.
Nakon pokretanja programa, vjerojatno cete pozeljeti kreirati novi dokument. Ucinite to odabirom
opcije New iz izbornika File, ili pritisnite Ctrl+N. Na ekranu ce se pojaviti dijaloski okvir kakvoga
vidite na slici b-3. Kao sto primjecujete, ponudene su vam tri mogucnosti i to redom otvaranje
novog praznog dokumenta, kreiranje novog dokumenta pomocu carobnjaka (Home Page Wizard),
te otvaranje vec postojeceg dokumenta. Pocetnicima ce se posebno svidjeti upotreba carobnjaka,
buduci da ce uz njegovu pomoc moci kreirati jednostavne Web stranice bez posebnog poznavanja
jezika HTML. Vama kao citatelju ove knjige preporucujemo upotrebu carabnjaka samo u slucaju
kada zelite napraviti neki manji dokument na brzinu, buduci da posjedujete svo potrebno znanje za
samostalnu izradu Web stranica.
S//ka b-3: Kreiranje novog dokumenta u WebEditu
Kada upotrijebite jednu od tri ponudene mogucnosti, program ce otvoriti novi prozor u cijem
okviru ce se nalaziti redak s pomocnim ikonama. Ukoliko ste se odlucili za otvaranje praznog
dokumenta, bit ce najbolje da odmah kliknete na ikonu koja sadrzi zuti sibol + (plus) kako biste
praznoj stranici dodali osnovne naredbe koje se moraju nalaziti u svakom dokumentu (<HTML>,
<HEAD>, <BODY>, <TITLE>). Sada mozete u tijelo dokumenta upisati sav tekst koji ce
predstavljati sadrzaj vase Web stranice, ukljucivsi u to sve naslove, citate i druge tekstualne
elemente koje cete kasnije obuhvatiti nekim HTML naredbama. Jedna od prednosti rada s HTML
editorom je mogucnost vrlo jednostavnog uoblicavanja upisanog teksta, buduci da niti jednu
naredbu necete morati upisivati rucno, vec cete ju moci odabrati iz jednog od mnogih izbornika.
Zelite li, primjerice, neku recenicu iz unesenog teksta oznaciti kao naslov prve razine, oznacite je
pomocu misa (predite misjim kursorm preko nje, istovremeno drzuci pritisnutu lijevu tipku), te
potom iz izbornika Insert odaberite opciju Headings i potom Heading 1, ili pritisnite
Shilt+Ctrl+1. Na ekranu ce se pojaviti okvir za dijalog u kojemu mozete upisati nacin poravnavanja
naslova i jos nekoliko drugih parametara, no zasada ce biti najbolje da na njih zaboravite jer se radi
o argumentima za naredbu <H1> cije je sluzbeno usvajanje predlozeno tek standardom HTML 3.
Pritisnite nter ili kliknite na gumb s oznakom OK i oko oznacene recenice pojavit ce se HTML
naredbe koje obiljezavaju naslov prve razine.
Slicno mozete postupiti i s bilo kojom drugom naredbom koja je namijenjena lormatiranju teksta.
U svim slucajevima postupite kao u prethodnom primjeru: oznacite zeljeni dio teksta misem,
pronadite u izborniku Insert naredbu koja vam je potrebna (na primjer, za kosa slova ili
neproporcionalno pismo), popunite praznine u okviru za dijalog koji se moze, ali i ne mora pojaviti,
te pritisnite Enter.
Nakon sto oblikujete sav tekst koji je sadrzan u vasem dokumentu, vjerojatno cete u njega zeljeti
ugraditi i neke slike. Kliknite misem na mjestu u tekstu gdje zelite da se pojavi neka slika ili
222
dovedite na to mjesto pomocu kursorskih tipaka tekstualni kursor i u izborniku Insert odaberite
opciju Image / Figure. Na ekranu ce se pojaviti okvir za dijalog koji je prikazan na slici b-4. Na
slici mozete vidjeti da ovaj dijaloski okvir sadrzi polja koja su naslovljena podjednako kao i
argumenti koji se mogu dopisati uz naredbu <IMG>. Cemu svaki pojedini argument sluzi, mozete
pogledati u cetvrtom poglavlju knjige. Popunite ona polja koja zelite upotrijebiti i pritisnite gumb
oznacen s Image ili tipku Enter. Unutar dokumenta ce se pojaviti naredba namijenjena
ugradivanju slika u Web stranice, zajedno sa svim argumentima koje ste koristili u okviru za
dijalog.
S//ka b-4: Okvir za dijalog `Image / Figure'
Ukoliko zelite neku sliku ili dio teksta pretvoriti u sidro za hipertekstualnu vezu, oznacite taj dio
dokumenta misem kao i u prethodnim slucajevima, te potom odaberite opciju Anchor / Link iz
izbornika Insert. Dobit cete okvir za dijalog kakvoga mozete vidjeti na slici b-5. Popunite polje
Hrel s URL adresom dokumenta koji ce predstavljati cilj vase hipertekstualne veze i kliknite na
gumb oznacen s Anchor ili pritisnite tipku Enter. Kao sto ste mogli i ocekivati, dio dokumenta
kojega ste prethodno oznacili, sada je obuhvacen HTML naredbom za hipertekstualnu vezu,
zajedno s navedenim argumentom HREF kojemu je dodjeljena URL adresa. Slicno mozete
postupiti i u slucaju kada zelite upotrijebiti argument NAME, no tada cete u okviru za dijalog morati
popuniti drugo polje.
S//ka b-5: Okvir za dijalog `Anchor / Link'
S vremenom cete uz malo eksperimentiranja nauciti kako se u dokument ugraduju i drugi, slozeniji
elementi jezika HTML, poput obrazaca i tablica. Kako se radi o programu cije je korisnicko sucelje
napravljeno vrlo intuitivno, zasigurno necete imati nikakvih problema. Kako WebEdit 1.2 podrzava
HTML razine 3 i sva Netscapeova prosirenja, u izborniku Insert cete pronaci sve naredbe o kojima
je bilo rijeci u ovoj knjizi. Ako kod neke odredene naredbe naidete na neki problem, ili vam se ne
svida nacin na koji se ona unosi u dokument pomocu ovog programa, uvijek cete moci tu naredbu
dodati rucno, buduci da se WebEdit ponasa kao i svaki drugi editor kada je u pitanju rad s tekstom.
Pogledajmo sada neke posebnosti WebEdita koje cete rijetko susretati u drugim HTML editorima.
Ako kliknete na ikonu koja je oznacena s upitnikom (<?>), na ekran ce iskociti okvir za dijalog
kakvoga vidite na slici *****. Radi se o okviru unutar kojega mozete delinirati vlastite makro-
naredbe, odnosno skupove HTML oznaka koje cete kasnije moci ugradivati u svoje dokumente sa
samo dva klika misem. Ovo je vrlo korisna mogucnost programa WebEdit, posebice u slucajevima
kada unutar istog dokumenta koristite jednake nizove HTML naredbi na vise razlicitih mjesta.
Novi niz naredbi mozete dodati u ovu listu ako kliknete na gumb oznacen s Add. Neke ideje za
kreiranje vlastitih makro-naredbi mozete ukrasti sa slike b-6.
223
S//ka b-6: Dodavanje makro-naredbi u WebEdit
Na slici b-7 nalazi se dijaloski okvir Easy Links kojega mozete dobiti ako iz izbornika Tools
odaberete istoimenu opciju. Taj je okvir namijenjen ugradnji hipertekstualnih veza u dokument na
jos jednostavniji nacin od maloprije opisanog. Nakon sto oznacite dio dokumenta koji ce
predstavljati sidro veze, otvorite ovaj okvir za dijalog i na svojem disku pronadite datoteku koja ce
predstavljati cilj veze. Premda je ovakav nacin rada s naredbama za hipertekstualnu vezu puno
jednostavniji, zasigurno i sami zakljucujete da je lnkcionalan samo u slucaju kada radite s vezama
koje medusobno povezuju dokumente u iste Web stranice. Ako zelite napraviti vezu na neku URL
adresu koja se nalazi negdje drugdje na Internetu, morat cete se posluziti starim nacinom. Na slican
nacin mozete u svoj dokument ugradivati i slike, upotrebom dijaloskog okvira Easy Images koji se
takoder nalazi u izborniku Tools.
S//ka b-7: Okvir za dijalog `Easy Links'
Posljednja mogucnost WebEdita koju cemo spomenuti je upotreba posebnih znakova. Ukoliko
zelite unutar svojeg dokumenta upotrijebiti neko posebno slovo ili oznaku, bilo da se radi o slovu
karakteristicnom za neki jezik, matematickom simbolu ili nekoj drugoj oznaci (pogledajte tablicu
4-3 na stranici 73), moci cete to napraviti putem opcije Special characters iz izbornika Insert.
Kod odabira te opcije na ekranu se pojavljuje prozor kakav se nalazi na slici b-8. Kao sto
primjecujete, dovoljno je da jednim klikom misa odaberete simbol kojega zelite ugraditi u
dokument i na mjestu gdje se u tom trenutku nalazio kursor pojavit ce se HTML oznaka tog
simbola. Ova opcija WebEdita je vrlo korisna, buduci da njezinom upotrebom izbjegavate ucenje
HTML naredbi namijenjenih upotrebi posebnih znakova kojih ima dovoljno da ih nikada ne
uspijete sve popamtiti.
S//ka b-8: Upotreba posebnih znakova
WebEdit 1.2 obiluje mnogim drugim mogucnostima koje ovdje nisu opisane i uz malo kopkanja
po izbornicima ubrzo cete ih i sami sve otkriti. Prema mnogim strucnim casopisima ovaj program
je najbolji shareware HTML editor koji je napravljen za Windows okruzje, sto nije ni cudno uzme
li se u obzir da je autor svojevremeno radio kao programer u Microsoltu. Ukoliko vam se ovaj
program svidi i ako ga zelite koristiti i nakon probnog roka od trideset dana, platite autoru
registraciju i dobit cete inacicu WebEdita u kojoj se nalazi jos mnostvo drugih korisnih opcija,
poput raznih pomocnih ikona namijenjenih jednostavnijem pristupu raznim HTML naredbama, te
ugradenog alata za provjeru engleskog pravopisa. Detalja oko placanja registracije dobit cete ako
odaberete opciju How to Register WebEdit iz izbornika Help.
224
Map THIS! 1.10
Program Map THIS 1.10 namijenjen je izradi .MAP datoteka za CERN i NCSA Web posluzitelje
bez potrebe za poznavanjem pravila o njihovom sastavljanju. Poznato vam je da se u tim
datotekama pohranjuju kordinate koje odreduju geometrijske likove u slikovnoj mapi putem kojih
korisnik moze pristupiti drugim Web dokumentima. Slikovne mape sluze istoj svrsi kao i
hipertekstualne veze, a vise o njima procitajte u sestom poglavlju. U slijedecih nekoliko odlomaka
bit ce objasnjeno kako se kreiraju slikovne mape putem programa Map THIS! 1.10.
Pokrenite Map THIS! klikom na njegovu ikonu. Na ekranu ce se pojaviti prozor programa kojega
mozete vidjeti na slici b-9. Iz izbornika File odaberite opciju New ili pritisnite Ctrl+N. Sada ce se u
prozoru programa pojaviti dijaloski okvir koji ce od vas zatraziti da potvrdno odgovorite na zahtjev
za otvaranjem nove GIF datoteke u kojoj je pohranjena slika koju cete iskoristiti kao mapu, pa to i
ucinite pritiskom na tipku Enter.
S//ka b-9: Program Map THIS! 1.10
Pogram ce vas upitati da odredite ime zeljene GIF datoteke. Nakon sto zadate tocno ima GIF
datoteke program ce je ucitati i prikazati na ekranu. Ujedno ce se pri gornjem rubu prozora pojaviti
novi redak s ikonama koje ce vam olaksati daljnji rad s programom. Kako izgleda prozor programa
nakon otvaranja nove GIF datoteke, pogledajte na slici b-10. Uocite da prve tri ikone u drugom
retku sadrze simbole pravokutnika, kruznice i poligona.
S//ka b-10: GIF datoteka ucitana u program
Crtez koji je prikazan na ovoj slici sadrzi tri polja koja cemo oznaciti u nasoj mapi: trokut, kruznicu
i pravokutnik. Za trokut valja upotrijebiti alat sa slicicom poligona, a za preostala dva polja alate sa
slicicama kruznice i pravokutnika. Pogledajmo primjer kruznice: potrebno je najprije kliknuti na
odgovarajucu ikonu, nakon cega ce misja strelica poprimiti novi oblik. Sada je dovoljno samo
kliknuti negdje na rub kruznice koju zelimo obiljeziti i povlacenjem misa prosiriti dobivenu oznaku
do zeljene granice. Slican postupak ponavlja se za pravokutnik i poligon. Nakon obiljezavanja svih
triju polja iz naseg primjera, dobili smo tri nove oznake na crtezu koje mozete vidjeti na slici b-11.
S//ka b-11: Oznacavanje kljucnih polja na crtezu
U sljedecem koraku je potrebno odabrati ikonu s oznakom strelice (nalazi se odmah iza tri ikone
koje smo do sada koristili), te potom dvaput kliknuti unutar svake od triju kreiranih oznaka, nakon
cega ce se u sva tri slucaja na ekranu pojaviti dijaloski okvir sa slike b-12. U taj okvir se unosi
225
URL adresa HTML dokumenta koji ce se ucitati u pretrazivacki program nakon sto korisnik klikne
na obiljezeno polje u mapi, te opcionalno komentar koji ce uz tu URL adresu biti naveden u .MAP
datoteci. Ovaj okvir vam takoder omogucuje da izbrisete neku kreiranu oznaku, sto se postize
klikom na gumb koji je oznacen s Delete. Nakon sto unesete sve podatke, kliknite na gumb OK
ili pritisnite Enter.
S//ka b-12: Upisivanje URL adresa i komentara
Nakon oznacavanja svih potrebnih polja u mapi i popunjavanja odgovarajucih okvira za dijalaog,
slikovnu mapu valja snimiti kao datoteku na tvrdi disk. Za tu je radnju potrebno kliknuti na ikonu s
oznakom diskete ili u izborniku File odabrati opciju Save. Na ekranu ce se pojaviti okvir za dijalog
sa slike b-13. U ovaj okvir morate upisati URL adresu dokumenta koji ce se ucitati u pretrazivacki
program u slucaju da korisnik klikne na dio slike koja nije oznacena niti s jednim geometrijskim
likom (polje Default URL), dok je upisivanje preostalih podataka (ime autora mape, naslov mape i
komentar) opcionalno. Na kraju se jos morate odluciti da li zelite kreirati mapu za Web posluztelja
tvrtke NCSA ili CERN. Kada sve to napravite, kliknite na gumb oznacen s OK i program ce vas
upitati da upisete ime .MAP datoteke. Upisite ime, pritisnite Enter i mapa ce biti kreirana.
S//ka b-13: Kreiranje .MAP datoteke
Program Map THIS! obiluje mnogim drugim pomocnim alatima, poput ucrtavanja mreze u
pozadinu slike, zumiranja slike, te unosenje promjena u vec gotove slikovne mape. Podrzana je i
mogucnost istovremenog rada s vise slikovnih mapa odjednom (tzv. visenitnost), a ne smijemo
zaboraviti niti na vrlo opsirno ragranat sustav pomoci u kojem su osim detaljnih uputstava za rad s
programom dana i opcenita objasnjenja o radu sa slikovnim mapama. Poigrajte se malo sami s
ovim programom, jer se radi o zaista korisnom alatu koji ne samo da je vrlo lunkcionalan, vec i
vrlo ugodan za upotrebu. Map THIS! 1.10 se ditribuira po freeware princpu, sto znaci da ga mozete
koristiti potpuno besplatno.
LView Pro 1.C
LView Pro je program americkog autora Leonarda H. Loureira, a sluzi prikazivanju i konverziji
razlicitih lormata slikovnih datoteka u Windows okruzenju. Shareware programa ovakvog tipa
postoji bezbroj, no LView Pro je jedan od rijetkih koji sadrzi neke mogucnosti zanimljive samo
autorima Web stranica. Radi se prvenstveno o podrzanim opcijama za pohranjivanje slika u GIF
lormatu s preplitanjem (interlased GIF) te o odredivanju prozirne boje unutar slike, pa ovdje
necemo posebno isticati bilo koje druge lunkcije ovog programa. Pored GIF lormata za pohranu
slika, podrzan je i rad s JPEG, BMP, Targa, PCX i TIFF datotekama, cime vam je omogucen rad s
vrlo sirokim opusom slika koje cete moci pretvoriti u GIF il JPEG datoteke te ih ukljuciti u svoje
226
Web stranice. Na slici b-14 mozete pogledati kako izgleda prozor ovog programa nakon ucitavanja
jedne slike i otvaranja izbornika Retouch, koji je nama najzanimljiviji.
S//ka b-14: LView Pro 1.C
GIF slike s preplitanjem puno su prikladnije za upotrebu na World Wide Webu od obicnih GIF
datoteka buduci da omogucavaju brze ucitavanje stranica u pretrazivacke programe. Taj se elekt
postize ucitavanjem pojedinih redaka slike na preskokce, sto znaci da ce korisnik sliku koja je
poranjena u GIF lormatu s preplitanjem najprije vidjeti mutno i nazubljeno, a kasnije sve ostrije i
ostije. U meduvremenu dok se slika izostrava, u pretrazivacu ce se prikazivati okolni tekst, a
zapocet ce i prikazivanje preostalih slika iz dokumenta. Jasno je da se time postupak ucitavanja
stranice znatno ubrzava, jer korisnik moze najprije procitati sav tekst, a kasnije prema svojim
zeljama pricekati da se izostre slike ili ucitati neki drugi dokument.
Upotreba prozirne boje vrlo je elektna kad se koristi na Webu, jer omogucuje isticanje pozadinske
boje cijelog dokumenta na onom podrucju slike koji nije prekriven crtezom. Vise o radu s
prozirnim slikama mozete procitati u sestom poglavlju. Ukoliko zelite u nekoj svojoj GIF datoteci
odrediti boju koja ce zapravo biti prozirna, ucitajte je u LView Pro, te iz izbornika Retouch
odaberite opciju Background color. Na ekranu ce se pojaviti okvir za dijalog kakvog mozete
vidjeti na slici b-15.
S//ka b-15: Odabir prozirne boje
Unutar palete koja se nalazi u prikazanom okviru odaberite onu boju koju namjeravate oznaciti kao
prozirnu. Imajte na umu da ce svi djelovi slike koji su pokriveni tom bojom u pretrazivackom
programu zapravo biti prikazani bojom pozadine dokumenta (najcesce se radi o sivoj ili bijeloj
boji). Ako u paleti ne mozete prepoznati boju, kliknite na gumb oznacen s Dropper i vas misji
pokazivac pretvorit ce se u kapaljku. Dovedite kapaljku iznad podrucja na slici koje je obojano
zeljenom bojom i kliknite. Time ce cijeli postupak biti dovrsen. Ako ste ipak znali prepoznati boju
u ponudenoj paleti, bit ce dovoljno da nakon njezinog odabira jednostavno kliknete na OK.
LViev Pro, kao i prethodna dva programa koja su opisana, podrzava i velik broj drugih opcija koje
nam u ovom trenutku nisu posebno zanimljive, no to ne umanjuje njihovu korisnost. Izmedu
ostalog, medu izbornicima ovog programa pronaci cete razne liltere namijenjene izostravanju
lotogralija, opciju za hvatanje ekrana, mogucnost izrade tzv. slideshow prezentacije i jos dosta
toga. LView Pro je shareware program, pa cete autoru morati platiti trideset dolara ako vam se
program svidi i ako ga odlucite nastaviti upotrebljavati. Vise o nacinu placanja registracije
pronadite u izborniku Help, odabirom opcije About LView Pro.
227
Dodatak C: Reference
228
U ovom su dodatku popisane URL adrese raznih World Wide Web, FTP i drugih cvorova koji bi
vam mogli biti korisni prilikom oblikovanja HTML dokumenata. Ako ovdje ne uspijete pronaci
ono sto trazite, posluzite se jednim od mnogih Web servisa za pretrazivanje popisanih u drugom
poglavlju.
HTML prirucnici
Iz tvrtke CERN:
HyperText Markup Language
http://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html
Style Guide for Online Hypertext
http://info.cern.ch/hypertext/WWW/Provider/Style/Overview.html
HTML+
http://info.cern.ch/hypertext/WWW/MarkUp/HTMLPlus/htmlplus_1.html
Uniform Resource Locators (URL adrese)
file://info.cern.ch/pub/www/doc/url-spec.txt
Iz tvrtke NCSA:
A Beginner`s Guide to HTML
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
Beginner`s Guide to Uniform Resource Locators
http://www.ncsa.uiuc.edu/demoweb/url-primer.html
Mosaic Fill-Out Form Support
http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-
forms/overview.html
The Common Gateway Interface (CGI programi)
http://hoohoo.ncsa.uiuc.edu/cgi/overview.html
Druga dokumentacija:
The HTML Developers` Jumpstation
http://oneworld.wa.com/htmldev/devpage/dev-page1.html
229
Hypermedia authoring tools
http://info.mcc.ac.uk/CGU/staff/lilley/authoring.html
Introduction to HTML Documentation
http://www.utirc.utoronto.ca/HTMLdocs/NewHTML/intro.html
Peter Flynnov prirucnik ^How to Write HTML
http://kcgl1.eng.ohio-state.edu/www/doc/htmldocs.html
Ian Grahamov prirucnik ^Guide to HTML
http://www.utirc.utoronto.ca/HTMLdocs/NewHTML/htmlindex.html
Pretrazivacki programi za World Wide Web
Pretrazivacki programi s tekstualnim grafickim
suceljima:
Line-Mode Browser (tty)
http://info.cern.ch/hypertext/WWW/LineMode/Status.html
Lynx (vt100)
http://info.cern.ch/hypertext/WWW/Lynx/Status.html
perlWWW autora Toma Finea
http://info.cern.ch/hypertext/WWW/FineWWW/Status/html
Slipknot tvrtke MicroMind (emulacija Lynxa za Windowse)
ftp://oak.oakland.edu/SimTel/win3/internet/slnot100.zip
Pretrazivacki programi za Microsoft Windows okruzje:
Cello
http://www.law.cornell.edu/cello/cellotop.html
Microsoft Internet Explorer
http://www.home.msn.com/
NCSA Mosaic for Windows
http://www.ncsa.uiuc.edu/SDG/Software/WinMosaic/HomePage.html
EINet WinWeb
http://galaxy.einet.net/EINet/Winweb/WinWebHome.html
230
Netscape Navigator
http://www.mcom.com/info/index.html
ftp://ftp.netscape.com/
Spyglass Enhanced Mosaic
http://www.spyglass.com/mprodinf.htm
Spry AirMosaic
http://www.spry.com/sp_prod/airmos/airmos.html
Quarterdeck Mosaic
http://www.qdeck.com
Pretrazivacki programi za Macintosh racunala:
NCSA Mosaic for Macintosh
http://www.ncsa.uiuc.edu/SDG/Software/MacMosaic/MacMosaicHome.html
CERN Samba
http://info.cern.ch/hypertext/WWW/Macintosh/Status.html
EINet MacWeb
http://galaxy.einet.net/EINet/Macweb/MacWebHome.html
Spyglass Enhanced Mosaic
http://www.spyglass.com/mprodinf.htm
Netscape Navigator
http://www.mcom.com/info/index.html
ftp://ftp.netscape.com/
Pretrazivacki programi za X-Windows okruzja:
NCSA Mosaic for X using X11/Motif
http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/help-about.html
Quadralay GWHIS Viewer for X
http://www.quadralay.com/products/products.html
tkWWW Browser for X11
http://info.cern.ch/hypertext/WWW/TkWWW/Status.html
MidasWWW (pretrazivacki program Tony Johnson)
http://info.cern.ch/hypertext/WWW/MidasWWW/Status.html
Chimera
http://www.unlv.edu/chimera/
231
Netscape Navigator
http://www.mcom.com/info/index.html
ftp://ftp.netscape.com/
Spyglass Enhanced Mosaic
http://www.spyglass.com/mprodinf.htm
VMS pretrazivaci:
Full-Screen client autora Dudua Rashtya
http://info.cern.ch/hypertext/WWW/RashtyClient/Status.html
Emacs w3-mode
http://info.cern.ch/hypertext/WWW/EmacsWWW/Status.html
Pretrazivacki programi za druge platforme:
IBM Web Explorer za OS/2 Warp
http://www.austin.ibm.com/pspinfo/product0.html
Pretrazivacki program A za sustav NeXTStep
http://info.cern.ch/hypertext/WWW/NextStep/Status.html
Albert za VM sustave
ftp://www.ufl.edu/pub/vm/www/README
HTML editori
Editori za Microsoft Windows okruzje:
WebEdit (program autora Kenna Nesbitta)
http://wwwnt.thegroup.net/webedit/webedit.htm
HoTMetaL for Windows (program tvrtke SoftQuad)
http://www.sq.com/
HTML Assistant (program autora Howarda Harawitza)
ftp://ftp.cs.dal.ca/htmlasst/htmlafaq.htm
HTML Writer (program autora Krisa Nosacka)
ftp://lal.cs.byu.edu/pub/www/tools/htmlwrit.zip
232
Microsoft Internet Assistant
http://www.microsoft.com/pages/deskapps/word/ia/
HotDog (program tvrtke Sausage Software)
http://www.sausage.com/
Editori za Macintosh racunala:
HTML Editor for Macintosh (program autora Richa Gilesa)
http://dragon.acadiau.ca:1667/~giles/HTML_Editor
BBEdit HTML Extensions (program autora Carlesa Bellvera)
http://www.uji.es/bbedit-html-extansions.html
Simple HTML Editor (editor baziran na Hypercard sustavu)
http://dewey.lib.ncsu.edu/staff/morgan/simple.html
Editori za X-Windows okruzja:
tkHTML
http://alfred1.u.washington.edu:8080/~roland/tkHTML/tkHTML.html
SoftQuad HoTMetaL for SUN
http://www.sq.com/
Publikacije o Internetu i World Wide Webu
Hrvatski Internet magazin ^net.
e-mail: net.magazine@sprint.pub.hr
Boardwatch Magazine
http://www.broadwatch.com
The Internet Letter
http://www.infohaus.com/access/by-seller/Internet_Letter
NetGuide
http://wais.wais.com:80/techweb/ng/current/
WIRED
http://www.wired.com
233
Arhive slika i zvukova
GIF slike i ikone:
Najveci popis Web adresa na kojima se nalaze zanimljive slike
http://www.yahoo.com/yahoo/computers/multimedia/pictures
Veliki popis adresa na kojima su smjestene ikone i c//part slicice
http://akebono.stanford.edu:80/users/www_server/Computers/
World_Wide_Web/WWW_programing/Icons/
GIF slike, ikone, gumbi, linije, strlice i popis drugih zanimljivih arhiva s ikonama
http://colargol.edb.tih.no/~geirme/gizmos/gizmo.html
Arhiva zanimljivih GIF slika i ikona
http://inls.ucsd.edu/y/OhBoy/icons.html
Obicne GIF ikone
http://ns2.rutgers.edu/doc-images/small_buttons/
Slike s tematikom putovanja, medicine i drugih zanimljivih djelatnosti
http://white.nosc.mil/images.html
GIF kuglice
http://www-ns.rutgers.edu/doc-images/icons/
Popis URL adresa na kojima su smjestene kvalitetne c//part arhive.
http://www.cs.yale.edu/HTML/YALE/CS/HyPlans/loosemore-
sandra/clipart.html
Velika kolekcija ikona
http://www.di.unioi.it/test/new/icons/icons1-6.html
Zvukovi i videozapisi:
Zvukovi iz poznatih filmova, crtica, serijala Monty Python...
http://ns2.rutgers.edu/sounds/
AU zvukovi iz crtanih filmova Roger Rabbit, Beavis and Butthead i drugih
http://www.acm.uiuc.edu/rml/Sounds/
Velika kolekcija zvukova pohranjenih u AU formatu iz mnogih poznatih filmova
http://sunsite.unc.edu/pub/multimedia/sun-sounds/
Arhiva glasova poznatih svjetskih politicara, glumaca, pjevaca i drugih zvijezda
http://web.msu.edu/vincent/general.html
234
Razliciti zvukovi poput lajanja, zvonjave, kapanja vode, smijanja...
http://www.eecs.nwu.edu/~jmyers/sun_sounds/
Velika arhiva MPEG animacija s inserima iz filmova i crtica
http://www.eeb.ele.yue.nl/mpeg/index.html
Inserti iz poznatih Disneyevih filmova poput Lion Kinga i Aladdina
http://tausq.resnet.cornell.edu/mmedia.html
Videozapisi s astronomskom tematikom
http://www.univ-rennes1.fr/ASTRO/anim-e.html
Arhive pomocnih programa za izradu Web stranica
The Ultimate Collection of Winsock Software
http://www.tucows.com/tindex.html
CSUSM Windows World
http://coyote.csusm.edu/cwis/winworld/winworld.html
Arhiva HTML editora, pretrazivackih programa i drugih korisnih alata
http://ftp.sunet.se:80/ftp/pub/pc/windows/winsock-indstate/
HTML Editor Hot Links arhiva
http://pages.prodigy.com/NJ/krusty/HTMLedit.html
Velika kolekcija pomocnih alata za izradu HTML dokumenata
http://www.utirc.utoronto.ca/HTMLdocs/pc_tools.html
Druge reference vezane uz World Wide Web
USENET konferencije:
Rasprave o pretrazivackim programima
comp.infosystems.www.users
Diskusije o Web posluziteljima
comp.infosystems.www.providers
Razlicita pitanja
comp.infosystems.www.misc
Objavljivanje novih Web stranica
comp.infosystems.announce
235
Pretplatnicke liste:
Kako biste se pretplatili na neku od navedenih listi, posaljite elektronicku poruku na adresu
listserv@info.cern.ch. Sadrzaj te poruka mora biti ovakvog oblika:
subscribe <lista> <ime>
gdje je lista tocan naziv pretplatnicke liste, a ime vase puno ime i prezime. Ukoliko se,
primjerice, zelite pretplatiti na listu www-html, poruku sastavite ovako:
subscribe www-html Alen Vitasovi}
Evo i popisa pretplatnickih listi vezanih uz razvoj World Wide Web stranica:
Objavljivanje novih Web stranica i pomocnih alata za oblikovanje HTML dokumenata
www-announce
Diskusije o jeziku HTML
www-html
Pitanja vezana uz upotrebu proxy posluzitelja
www-proxy
Tehnicki detalji vezani uz World Wide Web
www-talk
Web i relacijske baze podataka
www-rdb

You might also like