Вы находитесь на странице: 1из 16

- Veba 6 -

UVOD U HTML
STRUKTURA HTML STRANICE
FORMATIRANJE TEKSTA
BOJE I HTML
TABELE
1

UVOD U HTML

HTML (HyperText Markup Language) je veoma jednostavan jezik koji slui za izvravanje
programa na daljinu. Ovaj jezik predstavlja standard za Internet dokumente. Sa razvojem
Interneta dolo je do pojave nove vrste dokumenata - hiperteksta. To je tekst koji sadri veze
ili linkove ka drugim dokumentima ili na samog sebe. Preciznije, hipertekst je skup stranica u
obliku datoteka, meusobno povezanih linkovima koje su umetnute u stranice. Za razliku od
obinog teksta, koji se ita linearno (sleva na desno, odozgo nanie), hipertekst se ita pratei
hiperveze u tekstu, dakle, ne nuno na linearan nain. HTML stranice imaju ekstenziju .html
ili .htm, a nalaze se u odreenom direktorijumu servera vezanog na Internet, to ih ini
dostupnim na web-u.

Postoji vei broj jezika koji omoguavaju da se precizno opie izgled i sadraj jednog teksta a
od posebnog su znaaja:

SGML (skr. od Standard General Markup Language),


TeX i LaTeX (za matematike tekstove),
PostScript (jezik laserskih tampaa),
RTF (skr. od Rich Text Format), ...

Najznaajniji jezici za opis hiperteksta su:

SGML,
HTML (skr. od HyperText Markup Language), pojednostavljena verzija SGML-a,
XHTML (skr. od Expandable HTML) i
XML (skr. od Extensible Markup Language, "kompromis" izmeu preterane
sloenosti SGML-a i jednostavnosti HTML-a)

Za generisanje HTML stranice potreban je najobiniji tekst editor, na primer Notepad.

Pisanje HTML stranice pomou tekst editora Notepad

U okviru Windows operativnog sistema, na statusnoj liniji treba pronai dugme Start i
pritisnuti ga.
Od ponuenih opcija izabrati opciju Run i aktivirati je.
U prozoru koji se pojavio u tekst polje upisati notepad (slika 1).

2
1

Nakon aktiviranja dugmeta OK, dobija se prozor tekst editora Notepad (slika 2).

Na beloj povrini pie se kod za HTML stranicu. Stranica se u svakom trenutku moe snimiti
aktiviranjem na meniju opcija File, pa opcije Save. Kod snimanja stranice treba obratiti
panju da dokumenat koji u ovom sluaju treba da predstavlja HTML stranicu mora imati
ekstenziju html ili htm.

HTML komande se piu u vidu tzv. TAG-ova. Jedan tag je ustvari komanda koja govori
browseru ta i kako da uradi tj. na koji nain da prikae sadraj vae stranice. HTML tagovi
su "case insensitive" tj. svejedno je da li ih piete malim ili velikim slovima. Tagovi se piu
unutar oznaka "<" i ">" (bez znakova navoda) npr: <html>. Ovaj tag se nalazi na poetku
svakog HTML dokumenta. <html> govori browseru da je fajl koji je upravo poeo da uitava
HTML dokument i da kao takvog treba i da ga prikae. Na kraj HTML dokumenta se stavlja
zavrni HTML tag:</html>. Ovaj tag govori browseru da je to kraj HTML dokumenta.
Veina tagova ima i poetni i zavrni tag. Zavrni tag se dobija dodavanjem znaka "/" i
oznaava mesto na kom prestaje dejstvo poetnog taga.

Vrste tagova

prosti tagovi za opisivanje jednostavnih elemenata logike strukture. Oblika su: <X>
sloeni tagovi su zagrade oblika <X> y </X> kojima je opisan izgled dela teksta y.
atributi sloenih obeleja oblika: <X A1=a A2=b ...> y </X> koji pruaju dodatne
informacije, obino o grafikom izgledu, dela teksta y

