01 Pia HTML Podsjecanje

Programiranje
internet aplikacija
as 01
Boris Damjanovi
V_006.html
esta stranica
Kreiramo datoteku pod imenom V_006.html u
odabranom editoru
Poravnanje i format
V_006.html
<!DOCTYPE html>
<html>
<head>
<title>Poravnanje i formatiranje</title>
</head>
<body>
<p align="center">Ovo je centrirani odlomak.</p>
<p align="right"><b>Ovo je bold odlomak poravnat u desno.</b></p>
<p align="justify"><i>Ovo je italic odlomak poravnat s lijeve i
desne strane.</i></p>
</body>
</html>
Listing 1: Poravnanje i formatiranje teksta
Formatiranje teksta
V_007.html
<!DOCTYPE html>
<html>
<head>
<title>Naslovi</title>
</head>
<body>
<p><b>bold tekst</b></p>
<p><strong>strong tekst</strong></p>
<p><mark>markirani tekst (bojom pozadine)</mark></p>
<p><i>italik tekst</i></p>
<p><em>instaknuti tekst</em></p>
<p><small>mali tekst</small></p>
<p><big>veliki tekst</big></p>
<p><del>obrisan tekst</del></p>
<p><ins>unesen tekst</ins></p>
<p>A<sub>potpis</sub></p>
<p>A<sup>natpis</sup></p>
<p><u>podvucen tekst</u></p>
</body>
</html>
Listing 1: Formatiranje teksta
Boris Damjanovi
Formatiranje teksta
V_007.html
Boris Damjanovi
Kombinovanje koncepata
V_009.html
<!DOCTYPE html>
<html>
<head>
<title>Osnovni HTML elementi</title>
</head>
<body>
<h2 align="center">Naslov 2. nivoa</h2>
<hr>
<p align="left">Paragraf se sastoji od jedne ili vise recenica koje
formiraju jedinicu nekog sadrzaja. Pocetak paragrafa je
naznacen novom linijom.</p>
<hr size="8">
<p align="right">Paragraf se sastoji od jedne ili vise recenica
koje formiraju jedinicu nekog sadrzaja. Pocetak paragrafa je
naznacen novom linijom.</p>
<hr size="8" noshade>
<p align="center">
Paragraf se sastoji od jedne ili vise recenica<br /> koje
formiraju jedinicu nekog sadrzaja.<br /> Pocetak paragrafa<br /> je
naznacen novom linijom.<br /></p>
<hr width="80%">
</body>
</html>
Listing 1: Poravnanje i formatiranje teksta i naslova, sa korienjem linija
Na slijedeoj strani je uveana slika
Boris Damjanovi
Kombinovanje koncepata
V_009.html
Boris Damjanovi
Namjerno prazna stranica

Boris Damjanovi
Stranica 10
odabranom editoru
Preformatirani tekst
V_010.html
<!DOCTYPE html>
<html>
<head>
<title>Unaprijed formatirani tekst</title>
</head>
<body>
<hr>
<h1>Praznine</h1>
(tab)
(10 razmaka)
(novi red)
<hr>
<h2>Rezultati ispita</h2>
<hr>
<pre>
+---------+--------+--------+
| pismeni | usmeni | ukupno |
+--------+---------+--------+--------+
| Milan |
6
|
8
|
7
|
| Ana
|
9
|
10
|
10
|
| Goran |
7
|
5
|
5
|
+--------+---------+--------+--------+
</pre>
</body>
</html>
Listing 1: Praznine i preformatirani tekst
Boris Damjanovi
10
Preformatirani tekst
V_010.html
Boris Damjanovi
11

Boris Damjanovi
12
Stranica 11
odabranom editoru
13
Neureene liste
V_011.html
<!DOCTYPE html>
<html>
<head>
<title>Liste</title>
</head>
<body>
<ul>
<li>Kafa</li>
<li>Caj</li>
</ul>
<hr>
<ul style="list-style-type:
<li>Kafa</li>
<li>Caj</li>
</ul>
<hr>
<li>Kafa</li>
<li>Caj</li>
</ul>
<hr>
<li>Kafa</li>
<li>Caj</li>
</ul>
<hr>
<li>Kafa</li>
<li>Caj</li>
</ul>
</body>
</html>
Listing 1: Neureene liste
disc">
circle">
square">
none">
Boris Damjanovi
14
Neureene liste
V_011.html
Boris Damjanovi
15
Stranica 12
odabranom editoru
16
Ureene liste
V_012.html
<!DOCTYPE html>
<html>
<head>
<title>Uredjene Liste</title>
</head>
<body>
<ol type="1">
<li>Kafa</li>
<li>Caj</li>
</ol>
<hr>
<ol type="A">
<li>Kafa</li>
<li>Caj</li>
</ol>
<hr>
<ol type="a">
<li>Kafa</li>
<li>Caj</li>
</ol>
<hr>
<ol type="I">
<li>Kafa</li>
<li>Caj</li>
</ol>
<hr>
<ol type="i">
<li>Kafa</li>
<li>Caj</li>
</ol>
</body>
</html>
Listing 1: Ureene liste
Boris Damjanovi
17
Ureene liste
V_012.html
Boris Damjanovi
18
Stranica 12a
Kreiramo datoteku pod imenom V_012a.html u
odabranom editoru
19
Ureene liste
V_012a.html
<!DOCTYPE html>
<html>
<head>
<title>Uredjene liste - atribut start</title>
</head>
<body>
Atribut start: 10
<ol start="10">
<li>Kafa</li>
<li>Voda</li>
<li>Secer</li>
</ol>
</body>
</html>
Listing 1: Ureene liste atribut start
Boris Damjanovi
20
Ureene liste
V_012a.html
Boris Damjanovi
21
Stranica 13.
odabranom editoru
22
Opisne liste
V_013.html
<!DOCTYPE html>
<html>
<head>
<title>Opisne Liste</title>
</head>
<body>
<dl>
<dt>Kafa</dt>
<dd>- topli crni napitak</dd>
<dt>Mlijeko</dt>
<dd>- topli bijeli napitak</dd>
</dl>
</body>
</html>
Listing 1: Opisne liste
Boris Damjanovi
23
V_016.html
Stranica 16.
Kreirati datoteku pod imenom V_016.html u
odabranom editoru
Na osnovu slike, napisati HTML kod stranice.
Boris Damjanovi
24
Liste sa brojevima - ponavljanje

