Osnove Web Dizajna PDF

Web dizajn
Osnove HTML-a
Dr Nenad Kojić
Dr Dragoslav Danilović
HTML
• HyperText Markup Language
• HTML predstavlja jezik za označavanje hiperteksta i

hipermedija (teksta, slike, zvuka, videa i drugih
međusobno povezanih objekata pomoću linkova)
• HTML predstavlja tekstualnu datoteku

• Bilo koji tekst editor je prihvatljiv za izradu HTML
dokumenata
• Namenjen browser-ima koji ga dobijaju od web servera i

grafički prikazuju sadržaj sajta
Gradivne komponente jezika
• HTML dokument je sastavljen od elemenata (tagova)

– otvarajući tag: <IME_ELEMENTA>
– zatvarajući tag: </IME_ELEMENTA>
• Osim imena HTML elementa, tag čini i određeni broj atributa,
čije su vrednosti uokvirene navodnicima
• Element govori browser-u šta da uradi, a atribut kako da to
uradi
• Razlika između malih i velikih slova ne postoji (title = Title =
tiTLe), ali je bolje da budu mala
• Pri prikazivanju stranica browser-i se oslanjaju na informacije
date u tagovima
• HTML kod se realizuje redosledom kojim je i pisan
Elementi
• Element se sastoji od uparenih ili neuparenih tagova

• Upareni tagovi su oznake kojima se u HTML stranu
postavlja tekst ili neki drugi objekat
• Upareni tagovi imaju početak i i kraj (otvarajući i
zatvarajući tag)
• Ove oznake moraju da imaju simbol kojim se neki tag
počinje i simbol kojim se završava (<tag></tag>)
• Ceo tekst ili skup tagova unutar ove dve oznake se

prevodi samo u svojstvu značenja tog elementa
• Izvan taga, efekat taga ne postoji
• Svaki tag ima tačno definisan grafički izgled
• Uparene oznake su uvedene radi lakšeg praćenja i
čitanja koda
Osnovni HTML tagovi
Tagovi koji opisuju osnovnu strukturu HTML dokumenta:

– HTML
– HEAD
– BODY
• Tag <HTML> je okvir u kome se nalaze svi ostali tagovi; HTML dokument
uvek počinje tagom <HTML>, a završava se tagom </HTML>
• Tag <HEAD> uokviruje zaglavlje u kome se nalaze informacije o samom
dokumentu (naslov, opis, ključne reči, ime autora, itd.) i gde se pišu svi viši
programski script jezici (npr. Java Script)
• Sve ono što vidimo u prozoru browser-a, tj. sadržina stranice, nalazi se u
telu dokumenta koje uokviruje element <BODY>; u dokumentu sme da
postoji samo jedan par tagova <BODY> </BODY>
Naslov web strane
• Skoro svi tagovi koji su namenjeni korisniku nalaze se u

body tagu
• Jedan od retkih izutetaka je upareni tag TITLE
• On se piše u head elementu, i definiše naslov strane
• Ovaj naslov je vidljiv za korisniika i nalazi se u zaglavlju
browsera
• Obzirom da nije u telu sajta, piše se kroz tag head, a ne
body
Sintaksa - primer
• Početak i kraj HTML odeljka

<html> Ovde je cela strana </html>
• Početak i kraj zaglavlja (odmah iza html-a)

<head> Ovde je zaglavlje (ne vidi) </head>
• Početak i kraj tela stranice

<body> Ovde je telo stranice </body>
• Početak i kraj naslova strane, unutar head dela

<title> Ovde je tekst naslova (vrh) </title>
Primer web stranice
<HTML>
<HEAD>
<TITLE> Moja prva Web stranica </TITLE>
</HEAD>
<BODY>
Dobar dan!
</BODY>
</HTML>
Snimanje koda
• Kod se može pisati u bilo kom text editoru
• Preporuka je da to bude Notepad++ (http://notepad-plus-
plus.org/)
• Nakon pisanja koda, treba izabrati File/SaveAs i podesiti da tip
bude HTML
Komentari
• Komentari postoje u svakom programskom jeziku, i služe da

