You are on page 1of 5

HTML naredbe (tagovi)

<!--komentar -->

<!-komentar
-->

Znaenje
Uvod
komentar

<html>
<head>
zaglavlje
</head>
<body>
tijelo dokumenta
</body>
</html>
<html> html dokument </html>
tag <html> moe da sadri <head> i <body> ili <frameset>
argumenti: lang, dir
primjer:
<html>
<head>
<title>Hello, Web</title>
</head>
<body>
<p>Just a small document.</p>
</body>
</html>
<head> zaglavlje </head>
zaglavlje moe da sadri sljedee tagove:
<title> (required), <isindex> (deprecated), <base>,
<script>, <style>, <meta>, <link>, <object>
argumenti: profile = URI, lang, dir
primjer:
<head>
<meta http-equiv=Content-Type content=text/html;
charset=windows-1250>
<title>Bryology Directory: Page 3</title>
<link rel=previous href=page2.html>
<link rel=next href=page4.html>
<link rel=stylesheet type=text/css
href=/style/global.css>
<meta name=keywords content=bryophyte, bryology,
bryologist, moss, liverwort, hornwort>
</head>
<body> tijelo dokumenta </body>
argumenti: background = URL slike, bgcolor = #rrggbb |
ime_Boje, text="#rrggbb | ime_Boje", link="#rrggbb |
ime_Boje", alink="#rrggbb | ime_Boje", vlink="#rrggbb |
ime_Boje", onload = script, onunload = script, id, class,
style, title, lang, dir

opti oblik html dokumenta

glavni element koji sadri cijeli dokument

unutar zaglavlja definiramo naslov i meta tagove (moemo


staviti i podatke o vlasniku autorskih prava, identifikaciju autora
ili dizajnera stranice i sl.)

u tijelu dokumenta stavljamo ono to e se pokazati u prozoru