STRUKTURA HTML STRANICE


Minimalna struktura HTML-dokumenta obuhvata tagove:

<HTML>, </HTML> - zagrade HTML-teksta;


<HEAD>, </HEAD> - zagrade zaglavlja, sadri meta-definicije HTML-dokumenta;
<TITLE>, </TITLE> - zagrade za naziv HTML-dokumenta i
<BODY>, </BODY> - zagrade teksta obeleenog dokumenta.

3
1

Head deo
Svaki HTML dokument se sastoji od dva dela: zaglavlja (engl. head) i tela (engl. body).
Zaglavlje se odvaja tagovima <head> i </head> a telo dokumenta tagovima: <body> i
</body>.Sve ono to se napie u zaglavlju dokumenta nee se prikazati u prozoru browsera
ve obino slui samo da prui neke informacije o stranici.

BODY deo
Sve ono to je napisano izmeu tagova <body> i </body> predstavlja telo dokumenta
pojavie se kao sadraj prezentacije u prozoru browsera.

Izgled stranice:

<html>
<head>
<title>
ovde je naziv prezentacije
</title>
</head>
<body>
ovde se unosi sve ono sto zelite da se vidi u prezentaciji
</body>
</html>

Komentar
Dodatna opcija omoguava da se obelei komentar u HTML-obeleenom tekstu koji se nee
videti u vizuelizaciji dokumenta.

Na primer:
<!------ komentar ------>

Headeri
Naslovi (engl. headers) se kodiraju prema relativnoj dubini ciframa od 1 do 6. Tag za naslov
ima opti oblik:
<Hn> Naslov nivoa n </Hn>
gde n uzima vrednosti od 1 do 6.

Odeljak
Odeljak (engl. division) se opisuje zagradama <DIV> ... </DIV>.
Ovaj tag moe imati atribut za pozicioniranje ALIGN sa vrednostima CENTER, RIGHT ili
LEFT.

Paragraf
Pasus (engl. paragraph) se obeleava zagradama <P> ... </P>.
Ukoliko u ravnom tekstu sledi pasus za pasusom, tag </P> se moe izostaviti.
Ovaj tag moe imati atribut za pozicioniranje ALIGN sa istim vrednostima kao tag <DIV>.

Novi red
Novi red (engl. break) se obeleava etiketom <BR>.
Ovo je prosti tag: ne postoji kraj taga </BR>.

4
1

Razdvojna linija
Razdvojna linija (engl. rule) se obeleava etiketom <HR> sa opcionim atributom NOSHADE
Ovo je prosti tag: ne postoji kraj taga </HR>.
Primer
<HR SIZE=4 WIDTH="50%">
SIZE debljina linije

Primer 1. Prvi program u HTMLu.

<HTML>
<HEAD><TITLE>Ovo je naslov</TITLE></HEAD>
<BODY>
TEKST KOJI SE PRIKAZUJE
</BODY>
</HTML>

Primer 2. Ispisivanje naslova razliitih veliina.

<HTML>
<HEAD><TITLE>Naslovi</TITLE></HEAD>
<BODY>
<H1> Naslov H1 </H1>
<H2> Naslov H2 </H2>
<H3> Naslov H3 </H3>
<H4> Naslov H4 </H4>
<H5> Naslov H5 </H5>
<H6> Naslov H6 </H6>
</BODY>
</HTML>

Primer 3. Primeri osnovnih tagova unutar HTML stranice.