pomognu programerima sa napomenama i opisima koji se ostavljeni
• Komentari su delovi web stranice koji se ne interpretiraju, a samim

tim i ne prikazuju korisniku.
• Uloga komentara je lakše snalaženje i navođenje unutar

prezentacije
• Kometari su skoro obavezni kada više ljudi uređuje sajt, ili kada se
koristi PHP pristup
• Sintaksa komentara je
<! -- tekst komentara -->
Neupareni elementi
• Prazni (ne upareni) elementi nemaju svoj početak, nego se realizuju

na mestu na kome se na njih naiđe
• Obzirom da nemaju početak i kraj, deluju samo za sebe, a ne na
neke druge tagove ili sadržaje
• Sintaksa ovih tagova je <ime/>
• Najčešće korišćenu su: , <hr/>, <input/>, <img/>, …
• Tag tumači se kao “skoči” na sledeći red (u grafičkom

okruženju)
• Ova naredba je u nekim slučajevima isto što i Enter
• Horizontalne linije, za razdvajanje delova sadržaja, definišu se tagom
<hr/>
Atributi
• Pored tagova, drugi gradivni elementi u HTML-u su atributi

• Atributi pripadaju tagu, i ne mogu se pisati samostalno
• Atribut preciznije definiše način kako se tag prikazuje u
browser-u
• Atributi nisu obavezni, ali su nekada vrlo bitni i poželjni
• Različiti tagovi imaju dozvoljene različite atribute
• Imena atributa su unapred definisana jezikom, kao i njihove
vrednosti, tip i intervali, sem u slučaju stringa
• Atributi se pišu pod znacima navoda
• Jedan tag može imati više atributa
<tag atribut1=“12px” atribut2=“red” atribut3=“center”> ABC </trag>

Tag <hr/>
• On dodaje jednu horizontalnu liniju visine 1 do 2 mm, ispred i

iza koje postoji prazan red
• Moguće je podesiti visinu korišćenjem atributa SIZE="n" (n je
broj piksela), širinu pomoću atributa WIDTH="n" i poravnanje
pomoću atributa ALIGN (moguće vrednosti su LEFT, RIGHT i
CENTER)
• Dužina linije je apsolutna dužina ili procenat dužine
celog ekrana
• Primer
<hr width=“100px”/>
<hr width=“75%”/>
<hr width=“25%”/>
Atributi taga <hr/>
• Align – poravnanje linije uz levu ili desnu stranu

• Noshade – puna linija (bez senčenja)
• Size – debljina linije
• Width – dužina linije
• Primer
<hr align="center" noshade size="5" width="150px" />
Rad sa tekstom u HTML-u
Tekst sa srpskim slovima
• Obzirom da je podrazumevani kodni raspored engleski,

prikaz drugih karaktera, koji su van engleskog pisma,
mora se urediti na drugi način
• Ovo se realizuje pomoću meta taga
• Kao i drugi meta podaci, i ovaj se definiše u Head tagu, i
omogućava da se u browseru, ispravno prikazuju
posebni karakteri
• U našem slučaju to je srpska ćirilica i latinica
<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">
Primer
<html>
<head>
<title>Definisanje tipa html-a i prikaza nacionalnih karaktera</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Tekst sa srpskim slovima. <! - - Ovo je komentar - - >
Sada se vide i slova Č, Š, Đ ,Ć i Ž 
Ћирилица такође: Ч, Ш, Ђ, Ћ, Љ, Њ, Џ и остала.
</body>
</html>
Tagovi H1-H6
• Upareni tagovi <h1> do <h6> se koriste za definisanje veličine

teskta
• Iako je definisanje veličine teksta mnogo preciznije CSS-om,
skoro svi web pretraživači očekuju H tagove
• Primarna uloga H tagova je da se istaknu naslovi i podnaslovi
• Postoje tagovi H1, H2, H3, H4, H5 i H6
• Element H1 daje najveću veličinu slova, a H6 najmanju
• Svaki od ovih elemenata počinje u novom redu, a browser-i
dodaju još malo praznog mesta pre njihovog prikaza
• U okviru taga se može navesti atribut ALIGN, koji određuje