V_016.html
<!DOCTYPE html>
<html>
<head>
<title>Ponavljanje - liste sa brojevima 2</title>
</head>
<body>
Nastavak recepta:
<ol start="3" type="i">
<li>Isjeckajte krompir na kockice</li>
<li>Krckajte ga u slanoj vodi 15-20 minuta dok ne omeksa</li>
<li>Pomijesajte toplo mlijeko, maslac i muskatni orascic</li>
<li>Ocijedite krompir i napravite pire</li>
<li>Pomijesajte ga sa mlijecnom smjesom</li>
</ol>
</body>
</html>
Listing 1: Lista sa brojevima - vjeba br. 2
Boris Damjanovi
25

Boris Damjanovi
26
Veze - linkovi
Hiper-veza se enkodira pomou posebnog taga <a> (anchor) koji povezuje

fragment teksta u voru 1 sa adresom vora 2. Opti izgled taga za anchor je oblika
<A atribut> ...neki tekst... </A>
<a href="http://www.univerzitetpim.com">Posjetitie univerzitet PIM!</a>
Dio teksta u A tagu je nevdljiv, dok je

drugi dio koji se nalazi izmeu otvorenog i zatvorenog taga je vidljiv u itau.
Najvaniji atribut je atribut HREF koji navodi adresu resursa kojem pristupamo.
Web ita obino iscrtava polazni vor u HTML-dokumentu kao fragment teksta na
koji se moe "kliknuti", grafiki istaknut podvlaenjem i drugom bojom slova od
boje slova samog teksta.
Postoje dvije vrste veza na stranicu:

apsolutna veza,
relativna veza
Boris Damjanovi
27
Apsolutna veza
Kako bi odredili u kojem prozoru ili okviru (engl. frame)
e se otvoriti prikaz web stranice koristimo svojstvo
target.
Target atribut moe imati sljedee vrijednosti:
_blank (link sa ovom vrijednou atributa target otvara
stranicu u novom prozoru web itaa)
_self (otvara stranicu u istom okviru u kojem je i link)
_parent (otvara stranicu u nadreenom okviru okvira u
kojem se nalazi link)
_top (otvara stranicu u trenutnom prozoru u kojem se nalazi
link, zanemarujui okvire)
Boris Damjanovi
28

Boris Damjanovi
29
Veze
V_021.html
Kreirati datoteku pod imenom V_021.html u odabranom editoru
Napraviti stranicu sa apsolutnim linkom ka web sajtu univerziteta.
<!DOCTYPE html>
<html>
<head>
<title>Apsolutna veza</title>
</head>
<body>
<h1>Stranica PIM univerziteta Banja Luka</h1>
Ova veza vodi na
<a href=http://univerzitetpim.com target=_blank>PIM
univerzitet</a>
stranicu
</body>
</html>
Listing 1: Apsolutna veza
Boris Damjanovi
30
V_021.html
Izgled gotove stranice.
Provjerite stranicu u radu kliknite na vezu.
Boris Damjanovi
31

Boris Damjanovi
32
Veze ka markeru (bookmark) u

sastavu HTML stranice
Postoji i jedna vrsta linkova, koja spada u relativne linkove, a
koja korisnika vodi na tano odreeni dio iste ili neke druge
html stranice na istom domenu.
Da bismo oznaili to tano odreeno mjesto potreban nam je
ID atribut.
O ID atributu bie vie rijei u dijelu u kojem izuavamo
CSS.
Ovdje emo rei samo da je ID atribut jedinstveni
identifikator nekog html elementa, te se u cijelom web
site-u moe pojaviti samo jednom pod jednim imenom.
ID atribut moe biti dodijeljen bilo kojem html elementu.
Boris Damjanovi
33
Veze ka markeru (bookmark) u

sastavu HTML stranice
ID atribut moe se koristiti za kreiranje bookmark oznaka unutar
nekog html dokumenta.
Bookmark oznake se ne prikazuju ni na kakav poseban nain i ne
razlikuju se od ostatka teksta na stranici.
Nevidljive su itaocu.
Kreiranje bookmark oznake nam omoguuje da se na nju pozovemo
s bilo kojeg mjesta iste ili neke druge stranice na istom domenu.
Na bookmark oznaku se pozivamo preko linka koji
za vrijednost href atributa ima upravo vrijednost tog id-a kojim
smo oznaili nau bookmark oznaku, a kojem prethodi znak #.
Boris Damjanovi
34
Veze ka markeru
V_023.html
Kreirati datoteku pod imenom V_023.html u odabranom
editoru
Izvorni kod vjebe dat je na slijedeem slajdu.
Boris Damjanovi
35
Primjer 1: Veze ka markerima

<!DOCTYPE html>
<html>
<head>
<title>Link na odredjeni dio stranice</title>
</head>
<body>
<h1><a id="vrh">Naslov</a></h1>
<a href="#naslov1">Naslov 1</a><br />
<a href="#naslov2">Naslov 2</a><br />
<a href="#naslov3">Naslov 3</a>
<br />
<br />
<h2><a id="naslov1">Naslov 1</a></h2>
<p>The quick brown fox jumps over the lazy dog.The quick brown fox
jumps over the lazy dog.The quick brown fox jumps
over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
<p><a href="#vrh">Na vrh</a>
</p>
</body>
</html>
Tekst The quick brown fox jumps over the lazy dog obuhvata sva slova engleskog alfabeta.
Takve rijei se nazivaju panagami
Boris Damjanovi
36
Veze ka markeru
V_023.html
Klik na relativnu vezu u dnu stranice izaziva pomjeranje (scroll) ka vrhu stranice, ka mjestu na
kojem se nalazi marker ID=vrh.
Uoite da kada kliknete na link, na url vae html stranice lijepi se vrijednost href atributa linka
na kojeg ste kliknuli.
file:///C:/........./V_023.html#Vrh
Boris Damjanovi
37

Boris Damjanovi
38
Veze ka razliitim datotekama

V_024.html
Kreirati datoteku pod imenom V_024.html u odabranom
editoru
<!DOCTYPE html>
<html>
<head>
<title>HTML resursi</title>
</head>
<body>
<h1>HTML resursi</h1>
<p>
<a href="dokument.rar">Arhiva podataka</a>
</p>
<p>
<a href="dokument.pdf">PDF dokument</a>
</p>
<p>
<a href="dokument.doc">DOC dokument</a>
</p>
</body>
</html>
Listing 1: Veze ka drugim dokumentima
Boris Damjanovi
39
Veze ka razliitim datotekama

