POGLAVÀE 1 Osnove HTML-a · bilo kog programa za obradu teksta. Kao ãto je pomenuto, åitaåi Weba poput Netscape Navigatora i Internet Explorera, prate naredbe iz tekstualnog dokumenta

POGLAVÀE 1

Osnove HTML-a

U OVOM POGLAVÀU

—

Preuzimaçe i instaliraçe PWS Web servera 16

—

Rad s PWS Web serverom i objavàivaçe Web stranice 18

—

Opisivaçe sadræaja Web stranice naslovom 22

—

Prepoznavaçe Web dokumenata pomoñu definicije tipa dokumenta 23

—

Umetaçe komentara u Web dokument 24

—

Zadavaçe fonta za tekst Web stranice 26

—

Kontrola toka teksta pomoñu oznaka za pasus i oznaka za prelom reda 27

—

Meçaçe veliåine teksta pomoñu oznaka nivoa naslovai atributa

size

oznake fonta 30

—

Meçaçe boje teksta HTML dokumenta 31

—

Dodavaçe slika na Web stranicu koriãñeçem osnovne oznake <img> 33

—

Meçaçe poravnaça teksta i slika 35

—

Dodavaçe hipertekstualne veze na Web stranicu 37

—

Ureœivaçe slova i reåi pomoñu oznaka za formatiraçe znakova 39

—

Koriãñeçe simbola i specijalnih znakova u HTML dokumentu 40

—

Koriãñeçe horizontalnih linija za organizovaçe sadræaja Web stranica 41

—

Koriãñeçe HTML oznaka bloka citata za definisaçe levei desne margine 43

—

Pravàeçe ureœenih i neureœenih lista 44

—

Pravàeçe ugneæœenih lista 46

—

Pravàeçe lista definicija 48

—

Koriãñeçe HTML oznaka unapred formatiranog teksta za kontroluprikaza sadræaja Weba 49

—

Prikazivaçe navigacionog menija unutar okvira Web stranice 50

—

Istovremeno prikazivaçe viãe Web stranica na ekranu 52

ezik za oznaåavaçe hiperteksta (engl.

Hypertext Markup Language

), poznatiji kao

HTML, raåunarski je jezik i predstavàa suãtinu World Wide Weba. Pri pravàeçu

Web lokacija, HTML se koristi za unos teksta, slika, animacija ili moæda zvuka i

videa na pojedinaåne Web stranice koje saåiçavaju lokaciju. HTML, uz to, omoguñava da

umetnete hipertekstualnu vezu i interaktivnu dugmad koji vaãe stranice povezuju s drugim

stranicama na vaãoj lokaciji i drugim lokacijama ãirom sveta. Dizajniraçe Web lokacije je

kreativan rad, a HTML je samo jedan od alata pomoñu kojeg pravite Web prezentacije.

HTML nije programski jezik, nego jezik za oznaåavaçe teksta. Teoretski, Web stra-

nicu koju napravite koristeñi HTML mogao bi da vidi svako ko ima raåunar, bilo kakav

åitaå Weba i pristup Internetu. U praksi, moguñnost da se pregleda potpun sadræaj stra-

nice zavisi od karakteristika åitaåa Weba.

Åitaåi Weba

(engl.

Web browsers

) su programi

koji prevode HTML u dokumentima Web stranica i prikazuju tekst, slike i animacije na

ekranu raåunara posetioca. Sami ili s joã nekim programima, åitaåi reprodukuju zvuåne

i video datoteke koje pomoñu HTML-a umeñete na stranicu. Najnovije verzije dva najpo-

pularnija åitaåa Weba, Microsoftovog Internet Explorera i Netscapeovog Netscape Navi-

gatora, prikazuju bezmalo sve ãto moæete da stavite na stranicu koristeñi HTML.

Da bi posetioci pristupili stranicama Web lokacije, moraju se prethodno povezati s

Internetom i pokrenuti åitaå Weba. Poãto Web server poãaàe Web stranicu raåunaru pose-

tioca, åitaå Weba prevede HTML u datoteci stranice i prikaæe u prozoru åitaåa sadræaj te

datoteke kao tekst i slike.

Web serveri i åitaåi Weba za komunikaciju koriste protokol za prenos hiperteksta

(engl.

HyperText Transport Protocol, HTTP

). Ovaj protokol, izmeœu ostalog, odreœuje

naåin na koji åitaåi Weba i serveri ãaàu poruke kao i strukturu samih poruka. Detaàno

razmatraçe razliåitih HTTP tipova i struktura poruka prevazilazi opseg ove kçige.

Meœutim, za dizajniraçe åak i sloæenih Web lokacija potrebno je tek osnovno razume-

vaçe HTTP toka zahteva i odgovora (toka izmeœu åitaåa Weba i Web servera) koji je pri-

kazan na slici 1-1.