horizontalno poravnanje prikaza teksta; vrednost ovog atributa
može biti jedna od sledećih: LEFT, CENTER, RIGHT
Primer
<html>
<head>
<title>Velicina slova</title>
</head>
<body>
<h1>Ovo je velicina slova u zaglavlju H1</h1>
</body>
</html>
Kreiranje pasusa
• Tag definiše kreiranje pasusa, koji počinje u novom

redu
• U okviru taga (za kreiranje pasusa) može se navesti
atribut ALIGN, koji određuje horizontalno poravnanje
paragrafa; vrednost ovog atributa može biti jedna od
sledećih: LEFT, CENTER, RIGHT
• Ovo je pasus koji je centriran.

Primer
<html>
<head>
<title>Pasusi</title>
</head>
<body>
Ovo je prvi pasus.
Ovo je drugi pasus.
 
Ovo je treci pasus ispred kojeg je bio jedan prazan red.
 
Ovo je pasus koji je desno poravnat.

Ovo je pasus koji je centriran.
</body>
</html>
Entiteti
• Entiteti su specijalno definisane grupe karaktera, koje se

kucaju u HTML kodu, i imaju unapred definisan način
interpretacije u browser-u
• Koriste se da bi se prikazali neki karakteristični simboli
• Obzirom da se ne prikazuju kao običan tekst, počinju
simbolom & a završavaju se sa ; pa ih tako browser
prepoznaje
© ©
• space ® ®
• < < & &
• > > " "
• € € ' '
Formatiranje teksta
• Formatiranje teksta: Bold, Italic i Underline je pomoću

tagova
– tekst 
– tekst 
– tekst 
<html>
<body>
 Za tekst tipa BOLD treba koristiti tag B. 
Tagovi se mogu i ugnježdavati sa ispravnim zatvaranjem tagova
 Za tekst tipa ITALIC treba koristiti tag I 
 
 Kombinacija sva tri taga 
</body>
</html>
Tag font
• Tag font nema grafičku interpretaciju, ali se koristi da se

kroz njegove atribute formatira tekst
– 
– 
– 
• Boja može biti ili engleska reč za boju ili heksadecimalni

kod neke boje npr. green, blue, #008000, #FFFF00 ...
• Veličina može biti broj od -7 do 7
• Ime fonta je neki od definisanih fontova Times New
Roman, Arial, Helvetica...
Dodatni tagovi za
formatiranje teksta
• <cite></cite> Istaknuti citati

• <del></del> Precrtani tekst
• <q></q> Znaci navoda
• Oznake indeksa
• Oznake eksponenta
• Slova u kurzivu
• Polucrni kurziv oko slova
• <blockquote></blockquote> Citati
Boja u HTML-u
• Boja se definiše kroz atribut color, ili bgcolor

• Može biti definisana kao engleska reč (blue, yellow, green, red)
ili kao broj
• Preciznija definicija je brojna vrednost (heksadecimalna
predstava boje)
Primer
<html>
<head>
<title>Ovo je treci HTML dokument</title>
</head>
<body BGCOLOR="#FFFFAA" >


Ovo je tekst.

</body>
</html>
Rad sa listama u HTML-u
Liste
• Postoje dva tipa listi (oblika nabrajanja): sa numeracijom i bez

(neuređene)
• Tag za definisanje liste sa numeracijom je <ol></ol>
• Unutar ovog taga nabrajaju se konkretne stavke, koje se zovu
elementi liste
• Tag za svaki od elemenata liste je <li></li>
• Inicijalna numeracija je po pravilu arapskim brojevima
• U slučaju da se želi drugačiji način numeracije, koristi se tag <ol> sa
atributom type
• Primer: <ol type=”a”>, <ol type=”A”>, <ol type=”i”>, <ol type=”I”>, ...
• Definisanjem prvog slova ili broja, ostali se automatski dodaju
• Za počinjanje liste drugim brojem od 1 treba koristiti atribut start, npr.