V_024.html
Izgled stranice u itau dat je na slici.
Radi provjere, kreirati navedene datoteke u direktorijumu
(folderu) u kojem se nalazi kod vjebe, pa provjeriti ispravnost
likova.
Boris Damjanovi
40

Boris Damjanovi
41
Formatiranje teksta
Ukoliko se posebno ne naglasi kojim oblikom slova
(fontom) elimo da bude ispisan tekst na stranici,
web ita e koristiti podrazumjevani (default)
font, a to je obino Times New Roman.
Rad sa fontovima u okviru HTML 4.0 stranice se
obavlja pomou <font> taga, dok se upotreba ovog
taga po specifikaciji HTML 5.0 ne predvia
Ovaj tag moe imati sljedee atribute: face, size i
color.
Boris Damjanovi
42
Formatiranje teksta
Ako se koriste neki rijetki i egzotini fontovi onda bi
bilo dobro navesti i nekoliko alternativnih fontova,
jedan za drugim, odvojenih zarezom.
Ako posjetilac stranice na svom raunaru nema
instaliran prvi font sa liste, ita e prikazati
pomou sljedeeg sa liste, i tako dalje.
<font face="Comic Sans MS, Arial, Courier">
Boris Damjanovi
43
Formatiranje teksta
V_026.html
odabranom editoru i unijeti kod
<!DOCTYPE html>
<html>
<head>
<title>Oblici slova-fontovi</title>
</head>
<body>
<center>
<font face="Verdana" size="3">Verdana</font><br>
<font face="Arial" size="3">Arial</font><br>
<font face="Courier" size="3">Courier</font><br>
<font face="Bedrock" size="3">Bedrock</font><br>
<font face="Times New Roman" size="3">Times New Roman</font><br>
<font face="Comic Sans MS" size="3">Comic Sans MS</font>
<p>
</center>
</body>
</html>
Listing 1: Oblici slova - fontovi
Boris Damjanovi
44
Formatiranje teksta
V_026.html
U itau se dobija slijedei ispis
Boris Damjanovi
45

Boris Damjanovi
46
Formatiranje teksta
Ostali korisni elementi za manipulaciju sa tekstom:
<code> </code>
<kbd> </kbd>
<samp> </samp>
<tt> </tt>
<var> </var>
<pre> </pre>
<em> </em>
<strong> </strong>
Izvorni kod
Ulaz sa tastature
tampa/izlaz iz nekog programa
Ranije korien umjesto KBD taga. U HTML5
verziji se ne koristi.
Definie tekst koji se koristi za varijable.
Ve spominjani preformatirani tag, koji ne
uklanja praznine.
Ve spominjani istaknuti tekst, obino italic.
Ve spominjani naglaen tekst, obino bold.
Boris Damjanovi
47
Formatiranje teksta
<abbr title="Profesor"> Prof. </abbr>
<acronym title="Post Scriptum">PS</acronym>
<address> </address>
<cite> </ cite >
Boris Damjanovi
Abrevijacija, puni tekst

skraenice
Akronim, puni tekst skraenice
nastale od poetnih slova. Ne
preporuuje se u HTML5 verziji.
Definie oblik slova za adresu.
Obino se iscrtava kao italik.
Definie oblik slova za citat.
Obino se iscrtava kao italik.
48

Boris Damjanovi
49
Na osnovu prikazane slike, kreirati web

stranicu V_038.html.
Pomo: koristiti elemente H1, H2, H3,
BLOCKQUOTE, Q, BR, SUB, B, U, I, S.
Boris Damjanovi
Samostalna vjeba
V_038.html
50
<!DOCTYPE html>
<html>
<head>
<title>Samostalna vjezba</title>
</head>
<body>
<h1>Izreke</h1>
<h2>Konfucije</h2>
<blockquote>Citanje bez razmisljanja stvara nesrecan duh,
a razmisljanje bez citanja stvara covjeka neuravnotezenim.</blockquote>
<h2>Razne izreke</h2>
<q>Nemoj dozvoliti jeziku da grmi ako ti snaga sapuce.</q> Seneka.
<br />
<q>Ono sto me ne ubije, to me ojaca.</q> Friedrich Nietzsche.
<h2>Razne poslovice</h2>
<h3>H<sub>2</sub>O</h3>
<q>Ljubav deteta je kao voda u pletenoj korpi.</q> Svicarska narodna
poslovica
<br />
<q>Voda svata opere do crna obraza.</q> Vuk Karadzic
<h3>Stih</h3>
<p><b>Istok, zapad,</b> <i>sjever, jug</i>
</p>
<p><u>put je kratak,</u> <s>put je dug.</s>
</p>
</body>
</html>
V_038.html
Listing 1: Samostalna vjezba

Boris Damjanovi
51

Boris Damjanovi
52
Boje i html
Boje se mogu definisati na dva naina:
ili preko predefinisanog engleskog naziva boje (npr."yellow" za utu
boju),
ili preko heksadecimalne RGB vrijednosti ispred koje obavezno treba
staviti simbol # (npr. #ffff00).
Znai, boje se mogu odrediti sa RGB-palete.
Vrijednost atributa boje ima opti oblik
"#cczzpp",
gdje su cc, zz i pp redom heksadecimalne vrednosti za intenzitet
crvene, zelene i plave boje.
U sluaju da se prilikom navoenja taga BODY izostave opisani
atributi, navigator im dodeljuje predefinisane vrijednosti.
Boris Damjanovi
53
Boje i html
Na primjer, ako se eli da se promijeni boja pozadine u utu tada <body>
tag treba da glasi:
<body bgcolor="#ffff00">
ili:
<body bgcolor="yellow">
ili:
<body bgcolor="rgb(255,255,0)">
(ne radi u svim browserma)
Sva tri primjera koda e dati isti rezultat.

Pored pozadine, moe se mijenjati i boja teksta, pomou text atributa.
<body bgcolor="#ffff00" text="#008000">
Boris Damjanovi
54