1. Kad god unesete Web adresu (na primer, http://www.NVBizNet.com) u poàe za

adresu åitaåa i pritisnete ENTER, åitaå putem Interneta zahteva datoteku od Web

servera.

2. Poãto primi zahtev, Web server pronalazi traæenu datoteku i ãaàe je åitaåu.

3. Åitaå Weba analizira datoteku stranice i utvrœuje da li ima umetnutih datoteka (kao

ãto su slike, animacije, zvuci itd.) koje mu od Web servera trebaju.

J

4

H TML i Web d i za j n k roz p rak t i å ne p r ime re

4. Åitaå Weba ãaàe serveru viãe HTTP zahteva (po jedan za svaku datoteku koja

åitaåu treba).

5. Kako primi zahteve, Web server tako pronalazi i ãaàe datoteke (po jednu za svaki

HTTP zahtev) åitaåu Weba.

6. Åitaå Weba uzima datoteke Web stranice i, prema uputstvima HTML oznaka, kom-

binuje stranicu i sadræaj umetnute datoteke u Web dokument. Taj dokument,

potom, åitaå prikazuje na ekranu.

Uloga åitaåa Weba i Web stranica

Da bi iãli u korak s træiãtem koje se stalno meça i uåinili Internet pristupaånim svakome,

Microsoft i Netscape su za sve platforme i operativne sisteme koji se na træiãtu mogu nañi

napravili verzije svojih åitaåa Weba. Da bi prikazao Web stranicu, åitaå Weba prevodi

HTML kôd, a marka i verzija åitaåa koji posetioci vaãe Web lokacije koriste odreœuju

koje ñe karakteristike HTML-a kod çih raditi. To znaåi da od verzije åitaåa zavisi ãta ñe

posetilac imati na ekranu. Tako koriãñeçe najnovijih, najnaprednijih odlika HTML-a i

çegovih moguñnosti formatiraça strana ne garantuje da ñe svi koji pogledaju stranicu

videti sve ãto ste na çu stavili.

Slika 1-1 Odgovor Web servera na zahtev za pribavàaçe odreœenog sadræaja sa Weba.

Tekst i ostalisadræaj sa Weba

Web server

Pog l avàe 1 : O snove HTML -a

5

Pri dizajniraçu Web stranice imajte na umu da neñe svi posetioci koristiti najnovije

verzije Internet Explorera ili Netscape Navigatora. Zbog toga se uglavnom dræite osnova

HTML-a koje ñete u ovom poglavàu nauåiti, a najnovije karakteristike koristite samo da

lokaciju uåinite zanimàivijom. Kombinovaçem osnovnih i naprednih karakteristika

HTML-a na istoj stranici, svima omoguñavate da vide vaæne delove, a oni s najnovijim

verzijama åitaåa doæiveñe i neãto nezaboravno.

Web stranica se sastoji od niza HTML naredaba koje u datoteku unosite koriãñeçem

bilo kog programa za obradu teksta. Kao ãto je pomenuto, åitaåi Weba poput Netscape

Navigatora i Internet Explorera, prate naredbe iz tekstualnog dokumenta koji pravite da

bi na ekranu prikazali sadræaj stranice. (

Sadræaj

Web stranice åine tekst, slike, video,

zvuk i sve ostalo ãto pomoñu HTML-a na çu stavite).

Ako mislite da je pravàeçe Web stranice lako – u pravu ste. Pravàeçe Web lokacija je

poåelo kao najjednostavniji posao. Prvobitni HTML standard je opisivao jednostavan jezik

koji se lako uåio. Pomoñu 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 daàe moæete napraviti i najsloæeniju Web stranicu kucajuñi jednostavne HTML naredbe

u dokument koji pravite pomoñu programa za obradu teksta (npr. Windows Notepada).

Na lokaciji W3C-a (www.w3.org) nalaze se opisi raznih Internet tehnologija, ukàuåujuñi

HTTP, HTML, proãiriv jezik za oznaåavaçe hiperteksta – XHTML (engl.

Extensible

Hypertext Markup Language

), XML (engl.

Extensible Markup Language

), kaskadni opisi

stilova – CSS (engl.

Cascading Style Sheets

) itd.

Poãto ste saznali ãta je Web stranica i (uopãteno) 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 prikaæite

svoju omiàenu Web stranicu tako ãto ñete u poàe za adresu åitaåa uneti uniformnu loka-

ciju resursa (URL – engl.

Uniform Resource Locator

), tj. adresu Web stranice. To moæe

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.

Poãto server odgovori ãaàuñi tu stranicu åitaåu, åitaå ñe je prikazati i traæiti umetnute

objekte (npr. slike). Kad åitaå prikaæe sadræaj stranice, izaberite stavku menija View |

Source da biste videli HTML kôd kojim je ta stranica opisana. (Ako koristite Netscape

Navigator, izaberite stavku View | Page Source). Internet Explorer ñe upotrebiti Windows

Notepad za ispisivaçe HTML koda stranice, dok ñe ga Netscape Navigator ispisati u

novom prozoru na ekranu. Ne dozvolite da vas iskazi HTML-a uplaãe – iz ove kçige ñete

nauåiti sve o çima. Zasad je bitno da zapamtite da moæete videti izvorni kôd 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å izvrãava da bi formatirao tekst i

umetnuo slike na stranicu. Neke naredbe u HTML-u moraju da imaju i poåetnu i zavrãnu

oznaku. Takve naredbe se nazivaju

uparene oznake

(engl.

container tags

), jer se naredba

iz poåetne oznake odnosi na sadræaj stranice sve do zavrãne oznake.

6


Svaka naredba (tj. oznaka) u HTML-u poåiçe znakom maçe (<) iza åega se navode

naziv oznake i atributi, a zavrãava se znakom veñe (>). Zavrãna oznaka za svaku poåetnu

oznaku pravi se tako ãto se ispred naziva oznake stavi kosa crta (/). Tako su poåetne

oznake oblika <naziv oznake[atributi]>, a zavrãne </naziv oznake>. Naziv oznake åitaåu

Weba otkriva namenu te oznake, dok atributi (ako ih ima) koji slede naziv oznake daju

åitaåu dodatne informacije pomoñu kojih on izvrãava naredbu te oznake.

Sledeñi kôd, na primer, pokazuje kako oznake za poåetak i kraj pasusa ( )

obuhvataju jedan deo teksta. U tom primeru oznaka govori åitaåu da, koristeñi pod-

razumevana pravila formatiraça, prikaæe sav tekst do oznake .

 Ovo je primer teksta jednog pasusa. 

Ako hoñete da åitaå prikaæe tekst u odreœenom fontu ili boji, moæete dodati oznaci

 (koja se nalazi iza oznake , a ispred tog teksta) atribute koji naznaåavaju boju,

font, veliåinu i sliåno. O atributima ñemo viãe govoriti kada zavrãimo o oznakama.

HTML oznake odeàka

Za sreœivaçe razliåitih delova HTML koda kojim se opisuje stranica koriste se oznake

odeàka

. Tipovi oznaka HTML-a u svakom delu definicije Web stranice imaju odreœenu

namenu:

•

<html></html>

Ove oznake se pojavàuju na poåetku i na kraju HTML doku-

menta. Izmeœu çih se nalaze sve ostale oznake pomoñu kojih opisujete Web

stranicu.

•

<head></head>

Poåetna i zavrãna oznaka zaglavàa slede neposredno iza poåetnih

HTML oznaka (<html>) i naznaåavaju zaglavàe Web stranice. Oznake u zaglavàu

stranice obiåno se koriste za informacije kao ãto su ime autora i datum pravàeça

stranice. Tu se joã dodaju i oznake s informacijama koje opisuju stranicu tako da

pretraæivaåi Weba prema indeksima pretrage mogu da upuñuju na çu. Od HTML

oznaka i informacija koje stavite u zaglavàe, åitaå posetioca prikazuje samo naslov

stranice. Naslov stavàate u zaglavàe izmeœu poåetne i zavrãne oznake naslova

(<title></title>), kao ãto je prikazano u narednom primeru.

•

<body></body>

Poåetna i zavrãna oznaka tela stranice piãu se odmah iza dela sa

zaglavàem Web stranice. U telu stranice nalaze se oznake koje åitaåu govore ãta da

prikaæe na ekranu i kako to treba da izgleda.

Sledeñi primer pokazuje ispravan raspored oznaka odeàka u HTML-u:

<html>

<head>

<title> Naslov Web stranice </title>

</head>

<body>

Ovde se stavàaju tekstualni sadræaj i HTML oznake tela stranice

</body>

</html>


7

HTML oznake moæete pisati velikim slovima, malim slovima ili kombinovano, jer

åitaåi Weba sada ne prave razliku. Meœutim, standardi kao ãto su XHTML i XML pred-

viœaju pisaçe oznaka samo malim slovima i pored toga ãto åitaåi ne prave razliku. Piãite

sve oznake i atribute u HTML-u malim slovima, pa ñe åitaåi Weba vaãe stranice moñi da

åitaju i kada neki nov standard bude zahtevao koriãñeçe samo malih slova.

HTML prazne oznake

Pored uparenih oznaka (o kojima je bilo reåi u ovom poglavàu, u odeàku “Uparene

HTML oznake”), u HTML-u se koristi joã jedan tip oznaka koje se zovu

prazne

. Dok

uparene oznake “okruæuju” sadræaj stranice, kao ãto je red teksta izmeœu poåetne i

zavrãne oznake, praznim oznakama ne treba zavrãna oznaka. One su kao jedna naredba

ili iskaz koji kaæe: “Idi tamo” ili “uradi to”. Na primer, u narednom HTML kodu oznaka

za prelom reda ( ) govori åitaåu da preœe u sledeñi red pre nego ãto prikaæe ono ãto se

joã nalazi na strani (drugi red teksta u ovom sluåaju):

<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>

Pravàeçe 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 kôd.

Poãto ste uneli iskaze, dokument saåuvajte kao tekstualnu datoteku s nastavkom .htm ili

.html. Primera radi, pokrenite program za obradu teksta (npr. Windows Notepad) i une-

site sledeñi HTML kôd:

<html>

<head>

<title> Primer jednostavnog dokumenta u HTML-u </title>

</head>

<body>

 SVETE, EVO ME!

</body>

</html>

Sada to ãto ste uradili saåuvajte u datoteci Web stranice (tj. u datoteci sa nastavkom

.htm ili .html) na åvrstom disku. Poãto ñete verovatno preuzimati dosta toga s Web loka-

cije Osborne ili unositi i åuvati u programu za obradu teksta veliki broj Web stranica s

kojima se u ovoj kçizi budete susretali, najboàe bi bilo da napravite direktorijum u kome

ñete sve to åuvati (npr. C:\HTMLPrimeri). Kôd koji ste malopre uneli saåuvajte u tom

direktorijumu kao ProbnaStranica.htm.

8


Da biste isprobali svoju prvu stranicu, pokrenite åitaå Weba i otkucajte

File://

. Iza

toga u adresno poàe åitaåa upiãite ime diska i putaçu do vaãe Web stranice. Ako ste stra-

nicu iz ovog primera saåuvali kao ProbnaStranica.htm u direktorijumu C:\HTMLPrimeri,

u adresno poàe åitaåa upiãite 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.

Kontrolisaçe formata teksta

U standardnoj obradi teksta, pasus se definiãe kao grupa reåenica. Obiåno se poåetak

novog pasusa oznaåava praznim ili uvuåenim redom. U ovoj kçizi, na primer, novi

pasusi (izuzev prvog) poåiçu uvuåenim redom. Uvuåen (ili prazan) red je vizuelan znak

da poåiçe novi pasus.

Pri unosu teksta na Web stranicu oznaka obeleæava kraj jednog i istovremeno

poåetak sledeñeg pasusa. Oznaka govori åitaåu Weba da preœe u sledeñi red, umetne

prazan red, a zatim – u redu ispod praznog – poåne naredni pasus (u kome se nalazi tekst

iza kojeg je oznaka ).

U sledeñem primeru, poåetne i zavrãne oznake pasusa () obeleæavaju poåetak

i kraj svakog pasusa, kao ãto je prikazano na slici 1-3.

<html>

<head>

<title> Evo puno teksta </title>

</head>

<body>

 Tekst izmeœu dve oznake pasusa åini jedan pasus. Svaki pasus ima

jednu ili viãe reåenica. 

 Sledeñi pasus poåiçe ovde. Prazan red se umeñe izmeœu dva

pasusa.

</body>

</html>

Slika 1-2 Jednostavna Web stranica koju prikazuje Internet Explorer.


9

U HTML-u postoji i nekoliko oznaka za formatiraçe teksta koje moæete koristiti da

meçate izgled teksta, obiåno kada æelite neãto da naglasite. Da biste formatirali tekst,

stavite poåetnu oznaku formata na poåetak tog teksta. Sledi lista u kojoj su opisane tri

najåeãñe oznake formata.

•



Tekst koji se nalazi izmeœu oznaka Bold biñe prikazan

polucrnim

fontom.

•



Tekst koji se nalazi izmeœu oznaka Italic biñe prikazan

kurzivom

.

•



Tekst koji se nalazi izmeœu oznaka Underline biñe podvuåen.

Sledeñi kôd u HTML-u prikazuje polucrni, kurzivni i podvuåeni tekst, kao ãto je

prikazano na slici 1-4.

Slika 1-3 Oznake pasusa rasporeœuju tekst u grupe razdvojene praznim redovima.

Slika 1-4 Oznake formata pomoñu kojih u HTML-u meçate izgled teksta.

10


<html>

<head>

<title> Ovo su osnovni stilovi teksta </title>

</head>

<body>

 Ovaj tekst se prikazuje polucrnim fontom 

 Ovaj tekst se prikazuje kurzivnim fontom 

 Ovaj tekst se prikazuje podvuåen 

</body>

</html>

HTML atributi

Atributi

(jedan ili viãe çih) umeñu se u HTML oznaku da bi åitaåu dali dodatne infor-

macije o naåinu na koji treba da izvrãi naredbu oznake. Na primer, oznaka govori

Web åitaåu da æelite da promenite izgled teksta koji sledi. Atributi

color

i

face

, koji se

u sledeñem primeru nalaze iza imena oznake, govore åitaåu kojom bojom (red – crvena)

i kojim fontom (Helvetica) treba da ispiãe tekst koji prati oznaku:

 

Ovaj tekst je crven i ispisan fontom Helvetica. 

Atributi, koji se uvek piãu iza imena oznake bilo da su one poåetne ili prazne, sastoje

se od tri dela. Prvo se piãe ime atributa, zatim znak jednako (=) i, konaåno, vrednost

atributa koja se nalazi izmeœu navodnika (") ili polunavodnika (').

NAPOMENA

Åitaå Weba ignoriãe sve razmake s bilo koje strane znaka jednakosti (=) koji stoji izmeœu

atributa i çegove vrednosti pod navodnicima. Tako ñete viœati i Web dokumente bez

razmaka (kao u HTML iskazu iz prethodnog primera) i Web dokumente sa razmacima

oko znaka jednako. Izaberite ono ãto vam viãe odgovara, samo budite dosledni.

Åitaå Weba primeçuje atribut ili atribute koje ste naveli iza poåetne oznake sve dok

ne proåita odgovarajuñu zavrãnu oznaku. U narednom primeru, åitaå ñe prikazivati tekst

boje i fonta naznaåenih atributima

color

i

face u okviru oznake sve dok u HTML

kodu Web stranice ne naiœe na zavrãnu oznaku . Slika 1-5 pokazuje sadræaj

oznake s dva atributa.

Rad s fontovimaAko drugaåije ne naznaåite u HTML kodu stranice, posetioci vaãe Web lokacije vide

tekst stranice u svom podrazumevanom fontu i stilu, podrazumevane boje i veliåine.

Åitaå Weba posetioca kontroliãe podrazumevana podeãavaça teksta koji on na ekranu

prikazuje. Upotrebom poåetne i zavrãne oznake fonta () kontroliãete kako

tekst na ekranu posetioca izgleda. Treba reñi da je ova oznaka relativno zastarela, tj. da

buduñe verzije åitaåa Weba, pravàene po najnovijem HTML standardu, ovakvu oznaku

moæda neñe imati, tako da ñe je ignorisati, kao i çene atribute. Iako izgled teksta moæete

meçati atributima u okviru oznake , iste efekte, ako ne i boàe, moæete postiñi

pravàeçem CSS pravila, ãto ñete nauåiti u poglavàu 4.

Pog l avàe 1 : O snove HTML -a 11

Sledeñi atributi, napisani unutar poåetne oznake, govore åitaåu Weba kako da prikaæe

tekst Web dokumenta:

• Atribut color odreœuje boju teksta. Vrednosti boja mogu

biti imena (npr. “red”, “green”, “yellow”, “blue” itd.) ili heksadecimalne vrednosti

(npr. #FF0000, #008000, #FFFF00, #0000FF itd.) koje predstavàaju koliåine

crvene, zelene i plave koje åitaå treba da pomeãa da bi dobio boju teksta koju æelite.

• Atribut size odreœuje veliåinu teksta (u odnosu na veliåinu

osnovnog fonta) koristeñi vrednosti od -7 do 7. Ãto je niæa vrednost, to su maça

slova.

• Atribut face odreœuje ime fonta (npr. Times New

Roman, Helvetica ili Arial). Ako font naveden u atributu fonta ne postoji na raåunaru

posetioca, åitaå ñe ignorisati atribut face i zameniti ga svojim podrazumevanim

fontom.

Åitaå Weba kontroliãe podrazumevane vrednosti boja, veliåine i fonta. Da bi tekst

ponovo imao podrazumevane vrednosti åitaåa Weba, stavite oznaku na kraj tek-

sta koji ste meçali atributima oznake . Sledeñi kôd govori åitaåu da tekst prikaæe

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 obiåan tekst 

</body>

</html>

Slika 1-5 Sadræaj oznake s dva atributa.

HTML naredbe i atributi dati su unutar uglastih zagrada

Atribut Atribut

HTMLnaredba

Vrednost Vrednost

Imeatributa

Imeatributa

12 H TML i Web d i za j n k roz p rak t i å ne p r ime re

Kako da veñem broju elemenata stranice dodelite isti skup atributaKada æelite da veñem broju susednih elemenata stranice dodelite isti skup atributa odjednom, stavite elemente na koje atributi treba da deluju izmeœu poåetne i zavrãne

oznake podele (<div></div>). Na primer, recimo da hoñete izmeœu leve i desne margine

Web stranice da stavite dva reda teksta i sliku. Umesto da dodelite atribut align (porav-

naçe) svakoj od tri HTML oznake, stavite oznaku <div> ispred prvog elementa, a oznaku

</div> iza posledçeg (kao ãto je pokazano u sledeñem primeru).

<div align="center">

 Ovaj tekst je stavàen IZNAD slike.

<img src="image.jpg">

 Ovaj tekst je stavàen ISPOD slike.

</div>

Pomoñu oznake <div> moæete da dodelite jedan ili viãe atributa formatiraça grupi

HTML oznaka, dok oznaka </div> govori åitaåu da se vrati koriãñeçu podrazumevanih

vrednosti atributa.

Izrada Web stranica koriãñeçem programa za ureœivaçe i obradu teksta i namenskih aplikacijaPravàeçe izuzetne Web stranice zahteva dobro poznavaçe tehnike dizajniraça i pot-

puno razumevaçe znaåeça oznaka i atributa u HTML-u. Ako ostavimo po strani poj-

move “dobrog” i “loãeg” dizajniraça, pravàeçe stranice se svodi na samo jednu stvar

– pravàeçe dokumenta (tj. tekstualne datoteke) koji sadræi HTML kôd neophodan da bi

åitaå Weba na ekranu prikazao ono ãto hoñete. Iako se u ovom poglavàu govori o osnov-

nom HTML kodu, dobro bi bilo da se upoznate s programima za pravàeçe tekstualnih

dokumenata pomoñu kojih ñete pisati i åuvati HTML kôd stranice.

Web stranica nije niãta viãe od tekstualnog dokumenta koji sadræi tekst i HTML kôd

(oznake i atribute) potreban åitaåu Weba da bi traæene informacije prikazao na ekranu.

Zato, za pravàeçe Web stranice nije potreban poseban program. Jedino je potrebno opãte

poznavaçe HTML-a i program u kome moæete åuvati datoteku koja sadræi samo tekst.

Postoje tri vrste programa pomoñu kojih se mogu praviti HTML dokumenti: programi za

ureœivaçe teksta, programi za obradu teksta i programi za ureœivaçe HTML koda (npr.

Dreamweaver i Front Page). Svaki od ova tri tipa programa ima prednosti, a u nekim

sluåajevima i mane.

Programi za ureœivaçe tekstaProgram za ureœivaçe teksta (engl. text editor) najjednostavniji je (verovatno se i najlakãe

koristi) od tri tipa programa kojima se moæe napraviti tekstualni dokument. To je program

bez suviãnih ukrasa, pomoñu koga unosite tekst u raåunar i åuvate ga u datoteci, na disku

ili disketi. Raåunar pod Windowsom ima program za ureœivaçe teksta koji se zove Note-

pad, dok se kod raåunara Machintosh taj program zove SimpleText.


Programi za ureœivaçe teksta obiåno nemaju modul za proveru pravopisa i napredne

alatke formatiraça, kao ãto su opis stila i pravila pasusa. Oni, meœutim, dopuãtaju da

upiãete informacije na elektronski list papira i to saåuvate u datoteci. Najveña mana

koriãñeça programa za ureœivaçe teksta pri pravàeçu Web stranice jeste ãto ovim pro-

gramima nije lako pisati oznake prema sintaksnim pravilima HTML-a. Program za ure-

œivaçe teksta snima ono ãto kucate, ne obaveãtavajuñi vas da ste pogreãno napisali neku

reå ili da postoji sintaksna greãka. S druge strane, çegova prednost je to ãto ñete morati

da bræe nauåite HTML, jer vas primorava da se oslonite iskàuåivo na svoje znaçe. Na

slici 1-6 prikazan je HTML dokument napravàen pomoñu programa Microsoft Notepad.

Poãto HTML kôd upiãete u Notepad, izaberite File | Save i unesite ime datoteke da

biste Web stranicu saåuvali na disku. Obavezno imenu datoteke dodajte nastavak .htm ili

.html (a ne podrazumevano .txt).

Programi za obradu tekstaDva najpopularnija programa za obradu teksta (engl. word processor) jesu Microsoft

Word i Corel WordPerfect. Ovi programi imaju prednost nad programima za ureœivaçe

teksta jer mogu da proveravaju da li ste pravilno napisali reåi. Ipak, ako nemate modul za

proveru pravopisa napravàen za HTML, proveãñete dosta vremena nalaæuñi programu da

ignoriãe HTML oznake, jer takve reåi ne postoje ni u jednom jeziku.

Slika 1-6 HTML dokument napravàen u programu Notepad.


Ako program za obradu teksta u kome radite nema HTML modul za proveru pravopisa,

moæete mu dati naredbu learn (nauåi) za nove reåi. Primera radi, program za obradu teksta

ñe oznaku slike <img> podvuñi kao pogreãno napisanu reå. Meœutim, ako mu date naredbu

da nauåi da je znakovni niz <img> pravilno napisan, neñe ga viãe podvlaåiti. Savetujem

vam da, pre nego ãto poånete da uåite program novim reåima, proverite da li ste sintaksiåki

ispravno napisali oznaku.

Program za obradu teksta ima dve prednosti: prvo, moæete mu reñi da proveri pravo-

pis reåi i oznaka koje unosite u HTML datoteku Web stranice, a drugo, opet morate brzo

nauåiti HTML jer ñete i daàe upisivati u dokument HTML kôd koji åitaå treba da izvrãi.

Datoteku obavezno åuvajte samo kao tekstualnu datoteku pomoñu funkcije “save as”

programa za obradu teksta. Programi za obradu teksta rade neãto ãto programi za ureœi-

vaçe teksta ne rade: u dokument umeñu kontrolne kodove. Ovi kodovi utiåu na to kako

ñe åitaå Weba prikazati stranicu, pa åak izazivaju i da je uopãte ne prikaæe ili da se sam

åitaå poremeti. Zbog toga åuvajte HTML datoteku kao åisto tekstualnu datoteku.

Aplikacije za izradu Web stranicaKoristeñi ove aplikacije, Web stranice pravite na skoro isti naåin kao kad koristite apli-

kacije za ureœivaçe stranica za klasiånu ãtampu (poput PageMarkera i QuarkXPressa). Na

træiãtu postoji mnoãtvo 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 stavàate tekst i slike na Web stranicu, program sam pravi HTML

kôd. Prednost namenske aplikacije je u tome ãto, dok pravite stranicu, moæete da pratite

kako ñe ona izgledati u åitaåu. Na slici 1-7 pokazano je kako izgleda pravàeçe stranice

u programu GoLive.

Slika 1-7 Pomoñu namenskih programa za izradu Web stranica, odmah vidite ãta ste uradili.


Mana ovakvih programa je ãto umesto vas piãu ceo HTML kôd. To na prvi pogled

deluje kao prednost, ali u stvari ne dobijate ãansu da nauåite da radite ono ãto aplikacija

moæe da uradi umesto vas. Ako, na primer, æelite da dodate odreœenu karakteristiku na

stranicu, a aplikacija nema dugme koje treba pritisnuti za to, neñete ostvariti svoj naum,

jer ne znate da piãete HTML kôd. Uz to, programi za izradu Web stranica nisu savrãeni;

ponekad dodaju suviãan kôd. Vi taj kôd ne moæete da sklonite ako ne znate HTML da

biste procenili ãta vam treba, a ãta je suviãno.

Ako tek poåiçete da se bavite Web dizajniraçem, dobro bi bilo da najpre radite u

programu za ureœivaçe ili obradu teksta. Tek poãto savladate HTML, preœite na pro-

grame za izradu Web stranica kao ãto su Dreamweaver ili GoLive. Ako pak znate HTML,

neki od navedenih programa bio bi najboài izbor za vas. Program za izradu Web stranice

piãe brzo HTML kôd dok osmiãàavate stranicu, a u svakom momentu moæete da ga pre-

kinete da biste kôd prilagodili svojim specifiånim potrebama.

Relativne i apsolutne putaçe datotekaKada pravite novu Web lokaciju, morate Web sadræaj (tj. HTML dokumente, slike,

animacije, zvuk i ostale propratne datoteke) prebaciti s raåunara na kome ste ga napravili

na Web server. Ako su Web stranice povezane sa stranicama iz istog ili povezanog direk-

torijuma (kao ãto su poddirektorijum ili roditeàski direktorijum), uãtedeñete dosta vre-

mena i truda ako koristite relativne putaçe kada HTML oznakama neke Web stranice

upuñujete na datoteke.

Kada posetilac izabere hipertekstualnu vezu, åitaå Weba, da bi naãao datoteku koja

mu treba, koristi putaçu koju je dobio od href atributa hiperveze. Pri naznaåavaçu

lokacije datoteke moæete koristiti apsolutne ili relativne putaçe. 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 putaça sadræi nazive direktorijuma koji su åitaåu potrebni da bi doãao do

datoteke, a traæeçe zapoåiçe od Web stranice s hipervezom koja upuñuje na spoàaãçu

datoteku. Na primer, ako se clock.jpg nalazi u direktorijumu Folder_B (kao na slici 1-8),

a Web stranica koja upuñuje na datoteku clock.jpg se nalazi u Folder_A, relativna putaça

za clock.jpg na trenutnoj stranici glasi: Folder_B/clock.jpg. Drugim reåima, tekuñi direk-

torijum sadræi Folder_B koji sadræi datoteku clock.jpg. Sledeña oznaka <img> koristi

atribut src s relativnom putaçom.

<img src="Folder_B/clock.jpg">

Relativna putaça åitaåu Weba govori da traæeçe datoteke zapoåne u direktorijumu

koji sadræi trenutni HTML dokument. Recimo da se HTML dokument koji sadræi sliku iz

oznake <img> iz prethodnog primera nalazi u direktorijumu idx_folder. Relativna putaça

u atributu src govori da se direktorijum Folder_A nalazi u okviru direktorijuma idx_folder.

Apsolutne putaçe pronalaze datoteku poåevãi od vrha hijerarhije direktorijuma ka

dnu – bez obzira na to gde se nalazi tekuñi Web dokument. Ovakve putaçe uvek poåiçu

kosom crtom (/) da bi se razlikovale od relativnih putaça.


Pretpostavimo da se datoteka clock.jpg nalazi na disku D u direktorijumu Folder_B,

koji se nalazi u Folder_A. Da biste naveli apsolutnu putaçu, morate reñi åitaåu gde da

traæi datoteku, poåevãi od diska na kome je ta datoteka unutar nekog direktorijuma. Sle-

deñi kôd pokazuje apsolutnu putaçu za clock.jpg u primeru:

<img src="/D:Folder_A/Folder_B/clock.jpg">

Koriãñeçe apsolutnih putaça oteæava pomeraçe datoteka Web lokacije s lokalnog

diska na Web server ili s jednog Web servera na drugi. Na primer, da biste uspeãno kori-

stili relativne putaçe treba samo da napravite glavni direktorijum na Web serveru u

kojem ñe biti lokacija, a zatim stavite sve dokumente i propratne datoteke u poddirektori-

jum u glavnoj datoteci. Relativne putaçe ñe biti ispravne na Web serveru kao ãto su i na

vaãem raåunaru åak i ako ostatak hijerarhije direktorijuma Web servera ne liåi na vaãu.

Nasuprot tome, ako koristite apsolutne adrese, da bi Web server naãao datoteke na koje

upuñuju hiperveze s vaãih Web stranica, on mora imati potpuno istu hijerarhiju direktori-

juma kao ãto je imate vi na raåunaru.

Preuzimaçe i instaliraçe PWS Web serveraKao ãto ste veñ videli u ovom poglavàu, u åitaåu Weba moæete prikazati stranice koje

pravite i åuvate na lokalnom ili mreænom disku, bez obaveze da se prethodno poveæete

s Internetom ili Web serverom. Samo unesite putaçu datoteke s nastavkom imena .html

(Web stranica) kao File://<.html file pathname> u adresno poàe åitaåa Weba. Znaåi, ako

Web stranicu pod nazivom TestPage.htm saåuvate u direktorijumu MyWebs u korenskom

direktorijumu diska C, moæete je prikazati u åitaåu tako ãto upiãete File://G:/MyWebs/

TestPage.htm.

Slika 1-8 Hijerarhija direktorijuma datoteke clock.jpg.


Da bi vaãe stranice bile dostupne svima koji se povezuju s Internetom, morate imati

Web server. U poglavàima 10, 11 i 12 videñete da vam Web server treba i za izvrãavaçe

serverskih skriptova (to su programi koje pokreñe server za vaãu Web stranicu). Ako

koristite operativni sistem Windows (Windows 95, 98, Me, NT ili XP), moæete besplatno

instalirati program Personal Web Server (PWS). Poãto ga instalirate i uspostavite vezu s

Internetom, svi korisnici Weba moñi ñe da vide stranice koje ste objavili. PWS moæete

koristiti i za proveraravaçe Web stranica s kojih se ãaàu obrasci i stranica sa serverskim

skriptovima, kao ãto su one umetnute u PHP i Active Server Pages (o kojima ñete uåiti u

poglavàima 10 i 11).

Ako imate CD sa Windowsom 98, ubacite ga u CD-ROM i preskoåite opis

procedure preuzimaça koji sledi; nañi ñete PWS u direktorijumu \Add-Ons\

PWS. U protivnom, PWS morate instalirati iz Windows NT 4 Option Packa koji moæete

preuzeti s Microsoftove Web lokacije na Internetu, na sledeñi naåin:

1. Ako nemate stalnu vezu s Internetom uspostavite modemsku vezu preko davaoca

Internet usluga.

2. Pokrenite åitaå Weba, upiãite sledeñu URL adresu u adresno poàe: 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 moæete izabrati operativni sistem

za koji preuzimate NT 4 Option Pack.

4. Na stranici Download Step 2, izaberite operativni sistem iz padajuñe liste. Izaberite

opciju Windows 95, osim ako PWS ne instalirate na operativni sistem NT Worksta-

tion 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 doçem 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 padajuñoj listi koja se nalazi desno od poàa Save In izaberite direktorijum u

kome ñete åuvati programsku datoteku download.exe. Na primer, ovu listu moæete

koristiti da doœete do direktorijuma C:\My Download Files. Pritisnite Save.

8. Pomoñu Windows Explorera doœite do direktorijuma u kome ste saåuvali down-

load.exe. Pokrenite tu aplikaciju, a ona ñe prikazati ugovor o dozvoli za Windows

NT 4.0 Option Pack.

9. Proåitajte uslove ugovora, pa pritisnite Yes da biste nastavili instaliraçe. Program

preuzimaça ñe na kraju prikazati okvir za dijalog Download Options.

10. U tom okviru za dijalog pritisnite radio-dugme Download Only, a zatim dugme

Next. Prikazañe se prozor sa opcijama Language and CPU/Operating Systems.

11. Izaberite jezik, CPU (procesor) i operativni sistem i pritisnite Next. Program ñe pri-

kazati prozor Installation Options.

PRIMER


12. Pritisnite dugme Full Installation, a zatim Next. Biñe prikazan prozor Save In Folder.

13. Unesite direktorijum u koji æelite da program preuzimaça smesti datoteke NT 4

Option Packa. (Na primer, u poàe Save In Folder moæete uneti C:\PWSSetupFiles.)

Pritisnite Next. Program preuzimaça ñe prikazati okvir za dijalog Download

Location sa listom lokacija s kojih moæete preuzeti NT 4 Option Pack.

14. U okviru za dijalog Download Location izaberite lokaciju za preuzimaçe koja je

vama geografski najbliæa (ako na listi postoji viãe lokacija). Pritisnite Next i pro-

gram ñe vam pokazati sertifikat o bezbednosti lokacije za preuzimaçe. Pritisnite

Yes i zavrãtite preuzimaçe NT 4 Option Packa.

Nakon zavrãenog 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 raåunar. Da biste instali-

rali PWS, pratite sledeñe 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 vaãeg CD-a) ili iz direktorijuma koji ste uneli u koraku 13 prethodne

procedure preuzimaça.

2. Na poåetnom ekranu instalacije programa podeãavaça pritisnite Next. Taj program

ñe prikazati PWS End User License Agreement. Poãto proåitate ugovor, pritisnite

Accept da biste nastavili instaliraçe. Program podeãavaça ñ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 nadograœujete stariju verziju PWS-a, ponovo instalirate tekuñu

verziju, ili prvi put instalirate Web server).

3. U okviru za dijalog pritisnite Next da biste prihvatili podrazumevane opcije instali-

raça.

Nakon izvrãenog koraka 3, program Setup ñe zavrãiti instaliraçe softvera PWS i

traæiti da restartujete raåunar. Tada ñe Windows pokrenuti PWS. Kada sledeñi put budete

videli radnu povrãinu Windowsa, potraæite ikonicu PWS na Windowsovoj sistemskoj

paleti (u desnom, doçem uglu prozora). Naredni savet ñe vam pokazati kako da radite s

Web serverom i kako da objavàujete svoje Web stranice na intranetu kompanije ili na

samom Internetu.

Rad s PWS Web serverom i objavàivaçe Web stranicePoãto ste prema prethodnom uputstvu uspeãno instalirali program Personal Web Server

(PWS), morate nauåiti kako da pokrenete i zaustavite Web server i kako da utvrdite mesto

matiånog direktorijuma servera. U ovu svrhu se koristi alatka Personal Web Manager, koju

moæete pokrenuti na razliåite naåine, zavisno od operativnog sistema.


Najlakãi naåin 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.

Poãto pokrenete Personal Web Manager, prikazañe se glavni ekran programa sliånog

onom na slici 1-9. U çemu se nalazi ime Web servera i çegovog matiånog direktorijuma.

Ime vaãeg Web servera biñe prikazano u vrhu stranice, plavim slovima. Ko god radi na

vaãem raåunaru ili koristi drugu radnu stanicu na vaãoj lokalnoj mreæi, moæe pomoñu

imena Web servera da vidi Web stranice s vaãeg PWS-a. Ime Web servera moæete prome-

niti tako ãto ñete promeniti ime svog PC-ja na kartici Identification okvira za dijalog Net-

work 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, moæete da objavite svoje Web

stranice. Neka je, na primer, ime vaãeg raåunara (time i ime vaãeg PWS-a) zdravko, a

korenski direktorijum servera C:\WebShare\wwwroot. Ako stranicu, npr. TestPage.htm,

stavite u direktorijum C:\WebShare\wwwroot svog raåunara, vi (i svako ko koristi radnu

stanicu povezanu na vaãu lokalnu mreæu) moæete da prikaæete Web stranicu tako ãto ñete

u adresno poàe upisati http://zdravko/TestPage.htm i zatim pritisnuti ENTER.

Pretpostavimo sada da ste napravili datoteku ispod korenskog (najviãeg) direktori-

juma Web servera koja se zove HTDocs i u çu stavili Web stranicu kao ãto je TestPa-

ge2.htm. Putaça za ovu stranicu bila bi c:\WebShare\wwwroot\htdocs\TestPage2.htm.

Meœutim, stranicu moæete prikazati pomoñu åitaåa tako ãto ñete u adresno poàe åitaåa

upisati URL http://zdravko/htdocs/TestPage2.htm i pritisnuti ENTER.

PRIMER

Slika 1-9 Glavni ekran programa Personal Web Manager.


Osim åitaåa s radnih stanica povezanih na lokalnu mreæu, moæete raåunarima ãirom

sveta preko Interneta omoguñiti pristup vaãim Web stranicama. Za to je potrebno da se

poveæete s Internetom i posetiocima date svoju IP adresu. Ako vam davalac Internet

usluga nije dodelio stalnu adresu (naravno, po ceni meseåne pretplate), ne zaboravite da

vaã PWS moæe biti na razliåitoj IP adresi svaki put kada se poveæete s Internetom.

Ako nemate stalnu IP adresu, IP ñete saznati ako pokrenete ipconfig.exe. Ovaj pro-

gram se izvrãava pod komandnim okruæeçem MS DOS-a. Da biste pokrenuli MS DOS,

izaberite Start | Run, nakon åega ñe Windows prikazati okvir za dijalog Run. U poàe

Open tog okvira upiãite command.com, a potom pritisnite ENTER ili OK. U komandni

prozor MS DOS-a upiãite ipconfig.exe i pritisnite ENTER. Ova aplikacija ñe dati IP

adresu odmah iznad stavke Subnet Mask, kao ãto je prikazano na slici 1-10.

(Moæete pokrenuti i Windowsovu verziju ipconfig.exe ako izaberete Start | Run, a

zatim u poàe Open okvira za dijalog Run upiãete winipcfg.exe). Poãto ste saznali IP

adresu raåunara, 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, upotre-

bite neãto od sledeñeg da biste stranice iz prethodnog primera pogledali preko Interneta:

http://24.234.31.218/TestPage.htm

http://24.234.31.218/HTDocs/TestPage2.htm

Poãto ste utvrdili IP adresu raåunara, moæete je dati drugima. Ne zaboravite da ñe se

vaãa IP adresa promeniti kada se poveæete s Internetom u sluåaju da vam dobavàaå Internet

usluga nije dodelio statiåku (trajnu) IP adresu. Ãtaviãe, IP adresa se moæe promeniti i bez

vaãeg znaça, pa åak i ako imate stalnu vezu s Internetom. Kada se IP adresa vaãeg Web

servera promeni, oni koji pokuãaju da vide vaãe stranice koristeñi staru IP adresu neñe

uspeti, bez obzira na to ãto PWS radi i ãto je vaã raåunar povezan s Internetom.

Slika 1-10 Program ipconfig pokazuje IP adresu raåunara.


Reãeçe je traæiti od davaoca Internet usluga statiåku IP adresu. On vam to trenutno ne

moæe uraditi ako se s Internetom povezujete preko modemske veze putem obiåne tele-

fonske linije – neophodno je da imate vezu s Internetom preko ISDN, DSL ili kablovskog

modema. Kada dobijete statiåku IP adresu, morate je uneti u raåunar, u okvir za dijalog

TCP/IP Properties. To ñete uraditi na sledeñi naåin:

1. Izaberite stavku menija Start | Settings, a zatim Control Panel. Windows ñe otvoriti

Control Panel.

2. U prozoru Control Panel dvaput pritisnite ikonicu Network. Prikazañe se okvir za

dijalog Network.

3. Na kartici Configuration ovog okvira za dijalog pritisnite TCP/IP da biste izabrali

protokol. (Ako imate Windows NT na raåunaru, ovaj protokol ñete nañi 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 mreænu masku koje vam je dao dobavàaå Internet usluga.

Poãto ste zavrãili korak 4, pritisnite OK na dnu okvira za dijalog TCP/IP Properties, a

zatim i OK na dnu okvira za dijalog Network. Windows ñe aæurirati raåunar i traæiti da ga

resetujete. Poãto to uradite i ponovo se poveæete s Internetom, PWS ñe biti uvek dostupan

na istoj (statiåkoj) IP adresi.

Kada vaã raåunar ima statiåku IP adresu, moæete da dobijete ime domena, bilo od

davaoca Internet usluga, bilo iz registra imena domena kao ãto je VeriSign (http://www.

NetSol.com). Poãto dobijete ime domena, npr. MyWebServerName.com, traæite od

davaoca Internet usluga da u svom serveru imena domena (DNS) poveæe ime vaãeg

domena s vaãom IP adresom. S imenom domena koje pokazuje na pravo mesto, posetioci

ãirom Interneta moñi ñe da vide Web stranice s vaãeg PWS-a ili koristeñi vaãu IP adresu

(kao ãto ste ranije videli) ili pristupajuñi Web serveru s imenom vaãeg domena, kao u sle-

deñem 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 statiåku IP adresu pa

koristite jedan od svojih raåunara kao Web server, davalac Internet usluga moæe smestiti

vaãu Web lokaciju na svoj server. Mnogi davaoci nude 5–10 MB (åak i viãe) prostora na

Webu uz uplañeno 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 obezbeœuje prostor za Web lokaciju,

jednostavno ñete kopirati stranice koje æelite da objavite u hijerarhiju datoteka vaãe

lokacije na disk tog davaoca, umesto u korenski direktorijum PWS-a na vaãem disku.

Poãto instalirate PWS, svaki put kad ukàuåite raåunar Windows automatski pokreñe

Web server. Da biste zaustavili server, ispod çegovog imena, u gorçoj polovini glavnog

dela programa Personal Web Manager pritisnite dugme Stop. (Kad zaustavite PWS, Web

server ñe biti zaustavàen sve dok ga ponovo ne pokrenete.) Da biste ponovo pokrenuli

PWS, pritisnite dugme Start koje je zamenilo dugme Stop pomoñu koga ste zaustavili Web


server. (PWS moæete potpuno ili privremeno zaustaviti biraçem Properties | Stop Service,

odnosno Properties | Pause Service, a Web server moæete ponovo pokrenuti biraçem

Properties | Start Service, odnosno Properties | Continue Service).

Opisivaçe sadræaja Web stranice naslovomDok krstarite Webom, vaã åitaå ñe u svojoj naslovnoj traci (u vrhu prozora aplikacije

åitaåa) prikazivati naslov svake Web stranice koju pregledate. Naslov stranice daje ime i,

u nekoliko reåi, opisuje namenu te stranice (slika 1-11).

Da biste napravili naslov stranice, umetnite tekst naslova izmeœu poåetne i

zavrãne oznake naslova (<title></title>) u zaglavàu HTML-a Web stranice.

To je pokazano sledeñim primerom:

<html>

<head>

<title> Dobro doãli u Zdravkovu prezentaciju – Uvodna stranica

</title>

</head>

<body>

...Sadræaj koji åitaå Weba prikazuje ide ovde...

</body>

</html>

Slika 1-11 Naslov Web stranice pojavàuje se na naslovnoj traci, u prozoru åitaåa.

NaslovWeb stranice

PRIMER


Naslov stranice bi trebalo da posetiocima opisuje çen sadræaj. 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 sluæe kao

putokazi.

Meœutim, naslovi ne sluæe samo da podseñaju posetioce gde se trenutno nalaze, veñ se

koriste i u sledeñe svrhe:

• Åitaåi Weba koriste tekst naslova kada posetilac obeleæi stranicu da bi je kasnije

lako pronaãao, tj. kada je u Internet Exploreru stavi u listu Favorites ili u Netscape

Navigatoru u listu Bookmarks. Naslov tipa Home Page ne izdvaja vaãu lokaciju od

ostalih u listi omiàenih lokacija posetioca.

• Paukovi (automatizovani programi za pretraæivaçe Weba) za pretraæivaçe koriste

tekst naslova. Opet, naslov kao Home Page ne pruæa korisne informacije. U naslo-

vima koristite opisne reåi – reåi koje bi posetioci mogli uneti u poàe za pretragu

kada hoñe da naœu vaãu Web lokaciju.

• Tekst naslova pomaæe vama kao autoru da kontroliãete lokaciju sastavàenu od viãe

stranica. Naslov je neãto kao zaglavàe pomoñu koga prepoznajete stranicu. Ako

vaãa Web lokacija ima petnaest stranica, naslovi ñe vam pomoñi da bræe naœete onu

koju traæite. Na primer, Web lokacija za prodaju nekretnina, pomoñu naslova moæe

da istakne stranice za prodaju kuña, prodaju stanova itd.

Osim ovih pravila, treba da znate da se, po W3C-u, stranica bez naslova smatra neis-

pravnom. Pomoñu naslova, Web autori prave standardizovane stranice. Jednom, kada

naslov bude obavezan deo stranice, vaãa ñe zadovoàavati nove standarde.

Prepoznavaçe Web dokumenata pomoñu definicije tipa dokumentaJedan od najboàih naåina da nauåite tehnike HTML-a jeste da gledate HTML iskaze kori-

ãñene za stranice koje viœate na Webu. Da biste pogledali izvorni kôd Web stranice, izabe-

rite stavku menija åitaåa View | Source. (Ako koristite Netscape Navigator, izaberite

stavku View | Page Source). Dok budete gledali stranice, primetiñete da mnogi HTML

dokumenti na poåetku stranice imaju oznaku tipa dokumenta (<!doctype>).

Definicija tipa dokumenta – DTD (engl. Document Type Definition) – identi-

fikuje verziju HTML-a koja je koriãñena za pravàeçe stranice. Ova infor-

macija je bitna åitaåima Weba, programima za proveru ispravnosti HTML koda i ostalim

programima koji se koriste za izradu Web strana. Da biste proverili ispravnost postojeñeg

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 dræi verzije HTML

4.01, program proverava da li je stranica po standardu HTML 4.01 i sastavàa izveãtaj

o rezultatima provere.

PRIMER


U buduñnosti ñe poznavaçe verzije HTML-a koja je koriãñena za pravàeçe stranice

pomagati åitaåima i ostalim programima da prikaæu stranicu s veñom taånoãñu. Prema

W3C standardu, åak i stranica napravàena u HTML-u 4 neispravna je ako HTML doku-

ment ne poåiçe definicijom tipa dokumenta. Ova definicija se piãe na vrhu HTML

dokumenta, ispred oznake <html>. Sledi primer ispravnog formata za uobiåajenu defini-

ciju tipa dokumenta:

<!doctype html public "naziv verzije" "url">

• html Oznaåava kôd kao verziju HTML-a.

• public Oznaåava da se jeziku moæe javno pristupiti.

• naziv verzije Oznaåava celo ime za odreœenu verziju HTML-a. Na primer, celo

ime za HTML 4.0 je -//W3C//DTD HTML 4.01 Transitional//EN.

• url Oznaåava gde se na World Wide Webu nalazi javna definicija 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 moæe sadræati sve dozvo-

àene elemente iz “stroge” verzije HTML 4, dodatne atribute opisivaça kao i zastarele

elemente. Nasuprot tome, opcija strict.dtd pokazuje da se dokument strogo dræi standarda

za HTML 4. Stroga verzija HTML-a 4.01 daje prednost strukturi HTML dokumenta u

odnosu na predstavàaçe stranice u åitaåu Weba. To ne znaåi da ova verzija stranicu zapo-

stavàa – ona se, jednostavno, usredsreœuje na HTML kôd. Zastarele oznake i elementi kao

ãto su okviri i odrediãta veze nisu dozvoàeni u strogoj verziji. Treña definicija tipa doku-

menta, frameset.dtd, koristi se kada HTML kôd, åija se ispravnost proverava, sadræi okvire.

Ni Internet Explorer ni Netscape Navigator trenutno ne traæe da navedete definiciju

tipa dokumenta pre poåetka HTML koda Web stranice, tj. pre poåetne oznake <html>,

koja je na vrhu dokumenta. Ipak, trebalo bi da je navedete na poåetku svake stranice koju

opisujete HTML-om verzije 4.0 ili novije. Ono ãto je danas proizvoàno, u bliskoj buduñ-

nosti moæe postati obavezno, pa tako budite ispred ostalih i navedite definiciju tipa doku-

menta sada. (Zbog ograniåenosti prostora, a i da ne bismo komplikovali, primer definicije

tipa dokumenta izostavili smo iz ove kçige.)

Umetaçe komentara u Web dokumentHTML komentari su naåin da se vi (i svako ko radi s vaãim HTML dokumentima) podse-

tite o åemu ste taåno razmiãàali kad ste pravili odreœenu Web stranicu. Komentare moæete

koristiti da biste objasnili odreœene delove dokumenta. U çih moæete umetnuti i liåne

informacije kao ãto su vaãe ime, adresa i broj telefona, tako da svako ko je zainteresovan za

vaãe dizajnerske usluge moæe da vas pronaœe.

Pored toga, komentare moæete koristiti da biste privremeno sakrili neke HTML iskaze

Web dokumenta od åitaåa Weba. Pretpostavimo, na primer, da hoñete da dodate deo HTML


koda postojeñem dokumentu, ali ne æelite da åitaå prikaæe taj novi deo dok vam uprava to

ne odobri. Stavàaçem HTML oznaka komentara () oko iskaza koje æelite da sakri-

jete, govorite åitaåu da ignoriãe te iskaze dok ne uklonite oznake komentara.

Da biste napravili komentar, odgovarajuñi tekst (ili HTML iskaze koje

hoñete da komentariãete) obuhvatite izmeœu poåetne i zavrãne oznake

komentara, kao ãto su <! -- komentar -- >. Nije potrebno stavàati oznaku komentara

ispred svakog reda teksta ili HTML iskaza, jer ñe åitaå Weba ignorisati sve na ãta naiœe

posle poåetne, a pre zavrãne oznake komentara. U sledeñem primeru su tri reda komen-

tara umetnuta u zaglavàe Web stranice:

<head>

<title> Dokument koji sadræi komentare </title>

<! -- Autor ZDRAVKO ZDRAVKOVIC

Firma Zdravàe.

Telefon 001 333 4444 -- >

</head>

Iako åitaå Weba ne prikazuje na ekranu ono ãto stavite izmeœu poåetne i zavrãne

oznake komentara, posetilac lokacije i daàe moæe da vidi komentare ako dâ naredbu

åitaåu da prikaæe HTML kôd Web stranice. Åitaå ñe u zasebnom prozoru dokumenta pri-

kazati izvorni kôd (ukàuåujuñi i komentare) HTML dokumenta.

Osim za pruæaçe liånih informacija, komentare moæete upotrebàavati i za obuåavaçe

da bi se lakãe razumela namena odreœenih HTML oznaka i atributa. Moæete ih koristiti

i da biste spreåili prikazivaçe umetnutih skriptova ako åitaå Weba nema moguñnost da

prepozna oznaku skripta, kao ãto je prikazano u sledeñem primeru:

<html>

<head>

<script language="JavaScript">



</script>

</head>

<body>

...Sadræaj Web stranice koji åitaå treba da prikaæe dolazi ovde...

</body>

</html>

Bez oznaka komentara, koje se u ovom primeru nalaze oko definicije funkcije Java-

Scripta, åitaåi koji ne mogu da prepoznaju oznaku skripta, tu bi oznaku ignorisali i prika-

zali JavaScript kôd na ekranu kao tekst. Nasuprot tome, åitaåi koji prepoznaju ovu

oznaku ignoriãu HTML oznake komentara jer se u skriptovima koriste i // i /* */ za

oznaåavaçe komentara.

PRIMER


Zadavaçe fonta za tekst Web stranicePri prikazivaçu teksta Web stranice, åitaå koristi svoj podrazumevani font i veliåinu

slova osim ako ne naznaåite drugaåije u HTML kodu Web stranice. Kontrolisaçe veli-

åine i izgleda teksta je vaæno jer utiåe na opãti utisak o stranici. Vaænost tipografije ne

zavrãava se sa samim reåima. Dizajneri, na primer, koriste odreœeni font i veliåinu slova

da bi naznaåili vaænost odreœenih pasusa, pa su stoga zaglavàa veña i åesto razliåitog

fonta od ostatka teksta.

Font koji izaberete prenosi raspoloæeçe i pravi atmosferu u kojoj posetilac åita poruku.

Upotreba pogreãnog fonta moæe zbuniti posetioca, jer izgled stranice ne odgovara sadræaju.

Nekoliko studija (od kojih je jedna raœena na univerzitetu Yale) govori da serifni fontovi

sugeriãu ozbiàniji sadræaj 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

maçe ozbiàne ili neformalne poruke, kao u sledeñim primerima:

Da biste promenili font, tekst izmeœu poåetne i zavrãne oznake fonta okruæite

na sledeñi naåin:



...tekst Web stranice prikazan u naznaåenom fontu...



Atribut face govori åitaåu Weba koji font da koristi kad na ekranu prikazuje tekst Web

stranice. Na primer, poåetna oznaka fonta govori åitaåu da prikaæe tekst iza

oznake fontom Helvetica sve dok ne naiœe na oznaku :

 Ovaj tekst je prikazan fontom Helvetica 

Kada åitaå naiœe na oznaku u HTML kodu Web stranice, vraña se na prikazi-

vaçe teksta svojim podrazumevanim fontom.

Atribut face daje naredbu åitaåu Weba da u raåunaru posetioca pronaœe odreœeni font

(u naãem sluåaju Helvetica). Åitaå Weba ñe taj font koristiti kada prikazuje tekst koji se

nalazi izmeœu poåetne i zavrãne oznake fonta (). Meœutim, ako posetilac

nema instaliran taj font na svom raåunaru, åitaå Weba ñe koristiti svoj podrazumevani

font.

Posetilac lokacije moæe izabrati podrazumevani font åitaåa u svojstvima åitaåa. Na

primer, da biste promenili podrazumevani font Internet Explorera 5, izaberite stavku

menija Tools | Internet Options. Zatim pritisnite dugme Fonts, nakon åega ñe Internet

PRIMER


Explorer prikazati okvir za dijalog Fonts gde ñete izabrati podrazumevani font åitaåa.

Podrazumevani font govori åitaåu Weba kakva slova da koristi kada u Web dokumentu

nije zadat font ili kada raåunar posetioca nema zadati font.

Osim primarnog fonta, atribut face omoguñava da izaberete drugi, treñi, pa åak i

åetvrti font. Recimo da hoñete da tekst dokumenta bude prikazan fontom Helvetica.

Ako Helvetica ne postoji na raåunaru, font Georgia je prihvatàiva zamena. Sledeñim

kodom je pokazano kako se zadaje alternativni font, koji se koristi kada primarni font

ne postoji na raåunaru posetioca:



Primarni font je Helvetica. Ako na odrediãnom raåunaru ne postoji

Helvetica, åitaå ñe koristiti font Georgia.



Atribut face govori åitaåu Weba da prikaæe tekst izmeœu poåetne i zavrãne oznake

fonta () koristeñi font Helvetica, a u sluåaju da tog fonta nema – fontom

Georgia. Ako na raåunaru posetioca nema ni primarnog ni alternativnog fonta, åitaå ñe

upotrebiti svoj podrazumevani font.

Kada zadajete fontove, çihova imena piãite malim slovima jer ñe tada sistem traæiti

çihova imena napisana i malim i velikim slovima. Ako ih pak napiãete velikim slovima,

a sistem posetioca taj font ima instaliran pod imenom napisanim malim slovima, åitaå

neñe nañi traæeni font.

Kontrola toka teksta pomoñu oznaka za pasus i oznaka za prelom redaKada neformatiran tekst stavite na Web stranicu, ãirina prozora åitaåa odreœuje broj reåi

koji ñe åitaå u svakom redu na ekranu prikazati. Neformatiran tekst je obiåan tekst unesen

u HTML dokument izmeœu poåetne i zavrãne oznake tela koda (<body> </body>), kao

u sledeñem 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 formatiraça.

</body>

</html>

Åitaåi Weba ignoriãu znakove CR i LF koje umeñete u HTML kôd Web stranice priti-

skajuñi ENTER da biste pri kucaçu preãli u sledeñi red. Åitaåi podrazumevano definiãu

duæinu reda prema ãirini prozora Web åitaåa, a ne prema tome koliko ste znakova uneli


u HTML kôd Web stranice. Sledeñi primer ilustruje kako åitaå Weba podeãava duæinu

reda neformatiranog teksta iz prethodnog HTML koda prema ãirini prozora åitaåa.

Da biste deo teksta grupisali u pasus i odredili posledçu reå svakog reda,

koristite poåetne i zavrãne HTML oznake pasusa () i oznaku .

Kada åitaå naiœe na oznaku on preœe na sledeñi red ekrana, umetne prazan red, a zatim

u redu ispod praznog prikaæe tekst koji je iza oznake . Stoga, da biste povezane reåenice

grupisali u pasuse, stavite oznaku ispred prve reåi pasusa, a iza posledçe. Ako,

primera radi, stranica ima tri reda teksta i svaki je okruæen poåetnom i zavrãnom oznakom

pasusa, åitaå ñe taj tekst prikazati kao tri pasusa s praznim redom izmeœu svaka dva.

Za razliku od oznake , oznaka nema svoju zavrãnu varijantu. Kada åitaå

naiœe na oznaku u HTML kodu stranice, prelazi na sledeñi red ekrana pre nego ãto

prikaæe dodatni tekst. Stoga, da bi åitaå preãao na sledeñi red pre nego ãto nastavi s pri-

kazivaçem teksta, moæete koristiti ili ili . Ako hoñete samo da preœete u sledeñi

red, koristite , a kada æelite joã i da umetnete prazan red, koristite .

Sledeñi primer opisuje uåinak oznaka i i pokazuje kako ñe tekst izgledati

u åitaåu Weba, ãto se vidi na slici 1-12.

<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 

odreœuju prelome reda u tom tekstu.

 Oznake pasusa ostavàaju prazan red izmeœu redova

teksta, 

dok oznake za prelom reda prelamaju red bez umetaça 

dodatnog praznog reda.

</body>

</html>

Oznake formatiraça (kao ãto su i ) odreœuju gde se u åitaåevom prozoru red

teksta zavrãava. Analogija s programima za obradu teksta bila bi: oznaka jednaka je

jednom pritisku na taster ENTER, dok oznaci odgovaraju dva pritiska.

PRIMER


Åitaå Weba (kao i program za obradu teksta) prelama tekst svake stranice na desnoj

margini. Ne zaboravite da desna strana u Web dokumentu predstavàa desnu marginu

Web stranice. Zbog toga moæete koristiti oznake formatiraça da biste odredili koja ñe reå

u redu biti posledça, ali ñe åitaå, ukoliko treba prelamati tekst da bi svaki red odgovarao

ãirini prozora åitaåa.

Iako, kao ãto smo veñ naglasili, ãirina prozora åitaåa odreœuje ãirinu reda teksta,

ponekad ne æelite da åitaå prelomi red teksta. U tim sluåajevima, upiãite znak za nelomivi

razmak ( ) izmeœu reåi koje æelite da åitaå prikaæe u istom redu. Recimo da ste

napravili podnaslov za pasus teksta i hoñete da on bude u jednom redu. Da biste to postigli,

umetnite znak za nelomivi razmak izmeœu reåi podnaslova, kao u sledeñem 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 izmeœu reåi “Abraham” i “Lin-

coln”, spreåava åitaå da razdvoji ime u dva reda. Ako åitaå nema dovoàno mesta za obe

reåi u tekuñem redu, prikazañe ih u sledeñem redu zajedno (kao na slici 1-13).

Slika 1-12 Formati teksta u prozoru åitaåa Weba zasnovani na upotrebi oznaka pasusa i oznaka za prelom reda.


Da se izmeœu ove dve reåi nalazio obiåan razmak (a ne nelomivi), åitaå bi prvu reå

prikazao u jednom, a drugu u drugom redu teksta.

Meçaçe veliåine teksta pomoñu oznaka nivoa naslova i atributa size oznake fontaKada pravite Web dokument bez naznaåavaça veliåine fonta, åitaå Weba ñe tekst prikazati

u podrazumevanoj veliåini. Podrazumevane vrednosti koje åitaåi koriste za veliåinu znakova

razlikuju se, ali su najåeãñe od 12 do 14 taåaka.

Da biste umetnuli tekst naslova Web stranice i zadali çegovu veliåinu, oko teksta

stavite poåetne i zavrãne oznake nivoa naslova (od <h1> ... </h1> do <h6> ... </h6>).

Broj iza slova “h” naznaåava relativnu veliåinu teksta naslova; ãto je broj maçi, to je

naslov na ekranu veñi.

Da biste oznake nivoa naslova koristili za odreœivaçe veliåine teksta na stra-

nici, tekst stavite izmeœu poåetne i zavrãne oznake naslova. Kada åitaå naiœe

na zavrãnu oznaku naslova u HTML kodu Web stranice, on automatski stavàa tekst koji

tu oznaku sledi u naredni red i vraña se prikazivaçu teksta u podrazumevanoj veliåini.

Sledeñi primer pokazuje koriãñeçe ãest nivoa naslova razliåitih veliåina pomoñu poåetne

oznake naslova i pokazuje kako ñe svaki od tih naslova izgledati u prozoru åitaåa.

Slika 1-13 Znak za nelomivi razmak spreåava prikazivaçe imena u dva reda.

PRIMER


Drugi naåin da promenite veliåinu 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 veña vrednost, to je veñi i tekst – nasuprot oznakama naslova kod kojih se

poveñaçem broja n veliåina slova smaçuje.

Da biste tekst podesili pomoñu atributa size, postavite ga izmeœu poåetne i zavrãne

oznake fonta (). Sledeñim primerom ilustruje se HTML kôd za oznaku

fonta pomoñu atributa size i pokazuje kako ñe tekst razliåite veliåine izgledati u prozoru

åitaåa Weba.

I poåetna oznaka naslova i atribut size u oznaci omoguñavaju da zadate veli-

åinu teksta, a poåetna oznaka naslova govori åitaåu i da tekst prikaæe polucrnim slovima.

Rezolucija monitora posetioca utiåe na veliåinu teksta prikazanog u prozoru åitaåa.

Tekst na monitoru koji ima rezoluciju 1024 × 768 piksela izgleda maçi, nego na moni-

toru rezolucije 800 × 600 piksela. Razliåite platforme mogu uticati na veliåinu teksta i na

monitorima iste rezolucije. Na primer, Mac prikazuje tekst za dve taåke maçe nego Intel

raåunar.

Konzorcijum W3C je u standardu HTML 4 proglasio zastarelom oznaku fonta i çene

atribute, pa buduñe verzije åitaåa tu oznaku moæda neñe prepoznavati. Boài naåin za for-

matiraçe teksta je upotreba CSS-a (kaskadnih opisa stilova) o åemu ñete viãe saznati u

åetvrtom poglavàu.

Meçaçe boje teksta HTML dokumentaAko ne zadate boju teksta na stranici, åitaå ñe tekst prikazati u svojoj podrazumevanoj

boji, koja je obiåno crna. Ako hoñete da promenite boju reåi ili grupe reåi, upotrebite

atribut color u oznaci .


Pretpostavimo da æelite da promenite boju jedne reåenice u pasusu teksta.

Neposredno ispred poåetka teksta åiju boju hoñete da promenite umetnite

oznaku s atributom color u obliku . Atribut color govori

åitaåu da prikaæe odreœenom bojom tekst koji sledi oznaku. Na mestu u tekstu na kome

æelite da åitaå ponovo poåne da prikazuje tekst u svojoj podrazumevanoj boji, umetnite

oznaku .

Na primer, atribut color posle prve reåenice u sledeñem HTML kodu govori åitaåu

Weba da drugu reåenicu prikaæe crvenom bojom (kao u primeru ispod).

Oznaka , iza kraja druge reåenice, govori åitaåu da prestane da prikazuje tekst

crvenom bojom, ãto ga vraña na prikazivaçe ostatka teksta podrazumevanom bojom:

<html>

<head>

<title> Meçaçe boje teksta </title>

</head>

<body>

 Da biste promenili boju teksta sledeñe reåenice.

 Umetnite oznaku fonta s atributom boje

na poåetak i kraj reda.

Boja ñe se promeniti i zatim vratiti na podrazumevanu,

crnu.

</body>

</html>

Vrednost atributa color moæete zadati brojem ili imenom. Kao ãto ste u prethodnom pri-

meru videli, mogu se navoditi imena boja na engleskom kao ãto su red, green, blue... Isto

tako, moæete koristiti i heksadecimalne zapise koji predstavàaju boje. Na primer, heksa-

decimalni zapis crvene je #FF0000. Prema tome, åitaåu moæete reñi da tekst poåne da

prikazuje crvenom bilo u obliku ili .

Kada navodite boju u heksadecimalnom zapisu, brojevi predstavàaju koliåine crvene,

zelene i plave koje åitaå treba da “pomeãa” da bi dobio boju koju æelite. Na primer,

vrednost crne je “#000000”. Svake dve cifre u zapisu predstavàaju koliåinu jedne od tri

osnovne boje – crvene, zelene i plave – koje åitaå treba da pomeãa da bi dobio æeàenu

boju. Tako za crnu (#000000) åitaå treba da pomeãa 00 crvene, 00 zelene i 00 plave.

Nasuprot tome, da bi dobio belu boju, åitaå mora pomeãati maksimalne koliåine sve tri

boje, pa je heksadecimalni zapis bele “#FFFFFF”.

Ãto se ãtampaça tiåe, ne postoji mnogo ograniåeça za opseg boja koje krase broãure i

reklame u åasopisima. Veñina raåunara, isto tako, ima grafiåke kartice, pa moæe da prikaæe

hiàade, pa i milione boja. I raåunari pod Windowsom i Macintosh raåunari imaju tabelu

za izbor boja (engl. color lookup table), koja monitoru daje naredbe kako da prikaæe boju.

Kada boju dodelite zadajuñi çenu heksadecimalnu vrednost, åitaå radi s ovakvom tabe-

lom grafiåke kartice; ako boja postoji, onda ñe je sistem na ekranu ispravno prikazati.

PRIMER


Ako pak tabela za pregled boja ne sadræi zadatu boju, sistem ñe meãaçem piksela pos-

tojeñih boja napraviti vizuelni ekvivalent.

Pre mnogo godina, kada su grafiåke kartice mogle da prikaæu samo 256 boja, bilo je

lakãe odluåiti se za onu koju ñete koristiti, ali je to viãe ograniåavalo kreativnost. Da bi

stvari bile joã komplikovanije, operativni sistemi su rezervisali neke boje za svoje vizu-

elne interfejse (tj. za prikazivaçe sistemske radne povrãine). Windows i Macintosh su

izabrali razliåite skupove boja, ukupno 40, pa je tako ostalo 216 boja koje su se isto pri-

kazivale u Windowsovim i Macintoshevim åitaåima.

Danas postoji mnogo veña paleta iz koje moæete birati boje za Web stranicu, jer gra-

fiåke kartice i u raåunarima pod Windowsom i na Macintoshu prikazuju milione boja.

Ipak, sve boje se i daàe prave kombinovaçem crvene, zelene i plave. Listu Web boja, u

kojoj se nalaze i nazivi boja i çihove heksadecimalne vrednosti, moæete videti na lokaciji

http://www.htmlhelp.com/cgi-bin/color.cgi.

Iako ñe veñina posetilaca kao podrazumevanu boju ostaviti crnu, neki ñe je moæda

promeniti. Zbog toga je pametno naznaåiti boju kojom hoñete da åitaå prikazuje tekst

vaãe Web stranice, åak i ako je to crna. Nemojte pretpostavàati da svi posetioci koriste

crnu kao podrazumevanu boju teksta. U åetvrtom poglavàu videñete kako da podesite

boju teksta stranice pomoñu nekoliko CSS pravila.

Dodavaçe slika na Web stranicu koriãñeçem osnovne oznake <img>Posetiti Web, a ne naiñi na stranice koje imaju slike i crteæe bukvalno je nemoguñe. Slike

pomaæu shvataçu komplikovanih procedura i postupaka koje bi bilo teãko objasniti

samo reåima. Osim toga, mnogi posetioci se prestraãe Web stranice koja ima samo tekst.

Umetaçe poneke slike u dugaåak tekst pruæa posetiocima odmor od åitaça i, ako je

pravilno upotrebàena, pomaæe razumevaçu teksta. Recimo da pravite Web stranicu koja

objaãçava kako se meça patrona s mastilom na mlaznom ãtampaåu Epson 1520. Neko-

liko dobrih slika bi to objasnilo boàe nego pasusi i pasusi teksta.

Podeãavaçem parametara åitaåa Weba, posetioci lokacije mogu da promene podrazu-

mevani font kojim se tekst stranice prikazuje. To znaåi da ñe tekst drugaåije izgledati

posetiocu koji kao podrazumevani font åitaåa koristi Arial i posetiocu koji koristi font

Helvetica. Ovo je zastraãujuñe, ali nauåili ste da ovu promenu fonta spreåite 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 piãu logotipi firmi. Ne zabo-

ravite da ñe åitaå upotrebiti podrazumevani font ako specijalizovani font ne postoji u

raåunaru posetioca.

Recimo da vaãa lokacija ima logotip napisan fontom Skia. Ako taj logotip napiãete

kao tekst Web stranice, a posetilac nema instaliran taj font na svom raåunaru, åitaå ñe ga

ispisati podrazumevanim fontom, ãto ñe u potpunosti promeniti izgled logotipa. Na svu

sreñu, izgled logotipa (i ostalog teksta) moæete da saåuvate ako ga pretvorite u sliku

(pomoñu programa za obradu slika, kao ãto je Photoshop). Ako umetnete sliku u tekst,


ona ñe izgledati isto u svim åitaåima Weba – åak i u onim åiji sistemi nemaju font kojim

je tekst prvobitno napisan. Kao ãto vidite na slici 1-14, parametri koji odreœuju fontove

na raåunaru posetioca uopãte ne utiåu na tekst slike.

Pomoñu oznake <img>, na Web stranicu moæete staviti sliku (bez obzira da li

je to tekst pretvoren u sliku ili neki crteæ). Oznaka <img> najåeãñe sadræi

atribut src, koji åitaåu saopãtava putaçu do datoteke sa slikom. Tako ñe veñina oznaka

slika biti oblika <img src=”putaça/datoteka”>. Vrednost atributa src sadræi i putaçu i

ime datoteke sa slikom. Sledeñi kôd, na primer, daje naredbu åitaåu da vrati i prikaæe

sliku iz datoteke photo.jpg koja se nalazi u direktorijumu images, na Web serveru.

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

Oznaka <img> stavàa se izmeœu poåetne i zavrãne oznake tela koda (<body></body>)

koje okruæuju sadræaj Web stranice koji se prikazuje na ekranu. Sledi jednostavan primer

kojim se prikazuje slika house.jpg:

<html>

<head><title> Slika kuñe </title>

</head>

<body>

<center><img src="house.jpg" width="400" height="175"></center>

</body>

</html>

Slika 1-14 Logotipi åiji je tekst pretvoren u sliku izgledaju ispravno u Web åitaåu.

PRIMER


Postoji i nekoliko atributa koji kontroliãu sliku u prozoru åitaåa:

• alt Ovaj atribut obezbeœuje rezervni (alternativni) tekst za åitaåe koji ne prikazuju

slike ili one åiji su korisnici iskàuåili opciju prikazivaça slika. Rezervni tekst

åitaåi koriste joã i kao pomoñni tekst (tekst koji se prikazuje u poàu blizu pokazi-

vaåa miãa na ekranu, i to kada je taj pokazivaå na slici). U programima za åitaçe

ga koriste àudi s oãteñenim vidom.

<img src="images/photo.jpg" alt="Photo of Florida Sunset">

• height i width Ova dva atributa definiãu veliåinu slike koja se prikazuje u prozoru

åitaåa. Njih uvek zadajete u HTML oznakama slike, tako da åitaå moæe da prikaæe

ostatak teksta Web stranice dok åeka da se slike preuzmu. Kada ove atribute defi-

niãete u oznaci slike, åitaå rezerviãe mesto za slike, åak i kad se one sporo preuzi-

maju, tako da tekst okruæuje mesta na koja ñe doñi slike.

<img src="images/photo.jpg" width="200" height="55">

• border Ovaj atribut zadaje u pikselima debàinu okvira koji åitaå treba da nacrta

oko slike. Ako sliku koristite kao hipervezu, åitaå ñe oko çe nacrtati okvir. Tako,

okvir oko slike nagoveãtava posetiocu da je slika, zapravo, hiperveza. Zbog toga se

preporuåuje da atribut border postavite na nulu (0).

<img src="images/photo.jpg" width="200" height="55" border="0">

Koriãñeçe slika, animacija i video snimaka u dizajniraçu stranice detaàno je obra-

œeno u ãestom i sedmom poglavàu.

NAPOMENA

Slike su neophodan deo Web stranice. Meœutim, stranice s mnogo slika duæe se preuzi-

maju i sporije prikazuju od onih koje nemaju slika. Obratite paæçu, zato, da ne pretrpate

svoju stranicu slikama. Slika moæe reñi viãe nego hiàadu reåi, ali ãta to vredi ako se pre-

dugo preuzima pa niko ne saåeka da je vidi.

Meçaçe poravnaça teksta i slikaVeñina Web stranica sadræi i tekst i slike, pa je poravnavaçe teksta i slika unutar prozora

aplikacije åitaåa jedna od osnovnih operacija pri izradi Web strana. Åitaå Weba ñe podra-

zumevano 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å prikaæe 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 neãto staviti uz levu marginu stranice samo ako

je veñ stigao do desne margine reda u kome je trenutno.


Sledeñi kôd pokazuje redosled slika i teksta. Oznaka govori åitaåu da prikaæe

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>

Stavàaçe oznake <img> ispred teksta u HTML kodu dokumenta govori åitaåu Weba

da prikaæe sliku pre nego ãto se ispiãe tekst. Umetaçe oznake izmeœu slike i teksta

govori åitaåu da prelomi red (tj. da preœe u sledeñi red stranice) i umetne prazan red poãto

prikaæe sliku, a pre nego ãto prikaæe tekst koji sledi sliku. Na slici 1-15 prikazano je kako

ñe åitaå Weba prikazati sliku i tekst iz prethodnog primera.

Primetiñete da pravilno ubaåena oznaka poravnava tekst i sliku vertikalno. Meœu-

tim, moæda ñete æeleti da åitaå centrira i sliku i tekst izmeœu leve i desne margine Web

stranice. U HTML-u postoje poåetna i zavrãna oznaka centriraça (<center> </center>)

pomoñu kojih moæete horizontalno centrirati objekte. Iako se oznake centriraça joã uvek

koriste, one su zastarele, ãto znaåi da ih buduñi åitaåi Weba moæda neñe prepoznavati.

Boàa metoda poravnavaça teksta i slika koriãñeçem CSS-a objaãçena je u åetvrtom

poglavàu.

Åitaå Weba podrazumevano poravnava prvi objekat svakog reda uz levu

marginu Web stranice. Prema tome, vi biste oznaku <center> koristili da

promenite podrazumevano poravnavaçe i time promenite horizontalnu poziciju objekta

u jednom ili viãe redova. U sledeñem primeru, poåetna i zavrãna oznaka centriraça

Slika 1-15 Bez poravnaça, tekst i slika se nalaze na levoj strani åitaåevog prozora.

PRIMER


(<center></center>) govore åitaåu Weba da centrira sliku i tekst (koji se nalaze izmeœu

pomenutih oznaka) izmeœu 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>

Dodavaçe hipertekstualne veze na Web stranicuWeb 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 kçigu, posetioci Web lokacija pritiskom na dugme

hiperveze prelaze sa stranice na stranicu (ili s lokacije na lokaciju). Hipertekstualna veza

je reå ili grupa reåi koje posetilac treba da pritisne da bi åitaå Weba preuzeo Web stranicu

(ili drugu datoteku) sa Web servera.

Posetilac lokacije hipertekstualnu vezu najåeãñe vidi kao podvuåen tekst. Åitaå Weba

obiåno koristi jednu boju da predstavi hipertekstualne veze ka stranicama koje joã nisu

poseñene, a drugu boju za veze ka veñ poseñenim stranicama.

Da biste napravili hipertekstualnu vezu, stavite poåetnu i zavrãnu oznaku

mesta hiperveze (<a></a>) oko teksta koji æelite da posetilac pritisne kako bi

pokrenuo vezu. (Hipertekst je tekst izmeœu poåetne i zavrãne oznake mesta hiperveze.)

Slika 1-16 Poåetna i zavrãna oznaka centriraça govore åitaåu Weba da prikaæe sliku i tekst na sredini izmeœu leve i desne margine Web stranice.

PRIMER


Potom, podesite atribut href u oznaci <a> na putaçu do datoteke koju åitaå treba da uåita

kada posetilac pritisne hipertekst. Na primer, reåi “Pritisnite ovde da biste preãli na sle-

deñu stranicu” u sledeñem HTML kodu predstavàaju hipertekst u hipertekstualnoj vezi i

åitaå Weba ñe ih podvuñi na Web stranici.

<a href="info.htm"> Pritisnite ovde da biste preãli na sledeñu

stranicu.</a>

Kada posetilac pritisne podvuåene reåi (ili izmeœu çih) kao u ovom primeru, åitaå

Weba ñe preuzeti stranicu i staviti je u datoteku info.htm. Primetiñete da se atribut href

stavàa u HTML oznaku <a>, a sam hipertekst izvan çe, i to izmeœu poåetne i zavrãne

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, sledeñi kôd pravi

hipertekstualnu vezu ka poåetnoj, matiånoj stranici na lokaciji www.bilogde.com:

<a href="http://www.anywhere.com/index.html">

Pritisnite ovde da biste otiãli na Bilogde.com </a>

Kada posetilac lokacije pritisne bilo gde unutar teksta “Pritisnite ovde da biste otiãli

na Bilogde.com” (tj. bilo gde na hipertekst), åitaå Weba ñe uåitati (i prikazati) matiåni

dokument (index.html) s lokacije www.bilogde.com. U ovom primeru, vrednost atributa

href (href =“http://www.bilogde.com/index.html”) pravi hipertekstualnu vezu izmeœu

stranice vaãe lokacije i dokumenta index.html (matiåne stranice) na Web lokaciji

www.bilogde.com. Hipertekstualnu vezu s matiånom stranicom neke Web lokacije

moæete uspostaviti i ako stavite u atribut href samo URL te lokacije (znaåi, bez imena

datoteke indeksne stranice):

<a href="http://www.bilogde.com">

Pritisnite ovde da biste otiãli na Bilogde.com </a>

Osim za prelaæeçe s dokumenta na dokument ili s lokacije na lokaciju, hipertekstu-

alna veza moæe se koristiti za preuzimaçe datoteka s Web lokacije. Primera radi, sledeñi

kôd govori åitaåu Weba da preuzme datoteku sa slikom corvette.zip kada posetilac priti-

sne jednu od reåi “Pritisni ovde”:

<a href"http://www.home.com/cars/corvette.zip">

Pritisnite ovde </a> da preuzmete sliku moje nove "korvete".

Atribut href govori åitaåu Weba da preuzme sliku “korvete” (corvette.zip) iz direkto-

rijuma cars Web lokacije www.home.com.

Svoju lokaciju moæete pribliæiti korisnicima i napraviti je interaktivnom ako dodate

hipertekstualne veze koje posetiocima omoguñavaju da preuzimaju datoteke i prelaze

izmeœu stranica vaãe i drugih Web lokacija. Pri pravàeçu hipertekstualnih veza oba-

vezno se postarajte da hipertekst ili tekst oko hiperveze kratko i jasno objaãçava ãta ñe se

taåno desiti kada posetilac pokrene hipervezu.

Poãto mnogi korisnici Weba povezuju podvuåeni tekst i hipertekstualnu vezu, izbe-

gavajte da koristite poåetnu i zavrãnu oznaku podvlaåeça () za podvlaåeçe tek-

sta u Web dokumentu. Da biste naglasili neku reå ili grupu reåi, izaberite kurziv, polucrna

slova ili promenite font, boju, veliåinu teksta.


Ureœivaçe slova i reåi pomoñu oznaka za formatiraçe znakovaKada æelite da åitaå Weba prikaæe tekst na Web stranici, taj tekst upiãite izmeœu poåetne

i zavrãne oznake tela koda (<body></body>). Kako åitaå Weba bude åitao HTML doku-

ment, tako ñe prikazivati tekst na ekranu. Da biste naznaåili åitaåu kako æelite da tekst

izgleda, okruæite tekst parom oznaka za formatiraçe. (U HTML-u postoje oznake pomoñu

kojih tekst izmeœu ostalog, moæe biti prikazan polucrnim, kurzivnim ili precrtanim slov-

ima.) Morate zapamtiti da åitaåi Weba ne razumeju obiåne kodove formatiraça koje u

dokumente umeñu programi za obradu teksta, kao ãto je Microsoft Word.

Pretpostavimo da hoñete da odreœene reåi u vaãem dokumentu budu polu-

crne. Da biste to postigli, postavite te reåi (slovo ili ceo tekst) izmeœu

poåetne i zavrãne oznake za polucrna slova (). U sledeñem primeru to je uraœeno

s reåju “polucrna”:

Posledça reå ove reåenice je polucrna

Oznake formatiraça znakova su uparene, ãto znaåi da postoji i poåetna i zavrãna oznaka. Åitaå Weba izvrãava naredbu nad tekstom koji je izmeœu poåetne i zavrãne oznake formatiraça. U prethodnom primeru, oznake i oko reåi “polucrna” govore åitaåu da tu reå ispiãe polucrnim slovima. Kao ãto smo rekli, oznake formatiraça znakova moæete upotrebàavati za definisaçe izgleda viãe reåenica (åak i pasusa), grupa reåi, pojedinaånih reåi, pa åak i samo jednog slova u nekoj reåi. Na primer, kada åitaå prikaæe tekst sledeñeg HTML-a, samo ñe slovo “p” u reåi “polucrno” biti polucrno.

Prvo slovo je polucrno

Osim poåetne i zavrãne oznake polucrnih slova, postoje joã neke oznake pomoñu kojih moæete ureœivati tekst Web stranice:

• <cite></cite> Oznake citata istiåu tekst, obiåno 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 oznaåili HTML kôd u dokumentu sa HTML primerom.

• <del></del> Oznake obrisanog teksta obeleæavaju tekst kao da je obrisan, tako

ãto ga åitaå ispiãe precrtanim slovima. Ove oznake koristite, na primer, da biste

oznaåili informacije u ispravnom dokumentu.

• <q></q> Oznake navoda okruæuju tekst znacima navoda.

• Ovo su oznake indeksa (prikazuju tekst malo niæe od okolnog

teksta).

• Ovo su oznake eksponenta (prikazuju tekst malo iznad okolnog teksta).

• Ove oznake istiåu tekst ispisujuñi okruæene reåi kurzivnim slovima.

• Ove oznake istiåu tekst ispisujuñi ga polucrnim kurzivnim slovima.

• Oznake kurzivnih slova istiåu tekst ispisujuñi ga tim slovima.

• Ove oznake podvlaåe tekst. Smatraju se zastarelim.

PRIMER


Oznake formatiraça moæete koristiti pojedinaåno ili u kombinaciji. U sledeñem primeru kombinovane su oznake polucrnih slova i oznake eksponenta da bi se reå “super” isticala na stranici.

Oznake za formatiraçe znakova su<super>odliåan</super> naåin

da paæçu posetioca privuåete na Web stranicu.

Iako oznake za formatiraçe u prozoru åitaåa vizuelno meçaju tekst, konzorcijum

W3C, kao efikasniji naåin, preporuåuje upotrebu CSS pravila (stilova).

Koriãñeçe simbola i specijalnih znakova u HTML dokumentuStaviti obiåan tekst na Web stranicu jednostavno je koliko i napraviti HTML dokument i

uneti tekst izmeœu çegovih oznaka. Åitaå Weba nema problema s åitaçem i prikazivaçem

slova (A-Z, a-z) i cifara (0-9). Meœutim, postoje specijalni znakovi i simboli koje vam apli-

kacije za ureœivaçe teksta dopuãtaju da upiãete u dokument, a åitaå Weba ih neñe prikazati

na stranici. Na svu sreñu, HTML nudi tekstualni zapis pomoñu koga saopãtavate åitaåu

Weba da prikaæe uobiåajene specijalne znakove i omoguñava da unesete numeriåke kodove

za ostale specijalne znakove.

Recimo da hoñete da se na vaãoj stranici prikaæe znak za zaãtitu autorskih

prava (©) da biste naznaåili da su odreœeni elementi stranice zaãtiñeni zako-

nom. Da bi åitaå ovaj simbol prikazao, morate uneti numeriåku vrednost koja predstavàa

taj simbol. U raåunaru su svako slovo, broj i simbol predstavàeni jedinstvenom numeri-

åkom vrednoãñu, poznatijom kao ASCII kôd. Da bi se prikazao znak za zaãtitu autorskih

prava, morate uneti çegov ASCII kôd u HTML kôd Web stranice.

Numeriåka vrednost tog simbola je 169. Åitaåu Weba ñete reñi da prikaæe taj simbol

tako ãto ñete ispred çegove numeriåke vrednosti staviti znakove & i #, a posle koda

taåku i zarez (;). Znaåi, da biste rekli åitaåu da znak © prikaæe na stranici, treba da

unesete © u HTML kôd Web stranice. Za znakove koji se åeãñe koriste, HTML

uproãñava proces dozvoàavajuñi da za predstavàaçe znaka umesto numeriåkog koda

koristite tekstualni kôd. Na primer, tekstualni zapis simbola © je ©.

Sledeñim kodom se ilustruje upotreba znaka za zaãtitu autorskih prava u HTML doku-

mentu. Oznaka &#xxx; (gde xxx predstavàa ASCII vrednost specijalnog znaka) govori

åitaåu koji specijalni znak da prikaæe na ekranu. Na slici 1-17 prikazani su rezultati upo-

trebe åitaåa Weba za prikazivaçe sledeñeg 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>

PRIMER


NAPOMENA

Listu kodova specijalnih znakova i çima odgovarajuñih vrednosti nañi ñete na lokaciji

http://www.htmlhelp.com/reference/charset/.

Koriãñeçe horizontalnih linija za organizovaçe sadræaja Web stranicaKada pravite Web stranicu, vaæno je da rasporedite povezane informacije u grupe. Ako,

na primer, ureœujete sadræaj Web stranice koja se bavi prodajom vozila, razdvojiñete

automobile, kamione i kombi vozila. Moæda ñete odvojiti informacije o vozilima koja se

iznajmàuju od informacija o vozilima za prodaju.

Jedan od naåina za organizovaçe Web stranice jeste koriãñeçe horizontalnih linija za

odvajaçe sadræaja razliåite vrste. Recimo da pravite stranicu koja prikazuje podatke istra-

æivaça i æelite da odvojite rezultate istraæivaça od fusnota. Da biste podatke razdvojili

horizontalnim linijama, upotrebite oznaku <hr>. Ta oznaka ñe u sledeñem HTML kodu

dati naredbu åitaåu da postavi horizontalne linije razdvajaça duæ prozora åitaåa, 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 

Slika 1-17 ASCII vrednost © u HTML kodu, govori åitaåu Weba da u tekstu prikaæe znak ©.


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>

Osim obiåne horizontalne linije koja se pravi pomoñu oznake <hr>, moæete napraviti

atraktivnu liniju koristeñi slike. Sledi primer upotrebe ukrasne linije koju je åitaå Weba

nacrtao umesto horizontalne linije.

Sledeñe atribute moæete koristiti za definisaçe izgleda horizontalne linije:

• align Ovaj atribut govori åitaåu da poravna horizontalnu liniju uz desnu ili levu

ivicu, odnosno da je postavi na sredinu prozora aplikacije åitaåa.

• noshade Atribut noshade govori åitaåu Weba da horizontalnu liniju prikaæe bez

senåeça.

Slika 1-18 Web stranica koja ima glavni tekst i fusnote.


• size Atribut size odreœuje debàinu horizontalne linije (u pikselima).

• width Ovaj atribut definiãe duæinu linije. Nju moæete naznaåiti u pikselima, ili

u procentima ãirine prozora åitaåa. Na primer, ako zadate vrednost 50 procenata

(width=“50%”), åitaå ñe nacrtati horizontalnu liniju duæine jednake polovini ãirine

prozora åitaåa.

Ako stavite horizontalnu liniju unutar ñelije tabele ili okvira za rezervisaçe pozicije,

åitaå ñe koristiti atribute width i align da podesi duæinu 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 koriãñeça HTML oznake horizontalne linije,

sa razliåitim vrednostima ãirine, veliåine i poravnaça.

Koriãñeçe HTML oznaka bloka citata za definisaçe leve i desne margineJedna od teæih stvari u HTML-u jeste kontrolisaçe razdaàine izmeœu teksta i leve i desne

margine Web dokumenta. Åitaå Weba podrazumevano podeãava levu i desnu marginu

stranice (tj. ãirinu stranice) tako da stranica odgovara ãirini prozora åitaåa. (Alternativa bi

bilo dozvoliti delu stranice da se proãiri van desne ivice prozora åitaåa i obezbediti hori-

zontalnu traku za pomeraçe koju bi posetilac mogao da koristi za pregled sadræaja koji

izlazi iz vidokruga u prozoru åitaåa.)

Naravno, Web autori razumeju da ñe åitaåi po potrebi pomerati tekst iz jednog reda

u drugi. Zbog toga dizajneri prave Web stranice koristeñi brojne moguñnosti formatiraça

i pozicioniraça teksta kao ãto su stilovi (CSS) ili smeãtaçe teksta u ñelije HTML tabele.

Bez zadavaça naredaba za formatiraçe, åitaå Weba ñe staviti prvi znak teksta odmah

pored leve margine, a preñi ñe u sledeñi red tek kada doœe do desne margine prethodnog.

Ne zaboravite da ãirina åitaåevog prozora na raåunaru posetioca odreœuje razmak izmeœu

leve i desne margine Web stranice. Ãtaviãe, åitaå spuãta tekst u sledeñi red kada doœe do

desne strane prozora. HTML oznaka blockquote formatira tekst uvlaåeçem ili poveñava-

çem margina na levoj i desnoj strani teksta koji je blok citata. Koriãñeçe ove oznake za

uvlaåeçe dela tekstualnog dokumenta åini da se tekst istiåe i tako se olakãava ureœivaçe

stranice.

Obiåna horizontalna linija

Bez senåeça

Promeçena ãirina

Promeçena visina

Uz levu ivicuNa srediniUz desnu ivicu


Na primer, sledeñi HTML kôd definiãe 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 obiåan tekst

<blockquote>Tekst ovog pasusa je

citat. Primetiñete kako je tekst uvuåen

od leve ivice stranice, a kada doœe do desne,

prelama se

</blockquote>

Evo joã obiånog teksta; pogledajte ãta se deãava

kada obiåan tekst doœe do margine.

<blockquote>Tekst ovog pasusa je

citat. Primetiñete kako je tekst uvuåen od leve

ivice stranice, a kad doœe

do desne, prelama se

</blockquote>

</body>

</html>

Pravàeçe ureœenih i neureœenih listaU ovom poglavàu ste nauåili nekoliko naåina na koje moæete urediti Web stranice. Ure-

œene i neureœene liste su joã jedan naåin za grupisaçe odreœenih celina u stavke liste

oznaåene rednim brojevima ili specijalnim simbolima. Liste su veoma korisne jer pre-

gledno prikazuju informacije. U ureœenim listama Web sadræaj se organizuje po abeced-

nom ili numeriåkom redosledu, a u neureœenim se koriste simboli, da bi se oznaåio svaki

element liste. Na slici 1-20 prikazana je Web stranica sa ureœenom i neureœenom listom.

PRIMER

Slika 1-19 Web stranica s obiånim i tekstom u bloku citata.


Koristite ureœene (numerisane) liste za pisaçe instrukcija korak po korak

gde je bitan redosled elemenata u listi. Sledeñi HTML kôd opisuje ureœenu

listu sa slike 1-20.

<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 oznaåili ureœenu listu u HTML kodu

Web stranice, stavite elemente liste izmeœu poåetne i zavrãne oznake ureœene liste

(<ol></ol>). Potom, da biste dodali elemente listi, stavite tekst svakog elementa izmeœu

poåetne i zavrãne oznake liste (<li></li>).

Åitaå Weba ñe podrazumevano prikazati arapske brojeve (1,2,3...) ispred svakog ele-

menta 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 poåetnu oznaku ure-

œene liste na sledeñi naåin:

• <ol type=“1”> Prikazuje elemente koristeñi arapske brojeve (podrazumevano).

• <ol type=“a”> Prikazuje elemente koristeñi mala slova.

Slika 1-20 Web stranica sa ureœenom (levo) i neureœenom listom (desno).

PRIMER


• <ol type=“A”> Prikazuje elemente koristeñi velika slova.

• <ol type=“i”> Prikazuje elemente koristeñi rimske brojeve malim slovima.

• <ol type=“I”> Prikazuje elemente koristeñi rimske brojeve velikim slovima.

Da biste ureœenu listu poåeli brojem razliåitim od broja jedan (ili abecednu slovom

razliåitim od slova a) umetnite atribut start s vrednoãñu koja nije 1 u oznaku <ol>. Na primer,

ureœena lista koja poåiçe oznakom <ol>, poåeñe od slova “e” jer je to peto slovo abecede:

<ol type="a" start="5">

Shodno tome, ako atributu type dodelite “1” da biste rekli åitaåu da stavi arapski broj

ispred svakog elementa liste, åitaå bi poåeo listu od broja pet.

Neureœene liste pruæaju moguñnost grupisaça tekstualnih elemenata kad redosled

elemenata nije bitan. Takva je, na primer, lista za kupovinu. Sledeñi HTML kôd pravi

neureœenu 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 oznaåili neureœenu listu u HTML kodu Web stranice, stavite elemente liste

izmeœu poåetne i zavrãne oznake neureœene liste (<ul></ul>). Kao i u ureœenim listama,

neureœenoj listi dodajete elemente smeãtajuñi tekst svakog elementa izmeœu poåetne i

zavrãne oznake liste (<li></li>).

Åitaå Weba ñe podrazumevano prikazati punu crnu taåku (•) kao tekstualni znak

ispred svakog elementa neureœene liste. Ako hoñete da åitaå koristi drugaåiji tekstualni

znak, upotrebite atribut type u oznaci <ul> da biste izabrali simbol na sledeñi naåin:

• <ul type=“disc”> Prikazuje elemente koristeñi punu crnu taåku

(podrazumevano).

• <ul type= “square”> Prikazuje elemente koristeñi kvadrat crnih ivica.

• <ul type=“circle”> Prikazuje elemente koristeñi crnu kruænicu (tj. obris kruga).

Pravàeçe ugneæœenih listaU prethodnom delu ste nauåili da pravite ureœene i neureœene liste. Isto tako, moæete da

pravite ureœene i neureœene liste unutar neke druge liste: to se zove pravàeçe ugneæœene


liste. Takvu listu moæete koristiti da biste prikazali niz akcija koje su vaæne za odreœeni

korak spoàaãçe liste kao ovde:

Korak 3 liste zahteva viãe objaãçeça nego iskaz “uåitaj program”. Zbog

toga moæete umetnuti ugneæœenu listu da biste opisali korake neophodne da

bi se uåitao program. Sledeñi HTML kôd upisuje umetaçe ugneæœene liste koju smo

malopre pokazali:

<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, ugneæœena lista je ureœena lista definisana poåetnom i zavrãnom

oznakom ureœene liste. Ureœena lista je ugneæœena, jer se oznake <ol> i </ol> pojavàuju

unutar spoàaãçeg skupa poåetnih i zavrãnih oznaka ureœene liste (tj. ugneæœene su u

çega). Tekst stavàen izmeœu poåetne i zavrãne oznake elementa liste (<li></li>) poja-

vàuje se na ekranu kao element svake liste (i spoàaãçe i ugneæœene).

Iako pisaçe koda za ugneæœenu listu moæe delovati komplikovano, pravila su ista kao

kad pravite spoàaãçu listu. Ugneæœenu listu definiãite izmeœu poåetne i zavrãne oznake

ureœene ili neureœene liste. Onda ugneæœenoj listi dodajte elemente tako ãto ñete umet-

nuti tekst izmeœu poåetne i zavrãne oznake elementa liste koje ste umetnuli nakon defi-

nicije za element u spoàaãçoj listi. Ne zaboravite da moæete ugneæœavati i ureœene i

neureœene liste.

PRIMER


Pravàeçe lista definicijaDosad ste nauåili kako da napravite ureœenu i neureœenu listu i kako da ih ugnezdite.

Pored navoœeça elemenata u numerisanim i nenumerisanim listama, HTML pruæa

moguñnost pravàeça lista definicija. Kao ãto joj samo ime kaæe, to je lista termina uz

koje stoji definicija. Åitaå Weba uvlaåi svaku definiciju u sledeñi red, ispod termina koji

se definiãe, kao ãto je pokazano na slici 1-21.

Jedino se u listi definicija pojedinaåni elementi ne oznaåavaju poåetnom i zavrãnom

oznakom elementa liste. Umesto toga, u listi definicija se koriste dve nove oznake:

• <dt></dt> Poåetna i zavrãna oznaka termina definicije oznaåavaju termin koji

treba da bude opisan ili definisan. (Ove oznake su po funkciji sliåne poåetnoj

i zavrãnoj oznaci elementa liste koje se koriste da oznaåe pojedinaåne elemente

u ureœenim i neureœenim listama.)

• <dd></dd> Poåetna i zavrãna oznaka opisa (definicije) oznaåavaju jedan ili viãe

pasusa uvuåenog opisnog teksta.

Da biste napravili listu definicija u HTML kodu Web stranice, umetnite ter-

mine i definicije izmeœu poåetne i zavrãne oznake liste definicija (<dl> </dl>).

Na primer, sledeñi HTML kôd ñe napraviti listu definicija s dva termina, kao ãto je ranije

prikazano:

<html>

<head>

<title>Example of a Definition List</title>

</head>

<body>

<center><h2>Basic HTML</h2></center>

<dl>

<dt>Basic HTML Tags </dt>

Slika 1-21 Lista definicija s dva elementa i opisima.

PRIMER


<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>

Koriãñeçe HTML oznaka unapred formatiranog teksta za kontrolu prikaza sadræaja WebaU ovom poglavàu ste nauåili kako da promenite izgled teksta pomoñu oznaka formati-

raça. Na primer, ako hoñete da åitaå prikaæe reå polucrnim slovima, oko te reåi u HTML

kodu stranice stavite poåetnu i zavrãnu oznaku polucrnih slova (). Da biste

spustili tekst za jedan ili viãe redova, umetnite jednu ili viãe oznaka . Pri pravàeçu

Web stranice åesto se koristi jedan skup HTML oznaka za kontrolu izgleda teksta, a drugi

za kontrolu izgleda teksta na stranici. Naæalost, kada åitaå Weba prikaæe tekst, on igno-

riãe viãe od jednog razmaka i znaka za novi red koje unosite u HTML dokument da biste

rasporedili ili poravnali sadræaj stranice, kao ãto je prikazano na slici 1-22.

Slika 1-22 Åitaå Weba ignoriãe dodatne znakove formatiraça (razmake i znakove za novi red – CR) koji su uneti u telo HTML dokumenta.


Moæete, meœutim, koristiti poåetnu i zavrãnu oznaku unapred formatiranog teksta

(<pre></pre>) da biste kombinovali i funkciju formatiraça i funkciju ureœivaça u jednoj

HTML oznaci. Poåetna i zavrãna oznaka unapred formatiranog teksta govore åitaåu

Weba da koristi fiksni font i da na ekranu prikaæe sve razmake i nove redove koje åitaå

naœe u unapred formatiranom HTML tekstu Web stranice. (Da biste izbegli pogreãno

poravnat tekst u prozoru åitaåa, za reœaçe elemenata koristite razmake a ne tabulator jer

svi åitaåi ne interpretiraju tabulator na isti naåin).

Uunapred formatirani tekst moæete koristiti za prikazivaçe listinga pro-

grama i recepata, na primer. Na slici 1-23 prikazana je Web stranica sa

unapred formatiranim tekstom.

Unapred formatirani tekst se obiåno koristi kada hoñete da kontroliãete duæinu svakog

reda teksta i raspored reåi u redu. Naæalost, u unapred formatirani tekst ne moæete

pomoñu oznake <img> umetati slike, niti pomoñu oznake <object> umetati ActiveX kon-

trole ili Java aplete. Iako vam poåetna i zavrãna oznaka unapred formatiranog teksta

(<pre></pre>) omoguñavaju da kontroliãete raspored teksta, morate koristiti HTML

tabele ili stilove da biste upravàali rasporedom elemenata koji nisu tekst.

Prikazivaçe navigacionog menija unutar okvira Web straniceHTML okvire moæete koristiti da biste prikazali viãe od jedne Web stranice u jednom

prozoru åitaåa. Åitaå moæe uåitati novu Web stranicu u bilo koji okvir a da pri tom ne

promeni sadræaj drugih Web stranica, jer koristi zasebnu uniformnu adresu resursa (URL)

PRIMER

Slika 1-23 Oznake unapred formatiranog teksta kontroliãu prelom reda unutar Web dokumenta bez koriãñeça HTML oznaka formatiraça.


za svaki okvir. Web stranice s okvirom najåeãñe se koriste za prikazivaçe navigacionog

menija Web lokacije dok posetilac prelazi sa strane na stranu te lokacije. Uobiåajeni navi-

gacioni meni sastoji se od slika u obliku dugmadi ili hipertekstualnih veza do svih stra-

nica Web lokacije. Dobro dizajniran navigacioni meni vodi korisnika preko svih delova

lokacije kao mapa puta.

Pri dizajniraçu navigacionog menija vaæno je razmotriti gde na Web stranici treba

staviti taj meni. Na veñini stranica on se nalazi u horizontalnom poloæaju na vrhu ili u ver-

tikalnom poloæaju uz levu ivicu prozora åitaåa. Koje god mesto izaberete, budite dosledni.

Ako navigacioni meni stavite vertikalno s leve strane indeksne stranice (tj. matiåne stra-

nice lokacije), na to isto mesto stavite meni i na ostalim stranicama lokacije. Dosledno

smeãtaçe menija pomaæe korisniku da se lakãe snaœe, a zadovoàni posetioci ñe provesti

viãe vremena istraæujuñi vaãu lokaciju. Na marketinãkoj lokaciji, posetioci koji su zado-

voàni navigacijom utiåu na poveñaçe prodaje, a na informativnoj lokaciji posetioci ñe

zapamtiti viãe i veña je verovatnoña da ñe se na lokaciju vratiti po joã informacija.

Stavàaçe navigacionih menija u okvir omoguñava da se ti meniji vide sve vreme dok

je posetilac na razliåitim stranicama lokacije. Pretpostavimo da pravite stranicu s dva

okvira kao ãto je ona prikazana na slici 1-24.

Slika 1-24 Prozor dokumenta sadræi dva okvira u kojima su navigacioni meni i informacije o lokaciji.


Stavite navigacioni meni u uzak pravougaoni okvir od 100 piksela uz levu

stranu stranice i prikaæite nove Web stranice u veñem okviru zdesna. Poseti-

lac nikad ne gubi iz vida mapu vaãe lokacije jer okvir s navigacionim menijem ostaje na

mestu (uz levu stranu prozora åitaåa) dok se odabrane stranice uåitavaju u okvir s desne

strane. Sledeñi kôd 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 ukàuåuje HTML iz svih stra-

nica prikazanih zajedno na ekranu. Ovakva stranica samo govori åitaåu da prikaæe Web

stranice u okvirima definisanim poåetnom oznakom <frameset>.

U ovom primeru, stranica sa okvirima åitaåu Weba govori da prikaæe HTML doku-

mente n_nav.html i h_main.html (navigacioni meni lokacije i matiånu stranu lokacije)

u dva okvira na ekranu. Åitaå uåitava dokument n_nav.html u prvi okvir ãirine 100 pik-

sela, a dokument h_main.html u drugi okvir ãirine 400 piksela. HTML oznake koriãñene

za definisaçe Web stranica i uåitane u okvire ponaãaju se isto kao kad åitaå Weba prika-

zuje pojedinaåne stranice. Okviri samo razmeãtaju viãe Web stranica unutar prozora jed-

nog dokumenta.

Istovremeno prikazivaçe viãe Web stranica na ekranuOkviri pruæaju moguñnost da åitaå Weba istovremeno prikaæe viãe stranica na ekranu.

Uobiåajena Web stranica koja ima okvire, moæe imati dva okvira – jedan za prikazivaçe

navigacionog menija, a drugi za prikazivaçe sadræaja stranice koju hoñete da prikaæete

posetiocu. Kada posetilac pritisne dugme ili hipervezu iz jednog okvira, åitaå Weba uåita

i prikaæe Web stranicu u drugom okviru.

Da biste napravili Web stranicu s okvirima, potrebne su vam najmaçe tri stra-

nice. Prvo vam trebaju dve ili viãe stranica koje na ekranu hoñete istovremeno

da prikaæete. (Ako imate samo jednu stranicu za prikazivaçe, nema potrebe da se deli pro-

zor åitaåa Weba.) Zatim vam treba stranica s okvirima åije je zaduæeçe da govori åitaåu

veliåinu 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 zajedniåke informacije koje ste stavili u datoteku opendoc.

html. Mogli biste koristiti stranicu sa okvirima, kao ãto je ona u sledeñem primeru,

da biste istovremeno na ekranu prikazali obe stranice (n_menu.html i opendoc.html):

PRIMER

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>

Primetiñete da u HTML dokumentu koji sadræi okvire, poåetna i zavrãna oznaka okvira

(<frameset></frameset>) zameçuju poåetnu i zavrãnu oznaku tela koda (<body></body>)

koje se koriste na stranicama bez okvira. To se deãava zato ãto stranica s okvirima nema ni

telo koda ni sadræaj koji bi prikazala. Njena jedina svrha je da podeli prozor åitaåa na okvire

(kao ramove slika) i da kaæe åitaåu putaçu ili URL adresu Web stranice koje treba da

prikaæe u okvirima.

U ovom primeru, atribut cols u oznaci <frameset> govori åitaåu da napravi dva okvira

i to prvi ãirok 80, a drugi 400 piksela. Znaåi, ovaj atribut govori åitaåu 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 åitaåu ime Web stranice koju u okviru treba da

prikaæe, poãto uåita stranicu s okvirima. U naãem primeru, åitaå Weba ñe uåitati

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.

Slika 1-25 Prozor Web åitaåa sadræi dva okvira, a u svakom od çih je po jedan HTML dokument.

U prvi okviruåitava sen_menu.html

U drugi okviruåitava seopendoc.html


Kada posetilac lokacije pritisne hipervezu u okviru menija, atribut target u oznaci <a>

reñi ñe åitaåu u koji okvir da uåita Web stranicu iz atributa href oznake <a>. Na primer,

sledeña hiperveza govori åitaåu Weba da prikaæe dokument aboutus.html u okviru con-

tent 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 ciànom okviru (sadræaj) zameniti dokumentom abou-

tus.html (u ovom primeru naznaåenim atributom href ). Ako oznaka hiperveze <a> nema

atribut target, åitaå ñe uåitati dokument povezan hipervezom u okvir u kome se prikazuje

stranica åiju je hipervezu posetilac aktivirao. Na primer, zbog sledeñeg 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>

Sliåno tome, kada posetilac pritisne hipervezu u okviru content, hiperveza ñe ili imati

atribut target koji kaæe åitaåu da uåita povezanu stranicu u okvir content ili neñe imati

ovaj atribut, pa ñe åitaå uåitati povezanu stranicu u okvir content u svakom sluåaju. Pri-

kazujuñi povezane stranice unutar okvira content, navigacioni meni moæete ostaviti na

ekranu sve vreme (u okviru menu).

Okviri Web stranica su odliåan naåin da rasporedite sadræaj svoje Web lokacije. Meœu-

tim, poãto ovakve stranice traæe da åitaå uåita i prikaæe tri ili viãe Web stranica, çemu treba

viãe vremena nego kad stranica ne bi imala okvire. Ãtaviãe, ne mogu svi åitaåi Weba da

prikazuju okvire. Takvi åitaåi neñe prikazati ni Web stranice u okvirima, ni okvire defini-

sane stranicom s okvirima.

Zbog takvih åitaåa stavite oznake <noframes> i </noframes> u svoj dokument s okvi-

rima, 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 moæe da prikazuje okvire, hiperveza se pojavàuje u prozoru åitaåa,

obaveãtavajuñi korisnika da pritiskaçem veze moæe uåitati verziju Web stranice bez

okvira.

Documents

POGLAVÀE 1 Osnove HTML-a · bilo kog programa za obradu teksta. Kao ãto je pomenuto, åitaåi Weba poput Netscape Navigatora i Internet Explorera, prate naredbe iz tekstualnog dokumenta