<HTML>
<HEAD><TITLE>Primeri osnovnih tagova</TITLE></HEAD>
<BODY>
<H2><P ALIGN=CENTER> HTML</P> </H2>
<HR>
<P ALIGN=LEFT>HTML (HyperText Markup Language) je veoma jednostavan
jezik cije osnove svako moze da se brzo savlada. U okviru ovog kursa proucavaju se osnove
HTML-a koje su dovoljne da se naprave jednostavne ali sasvim zadovoljavajuce prezentacije.
</P>
<HR>
<P ALIGN=RIGHT>Svaki put kada krstareci internetom naletite na neku zanimljivu
stranicu , a ne znate kako je napravljena, njen izvorni HTML kod mozete pogledati ako u
liniji menija odaberete: View -> Source (ili View -> Page Source u Netscape
Navigatoru).</P>
<HR>
<P ALIGN=CENTER>HTML se koristi i u okviru<BR>
ASP stranica<BR>
JSP stranica, <BR> Zajedno

5
1

sa JavaScriptom <BR> ili PHP jezikom <BR>


ili nekim drugim script jezikom</P>
<HR>
<P ALIGN=CENTER>HTMLje
<DIV ALIGN=LEFT>hiper-</DIV>
<DIV ALIGN=CENTER>tekst-</DIV>
<DIV ALIGN=RIGHT>Markup jezik.</DIV>
Kad savladate osnove HTML-a mozete preci na upoznavanje JavaScripta </P>
</BODY>
</HTML>

Primer 4. Primer paragrafa.

<html>
<head>
<TITLE> HTML Primer</TITLE>
</head>
<body>
<H1>HTML Uvod</H1>
<P>Ovo je primer prvog paragrafa.
Koji se radi na prvom casu.
</P>
<P>Drugi paragraf.</P>
<P ALIGN=CENTER>
Ovo je centrirani paragraf
</P>
</body>
</html>

FORMATIRANJE TEKSTA
Ako se drugaije ne naglasi tekst unutar HTML stranice je poravnat uz levu stranu. Ako se
eli da naslov, ili bilo koji drugi element stranice, bude centriran, treba ga staviti izmeu
tagova <center> i </center> to e dati sledei rezultat: <center> OVO JE CENTRIRAN
TEKST </center>. Ukoliko se posebno ne naglasi kojim fontom se eli da bude ispisan tekst
na stranici, browser e koristiti default font (a to je obino Times New Roman). Rad sa
fontovima u okviru HTML stranice se obavlja pomou <font> taga. Ovaj tag moe imati
sledee atribute: face, size i color.

Atributom face definiemo tip fonta kojim se eli da tekst bude ispisan. Na jednoj stranici se
moe koristiti i vie razliitih fontova. Mora se vodiiti rauna da korisnik koji uitava stranicu
mora imati instaliran font koji je naveden na svom raunaru. U suprotnom njegov browser e
prikazati tekst u default fontu. Zato ne treba koristiti neke egzotine fontove, ve treba
upotrebljavati samo iroko rasprostranjene fontove.

Pored naina ispisivanja teksta, u okviru stranice moe se upravljati i veliinom slova. Za ove
potrebe koristi se size atribut unutar font taga. HTML razlikuje 7 veliina slova koje nose
vrednosti od 1 do 7. Podrazumevana veliina je 3. Razmera slova je data: size 1, size 2, size
3, size 4, size 5, size 6, size 7.

6
1

Poslednja osobina koja se moe menjati je boja slova u okviru HTML stranice. Za te potrebe
koristi se atribut color font taga. Dakle, ako se eli dobiti sledei tekst ispisan crvenom bojom
moe se uraditi pomou sledeeg dela koda: <font color="#ff0000"> Ovde ide vas tekst.
</font>

Pored <font> taga HTML poseduje jo mogunosti za obradu teksta. U HTML dokumentima
postoji mogunost pisanja podebljanim (bold ili strong) slovima i kurzivom (italic), kao I
mogunost podvlaenja (underline) i precrtavanja (strike) teksta.

Navedeni su odgovarajui tagove kao i rezultat njihove primene:

bold: <b>bold</b>
strong: <strong>strong</strong>
italic: <i>italic</i>
underline: <u>underline</u>

Osim toga mogu se pisati i slova u indeksu ili eksponentu. Indeks se dodaje pomou taga
<sub> a eksponent pomou taga <sup>.