Boris Damjanovi
55
Rad sa fotovima
V_040.html
Boris Damjanovi
56
<!DOCTYPE html>
<html>
<head>
<title>Slova i boje (heksadekadno)</title>
</head>
<h2>Razlicite boje (heksadekadno)</h2>
<body>
<p> <font color="#FFFFFF"> Bijela - white - #FFFFFF </font></p>
<p> <font color="#C0C0C0"> Srebrna - silver - #C0C0C0 </font></p>
<p> <font color="#808080"> Siva - gray - #808080 </font></p>
<p> <font color="#000000"> Crna - black - #000000 </font></p>
<p> <font color="#FF0000"> Crvena - red - #FF0000</font></p>
<p> <font color="#800000"> Tamno crvena - maroon #800000</font></p>
<p> <font color="#FFFF00"> Tamno zuta - yellow #FFFF00</font></p>
<p> <font color="#00FF00"> Limun - lime - #00FF00 </font></p>
<p> <font color="#FFA500"> Narandza - orange - #FFA500</font></p>
<p> <font color="#008000"> Zelena - green - #008000</font></p>
<p> <font color="#00FFFF"> Boja vode - aqua - #00FFFF</font></p>
<p> <font color="#008080"> Zelenkasta - teal - #008080</font></p>
<p> <font color="#0000FF"> Plava - blue - #0000FF</font></p>
<p> <font color="#000080"> Boja mora - navy - #000080</font></p>
<p> <font color="#FF00FF"> Ruzicasta - fuchsia - #FF00FF(Fuchsia
je cvijet neobicne boje, Fuksija. Cita se fjusa.)</font></p>
<p> <font color="#800080"> Ljubicasta - purple #800080</font></p>
</body>
</html>
Listing 1: Font i nazivi boja
Boris Damjanovi
57
Boris Damjanovi
58

Boris Damjanovi
59
Tag BODY
i pozadinska slika
Da se kao pozadina stavi slika "pozadina1.jpg" body tag treba da izgleda:

<body background="pozadina1.jpg" bgcolor="#000000">
U gornjoj liniji HTML koda, moete primijetiti da postoje i background i bgcolor
tag, i to ne sluajno.
Mnogi itai posjeduju mogunost da im se iskljui automatsko uitavanje
grafike. To znai da se nee uitati ni pozadina koja je definisana u toj stranici.
Problem nastaje u sluajevima kada je tekstu dodijeljena neka svijetla boja, a
web ita ne uita pozadinu, ve i pozadina ostane bijela.
Blijeda (ili bijela) slova na bijeloj pozadini se jednostavno nee vidjeti. Zbog
toga je dobra praksa da se dodjeli neku boja i pozadini stranice tako da u gore
opisanoj situaciji slova i dalje budu itljiva.
Pojedini operativni sistemi su osjetljivi na veliinu slova. Zbog toga je najbolje
usvojiti pravilo da se nazivi slika piu doslovno.
Boris Damjanovi
60
Tag BODY i pozadinska slika

V_042.html
Boris Damjanovi
61

V_042.html
<!DOCTYPE html>
<html>
<head>
<title>Pozadina u body tagu</title>
</head>
<body background="PIM.jpg" bgcolor="#00FF00">
<h2>Pozadina</h2>
<p>
Ovo je neki tekst sa pozadinom. Pozadinska slika se ponavlja.
U HTML standardu ne postoji nacin da se ona fiksira.
Microsoft je pokusao da nametne atribut bgproperties=fixed, ali
bez uspjeha.
</p>
</body>
</html>
Listing 1: Tag BODY i pozadinska slika
Boris Damjanovi
62

V_042.html
Boris Damjanovi
63

Boris Damjanovi
64
Tag BODY i pozadina

V_043.html
Boris Damjanovi
65
Tag BODY i pozadina

V_043.html
<!DOCTYPE html>
<html>
<head>
<title>Boje pozadine i slova</title>
</head>
<body bgcolor="#ffff00" text="#ff0000">
<h1>Ovaj naslov je crven zbog atributa TEXT</h1>
<br />
<h1>
<font color="#0000ff">Ovaj naslov je plav zbog taga FONT i
atributa COLOR </font>
</h1>
</body>
</html>
Listing 1: Boje slova i pozadine
Boris Damjanovi
66

V_043.html
Boris Damjanovi
67

Boris Damjanovi
68
Komentari
Komentari se koriste da bi izvorni kod bio pregledniji.
Komentare moemo unositi bilo gdje unutar html dokumenta.
Taj tekst nee biti prikazan na stranici, tj. moi e se vidjeti samo iz
nekog editora koda.
Na ovaj nain moemo ostavljati sebi i drugima poruke unutar koda, ili
moemo jedan dio koda iskljuiti da bi provjerili kako stranica izgleda
isl.
S ovim nizom znakova otvaramo komentar: <!- S ovim nizom znakova zatvaramo komentar: -->
<!ovo je tekst koji nece biti prikazan -->
Boris Damjanovi
69

Boris Damjanovi
70
Slike (images)
HTML element za prikazivanje slike je <img />.
Ovaj tag mora imati bar jedan atribut. To je src atribut koji
definie naziv i, eventualno, lokaciju grafikog fajla koji
elimo da prikaemo u okviru svoje prezentacije.
Pri opisu lokacije dokumenta najjednostavniji sluaj je da
se dokument slike nalazi u istom direktorijumu gdje i html
stranica. Tada je dovoljno da se kao vrijednost src atributa
postaviti samo naziv odgovarajueg dokumenta.
Na primjer, da bi se prikazala slika sa imenom "slika.gif" na
html stranici tada e odgovarajui tag glasiti:
<img src="slika.gif" />

