01-Kako Se Pravi HTML-1

Prof.
dr Lazo Roljić
Uvod u pravljenje web stranica1
Koncepti konstrukcije web stranice
Tekst koji upisujete na web stranicu je isti kao tekst u svim drugim dokumentima. Razlika je u
tome što tekst sadrži kodove koji omogućuju čitanje u formatiranom obliku pomoću Internet
pretraživača (Microsoft Internet Explorer, Mozilla Firefox, Opera, Netscape, i dr.). Ove kodove
morate uključiti na vašu stranicu da bi ona radila ali ako koristite HTML programe za uređivanje
kao što su PageMill ili HoTMetal ne morate da pamtite kodove. Ako želite, stranicu možete
napisati u programu za uređivanje teksta (tekst editoru) kao što je "WordPad" ili "Notepad", pa je
sačuvati kao tekstuelnu datoteku (sa ekstenzijom .html) pomoću komande Save As. Druga
mogućnost je da napišete običnu stranicu u Wordu koji vam omogućuju da sačuvate stranicu kao
HTML datoteku. Međutim, ako razumijete šta je „iza prozora” to će vam pomoći da razumijete
mogućnosti web dizajna i pomoći vam da riješite probleme u radu ako stvari ne izgledaju onako
kako ste htjeli.
Mnogi ljudi ne znaju da mogu vidjeti (i kopirati!) kodove iz drugih web stranica. Da biste vidjeli
kodove za određenu stranicu pritisnite mišem na menij View, koji se nalazi na liniji menija, pa
izaberite stavku Source. Potom možete rezati i prenositi dijelove koda koliko god želite. Takođe
je dobro vidjeti kako su drugi ljudi konstruisali svoju web stranicu pa iskoristiti tako stečeno
znanje i iskustvo za pravljenje vlastite web stranice.
Prije no što počnete da pravite stranicu razmislite o slijedećem:
 Zašto pravite stranicu ?

 Šta želite njome da kažete ?
 Zašto će se ljudi zaustaviti na vašoj stranici ?
 Koje grafike želite da uključite ?
 Koje veze (linkove) želite da uključite na vašoj stranici?
 Da li imate život mimo računara, koji druge može takođe da interesuje?
Osnove HTML-a
Kada web pretraživač prikaže stranicu on je čita iz tekstuelne datoteke i traži posebne kodove ili
„tagove" (kontrolne oznake) da bi znao kako da prikaže tekst. HTML oznake mogu reći WWW
pretraživaču da podeblja tekst u polucrno, u kurziv, da ga pretvori u gornju živu kolonu ili vezu
sa drugim dokumentom. Na primjer, riječi „bold text” će izvorno (source code) imati ovakve
oznake:
1
Rad je preuzet sa Interneta i adaptiran za studente EF UNTZ. Tekst je pripremila: Irena Gonda,
CET Škola računara, Beograd, Knez Mihailova 6/VI, 11000 Beograd.
bold text

ovaj tag gore govori web pretraživaču da tekst koji slijedi iza njega („bold text”) prikaže polucrno
dok ovaj tag dole

govori pretraživaču da prestane prikazivanje u polucrnoj boji.
Tagovi (kontrolne oznake) su skoro uvijek u parovima i ograđeni u tzv. špicastim zagradama
<(početni tag) > i </(završni tag)>. Važno je napomenuti da završni tag </ime taga> sadrži znak
"/". Ovaj znak govori pretraživaču da prestane sa navedenim označavanjem teksta. Ako
zaboravite ovaj tag www pretraživač će nastaviti da označava ostatak teksta u dokumentu čime će
se dobiti čudan (i frustrirajući) rezultat. Osnovno formatiranje za korišćenje HTML taga je:
<IME TAGA>tekst</IME TAGA>
Kostur strukture dokumenta
Svaki HTML dokument treba da sadrži određene standardne HTML oznake. Svaki dokument se
sastoji iz dva dijela: naslovnog dijela i tijela teksta. Naslovni dio (HEAD) sadrži naslov a tijelo
(BODY) sadrži tekst koji se sastoji od pasusa, lista i drugih elemenata.
Potrebni elementi su prikazani u ovom primjeru kostura dokumenta:

<HTML>
<HEAD>
<TITLE>Jednostavan HTML primjer</TITLE>
</HEAD>
<BODY>
<H1>HTML se lako uči</H1>
Dobrodošli u svijet HTML-a.
Ovo je prvi paragraf. Mada je kratak, to je
ipak paragraf!
A ovo je drugi paragraf.
</Body>
</HTML>
Potrebni elementi su
<html>, <head>, <title>, <body>
tagovi (i odgovarajući završni tagovi). Potrebno je da stavite ove tagove u svaku datoteku. Neki
pretraživači će formatirati vašu HTML datoteku čak i ako ove oznake ne postoje. Ali neki
pretraživači to neće učiniti! Vi ih ipak obavezno uključite.
Često korišćeni HTML tagovi
<HTML>
Ovaj element govori pretraživaču da datoteka sadrži informacije kodirane u HTML-u.
<HEAD>
Glavni element identifikuje prvi dio dokumenta kodiranog u HTML-u i sadrži naslov. On takođe
može sadržati naprednije kodirane opise dokumenta.
<TITLE>
Naslovni element sadrži naslov dokumenta i određuje njegov sadržaj u opštem kontekstu. Naslov
se prikazuje negdje u prozoru pretraživača (obično na vrhu) ali ne unutar područja teksta. Naslov
se takođe prikazuje na nečijoj listi ili obilježivaču pa izaberite opisni, jedinstveni i relativno
kratak naslov. Naslov takođe koriste mašine za pretraživanje da bi opisale vašu stranicu.
<BODY>
Drugi i veći dio vašeg HTML dokumenta je tijelo koje sadrži sadržaj vašeg dokumenta (prikazuje
se u području teksta u prozoru pretraživača). Oznake objašnjene u narednom dijelu teksta koriste
se u tijelu vašeg HTML dokumenta.
<H>
HTML ima šest nivoa gornjih živih kolona označenih brojevima od 1 do 6 gdje je 1 najznačajniji.
Gornje žive kolone su prikazane u većim i/ili više polucrnim fontovima od normalnog tijela
teksta. Prva gornja živa kolona u svakom dokumentu treba da je označena kao <H1>. Za svaki
slijedeći nivo gornje žive kolone uvećajte broj da biste smanjili veličinu i isticanje fonta.

Web pretraživač ignoriše prekid reda (pritisak na Return ili Enter taster na vašoj tastaturi) i
počinje novi pasus (paragraf) samo kad naiđe na oznaku . Sve pasuse morate označiti
elementima . Pretraživač ignoriše sva uvlačenja teksta ili prazne redove u izvornom tekstu.
Ako nema elemenata, cio dokument postaje jedan veliki pasus.
Napomena: Završna oznaka se može izostaviti zbog toga što pretraživači znaju da kad
naiđu na oznaku znači da je prethodni pasus završen.
Korišćenjem oznaka i kao okvira za pasus znači da možete da centrirate pasus
uključivanjem atributa ALIGN=" " u vašoj izvornoj datoteci.

Ovo je centrirani paragraf.

[Pogledajte dole formatiranu verziju.]

Rezultat je:
Ovo je centrirani paragraf.
 
Oznaka izaziva prekid reda bez dodatnih (bijelih) razmaka između redova. Ako koristite
elemente za kratke redove teksta, kao što su poštanske adrese, dobijaju se nepotrebna
dodatna prazna mjesta. Na primjer, sa :
CET Škola računara 
Knez Mihailova 6/VI 
11000 Beograd 
Rezultat je:
CET Škola računara

Knez Mihailova 6/VI
11000 Beograd
<HR>
<HR> oznaka iscrtava horizontalnu liniju širine prozora pretraživača. Horizontalna linija se
koristi za razdvajanje dijelova vašeg dokumenta. Na primjer, mnogi ljudi dodaju liniju na kraj
teksta a prije informacija o organizaciji ili piscu.
Možete podešavati veličinu linije (debljinu) i širinu (procenat prozora kojeg prekriva linija).
Eksperimentišite sa podešavanjima dok ne budete zadovoljni sa prezentacijom. Na primjer:
<HR SIZE=4 WIDTH="504">
se prikazuje kao:
======================================
Pravljenje lista
<UL>
Da biste napravili nenumerisanu listu sa grafičkim oznakama
1. počnite sa oznakom za otvaranje liste <UL> (za nenumerisanu listu)
2. unesite oznaku <LI> (za stavku liste) nakon čega slijedi pojedinačna stavka; završna
oznaka </LI> nije potrebna
3. završite cijelu listu sa završnom oznakom liste </UL>
Evo primjera liste od tri stavke:
<UL>
<LI> jabuke
<LI> banane
<LI> grejpfrut
</UL>
Rezultat je:
 jabuke
 banane
 grejpfrut