Prelazak u novi pasus se postie <p> tagom. Na kraju pasusa se moe staviti i njegov zavrni
tag, ali veina browsera ga ne zahteva, tako da se slobodno moe i izostaviti. Tekst se, ako se
nita ne navede, poravnava uz levu marginu. Centriranje pasusa ili poravnanje pasusa uz
desnu marginu se postie align atributom. Align atribut moe imati tri vrednosti: left, center,
right

Primer 1. Rad sa fontovima.

<html>
<head><title> Rad sa fontovima</title>
</head>
<body>
<P>
<FONT FACE="Arial, Helvetica, Geneva" SIZE="3", COLOR=red>
Ovo je font velicine 3 , vrste Arial, boje crvene </FONT>
<FONT FACE="Verdana" SIZE="5" COLOR=blue> Ovo je font velicine 5 , vrste
Verdana, boje plave </FONT>
<b><FONT FACE="Arial " SIZE="7" COLOR=green> Ovo je font velicine 7 , vrste Arial,
boje zelene a i jos boldovan </FONT><b>
</P>
</body>
</html>

BOJE I HTML
Na HTML stranicama se pozadina i tekst mogu pojaviti u itavom spektru boja. To se postie
pomou atributa u okviru <body> taga. Atributi se ubacuju u poetni tag i slue da detaljnije
opiu dati tag. Boja pozadine se odreuje atributom bgcolor koji je deo <body> taga. Posle
svakog atributa se stavlja znak jednakosti koji slui za dodelu vrednosti datom atributu, a
vrednost atributa se obavezno stavlja izmeu znakova navoda. Boje se mogu definisati na dva
naina: ili preko predefinisanog engleskog naziva boje (npr."yellow" za utu boju), ili preko

7
1

heksadecimalne RGB vrednosti ispred koje obavezno treba staviti simbol # (npr. #ffff00).
Znai, boje se mogu odrediti sa RGB-palete. Vrednost atributa boje ima opti oblik "#cczzpp"
gde su cc, zz i pp redom heksadecimalne vrednosti za intenzitet crvene, zelene i plave boje.
Svaka od ovih vrednosti moe biti broj izmeu 0 i 255 (u dekadnom brojnom sistemu) ili
izmeu 0 i FF (u heksadecimalnom brojnom sistemu). Boje se mogu odrediti navoenjem
naziva boje na engleskom umesto kombinacijom heksadecimalnih cifara prema tabeli koju je
data na strani SGIR (skr.od Service Gnral Informatique et rseaux, Universit Ren
Descartes, Paris). U sluaju da se prilikom navoenja taga BODY izostave opisani atributi,
navigator im dodeljuje predefinisane vrednosti. Na primer, ako se eli da se promeni boja
pozadine u utu tada <body> tag treba da glasi: <body bgcolor="#ffff00"> ili <body
bgcolor="yellow"> Oba primera koda e dati isti rezultat.

Pored pozadine, moe se menjati i boja teksta, pomou text atributa. Na primer, ako se na
prethodno definisanoj stranici dodaju zelena slova treba napisati sledei kod:
<body bgcolor="#ffff00" text="#008000">

Primer 1. Boje pozadine i slova

<HTML>
<HEAD>
<TITLE> Boje pozadine i slova</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF00" TEXT="#FF0000">
<H1>Ovaj naslov je crven zbog atributa TEXT</H1>
<BR><BR>
<H1><FONT COLOR="#0000FF">
a ovaj naslov je plav zbog etikete FONT
</FONT>
</H1>
</BODY>
</HTML>

TABELE
Tabela je i u HTML-u dvodimenziona matrica iji se elementi nazivaju elije (engl. cell).
elija moe sadravati raznovrsne informacije: brojeve, tekst, boje, liste, hiper-veze, slike,
itd. Tabela se sastavlja tako to se opisuju redom njene vrste (redovi, engl. row) i sadraj
svake elije u redu.