Boris Damjanovi
71
Slike (images)
Tag IMG moe imati razliite atribute koji omoguuju da se precizno opiu
poloaj, dimenzije i odnos slike prema drugim dijelovima stranice. Ti
atributi su:
Atribut ALIGN za poravnanje slike u odnosu na margine, a moe imati
vrijednosti:
za horizontalno poravnjavanje: LEFT, CENTER, RIGHT
za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM
Atributi za dimenzionisanje slike su WIDTH (irina) i HEIGHT (visina).
Atributi koji opisuju poloaj slike su HSPACE i VSPACE
Atribut koji opisuje irinu okvira slike - BORDER
Atribut koji umjesto slike daje tekstualni opis (naziv) slike ALT
Ako se nijedan od atributa ne navede slike su poravnate sa tekstom na
donju ivicu. Poloaj slike u odnosu na tekst stranice se moe definisati
ubacivanjem align atributa u <img /> tag.
Boris Damjanovi
72
Slike (images)
V_045.html
Boris Damjanovi
73
<!DOCTYPE html>
<html>
<head>
<title>Horizontalno poravnanje slika</title>
</head>
<body>
<p>
<img src="PPP.jpg" alt="PIM" width="100" height="100"
align="left" />Namjerno
pogresno referencirana slika (<b>src="PPP.jpg"</b>) izazvace
prikazivanje teksta datog
atibutom <b>alt="PIM"</b>. Pri tome se zadrzavaju vrijednosti
ostalih
atributa, cak iako je atribut SRC pogresan. Poravnata je u lijevo
pomocu atributa <b>align="left"</b>. Zahvaljujuci atributima
<b>width="100"</b> i <b>height="100"</b>, slika prikazuje u
velicini 100 puta 100 piksela (pixel).
<br />
<mark>Piksel je tacka u rasterski prikazanoj slici.</mark>
<br /> Citanje bez razmisljanja stvara nesrecan duh, a
razmisljanje bez citanja stvara covjeka neuravnotezenim. Citanje
bez razmisljanja stvara nesrecan duh, a razmisljanje bez citanja
stvara covjeka neuravnotezenim. Citanje bez razmisljanja stvara
nesrecan duh, a razmisljanje bez citanja stvara covjeka
neuravnotezenim. Citanje bez razmisljanja stvara nesrecan duh, a
razmisljanje bez citanja stvara covjeka neuravnotezenim.
</p>
<hr />
...
Nastavak na slijedeoj stranici...
Boris Damjanovi
74
...
<p>
<img src="pim.jpg" alt="PIM" width="100" height="100"
align="right" />
Ova slika ima ispravno zadan atribut <b>src="pim.jpg"</b>, zbog
cega je potpuno prikazana. I ovdje se koriste atributi
<b>width="100"</b> i <b>height="100"</b>, za
prikaz u velicini 100 puta 100 piksela (pixel). Ova slika je
poravnata u desno pomocu atributa <b>align="right"</b>.
<br />
Citanje bez razmisljanja stvara nesrecan duh, a razmisljanje bez
citanja stvara covjeka neuravnotezenim. Citanje bez razmisljanja
stvara nesrecan duh, a razmisljanje bez citanja stvara covjeka
neuravnotezenim. Citanje bez razmisljanja stvara nesrecan duh, a
razmisljanje bez citanja stvara covjeka neuravnotezenim. Citanje
bez razmisljanja stvara nesrecan duh, a razmisljanje bez citanja
stvara covjeka neuravnotezenim.
</p>
</body>
</html>
Nastavak sa prethodne stranice
Boris Damjanovi
75
Boris Damjanovi
76

Boris Damjanovi
77
Tabele
HTML tabele se sastoje iz redova i kolona.
Na presjeku redova i kolena nalaze se elije.
elija moe sadrati 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 (engl.
cell) u redu.
Boris Damjanovi
78
Tabele
Tabele se definiu pomou taga <table>.
Tabele se dalje dijele u redove pomou <tr> taga
(Table Row).
Redovi se dalje dijele u elije sa podacima (Table
Data) pomou <td> taga.
Neki red tabele takoe moe biti podijeljen i u
zaglavlja pomou <th> taga (Table Headings).
Veina itaa podrazumjevano prikazuje zaglavlja
centrirano i zadebljanim slovima (bold).
Boris Damjanovi
79
Tabele
V_052.html
Boris Damjanovi
80
<!DOCTYPE html>
<html>
<head>
<title>Tabela prisustva</title>
</head>
<body>
<table>
<tr>
<th>Prezime</th>
<th>Ime</th>
<th>Prisustvo</th>
</tr>
<tr>
<td>Vidovic</td>
<td>Dejan</td>
<td>5</td>
</tr>
<tr>
<td>Sofric</td>
<td>Aleksandar</td>
<td>4</td>
</tr>
<tr>
<td>Sibarevic</td>
<td>Jelena</td>
<td>4</td>
</tr>
<tr>
<td>Curic</td>
<td>Kristijan</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Listing 1: Primjer tabele
Boris Damjanovi
81
Tabele
Boris Damjanovi
82

Boris Damjanovi
83
Tabele - atributi
Tabela se opisuje uz pomo sloenog taga table koji moe
sadrati vie atributa:
BORDER koji opisuje irinu spoljanjeg okvira tabele.
Ako je naveden, Tag Border odreuje kolika e biti linija koja
uokviruje kako sam sadraj elije, tako i kompletnu tabelu.
Vrijednost 1 predstavlja irinu linije od jednog piksela,
odnosno jedne take. Internet Explorer podrazumjevano ne
crta ivice.
CELLSPACING koji opisuje irinu prostora koja razdvaja

dvije elije. Nije podran u HTML5 standardu;
CELLPADDING koji opisuje prostor izmeu ivica elije i
njenog sadraja;
WIDTH koji opisuje ukupnu irinu tabele.
Boris Damjanovi
84
Tabele - linije i razmaci

V_053.html
Boris Damjanovi
85
<!DOCTYPE html>
<html>
<head>
<title>Tabele - linije i razmaci</title>
</head>
<body>
<p>Bez navodjenja cellspacing atributa:</p>
<table border="1">
<tr>
<th>Prezime</th>
<th>Ime</th>
</tr>
<tr>
<td>Gak</td>
<td>Milos</td>
</tr>
</table>
...
...
Listing 1: Nastavak na slijedeoj strani...
Boris Damjanovi
86
...
...
<p>Sa cellspacing atributom 10:</p>
<table border="1" cellspacing="10">
<tr>
<th>Prezime</th>
<th>Ime</th>
</tr>
<tr>
<td>Gak</td>
<td>Milos</td>
</tr>
</table>
<p>Sa cellspacing atributom 0:</p>
<table border="1" cellspacing="0">
<tr>
<th>Prezime</th>
<th>Ime</th>
</tr>
<tr>
<td>Gak</td>
<td>Milos</td>
</tr>
</table>
<p><b>Note:</b> Cellspacing nije podran u HTML5 standardu.</p>
</body>
</html>
Listing 1: .. nastavak sa prethodne strane
Boris Damjanovi
87
Tabele - cellspacing
V_053.html
Boris Damjanovi
88

Boris Damjanovi
89
Tabele Colspan i rowspan