<ol start=“5”>
Primer
<ol>
<li>Mleko</li>
<li>Šećer</li>
<li>Keks</li>
<li>Sapun</li>
</ol>
<ol start="7">
<li> pesma 1</li>
<li> pesma 2</li>
<li> pesma 3</li>
<li> pesma 4</li>
</ol>
Neuređene liste
• Za označavanje elemenata neuređene liste koristi se simbol

<ul>
• Ovaj tip označavanja se može urediti posebnim grafičkim
elementima primenom atributa type
• Primer:
<ul type=“disc”> za crnu tačku
<ul type=“square”> crni kvadrat
<ul type=“circle”> crna kružnica
• Ugneždene liste se definišu na isti način kao i liste, ali unutar
njih
Primer
<ul type="disc">
<li>Lala</li>
<li>Ruža</li>
<li>Karanfil</li>
</ul>
<ul type="circle">
<li>Supa</li>
<li>Glavno jelo</li>
<li>Dezert</li>
</ul>
<ul type="square">
<li>Mercedes</li>
<li>Audi</li>
<li>Reno</li>
</ul>
Primer ugnježdenih listi
<ul>
<ol start="1"> <li>Stan
<li>Bezalkoholna: <ul>
<ol> <li>Jednosoban</li>
<li>Čaj</li> <li>Dvosoban</li>
<li>Kafa</li> </ul>
<li>Sok</li> </li>
</ol>
</li> <li>Kuća
<li>Alkoholna: <ul>
<li>Prizemna</li>
<ol start="4">
<li>Jednospratna</li>
<li>Votka</li>
<li>Višespratna</li>
<li>Vinjak</li>
</ul>
<li>Pivo</li> </li>
</ol> </ul>
</li>
</ol>
Rad sa slikama u HTML-u
Referenciranje objekata
• Prostor na web serveru podeljen je kao i hard disk u direktorijume i

foldere.
• Da bi se održao sadržaj web strane napravljene na personalnom

računaru, koja u sebi sadrži i objekte (npr.slike) svi objekti se moraju
definisati relativnim ili apsolutnim putanjama.
• Relativna putanja se koristi kada se pozivaju objekti koji su sastavni

deo posmatranog sajta (npr. slika A koja je deo sadržaja strane
nesto.html). Putanja se bazira u odnosu na folder gde se nalazi html
stranica.
• Apsolutna putanja se koristi kada se pozivaju objekti koji su van sajta
ili na fiksnoj lokaciji (npr. slika B, koja se nalazi na drugom sajtu)
Primer
• Primer za sliku – pera.jpg, koja je u folderu A, unutar direktorijuma B

(gde je i kod stranice html stranice), a sve ovo je na C disku
• Relativna putanja (fajl koji poziva je u istoj ravni gde i folder A)

A/pera.jpg
• Apsolutna putanja (fajl koji poziva je bilo gde, pa se daje puna

putanja - izbegavati)
C:A/B/pera.jpg
www.sajt.com/slike/pera.jpg
• U slučaju da je struktura foldera kompleksnija za apsolutnu putanju

mora da se piše svaki delić putanje, dok se relativna ne menja
• Problem apsolutne putanje je promena lokacije i uređenja sajta
Slike
• Slika se definiše tagom <img />

• Ključni atribut taga <img /> je src
• Atribut src definiše putanju (source) i ime slike koja se želi prikazati
• Putanja može biti ili relativna ili apsolutna
<img src=“A/pera.jpg” />
<img src=“sajt.com/pera.jpg” />
• Veličina slike koja se prikazuje u browser-u je originalna veličina slike

• Promena prikaza veličine u browser-u, realizuje se atributima width i
height
• Na ovaj način smanjuje se samo dimenzija ali ne i “težina” slike
<img src=“pera.jpg” width=“400px” height=“200px” />
Atributi slike
• Veličina slike, definisana atributima width i height, može biti apsoluta