Tabela se opisuje uz pomo sloenog taga TABLE koji moe sadravati vie atributa:

BORDER koji opisuje irinu spoljanjeg okvira tabele;


CELLSPACING koji opisuje irinu linije koja razdvaja dve elije;
CELLPADDING koji opisuje prostor oko sadraja elije;
WIDTH koji opisuje ukupnu irinu tabele.

8
1

Nadnaslov tabele se moe zadati tagom CAPTION koja se ispisuje iznad tabele i moe imati
atribut ALIGN:

za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM


za horizontalno poravnavanje: LEFT, CENTER, RIGHT.

Svaki red u tabeli se opisuje izmeu tagova <TR> i </TR> (engl. table row). I tag TR moe
imati atribute:

za horizontalno poravnjavanje, atribut ALIGN sa vrednostima: LEFT, CENTER,


RIGHT
za vertikalno poravnavanje, atribut VALIGN sa vrednostima: TOP, MIDDLE,
BOTTOM

Pojedinana elija se opisuje izmeu tagova <TD> i </TD>. Tag TD, pored atributa ALIGN i
VALIGN, moe imati i atribute:

za horizontalno spajanje elija: ROWSPAN (spaja elije iste vrste) i


za vertikalno spajanje elija: COLSPAN (spaja elije iste kolone) .

Tag <TH> ima ista svojstva kao tag <TD> s tom razlikom to obezbeuje da sadraj elije
bude automatski centriran i boldovan. Tabela ne mora da sadri <TH> tag, ali mora da sadri
bar jedan <TD> tag, u koji se smeta sadraj tabele.

Opta struktura jedne tabele je sledea:

<TABLE>
<!-- pocetak definicije tabele -->
<CAPTION> sadrzaj naslova tabele </CAPTION>
<!-- definicija naslova-->
<TR>
<!-- start definicije headera -->
<TH> sadraj prve elija headera </TH>
<TH> sadraj poslednje elije headera </TH>
</TR>
<!-- kraj definicije headera -->
<TR>
<!-- start prvog reda -->
<TD> sadraj prve elije prvog reda </TD>
<TD> sadraj poslednje elije prvog reda </TD>
</TR>
<!-- kraj prvog reda -->
<TR>
<!-- start poslednjeg reda -->
<TD> sadraj prve elije poslednjeg reda </TD>
<TD> sadraj poslednje elije poslednjeg reda </TD>
</TR>
<!-- kraj poslednjeg reda -->
</TABLE>
<!-- kraj definicije tabele-->

9
1

Treba naglasiti da ako se tekstu van tabele upotrebom <font> taga dodeli neki font razliit od
default fonta, u Internet Exploreru e se ovaj tag odnositi i na tekst u elijama tabele. U
Netscape Navigatoru e tekst u tabeli biti prikazan u default fontu. Da bi i Netscape Navigator
tekst u tabeli prikazao u eljenom fontu treba u svaku eliju posebno da se ubaci <font> tag.
Ako se u kodu tabele ne navede odreeni atribut tabele nemaju graninu liniju, border. Da bi
se dodelila tabeli granina linija odgovarajue debljine, u <table> tag se stavlja atribut border,
a vrednost debljine linije se zadaje u pikselima.

Primer 1: Upotreba atributa border

<table border="2">
<tr>
<th><font face="Verdana" size="2">Ime:</font></th>
<th><font face="Verdana" size="2">Prezime:</font></th>
<th><font face="Verdana" size="2">Zvanje:</font></th>
</tr>
<tr>
<td><font face="Verdana" size="2">Pera</font></td>
<td><font face="Verdana" size="2">Peric</font></td>
<td><font face="Verdana" size="2">Student</font></td>
</tr>
</table>