<OL>
Numerisana lista (koju takođe zovemo uređena lista) je identična nenumerisanoj listi osim što
koristi <OL> umjesto <UL>. Stavke su označene korišćenjem iste oznake <LI>. Slijedeći HTML
kod:
<OL>
<LI> narandže
<LI> breskve
<LI> grožđe
</OL>
proizvodi ovaj formatirani rezultat:
1. narandže
2. breskve
3. grožđe
<DL>
Lista definicija (kodira se sa <DL>) obično sadrži alternativne termine definicija (kodiraju se sa
<DT>) i definicije definicija (kodirane sa <DD>). Web pretraživači obično formatiraju definiciju
u novom redu.
Slijedi primjer liste definicija:
<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing
Applications, is located on the campus of the University
of Illinois at Urbana-Champaign.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell Univesity
in Ithaca, New York.
</DL>
Rezultat izgleda ovako:
NCSA
NCSA, the National Center for Supercomputing Applications, is located on the campus of the
University of Illinois at Urbana-Champaign.
Cornell Theory Center
CTC is located on the campus of Cornell Univesity in Ithaca, New York.
Dodavanje linkova (veza) na vašu stranicu
Glavna snaga HTML-a dolazi iz njegove sposobnosti da poveže tekst i/ili sliku sa drugim
dokumentom ili dijelom dokumenta. Pretraživač naglašava određeni tekst ili sliku bojom i/ili
podvlačenjem da bi naznačio da je to hiperveza (hiperlink).
Pojedinačna hipertekst oznaka vezana za HTML je <A> što znači anchor (sidro). Da biste
uključili sidro u vaš dokument:
 počnite sidro sa <A (stavlja se razmak poslije A)

 odredite dokument koji povezujete unošenjem URL-a ili imena putanje
HREF="ime_datoteke" nakon čega slijedi završna oznaka u obliku desne uglaste zagrade
(>)
 unesite tekst koji će služiti kao hipertekst veza u tekućem dokumentu
 unesite završnu oznaku sidra: </A> (nije potreban razmak prije završne oznake sidra)
Evo primjera hipertekst reference:
<HREF=http://snow.utoronto.ca>SNOW: Special Needs Opportunity

Windows</A>
Ovaj unos pretvara riječi SNOW: Special Needs Opportunity Windows u hipervezu
do lokacije dokumenta (URL) na Internetu: http://snow.utoronto.ca
Takođe možete napraviti veze do drugih datoteka uskladištenih u istom direktorijumu u kojem je
datoteka koja sadrži referentni kod hiperveze. Na primjer:
<A HREF="veze_ka_resursima.html">Stranica sa vezama ka

resursima</A>
Najzad, možete dodati veze ka drugim lokacijama unutar iste datoteke. Da biste to uradili morate
prvo da napravite cilj za hipervezu:
<A name="cilj">Cilj za hipervezu</A>
Potom možete napraviti uobičajen hipertekst, ali umjesto URL-a stavite ime "sidra" u oznaci i
ispred njega znak "#".
<A HREF="#cilj">Preći na cilj</A>

Ova dva metoda hiper povezivanja se mogu kombinovati da bi omogućili preskakanje do
određenog cilja (sidra) u drugom dokumentu. U ovom slučaju unesite putanju dokumenta i/ili ime
datoteke nakon čega slijedi znak "#" i ime sidra u novom dokumentu.
<A HREF="veze_ka_resursima.html#cilj">Resource Links Page -

Cilj</A>

01-Kako Se Pravi HTML-1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

01-Kako Se Pravi HTML-1

Uploaded by

Copyright:

Available Formats

Prof.

Uvod u pravljenje web stranica1

Koncepti konstrukcije web stranice

Prije no što počnete da pravite stranicu razmislite o slijedećem:

 Zašto pravite stranicu ?

govori pretraživaču da prestane prikazivanje u polucrnoj boji.

<IME TAGA>tekst</IME TAGA>

Kostur strukture dokumenta

Potrebni elementi su prikazani u ovom primjeru kostura dokumenta:

<TITLE>Jednostavan HTML primjer</TITLE>

<H1>HTML se lako uči</H1>

<P>Dobrodošli u svijet HTML-a.

Ovo je prvi paragraf. Mada je kratak, to je

<P>A ovo je drugi paragraf.</P>

<html>, <head>, <title>, <body>

Često korišćeni HTML tagovi

Ovo je centrirani paragraf.

Ovo je centrirani paragraf.

CET Škola računara<BR>

Knez Mihailova 6/VI<BR>

CET Škola računara

<HR SIZE=4 WIDTH="504">

proizvodi ovaj formatirani rezultat:

Slijedi primjer liste definicija:

Rezultat izgleda ovako:

Dodavanje linkova (veza) na vašu stranicu

 počnite sidro sa <A (stavlja se razmak poslije A)

Evo primjera hipertekst reference:

<HREF=http://snow.utoronto.ca>SNOW: Special Needs Opportunity

<A HREF="veze_ka_resursima.html">Stranica sa vezama ka

<A name="cilj">Cilj za hipervezu</A>

<A HREF="#cilj">Preći na cilj</A>

<A HREF="veze_ka_resursima.html#cilj">Resource Links Page -

You might also like