(u pikselima) ili relativna (definisana u % u odnosu na originalnu
veličinu slike)
• Često korišćen atribut je i alt. Ovaj atribut se koristi da bi se umesto
slike (kada postoji problem sa učitavanjem) na mestu slike prikaže
tekst definisan atributom alt.
• Atribut alt je vrlo bitan i za web pretraživače, obzirom da oni ne
razumeju sastav slike, nego sliku vide kroz tekst (definisan u alt
atributu)
• Slika može imati i atribut border, koji definiše okvir oko slike i atribut
name, koji se ne vidi, ali se koristi da viši programski jezici mogu da
prozovu sliku i izvrše neku akciju nad njom
• Atribut align se može koristiti za pozicioniranje slike
Primer
<body>
Slika 1 – Originalna slika sa atributom alt koji ispisuje tekst ako nema slike 
<img src="slike/slika1.jpeg" alt="predeli Srbije"> 
Slika 2 – Definisanje atributa za apsolutnu visinu i dužinu slike 

<img src=" slike/slika1.jpeg" height=327 width=291 alt="predeli Srbije“> 
Slika 3– Definisanje atributa za relativnu visinu i dužinu slike 

<img src=" slike/slika1.jpeg" height=25% width=105% alt="predeli Srbije"> 
Slika 4 – Definisanje atributa za poravnanje slike align 

<img src=" slike/slika1.jpeg" height=150 width=180 alt="predeli Srbije“
align=”right”> 
Slika 5 – Definisanje atributa za poravnanje slike align i imena slike 

<img src=" slike/slika1.jpeg" height=15% width=15% alt="predeli Srbije“
align=”center” name="eksterijer" border=”10”> 
</body>
Problemi sa width i heigth
• Ukoliko se skaliranje dimenzija ne uradi proporcionalno za

obe dimenzije, dobija se deformisana slika
Slika kao pozadina
• Definisanjem direktno u HTML kodu, pomoću atributa

background, dobija se efekat slike kao pozadine dela ili celog
sajta
<body background=“slika.gif">
• Definisanjem direktno u HTML kodu sa alternativom boje

<body background=" slika.gif“ bgcolor="#333333">
• Definisanje u CSS stilu (poželjno)

