01 HTPP

PO GLAV E 1
Osnove HTML-a
U OVOM POGLAVU

Preuzimae i instalirae PWS Web servera Rad s PWS Web serverom i objavivae Web stranice Opisivae sadraja Web stranice naslovom Prepoznavae Web dokumenata pomou definicije tipa dokumenta Umetae komentara u Web dokument Zadavae fonta za tekst Web stranice Kontrola toka teksta pomou oznaka za pasus i oznaka za prelom reda Meae veliine teksta pomou oznaka nivoa naslova i atributa size oznake fonta Meae boje teksta HTML dokumenta Dodavae slika na Web stranicu korieem osnovne oznake <img> Meae poravnaa teksta i slika Dodavae hipertekstualne veze na Web stranicu Ureivae slova i rei pomou oznaka za formatirae znakova Koriee simbola i specijalnih znakova u HTML dokumentu Koriee horizontalnih linija za organizovae sadraja Web stranica Koriee HTML oznaka bloka citata za definisae leve i desne margine Pravee ureenih i neureenih lista Pravee ugneenih lista
16 18 22 23 24 26 27 30 31 33 35 37 39 40 41 43 44 46
Pravee lista definicija Koriee HTML oznaka unapred formatiranog teksta za kontrolu prikaza sadraja Weba Prikazivae navigacionog menija unutar okvira Web stranice Istovremeno prikazivae vie Web stranica na ekranu
48 49 50 52
ezik za oznaavae hiperteksta (engl. Hypertext Markup Language), poznatiji kao HTML, raunarski je jezik i predstava sutinu World Wide Weba. Pri praveu Web lokacija, HTML se koristi za unos teksta, slika, animacija ili moda zvuka i videa na pojedinane Web stranice koje saiavaju lokaciju. HTML, uz to, omoguava da umetnete hipertekstualnu vezu i interaktivnu dugmad koji vae stranice povezuju s drugim stranicama na vaoj lokaciji i drugim lokacijama irom sveta. Dizajnirae Web lokacije je kreativan rad, a HTML je samo jedan od alata pomou kojeg pravite Web prezentacije. HTML nije programski jezik, nego jezik za oznaavae teksta. Teoretski, Web stranicu koju napravite koristei HTML mogao bi da vidi svako ko ima raunar, bilo kakav ita Weba i pristup Internetu. U praksi, mogunost da se pregleda potpun sadraj stranice zavisi od karakteristika itaa Weba. itai Weba (engl. Web browsers) su programi koji prevode HTML u dokumentima Web stranica i prikazuju tekst, slike i animacije na ekranu raunara posetioca. Sami ili s jo nekim programima, itai reprodukuju zvune i video datoteke koje pomou HTML-a umeete na stranicu. Najnovije verzije dva najpopularnija itaa Weba, Microsoftovog Internet Explorera i Netscapeovog Netscape Navigatora, prikazuju bezmalo sve to moete da stavite na stranicu koristei HTML. Da bi posetioci pristupili stranicama Web lokacije, moraju se prethodno povezati s Internetom i pokrenuti ita Weba. Poto Web server poae Web stranicu raunaru posetioca, ita Weba prevede HTML u datoteci stranice i prikae u prozoru itaa sadraj te datoteke kao tekst i slike. Web serveri i itai Weba za komunikaciju koriste protokol za prenos hiperteksta (engl. HyperText Transport Protocol, HTTP). Ovaj protokol, izmeu ostalog, odreuje nain na koji itai Weba i serveri au poruke kao i strukturu samih poruka. Detano razmatrae razliitih HTTP tipova i struktura poruka prevazilazi opseg ove kige. Meutim, za dizajnirae ak i sloenih Web lokacija potrebno je tek osnovno razumevae HTTP toka zahteva i odgovora (toka izmeu itaa Weba i Web servera) koji je prikazan na slici 1-1. 1. Kad god unesete Web adresu (na primer, http://www.NVBizNet.com) u poe za adresu itaa i pritisnete ENTER, ita putem Interneta zahteva datoteku od Web servera. 2. Poto primi zahtev, Web server pronalazi traenu datoteku i ae je itau. 3. ita Weba analizira datoteku stranice i utvruje da li ima umetnutih datoteka (kao to su slike, animacije, zvuci itd.) koje mu od Web servera trebaju.
HTML i Web dizajn kroz praktine primere
Web server
Tekst i ostali sadraj sa Weba
Slika 1-1 Odgovor Web servera na zahtev za pribavae odreenog sadraja sa Weba. 4. ita Weba ae serveru vie HTTP zahteva (po jedan za svaku datoteku koja itau treba). 5. Kako primi zahteve, Web server tako pronalazi i ae datoteke (po jednu za svaki HTTP zahtev) itau Weba. 6. ita Weba uzima datoteke Web stranice i, prema uputstvima HTML oznaka, kombinuje stranicu i sadraj umetnute datoteke u Web dokument. Taj dokument, potom, ita prikazuje na ekranu.
Uloga itaa Weba i Web stranica

Da bi ili u korak s tritem koje se stalno mea i uinili Internet pristupanim svakome, Microsoft i Netscape su za sve platforme i operativne sisteme koji se na tritu mogu nai napravili verzije svojih itaa Weba. Da bi prikazao Web stranicu, ita Weba prevodi HTML kd, a marka i verzija itaa koji posetioci vae Web lokacije koriste odreuju koje e karakteristike HTML-a kod ih raditi. To znai da od verzije itaa zavisi ta e posetilac imati na ekranu. Tako koriee najnovijih, najnaprednijih odlika HTML-a i egovih mogunosti formatiraa strana ne garantuje da e svi koji pogledaju stranicu videti sve to ste na u stavili.
Poglave 1: Osnove HTML-a
Pri dizajnirau Web stranice imajte na umu da nee svi posetioci koristiti najnovije verzije Internet Explorera ili Netscape Navigatora. Zbog toga se uglavnom drite osnova HTML-a koje ete u ovom poglavu nauiti, a najnovije karakteristike koristite samo da lokaciju uinite zanimivijom. Kombinovaem osnovnih i naprednih karakteristika HTML-a na istoj stranici, svima omoguavate da vide vane delove, a oni s najnovijim verzijama itaa doivee i neto nezaboravno. Web stranica se sastoji od niza HTML naredaba koje u datoteku unosite korieem bilo kog programa za obradu teksta. Kao to je pomenuto, itai Weba poput Netscape Navigatora i Internet Explorera, prate naredbe iz tekstualnog dokumenta koji pravite da bi na ekranu prikazali sadraj stranice. (Sadraj Web stranice ine tekst, slike, video, zvuk i sve ostalo to pomou HTML-a na u stavite). Ako mislite da je pravee Web stranice lako u pravu ste. Pravee Web lokacija je poelo kao najjednostavniji posao. Prvobitni HTML standard je opisivao jednostavan jezik koji se lako uio. Pomou tog jezika pravili su se samo tekstualni dokumenti, a mogli su ih videti svi koji su pristupali Internetu. Iako je komitet za standarde HTML-a (World Wide Web Consortium W3C) dodao veliki broj novih naredaba (koje se zovu oznake i atributi) i dae moete napraviti i najsloeniju Web stranicu kucajui jednostavne HTML naredbe u dokument koji pravite pomou programa za obradu teksta (npr. Windows Notepada). Na lokaciji W3C-a (www.w3.org) nalaze se opisi raznih Internet tehnologija, ukuujui HTTP, HTML, proiriv jezik za oznaavae hiperteksta XHTML (engl. Extensible Hypertext Markup Language), XML (engl. Extensible Markup Language), kaskadni opisi stilova CSS (engl. Cascading Style Sheets) itd. Poto ste saznali ta je Web stranica i (uopteno) kako se ona pravi, pozabavimo se na trenutak HTML-om Web stranice. Ako nemate stalnu vezu s Internetom, uspostavite modemsku vezu preko davaoca Internet usluga. Zatim pokrenite ita Weba i prikaite svoju omienu Web stranicu tako to ete u poe za adresu itaa uneti uniformnu lokaciju resursa (URL engl. Uniform Resource Locator), tj. adresu Web stranice. To moe biti, primera radi, http://www.Osborne.com. Nakon toga pritisnite ENTER. ita Weba e poslati Web serveru HTTP zahtev za stranicu iju ste adresu upisali. Poto server odgovori aui tu stranicu itau, ita e je prikazati i traiti umetnute objekte (npr. slike). Kad ita prikae sadraj stranice, izaberite stavku menija View | Source da biste videli HTML kd kojim je ta stranica opisana. (Ako koristite Netscape Navigator, izaberite stavku View | Page Source). Internet Explorer e upotrebiti Windows Notepad za ispisivae HTML koda stranice, dok e ga Netscape Navigator ispisati u novom prozoru na ekranu. Ne dozvolite da vas iskazi HTML-a uplae iz ove kige ete nauiti sve o ima. Zasad je bitno da zapamtite da moete videti izvorni kd svake Web stranice.
Uparene HTML oznake

U osnovi, Web stranica je tekstualna datoteka u kojoj se nalaze naredbe u obliku HTML kodova (oznaka) i atributa. Oznake su naredbe koje ita izvrava da bi formatirao tekst i umetnuo slike na stranicu. Neke naredbe u HTML-u moraju da imaju i poetnu i zavrnu oznaku. Takve naredbe se nazivaju uparene oznake (engl. container tags), jer se naredba iz poetne oznake odnosi na sadraj stranice sve do zavrne oznake.
Svaka naredba (tj. oznaka) u HTML-u poie znakom mae (<) iza ega se navode naziv oznake i atributi, a zavrava se znakom vee (>). Zavrna oznaka za svaku poetnu oznaku pravi se tako to se ispred naziva oznake stavi kosa crta (/). Tako su poetne oznake oblika <naziv oznake[atributi]>, a zavrne </naziv oznake>. Naziv oznake itau Weba otkriva namenu te oznake, dok atributi (ako ih ima) koji slede naziv oznake daju itau dodatne informacije pomou kojih on izvrava naredbu te oznake. Sledei kd, na primer, pokazuje kako oznake za poetak i kraj pasusa ( ) obuhvataju jedan deo teksta. U tom primeru oznaka govori itau da, koristei podrazumevana pravila formatiraa, prikae sav tekst do oznake .
 Ovo je primer teksta jednog pasusa. 
Ako hoete da ita prikae tekst u odreenom fontu ili boji, moete dodati oznaci (koja se nalazi iza oznake , a ispred tog teksta) atribute koji naznaavaju boju, font, veliinu i slino. O atributima emo vie govoriti kada zavrimo o oznakama.
HTML oznake odeka

Za sreivae razliitih delova HTML koda kojim se opisuje stranica koriste se oznake odeka. Tipovi oznaka HTML-a u svakom delu definicije Web stranice imaju odreenu namenu: <html></html> Ove oznake se pojavuju na poetku i na kraju HTML dokumenta. Izmeu ih se nalaze sve ostale oznake pomou kojih opisujete Web stranicu. <head></head> Poetna i zavrna oznaka zaglava slede neposredno iza poetnih HTML oznaka (<html>) i naznaavaju zaglave Web stranice. Oznake u zaglavu stranice obino se koriste za informacije kao to su ime autora i datum pravea stranice. Tu se jo dodaju i oznake s informacijama koje opisuju stranicu tako da pretraivai Weba prema indeksima pretrage mogu da upuuju na u. Od HTML oznaka i informacija koje stavite u zaglave, ita posetioca prikazuje samo naslov stranice. Naslov stavate u zaglave izmeu poetne i zavrne oznake naslova (<title></title>), kao to je prikazano u narednom primeru. <body></body> Poetna i zavrna oznaka tela stranice piu se odmah iza dela sa zaglavem Web stranice. U telu stranice nalaze se oznake koje itau govore ta da prikae na ekranu i kako to treba da izgleda. Sledei primer pokazuje ispravan raspored oznaka odeka u HTML-u:
<html> <head> <title> Naslov Web stranice </title> </head> <body> Ovde se stavaju tekstualni sadraj i HTML oznake tela stranice </body> </html>
HTML oznake moete pisati velikim slovima, malim slovima ili kombinovano, jer itai Weba sada ne prave razliku. Meutim, standardi kao to su XHTML i XML predviaju pisae oznaka samo malim slovima i pored toga to itai ne prave razliku. Piite sve oznake i atribute u HTML-u malim slovima, pa e itai Weba vae stranice moi da itaju i kada neki nov standard bude zahtevao koriee samo malih slova.
HTML prazne oznake

Pored uparenih oznaka (o kojima je bilo rei u ovom poglavu, u odeku Uparene HTML oznake), u HTML-u se koristi jo jedan tip oznaka koje se zovu prazne. Dok uparene oznake okruuju sadraj stranice, kao to je red teksta izmeu poetne i zavrne oznake, praznim oznakama ne treba zavrna oznaka. One su kao jedna naredba ili iskaz koji kae: Idi tamo ili uradi to. Na primer, u narednom HTML kodu oznaka za prelom reda ( ) govori itau da pree u sledei red pre nego to prikae ono to se jo nalazi na strani (drugi red teksta u ovom sluaju):
<html> <head> <title> Primer oznake za prelom reda </title> </head> <body> Tekst je prikazan u prvom redu Tekst je prikazan u drugom redu </body> </html>
Pravee Web stranice

Tekstualne dokumente je u HTML-u veoma jednostavno napraviti. Da biste napravili HTML dokument treba da otvorite program za obradu teksta i otkucate HTML kd. Poto ste uneli iskaze, dokument sauvajte kao tekstualnu datoteku s nastavkom .htm ili .html. Primera radi, pokrenite program za obradu teksta (npr. Windows Notepad) i unesite sledei HTML kd:
<html> <head> <title> Primer jednostavnog dokumenta u HTML-u </title> </head> <body> SVETE, EVO ME! </body> </html>
Sada to to ste uradili sauvajte u datoteci Web stranice (tj. u datoteci sa nastavkom .htm ili .html) na vrstom disku. Poto ete verovatno preuzimati dosta toga s Web lokacije Osborne ili unositi i uvati u programu za obradu teksta veliki broj Web stranica s kojima se u ovoj kizi budete susretali, najboe bi bilo da napravite direktorijum u kome ete sve to uvati (npr. C:\HTMLPrimeri). Kd koji ste malopre uneli sauvajte u tom direktorijumu kao ProbnaStranica.htm.
Da biste isprobali svoju prvu stranicu, pokrenite ita Weba i otkucajte File://. Iza toga u adresno poe itaa upiite ime diska i putau do vae Web stranice. Ako ste stranicu iz ovog primera sauvali kao ProbnaStranica.htm u direktorijumu C:\HTMLPrimeri, u adresno poe itaa upiite File://C:\HTMLPrimeri\ProbnaStranica.htm. Pritisnite ENTER. Na kraju e ita Weba prikazati stranicu sa slike 1-2. To je to! Sada ste autor Web stranice.
Kontrolisae formata teksta

U standardnoj obradi teksta, pasus se denie kao grupa reenica. Obino se poetak novog pasusa oznaava praznim ili uvuenim redom. U ovoj kizi, na primer, novi pasusi (izuzev prvog) poiu uvuenim redom. Uvuen (ili prazan) red je vizuelan znak da poie novi pasus.
Slika 1-2 Jednostavna Web stranica koju prikazuje Internet Explorer. Pri unosu teksta na Web stranicu oznaka obeleava kraj jednog i istovremeno poetak sledeeg pasusa. Oznaka govori itau Weba da pree u sledei red, umetne prazan red, a zatim u redu ispod praznog pone naredni pasus (u kome se nalazi tekst iza kojeg je oznaka ). U sledeem primeru, poetne i zavrne oznake pasusa () obeleavaju poetak i kraj svakog pasusa, kao to je prikazano na slici 1-3.
<html> <head> <title> Evo puno teksta </title> </head> <body> Tekst izmeu dve oznake pasusa ini jedan pasus. Svaki pasus ima jednu ili vie reenica. Sledei pasus poie ovde. Prazan red se umee izmeu dva pasusa. </body> </html>
Slika 1-3 Oznake pasusa rasporeuju tekst u grupe razdvojene praznim redovima. U HTML-u postoji i nekoliko oznaka za formatirae teksta koje moete koristiti da meate izgled teksta, obino kada elite neto da naglasite. Da biste formatirali tekst, stavite poetnu oznaku formata na poetak tog teksta. Sledi lista u kojoj su opisane tri najee oznake formata. Tekst koji se nalazi izmeu oznaka Bold bie prikazan polucrnim fontom. Tekst koji se nalazi izmeu oznaka Italic bie prikazan kurzivom. Tekst koji se nalazi izmeu oznaka Underline bie podvuen. Sledei kd u HTML-u prikazuje polucrni, kurzivni i podvueni tekst, kao to je prikazano na slici 1-4.
Slika 1-4 Oznake formata pomou kojih u HTML-u meate izgled teksta.
10

<html> <head> <title> Ovo su </head> <body> Ovaj tekst Ovaj tekst Ovaj tekst </body> </html>
osnovni stilovi teksta </title>
se prikazuje polucrnim fontom se prikazuje kurzivnim fontom se prikazuje podvuen 
HTML atributi
Atributi (jedan ili vie ih) umeu se u HTML oznaku da bi itau dali dodatne informacije o nainu na koji treba da izvri naredbu oznake. Na primer, oznaka govori Web itau da elite da promenite izgled teksta koji sledi. Atributi color i face, koji se u sledeem primeru nalaze iza imena oznake, govore itau kojom bojom (red crvena) i kojim fontom (Helvetica) treba da ispie tekst koji prati oznaku:
 Ovaj tekst je crven i ispisan fontom Helvetica. 
Atributi, koji se uvek piu iza imena oznake bilo da su one poetne ili prazne, sastoje se od tri dela. Prvo se pie ime atributa, zatim znak jednako (=) i, konano, vrednost atributa koja se nalazi izmeu navodnika (") ili polunavodnika ('). NAPOMENA ita Weba ignorie sve razmake s bilo koje strane znaka jednakosti (=) koji stoji izmeu atributa i egove vrednosti pod navodnicima. Tako ete viati i Web dokumente bez razmaka (kao u HTML iskazu iz prethodnog primera) i Web dokumente sa razmacima oko znaka jednako. Izaberite ono to vam vie odgovara, samo budite dosledni. ita Weba primeuje atribut ili atribute koje ste naveli iza poetne oznake sve dok ne proita odgovarajuu zavrnu oznaku. U narednom primeru, ita e prikazivati tekst boje i fonta naznaenih atributima color i face u okviru oznake sve dok u HTML kodu Web stranice ne naie na zavrnu oznaku . Slika 1-5 pokazuje sadraj oznake s dva atributa.
Rad s fontovima
Ako drugaije ne naznaite u HTML kodu stranice, posetioci vae Web lokacije vide tekst stranice u svom podrazumevanom fontu i stilu, podrazumevane boje i veliine. ita Weba posetioca kontrolie podrazumevana podeavaa teksta koji on na ekranu prikazuje. Upotrebom poetne i zavrne oznake fonta () kontroliete kako tekst na ekranu posetioca izgleda. Treba rei da je ova oznaka relativno zastarela, tj. da budue verzije itaa Weba, pravene po najnovijem HTML standardu, ovakvu oznaku moda nee imati, tako da e je ignorisati, kao i ene atribute. Iako izgled teksta moete meati atributima u okviru oznake , iste efekte, ako ne i boe, moete postii praveem CSS pravila, to ete nauiti u poglavu 4.
11
HTML naredbe i atributi dati su unutar uglastih zagrada Atribut Atribut
HTML naredba Ime atributa
Vrednost
Vrednost
Ime atributa
Slika 1-5 Sadraj oznake s dva atributa. Sledei atributi, napisani unutar poetne oznake, govore itau Weba kako da prikae tekst Web dokumenta: Atribut color odreuje boju teksta. Vrednosti boja mogu biti imena (npr. red, green, yellow, blue itd.) ili heksadecimalne vrednosti (npr. #FF0000, #008000, #FFFF00, #0000FF itd.) koje predstavaju koliine crvene, zelene i plave koje ita treba da pomea da bi dobio boju teksta koju elite. Atribut size odreuje veliinu teksta (u odnosu na veliinu osnovnog fonta) koristei vrednosti od -7 do 7. to je nia vrednost, to su maa slova. Atribut face odreuje ime fonta (npr. Times New Roman, Helvetica ili Arial). Ako font naveden u atributu fonta ne postoji na raunaru posetioca, ita e ignorisati atribut face i zameniti ga svojim podrazumevanim fontom. ita Weba kontrolie podrazumevane vrednosti boja, veliine i fonta. Da bi tekst ponovo imao podrazumevane vrednosti itaa Weba, stavite oznaku na kraj teksta koji ste meali atributima oznake . Sledei kd govori itau da tekst prikae crvenom bojom i fontom Helvetica, a zatim nastavi da prikazuje tekst (koji je naveden iza oznake ) u skladu sa svojim podrazumevanim vrednostima:
<html> <head> <title> Primer boje i fonta </title> </head> <body> Ovo je tekst crvene boje u Helvetica fontu A ovo je obian tekst </body> </html>
12
Kako da veem broju elemenata stranice dodelite isti skup atributa

Kada elite da veem broju susednih elemenata stranice dodelite isti skup atributa odjednom, stavite elemente na koje atributi treba da deluju izmeu poetne i zavrne oznake podele (<div></div>). Na primer, recimo da hoete izmeu leve i desne margine Web stranice da stavite dva reda teksta i sliku. Umesto da dodelite atribut align (poravnae) svakoj od tri HTML oznake, stavite oznaku <div> ispred prvog elementa, a oznaku </div> iza posledeg (kao to je pokazano u sledeem primeru).
<div align="center"> Ovaj tekst je staven IZNAD slike. <img src="image.jpg"> Ovaj tekst je staven ISPOD slike. </div>
Pomou oznake <div> moete da dodelite jedan ili vie atributa formatiraa grupi HTML oznaka, dok oznaka </div> govori itau da se vrati korieu podrazumevanih vrednosti atributa.
Izrada Web stranica korieem programa za ureivae i obradu teksta i namenskih aplikacija
Pravee izuzetne Web stranice zahteva dobro poznavae tehnike dizajniraa i potpuno razumevae znaea oznaka i atributa u HTML-u. Ako ostavimo po strani pojmove dobrog i loeg dizajniraa, pravee stranice se svodi na samo jednu stvar pravee dokumenta (tj. tekstualne datoteke) koji sadri HTML kd neophodan da bi ita Weba na ekranu prikazao ono to hoete. Iako se u ovom poglavu govori o osnovnom HTML kodu, dobro bi bilo da se upoznate s programima za pravee tekstualnih dokumenata pomou kojih ete pisati i uvati HTML kd stranice. Web stranica nije nita vie od tekstualnog dokumenta koji sadri tekst i HTML kd (oznake i atribute) potreban itau Weba da bi traene informacije prikazao na ekranu. Zato, za pravee Web stranice nije potreban poseban program. Jedino je potrebno opte poznavae HTML-a i program u kome moete uvati datoteku koja sadri samo tekst. Postoje tri vrste programa pomou kojih se mogu praviti HTML dokumenti: programi za ureivae teksta, programi za obradu teksta i programi za ureivae HTML koda (npr. Dreamweaver i Front Page). Svaki od ova tri tipa programa ima prednosti, a u nekim sluajevima i mane.
Programi za ureivae teksta

Program za ureivae teksta (engl. text editor) najjednostavniji je (verovatno se i najlake koristi) od tri tipa programa kojima se moe napraviti tekstualni dokument. To je program bez suvinih ukrasa, pomou koga unosite tekst u raunar i uvate ga u datoteci, na disku ili disketi. Raunar pod Windowsom ima program za ureivae teksta koji se zove Notepad, dok se kod raunara Machintosh taj program zove SimpleText.
13
Programi za ureivae teksta obino nemaju modul za proveru pravopisa i napredne alatke formatiraa, kao to su opis stila i pravila pasusa. Oni, meutim, doputaju da upiete informacije na elektronski list papira i to sauvate u datoteci. Najvea mana koriea programa za ureivae teksta pri praveu Web stranice jeste to ovim programima nije lako pisati oznake prema sintaksnim pravilima HTML-a. Program za ureivae teksta snima ono to kucate, ne obavetavajui vas da ste pogreno napisali neku re ili da postoji sintaksna greka. S druge strane, egova prednost je to to ete morati da bre nauite HTML, jer vas primorava da se oslonite iskuivo na svoje znae. Na slici 1-6 prikazan je HTML dokument napraven pomou programa Microsoft Notepad.
Slika 1-6 HTML dokument napraven u programu Notepad. Poto HTML kd upiete u Notepad, izaberite File | Save i unesite ime datoteke da biste Web stranicu sauvali na disku. Obavezno imenu datoteke dodajte nastavak .htm ili .html (a ne podrazumevano .txt).
Programi za obradu teksta

Dva najpopularnija programa za obradu teksta (engl. word processor) jesu Microsoft Word i Corel WordPerfect. Ovi programi imaju prednost nad programima za ureivae teksta jer mogu da proveravaju da li ste pravilno napisali rei. Ipak, ako nemate modul za proveru pravopisa napraven za HTML, proveete dosta vremena nalaui programu da ignorie HTML oznake, jer takve rei ne postoje ni u jednom jeziku.
14
Ako program za obradu teksta u kome radite nema HTML modul za proveru pravopisa, moete mu dati naredbu learn (naui) za nove rei. Primera radi, program za obradu teksta e oznaku slike <img> podvui kao pogreno napisanu re. Meutim, ako mu date naredbu da naui da je znakovni niz <img> pravilno napisan, nee ga vie podvlaiti. Savetujem vam da, pre nego to ponete da uite program novim reima, proverite da li ste sintaksiki ispravno napisali oznaku. Program za obradu teksta ima dve prednosti: prvo, moete mu rei da proveri pravopis rei i oznaka koje unosite u HTML datoteku Web stranice, a drugo, opet morate brzo nauiti HTML jer ete i dae upisivati u dokument HTML kd koji ita treba da izvri. Datoteku obavezno uvajte samo kao tekstualnu datoteku pomou funkcije save as programa za obradu teksta. Programi za obradu teksta rade neto to programi za ureivae teksta ne rade: u dokument umeu kontrolne kodove. Ovi kodovi utiu na to kako e ita Weba prikazati stranicu, pa ak izazivaju i da je uopte ne prikae ili da se sam ita poremeti. Zbog toga uvajte HTML datoteku kao isto tekstualnu datoteku.
Aplikacije za izradu Web stranica

Koristei ove aplikacije, Web stranice pravite na skoro isti nain kao kad koristite aplikacije za ureivae stranica za klasinu tampu (poput PageMarkera i QuarkXPressa). Na tritu postoji mnotvo aplikacija za izradu Web stranica, a tri najpopularnije su Adobeov GoLive, Macromedijin Dreamweaver i Microsoftov FrontPage. Kada koristite program kao to je GoLive, otvorite nov dokument, i tekst i slike unosite u prazan prozor. Kako stavate tekst i slike na Web stranicu, program sam pravi HTML kd. Prednost namenske aplikacije je u tome to, dok pravite stranicu, moete da pratite kako e ona izgledati u itau. Na slici 1-7 pokazano je kako izgleda pravee stranice u programu GoLive.
Slika 1-7 Pomou namenskih programa za izradu Web stranica, odmah vidite ta ste
uradili.
15
Mana ovakvih programa je to umesto vas piu ceo HTML kd. To na prvi pogled deluje kao prednost, ali u stvari ne dobijate ansu da nauite da radite ono to aplikacija moe da uradi umesto vas. Ako, na primer, elite da dodate odreenu karakteristiku na stranicu, a aplikacija nema dugme koje treba pritisnuti za to, neete ostvariti svoj naum, jer ne znate da piete HTML kd. Uz to, programi za izradu Web stranica nisu savreni; ponekad dodaju suvian kd. Vi taj kd ne moete da sklonite ako ne znate HTML da biste procenili ta vam treba, a ta je suvino. Ako tek poiete da se bavite Web dizajniraem, dobro bi bilo da najpre radite u programu za ureivae ili obradu teksta. Tek poto savladate HTML, preite na programe za izradu Web stranica kao to su Dreamweaver ili GoLive. Ako pak znate HTML, neki od navedenih programa bio bi najboi izbor za vas. Program za izradu Web stranice pie brzo HTML kd dok osmiavate stranicu, a u svakom momentu moete da ga prekinete da biste kd prilagodili svojim specinim potrebama.
Relativne i apsolutne putae datoteka

Kada pravite novu Web lokaciju, morate Web sadraj (tj. HTML dokumente, slike, animacije, zvuk i ostale propratne datoteke) prebaciti s raunara na kome ste ga napravili na Web server. Ako su Web stranice povezane sa stranicama iz istog ili povezanog direktorijuma (kao to su poddirektorijum ili roditeski direktorijum), utedeete dosta vremena i truda ako koristite relativne putae kada HTML oznakama neke Web stranice upuujete na datoteke. Kada posetilac izabere hipertekstualnu vezu, ita Weba, da bi naao datoteku koja mu treba, koristi putau koju je dobio od href atributa hiperveze. Pri naznaavau lokacije datoteke moete koristiti apsolutne ili relativne putae. Pretpostavimo, primera radi, da imate datoteku sa slikama koja se zove clock.jpg i nalazi se u direktorijumu Folder_B, a taj direktorijum je u drugom direktorijumu, Folder_A (slika 1-8). Relativna putaa sadri nazive direktorijuma koji su itau potrebni da bi doao do datoteke, a traee zapoie od Web stranice s hipervezom koja upuuje na spoau datoteku. Na primer, ako se clock.jpg nalazi u direktorijumu Folder_B (kao na slici 1-8), a Web stranica koja upuuje na datoteku clock.jpg se nalazi u Folder_A, relativna putaa za clock.jpg na trenutnoj stranici glasi: Folder_B/clock.jpg. Drugim reima, tekui direktorijum sadri Folder_B koji sadri datoteku clock.jpg. Sledea oznaka <img> koristi atribut src s relativnom putaom.
<img src="Folder_B/clock.jpg">
Relativna putaa itau Weba govori da traee datoteke zapone u direktorijumu koji sadri trenutni HTML dokument. Recimo da se HTML dokument koji sadri sliku iz oznake <img> iz prethodnog primera nalazi u direktorijumu idx_folder. Relativna putaa u atributu src govori da se direktorijum Folder_A nalazi u okviru direktorijuma idx_folder. Apsolutne putae pronalaze datoteku poevi od vrha hijerarhije direktorijuma ka dnu bez obzira na to gde se nalazi tekui Web dokument. Ovakve putae uvek poiu kosom crtom (/) da bi se razlikovale od relativnih putaa.
16
Slika 1-8 Hijerarhija direktorijuma datoteke clock.jpg. Pretpostavimo da se datoteka clock.jpg nalazi na disku D u direktorijumu Folder_B, koji se nalazi u Folder_A. Da biste naveli apsolutnu putau, morate rei itau gde da trai datoteku, poevi od diska na kome je ta datoteka unutar nekog direktorijuma. Sledei kd pokazuje apsolutnu putau za clock.jpg u primeru:
<img src="/D:Folder_A/Folder_B/clock.jpg">
Koriee apsolutnih putaa oteava pomerae datoteka Web lokacije s lokalnog diska na Web server ili s jednog Web servera na drugi. Na primer, da biste uspeno koristili relativne putae treba samo da napravite glavni direktorijum na Web serveru u kojem e biti lokacija, a zatim stavite sve dokumente i propratne datoteke u poddirektorijum u glavnoj datoteci. Relativne putae e biti ispravne na Web serveru kao to su i na vaem raunaru ak i ako ostatak hijerarhije direktorijuma Web servera ne lii na vau. Nasuprot tome, ako koristite apsolutne adrese, da bi Web server naao datoteke na koje upuuju hiperveze s vaih Web stranica, on mora imati potpuno istu hijerarhiju direktorijuma kao to je imate vi na raunaru.
Preuzimae i instalirae PWS Web servera

Kao to ste ve videli u ovom poglavu, u itau Weba moete prikazati stranice koje pravite i uvate na lokalnom ili mrenom disku, bez obaveze da se prethodno poveete s Internetom ili Web serverom. Samo unesite putau datoteke s nastavkom imena .html (Web stranica) kao File://<.html le pathname> u adresno poe itaa Weba. Znai, ako Web stranicu pod nazivom TestPage.htm sauvate u direktorijumu MyWebs u korenskom direktorijumu diska C, moete je prikazati u itau tako to upiete File://G:/MyWebs/ TestPage.htm.
17
Da bi vae stranice bile dostupne svima koji se povezuju s Internetom, morate imati Web server. U poglavima 10, 11 i 12 videete da vam Web server treba i za izvravae serverskih skriptova (to su programi koje pokree server za vau Web stranicu). Ako koristite operativni sistem Windows (Windows 95, 98, Me, NT ili XP), moete besplatno instalirati program Personal Web Server (PWS). Poto ga instalirate i uspostavite vezu s Internetom, svi korisnici Weba moi e da vide stranice koje ste objavili. PWS moete koristiti i za proveraravae Web stranica s kojih se au obrasci i stranica sa serverskim skriptovima, kao to su one umetnute u PHP i Active Server Pages (o kojima ete uiti u poglavima 10 i 11). Ako imate CD sa Windowsom 98, ubacite ga u CD-ROM i preskoite opis procedure preuzimaa koji sledi; nai ete PWS u direktorijumu \Add-Ons\ PWS. U protivnom, PWS morate instalirati iz Windows NT 4 Option Packa koji moete preuzeti s Microsoftove Web lokacije na Internetu, na sledei nain:
PRIMER
1. Ako nemate stalnu vezu s Internetom uspostavite modemsku vezu preko davaoca Internet usluga. 2. Pokrenite ita Weba, upiite sledeu URL adresu u adresno poe: http:// www.microsoft.com/msdownload/ntoptionpack/askwiz.asp i pritisnite ENTER. 3. Na stranici Windows NT Option Pack izaberite hipervezu Option 1. Potom e va ita prikazati stranicu Download Step 2 na kojoj moete izabrati operativni sistem za koji preuzimate NT 4 Option Pack. 4. Na stranici Download Step 2, izaberite operativni sistem iz padajue liste. Izaberite opciju Windows 95, osim ako PWS ne instalirate na operativni sistem NT Workstation ili NT Server. Za NT Workstation izaberite opciju NT Workstation, a za NT Server instalirajte Internet Information Server (IIS) umesto PWS. Zatim pritisnite Next, nakon ega e ita Weba prikazati stranicu Download Step 3. 5. Pritisnite vezu download.exe u doem desnom uglu. Windows e prikazati okvir za dijalog File Download. 6. Izaberite radio-dugme Save This Program To Disk, a zatim pritisnite OK. Windows e prikazati okvir za dijalog Save As. 7. U padajuoj listi koja se nalazi desno od poa Save In izaberite direktorijum u kome ete uvati programsku datoteku download.exe. Na primer, ovu listu moete koristiti da doete do direktorijuma C:\My Download Files. Pritisnite Save. 8. Pomou Windows Explorera doite do direktorijuma u kome ste sauvali download.exe. Pokrenite tu aplikaciju, a ona e prikazati ugovor o dozvoli za Windows NT 4.0 Option Pack. 9. Proitajte uslove ugovora, pa pritisnite Yes da biste nastavili instalirae. Program preuzimaa e na kraju prikazati okvir za dijalog Download Options. 10. U tom okviru za dijalog pritisnite radio-dugme Download Only, a zatim dugme Next. Prikazae se prozor sa opcijama Language and CPU/Operating Systems. 11. Izaberite jezik, CPU (procesor) i operativni sistem i pritisnite Next. Program e prikazati prozor Installation Options.
18
12. Pritisnite dugme Full Installation, a zatim Next. Bie prikazan prozor Save In Folder. 13. Unesite direktorijum u koji elite da program preuzimaa smesti datoteke NT 4 Option Packa. (Na primer, u poe Save In Folder moete uneti C:\PWSSetupFiles.) Pritisnite Next. Program preuzimaa e prikazati okvir za dijalog Download Location sa listom lokacija s kojih moete preuzeti NT 4 Option Pack. 14. U okviru za dijalog Download Location izaberite lokaciju za preuzimae koja je vama geografski najblia (ako na listi postoji vie lokacija). Pritisnite Next i program e vam pokazati sertikat o bezbednosti lokacije za preuzimae. Pritisnite Yes i zavrtite preuzimae NT 4 Option Packa. Nakon zavrenog koraka 14, program e preuzeti NT 4 Option Pack s lokacije koju ste izabrali i egove datoteke staviti u direktorijum zadat u koraku 13. Pre nego to pokrenete PWS, morate instalirati aplikaciju na raunar. Da biste instalirali PWS, pratite sledee korake, bez obzira na to da li ste preuzeli NT 4 Option Pack ili ste koristili CD Windows 98. 1. Pokrenite program setup.exe sa CD-a Windowsa 98 (x:\Add-Ons\PWS\Setup.exe, gde je x naziv vaeg CD-a) ili iz direktorijuma koji ste uneli u koraku 13 prethodne procedure preuzimaa. 2. Na poetnom ekranu instalacije programa podeavaa pritisnite Next. Taj program e prikazati PWS End User License Agreement. Poto proitate ugovor, pritisnite Accept da biste nastavili instalirae. Program podeavaa e na kraju pokazati ili okvir za dijalog Installation Options ili okvir za dijalog Select Components. (Nije bitno koji okvir za dijalog program prikazuje. Koji e se okvir za dijalog pojaviti zavisi od toga da li nadograujete stariju verziju PWS-a, ponovo instalirate tekuu verziju, ili prvi put instalirate Web server). 3. U okviru za dijalog pritisnite Next da biste prihvatili podrazumevane opcije instaliraa. Nakon izvrenog koraka 3, program Setup e zavriti instalirae softvera PWS i traiti da restartujete raunar. Tada e Windows pokrenuti PWS. Kada sledei put budete videli radnu povrinu Windowsa, potraite ikonicu PWS na Windowsovoj sistemskoj paleti (u desnom, doem uglu prozora). Naredni savet e vam pokazati kako da radite s Web serverom i kako da objavujete svoje Web stranice na intranetu kompanije ili na samom Internetu.
Rad s PWS Web serverom i objavivae Web stranice

Poto ste prema prethodnom uputstvu uspeno instalirali program Personal Web Server (PWS), morate nauiti kako da pokrenete i zaustavite Web server i kako da utvrdite mesto matinog direktorijuma servera. U ovu svrhu se koristi alatka Personal Web Manager, koju moete pokrenuti na razliite naine, zavisno od operativnog sistema.
19
Najlaki nain da pokrenete Personal Web Manager jeste da dvaput pritisnete ikonicu programa, ili da, u Windowsu 98, izaberete stavku menija Start | Programs | Microsoft Personal Web Server, a zatim Personal Web Manager. Poto pokrenete Personal Web Manager, prikazae se glavni ekran programa slinog onom na slici 1-9. U emu se nalazi ime Web servera i egovog matinog direktorijuma.
PRIMER
Slika 1-9 Glavni ekran programa Personal Web Manager. Ime vaeg Web servera bie prikazano u vrhu stranice, plavim slovima. Ko god radi na vaem raunaru ili koristi drugu radnu stanicu na vaoj lokalnoj mrei, moe pomou imena Web servera da vidi Web stranice s vaeg PWS-a. Ime Web servera moete promeniti tako to ete promeniti ime svog PC-ja na kartici Identication okvira za dijalog Network Properties, u Control Panelu. Glavni ekran programa Personal Web Manager isto tako pokazuje korenski direktorijum PWS-a plavim slovima, neposredno ispod imena servera. Kada znate ime Web servera i korenskog direktorijuma, moete da objavite svoje Web stranice. Neka je, na primer, ime vaeg raunara (time i ime vaeg PWS-a) zdravko, a korenski direktorijum servera C:\WebShare\wwwroot. Ako stranicu, npr. TestPage.htm, stavite u direktorijum C:\WebShare\wwwroot svog raunara, vi (i svako ko koristi radnu stanicu povezanu na vau lokalnu mreu) moete da prikaete Web stranicu tako to ete u adresno poe upisati http://zdravko/TestPage.htm i zatim pritisnuti ENTER. Pretpostavimo sada da ste napravili datoteku ispod korenskog (najvieg) direktorijuma Web servera koja se zove HTDocs i u u stavili Web stranicu kao to je TestPage2.htm. Putaa za ovu stranicu bila bi c:\WebShare\wwwroot\htdocs\TestPage2.htm. Meutim, stranicu moete prikazati pomou itaa tako to ete u adresno poe itaa upisati URL http://zdravko/htdocs/TestPage2.htm i pritisnuti ENTER.
20
Osim itaa s radnih stanica povezanih na lokalnu mreu, moete raunarima irom sveta preko Interneta omoguiti pristup vaim Web stranicama. Za to je potrebno da se poveete s Internetom i posetiocima date svoju IP adresu. Ako vam davalac Internet usluga nije dodelio stalnu adresu (naravno, po ceni mesene pretplate), ne zaboravite da va PWS moe biti na razliitoj IP adresi svaki put kada se poveete s Internetom. Ako nemate stalnu IP adresu, IP ete saznati ako pokrenete ipconfig.exe. Ovaj program se izvrava pod komandnim okrueem MS DOS-a. Da biste pokrenuli MS DOS, izaberite Start | Run, nakon ega e Windows prikazati okvir za dijalog Run. U poe Open tog okvira upiite command.com, a potom pritisnite ENTER ili OK. U komandni prozor MS DOS-a upiite ipcong.exe i pritisnite ENTER. Ova aplikacija e dati IP adresu odmah iznad stavke Subnet Mask, kao to je prikazano na slici 1-10.
Slika 1-10
Program ipconfig pokazuje IP adresu raunara.
(Moete pokrenuti i Windowsovu verziju ipcong.exe ako izaberete Start | Run, a zatim u poe Open okvira za dijalog Run upiete winipcfg.exe). Poto ste saznali IP adresu raunara, zamenite je imenom Web servera da biste pristupili serverovim Web stranicama na Internetu. Ako, na primer, imamo PC s IP adresom 24.234.31.218, upotrebite neto od sledeeg da biste stranice iz prethodnog primera pogledali preko Interneta:
http://24.234.31.218/TestPage.htm http://24.234.31.218/HTDocs/TestPage2.htm
Poto ste utvrdili IP adresu raunara, moete je dati drugima. Ne zaboravite da e se vaa IP adresa promeniti kada se poveete s Internetom u sluaju da vam dobava Internet usluga nije dodelio statiku (trajnu) IP adresu. tavie, IP adresa se moe promeniti i bez vaeg znaa, pa ak i ako imate stalnu vezu s Internetom. Kada se IP adresa vaeg Web servera promeni, oni koji pokuaju da vide vae stranice koristei staru IP adresu nee uspeti, bez obzira na to to PWS radi i to je va raunar povezan s Internetom.
21
Reee je traiti od davaoca Internet usluga statiku IP adresu. On vam to trenutno ne moe uraditi ako se s Internetom povezujete preko modemske veze putem obine telefonske linije neophodno je da imate vezu s Internetom preko ISDN, DSL ili kablovskog modema. Kada dobijete statiku IP adresu, morate je uneti u raunar, u okvir za dijalog TCP/IP Properties. To ete uraditi na sledei nain: 1. Izaberite stavku menija Start | Settings, a zatim Control Panel. Windows e otvoriti Control Panel. 2. U prozoru Control Panel dvaput pritisnite ikonicu Network. Prikazae se okvir za dijalog Network. 3. Na kartici Conguration ovog okvira za dijalog pritisnite TCP/IP da biste izabrali protokol. (Ako imate Windows NT na raunaru, ovaj protokol ete nai na kartici Protocols, u okviru za dijalog Network.) Potom pritisnite Properties. Windows e otvoriti okvir za dijalog TCP/IP Properties. 4. Na kartici Address ovog okvira za dijalog, pritisnite dugme Specify An IP Address. Zatim unesite IP adresu i mrenu masku koje vam je dao dobava Internet usluga. Poto ste zavrili korak 4, pritisnite OK na dnu okvira za dijalog TCP/IP Properties, a zatim i OK na dnu okvira za dijalog Network. Windows e aurirati raunar i traiti da ga resetujete. Poto to uradite i ponovo se poveete s Internetom, PWS e biti uvek dostupan na istoj (statikoj) IP adresi. Kada va raunar ima statiku IP adresu, moete da dobijete ime domena, bilo od davaoca Internet usluga, bilo iz registra imena domena kao to je VeriSign (http://www. NetSol.com). Poto dobijete ime domena, npr. MyWebServerName.com, traite od davaoca Internet usluga da u svom serveru imena domena (DNS) povee ime vaeg domena s vaom IP adresom. S imenom domena koje pokazuje na pravo mesto, posetioci irom Interneta moi e da vide Web stranice s vaeg PWS-a ili koristei vau IP adresu (kao to ste ranije videli) ili pristupajui Web serveru s imenom vaeg domena, kao u sledeem primeru:
http://www.MyWebServerName.com/TestPage.htm http://www.MyWebServerName.com/HTDocs/TestPage2.htm
Ako imate modemsku vezu s Internetom ili ne elite da platite za statiku IP adresu pa koristite jedan od svojih raunara kao Web server, davalac Internet usluga moe smestiti vau Web lokaciju na svoj server. Mnogi davaoci nude 510 MB (ak i vie) prostora na Webu uz uplaeno vreme na Internetu. Raspitajte se kod svog davaoca Internet usluga ili kod registratora imena domena (kao VeriSign) o ihovoj ponudi prostora na serveru. Ako vam va ili neki drugi davalac Internet usluga obezbeuje prostor za Web lokaciju, jednostavno ete kopirati stranice koje elite da objavite u hijerarhiju datoteka vae lokacije na disk tog davaoca, umesto u korenski direktorijum PWS-a na vaem disku. Poto instalirate PWS, svaki put kad ukuite raunar Windows automatski pokree Web server. Da biste zaustavili server, ispod egovog imena, u goroj polovini glavnog dela programa Personal Web Manager pritisnite dugme Stop. (Kad zaustavite PWS, Web server e biti zaustaven sve dok ga ponovo ne pokrenete.) Da biste ponovo pokrenuli PWS, pritisnite dugme Start koje je zamenilo dugme Stop pomou koga ste zaustavili Web
22
server. (PWS moete potpuno ili privremeno zaustaviti biraem Properties | Stop Service, odnosno Properties | Pause Service, a Web server moete ponovo pokrenuti biraem Properties | Start Service, odnosno Properties | Continue Service).
Opisivae sadraja Web stranice naslovom

Dok krstarite Webom, va ita e u svojoj naslovnoj traci (u vrhu prozora aplikacije itaa) prikazivati naslov svake Web stranice koju pregledate. Naslov stranice daje ime i, u nekoliko rei, opisuje namenu te stranice (slika 1-11).
Naslov Web stranice
Slika 1-11
Naslov Web stranice pojavuje se na naslovnoj traci, u prozoru itaa.
Da biste napravili naslov stranice, umetnite tekst naslova izmeu poetne i zavrne oznake naslova (<title></title>) u zaglavu HTML-a Web stranice. To je pokazano sledeim primerom:
PRIMER
<html> <head> <title> Dobro doli u Zdravkovu prezentaciju Uvodna stranica </title> </head> <body> ...Sadraj koji ita Weba prikazuje ide ovde... </body> </html>
23
Naslov stranice bi trebalo da posetiocima opisuje en sadraj. Kad god posetilac baci pogled na naslovnu traku, ona treba da ga podseti na ime i namenu stranice koju trenutno vidi. U Web prezentacijama s velikim brojem stranica, naslovi stranica slue kao putokazi. Meutim, naslovi ne slue samo da podseaju posetioce gde se trenutno nalaze, ve se koriste i u sledee svrhe: itai Weba koriste tekst naslova kada posetilac obelei stranicu da bi je kasnije lako pronaao, tj. kada je u Internet Exploreru stavi u listu Favorites ili u Netscape Navigatoru u listu Bookmarks. Naslov tipa Home Page ne izdvaja vau lokaciju od ostalih u listi omienih lokacija posetioca. Paukovi (automatizovani programi za pretraivae Weba) za pretraivae koriste tekst naslova. Opet, naslov kao Home Page ne prua korisne informacije. U naslovima koristite opisne rei rei koje bi posetioci mogli uneti u poe za pretragu kada hoe da nau vau Web lokaciju. Tekst naslova pomae vama kao autoru da kontroliete lokaciju sastavenu od vie stranica. Naslov je neto kao zaglave pomou koga prepoznajete stranicu. Ako vaa Web lokacija ima petnaest stranica, naslovi e vam pomoi da bre naete onu koju traite. Na primer, Web lokacija za prodaju nekretnina, pomou naslova moe da istakne stranice za prodaju kua, prodaju stanova itd. Osim ovih pravila, treba da znate da se, po W3C-u, stranica bez naslova smatra neispravnom. Pomou naslova, Web autori prave standardizovane stranice. Jednom, kada naslov bude obavezan deo stranice, vaa e zadovoavati nove standarde.
Prepoznavae Web dokumenata pomou definicije tipa dokumenta

Jedan od najboih naina da nauite tehnike HTML-a jeste da gledate HTML iskaze koriene za stranice koje viate na Webu. Da biste pogledali izvorni kd Web stranice, izaberite stavku menija itaa View | Source. (Ako koristite Netscape Navigator, izaberite stavku View | Page Source). Dok budete gledali stranice, primetiete da mnogi HTML dokumenti na poetku stranice imaju oznaku tipa dokumenta (<!doctype>). Definicija tipa dokumenta DTD (engl. Document Type Denition) identikuje verziju HTML-a koja je koriena za pravee stranice. Ova informacija je bitna itaima Weba, programima za proveru ispravnosti HTML koda i ostalim programima koji se koriste za izradu Web strana. Da biste proverili ispravnost postojeeg HTML dokumenta, idite na http://validator.w3c.org. Programi za proveru ispravnosti HTML koda proveravaju raspored i sintaksu Web dokumenta na osnovu informacija dobijenih iz DTD-a. Ako se prema deklaraciji vidi da se dokument dri verzije HTML 4.01, program proverava da li je stranica po standardu HTML 4.01 i sastava izvetaj o rezultatima provere.
PRIMER
24
U budunosti e poznavae verzije HTML-a koja je koriena za pravee stranice pomagati itaima i ostalim programima da prikau stranicu s veom tanou. Prema W3C standardu, ak i stranica napravena u HTML-u 4 neispravna je ako HTML dokument ne poie denicijom tipa dokumenta. Ova denicija se pie na vrhu HTML dokumenta, ispred oznake <html>. Sledi primer ispravnog formata za uobiajenu deniciju tipa dokumenta:
<!doctype html public "naziv verzije" "url">
html Oznaava kd kao verziju HTML-a. public Oznaava da se jeziku moe javno pristupiti. naziv verzije Oznaava celo ime za odreenu verziju HTML-a. Na primer, celo ime za HTML 4.0 je -//W3C//DTD HTML 4.01 Transitional//EN. url Oznaava gde se na World Wide Webu nalazi javna denicija HTML koda, npr. www.w3.org/TR/html4/loose.dtd. Ispravna definicija tipa dokumenta za Web stranicu u verziji HTML-a 4.01 bila bi:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd">
Opcija loose.dtd iz prethodnog primera govori da dokument moe sadrati sve dozvoene elemente iz stroge verzije HTML 4, dodatne atribute opisivaa kao i zastarele elemente. Nasuprot tome, opcija strict.dtd pokazuje da se dokument strogo dri standarda za HTML 4. Stroga verzija HTML-a 4.01 daje prednost strukturi HTML dokumenta u odnosu na predstavae stranice u itau Weba. To ne znai da ova verzija stranicu zapostava ona se, jednostavno, usredsreuje na HTML kd. Zastarele oznake i elementi kao to su okviri i odredita veze nisu dozvoeni u strogoj verziji. Trea denicija tipa dokumenta, frameset.dtd, koristi se kada HTML kd, ija se ispravnost proverava, sadri okvire. Ni Internet Explorer ni Netscape Navigator trenutno ne trae da navedete definiciju tipa dokumenta pre poetka HTML koda Web stranice, tj. pre poetne oznake <html>, koja je na vrhu dokumenta. Ipak, trebalo bi da je navedete na poetku svake stranice koju opisujete HTML-om verzije 4.0 ili novije. Ono to je danas proizvono, u bliskoj budunosti moe postati obavezno, pa tako budite ispred ostalih i navedite definiciju tipa dokumenta sada. (Zbog ogranienosti prostora, a i da ne bismo komplikovali, primer denicije tipa dokumenta izostavili smo iz ove kige.)
Umetae komentara u Web dokument

HTML komentari su nain da se vi (i svako ko radi s vaim HTML dokumentima) podsetite o emu ste tano razmiali kad ste pravili odreenu Web stranicu. Komentare moete koristiti da biste objasnili odreene delove dokumenta. U ih moete umetnuti i line informacije kao to su vae ime, adresa i broj telefona, tako da svako ko je zainteresovan za vae dizajnerske usluge moe da vas pronae. Pored toga, komentare moete koristiti da biste privremeno sakrili neke HTML iskaze Web dokumenta od itaa Weba. Pretpostavimo, na primer, da hoete da dodate deo HTML
25
koda postojeem dokumentu, ali ne elite da ita prikae taj novi deo dok vam uprava to ne odobri. Stavaem HTML oznaka komentara () oko iskaza koje elite da sakrijete, govorite itau da ignorie te iskaze dok ne uklonite oznake komentara. Da biste napravili komentar, odgovarajui tekst (ili HTML iskaze koje hoete da komentariete) obuhvatite izmeu poetne i zavrne oznake komentara, kao to su <! -- komentar -- >. Nije potrebno stavati oznaku komentara ispred svakog reda teksta ili HTML iskaza, jer e ita Weba ignorisati sve na ta naie posle poetne, a pre zavrne oznake komentara. U sledeem primeru su tri reda komentara umetnuta u zaglave Web stranice:
PRIMER
<head> <title> Dokument koji sadri komentare </title> <! -- Autor ZDRAVKO ZDRAVKOVIC Firma Zdrave. Telefon 001 333 4444 -- > </head>
Iako ita Weba ne prikazuje na ekranu ono to stavite izmeu poetne i zavrne oznake komentara, posetilac lokacije i dae moe da vidi komentare ako d naredbu itau da prikae HTML kd Web stranice. ita e u zasebnom prozoru dokumenta prikazati izvorni kd (ukuujui i komentare) HTML dokumenta. Osim za pruae linih informacija, komentare moete upotrebavati i za obuavae da bi se lake razumela namena odreenih HTML oznaka i atributa. Moete ih koristiti i da biste spreili prikazivae umetnutih skriptova ako ita Weba nema mogunost da prepozna oznaku skripta, kao to je prikazano u sledeem primeru:
<html> <head> <script language="JavaScript"> <!-function displayIt() { alert(Ova funkcija JavaScripta prikazuje ovaj tekst u prozoru itaa!) return; } //--> </script> </head> <body> ...Sadraj Web stranice koji ita treba da prikae dolazi ovde... </body> </html>
Bez oznaka komentara, koje se u ovom primeru nalaze oko denicije funkcije JavaScripta, itai koji ne mogu da prepoznaju oznaku skripta, tu bi oznaku ignorisali i prikazali JavaScript kd na ekranu kao tekst. Nasuprot tome, itai koji prepoznaju ovu oznaku ignoriu HTML oznake komentara jer se u skriptovima koriste i // i /* */ za oznaavae komentara.
26
Zadavae fonta za tekst Web stranice

Pri prikazivau teksta Web stranice, ita koristi svoj podrazumevani font i veliinu slova osim ako ne naznaite drugaije u HTML kodu Web stranice. Kontrolisae veliine i izgleda teksta je vano jer utie na opti utisak o stranici. Vanost tipograje ne zavrava se sa samim reima. Dizajneri, na primer, koriste odreeni font i veliinu slova da bi naznaili vanost odreenih pasusa, pa su stoga zaglava vea i esto razliitog fonta od ostatka teksta. Font koji izaberete prenosi raspoloee i pravi atmosferu u kojoj posetilac ita poruku. Upotreba pogrenog fonta moe zbuniti posetioca, jer izgled stranice ne odgovara sadraju. Nekoliko studija (od kojih je jedna raena na univerzitetu Yale) govori da serifni fontovi sugeriu ozbiniji sadraj nego neserifni. Zbog toga se fontovi kao to su Times New Roman ili Palatino koriste za formalne dokumente, a oni poput Comic Sansa ili Ariala za mae ozbine ili neformalne poruke, kao u sledeim primerima:
PRIMER
Da biste promenili font, tekst izmeu poetne i zavrne oznake fonta okruite na sledei nain:
 ...tekst Web stranice prikazan u naznaenom fontu... 
Atribut face govori itau Weba koji font da koristi kad na ekranu prikazuje tekst Web stranice. Na primer, poetna oznaka fonta govori itau da prikae tekst iza oznake fontom Helvetica sve dok ne naie na oznaku :
 Ovaj tekst je prikazan fontom Helvetica 
Kada ita naie na oznaku u HTML kodu Web stranice, vraa se na prikazivae teksta svojim podrazumevanim fontom. Atribut face daje naredbu itau Weba da u raunaru posetioca pronae odreeni font (u naem sluaju Helvetica). ita Weba e taj font koristiti kada prikazuje tekst koji se nalazi izmeu poetne i zavrne oznake fonta (). Meutim, ako posetilac nema instaliran taj font na svom raunaru, ita Weba e koristiti svoj podrazumevani font. Posetilac lokacije moe izabrati podrazumevani font itaa u svojstvima itaa. Na primer, da biste promenili podrazumevani font Internet Explorera 5, izaberite stavku menija Tools | Internet Options. Zatim pritisnite dugme Fonts, nakon ega e Internet
27
Explorer prikazati okvir za dijalog Fonts gde ete izabrati podrazumevani font itaa. Podrazumevani font govori itau Weba kakva slova da koristi kada u Web dokumentu nije zadat font ili kada raunar posetioca nema zadati font. Osim primarnog fonta, atribut face omoguava da izaberete drugi, trei, pa ak i etvrti font. Recimo da hoete da tekst dokumenta bude prikazan fontom Helvetica. Ako Helvetica ne postoji na raunaru, font Georgia je prihvativa zamena. Sledeim kodom je pokazano kako se zadaje alternativni font, koji se koristi kada primarni font ne postoji na raunaru posetioca:
 Primarni font je Helvetica. Ako na odredinom raunaru ne postoji Helvetica, ita e koristiti font Georgia. 
Atribut face govori itau Weba da prikae tekst izmeu poetne i zavrne oznake fonta () koristei font Helvetica, a u sluaju da tog fonta nema fontom Georgia. Ako na raunaru posetioca nema ni primarnog ni alternativnog fonta, ita e upotrebiti svoj podrazumevani font. Kada zadajete fontove, ihova imena piite malim slovima jer e tada sistem traiti ihova imena napisana i malim i velikim slovima. Ako ih pak napiete velikim slovima, a sistem posetioca taj font ima instaliran pod imenom napisanim malim slovima, ita nee nai traeni font.
Kontrola toka teksta pomou oznaka za pasus i oznaka za prelom reda

Kada neformatiran tekst stavite na Web stranicu, irina prozora itaa odreuje broj rei koji e ita u svakom redu na ekranu prikazati. Neformatiran tekst je obian tekst unesen u HTML dokument izmeu poetne i zavrne oznake tela koda (<body> </body>), kao u sledeem primeru:
<html> <head> <title> Primer neformatiranog teksta </title> </head> <body> Kada unosite neformatiran tekst u HTML dokument, nije bitno kako taj tekst unutar dokumenta izgleda jer ita ne prepoznaje znakove CR ili Enter kao ispravne alatke formatiraa. </body> </html>
itai Weba ignoriu znakove CR i LF koje umeete u HTML kd Web stranice pritiskajui ENTER da biste pri kucau preli u sledei red. itai podrazumevano deniu duinu reda prema irini prozora Web itaa, a ne prema tome koliko ste znakova uneli
28
u HTML kd Web stranice. Sledei primer ilustruje kako ita Weba podeava duinu reda neformatiranog teksta iz prethodnog HTML koda prema irini prozora itaa.
Da biste deo teksta grupisali u pasus i odredili posledu re svakog reda, koristite poetne i zavrne HTML oznake pasusa () i oznaku . Kada ita naie na oznaku on pree na sledei red ekrana, umetne prazan red, a zatim u redu ispod praznog prikae tekst koji je iza oznake . Stoga, da biste povezane reenice grupisali u pasuse, stavite oznaku ispred prve rei pasusa, a iza poslede. Ako, primera radi, stranica ima tri reda teksta i svaki je okruen poetnom i zavrnom oznakom pasusa, ita e taj tekst prikazati kao tri pasusa s praznim redom izmeu svaka dva. Za razliku od oznake , oznaka nema svoju zavrnu varijantu. Kada ita naie na oznaku u HTML kodu stranice, prelazi na sledei red ekrana pre nego to prikae dodatni tekst. Stoga, da bi ita preao na sledei red pre nego to nastavi s prikazivaem teksta, moete koristiti ili ili . Ako hoete samo da preete u sledei red, koristite , a kada elite jo i da umetnete prazan red, koristite . Sledei primer opisuje uinak oznaka i i pokazuje kako e tekst izgledati u itau Weba, to se vidi na slici 1-12.
PRIMER
<html> <head> <title> Primer formatiranog teksta </title> </head> <body> Kada u HTML dokument unesete formatiran tekst. Mesta oznaka pasusa i oznaka za prelom reda u okviru HTML dokumenta odreuju prelome reda u tom tekstu. Oznake pasusa ostavaju prazan red izmeu redova teksta, dok oznake za prelom reda prelamaju red bez umetaa dodatnog praznog reda. </body> </html>
Oznake formatiraa (kao to su i ) odreuju gde se u itaevom prozoru red teksta zavrava. Analogija s programima za obradu teksta bila bi: oznaka jednaka je jednom pritisku na taster ENTER, dok oznaci odgovaraju dva pritiska.
29
Slika 1-12
Formati teksta u prozoru itaa Weba zasnovani na upotrebi oznaka pasusa i oznaka za prelom reda.
ita Weba (kao i program za obradu teksta) prelama tekst svake stranice na desnoj margini. Ne zaboravite da desna strana u Web dokumentu predstava desnu marginu Web stranice. Zbog toga moete koristiti oznake formatiraa da biste odredili koja e re u redu biti posleda, ali e ita, ukoliko treba prelamati tekst da bi svaki red odgovarao irini prozora itaa. Iako, kao to smo ve naglasili, irina prozora itaa odreuje irinu reda teksta, ponekad ne elite da ita prelomi red teksta. U tim sluajevima, upiite znak za nelomivi razmak ( ) izmeu rei koje elite da ita prikae u istom redu. Recimo da ste napravili podnaslov za pasus teksta i hoete da on bude u jednom redu. Da biste to postigli, umetnite znak za nelomivi razmak izmeu rei podnaslova, kao u sledeem primeru:
<html> <head> <title>Example of using a no break space</title> </head> <body> A Message from Abraham Lincoln This country, with its institutions belongs to the people who inhabit it. Whenever they shall grow weary of the existing government, they can execute their constitutional right of amending it, or their constitutional right to dismember it or overthrow it. <cite>Abraham Lincoln</cite> </body> </html>
U ovom primeru, znak za nelomivi razmak, umetnut izmeu rei Abraham i Lincoln, spreava ita da razdvoji ime u dva reda. Ako ita nema dovono mesta za obe rei u tekuem redu, prikazae ih u sledeem redu zajedno (kao na slici 1-13).
30
Da se izmeu ove dve rei nalazio obian razmak (a ne nelomivi), ita bi prvu re prikazao u jednom, a drugu u drugom redu teksta.
Slika 1-13
Znak za nelomivi razmak spreava prikazivae imena u dva reda.
Meae veliine teksta pomou oznaka nivoa naslova i atributa size oznake fonta
Kada pravite Web dokument bez naznaavaa veliine fonta, ita Weba e tekst prikazati u podrazumevanoj veliini. Podrazumevane vrednosti koje itai koriste za veliinu znakova razlikuju se, ali su najee od 12 do 14 taaka. Da biste umetnuli tekst naslova Web stranice i zadali egovu veliinu, oko teksta stavite poetne i zavrne oznake nivoa naslova (od <h1> ... </h1> do <h6> ... </h6>). Broj iza slova h naznaava relativnu veliinu teksta naslova; to je broj mai, to je naslov na ekranu vei. Da biste oznake nivoa naslova koristili za odreivae veliine teksta na stranici, tekst stavite izmeu poetne i zavrne oznake naslova. Kada ita naie na zavrnu oznaku naslova u HTML kodu Web stranice, on automatski stava tekst koji tu oznaku sledi u naredni red i vraa se prikazivau teksta u podrazumevanoj veliini. Sledei primer pokazuje koriee est nivoa naslova razliitih veliina pomou poetne oznake naslova i pokazuje kako e svaki od tih naslova izgledati u prozoru itaa.
PRIMER
31
Drugi nain da promenite veliinu teksta HTML dokumenta jeste da upotrebite atribut size u oznaci i to u obliku (n je broj od 1 do 7). Pri upotrebi ovog atributa, to je vea vrednost, to je vei i tekst nasuprot oznakama naslova kod kojih se poveaem broja n veliina slova smauje. Da biste tekst podesili pomou atributa size, postavite ga izmeu poetne i zavrne oznake fonta (). Sledeim primerom ilustruje se HTML kd za oznaku fonta pomou atributa size i pokazuje kako e tekst razliite veliine izgledati u prozoru itaa Weba.
I poetna oznaka naslova i atribut size u oznaci omoguavaju da zadate veliinu teksta, a poetna oznaka naslova govori itau i da tekst prikae polucrnim slovima. Rezolucija monitora posetioca utie na veliinu teksta prikazanog u prozoru itaa. Tekst na monitoru koji ima rezoluciju 1024 768 piksela izgleda mai, nego na monitoru rezolucije 800 600 piksela. Razliite platforme mogu uticati na veliinu teksta i na monitorima iste rezolucije. Na primer, Mac prikazuje tekst za dve take mae nego Intel raunar. Konzorcijum W3C je u standardu HTML 4 proglasio zastarelom oznaku fonta i ene atribute, pa budue verzije itaa tu oznaku moda nee prepoznavati. Boi nain za formatirae teksta je upotreba CSS-a (kaskadnih opisa stilova) o emu ete vie saznati u etvrtom poglavu.
Meae boje teksta HTML dokumenta

Ako ne zadate boju teksta na stranici, ita e tekst prikazati u svojoj podrazumevanoj boji, koja je obino crna. Ako hoete da promenite boju rei ili grupe rei, upotrebite atribut color u oznaci .
32
PRIMER
Pretpostavimo da elite da promenite boju jedne reenice u pasusu teksta. Neposredno ispred poetka teksta iju boju hoete da promenite umetnite oznaku s atributom color u obliku . Atribut color govori itau da prikae odreenom bojom tekst koji sledi oznaku. Na mestu u tekstu na kome elite da ita ponovo pone da prikazuje tekst u svojoj podrazumevanoj boji, umetnite oznaku . Na primer, atribut color posle prve reenice u sledeem HTML kodu govori itau Weba da drugu reenicu prikae crvenom bojom (kao u primeru ispod).
Oznaka , iza kraja druge reenice, govori itau da prestane da prikazuje tekst crvenom bojom, to ga vraa na prikazivae ostatka teksta podrazumevanom bojom:
<html> <head> <title> Meae boje teksta </title> </head> <body> Da biste promenili boju teksta sledee reenice. Umetnite oznaku fonta s atributom boje na poetak i kraj reda. Boja e se promeniti i zatim vratiti na podrazumevanu, crnu. </body> </html>
Vrednost atributa color moete zadati brojem ili imenom. Kao to ste u prethodnom primeru videli, mogu se navoditi imena boja na engleskom kao to su red, green, blue... Isto tako, moete koristiti i heksadecimalne zapise koji predstavaju boje. Na primer, heksadecimalni zapis crvene je #FF0000. Prema tome, itau moete rei da tekst pone da prikazuje crvenom bilo u obliku ili . Kada navodite boju u heksadecimalnom zapisu, brojevi predstavaju koliine crvene, zelene i plave koje ita treba da pomea da bi dobio boju koju elite. Na primer, vrednost crne je #000000. Svake dve cifre u zapisu predstavaju koliinu jedne od tri osnovne boje crvene, zelene i plave koje ita treba da pomea da bi dobio eenu boju. Tako za crnu (#000000) ita treba da pomea 00 crvene, 00 zelene i 00 plave. Nasuprot tome, da bi dobio belu boju, ita mora pomeati maksimalne koliine sve tri boje, pa je heksadecimalni zapis bele #FFFFFF. to se tampaa tie, ne postoji mnogo ograniea za opseg boja koje krase broure i reklame u asopisima. Veina raunara, isto tako, ima grake kartice, pa moe da prikae hiade, pa i milione boja. I raunari pod Windowsom i Macintosh raunari imaju tabelu za izbor boja (engl. color lookup table), koja monitoru daje naredbe kako da prikae boju. Kada boju dodelite zadajui enu heksadecimalnu vrednost, ita radi s ovakvom tabelom grake kartice; ako boja postoji, onda e je sistem na ekranu ispravno prikazati.
33
Ako pak tabela za pregled boja ne sadri zadatu boju, sistem e meaem piksela postojeih boja napraviti vizuelni ekvivalent. Pre mnogo godina, kada su grake kartice mogle da prikau samo 256 boja, bilo je lake odluiti se za onu koju ete koristiti, ali je to vie ograniavalo kreativnost. Da bi stvari bile jo komplikovanije, operativni sistemi su rezervisali neke boje za svoje vizuelne interfejse (tj. za prikazivae sistemske radne povrine). Windows i Macintosh su izabrali razliite skupove boja, ukupno 40, pa je tako ostalo 216 boja koje su se isto prikazivale u Windowsovim i Macintoshevim itaima. Danas postoji mnogo vea paleta iz koje moete birati boje za Web stranicu, jer grake kartice i u raunarima pod Windowsom i na Macintoshu prikazuju milione boja. Ipak, sve boje se i dae prave kombinovaem crvene, zelene i plave. Listu Web boja, u kojoj se nalaze i nazivi boja i ihove heksadecimalne vrednosti, moete videti na lokaciji http://www.htmlhelp.com/cgi-bin/color.cgi. Iako e veina posetilaca kao podrazumevanu boju ostaviti crnu, neki e je moda promeniti. Zbog toga je pametno naznaiti boju kojom hoete da ita prikazuje tekst vae Web stranice, ak i ako je to crna. Nemojte pretpostavati da svi posetioci koriste crnu kao podrazumevanu boju teksta. U etvrtom poglavu videete kako da podesite boju teksta stranice pomou nekoliko CSS pravila.
Dodavae slika na Web stranicu korieem osnovne oznake <img>

Posetiti Web, a ne naii na stranice koje imaju slike i crtee bukvalno je nemogue. Slike pomau shvatau komplikovanih procedura i postupaka koje bi bilo teko objasniti samo reima. Osim toga, mnogi posetioci se prestrae Web stranice koja ima samo tekst. Umetae poneke slike u dugaak tekst prua posetiocima odmor od itaa i, ako je pravilno upotrebena, pomae razumevau teksta. Recimo da pravite Web stranicu koja objaava kako se mea patrona s mastilom na mlaznom tampau Epson 1520. Nekoliko dobrih slika bi to objasnilo boe nego pasusi i pasusi teksta. Podeavaem parametara itaa Weba, posetioci lokacije mogu da promene podrazumevani font kojim se tekst stranice prikazuje. To znai da e tekst drugaije izgledati posetiocu koji kao podrazumevani font itaa koristi Arial i posetiocu koji koristi font Helvetica. Ovo je zastraujue, ali nauili ste da ovu promenu fonta spreite tako to ete zadati font koji e ita koristiti. Pravi problem s izborom fontova nastaje kada koristite posebne ili specijalizovane fontove, kakvi su oni kojima se piu logotipi rmi. Ne zaboravite da e ita upotrebiti podrazumevani font ako specijalizovani font ne postoji u raunaru posetioca. Recimo da vaa lokacija ima logotip napisan fontom Skia. Ako taj logotip napiete kao tekst Web stranice, a posetilac nema instaliran taj font na svom raunaru, ita e ga ispisati podrazumevanim fontom, to e u potpunosti promeniti izgled logotipa. Na svu sreu, izgled logotipa (i ostalog teksta) moete da sauvate ako ga pretvorite u sliku (pomou programa za obradu slika, kao to je Photoshop). Ako umetnete sliku u tekst,
34
ona e izgledati isto u svim itaima Weba ak i u onim iji sistemi nemaju font kojim je tekst prvobitno napisan. Kao to vidite na slici 1-14, parametri koji odreuju fontove na raunaru posetioca uopte ne utiu na tekst slike.
Slika 1-14
Logotipi iji je tekst pretvoren u sliku izgledaju ispravno u Web itau.
Pomou oznake <img>, na Web stranicu moete staviti sliku (bez obzira da li je to tekst pretvoren u sliku ili neki crte). Oznaka <img> najee sadri atribut src, koji itau saoptava putau do datoteke sa slikom. Tako e veina oznaka slika biti oblika <img src=putaa/datoteka>. Vrednost atributa src sadri i putau i ime datoteke sa slikom. Sledei kd, na primer, daje naredbu itau da vrati i prikae sliku iz datoteke photo.jpg koja se nalazi u direktorijumu images, na Web serveru.
PRIMER
<img src="images/photo.jpg" width="300" height="155">
Oznaka <img> stava se izmeu poetne i zavrne oznake tela koda (<body></body>) koje okruuju sadraj Web stranice koji se prikazuje na ekranu. Sledi jednostavan primer kojim se prikazuje slika house.jpg:
<html> <head><title> Slika kue </title> </head> <body> <center><img src="house.jpg" width="400" height="175"></center> </body> </html>
Poglave 1: Osnove HTML-a Postoji i nekoliko atributa koji kontroliu sliku u prozoru itaa:
35
alt Ovaj atribut obezbeuje rezervni (alternativni) tekst za itae koji ne prikazuju slike ili one iji su korisnici iskuili opciju prikazivaa slika. Rezervni tekst itai koriste jo i kao pomoni tekst (tekst koji se prikazuje u pou blizu pokazivaa mia na ekranu, i to kada je taj pokaziva na slici). U programima za itae ga koriste udi s oteenim vidom.
<img src="images/photo.jpg" alt="Photo of Florida Sunset">
height i width Ova dva atributa deniu veliinu slike koja se prikazuje u prozoru itaa. Njih uvek zadajete u HTML oznakama slike, tako da ita moe da prikae ostatak teksta Web stranice dok eka da se slike preuzmu. Kada ove atribute deniete u oznaci slike, ita rezervie mesto za slike, ak i kad se one sporo preuzimaju, tako da tekst okruuje mesta na koja e doi slike.
<img src="images/photo.jpg" width="200" height="55">
border Ovaj atribut zadaje u pikselima debinu okvira koji ita treba da nacrta oko slike. Ako sliku koristite kao hipervezu, ita e oko e nacrtati okvir. Tako, okvir oko slike nagovetava posetiocu da je slika, zapravo, hiperveza. Zbog toga se preporuuje da atribut border postavite na nulu (0).
<img src="images/photo.jpg" width="200" height="55" border="0">
Koriee slika, animacija i video snimaka u dizajnirau stranice detano je obraeno u estom i sedmom poglavu. NAPOMENA Slike su neophodan deo Web stranice. Meutim, stranice s mnogo slika due se preuzimaju i sporije prikazuju od onih koje nemaju slika. Obratite pau, zato, da ne pretrpate svoju stranicu slikama. Slika moe rei vie nego hiadu rei, ali ta to vredi ako se predugo preuzima pa niko ne saeka da je vidi.
Meae poravnaa teksta i slika

Veina Web stranica sadri i tekst i slike, pa je poravnavae teksta i slika unutar prozora aplikacije itaa jedna od osnovnih operacija pri izradi Web strana. ita Weba e podrazumevano prikazivati objekte HTML dokumenta redosledom kojim ih pronalazi. On ih prikazuje jedan za drugim, sleva nadesno, od vrha ka dnu. Recimo da elite da ita prikae sliku iznad reda teksta koji tu sliku opisuje. Ako stavite oznaku <img> u HTML dokument, a onda otkucate tekst, ita e tekst prikazati pored (s desne strane) slike, a ne ispod e. Ne zaboravite da ita elemente prikazuje jedan za drugim, sleva nadesno. ita e neto staviti uz levu marginu stranice samo ako je ve stigao do desne margine reda u kome je trenutno.
36
Sledei kd pokazuje redosled slika i teksta. Oznaka govori itau da prikae tekst koji prati sliku u redu ispod slike:
<html> <head> <title> Example of text and graphic placement </title> </head> <body> <img src="flower.jpg"> The illustrated flowers grow wild on the flat plains of Kansas </body> </html>
Stavae oznake <img> ispred teksta u HTML kodu dokumenta govori itau Weba da prikae sliku pre nego to se ispie tekst. Umetae oznake izmeu slike i teksta govori itau da prelomi red (tj. da pree u sledei red stranice) i umetne prazan red poto prikae sliku, a pre nego to prikae tekst koji sledi sliku. Na slici 1-15 prikazano je kako e ita Weba prikazati sliku i tekst iz prethodnog primera.
Slika 1-15
Bez poravnaa, tekst i slika se nalaze na levoj strani itaevog prozora.
Primetiete da pravilno ubaena oznaka poravnava tekst i sliku vertikalno. Meutim, moda ete eleti da ita centrira i sliku i tekst izmeu leve i desne margine Web stranice. U HTML-u postoje poetna i zavrna oznaka centriraa (<center> </center>) pomou kojih moete horizontalno centrirati objekte. Iako se oznake centriraa jo uvek koriste, one su zastarele, to znai da ih budui itai Weba moda nee prepoznavati. Boa metoda poravnavaa teksta i slika korieem CSS-a objaena je u etvrtom poglavu. ita Weba podrazumevano poravnava prvi objekat svakog reda uz levu marginu Web stranice. Prema tome, vi biste oznaku <center> koristili da promenite podrazumevano poravnavae i time promenite horizontalnu poziciju objekta u jednom ili vie redova. U sledeem primeru, poetna i zavrna oznaka centriraa
PRIMER
37
(<center></center>) govore itau Weba da centrira sliku i tekst (koji se nalaze izmeu pomenutih oznaka) izmeu leve i desne margine Web stranice. To je pokazano na slici 1-16.
<html> <head> <title> Example of text and graphic placement </title> </head> <body> <center><img src="flower.jpg"> The illustrated flowers grow wild on the flat plains of Kansas </center> </body> </html>
Slika 1-16
Poetna i zavrna oznaka centriraa govore itau Weba da prikae sliku i tekst na sredini izmeu leve i desne margine Web stranice.
Dodavae hipertekstualne veze na Web stranicu

Web stranice imaju prednost nad papirnim dokumentima: mogu imati hipertekstualne veze s drugim stranicama, bilo na istoj, bilo na nekoj drugoj Web lokaciji. Umesto da listaju stranice, to rade kad itaju kigu, posetioci Web lokacija pritiskom na dugme hiperveze prelaze sa stranice na stranicu (ili s lokacije na lokaciju). Hipertekstualna veza je re ili grupa rei koje posetilac treba da pritisne da bi ita Weba preuzeo Web stranicu (ili drugu datoteku) sa Web servera. Posetilac lokacije hipertekstualnu vezu najee vidi kao podvuen tekst. ita Weba obino koristi jednu boju da predstavi hipertekstualne veze ka stranicama koje jo nisu poseene, a drugu boju za veze ka ve poseenim stranicama. Da biste napravili hipertekstualnu vezu, stavite poetnu i zavrnu oznaku mesta hiperveze (<a></a>) oko teksta koji elite da posetilac pritisne kako bi pokrenuo vezu. (Hipertekst je tekst izmeu poetne i zavrne oznake mesta hiperveze.)
PRIMER
38
Potom, podesite atribut href u oznaci <a> na putau do datoteke koju ita treba da uita kada posetilac pritisne hipertekst. Na primer, rei Pritisnite ovde da biste preli na sledeu stranicu u sledeem HTML kodu predstavaju hipertekst u hipertekstualnoj vezi i ita Weba e ih podvui na Web stranici.
<a href="info.htm"> Pritisnite ovde da biste preli na sledeu stranicu.</a>
Kada posetilac pritisne podvuene rei (ili izmeu ih) kao u ovom primeru, ita Weba e preuzeti stranicu i staviti je u datoteku info.htm. Primetiete da se atribut href stava u HTML oznaku <a>, a sam hipertekst izvan e, i to izmeu poetne i zavrne oznake mesta hiperveze (<a></a>). Da biste napravili hipervezu ka stranici druge Web lokacije, pored imena datoteke Web stranice u atribut href treba staviti i URL te lokacije. Na primer, sledei kd pravi hipertekstualnu vezu ka poetnoj, matinoj stranici na lokaciji www.bilogde.com:
<a href="http://www.anywhere.com/index.html"> Pritisnite ovde da biste otili na Bilogde.com </a>
Kada posetilac lokacije pritisne bilo gde unutar teksta Pritisnite ovde da biste otili na Bilogde.com (tj. bilo gde na hipertekst), ita Weba e uitati (i prikazati) matini dokument (index.html) s lokacije www.bilogde.com. U ovom primeru, vrednost atributa href (href =http://www.bilogde.com/index.html) pravi hipertekstualnu vezu izmeu stranice vae lokacije i dokumenta index.html (matine stranice) na Web lokaciji www.bilogde.com. Hipertekstualnu vezu s matinom stranicom neke Web lokacije moete uspostaviti i ako stavite u atribut href samo URL te lokacije (znai, bez imena datoteke indeksne stranice):
<a href="http://www.bilogde.com"> Pritisnite ovde da biste otili na Bilogde.com </a>
Osim za prelaee s dokumenta na dokument ili s lokacije na lokaciju, hipertekstualna veza moe se koristiti za preuzimae datoteka s Web lokacije. Primera radi, sledei kd govori itau Weba da preuzme datoteku sa slikom corvette.zip kada posetilac pritisne jednu od rei Pritisni ovde:
<a href"http://www.home.com/cars/corvette.zip"> Pritisnite ovde </a> da preuzmete sliku moje nove "korvete".
Atribut href govori itau Weba da preuzme sliku korvete (corvette.zip) iz direktorijuma cars Web lokacije www.home.com. Svoju lokaciju moete pribliiti korisnicima i napraviti je interaktivnom ako dodate hipertekstualne veze koje posetiocima omoguavaju da preuzimaju datoteke i prelaze izmeu stranica vae i drugih Web lokacija. Pri praveu hipertekstualnih veza obavezno se postarajte da hipertekst ili tekst oko hiperveze kratko i jasno objaava ta e se tano desiti kada posetilac pokrene hipervezu. Poto mnogi korisnici Weba povezuju podvueni tekst i hipertekstualnu vezu, izbegavajte da koristite poetnu i zavrnu oznaku podvlaea () za podvlaee teksta u Web dokumentu. Da biste naglasili neku re ili grupu rei, izaberite kurziv, polucrna slova ili promenite font, boju, veliinu teksta.
39
Ureivae slova i rei pomou oznaka za formatirae znakova

Kada elite da ita Weba prikae tekst na Web stranici, taj tekst upiite izmeu poetne i zavrne oznake tela koda (<body></body>). Kako ita Weba bude itao HTML dokument, tako e prikazivati tekst na ekranu. Da biste naznaili itau kako elite da tekst izgleda, okruite tekst parom oznaka za formatirae. (U HTML-u postoje oznake pomou kojih tekst izmeu ostalog, moe biti prikazan polucrnim, kurzivnim ili precrtanim slovima.) Morate zapamtiti da itai Weba ne razumeju obine kodove formatiraa koje u dokumente umeu programi za obradu teksta, kao to je Microsoft Word. Pretpostavimo da hoete da odreene rei u vaem dokumentu budu polucrne. Da biste to postigli, postavite te rei (slovo ili ceo tekst) izmeu poetne i zavrne oznake za polucrna slova (). U sledeem primeru to je uraeno s reju polucrna:
PRIMER
Posleda re ove reenice je polucrna
Oznake formatiraa znakova su uparene, to znai da postoji i poetna i zavrna oznaka. ita Weba izvrava naredbu nad tekstom koji je izmeu poetne i zavrne oznake formatiraa. U prethodnom primeru, oznake i oko rei polucrna govore itau da tu re ispie polucrnim slovima. Kao to smo rekli, oznake formatiraa znakova moete upotrebavati za denisae izgleda vie reenica (ak i pasusa), grupa rei, pojedinanih rei, pa ak i samo jednog slova u nekoj rei. Na primer, kada ita prikae tekst sledeeg HTML-a, samo e slovo p u rei polucrno biti polucrno.
Prvo slovo je polucrno
Osim poetne i zavrne oznake polucrnih slova, postoje jo neke oznake pomou kojih moete ureivati tekst Web stranice: <cite></cite> Oznake citata istiu tekst, obino kurzivnim slovima. <code></code> Ove oznake prebacuju tekst koji obuhvataju u neproporcionalni (tzv. mono) font, kao to je Courier, da bi istakle tekst. Koristite ih da biste oznaili HTML kd u dokumentu sa HTML primerom. <del></del> Oznake obrisanog teksta obeleavaju tekst kao da je obrisan, tako to ga ita ispie precrtanim slovima. Ove oznake koristite, na primer, da biste oznaili informacije u ispravnom dokumentu. <q></q> Oznake navoda okruuju tekst znacima navoda. Ovo su oznake indeksa (prikazuju tekst malo nie od okolnog teksta). Ovo su oznake eksponenta (prikazuju tekst malo iznad okolnog teksta). Ove oznake istiu tekst ispisujui okruene rei kurzivnim slovima. Ove oznake istiu tekst ispisujui ga polucrnim kurzivnim slovima. Oznake kurzivnih slova istiu tekst ispisujui ga tim slovima. Ove oznake podvlae tekst. Smatraju se zastarelim.
40
Oznake formatiraa moete koristiti pojedinano ili u kombinaciji. U sledeem primeru kombinovane su oznake polucrnih slova i oznake eksponenta da bi se re super isticala na stranici.
Oznake za formatirae znakova su<super>odlian</super> nain da pau posetioca privuete na Web stranicu.
Iako oznake za formatirae u prozoru itaa vizuelno meaju tekst, konzorcijum W3C, kao ekasniji nain, preporuuje upotrebu CSS pravila (stilova).
Koriee simbola i specijalnih znakova u HTML dokumentu

Staviti obian tekst na Web stranicu jednostavno je koliko i napraviti HTML dokument i uneti tekst izmeu egovih oznaka. ita Weba nema problema s itaem i prikazivaem slova (A-Z, a-z) i cifara (0-9). Meutim, postoje specijalni znakovi i simboli koje vam aplikacije za ureivae teksta doputaju da upiete u dokument, a ita Weba ih nee prikazati na stranici. Na svu sreu, HTML nudi tekstualni zapis pomou koga saoptavate itau Weba da prikae uobiajene specijalne znakove i omoguava da unesete numerike kodove za ostale specijalne znakove. Recimo da hoete da se na vaoj stranici prikae znak za zatitu autorskih prava () da biste naznaili da su odreeni elementi stranice zatieni zakonom. Da bi ita ovaj simbol prikazao, morate uneti numeriku vrednost koja predstava taj simbol. U raunaru su svako slovo, broj i simbol predstaveni jedinstvenom numerikom vrednou, poznatijom kao ASCII kd. Da bi se prikazao znak za zatitu autorskih prava, morate uneti egov ASCII kd u HTML kd Web stranice.
PRIMER
Numerika vrednost tog simbola je 169. itau Weba ete rei da prikae taj simbol tako to ete ispred egove numerike vrednosti staviti znakove & i #, a posle koda taku i zarez (;). Znai, da biste rekli itau da znak prikae na stranici, treba da unesete © u HTML kd Web stranice. Za znakove koji se ee koriste, HTML uproava proces dozvoavajui da za predstavae znaka umesto numerikog koda koristite tekstualni kd. Na primer, tekstualni zapis simbola je ©. Sledeim kodom se ilustruje upotreba znaka za zatitu autorskih prava u HTML dokumentu. Oznaka &#xxx; (gde xxx predstava ASCII vrednost specijalnog znaka) govori itau koji specijalni znak da prikae na ekranu. Na slici 1-17 prikazani su rezultati upotrebe itaa Weba za prikazivae sledeeg HTML koda:
<html> <head> <title> Copyright example </title> </head> <body> The copyright symbol © indicates the product falls under the protective umbrella of copyright as defined by the United States. </body> </html>
Poglave 1: Osnove HTML-a NAPOMENA
41
Listu kodova specijalnih znakova i ima odgovarajuih vrednosti nai ete na lokaciji http://www.htmlhelp.com/reference/charset/.
Slika 1-17
ASCII vrednost © u HTML kodu, govori itau Weba da u tekstu prikae znak .
Koriee horizontalnih linija za organizovae sadraja Web stranica

Kada pravite Web stranicu, vano je da rasporedite povezane informacije u grupe. Ako, na primer, ureujete sadraj Web stranice koja se bavi prodajom vozila, razdvojiete automobile, kamione i kombi vozila. Moda ete odvojiti informacije o vozilima koja se iznajmuju od informacija o vozilima za prodaju. Jedan od naina za organizovae Web stranice jeste koriee horizontalnih linija za odvajae sadraja razliite vrste. Recimo da pravite stranicu koja prikazuje podatke istraivaa i elite da odvojite rezultate istraivaa od fusnota. Da biste podatke razdvojili horizontalnim linijama, upotrebite oznaku <hr>. Ta oznaka e u sledeem HTML kodu dati naredbu itau da postavi horizontalne linije razdvajaa du prozora itaa, kao to je pokazano na slici 1-18.
<html> <head> <title>Use of the Horizontal Rule</title> </head> <body> <center> <h2>Using ImageReady to Slice an Image</h2> </center> When you slice an image . . . remainder of text Slicing an image has . . . remainder of text Treat each individual . . . remainder of text 
42

However, it is just as . . . remainder of text You can accomplish this . . . remainder of text <hr width="75%"> <hr width="50%"> <h3>Footnotes</h3> <cite>1001 Photoshop Tips: Andy Anderson 2001</cite> <hr align="left" noshade size="2" width="25"> <cite>Web Design & HTML: Konrad King, Andy Anderson</cite> </body> </html>
Slika 1-18
Web stranica koja ima glavni tekst i fusnote.
Osim obine horizontalne linije koja se pravi pomou oznake <hr>, moete napraviti atraktivnu liniju koristei slike. Sledi primer upotrebe ukrasne linije koju je ita Weba nacrtao umesto horizontalne linije.
Sledee atribute moete koristiti za denisae izgleda horizontalne linije: align Ovaj atribut govori itau da poravna horizontalnu liniju uz desnu ili levu ivicu, odnosno da je postavi na sredinu prozora aplikacije itaa. noshade Atribut noshade govori itau Weba da horizontalnu liniju prikae bez senea.
43
size Atribut size odreuje debinu horizontalne linije (u pikselima). width Ovaj atribut denie duinu linije. Nju moete naznaiti u pikselima, ili u procentima irine prozora itaa. Na primer, ako zadate vrednost 50 procenata (width=50%), ita e nacrtati horizontalnu liniju duine jednake polovini irine prozora itaa. Ako stavite horizontalnu liniju unutar elije tabele ili okvira za rezervisae pozicije, ita e koristiti atribute width i align da podesi duinu i horizontalnu poziciju reda u odnosu na vertikalne strane elije ili okvira pozicije (ne u odnosu na irinu same Web stranice). Naredni primer pokazuje rezultat koriea HTML oznake horizontalne linije, sa razliitim vrednostima irine, veliine i poravnaa.
Obina horizontalna linija Bez senea Promeena irina Promeena visina
Uz levu ivicu Na sredini Uz desnu ivicu
Koriee HTML oznaka bloka citata za definisae leve i desne margine

Jedna od teih stvari u HTML-u jeste kontrolisae razdaine izmeu teksta i leve i desne margine Web dokumenta. ita Weba podrazumevano podeava levu i desnu marginu stranice (tj. irinu stranice) tako da stranica odgovara irini prozora itaa. (Alternativa bi bilo dozvoliti delu stranice da se proiri van desne ivice prozora itaa i obezbediti horizontalnu traku za pomerae koju bi posetilac mogao da koristi za pregled sadraja koji izlazi iz vidokruga u prozoru itaa.) Naravno, Web autori razumeju da e itai po potrebi pomerati tekst iz jednog reda u drugi. Zbog toga dizajneri prave Web stranice koristei brojne mogunosti formatiraa i pozicioniraa teksta kao to su stilovi (CSS) ili smetae teksta u elije HTML tabele. Bez zadavaa naredaba za formatirae, ita Weba e staviti prvi znak teksta odmah pored leve margine, a prei e u sledei red tek kada doe do desne margine prethodnog. Ne zaboravite da irina itaevog prozora na raunaru posetioca odreuje razmak izmeu leve i desne margine Web stranice. tavie, ita sputa tekst u sledei red kada doe do desne strane prozora. HTML oznaka blockquote formatira tekst uvlaeem ili poveavaem margina na levoj i desnoj strani teksta koji je blok citata. Koriee ove oznake za uvlaee dela tekstualnog dokumenta ini da se tekst istie i tako se olakava ureivae stranice.
44
PRIMER
HTML i Web dizajn kroz praktine primere Na primer, sledei HTML kd denie stranicu s naslovom iza koga slede dva pasusa teksta u bloku citata, kao to je pokazano na slici 1-19:
<html> <head> <title>Primer oznake za blok citata</title> </head> <body> Ovo je obian tekst <blockquote>Tekst ovog pasusa je citat. Primetiete kako je tekst uvuen od leve ivice stranice, a kada doe do desne, prelama se </blockquote> Evo jo obinog teksta; pogledajte ta se deava kada obian tekst doe do margine. <blockquote>Tekst ovog pasusa je citat. Primetiete kako je tekst uvuen od leve ivice stranice, a kad doe do desne, prelama se </blockquote> </body> </html>
Slika 1-19
Web stranica s obinim i tekstom u bloku citata.
Pravee ureenih i neureenih lista

U ovom poglavu ste nauili nekoliko naina na koje moete urediti Web stranice. Ureene i neureene liste su jo jedan nain za grupisae odreenih celina u stavke liste oznaene rednim brojevima ili specijalnim simbolima. Liste su veoma korisne jer pregledno prikazuju informacije. U ureenim listama Web sadraj se organizuje po abecednom ili numerikom redosledu, a u neureenim se koriste simboli, da bi se oznaio svaki element liste. Na slici 1-20 prikazana je Web stranica sa ureenom i neureenom listom.
45
Slika 1-20
Web stranica sa ureenom (levo) i neureenom listom (desno).
Koristite ureene (numerisane) liste za pisae instrukcija korak po korak gde je bitan redosled elemenata u listi. Sledei HTML kd opisuje ureenu listu sa slike 1-20.
PRIMER
<html> <head> <title>Example of ordered list</title> </head> <body> <h2>Program Load</h2> <ol> <li>Insert CD into Computer</li> <li>Click the Start Icon</li> <li>Load the Program</li> <li>Play the Game<</li> </ol> </body> </html>
Kao to je u ovom primeru pokazano, da biste oznaili ureenu listu u HTML kodu Web stranice, stavite elemente liste izmeu poetne i zavrne oznake ureene liste (<ol></ol>). Potom, da biste dodali elemente listi, stavite tekst svakog elementa izmeu poetne i zavrne oznake liste (<li></li>). ita Weba e podrazumevano prikazati arapske brojeve (1,2,3...) ispred svakog elementa liste i to tako to e prvi element numerisati jedinicom. Ako umesto ovih brojeva elite da koristite slova ili rimske brojeve, umetnite atribut type u poetnu oznaku ureene liste na sledei nain: <ol type=1> Prikazuje elemente koristei arapske brojeve (podrazumevano). <ol type=a> Prikazuje elemente koristei mala slova.
46
HTML i Web dizajn kroz praktine primere <ol type=A> Prikazuje elemente koristei velika slova. <ol type=i> Prikazuje elemente koristei rimske brojeve malim slovima. <ol type=I> Prikazuje elemente koristei rimske brojeve velikim slovima.
Da biste ureenu listu poeli brojem razliitim od broja jedan (ili abecednu slovom razliitim od slova a) umetnite atribut start s vrednou koja nije 1 u oznaku <ol>. Na primer, ureena lista koja poie oznakom <ol>, poee od slova e jer je to peto slovo abecede:
<ol type="a" start="5">
Shodno tome, ako atributu type dodelite 1 da biste rekli itau da stavi arapski broj ispred svakog elementa liste, ita bi poeo listu od broja pet. Neureene liste pruaju mogunost grupisaa tekstualnih elemenata kad redosled elemenata nije bitan. Takva je, na primer, lista za kupovinu. Sledei HTML kd pravi neureenu listu sa slike 1-20:
<html> <head> <title>Example of unordered list</title> </head> <body> <h2>Shopping List</h2> <ul> <li>Bread</li> <li>Milk</li> <li>Butter</li> <li>Tea<</li> </ul> </body> </html>
Da biste oznaili neureenu listu u HTML kodu Web stranice, stavite elemente liste izmeu poetne i zavrne oznake neureene liste (<ul></ul>). Kao i u ureenim listama, neureenoj listi dodajete elemente smetajui tekst svakog elementa izmeu poetne i zavrne oznake liste (<li></li>). ita Weba e podrazumevano prikazati punu crnu taku () kao tekstualni znak ispred svakog elementa neureene liste. Ako hoete da ita koristi drugaiji tekstualni znak, upotrebite atribut type u oznaci <ul> da biste izabrali simbol na sledei nain: <ul type=disc> Prikazuje elemente koristei punu crnu taku (podrazumevano). <ul type= square> Prikazuje elemente koristei kvadrat crnih ivica. <ul type=circle> Prikazuje elemente koristei crnu krunicu (tj. obris kruga).
Pravee ugneenih lista

U prethodnom delu ste nauili da pravite ureene i neureene liste. Isto tako, moete da pravite ureene i neureene liste unutar neke druge liste: to se zove pravee ugneene
47
liste. Takvu listu moete koristiti da biste prikazali niz akcija koje su vane za odreeni korak spoae liste kao ovde:
Korak 3 liste zahteva vie objaea nego iskaz uitaj program. Zbog toga moete umetnuti ugneenu listu da biste opisali korake neophodne da bi se uitao program. Sledei HTML kd upisuje umetae ugneene liste koju smo malopre pokazali:
PRIMER
<html> <head> <title>Example of Ordered List</title> </head> <body> <h2>Program Load</h2> <ol> <li>Insert CD into Computer</li> <li>Click the Start Icon</li> <li>Load the Program</li> <ol type="a"> <li>Double-click the game icon</li> <li>Enter serial number</li> <li>Click the Finish button</li> </ol> <li>Play the Game<</li> </ol> </body> </html>
U ovom primeru, ugneena lista je ureena lista denisana poetnom i zavrnom oznakom ureene liste. Ureena lista je ugneena, jer se oznake <ol> i </ol> pojavuju unutar spoaeg skupa poetnih i zavrnih oznaka ureene liste (tj. ugneene su u ega). Tekst staven izmeu poetne i zavrne oznake elementa liste (<li></li>) pojavuje se na ekranu kao element svake liste (i spoae i ugneene). Iako pisae koda za ugneenu listu moe delovati komplikovano, pravila su ista kao kad pravite spoau listu. Ugneenu listu deniite izmeu poetne i zavrne oznake ureene ili neureene liste. Onda ugneenoj listi dodajte elemente tako to ete umetnuti tekst izmeu poetne i zavrne oznake elementa liste koje ste umetnuli nakon denicije za element u spoaoj listi. Ne zaboravite da moete ugneavati i ureene i neureene liste.
48
Pravee lista definicija

Dosad ste nauili kako da napravite ureenu i neureenu listu i kako da ih ugnezdite. Pored navoea elemenata u numerisanim i nenumerisanim listama, HTML prua mogunost pravea lista denicija. Kao to joj samo ime kae, to je lista termina uz koje stoji denicija. ita Weba uvlai svaku deniciju u sledei red, ispod termina koji se denie, kao to je pokazano na slici 1-21.
Slika 1-21
Lista definicija s dva elementa i opisima.
Jedino se u listi denicija pojedinani elementi ne oznaavaju poetnom i zavrnom oznakom elementa liste. Umesto toga, u listi denicija se koriste dve nove oznake: <dt></dt> Poetna i zavrna oznaka termina denicije oznaavaju termin koji treba da bude opisan ili denisan. (Ove oznake su po funkciji sline poetnoj i zavrnoj oznaci elementa liste koje se koriste da oznae pojedinane elemente u ureenim i neureenim listama.) <dd></dd> Poetna i zavrna oznaka opisa (denicije) oznaavaju jedan ili vie pasusa uvuenog opisnog teksta. Da biste napravili listu denicija u HTML kodu Web stranice, umetnite termine i denicije izmeu poetne i zavrne oznake liste denicija (<dl> </dl>). Na primer, sledei HTML kd e napraviti listu denicija s dva termina, kao to je ranije prikazano:
PRIMER
<html> <head> <title>Example of a Definition List</title> </head> <body> <center><h2>Basic HTML</h2></center> <dl> <dt>Basic HTML Tags </dt>

<dd>HTML tags are commands used by a Web browser to display information in a browser window. HTML tags are accepted by both Mac and Win versions of the standard browser applications.</dd> <dt>The Importance of the Title Tag </dt> <dd>The title tag represents the description of a Web page to visitors to your Web site. The title to a Web page appears in the title bar of the Web browser window.</dd> </dl> </body> </html>
49
Koriee HTML oznaka unapred formatiranog teksta za kontrolu prikaza sadraja Weba
U ovom poglavu ste nauili kako da promenite izgled teksta pomou oznaka formatiraa. Na primer, ako hoete da ita prikae re polucrnim slovima, oko te rei u HTML kodu stranice stavite poetnu i zavrnu oznaku polucrnih slova (). Da biste spustili tekst za jedan ili vie redova, umetnite jednu ili vie oznaka . Pri praveu Web stranice esto se koristi jedan skup HTML oznaka za kontrolu izgleda teksta, a drugi za kontrolu izgleda teksta na stranici. Naalost, kada ita Weba prikae tekst, on ignorie vie od jednog razmaka i znaka za novi red koje unosite u HTML dokument da biste rasporedili ili poravnali sadraj stranice, kao to je prikazano na slici 1-22.
Slika 1-22
ita Weba ignorie dodatne znakove formatiraa (razmake i znakove za novi red CR) koji su uneti u telo HTML dokumenta.
50
Moete, meutim, koristiti poetnu i zavrnu oznaku unapred formatiranog teksta (<pre></pre>) da biste kombinovali i funkciju formatiraa i funkciju ureivaa u jednoj HTML oznaci. Poetna i zavrna oznaka unapred formatiranog teksta govore itau Weba da koristi ksni font i da na ekranu prikae sve razmake i nove redove koje ita nae u unapred formatiranom HTML tekstu Web stranice. (Da biste izbegli pogreno poravnat tekst u prozoru itaa, za reae elemenata koristite razmake a ne tabulator jer svi itai ne interpretiraju tabulator na isti nain). Uunapred formatirani tekst moete koristiti za prikazivae listinga programa i recepata, na primer. Na slici 1-23 prikazana je Web stranica sa unapred formatiranim tekstom.
PRIMER
Slika 1-23
Oznake unapred formatiranog teksta kontroliu prelom reda unutar Web dokumenta bez koriea HTML oznaka formatiraa.
Unapred formatirani tekst se obino koristi kada hoete da kontroliete duinu svakog reda teksta i raspored rei u redu. Naalost, u unapred formatirani tekst ne moete pomou oznake <img> umetati slike, niti pomou oznake <object> umetati ActiveX kontrole ili Java aplete. Iako vam poetna i zavrna oznaka unapred formatiranog teksta (<pre></pre>) omoguavaju da kontroliete raspored teksta, morate koristiti HTML tabele ili stilove da biste upravali rasporedom elemenata koji nisu tekst.
Prikazivae navigacionog menija unutar okvira Web stranice

HTML okvire moete koristiti da biste prikazali vie od jedne Web stranice u jednom prozoru itaa. ita moe uitati novu Web stranicu u bilo koji okvir a da pri tom ne promeni sadraj drugih Web stranica, jer koristi zasebnu uniformnu adresu resursa (URL)
51
za svaki okvir. Web stranice s okvirom najee se koriste za prikazivae navigacionog menija Web lokacije dok posetilac prelazi sa strane na stranu te lokacije. Uobiajeni navigacioni meni sastoji se od slika u obliku dugmadi ili hipertekstualnih veza do svih stranica Web lokacije. Dobro dizajniran navigacioni meni vodi korisnika preko svih delova lokacije kao mapa puta. Pri dizajnirau navigacionog menija vano je razmotriti gde na Web stranici treba staviti taj meni. Na veini stranica on se nalazi u horizontalnom poloaju na vrhu ili u vertikalnom poloaju uz levu ivicu prozora itaa. Koje god mesto izaberete, budite dosledni. Ako navigacioni meni stavite vertikalno s leve strane indeksne stranice (tj. matine stranice lokacije), na to isto mesto stavite meni i na ostalim stranicama lokacije. Dosledno smetae menija pomae korisniku da se lake snae, a zadovoni posetioci e provesti vie vremena istraujui vau lokaciju. Na marketinkoj lokaciji, posetioci koji su zadovoni navigacijom utiu na poveae prodaje, a na informativnoj lokaciji posetioci e zapamtiti vie i vea je verovatnoa da e se na lokaciju vratiti po jo informacija. Stavae navigacionih menija u okvir omoguava da se ti meniji vide sve vreme dok je posetilac na razliitim stranicama lokacije. Pretpostavimo da pravite stranicu s dva okvira kao to je ona prikazana na slici 1-24.
Slika 1-24
Prozor dokumenta sadri dva okvira u kojima su navigacioni meni i informacije o lokaciji.
52
PRIMER
Stavite navigacioni meni u uzak pravougaoni okvir od 100 piksela uz levu stranu stranice i prikaite nove Web stranice u veem okviru zdesna. Posetilac nikad ne gubi iz vida mapu vae lokacije jer okvir s navigacionim menijem ostaje na mestu (uz levu stranu prozora itaa) dok se odabrane stranice uitavaju u okvir s desne strane. Sledei kd pravi Web stranicu sa okvirom kao to je pokazano na slici 1-24:
<html> <head> <title>Welcome to Product Review</title> </head> <frameset cols="100,400,*"> <frame src="n_nav.html" name="left"> <frame src="h_main.html" name="right"> </frameset> </html>
Kao to iz ovog primera vidite, stranica sa okvirima ne ukuuje HTML iz svih stranica prikazanih zajedno na ekranu. Ovakva stranica samo govori itau da prikae Web stranice u okvirima denisanim poetnom oznakom <frameset>. U ovom primeru, stranica sa okvirima itau Weba govori da prikae HTML dokumente n_nav.html i h_main.html (navigacioni meni lokacije i matinu stranu lokacije) u dva okvira na ekranu. ita uitava dokument n_nav.html u prvi okvir irine 100 piksela, a dokument h_main.html u drugi okvir irine 400 piksela. HTML oznake koriene za denisae Web stranica i uitane u okvire ponaaju se isto kao kad ita Weba prikazuje pojedinane stranice. Okviri samo razmetaju vie Web stranica unutar prozora jednog dokumenta.
Istovremeno prikazivae vie Web stranica na ekranu

Okviri pruaju mogunost da ita Weba istovremeno prikae vie stranica na ekranu. Uobiajena Web stranica koja ima okvire, moe imati dva okvira jedan za prikazivae navigacionog menija, a drugi za prikazivae sadraja stranice koju hoete da prikaete posetiocu. Kada posetilac pritisne dugme ili hipervezu iz jednog okvira, ita Weba uita i prikae Web stranicu u drugom okviru. Da biste napravili Web stranicu s okvirima, potrebne su vam najmae tri stranice. Prvo vam trebaju dve ili vie stranica koje na ekranu hoete istovremeno da prikaete. (Ako imate samo jednu stranicu za prikazivae, nema potrebe da se deli prozor itaa Weba.) Zatim vam treba stranica s okvirima ije je zaduee da govori itau veliinu i broj okvira, kao i nazive Web stranica koje treba prikazati. Pretpostavimo da imate Web stranicu s navigacijom koju ste smestili u datoteku n_menu.html. Imate jo i zajednike informacije koje ste stavili u datoteku opendoc. html. Mogli biste koristiti stranicu sa okvirima, kao to je ona u sledeem primeru, da biste istovremeno na ekranu prikazali obe stranice (n_menu.html i opendoc.html):
PRIMER

<!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title> Example of a frame document </title> </head> <frameset cols="80,400"> <frame name="menu" src="n_menu.html"> <frame name="content" src="opendoc.html"> </frameset> </html>
53
Primetiete da u HTML dokumentu koji sadri okvire, poetna i zavrna oznaka okvira (<frameset></frameset>) zameuju poetnu i zavrnu oznaku tela koda (<body></body>) koje se koriste na stranicama bez okvira. To se deava zato to stranica s okvirima nema ni telo koda ni sadraj koji bi prikazala. Njena jedina svrha je da podeli prozor itaa na okvire (kao ramove slika) i da kae itau putau ili URL adresu Web stranice koje treba da prikae u okvirima. U ovom primeru, atribut cols u oznaci <frameset> govori itau da napravi dva okvira i to prvi irok 80, a drugi 400 piksela. Znai, ovaj atribut govori itau i broj okvira (brojem kolona navedenim u vrednosti atributa) i irinu svakog okvira u pikselima. Na primer, ako imate tri okvira, atribut cols imao bi tri vrednosti i bio bi oblika cols=n,n,n, a za etiri okvira, cols=n,n,n,n. Atribut src u oznaci <frame> govori itau ime Web stranice koju u okviru treba da prikae, poto uita stranicu s okvirima. U naem primeru, ita Weba e uitati n_menu.html u prvi okvir (koji se zove menu), a opendoc.html u drugi okvir (koji se zove content), to je prikazano na slici 1-25.
U prvi okvir uitava se n_menu.html
U drugi okvir uitava se opendoc.html
Slika 1-25
Prozor Web itaa sadri dva okvira, a u svakom od ih je po jedan HTML dokument.
54
Kada posetilac lokacije pritisne hipervezu u okviru menija, atribut target u oznaci <a> rei e itau u koji okvir da uita Web stranicu iz atributa href oznake <a>. Na primer, sledea hiperveza govori itau Weba da prikae dokument aboutus.html u okviru content kada posetilac pritisne bilo gde unutar hipertekstualne veze About Us:
<a href="aboutus.html" target="content">About Us</a>
Tako, kada posetilac pritisne hipervezu About Us, ita e dokument (opendoc .html, iz prethodnog primera) prikazan u cinom okviru (sadraj) zameniti dokumentom aboutus.html (u ovom primeru naznaenim atributom href ). Ako oznaka hiperveze <a> nema atribut target, ita e uitati dokument povezan hipervezom u okvir u kome se prikazuje stranica iju je hipervezu posetilac aktivirao. Na primer, zbog sledeeg HTML koda, ita e zameniti n_menu.html datotekom aboutus.html u okviru menija (s obzirom na to da je About Us hipertekstualna veza u meniju prikazanom u okviru menija):
<a href="aboutus.html">About Us</a>
Slino tome, kada posetilac pritisne hipervezu u okviru content, hiperveza e ili imati atribut target koji kae itau da uita povezanu stranicu u okvir content ili nee imati ovaj atribut, pa e ita uitati povezanu stranicu u okvir content u svakom sluaju. Prikazujui povezane stranice unutar okvira content, navigacioni meni moete ostaviti na ekranu sve vreme (u okviru menu). Okviri Web stranica su odlian nain da rasporedite sadraj svoje Web lokacije. Meutim, poto ovakve stranice trae da ita uita i prikae tri ili vie Web stranica, emu treba vie vremena nego kad stranica ne bi imala okvire. tavie, ne mogu svi itai Weba da prikazuju okvire. Takvi itai nee prikazati ni Web stranice u okvirima, ni okvire denisane stranicom s okvirima. Zbog takvih itaa stavite oznake <noframes> i </noframes> u svoj dokument s okvirima, kao to je prikazano u narednom primeru:
<!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Dokument bez okvira</title> </head> <frameset cols="80,400"> <frame name="menu" src="n_menu.html"> <frame name="content" src="opendoc.html"> <noframes> <a href="main-noframes.html">Pritisnite da biste videli verziju dokumenta bez okvira.</a> </noframes> </frameset> </html>
Ako ita Weba ne moe da prikazuje okvire, hiperveza se pojavuje u prozoru itaa, obavetavajui korisnika da pritiskaem veze moe uitati verziju Web stranice bez okvira.

01 HTPP

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

01 HTPP

Uploaded by

Copyright:

Available Formats

PO GLAV E 1

HTML i Web dizajn kroz praktine primere

Tekst i ostali sadraj sa Weba

Uloga itaa Weba i Web stranica

Poglave 1: Osnove HTML-a

Uparene HTML oznake

HTML i Web dizajn kroz praktine primere

HTML oznake odeka

Poglave 1: Osnove HTML-a

HTML prazne oznake

Pravee Web stranice

HTML i Web dizajn kroz praktine primere

Kontrolisae formata teksta

Poglave 1: Osnove HTML-a

HTML i Web dizajn kroz praktine primere

osnovni stilovi teksta </title>

Poglave 1: Osnove HTML-a

HTML naredbe i atributi dati su unutar uglastih zagrada Atribut Atribut

HTML naredba Ime atributa

HTML i Web dizajn kroz praktine primere

Kako da veem broju elemenata stranice dodelite isti skup atributa

Programi za ureivae teksta

Poglave 1: Osnove HTML-a

Programi za obradu teksta

HTML i Web dizajn kroz praktine primere

Aplikacije za izradu Web stranica

Poglave 1: Osnove HTML-a

Relativne i apsolutne putae datoteka

HTML i Web dizajn kroz praktine primere

Preuzimae i instalirae PWS Web servera

Poglave 1: Osnove HTML-a

HTML i Web dizajn kroz praktine primere

Rad s PWS Web serverom i objavivae Web stranice

Poglave 1: Osnove HTML-a

HTML i Web dizajn kroz praktine primere

Program ipconfig pokazuje IP adresu raunara.

Poglave 1: Osnove HTML-a

HTML i Web dizajn kroz praktine primere

Opisivae sadraja Web stranice naslovom

Naslov Web stranice

Naslov Web stranice pojavuje se na naslovnoj traci, u prozoru itaa.

Poglave 1: Osnove HTML-a

Prepoznavae Web dokumenata pomou definicije tipa dokumenta

HTML i Web dizajn kroz praktine primere

Umetae komentara u Web dokument

Poglave 1: Osnove HTML-a

HTML i Web dizajn kroz praktine primere

Zadavae fonta za tekst Web stranice

<font face="typeface"> ...tekst Web stranice prikazan u naznaenom fontu... </font>

Poglave 1: Osnove HTML-a

Kontrola toka teksta pomou oznaka za pasus i oznaka za prelom reda

HTML i Web dizajn kroz praktine primere

Poglave 1: Osnove HTML-a

HTML i Web dizajn kroz praktine primere

Znak za nelomivi razmak spreava prikazivae imena u dva reda.

Poglave 1: Osnove HTML-a

Meae boje teksta HTML dokumenta

HTML i Web dizajn kroz praktine primere

Poglave 1: Osnove HTML-a

Dodavae slika na Web stranicu korieem osnovne oznake <img>

HTML i Web dizajn kroz praktine primere

Logotipi iji je tekst pretvoren u sliku izgledaju ispravno u Web itau.

<img src="images/photo.jpg" width="300" height="155">