V_057.html
Boris Damjanovi
90
<!DOCTYPE html>
<html>
<head>
<title>Tabele - colspan i rowspan</title>
</head>
<body>
<p>Primjer za rowspan</p>
<table border="1">
<tr>
<td rowspan="3">Informaticki predmeti</td>
<td>Uvod u WWW</td>
</tr>
<tr>
<td>Baze podataka</td>
</tr>
<tr>
<td>Uvod u programiranje Android uredjaja</td>
</tr>
</table>
<p>Primjer za colspan</p>
<table border="1">
<tr>
<th>Mjesec</th><th>Usteda</th>
</tr>
<tr>
<td>Januar</td><td>100</td>
</tr>
<tr>
<td>Februar</td><td>100</td>
</tr>
<tr>
<td colspan="2">Suma: 200</td>
</tr>
</table>
<p>Probajte za vjezbu da unesete razicite vrijednosti za
rowspan i colspan</p>
</body>
</html>
Boris Damjanovi
Listing 1: Colspan i rowspan
91
Tabele Colspan i rowspan

V_057.html
Boris Damjanovi
92

Boris Damjanovi
93
Tabele i boje pozadine

Za definisanje boja pozadina, kako tabela tako i
redova i pojedinih elija, moe da se koristi bgcolor
atribut u okviru <table>, <tr> i <td> tagova.
Boris Damjanovi
94

V_059.html
Boris Damjanovi
95
<!DOCTYPE html>
<html>
<head>
<title>Tabele i boja pozadine</title>
</head>
<body>
<p>Boje pojedinih celija</p>
<table>
<tr>
<th>Smjer</th>
<th>Prosjecna ocjena</th>
</tr>
<tr>
<td bgcolor="#FF0000">Infromatika</td>
<td bgcolor="#00FF00">8.54</td>
</tr>
</table>
<p>Boja reda</p>
<table>
<tr bgcolor="#FF0000">
<th>Smjer</th>
<th>Prosjecna ocjena</th>
</tr>
<tr>
<td>Ekonomija</td>
<td>7.35</td>
</tr>
</table>
</body>
</html>
Damjanovi
Listing 1: Tabele Boris
boje
pozadine
96

V_059.html
Boris Damjanovi
97

Boris Damjanovi
98
Tabele - visina i irina

Da bi tabela imala odgovarajue dimenzije koriste se
atributi height i width.
Vrijednost ovih atributa se kao i kod <img> taga moe
zadati ili u pikselima ili u procentima veliine prozora
HTML web itaa.
Zadavanje visine u procentima bez pomoi CSS-a ne
funkcionie, dok irinu moemo zadavati na ovaj
nain.
Treba napomenuti da se korienje ova dva taga u
HTML5 standardu ne preporuuje.
Boris Damjanovi
99

V_061.html
Boris Damjanovi
100
<!DOCTYPE html>
<html>
<head>
<title>Tabele - visina i sirina</title>
</head>
<body>
<p>Zadavanje visine u procentima bez pomoci CSS-a ne funkcionise,
dok sirinu mozemo zadavati na ovaj nacin.</p>
<table border="2" height="30%" width="80%">
<tr>
<th>Red:</th>
<th>Green:</th>
<th>Blue:</th>
</tr>
<tr>
<td>Crvena</td>
<td>Zelena</td>
<td>Plava</td>
</tr>
</table>
<p>Zadavanje visine i sirine u pikselima funkcionise.</p>
<table border="2" height="200px" width="500px">
<tr>
<th>Red:</th>
<th>Green:</th>
<th>Blue:</th>
</tr>
<tr>
<td>Crvena</td>
<td>Zelena</td>
<td>Plava</td>
</tr>
</table>
</body>
</html>
Boris Damjanovi
Listing 1: Tabele - visina
i irina
101

V_061.html
Boris Damjanovi
102
103
Tabela kao meni

V_067.html
Razliciti browseri esto na razliite naine
interpretiraju HTML komande za dimenzije elija.
Da bi osigurali ispravno prikazivanje tabela, prije
pojave CSS-a developeri su koristili providne slike.
U nastavku emo pomou tabela kreirati jedan meni.
Za kreiranje ovog menija, koriena je providna slika
pod nazvom 1.gif sa dimenzijama 1x1 piksel. Da se
ne bi pojavjivali runi procjepi, korien je
style="display: block" atribut img elementa.
Boris Damjanovi
104
Tabela kao meni

V_067.html
Boris Damjanovi
105
<!DOCTYPE html>
<html>
<head>
<title>Tabela kao meni</title>
</head>
<body>
<h2>Tabela kao meni</h2>
<p>
Razliciti browseri cesto na razlicite nacine interpretiraju HTML
Prvi dio...
komande za dimenzije celija. Da bi osigurali ispravno prikazivanje
tabela, prije pojave CSS-a developeri su koristili providne slike.<br />
Za kreiranje ovog menija, koriscena je providna slika pod nazvom
<b>1.gif</b>
sa dimenzijama 1x1 piksel. Da se ne bi pojavjivali ruzni procjepi,
koriscen je style="display: block" atribut img elementa.
</p>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="146" bgcolor="#C0C0C0"><img border="0" src="slike/1.gif"
style="display: block" width="1" height="1" /></td>
</tr>
<tr>
<td><img border="0" src="slike/1.gif"
</tr>
<tr>
<td align="right" bgcolor="#5C6BC0" height="20";=""><a
href="http://www.google.com"> <b> <font face="Arial"
color="#ffffff" size="2">pocetna</font>
</b></a></td>
</tr>
...
Boris Damjanovi
106
Tabela kao meni

V_067.html
Drugi dio...
<tr>
<td height="1" bgcolor="1A237E"><img src="slike/1.gif"
</tr>
<tr>
color="#ffffff" size="2">o nama</font>
</b></a></td>
</tr>
<tr>
</tr>
<tr>
color="#ffffff" size="2">marketing sluzba</font>
</b></a></td>
</tr>
<tr>
</tr>
Boris Damjanovi
107
Tabela kao meni

V_067.html
Trei (zavrni) dio
...
<tr>
color="#ffffff" size="2">kontakt</font>
</b></a></td>
</tr>
<tr>
<td height="1"><img src="slike/1.gif"
</tr>
<tr>
<td height="1" bgcolor="#C0C0C0"><img src="slike/1.gif"
</tr>
</table>
</body>
</html>
Boris Damjanovi
108
Tabela kao meni

V_067.html
Boris Damjanovi
109

Boris Damjanovi
110

Boris Damjanovi
111
Elementi DIV i SPAN