body {
background-image: url(“slika.gif");
background-position: 50% 50%;
background-repeat: no-repeat; }
Hiper veze - linkovi
Hiperveze
• Tag za link je <a></a>

• Između <a> i </a> nalazi se tekst ili slika koja se prikazuje korisniku
kao vidljiv deo linka
• Klikom na taj tekst ili sliku, treba da se ukaže na neki fajl ili objekat
(web stranu, sliku, video fajl, zip fajl, word dokument, ...)
• Atribut taga <a> kojim se definiše putanja i fajl na koji će se klikom na
link ukazati definisan je atributom href
• Primer 1: Link ka web strani istog sajta

<a href=“home.html”>Ovde pritisnuti da bi videli našu home stranu.</a>
• Primer 2: Link ka web strani druge web lokacije

<a href=“http://nesto.com/index.htm”>Ovde pritisnuti da bi videli sajt nesto.com .</a>
Primer
• Primer 3: Tekstualni link ka nekom fajlu
<a href=“http://www.nesto.com/web/mika.zip”> Ovde pritisnuti da bi skinuli

mika.zip sa sajta www.nesto.com </a>
• Primer 4: Link (slika) ka web strani istog sajta

<a href=“home.html”> <img src="slike/slika1.jpeg“/> </a>
Interno referenciranje
<html> (anchor)
<body>
<ol> <li> <a href="#1">HTML</a></li>
<li> <a href="#2">JavaScript</a></li>
<li> <a href="#3">PHP</a></li>
</ol>
<h3> <a name="1"> HTML</a> </h3>

Ovde ubaciti malo više teksta.
<h3> <a name="2"> JavaScript </a> </h3>
Ovde ubaciti malo više teksta.
<h3> <a name="3"> PHP</A> </h3>
Ovde ubaciti malo više teksta.
</body>
</html>
Formatiranje teksta linka
• Link ima tri faze koje se detektuju (inicijalna boja, boja u

trenutku klika, i boja nakon klika na link)
• Ove tri faze se mogu pojedinačno definisati bojom
• To se realizuje kroz tri atributa LINK, ALINK i VLINK
• Ovi atributi se mogu definisati u tagu body i tada pravilo važi
za sve linkove u strani. Takođe, definišu se i u CSS-u
Atribut Opis
Link Boja linka pre nego što se aktivira
Alink Boja linka u trenutku aktiviranja
Vlink Boja linka nakon aktiviranja

Primer
<html>
<head>
<title>Ovo je strana o linkovima</title>
</head>
<body BGCOLOR="#CCFFAA" TEXT="blue" LINK="red" VLINK="green"
ALINK="red">
<a href=“http://www.nesto.com/web/mika.zip”> Ovde pritisnuti da bi skinuli

mika.zip sa sajta www.nesto.com </a>
 Neki tekst
</body>
</html>
Link za mail
• Pravljenje linka kojim se automatski otvara Outlook Express

je istog formata kao i klasičan link, ali je u atributu href
definisana adresa primaoca sa
mailto:aaa@bbb.ccc
<a href="mailto:nenad.kojic@ict.edu.rs">Kontakt</a>
• Pored osnovne adrese mogu se dodati i ostali atributi.

Odvajaju se znakom ?, i & i nose fiksna imena promenljivih
<a href="mailto: nenad.kojic@ict.edu.rs?subject=Mail sa
sajta&body=Dobar dan">Kontakt</a>
Dodavanje slike ispred URL
adrese
<head>
<link rel="shortcut icon" href="ime.ico" />
</head>
Multimedija
Zvuk
• Za veći broj multimedijalnih fajlova, kao i za zvuk, koristi se

<EMBED> tag.
• Ovaj tag podržava uobičajene formate kao što su .wav, .mid,
.mp3, i .au.
• Primer:
<embed src="filename.ext" width="x" height="x"

autoplay="x" hidden="x" loop="x" volume="x">
</embed>
Zvuk
SRC: URL (relativna ili apsolutna putanja) do audio fajla
CONTROLS: CONSOLE tj. SMALLCONSOLE.

CONSOLE definiše 144 piksela za širinu i 60 za visinu.
SMALLCONSOLE definiše 144 piksela za širinu i 15 za visinu.
HEIGHT i WIDTH: Definišu veličinu prostora za objekat embed taga. Kod nekih
browsera je obavezan
LOOP: Definiše koliko puta se sekvenca ponavlja. Ako se ništa ne definiše,

izvršava se samo jednom
AUTOSTART: Ako je True tada se zvuk aktivira po učitavanju stranice, dok se

za False vrednost mora postaviti taster kojim korisnik upravlja
Zvuk
HIDDEN: Vrednost TRUE sakriva konzolu, dok je False prikazuje.
Upotreba HIDDEN i AUTOSTART kao TRUE postiže se efekat isti kao i

primenom BGSOUND.
VOLUME: Vrednost između 0 i 100 za definisanje nivoa zvuka.
ALIGN: LEFT i RIGHT.
HSPACE i VSPACE: horizontalni odnosno vertikalni prostor oko konzole u

pikselima.
Flash
• Flash objekat se može uključiti u HTML kod korišćenjem taga

embed
• Kao i kod drugih objekata treba definisati putanju do objekta

(sa src) dimenzije (width i heigth)
• Poželjno je postaviti kvalitet koji se očekuje (quality), tip (type)

i putanju za plagin-ove (pluginspage)
Primer:
<embed src="http://pera.com/folder/1.swf" quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"
width="568" height="32">
</embed>
Video
<html>
<body>
<object data="http://www.youtube.com/embed/W7qWa52k-nE" width="560"
height="315"></object>
<iframe src="http://www.youtube.com/embed/W7qWa52k-nE" width="560"

height="315" frameborder="0" allowfullscreen></iframe>
<embed width="420" height="315"

src="http://www.youtube.com/embed/W7qWa52knE">
</embed>
</body>
</html>
Web dizajn
Nastaviće se...

Osnove Web Dizajna PDF

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

Osnove Web Dizajna PDF

Uploaded by

Copyright:

Available Formats

Web dizajn

• HyperText Markup Language

• HTML predstavlja jezik za označavanje hiperteksta i

• HTML predstavlja tekstualnu datoteku

• Namenjen browser-ima koji ga dobijaju od web servera i

• HTML dokument je sastavljen od elemenata (tagova)

• Element se sastoji od uparenih ili neuparenih tagova

• Ceo tekst ili skup tagova unutar ove dve oznake se

Tagovi koji opisuju osnovnu strukturu HTML dokumenta:

• Skoro svi tagovi koji su namenjeni korisniku nalaze se u

• Početak i kraj HTML odeljka

• Početak i kraj zaglavlja (odmah iza html-a)

• Početak i kraj tela stranice

• Početak i kraj naslova strane, unutar head dela

• Komentari postoje u svakom programskom jeziku, i služe da

• Komentari su delovi web stranice koji se ne interpretiraju, a samim

• Uloga komentara je lakše snalaženje i navođenje unutar

• Prazni (ne upareni) elementi nemaju svoj početak, nego se realizuju

• Najčešće korišćenu su: <br/>, <hr/>, <input/>, <img/>, …

• Tag <br/> tumači se kao “skoči” na sledeći red (u grafičkom

• Pored tagova, drugi gradivni elementi u HTML-u su atributi

<tag atribut1=“12px” atribut2=“red” atribut3=“center”> ABC </trag>

• On dodaje jednu horizontalnu liniju visine 1 do 2 mm, ispred i

• Align – poravnanje linije uz levu ili desnu stranu

• Obzirom da je podrazumevani kodni raspored engleski,

<meta http-equiv="Content-Type" content="text/html;

• Upareni tagovi <h1> do <h6> se koriste za definisanje veličine

• U okviru taga se može navesti atribut ALIGN, koji određuje

• Tag <p> definiše kreiranje pasusa, koji počinje u novom

• <p align="center">Ovo je pasus koji je centriran.</p>

<p align="right">Ovo je pasus koji je desno poravnat.</p>

• Entiteti su specijalno definisane grupe karaktera, koje se

• Formatiranje teksta: Bold, Italic i Underline je pomoću

• Tag font nema grafičku interpretaciju, ali se koristi da se

• Boja može biti ili engleska reč za boju ili heksadecimalni

• <cite></cite> Istaknuti citati

• Boja se definiše kroz atribut color, ili bgcolor

<FONT face="Bookman Old Style" color="#000000" size="5">

• Postoje dva tipa listi (oblika nabrajanja): sa numeracijom i bez

• Za počinjanje liste drugim brojem od 1 treba koristiti atribut start, npr.

• Za označavanje elemenata neuređene liste koristi se simbol

• Prostor na web serveru podeljen je kao i hard disk u direktorijume i

• Da bi se održao sadržaj web strane napravljene na personalnom

• Relativna putanja se koristi kada se pozivaju objekti koji su sastavni

• Primer za sliku – pera.jpg, koja je u folderu A, unutar direktorijuma B

• Relativna putanja (fajl koji poziva je u istoj ravni gde i folder A)

• Apsolutna putanja (fajl koji poziva je bilo gde, pa se daje puna

• U slučaju da je struktura foldera kompleksnija za apsolutnu putanju

• Slika se definiše tagom <img />

• Veličina slike koja se prikazuje u browser-u je originalna veličina slike

• Veličina slike, definisana atributima width i height, može biti apsoluta

Slika 2 – Definisanje atributa za apsolutnu visinu i dužinu slike <br/>

Slika 3– Definisanje atributa za relativnu visinu i dužinu slike <br/>

Slika 4 – Definisanje atributa za poravnanje slike align <br>

Slika 5 – Definisanje atributa za poravnanje slike align i imena slike<br>

• Ukoliko se skaliranje dimenzija ne uradi proporcionalno za

• Definisanjem direktno u HTML kodu, pomoću atributa

• Definisanjem direktno u HTML kodu sa alternativom boje

• Definisanje u CSS stilu (poželjno)

• Tag za link je <a></a>

• Primer 1: Link ka web strani istog sajta

• Primer 2: Link ka web strani druge web lokacije

• Primer 3: Tekstualni link ka nekom fajlu