korisnikog browsera, slika koja e se koristiti za ispunjenje
pozadine, boja "papira" na kojem se naazi sadraj stranice,
boja kojom e biti ispisan obian tekst, boja hipertekstualne
veze, boja kojom e biti ispisana hipertekstualna veza u trenutku
kada korisnik na nju klikne miem, predstavlja boju ve
posjeenih hipertekstualnih veza
ako se varijabli dodjeljuje tekstualna oznaka poput imena datoteke, ta vrijednost mora biti obuhvaena navodnicima
kod numerikih veliina navodnici se izostavljaju
&#decimalna_vrijednost_znaka_u_ISO_latin_skupu_simbola
oznake za posebne znakove
(npr ~ je &#126)
&naziv_eljenog_znaka;
(npr & je &amp;, < je &lt;, > je &gt;,
neizbrisivi razmak je &nbsp;)
<br>
argumeni: clear = "left | all | right | none", id, class, style, title
primjer: This is one line.<br>This is the next.
<hr>
argumenti: align="left | right | center", noshade,
width="broj broj%", color="#rrggbb | ime_Boje",
size="vrijednost u pikselima", id, class, style, title, lang, dir

neizbrisivi razmak
prelazak u novi red
ovaj argument je namjenjen poravnanju teksta koji pluta okolo
linka unutar web stranice
vodoravna linija koja se iscrtava duz stranice
poravnanje uz lijevi rub, desni rub ili centrirano, liniju e uiniti
potpuno sivom, minimalna irina u pikselima ili procentima

prozint v1.1

primjer:
<h1>My Document</h1>
<hr>
<p> . . . </p>
Naredbe koje se koriste u zaglavlju
<title> naslov stranice </title>
naslov html dokumenta
<meta http-equiv="Content-Type"
meta tag koji predstavlja definiciju kodne stranice koja se koristi
content="text/html; charset=windows-1250">
u dokumentu
<meta name="Description"
meta tag za opis stranice
content="opis">
<meta name="Keywords"
meta tag za kljune rijei prema kojima e surferi lake nai
content="kljune rijei odvojene zarezom">
web-stranice
<meta http-equiv="Refresh"
stranica uitana u pretraivau e svakih x sekundi simultano
content=broj_sekundi>
pritiskati tipku refresh
<meta http-equiv="Refresh"
naredba koja e nakon x sekundi otvoriti (povui) neki drugi
content="broj_sekundi; url=neka_url_adresa">
html dokument
Naredbe koje utiu na strukturu stranice
Naredbe za promjenu osobina teksta
<font face="ime fonta i onjegove oznake"> tekst </font>
izbor vrste slova
argumenti: color, id, point-size, size, style, weight
<font size=+broj> tekst </font>
naredba kojom mjenjamo veliinu pisma (broj moe dobiti
pozitivnu ili negativnu vrijednost od 1 do 7)
<p> tekst </p>
stvaranje odlomka
argumenti: align="left | right | justify | center"
poravnanje uz lijevi rub, desni rub, oba ruba ili centrirano
<strong> tekst </strong>
podebljani tekst
<b> tekst </b>, <i> tekst </i>, <u> tekst </u>
tagovi za ureenje teksta redom: podebljavanje, ukoavanje i
podcrtavanje
<h1> tekst </h1>, <h2> tekst </h2>, <h3> tekst </h3>
naslovi (postoji 6 nivoa naslova)
<h4> tekst </h4>, <h3> tekst </h3>, <h6> tekst </h6>
argumenti: align="left | right | justify | center"
poravnanje uz lijevi rub, desni rub, oba ruba ili centrirano
<blockquote> tekst </blockquote>
odlomci e biti oznaeni kao citati
argumenti: cite
<address> tekst </address>
koristi se kod isticanja potpisa, adresa i drugih informacija koje
se odnose na autora dokumenta
<pre> tekst </pre>
neproporcijalno pismo (razmaci i prelasci teksta u novi red bie
argumenti: cols, width, wrap
zapameni i identino prikazani u svakom pretravai)
<a href=#ime_fusnote> rije ili reenica </a>
rije ili reenica koja je
...
opisana fusnotom
fusnota
<fn id="ime_fusnote"> tekst </fn>
biljeke o fusnoti
<center> tekst </center>
centriranje teksta ili drugih elemenata
<em> tekst </em>
naglaavanje (kosa slova ili podcrtanl)
<strong> tekst </strong>
jako naglaavanje (podebljana slova)
<cite> tekst </cite>
oznake za citat (kosa slova)
<tt> tekst </tt>
neproporcijonalno pismo
<acronym title="puno ime akronima"> akronim </acronym>
akronimi (SIPA, FTP, FBI...)
<big> tekst </big>
neto vea slova
<del> tekst </del>
izbrisani tekst
<ins> tekst </ins>
novi tekst ubaen u stari sadraj
<q> tekst </q>
tekst izmeu znakova navoda (MozillaFirefox)
<s> tekst </s>
precrtan tekst (skraenica od <strike>)
<small> tekst </small>
neto manje pismo
<sub> tekst </sub>
indeksi i drugi nie ispisan tekst
<code> tekst </code>
kod ispisan nekim programskim jezikom
<var> tekst </var>
varijabla, parametar, argument i slino
<kbd> tekst </kbd>
tekst koji korisnik mora utipkati na tipkovnici
<samp> tekst </samp>
niz znakova kojima se neto nabraja
Liste
<ol>
<ul>
pobrojana lista i nepobrojana lista
<li> prvi red
<li> prvi red
<li> drugi red
<li> drugi red
...
...
<li> n-ti red
<li> n-ti red
</ol >
</ul >
argumenti:
2

prozint v1.1

1. za <ol>: type="1 | I | i | A | a "


start="broj"

odreivanje naina kojim e se odbrojati elementi liste


omoguava da navedemo broj s kojim e biti oznaen prvi
element liste (drugaiji od jedinice)

compact
2. za <ul>: type="circle | square | disc"
compact
3. za <li>: type, value
<table> ... </table>
argumenti: align="left | right | center"
border=broj
cellpadding=vrijednost
cellspacing=broj
cols=n
backgraund, bgcolor, bordercolor, bordercolorlight,
bordercolordark, class, datapagesize, datafld, datasrc, frame,
height, id, lang, language, rules, style, title, valign, width
<caption> naslov tabele </caption>
argumenti: align="left | center | right | top | bottom", valign
<tr> ... </tr>
argumenti: align, backgraund, bgcolor, bordercolor,
bordercolorlight, bordercolordark, class, id, lang, language,
style, title, valign,
<thead> ... </thead>
<tbody> ... </tbody>
argumenti: align, bgcolor, char, charoff, valign
<td> ... </td>

odreivanje naina kojim e se odbrojati elementi liste


Tabele
definicija tabele
argument namjenjen poravnanju elementa po rubu
tabela se smijeta unutar reetke
predstavlja udaljenost kuice od ruba tablice
predstavlja razmak izmeu pojedinih kuica
odreuje broj redova u tablici (ubrzava uitavanje stranice)

dodavanje naslova tabeli (ovaj tag se pie izmeu tagova


<table> i </table>)
otvaranje novog reda

tagovi koji se piu izmeu naredbi <table> i </table> a koji


odreuju zaglavlje i tijelo tabele
otvaranje nove elije (ovi tagovi bi uvijek trebali biti izmeu
<tr> i </tr>)
argument namjenjen poravnanju elementa po rubu
iskljuiti e normalno prelamanje reenica u retku
odreivanje minimalne irine u pikselima ili u odnosu na prozor
namjenjen je okomitom poravnanju sadraja unutar kuica u tab
koristimo u sluaju da elimo kreirati kuicu koja se visinom
(rowspan) ili irinom (colspan) protee kroz podruja drugih
kuica

argumenti: align="left | center | right | justify | char"


nowrap
width="broj | vrijednost%"
valign=" top | middle | bottom "
rowspan=broj
colspan=broj

backgraund, bgcolor, bordercolor, bordercolorlight,


bordercolordark, class, height, id, lang, language, style, title
<th> ... </th>
otvaranje nove elije koja predstavlja naslov ili oznake (nekih
argumenti: align, backgraund, bgcolor, bordercolor,
kolona ili redova)
bordercolorlight, bordercolordark, class, colspan, height, id,
lang, language, nowrap, rowspa, style, title, valign, width
Hipertekstualne veze i slike
<a href="neka url adresa"> tekst </a>
hipertekstualna veza
argumenti (za <a>): title="ime",
ime predstavlja naslov koji elite da korisnik vidi
accesskey, charset, coords, datafld, datasrc, hreflang,
id, methods, name, rel, rev, shape, tabindex, target, type, urn
<a href="#ime"> tekst </a>
hipertekstualna veza se nalazi unutar istog dokumenta
...
<p id="ime"> tekst
<a name="ime"> tekst </a>
naredba koju je pametnije koristiti umjesto spomunute naredbe
<p id="ime"> tekst
<a href="datoteka.html"> tekst </a>
hipertekstualna veza na dokument koji se nalazi u istom
direktoriju
<a href="datoteka.html#ime"> tekst </a>
hipertekstualna veza na neku odreenu taku unutar drugog
dokumenta (ime dokumenta je u ciljanom dokumentu oznaen
argumentom id ili name)
<a href="poddirektorij/datoteka.html "> tekst </a>
datoteka koju traimo nalazi se u poddirektoriju direktorija koji
sadri trenutni dokument
<img src="ime_slike.ekstenzija">
ubacivanje slike koja se nalazi u istom direktoriju u kojem je i
uitan i html dokument
<img src="direktorij\ime_slike ">
ubacivanje slike (direktorij se nalazi na istom nivou kao i html
dokument)
<img src=" neka url adresa ">
ubacivanje slike u html dokument
argumenti (za <img>): alt="tekst"
tekst e biti prikazan umjesto slike u pretraivakom programu s
tekstualnim korisnikim okruenjem
3

prozint v1.1

align="top | middle | bottom | left | right",


hspace=broj, vspace=broj

nain prikazivanja teksta koji se nalazi oko slike


broj piksela za koji e slika biti udaljena od teksta koji ga okru
(s lijeve i desne strane odnosno s gornje i donje strane)
odreuje debljinu okvira za sliku u sluaju da slika predstavlja
hipertekstualnu vezu
imaju ulogu da utiu na brzinu i nain uitavanja cijele stranice
(dodjeljuje im se irina i visina slike u pikselima)
ime take unutar dokumenta
argument u tagu <img> gdje navodimo ime datoteke manje ili
lake verzije orginalne slike. Pretraivaki program e prvo
prikazati sliku koja je dodjeljena argumentu lowsrc, a nakon to
se itava stranica uita, pretraiva e se vratiti uitavanju slike
na mjestu gdje je navedena src naredba (korisno je kao lowsrc
upotrijebiti crno-bijelu kopiju orginalne obojene slike koju ste
dodijelili src argumentu)
poslije ove naredbe tekst se ponovo ispisuje po cijeloj irini
prozora (u sluaju da smo koristili align="left | right ", u <img>)
slikovne mape (odreena podruja slike predstavljaju link na
neku url addresu)
ova naredba se smijeta na kraju html dokumenta

border=broj
width=broj, height=broj
usemap="neko ime",
lowsrc="ime_slike.ekstenzija"

class, datafld, datasrc, dynsrc, hspace, id, ismap,


longdese, loop, lang, language, name, start, style, title, vspace
<br clear>
<img src="slika" alt="ime slikovne mape" usemap="#ime_A">
...
<map name="ime_A">
<area shape="poly" href="neka url adresa"
coords="broj1, broj2, broj3...">
...
</map>
argumenti: 1. za <map>: name="ranije spomenuto ime"
2. za <area>: shape="poly rect circle default"
coords
primjer oblika za poly:
coords="20, 40, 400, 40, 20, 100"
coords="20, 40, 400, 40, 20, 100, 20, 100"
coords="20, 40, 400, 40, 20, 100, 210, 150, 20, 100"
oblik za circle: coords="broja, broj2, broj3"
oblik za rect: coords="brojA, brojB, brojC, brojD"
<form> ... </form>
argumenti: action="url adresa CGI skripte na serveru" ili
action="mailto: email@domen"
method="post | get"

definira podruje slikovne mape


tip geometriskog lika linka
koordinatna podruja odvojena zarezom

broj1 i broj2 odreuju koordinate centra krunice a broj3 je


poluprenik krunice
brojA je udaljenost lijeve ivice linka, brojB donje ivice linka,
brojC desne ivice linka i brojD gornje ivice od poetka slike
Obrasci
definiranje obrasca
odreuje ta e se dogoditi sa informacijama koje je korisnik
upisao
namjenjen je odreivanju naina na koji e se sadraj obrasca
poslati na e-mail adresu ili CGI skriptu

accept, accept-charset, enctype, name, target


<input type="text" name="neko_jedinstveno_ime"
size=broj znakova>
<textarea name="neko_ime" rows=broj_redova
cols=broj_kolona> </textarea>
<input type="submit" value="tekst na tipki">

kreiranje polja za unos teksta (name- ime koje je obavezno za


svako polje, size- irina tekstualnog polja)
naredba za kreiranje okvira za unos teksta
kreiranje tipke koja ima ulogu da zapone slanje sadraja
obrasca na odredite naznaeno argumentom action, i to
metodom navedenom pomou argumenta method u naredbi
<form>
kreiranje tipke ija je uloga da sadraj svih polja u obrascu
izbrie
kruni izbornici (kad se jedna opcija odabere ni jedna druga ne
moe biti odabrana),

<input type="reset" value="tekst na tipki">


<form>
<input type="radio" name="ime_1" value="vrijednost koja
e biti dodjeljena varijabli navedenoj argumentom name"
checked> tekst
<input type="radio" name="ime_1"
value="vrijednost_2"> tekst
...
<input type="radio" name="ime_1"
value="vrijednost_N"> tekst
</form>
<form>
<input type="checkbox" name="ime_1" value="vrijednost
koja e biti dodjeljena varijabli ime_1 u sluaju da korisnik

argument checked koristi se ako elimo neku vrijednost odmah


prikazati kao odabranu opciju

kontrolni kvadratii (kada se korisniku eli omoguiti izbor od


nijedne, jedne ili vie ponuenih opcija)

prozint v1.1

odabere ovu opciju"


checked> tekst
checked- unaprijed odabrani kvadrati
<input type="checkbox" name="ime_2"
value="vrijednost_2"> tekst
...
<input type="checkbox" name="ime_N"
value="vrijednost_N"> tekst
</form>
<form>
padajui izbornici (koristi se):
<select name="neko_ime" multiple>
1. kada se korisniku eli omoguiti odabir jedne opcije od vie
<option value="ime_1" selected> tekst
ponuenih
<option value="ime_2"> tekst
2. kada se korisniku eli omoguiti izbor vie opcija (u naredbi
...
select se navede argument multiple)
<option value="ime_N"> tekst
</select>
argument selected koristimo kod one opcije za koju elimo da
</form>
unaprijed bude izabrana
Neki argumenti koji se nalaze u skoro svim tagovima
Core Attributes:
id
ID value unique to this document
class
Space-separated list of classes useful for selecting this element
for style and other purposes
style
Local style information
title
Advisory title, typically rendered by a graphical browser when
the pointer is over the element
Internationalization Attributes:
lang
Language code for this elements contents
dir
Direction (ltr or rtl) for the text
Standardni dogaaji
onclick
ondblclick
Pointer button was clicked - Pointer button was double clicked
onmousedown
onmouseup
Pointer button was pressed down - Pointer button was released
onmouseover
onmousemove
Pointer was moved into - Pointer was moved within
onmouseout
onkeypress
Pointer was moved away - Key was pressed and released
onkeydown
onkeyup
Key was pressed - Key was released
CSS (Cascading Style Sheets)
css- jekzik za opisivanje stilskih elemenata u html dokumentu
1. opis stila mozemo definirati u samom elementu (tagu) koji
treba da upotrijebimo (u ovom sluaju u pitanju je tag <b>)

<b style="CSS naredbe"> tekst </b>


a) <head>
<style type="text/css">
<!-- tagovi ili klase sa css naredbama -->
</style>
</head>
b) <head>
<link rel="stylesheet" type="text/css"
href="ime_datoteke.css">
</head>
primjeri:
i {font-color: red;}
.PlavaSlova {color: blue; font-size: 16px;}
<span class="ime_klase"> tekst </span>
#400000
#7F0000
#FF0000
#004000
#00FFFF

#007F00
#00FF00
#004040
#007F7F

#404000
#F77F00
#FFFF00
#000040
#FF00FF

ili
2. moemo ga definirati na poetku dokumenta:
a) interno
b) eksterno
ime_datoteke.css e sadravati tagove ili klase sa css naredbama

definiranje jednakih atributa za sve elemente na nekoj stranici


(sve unutar taga <i> e biti crvene boje)
definiranje klase
klasu trebamo pozvati ukoliko zelimo da je neki element u html
dokumentu koristi
dio tksta na koji elimo primjeniti definiranu klasu
RGB kodovi nekih uobiajenih boja
#00007F
tamno crvena - srednje zelena
tamno uta - srednje plava
#0000FF
srednje crvena -svijetlo zelena srednje uta - svijetlo plava
#400040
svijetlo crvena - tamno cijan
svijetlo uta - tamno ljubiasta
#7F007F
tamno zelena - srednje cijan
tamno plava-srednje ljubiasta
svijetlo cijan
svijetlo ljubiasta

prozint v1.1

You might also like