Osnovna razlika izmeu teksta koji se nalazi izmeu <th> i <td> tagova je u tome to je tekst
u prvom sluaju boldovan i centriran unutar elije, a u drugom sluaju tekst nije podebljan i
poravnat je uz levu ivicu elije. Ivica tabele se priljubljuje uz sadraj elija maksimalno
koliko je mogue. irina kolona je odreena prvom elijom u svakoj koloni. Naravno, ovim
se ne iscrpljuje mogunost formatiranja tabela. U tu svrhu se koriste razni atributi. Treba
napomenuti da tabela uopte ne mora da bude uniformno formatirana, tj. da se svakoj eliji
moe dodeliti neko drugo svojstvo pomou atributa koji se defniu unutar <TD> tagova. Da
bi tabela imala odgovarajue dimenzije koriste se atributi height i width. Vrednost ovih
atributa se moe zadati ili u pikselima ili u procentima veliine prozora HTML browsera.
Sledei primer predstavlja tabelu sa irinom od 80% i visinom od 30%:

Primer 2: Tabela irine 80% i visine 30% monitora

<table border="2" height="30%" width="80%">


<tr>
<th><font face="Verdana" size="2">Ime :</font></th>
<th><font face="Verdana" size="2">Prezime :</font></th>
<th><font face="Verdana" size="2">Studijski program:</font></th>
</tr>
<tr>
<td><font face="Verdana" size="2">Pera</font></td>
<td><font face="Verdana" size="2">Peric</font></td>
<td><font face="Verdana" size="2">RT</font></td>
</tr>
</table>

Da bi kolone bile jednake irine trebalo bi da u odgovarajue <th> ili <td> tagove ubaciti

10
1

atribute width sa eljenom irinom. U sluaju tabele iz prethodnih primera to znai da treba u
svaki <th> tag definisati atribut width sa vrednou 33%. Tako, na primer, se moe
realizovati tabela koja e se protezati preko cele irine stranice, a svaka kolona e zauzimati
tano treinu irine tabele to je i prikazano u sledeem primeru.

Primer 3: Tabela irine 100% a irina svake kolone je 33%

<table border="2" width="100%">


<tr>
<th width="33%"><font face="Verdana" size="2">Ime :</font></th>
<th width="33%"><font face="Verdana" size="2">Prezime :</font></th>
<th width="33%"><font face="Verdana" size="2"> Studijski program:</font></th>
</tr>
<tr>
<td><font face="Verdana" size="2">Pera</font></td>
<td><font face="Verdana" size="2">Peric</font></td>
<td><font face="Verdana" size="2">RT</font></td>
</tr>
</table>

Dva atributa koja imaju veliku primenu su i cellpadding i cellspacing. Pomou cellpadding
atributa definie se rastojanje izmeu sadraja elije i njene granine linije. Vrednost ovog
atributa se zadaje u pikselima, ako se ne navede nijedna vrednost podrazumeva se da 1.
Pomou cellspacing atributa se moe odrediti rastojanje izmeu pojedinih elija tabele, tj.
debljina linije izmeu elija. Vrednost ovog atributa se zadaje, takoe, u pikselima ako se ne
navede nijedna vrednost podrazumeva se da 1. Ako se u prethodnoj tabeli definie vrednost
cellpadding atributa od 30 piksela, a vrednost cellspacing atributa od 10 piksela dobija se
sledea tabelu:

Primer 4: Tabela sa desfinisanim vrednostima atributa cellpadding=30 i cellspacing=10

<table border="2" cellpadding="30" cellspacing="10">


<tr>
<th width="33%"><font face="Verdana" size="2">Ime :</font></th>
<th width="33%"><font face="Verdana" size="2">Prezime :</font></th>
<th width="33%"><font face="Verdana" size="2">Zvanje :</font></th>
</tr>
<tr>
<td><font face="Verdana" size="2">Bosko</font></td>
<td><font face="Verdana" size="2">Nikolic</font></td>
<td><font face="Verdana" size="2">Predavac</font></td>
</tr>
</table>