V_071.html
Elementi <div> i <span> dozvoljavaju grupisanje vie raziitih elemnata u
sekcije i podsekcije na nekoj stranici.
Sami po sebi ovi elementi ne mijenjaju vizuelni izgled stranice.
Meutim, esto se koriste sa CSS-om ili sa drugim atributima da se
cijeloj grupi promjeni neko svojstvo.
Element <div> kreira logike odjeljke u HTML-u. Ovaj element se odnosi
na blokove i moe da se koristi za grupisanje drugih blokova.
Omoguava nam da primjenimo neko svojstvo na cijelu grupu koja
moe da obuhvati vie linija.
Element <span> kreira logike odjeljke u okviru jedne linije u HTML-u.
Sa oba elementa mogu da se koriste atribut align, CSS i novi globalni i
event atributi.
Boris Damjanovi
112
Elementi DIV i SPAN

V_071.html
odabranom editoru.
Boris Damjanovi
113
Elementi DIV i SPAN

V_071.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Elementi DIV i SPAN</title>
</head>
<body>
<h3>Ovo je neki naslov</h3>
<p>Ovo je neki tekst.</p>
<div align="right">
<h3>Ovo je neki naslov u div elementu</h3>
<p>Ovo je neki tekst u div elementu.</p>
</div>
<hr />
<p>Moja majka ima <span style="color: blue">plave</span> oi a
moj otac ima <span style="color: #996600">smee</span> oi.
</p>
</body>
</html>
Boris Damjanovi
Listing 1: Elementi DIV i SPAN
114
Elementi DIV i SPAN

V_071.html
Boris Damjanovi
115

Boris Damjanovi
116
Zadatak za ponavljanje
V_076.html
Praksa je pokazala da se tabele koje se zadaju
pomou HTML-a nejednako prikazuju u razliitim
browserima.
Zbog toga su se prije pojave CSS-a koristile dvije
tehnike da se nadvlada rat koji je trajao (i jo traje)
meu razliitim proizvoaima.
Preporuljivo je koristiti transparentne slike koje
ograniavaju minimalnu irinu neke elje (reda),
kao i ugnjedene tabele odnosno tabele unutar
tabela.
Boris Damjanovi
117
118
V_072.html
Za pooetak emo kreirati tabelu sa jednim redom i dvije elije.

Lijeva elija e posluiti za dranje menija nae web stranice, a desna za
sadraj.
Boris Damjanovi
119
Studentski internet radio PIM

V_072.html
Poto pomou istog HTML koda nije mogue obojiti liniju koja ini ivicu
tabele (tag bordercolor nije standardan i itai ga razliito interpretiraju), u
desnu eliju emo ugnijezditi jo jednu tabelu pomou koje emo da
iscrtamo ivice.
Ugnjedena tabela e imati tri reda sa po dvije elije.
Boris Damjanovi
120

V_072.html
odabranom editoru.
Boris Damjanovi
121

V_072.html
<!DOCTYPE html>
<html>
<head>
<title>Online PIM radio stanica</title>
</head>
<body background="slike/motiv_plavi.gif">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="146" bgcolor="#003399">
<font face="verdana" size="2" color="#ffffff">

<b>Meni</b></font>
</td>
<td>


<tr>

<td width="100%" height="1" bgcolor="#003399"><img
src="slike/1.gif" style="display: block" /></td>

<td width="1" height="1" bgcolor="#003399"><img
</tr>
...
Boris Damjanovi
Listing 1: Studentski radio prvi dio
122

V_072.html

<tr>
<td width="100%">
abcd<br />
efgh</td>
<td width="1" bgcolor="#003399"></td>
</tr>

<tr><td width="100%" bgcolor="#003399"><img src="slike/1.gif"
style="display: block" /></td>
<td width="1" bgcolor="#003399"></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Listing 1: Studentski radio drugi dio
Boris Damjanovi
123

V_072.html
Boris Damjanovi
124

V_072.html
Pozadinska slika je kreirana kao transparentni GIF
veliine 6x6 piksela:
Ova slika se u HTML-u podrazumjevano ponavlja

cijelom povrinom stranice, zahvaljujui emu kreira
interesantan efekat.
Boris Damjanovi
125

Boris Damjanovi
126
Ugradnja menija
V_073.html
U primjeru 67 kreirali smo interesantan meni sa
slijedeim stavkama:
Boris Damjanovi
127
Ugradnja menija
V_073.html
U primjeru 72 u lijevom sidebar-u smo komentarima
oznaili mjesto na kom treba da se pojavi meni. Sada
emo kombinovanjem ova dva zadatka dobiti novu
stranicu. U lijevu eliju treba ubaciti kompletnu
tabelu koja predstavlja meni (koncept tabela unutar
tabele)
Boris Damjanovi
128
Ugradnja menija
V_073.html
odabranom editoru.
Boris Damjanovi
129
<!DOCTYPE html>
<html>
<head>
<title>Online PIM radio stanica</title>
</head>
<body background="slike/motiv_plavi.gif">
<tr>
<td width="146" bgcolor="#003399" valign="top">
<font face="verdana" size="2" color="#ffffff">

<tr>
<td width="146" bgcolor="#C0C0C0"><img border="0"
src="slike/1.gif"
</tr>
<tr>
<td><img border="0" src="slike/1.gif"
</tr>
<tr>
color="#ffffff" size="2">pocetna</font>
</b></a></td>
</tr>
<tr>
</tr>
<tr>
color="#ffffff" size="2">o nama</font>
</b></a></td>
</tr>
...
Listing 1: Studentski radio dodavanje menija
Boris Damjanovi
130
<tr>
</tr>
<tr>
color="#ffffff" size="2">marketing sluzba</font>
</b></a></td>
</tr>
<tr>
</tr>
<tr>
color="#ffffff" size="2">kontakt</font>
</b></a></td>
</tr>
<tr>
<td height="1"><img src="slike/1.gif"
</tr>
<tr>
<td height="1" bgcolor="#C0C0C0"><img src="slike/1.gif"
</tr>
</table>
</font>
</td>
...
Boris Damjanovi
131
<td>


<tr>

<td width="100%" height="1" bgcolor="#003399"><img

<td width="1" height="1" bgcolor="#003399"><img
</tr>

<tr>
<td width="100%">
<b>
Ovo je imaginarna prezentacija<br />
studentske radio stanice!
<p>
Ovdje treba da unesemo jos mnogo<br />
mnogo podataka!
</p>
</b>
</td>
<td width="1" bgcolor="#003399"></td>
</tr>

