izrada web dokumenata pomocu html-a

P O G L A V L J E32

Izrada Web dokumenatapomo}u HTML-a(Steve Burnett)

U ovom poglavlju

Razumijevanje HTML-a 610

Rad s HTML-om 610

Uporaba osnovnih HTML elemenata 614

Razumijevanje sintakse HTML-a 614

U 31. poglavlju, “Pretraìvanje Interneta pomo}u World Wide Weba”, nau~ili ste kako pristupiti World Wide Webu i upoznali ste razli~ite tipove dostupnih informacija. Moète kliknutina hipertekst veze i skakati s jednog mjesta na drugo onoliko brzo koliko vam dopu{ta brzinaprijenosa. Moète vidjeti Web stranice s privla~nom grafikom i zvukom, popisima, oblicima irazne druge zgodne stvari. Ali kako zapravo stvoriti Web stranicu na koju drugi Web korisnicimogu do}i? To nije tako te{ko kao {to mislite. Treba vam pristup Web posluìtelju koji rabiHypertext Transport Protocol (HTTP) i skup dokumenata napisanih u Hypertext MarkupLaguageu (HTML).

U ovom poglavlju pregledat }emo {to je potrebno za izradu Web stranica pomo}u HTML-a.

Razumijevanje HTML-aHypertext Markup Language (HTML) je jezik rabljen za razvoj Web stranica i dokumenata.HTML nije programski jezik kao {to su C++, Java, Pascal ili Perl; u osnovi to je CPML (cross-platform markup) jezik dizajniran dovoljno prilagodljivo da prikaè tekst i druge elemente (npr. grafiku) na razli~itim preglednicima.

HTML dokument ~ine posebni tagovi umetnuti u ASCII dokument. Te tagovi tuma~e programi Web pretraìva~a, koji oblikuju i prikazuju dokument.

HTML je podskup Standard Generalized Markup Languagea (SGML), {to je me|unarodnistandard (ISO 88791) za razmjenu elektroni~kih dokumenata. SGML je meta-jezik

za definiranje i standardiziranje strukture dokumenata. SGML tako|er opisuje gramatiku kojumoète rabiti za dizajniranje drugih markup jezika. Svaki valjan HTML dokument je tako|er valjan SGML dokument. Kao i svaki jezik izveden iz SGML-a, HTML-ova gramatika je opisanaDocument Type Definition (DTD) datotekom. ��

HTML govori Web pretraìva~u kako prikazati Web dokumente; unato~ tome, oblikovane infor-macije koje HTML daje su prili~no op}enite. Za Internet su dostupni mnogi razli~iti pretraìva~ikao {to su Netscape Navigator, Microsoft Internet Explorer ili NCSA Mosaic. Mnogi se izvodepod grafi~kim su~eljima kao {to su X Windows system ili MS Windows. Neki, kao na primjerLynx, su ANSI pretraìva~i i ograni~eni su s obzirom na grafi~ke karakteristike koje moguprikazati.

Dok pi{ete HTML dokumente imajte na umu da }e izgledati druga~ije ovisno koji pretraìva~~itatelj rabi. Svi dostupni Web pretraìva~i oblikuju HTML dokumente koliko god mogu;me|utim, ono {to vidite mo`da ne}e biti ono {to vidi netko tko rabi druga~iji pretraìva~ ili ~akisti pretraìva~ pod drugim operativnim sustavom.

Rad s HTML-omKako se alati za Web razvijaju, stvaranje HTML dokumenata postaje sve jednostavnije. Novialata sakrivaju od vas stvarni HTML kôd. Vi samo trebate napisati rije~i, oblikovati svoj doku-ment i sa~uvati ga na prikladnoj lokaciji. Neki pretraìva~i, kao Netscape Navigator Gold, imajui editor koji vam omogu}uje izradu HTML stranice uz pomo} alata ozna~i-i-klikni. Drugeozna~i-i-klikni alate imaju Microsoft FrontPage, Adobe PageMill, Allaire HomeSite iMacromedia DreamWeaver.

32. poglavlje Izrada Web dokumenata pomo}u HTML-a610

BILJE[K A

Ako ne èlite rabiti HTML-ov editor ili ve} imate dokumente koje èlite staviti na Web, postojinekoliko softverskih aplikacija koje moète uporabiti za pretvaranje obrade tekstova, stolnog izdava{tva, prora~unskih tablica ili drugih dokumenata u HTML. Novije ina~iceprogramskih paketa, kao {to je Adobe Framemaker }e pri spremanju dokumenta uklju~iti HTMLkao opciju.

NA WEBUSlijede}a Web lokacija sadrì mnogo dostupnog softvera za pretvaranje:

http://www.yahoo.com/computers_and_Internet/Sofware/Internet/World_Wide_Web/HTML_Convertors/

Jednom }ete se htjeti oku{ati u izradi vlastitog HTML-a. Iako ima mnogo alata koji pomaù pripisanju HTML-a, vjerojatno }ete otkriti kako vam ne}e dozvoliti da u~inite sve {to èlite.

Tako|er }ete utvrditi da je s HTML-om relativno lako raditi. Kako se HTML temelji na ASCII markup jeziku, treba vam editor koji }e omogu}iti ~uvanje datoteka u ASCII formatu i Web pretraìva~ koji moète rabiti za gledanje svojih Web stranica dok ih razvijate. Za razvoj Web dokumenata ne treba vam veza s Internetom. Bilo koji Web pretraìva~ bi vam trebao omogu}iti otvaranje lokalne HTML datoteke i uvid u nju kao

da ste je preuzeli s Interneta.

Mo`da }ete ustanoviti kako je uporaba HTML editora korisno. Neki editori omogu}ujuodabir teksta koji èlite oblikovati i potom primjenjuju HTML tagova iz izbornika, pa ne morate sami upisivati tagove. Drugi editori izgledaju vi{e kao programi za obradu teksta – odaberete tekst i na~in oblikovanja koji èlite iz traka s alatima. U oba slu~aja vjerojatno }ete morati direktno ure|ivati HTML kako bi dobili to~an izgled i dojam kakav èlite. ��

NA WEBUEditore kao {to su Sausage Software HotDog/HotDog Pro i Macromedia moète prona}i na slijede}im URL adresama:

http://www.sausage.com

http://www.macromedia.com

Popis HTML editora na}i }ete na slijede}oj adresi:

http://www.yahoo.com/Comuters_and_Internet/Software/Internet/World_Wide_Web/HTML_Editors/

Prije nego se dalje upoznate sa sintaksom HTML-a pogledajte Web stranicu i njen izvorni kôdHTML-a. Slika 32.1 prikazuje jednostavnu Web stranicu.

Popis 32.1 prikazuje HTML kôd za tu Web stranicu. Ovdje moète vidjeti osnovne elemente HTML stranice.

Rad s HTML-om 611

BILJE[K A

Popis 32.1 Izvorni kôd za jednostavnu HTML stranicu<HTML><HEAD>

<TITLE>Hello Web!</TITLE></HEAD>

<BODY><H1>Hello!</H1>This is the body section of a simple HTML page.<P><IMG src=”example.gif “>

</BODY>

</HTML>


SLIKA 32.1 Jednostavna HTMLstranica

Utvrdit }ete da je HTML prili~no neposredan:

� Svi HTML tagovi su zatvoreni u kutne zagrade (znakovi < i >). Uzmimo <HTML> tag napo~etku Popisa 32.1 kao primjer.

� Ve}ina HTML tagova zahtjeva uporabu po~etnog taga (<tag_name>) i zavr{nog taga(</tag_name>). Oblikovanje zapo~injete i zavr{avate postavljanjem tih tagova. Akoispustite potreban zavr{ni tag, ne}e biti nikakvog oblikovanja; mo`da ~ak ne}ete vidjeti ni tekst.

� Mnogi HTML tagovi imaju atribute koji se mogu prilagoditi. Atribut vam dozvoljavamijenjanje zadano pona{anje taga. Na primjer, ako èlite tablicu bez okvira mijenjate jepostavljanjem atributa (BORDER=some_number) unutar <TABLE> taga.

� Sve HTML datoteke zahtijevaju <HTML> tag na po~etku datoteke i zatvaraju}i <HTML>tag na kraju. Ti tagovi govore Web pretraìva~u da je dokument koji obra|uje napisan uHTML-u.

HTML dokument se sastoji od dva logi~na dijela: glave i tijela. Glava sadrì informacije o dokumentu; tijelo sadrì informacije samog dokumenta. Kao {to ste mogli pretpostaviti,zaglavlje je zatvoreno s <HEAD> i </HEAD> tagovima, a tijelo je zatvoreno s <BODY> i</BODY> tagovima.

Glava HTML stranice sadràva informacije vezane uz sam dokument. U zaglavlje moètesmjestiti razli~ite tagove, ali <TITLE> tag je u naj{iroj upotrebi. Naslov dokumenta – sve {to jeobuhva}eno <TITLE> i </TITLE> tagovima – pojavljuje se u naslovnoj traci prozora na Web pretraìva~u.

Tijelo HTML stranice sadràva ve}inu elemenata koje vidite kad stranicu gledate pomo}u Webpretraìva~a. Tu unosite sve elemente koje èlite da ljudi vide, kao {to je tekst, grafika, veze(URL-ovi), popisi i tablice.

Element <TITLE> identificira ime va{e stranice. Kad netko napravi knji`nu oznaku na stranicu, to je ime koje se rabi. Iako HTML ne ograni~ava duìnu <TITLE> elementa,

trebalo bi dati stranici kratak opisni naslov koji se lako moè prikazati. Dobar osje}aj za mjeruduìne naslova je ne vi{e od jedne fraze i ne duè od 60 znakova.

Naslov dokumenta je prikazan u odvojenom prozoru i nije dio samog dokumenta, pa zbog togatekst naslova mora biti ~isti tekst i ne smije imati hiperveze ili oblikovanje teksta. ��

Jako zgodna karakteristika izvornog kôda HTML-a je mogu}nost gledanja. Jeste li ste ikad na{lizanimljivu stranicu i htjeli znati kako je napravljena? Zavirite! Gledanjem tu|ih izvornih kôdovamoète puno toga nau~iti.

Izvorne kôdove obi~no moète gledati preko izbornika va{eg pretraìva~a. Na primjer, da bi vidjeli izvorni kôd HTML-a za stranicu pod Netscapeom, izaberite Document Source iz Viewizbornika.

Kada ste vidjeli osnove HTML-a (da, to je stvarno to!) vrijeme je da nau~ite ne{to o uporabi tagova. Iako ima mnogo razli~itih tagova, uporabom samo nekoliko ~estih tagova(i njihovim kombiniranjem na razli~ite na~ine) moète stvoriti izvrsne Web stranice.

Rad s HTML-om 613

BILJE[K A

SAVJET

Uporaba osnovnih HTML elemenataOsnovna HTML sintaksa sastoji se od tri komponente: tagovi, atributi i URL-ovi. Svaka od tihkomponenti detaljno opisuje kako se ti elementi trebaju oblikovati i prikazati, osobitostiodre|enih akcija te smje{taj drugih datoteka i dokumenata.

TagoviOsnovni gra|evni element HTML-a su tagovi koji govore Web pretraìva~u kako prikazati tekst i grafiku zajedno s drugim oblikovanim informacijema. Kao {to se sje}ate, tagovise pi{u u o{trim zagradama (<tag_name>), a ve}ina tagova treba i zavr{ni tag(</tag_name>). Na slici 32.1 vidjeli ste uporabu <TITLE> taga:

<TITLE>Hello Web!</TITLE>

Ovaj red govori pretraìva~u kako oblikovati tekst koji po~inje s Hello Web! kao <TITLE>.Vidite li po~etne (<TITLE>) i zavr{ne (</TITLE>) tagove? Svi elementi unutar tih tagova – uovom slu~aju tekst – su prikazani u naslovnoj traci prozora Web pretraìva~a. Drugi tagovi na sli~an na~in utje~u na elemente koje obuhva}aju.

AtributiPonekad tagovi trebaju bolje opisati to~nu informaciju, na primjer, gdje se nalazi datoteka.Atributi se rabe zajedno sa tagovima kako bi dali vi{e detalja o izvr{avanju taga. Pogledajte, naprimjer, slijede}i tag:

<IMG src=”example.gif”>

Ovaj tag je <IMG> (slika) tag koji govori va{em Web pretraìva~u kako prikazati sliku. Ali koju sliku? Ovdje u igru ulazi atribut. U ovom primjeru, polje atributa je SRC=”example.gif”, {to daje detaljne informacije kako protuma~iti <IMG> tag. U ovom slu~aju, example.gif datoteka }e biti prikazana kao slika.

SAVJET Kori{tenje atributa za {irinu i visinu s <IMG> tagom pomaè pretraìva~u da brè prikaè sliku. Ako je u Netscapeu slika u GIF i JPG formatu, moète otvoriti samo tu sliku. Iz View izbornika zatim izaberite View Document Info kako bi vidjeli veli~inuslike.

URL-oviWeb resursima se pristupa preko opisnih adresa poznatim kao uniform resource locators (URL-ovi). Sve ~emu pristupate na Webu ima URL. HTML rabi URL-ove za odre|ivanje lokacijepotrebne datoteke ili druge Web stranice koje su povezane preko hipertekst veza.

Razumijevanje sintakse HTML-aKao {to ste vidjeli, HTML je podijeljen na tri osnovne komponente: tagove, atribute i URL-ove. Osnovni gra|evni element je tag. Tagovi se rabe za davanje naredbi Web pretraìva~u, dok se atributi i URL-ovi rabe za detaljni opis naredbi


Tagovi mogu biti grupirani u nekoliko kategorija, ovisno o njihovoj funkciji. Neki tagovi dajuinformacije o dokumentu kao cjelini, neki se rabe za oblikovanje teksta, a neki za grafiku ihipertekst veze prema drugim dokumentima.

NA WEBUZa popis HTML-ovih tagova i njihovih atributa pogledajte mre`nu ina~icu Queovog HTML QuickReference i Queovog Special Edition Using HTML na sljede}im adresama:

http://www.mcp.com/que/developer_expert/htmlqr/toc.htm

http://www.mcp.com/que/et/se_html2/toc.htm

Uporaba tagova za dokumente<HTML> i </HTML> tagovi se rabe za obavje{tavanje Web pretraìva~a da je dokument kojiobra|uje napisan u HTML-u. <HTML> tag bi trebao biti prvi tag va{eg dokumenta, a </HTML> tag zadnji.

HTML dokument je podijeljen za zaglavlje i tijelo. Zaglavlje sadràva informacije o dokumentu, a tijelo informacije samog dokumenta. Kao {to ste mogli pretpostaviti, zaglavlje jeokruèno <HEAD> i </HEAD> tagovima, a tijelo <BODY> i </BODY> tagovima. Nekolikotagova moè biti smje{teno u zaglavlje, ali je samo <TITLE> tagu {irokoj uporabi. Naslov dokumenta – {to god se nalazi izme|u <TITLE> i </TITLE> tagova –se pojavljuje u naslovnoj traci prozora Web pretraìva~a.

Oblikovanje tekstaHTML omogu}ava nekoliko razli~itih na~ina oblikovanja teksta za prikazivanje. Nemojte zabo-raviti da stvarno oblikovanje teksta va{e Web stranice kontrolira Web pretraìva~ koji se rabi zagledanje stranice

Naslovi HTML podràva {est razina naslova koji mogu biti prikazani u dokumentu kori{tenjem<H1> do <H6> tagova. Slika 32.2 pokazuje kako ti naslovi mogu biti prikazani na Webpretraìva~u (u ovom slu~aju Netscapeu). Upamtite da su ti naslovi druga~ije prikazani narazli~itim pretraìva~ima –pismo i veli~ina ne moraju biti isti na va{em pretraìva~u. Popis 32.2 pokazuje izvor.

Popis 32.2 Primjer upotrebe zaglavlja<HTML><HEAD>

<TITLE>Heading example</TITLE></HEAD><BODY>

<H1>Heading 1<H1><H2>Heading 2</H2><H3>Heading 3


nastavlja se

Popis 32.2 Nastavak</H3><H4>Heading 4</H4><H5>Heading 5</H5><H6>Heading 6</H6>

This is plain text.</BODY>

</HTML>


SLIKA 32.2Razine naslovaprikazane u Netscapeu

Pogledajte lokaciju razine 2 i 3 naslovnih tagova u Popisu 32.2. HTML ne zanima nalaze li se tagovi na kraju reda ili negdje drugdje. Ti tagovi govore pretraìva~u da je sav tekst izme|u njih u odre|enoj razini naslova koju definiraju. Tako|er, uo~ite da izreka This is plain text nije uokvirenatagovima. Ovu frazu pretraìva~ }e prikazati kao obi~ni tekst.

Obi~no je dobro rabiti samo tri razine naslova na Web dokumentu. Ako su vam potrebne vi{e od tri razine naslova, razmislite o dodavanju stranica.

Uobi~ajeni tekst HTML omogu}uje nekoliko na~ina oblikovanja normalnog teksta u dokumentima. Web pretraìva~i ne obra}aju pa`nju na kraj reda u HTML datoteci. Isto je i s prijelomima redaka, pa morate rabiti posebne tagove koji ozna~uju gdje red zavr{ava ipo~inje odlomak. <BR> tag nare|uje pretraìva~u koji prikazuje dokument umetanje prekidaretka. To je poput prijeloma retka na pisa}em stroju. Tekst koji slijedi je pomaknut u slijede}i red.

@elite li napraviti novi odlomak, uporabite <P> tag. <P> tag ima isti u~inak kao i <BR>, osim{to ve}ina pretraìva~a ume}e prazan red kao dio odlomka za vizualno odvajanje jednog blokateksta od drugog. Zbog toga {to pretraìva~i nadziru prikaz teksta, stvarno pona{anje <P> tagamoè varirati. Kada rabite <P> tag obi~no ne trebate </P> zavr{ni tag. Me|utim, potreban je akorabite bilo koji od <P> atributa.

Ponekad }ete èljeti vizualno odvojiti razli~ite dijelove iste stranice. HTML nudi mogu}nostpovla~enja vodoravne crte preko cijelog prikaza dokumenta. <HR> tag (horizontal rule), se rabi za povla~enje vodoravnih crta. On ume}e razmak prije linije pa nije potreban <P> tag.Kao i <P> tag, ni <HR> ne zahtijeva zavr{ni tag.

Vidjeli ste nekoliko na~ina kontroliranja oblikovanja teksta na HTML stranici. Sada pogledajtejo{ jedan kratak HTML primjer da bi vidjeli rezultate prekida retka, oznaka odlomaka i vodor-avne crte na prikazu teksta. Popis 32.3 pokazuje primjer HTML-a u kojem su kori{teni ti tagovi za oblikovanje

Popis 32.3 Primjer HTML-a koji pokazuje osnovno oblikovanje teksta<HTML><HEAD><TITLE>A Sample Text Formatting Page</TITLE></HEAD><BODY><H2>Text Sample1</H2>Here is some sample text that is written on separate lines without usingline breaks.<P><H2>Text Sample 2</H2>This sample text has a<BR>line break in the middle.<P><H2>Text Sample 3</H2>Text before is a paragraph mark.<P>Text after a paragraph mark.<HR>Text after a horizontal rule mark.</BODY></HTML>


SAVJET

Slika 32.3 pokazuje ovaj primjer prikazan u Mosaicu


SLIKA 32.3Oblikovanje tekstaprikazano u Mosaicu

Pretpostavimo da èlite prikazati neki tekst, npr. tablicu i èlite da prijelom redaka i razmaci ostanu onakvi kakve ste vi unijeli. Moète rabiti <PRE> i </PRE> tagoveza definiranje predformatiranog teksta. Bilo koji tekst okruèn tim tagovima prikazan je u pismu jednolikog razmaka me|u znakovima, a prijelomi i razmaci su ostali isti.

Prikaz stranice moète urediti do odre|enog stupnja. HTML osigurava tagove koji govore pre-traìva~u da prikaè tekst masnim slovima, podcrtanim i nako{enim. Ti tagovi su znani kaofizi~ki stilovi. Tagovi za masna slova su <B> i </B>, tagovi za podcrtani tekst su <U> i </U> itagovi za nako{ena slova su <I> i </I>. Tekst koji èlite oblikovati ogradite po~etnim i zavr{nimtagom stila koji èlite.

HTML tako|er omogu}uje neke logi~ke stilove za oblikovanje teksta. <EM> i </EM> tagovi serabe za ozna~avanje nagla{enog teksta koji je obi~no nako{en. <STRONG> i </STRONG> tagovi se rabe za dobivanje ja~eg naglaska, obi~no su otisnuti masno.

Slika 32.4 pokazuje kako se mogu pojaviti razli~ito oblikovani tekstovi.

Tablica 32.1 je kratak popis nekih od naj~e{}ih HTML tagova za oblikovanje teksta.

Tablica 32.1 Odabrani HTML tagovi za oblikovanje tekstaTag Akcija

<B>...</B> îni tekst masnim

<BLOCKQUOTE>...</BLOCKQUOTE> Oblikuje tekst sa lijevim i desnim uvlakama

<FONT>...</FONT> Kontrolira razli~ite aspekte teksta s atributima – na primjer boju teksta (COLOR=rgb_value) i veli~inu (SIZE=number)

Tag Akcija

<I>...</I> Pretvara tekst u nako{en.

<PRE>...</PRE> Ostavlja tekst oblikovan jednako kako izgleda.

<STRIKE>...</STRIKE> Oblikuje tekst kao precrtan.

<U>...</U> Podcrtava tekst.

<EM>...</EM> Logi~ki stil; nagla{ava tekst (obi~no prikazan nako{eno).

<KBD>...</KBD> Logi~ki stil; prikazuje tekst kao stil tipkovnice (ve}inom prikazan u monospaced pismu)

<STRONG>...</STRONG> Logi~ki stil; nagla{ava tekst (obi~no otisnut masno)


SLIKA 32.4 Primjeri oblikovanog teksta u Netscapeu

Raznoliki tekst Tagovi za oblikovanje koji se ne uklapaju u druge kategorije su <ADRESS> i</ADRESS> tagovi. Oni se rabe za ozna~avanje adresa, potpisa i ostalog unutar dokumenta. Obi~no je ovako oblikovan tekst smje{ten na kraju dokumenta, iza oznake vodoravne crte. Precizno oblikovanje <ADRESS> teksta odre|uje pojedini Web pretraìva~.

Organiziranje informacija pomo}u popisaPonekad trebate isporu~iti informaciju koja je na neki na~in logi~ki grupirana . Na primjer, èliteprikazati popis grafi~kih slika, ili numerirani popis. HTML omogu}uje nekoliko razli~itih na~inaoblikovanja i prikazivanja popisa informacija. Uporaba popisa u HTML-u je mo}an na~inisporu~ivanja informacija, jer korisnikov Web pretraìva~ oblikuje sav tekst u popisu nahomogen na~in. Vi samo trebate odlu~iti uklapaju li se te informacije

Prikazivanje nepobrojanih popisa Nepobrojani popis je tekst odvojen grafi~kim znakovima ili drugim znakovima za oblikovanje teksta. Svaki tekst unesen u nepobrojani popis moè bitidug nekoliko redaka.

Za stvaranje nepobrojanog popisa rabe se dva skupa tagova. <UL> i </UL> tagovi odre|ujupo~etak i kraj popisa, a <LI> tag se rabi za ozna~avanje svakog njegovog pojedinog dijela. Popis32.4 pokazuje HTML za jednostavan nepobrojani popis. Slika 32.5 pokazuje taj popis u Mosaicu.

Popis 32.4 Nepobrojani popis<HTML><HEAD><TITLE>An Unordered List</TITLE></HEAD><BODY>

<LI>This is the list item 1.<LI>This is the list item 2.<LI>This is the list item 3.</UL></BODY></HTML>


SLIKA 32.5 Nepobrojani popisprikazan u Mosaicu.

Predstavljanje pobrojanog popisa Pobrojani popis predstavlja popis informacija po broj~anomredu. Svaki put kada se otkriva novi stavak popisa, broj stavka popisa se pove}ava.

Pobrojani popisi su protuma~eni <OL> i </OL> tagovima, a isti <LI> tag rabljen u nepobrojanim popisima se tako|er rabi u pobrojanim popisima za ozna~avanje svakog elementa popisa

Popis 32.5 pokazuje HTML za jednostavni pobrojan popis. Slika 32.6 pokazuje kako je taj popisprikazan u Mosaicu.

Popis 32.5 Pobrojan popis<HTML> <HEAD><TITLE>An Ordered List</TITLE></HEAD><BODY><OL><LI>This is list item 1.<LI>This is list item 2.<LI>This is list item 3.</OL></BODY></HTML>


SLIKA 32.6 Pobrojan popis prikazan u Mosaicu

Uporaba popisa definicija Sjetite se kako izgleda rje~nik stru~nih pojmova u knjizi: obi~no je svaka rije~ ili pojam zasebno izvu~ena, a zatim slijedi odlomak gdje je njegova definicija.HTML popisi definicija (ili rje~nika) omogu}uju da to u~inite sa Web stranicama. Popisi definicija sastoje se od pojma – ovo moè biti jedna rije~ ili niz rije~i – popra}enih definicijom. Definicija je obi~no tekst koji obja{njava pojam.

Premda su popisi definicija djelomi~no korisni za rje~nike, moète ih rabiti za predstavljanje bilo koje vrste informacija gdje trebate naziv i obja{njenje.

Popisi definicija zahtijevaju <DL> i </DL> tagove za ozna~avanje po~etka i zavr{etka popisa.Oni radije koriste dvojne tagove: <DT> ozna~ava stavku rje~nika, a <DD> ozna~ava definiciju.Popis 32.6 pokazuje HTML jednostavnog popisa definicija. Slika 32.7 pokazuje taj popis uMosaicu.

Popis 32.6 Jednostavan definicijski popis<HTML> <HEAD><TITLE>A Simple Glossary List</TITLE></HEAD><BODY><DL><DT>Item 1<DD>This is the definition field for list item 1.<DT>Item 2<DD>This is the definition field for list item 2.<DT>Item 3<DD>This is the definition field for list item 3.</DL></BODY></HTML>


SLIKA 32.7 Jednostavan popisdefinicija u Mosaicu

Kombinirani popisi Kao {to vidite, razli~iti popisi u HTML-u pruàju vam nekoliko na~ina pred-stavljanja informacija korisniku. U stvari, HTML vam dozvoljava kombinirati vrste popisa dasvoje informacije moète bolje kontrolirati. Lako moète ugnijezditi jednu vrstu popisa unutardruge.

Pretpostavimo da èlite izraditi odsje~ak va{e polazne stranice kako biste korisnicima pokazalisvoje omiljene filmovi i pjesme. Mogu}e je i ugnijezditi dva rje~nika popisa unutar nepobrojanogpopisa. Popis 32.7 pokazuje primjer HTML-a koji upotrebljava ugnije`dene popise (nested lists).

Popis 32.7 Izrada prilago|enog popisa ugnije`denjem razli~itih vrsta popisa<HTML><HEAD><TITLE>A Custom List</TITLE></HEAD><BODY>This list shows some of my favorite musicians and movies.It uses two definition lists nested in an unordered list.It also uses some text formatting tags.<P>I hope that you enjoy it.<HR>

<LI>Here are some of my favorite movies<P><DL><DT><DD><DT><DD></DL>

<P><LI>Here are some of my favorite musical groups<P><DL><DT>Coil<DD>A European experimental and electronic project.<DT>Philip Glass<DD>An incredible modern composer.<DT>Ozone Quartet<DD>Instrumental prograssive quartet.

</DL></UL></BODY></HTML>

Ovaj kombinirani popis je malo sloèniji od prija{njih, ali jo{ uvijek koristi samo tehnike kojesmo obradili u ovom poglavlju. Obratite pa`nju da su rje~ni~ki popisi uvu~eni u HTML kôd.Uvlaka se koristi samo za lak{e ~itanje koda (sjetite se da Web pretraìva~ zanemaruje prekideredaka i dodatne razmake pri prikazivanju stranice). Slika 32.8 pokazuje prilago|ene popise uNetscapeu.

Tablica 32.2 pokazuje HTML tagove za izradu ovih popisa.

Tablica 32.2 Popis HTML tagovaTag Akcija

<UL>…</UL> Stvara nepobrojani (grafi~ki ozna~en) popis; stavke popisa po~inju <LI> tagom

<OL>…</OL> Stvara pobrojani (numeriran) popis; stavke popisa po~inju <LI> tagom

<DL>…</DL> Stvara definicijski popis; stavci popisa po~inju <DT> tagomza definiranje izraza ili <DD> tagom za definiciju

Povezivanje stranica sa sidromU ovom odjeljku }ete nau~iti kako spojiti vi{e Web stranica zajedno i izraditi hipertekst veze zaskakanje s mjesta na mjesto. Hipertekstovi veze u HTML-u se zovu sidra (anchors) i za njihovodefiniranje koriste se <A> i </A> tagovi. Ti tagovi se stavljaju oko rije~i koju èlimo uporabitiza hipertekst veze. Web pretraìva~i automatski podvla~e hipertekst veze i prikazuju ga u drugoj boji.


HREF atribute i URL-ove sa sidrom uporabite kako biste Web pretraìva~u rekli koji dokumenttreba dozvati kad kliknemo na hipertekst veze. Pretpostavimo da èlite izraditi hipertekst vezuprema polaznoj stranici NCSA Mosaica. Ako èlite uklju~iti re~enicu Check here to go to NCSA Mosaic home page, a rije~ here je hipertekst veze, trebaju vam slijede}e HTML naredbe:

Click <A HREF=>here</A> to go to the NCSA Mosaic home page.

Sidra okruùju hipertekst veze – u ovom slu~aju rije~ here. HREF atribut je umetnut u po~etnitag za sidro.

U HREF atribut moète staviti bilo koji URL. Moète se povezati s Web stranicom, FTPlokacijom, Gopher posluìteljem ili bilo kojom drugom lokacijom. ��


SLIKA 32.8 Korisni~ki popis u Netscapeu

BILJE[K A

Osim izrade hipertekst veze, moète davati i imena vezama koriste}i atribut NAME. Imenovaneveze su vrlo korisne za skakanje na odre|ene lokacije u dokumentu. Na po~etku duljeg doku-menta moète navesti sadràj i svaku stavku u tablici sadràja oblikovati kao hipertekst vezeprema nekom mjestu u dokumentu. Kombiniranjem s atributom HREF korisnike moète poslatina odre|enu lokaciju u drugom dokumentu.

Pretpostavimo da imate dulji dokument – npr. Frequently Asked Questions (FAQ) popis kojiraspravlja o DVD-ROM-u. Moète izraditi hipertekst vezu od sadràja do odlomka “Kako koris-titi DVD-ROM”. Najprije morate dati ime sidru u odlomku “Kako koristiti DVD-ROM”. HTMLza to mora izgledati ovako:

<A NAME=”howtouse”>Kako koristiti DVD-ROM</A>DVD-ROM je odli~an ure|aj za reprodukciju DVD filmova. Naàlost, u videotekama jo{ nema dovoljno DVD naslova. Kako se ne odnose na HTML, ne treba o njima dalje govoritiu ovom poglavlju.

Sada trebate postaviti hipertekst vezu iz sadràja do tog mjesta. Za povezivanje sa sidrom i davanje imena sidru ispred kojeg ide znak # uporabite atribute HREF. Sadràj izgleda ovako:

<A HREF=”#howtouse“>Kako koristiti DVD-ROM</A>

Kada netko klikne na Kako koristiti DVD-ROM u sadràju, pretraìva~ ska~e na sidro howtousekoje se nalazi malo dalje u tekstu.

Moète imenovati sidro koje je hipertekst veza prema drugoj lokaciji. Uporabite atribute NAME iHREF u istom sidru. Na primjer,

<A HREF=>Go to the end</A>

}e vas odvesti na drugi dokument. Tako|er }e prikazati datoteku koja po~inje tamo gdje je u datoteci smje{teno sidro <#end>. ��

Uporaba grafikaKarakteristika koja je Web u~inila toliko popularnim jest mogu}nost uklju~ivanja grafike i teksta u jednostavan format. HTML olak{ava umetanje grafike u dokument. Mnogi ljudi pristu-paju Webu sporim telefonskim linijama i grafika se pri tim brzinama prijenosa jako dugo pre-bacuje. Tako|er, neki ljude rabe pretraìva~e na osnovi teksta, na primjer Lynx, koji uop}e nemogu prikazivati grafiku. Trebali biste pripaziti da se po va{em Web dokumentu svi mogu jed-nostavno kretati, ~ak i ako im je grafika isklju~ena ili njihov pretraìva~ ne podràva grafiku.

U HTML dokumentu grafiku moète rabiti na dva na~ina: uporabom hipertekst veza ili uporabom slika.


BILJE[K A

� Hiperveze moète napraviti prema grafi~kim datotekama. Ta metoda zahtijeva od korisnika helper program (pomo}ni program) koji je sposoban prikazati grafi~kudatoteku. Vrsta grafike koja se moè prikazati ovisi o helper aplikaciji. Veze za ovu meto-du su hipertekstovi veze koje grafi~ku sliku imenuju kao odredi{ni dokument.

� Grafiku moète umetnuti direktno u va{ HTML dokument. Tako umetnute grafike zovu seinline slike. Mnogi pretraìva~i podupiru grafiku u JPG, GIF ili X Bitmap formatima kao inline slike.

HTML koristi <IMG> tag za ukazivanje na inline sliku. Taj tag se kombinira s atributomSRC=”filename” za odre|ivanje koja slikovna datoteka je prikazana. HTML tako|er osigurava atribut ALIGN= koji govori Web pretraìva~ima kako trebaju poravnati grafi~ki prikazs tekstom. Valjane vrijednosti za ALIGN su TOP, MIDDLE i BOTTOM.

Va{e Web stranice morali bi prikazivati i pretraìva~i koji ne podupiru grafiku. Zato svaki putakada koristite grafi~ki prikaz trebate osigurati text reference. HTML osigurava na~in za defini-ranje prikaza teksta ukoliko pretraìva~ nije u stanju prikazati grafiku. Atribut ALT=”text aboutthe graphic” odre|uje neke zamjenske tekstove u tom slu~aju.

Popis 32.8 je dio HTML-a koji prikazuje inline GIF sliku. Ako pretraìva~ ne moè prikazatisliku, umjesto nje dobije se opis slike.

Popis 32.8 Umetanje grafike u skriptu<HTML>

<HEAD><TITLE>Image example</TITLE>

</HEAD><BODY>

<H2>Images</H2>

<P><P><IMG src=”venus.jpg”

align=”right”height=”160” width=”82”alt=”Statue of Aphrodite”>

<UL><LI>Statue of Aphrodite, known as the Venus de Milo”.<LI>Carved out of marble in Greece, circa 100 B.C.<LI>Currently in the Louvre in Paris<LI>Part of the Louvre’s Greek, Etruscan and Roman Antiques Collection</UL>

<HR>To go to the Louvre’s web site click <A HREF=>HERE</A></BODY></HTML>


Slika 32.9 pokazuje kako je ova stranica prikazana u Netscapeu. Uo~ite povezivanje razli~itihelemenata (zaglavlja, popisa, vodoravne crte, grafika i veza).


Slika 32.9Inline grafi~ki prikaz u Netscapeu.

Grafi~ke prikaze i sidra moète kombinirati kako bi izradili grafi~ke hipertekst veze. Oruìte<IMG> tag sidrom koje odre|uje koji dokument treba u~itati. U slijede}em primjeru slika sluì kao hipertekst veza s drugim HTML dokumentom:

Click the picture to find out more about this statue. <A HREF=”statue.html”><IMG SRC=”statue.gif”ALIGN=BOTTOM ALT=”(Photo of statue)”></A>

Odavde…U ovom poglavlju upoznali ste HTML za izradu Web stranice. Nau~ili ste uporabiti tagove kojidaju naredbe Web pretraìva~u, te uporabiti atribute i URL-ove koji opisuju naredbe. NaInternetu je dostupno puno vodi~a za HTML koji obra|uju sve, od sintakse do dizajna. Zapronalaènje tema o HTML-u koje vas zanimaju iskoristite neke od mnogih pretraìva~kihservisa.

NA WEBUZa po~etak, pogledajte Yahoo-ove popise HTML-a:

http://www.yahoo.com/computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/

Vi{e o World Wide Webu i Internetu moète doznati u 31. poglavlju “Kretanje Internetompomo}u World Wide Weba”, koje vas upoznaje s Webom i kako ga pretraìvati.


Documents

izrada web dokumenata pomocu html-a