HTML doputa mogunost da se pojedine elije tabele proteu du vie redova ili kolona
tabele. Ovakav efekat se moe postii pomou atributa colspan i rowspan, koji se ubacuju u
<td> ili <th> tag one elije koja se eli posebno da formatira. Vrednost ovih atributa se zadaje
brojem kolona ili redova tabele du kojih treba da se prostire data elija. U sledeem primeru
je prikazana upotreba ovih atributa:

11
1

Primer 4: Efekat atributa colspan i rowspan

<table border="2" width="100%">


<tr>
<th rowspan="2" colspan="2">&nbsp;</th>
<th colspan="5"> Dani u nedelji :</th>
</tr>
<tr>
<th width="20%">ponedeljak</th>
<th width="20%">utorak</th>
<th width="20%">sreda</th>
<th width="20%">cetvrtak</th>
<th width="20%">petak</th>
</tr>
<tr>
<th rowspan="5">c<p>a<p>s<p>o<p>v<p>i</th>
<th>1.</th>
<td>srpski</td>
<td>istorija</td>
<td>fizicko</td>
<td>hemija</td>
<td>srpski</td>
</tr>
<tr>
<th>2.</th>
<td>matematika</td>
<td>srpski</td>
<td>fizicko</td>
<td>hemija</td>
<td>srpski</td>
</tr>
<tr>
<th>3.</th>
<td>fizicko</td>
<td>matematika</td>
<td>istorija</td>
<td>biologija</td>
<td>engleski</td>
</tr>
<tr>
<th>4.</th>
<td>fizicko</td>
<td>matematika</td>
<td>fizika</td>
<td>informatika</td>
<td>engleski</td>
</tr>
<tr>
<th>5.</th>
<td>fizika</td>

12
1

<td>razredni</td>
<td>geografija</td>
<td>informatika</td>
<td>matematika</td>
</tr>
</table>

U prvu eliju tabele je postavljen je kod karaktera za prazan prostor &nbsp;.Ovo je


neophodno stoga to svaka elija tabele mora imati neki sadraj, inae je browser nee
prikazati. HTML dozvoljava da cela tabela kao i svaka elija posebno moe da ima razliitu
boju pozadine od ostatka stranice. Ovakav efekat se postie umetanjem atributa bgcolor u
sledee tagove: <table>, <td> ili <th>. Vrednost se zadaje heksadecimalnim kodom boje ili
njenim imenom, isto kao i kod boje pozadine stranice u <body> tagu.

Primer 5: Efekat atributa bgcolor

<table border="2" width="100%" bgcolor="#ffffff">


<tr>
<th rowspan="2" colspan="2" bgcolor="#b0e0e6">&nbsp;</th>
<th colspan="5" bgcolor="#ffff00"> Dani u nedelji :</th>
</tr>
<tr>
<th width="20%" bgcolor="#9acd32">ponedeljak</th>
<th width="20%" bgcolor="#9acd32">utorak</th>
<th width="20%" bgcolor="#9acd32">sreda</th>
<th width="20%" bgcolor="#9acd32">cetvrtak</th>
<th width="20%" bgcolor="#9acd32">petak</th>
</tr>
<tr>
<th rowspan="5" bgcolor="#ffff00">c<p>a<p>s<p>o<p>v<p>i</th>
<th bgcolor="#9acd32">1.</th>
<td bgcolor="#b0e0e6">srpski</td>
<td bgcolor="#b0e0e6">istorija</td>
<td bgcolor="#b0e0e6">fizicko</td>
<td bgcolor="#b0e0e6">hemija</td>
<td bgcolor="#b0e0e6">srpski</td>
</tr>
<tr>
<th bgcolor="#9acd32">2.</th>
<td bgcolor="#b0e0e6">matematika</td>
<td bgcolor="#b0e0e6">srpski</td>
<td bgcolor="#b0e0e6">fizicko</td>
<td bgcolor="#b0e0e6">hemija</td>
<td bgcolor="#b0e0e6">srpski</td>
</tr>
<tr>
<th bgcolor="#9acd32">3.</th>
<td bgcolor="#b0e0e6">fizicko</td>
<td bgcolor="#b0e0e6">matematika</td>
<td bgcolor="#b0e0e6">istorija</td>