<tr><td width="100%" bgcolor="#003399"><img src="slike/1.gif"
style="display: block" /></td>
<td width="1" bgcolor="#003399"></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Boris Damjanovi
132
Ugradnja menija
V_073.html
Boris Damjanovi
133

Boris Damjanovi
134
lanak
V_074.html
odabranom editoru.
Boris Damjanovi
135
lanak
V_074.html
Mogunost prikazivanja jedne tabele unutar druge moe da se iskoristi za
kreiranje zanimljivih efekata. Iskoristiti navedenu mogunot radi
samostalnog kreiranja lanka.
Primjer 73: Samostano kreirati lanak na osnovu prikazane slike
Boris Damjanovi
136
<!DOCTYPE html>
<html>
<head>
<title>Clanak sirine 200 piksela</title>
</head>
<p>
Pomou tabela unutar tabela,<br /> kreirati prostor za lanak
</p>
<table border="0" cellpadding="5" cellspacing="0" width="100%"
height="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" >
<tr bgcolor="#003399">
<td width="200">
<tr>
<td><font size="2" color="ffffff"><b>Naslov
lanka</b></font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" cellpadding="2" cellspacing="0"
width="212" bgcolor="FFFFFF">
<tr>
<td>Ovdje treba unijeti tekst lanka proizvoljne
dune.
Ovdje treba unijeti tekst lanka. Ovdje treba
unijeti tekst
lanka. Ovdje treba unijeti tekst lanka. Ovdje
treba unijeti tekst lanka. Ovdje treba unijeti
tekst lanka.</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Boris Damjanovi
137
Listing 1: Zadatak za samostalni rad - lanak
138
irina kolona
V_dd200.html
Kreirati datoteku pod imenom V_dd200.html u
odabranom editoru.
Boris Damjanovi
139
irina kolona
V_dd200.html
<html>
<head>
<title>irina kolone 1</title>
</head>
<body>
<p>Prva tabela</p>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Januar</td>
<td>Hladno!</td>
</tr>
<tr>
<td>Februar</td>
<td>Snijeg!</td>
</tr>
</table>

Listing 1: Prvi dio koda

Boris Damjanovi
140


<p>Druga tabela, sa providnim gif slikama. </p>
<p>Ovakve slike su se cesto koristile prje pojave CSS-a.
Prema konvenciji, nije se navodila sirina celija tabela, vec su
njihove dimenzije odredjivane pomocu slika koje su nosile nazive
spacer.gif, transparent.gif, 1x1.gif itd.</p>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="slike/300x1.gif"/></td>
<td><img src="slike/100x1.gif"/></td>
</tr>
<tr>
<td>Januar</td>
<td>Hladno!</td>
</tr>
<tr>
<td>Februar</td>
<td>Snijeg!</td>
</tr>
</table>
</body>
</html>
ListingBoris
1:Damjanovi
Prvi dio koda
141
irina kolona
V_dd200.html
Rezultat u IE6
142
irina kolona
V_dd200.html
Rezultat u Chrome-u
143
Spacer gif
V_dd201.html
Kreirati datoteku pod imenom V_dd201.html u
odabranom editoru.
Boris Damjanovi
144
Spacer.gif
V_dd201.html
<html>
<head>
<title>Spacer gif</title>
</head>
<body>
<p>Spacer gif slike su se koristile i za druge interesantne efekte.
</p>
<br /><img hspace="1" src="slike/1.gif">
Ovaj dio teksta je odmaknut 3 piksela od pocetka - po
jedan piksel sa svake strane slike i sirina same slike (1px)
</body>
</html>
Listing 1: Prvi dio koda
Boris Damjanovi
145
Spacer.gif
V_dd201.html
Rezultat u IE6
146
Spacer gif
Sutina prethodnih vjebi nije u tome da nauimo
neke stare tehnike, ve da shvatimo znaaj CSS-a
147

01 Pia HTML Podsjecanje

Uploaded by

Document Information

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 Pia HTML Podsjecanje

Uploaded by

Copyright:

Available Formats

Programiranje

Namjerno prazna stranica

Namjerno prazna stranica

Liste sa brojevima - ponavljanje

Namjerno prazna stranica

Hiper-veza se enkodira pomou posebnog taga <a> (anchor) koji povezuje

Dio teksta u A tagu je nevdljiv, dok je

Postoje dvije vrste veza na stranicu:

Namjerno prazna stranica

Namjerno prazna stranica

Veze ka markeru (bookmark) u

Veze ka markeru (bookmark) u

Primjer 1: Veze ka markerima

Namjerno prazna stranica

Veze ka razliitim datotekama

Veze ka razliitim datotekama

Namjerno prazna stranica

<font face="Comic Sans MS, Arial, Courier">

Namjerno prazna stranica

<abbr title="Profesor"> Prof. </abbr>

<acronym title="Post Scriptum">PS</acronym>

<cite> </ cite >

Abrevijacija, puni tekst

Namjerno prazna stranica

Na osnovu prikazane slike, kreirati web

Listing 1: Samostalna vjezba

Namjerno prazna stranica

Sva tri primjera koda e dati isti rezultat.

<body bgcolor="#ffff00" text="#008000">

Namjerno prazna stranica

Namjerno prazna stranica

Da se kao pozadina stavi slika "pozadina1.jpg" body tag treba da izgleda:

Tag BODY i pozadinska slika

Tag BODY i pozadinska slika

Tag BODY i pozadinska slika

Namjerno prazna stranica

Tag BODY i pozadina

Tag BODY i pozadina

Tag BODY i pozadinska slika

Namjerno prazna stranica

<!ovo je tekst koji nece biti prikazan -->

Namjerno prazna stranica

<img src="slika.gif" />

Namjerno prazna stranica

Namjerno prazna stranica

CELLSPACING koji opisuje irinu prostora koja razdvaja

Tabele - linije i razmaci

Namjerno prazna stranica

Tabele Colspan i rowspan

Tabele Colspan i rowspan

Namjerno prazna stranica

Tabele i boje pozadine

Tabele i boje pozadine

Tabele i boje pozadine

Namjerno prazna stranica

Tabele - visina i irina

Tabele - visina i irina

Tabele - visina i irina

Namjerno prazna stranica

Tabela kao meni

Tabela kao meni

Tabela kao meni

Tabela kao meni

Trei (zavrni) dio