13
1

<td bgcolor="#b0e0e6">biologija</td>
<td bgcolor="#b0e0e6">engleski</td>
</tr>
<tr>
<th bgcolor="#9acd32">4.</th>
<td bgcolor="#b0e0e6">fizicko</td>
<td bgcolor="#b0e0e6">matematika</td>
<td bgcolor="#b0e0e6">fizika</td>
<td bgcolor="#b0e0e6">informatika</td>
<td bgcolor="#b0e0e6">engleski</td>
</tr>
<tr>
<th bgcolor="#9acd32">5.</th>
<td bgcolor="#b0e0e6">fizika</td>
<td bgcolor="#b0e0e6">razredni</td>
Via eleznika kola
42
<td bgcolor="#b0e0e6">geografija</td>
<td bgcolor="#b0e0e6">informatika</td>
<td bgcolor="#b0e0e6">matematika</td>
</tr>
</table>

U prethodnom primeru se moe primetiti da atribut bgcolor koji je zadat u <th> ili <td> tagu
e se prikazati umesto one boje koja se nalazi u <table> tagu. U primeru je u <table> tagu
definisana bela boja pozadine koja se vidi samo na ivicama tabele (ako se koristi Internet
Explorer), jer je u svakoj pojedinanoj eliji definisana posebna boja pozadine bgcolor
atributom. Takoe boja okvira tabele se moe promeniti pomou bordercolor atributa u
<table> tagu.

Primer 6. Boje u tabeli.


<HTML>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
<HEAD>
<TITLE>Tabela boja</TITLE>
</HEAD>
<BODY BGCOLOR="#EEEEEE">
<TABLE BORDER="2" WIDTH="100%" BGCOLOR="#FFFFFF"
BORDERCOLOR="#000000">
<TR>
<!--- COLSPAN spaja tri kolone u jednu ---->
<TD BGCOLOR="#FF0000" COLSPAN=3><BR></TD>
<TD BGCOLOR="#00FF00" COLSPAN=3><BR></TD>
</TR>
<TD BGCOLOR="#FFFF00" COLSPAN=3><BR></TD>
<TD BGCOLOR="#0000FF" COLSPAN=3><BR></TD>
</TR>
</TABLE>
</DIV>
</BODY>

14
1

</HTML>

ZADACI ZA SAMOSTALAN RAD:

Zadatak 1 -(0,5 bodova)


U Notepad-u napisati HTML kod koji prikazuje stranicu na slici.

Zadatak 2- (1 bod)
U Notepad-u napisati HTML kod koji prikazuje stranicu na slici.
irina tabele: 960 piksela, Visina tabele: 600 piksela
Visina prvog reda: 40 piksela
Visina drugog reda: 540 piksela, irina prve kolone ovog reda je 150 piksela
Visina treeg reda: 20 piksela
Boje koje HTML stranice sadri: boja prvog reda: #0033CC, boja drugog reda, - prva kolona:
#CCCCCC, druga kolona: #CC9933, boja treeg reda: #6699FF

15
1

Zadatak 3 (1,5 bod)- U Notepad-u napisati HTML kod koji prikazuje stranicu na slici.
irina tabele: 960 piksela, Visina tabele: 600 piksela
Visina prvog reda: 40 piksela
Visina drugog reda: 540 piksela, irina prve kolone ovog reda je 150 piksela
Visina treeg reda: 20 piksela
Boje koje HTML stranice sadri: boja prvog reda: #0033CC, boja drugog reda, - prva kolona:
#CCCCCC, druga kolona: #CC9933, boja treeg reda: #6699FF

16

Вам также может понравиться