HTML 5 Kodovi

<html>, <body> i <head> TAGOVI KOJI SE UVEK MORAJU POSTAVITI.
<html> se postavlja na pocetku i na kraju svakog HTML dokumenta, na kraju ide uv

ek / pre pisanja slova </html>
<head> se uvek postavlja posle <html> i u njemu se postavljaju delovi koji nisu
direktno vidljivi na sajtu. METATAGOVI, linkovi ka CSS i ostalim fajlovima
Isto ide na kraju sa </head>.
<body> se postavlja posle <head> i u njemu se nalazi sve ono sto je vidljivo na
sajtu. I ne sme se ponavljati vise puta u toku pisanja koda. Dakle ide
<body> tekstovi i ostalo sto ide i na kraju kad se to zavrsi ide </body>
posle toga ide tag </html> i to je kraj dokumenta
PRIMER KODA
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<h1>Hello!</h1>
<p>I am HTML document.</p>
</body>
</html>
Prilikom pisanja texta koristimo <h1>naslov</h1> za postavljanje naslova teksta
a <p>text</p>. Ukoliko imamo vise naslova u istom tekstu tj podnaslova
onda koristimo za prvi naslov <h1> </h1> za drugi <h1> </h2> itd naslovi treceg
cetvrtog nivoa itd.
Svaki kod mora poceti i mora se zavrsiti ne smemo pocinjati npr sa <h1>naslov i
onda preci na kucanje teksta vec moramo zatvoriti <h1> sa </h1>.
Jedan tag moze obuhvatiti neogranicen broj drugih tagova ali se svi oni moraju z
avrsiti u okviru taga u kojem su pravljeni.
Primer: <p>Matija je <strong>iino dete</strong></p> dakle strong je poceo i zavrsi
o u u okviru pocetnog taga <p>
Postoje i samozatvarajuci tagovi koje nije potebno zatvoriti kada se otvore. jed
an od tih tagova je <br> za prelom reda u paragrafu on se moze koristiti
kao <br> ili </br> nije bitno koji god da se unese pravilno je napisano dok ako
unesemo <br>tekst</br> je nepravilno napisano.
DOCTYPE je deklaracija dokumenta i definise koji tip HTML smo koristili i kontro
lise gramatiku HTML-a tj ako smo postavili deklaraciju <!DOCTYPE html>
sto znaci da koristimo HTML 5 ne mozemo koristiti pravila iz drugih HTML
tipa 3 4 ili strict itd. Mozemo proveriti validnost dokumenta na validator.w3.o
rg
Ukoliko koristimo neki napredniji text editor ne moramo pamtiti koji doctype sta
vljamo vec samo u editoru odaberemo kojim cemo HTML pisati i sam ce postaviti od
govarajuci DOCTYPE
DOCTYPE UVEK IDE ISPRED <html> !!!!!!!!
Bitna stavka prilikom pisanja je podesiti encoding na UTF8 ovim cemo omoguciti d
a koristimo i nasa slova itd i nasu irilicu. zbog toga
u <head> delu postavljamo <meta charset="utf-8">
Atributi- sadrze dodatne informacije i nalaze se na pocetnim tagovima elemenata.
Sastoje se iz dva dela IME i VREDNOST atributa.
Pisu se na pocetnom tagu i to odvojeni razmakom od oznake tipa taga. Ime se pise
malim slovima,pa ide znak jednakosti =,
a zatim vrednost atributa pod znacima navoda. RAZMACI SU ZABRANJENI UNUTAR KONST
RUKCIJE ATRIBUTA!!!!
PRIMER: <p class="xyz">Matija je iino dete</p>
class je ime a "xyz" je vrednost atributa.
Za italic se koristi <em></em> za bold <strong></strong>.
Za karaktere iznad ili ispod tj tipovi za formule kada hocemo da stavimo 2 na kv
adrat koristimo <sup></sup>
a za formulu za npr hemiju CO2 pa to 2 da ide dole koristi se <sub> </sub>
Za horizontalnu liniju u tekstu onu koja ce sluziti da "podeli" text koristimo <
hr>
Specijalni znaci pocinju oznakom & a zavrsavaju se sa ;.
Primeri:
-(blanko tj non breaking space)
< - <
> - >
& - &
© -
» -
Postoji vise listi:
Ordered ili ti uredjene liste se odredjuju najcesce nekim tipom rednih elemenata
kao sto su brojevi, rimskim brojevi, slovima alfabeta itd
Ove liste se oznacavaju sa <ol></ol> i to je pocetni tj krajni tag a zatim unuta
r njega nove <li> od kojih je svaki nova stavka liste.
<ol>
<li>zika</li>
<li>petar</li>
</ol>
Ovim dobijamo 1. zika 2.petar postavljeno jedno ispod drugog kao lista.
Unordered ili ti neuredjene liste su one cije se stavke odredjuju najcesce nekim
random simbolima tipa kvadrat, krug, trougao itd. za razliku od
uredjenih lista ne potencira se znacaj redosleda.
Ove liste se oznacavaju sa <ul></ul> i razlikuju se od odredjenih listi samo zbo
g ovog pocetnog tj krajnjeg taga <ul></ul> inace tag koji ide
unutar ovog je i dalje <li></li>.
Definition ili ti definisane su liste cije se stavke sastoje iz dva dela definic
ije i teksta.
Koristne su kod pitanja i odgovora jer se uvek sastoje iz parova mada se ovaj ti
p lista retko koristi danas.
Pocetni krajnji kod je <dl></dl> a dok se stavke sastoje iz dva dela <dt></dt> i
<dd></dd> i to <dt> je pitanje a u <dd> se daju ponudjeni odgovori.
HTML 4-Atributi za neuredjene liste mogu biti circle(krug), disc(pun krug) i squ
are(kvadrat) to znaci da ce elementi liste biti uokvireni odredjenim tipom.
Kucanje ide ovako <ul type="square"> za pocetni kod ostali kodovi idu isto kao i
do sad.
Atributi za uredjene liste A-velika slova a-mala slova I-rimski veliki brojevi i
-mali rismki brojevi
Tabele
<table></table> za pravljenje tabele
Za red koristimo <tr></tr> dok u svakom redu unosimo celije <td></td>.
Kad zavrsimo red i broj celija u njemu zatvaramo kod i otvaramo novi red i tako
pravimo tabelu sa potrebnim brojem redova i celija unutar redova.
npr za dva reda
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
Ako hocemo da stavljamo celija sa naslovima onda koristimo tag <th></th>
<tr>
<th>ponedeljak</th>
<th>utorak</th>
</tr>
<tr>
<th>ujutru</th>
<th>uvece</th>
</tr>
Ako zelimo horizontalno da spojimo dve celije koristimo tag colspan="" u izmedju
"" pisemo koliko celija spajamo ALI ONDA BRISEMO NEPOTREBNE CELIJE
ako imamo 1 2 3 4 5 celija a hocemo da spojimo npr 2 i 3 kucamo u <td> colspan="
2" 2</td> a brisemo <td>3</td>
Ako zelimo vetrikalno da spojimo dve celije koristimo rowspan="" i opet isto kao
za spajanje po horizontali ako spajamo celije 1 i 4 brisemo u kodu
kod za celiju broj 4.
Align moe imati vrednosti left, right i center. Kao to i nazivi vrednosti kau, ravn
a se sadraj levo, desno ili po sredini elije.
Valign moe imati vrednosti top, middle, bottom i baseline.
Top postavlja sadraj u gornji deo elije, middle u sredinu, dok bottom i baseline i
maju donekle slinu namenu.
Bottom postavlja sav sadraj u dno elije, dok baseline postavlja istu zamiljenu osno
vnu liniju i na njoj lei sadraj i koristan je ako imamo
vise celija sa razlicitm velicinama fonta.
kuca se <td> align="vrednost" valign="vrednost" 1</td>
Dugacke tabele se moraju razgraniciti na head body i footer deo tabele.

<thead></thead> se koristi za oznacavanje zaglavlja tabele i unose se redovi <tr
></tr> koji cine zaglavlje i on uvek ide na pocetak.
<tbody></tbody> se koristi za unos regularnih redova i celija i u kodu se uvek s
tavljaju na kraju!!!!!
<tfoot></tfoot> se koristi za oznacavanje dna tabele i tu se unose redovi i celi
je koji idu na kraju. Iako je za oznacavanje dna tabele u kodu ide
posle <thead> koda.
Kod uvek mora ici redosledom
<thead>
<tfoot>
<tbody>
FORME
Tag za forme je <form></form>. Svaka forma bi trebalo da ima atribute action, me
thod,ID a mozemo dodati i name,enctype i target iako pomenuti atributi
nisu obavezni u HTML5 bez njih forma ne bi imala smisla.
ACTION definise kome ce podaci biti prosledjeni tj do koji skripata. Ciljana str
ana je .php .asp .jsp i druge jer se obrada serverskih parametara moze odraditi
samo iz serverskih skripata.
Ukoliko se izostavi ovaj atribut browser ce podrazumevati da ce ista strana na k
ojoj se nalazi forma obraditi podatke.
METHOD
Ovaj atribut definise na koji nacin ce podaci bit prosledjeni i postoje dve opci
je:
GET METOD- Podaci iz forme sa ovom opcijom salju se na server kroz URL i informa
cije koje se prosledjuju na ovaj nacin su transparentne i podlozne napadima
hakera. URL moze sadrzati 8192 karaktera ovaj metod nije pogodan za d
uze formulare, takodje moze doci do transliteracije ili transkripcije
i neki karakteri se mogu promeniti ili izgubiti.
POST METOD- Ovaj metod pakuje podatke unutar HTTP zahteva. Podaci nisu sifrovani
i stoga su, iako sigurniji nego u GET METOD, ipak podlozni napadima hakera tako
da
ako skupljamo personalne informacije kao sto su korisnicka imena, lo
zinke ili brojevi kreditnih kartica moramo osigurati bezbednu konekciju
do sigurnog servera.
NAME i ID- Id se koristi za uniaktno odredjivanje HTML elemenata na strani u Doc
ument Object Modelu kroz JavaScript ili za stilizaciju kroz CSS i mora biti jedi
nstven.
NAME odredjuje ime forme, prosledjuje se serveru.
ONO STO JE BITNO JESTE DA JE PREPORUKA STAVLJATI I JEDAN I DRUGI ATRI
BUT U STARTU I MOGU IMATI ISTU VREDNOST CAK JE I TO PREPORUCENO.
ENCTYPE- Odredjuje kako ce podaci
umevana vrednost ovog atributa je
Ne moramo ga postavljati
elimo da i upload fajlova enctype
biti enkodovani priliko slanja serveru. Podraz

application/x-www-form-urlencoded
i brinuti o njemu ali ono sto nas zanima ako z
mora imati vrednost multipart/from-data
TARGET- Ovaj atribut je isti kao kod linkova osim sto se kod linkova otvara stra
nica a kod formi se otvara tj pokrece strana/skripta iz ACTION atributa.
Ukoliko se koristi na formu najcesce je vrednost _blank jer tako ukazuj
emo formi da treba da se otvori srkipta iz ACTION atributa u novom prozoru.
POSTAVLJANJE FORME
PRIMER: OSNOVNA FORMA
<form action="skripta" method="post" name="forma_primer" id="forma_primer">
</form>
A ako zelmio da uploadujemo fajlove kroz formu ili da se forma posle submita otv
ara u novom prozoru/tabu unecemo i preostala dva atributa:
<form action="skripta" method="post" name="forma_primer" id="forma_primer" encty
pe="multipart/form-data" target="_blank">
</form>
Ali iako smo sve ovo uneli to je prazan okvir forme koji sam po sebi ne znaci ni
sta. Moramo uneti KONTROLE FORME koje ce prikupiti podatke.
KONTROLE FORME
Kontrole na formu su zaduzene za prikupljanje i prosledjivanje podataka. Mogu bi
ti tekstualnog tipa, radio ili check dugmici i tako dalje.
Tag koji se najcesce srece u formama je <input> i ovo je samozatvarajuci tag jer
se svi njegovi parametri podesavaju kroz atribute.
Taj isti tag se koristi za vise razlicitih kontrola ali odredjuje ga OBAVEZNI at
ribut TYPE.
PRIMER: OBICNO TEKSTUALNO POLJE <input type="text" name="color" id="color">
U primeru koda vidimo da smo postavili atribut TYPE ali i atribut NAME koji je b
itan za skripte koje primaju podatke i preko koga ce znati kako da
klasifikuju podatke. Takodje imamo ID ali ona nije obavezna. Ono sto jos mozemo
dodati od atributa je MAXLENGTH atribu kojim odredjujemo max broj
karaktera koji ce moci da se unesu u polje.
maxlength="broj"
Pored toga ranije se koristio atribut size kojim se odredjivala sirina polja a s
ada koristimo CSS opise.
<label for="color">color</label> (OVO JE CSS I OVIM SE POKAZUJE POLJE COLOR I PR
AZNO ZA UNOS TEKSTA)
<input type="text" name="color" id="color">
Bez <label></label> taga koji je dodat prikazalo bi se samo polje bez tekstualno
g dela levo od njega. Sam <label></label> ne mora biti pre <input> taga
ali se cesto tu nalazi. Ono sto jeste bitno da <label></label> poseduje FOR atri
but kojim je vezan za odredjeni input.
FOR- atribut label taga mora biti isti kao ID atribut input(ili drugog) taga.
Oba taga i input i label su inline po prirodi.
INPUT(PASSWORD)
Ovaj tag se moze isto koristiti za unos sifri(password) u tom slucaju atribute T
YPE postavljano na password a svi ostali atributi su isti kao za input text.
<input type="password" name="pass" id="pass">
Ovaj tip input polja sakriva karaktere ali ne garantuje sam po sebi sigurnost pr
iliko slanja podataka vec je za to potreban pravilno konfigurisan server i
ispravno pisanje skripata.
TEXTAREA
Ovaj tag kreira nesto vece polje za tekst i podrzava vise redova teksta. Za razl
iku od input taga ovo nije samozatvarajuci tag i zahteva pocetak i kraj.
Izmedju se unosi tekst koji ce se prikazati u kontroli priliko ucitavanja strane
. Ukoliko ga korisnik ne obrise bice prosledjen zajedno sa podacima.
PRIMER:
<textarea name="description" id="description">Lorem ipsum dolor sit amet.</texta
rea>
U browseru bi se prikazalo polje za unos teksta sa tekstom Lorem ipsum dolor sit
amet koje korisnik moze izbrisati pre unosa svog teksta.
U ovom tipu kontrole ne unosimo atribut type jer sam po sebi textarea odredjuje
namenu.
RADIO DUGMICI- Je kontrola koja je vizuelno prilicno drugacija od ranije pomenut
ih ali se i ona bazira na INPUT tagu i donekle je komplikovanija za postavljanje
.
Ono sto je specificno jeste da ne unosimo vrednosti vec samo bira
mo od ponudjenih opcija i SAMO JEDNA u grupi moze biti oznacena!!!
Za svaki izbor moramo kreirati POSEBAN input tag a da bi browser
znao da je vise razlicitih input tagova grupisano moramo im dati u
NAME atributu isto ime i zbog toga nece biti dozvoljeno da korisn
ik oznaci vise polja. Ukoliko selektuje jedno ostala ce se iskljuciti u toj grup
i.
Ovde od ranije poznati atribut TYPE mora biti postavljen na vredn
ost RADIO. ID vrednost i dalje mora biti razlicita za svaki INPUT
bez ozbzira sto je NAME atribut isti.
VALUE atribut je novina i pomocu njega prosledjujemo vrednost koj
u je korisnik izabrao.
PRIMER:
<input name="country" type="radio" id="Serbia" value="Serbia" checked="checked">
<label for="Serbia">Serbia</label>
<br />
<input name="country" type="radio" id="Romania" value="Romania">
<label for="Romania">Romania</label>
<br />
<input name="country" type="radio" id="Ukraine" value="Ukraine">
<label for="Ukraine">Ukraine</label>
Ukoliko zelimo da neka vrednost bude oznacena kad se stranica ucita postavicemo
kod nje na jednom INPUT tagu atribut CHECKED="checked"

Naravno dodaju se label tagovi zbog razlikovanja radio-polja. Tu je i nekoliko B
R tagova koji odvajaju redove jer su svi elementi ovde inline.
CHECKBOX POLJA
Ova kontrola je slicna radio-kontroli ali se razlikuje po tome sto korisnik moze
da odabere vise opcija u istoj grupi.
PRIMER:
<input name="country" type="checkbox" id="Serbia" value="Serbia" checked="checke
d">
<label for="Serbia">Serbia</label>
<br />
<input name="country" type="checkbox" id="Romania" value="Romania">
<label for="Romania">Romania</label>
<br />
<input name="country"type="checkbox" id="Ukraine" value="Ukraine">
<label for="Ukraine">Ukraine</label>
Kao sto vidimo sve je isto samo je atribut TYPE promenjen u "checkbox" i time sm
o omogucili visestruki izbor gde se vrednosti medjusobno ne iskljucuju.
SLECET(PADAJUCI MENI)
Ova kontrola omogucuje korisniku da izabere jednu od vrednosti iz padajuceg meni
ja.
Bazira se na SELECT tagu koji sadrzi atribute NAME i ID. Unutar SELECT taga nala
zi se vise OPTION tagova u kojima postavljamo moguce vrednosti:
<select name="country" id="country">
<option value="Serbia">Serbia</option>
<option value="Romania" selected="selected">Romania</option>
<option value="Ukraine">Ukraine</option>
SVAKI OPTION je jedna vrednosti mora sadrzati atribut VALUE jer je to ono sto pr
osledjujemo serveru i skriptama. Naravno mozemo izabrati vrednost koja
treba da bude selektovana prilikom ucitavanja stranice i koristimo atribut i vre
dnost selected="selected" na zeljenu opciju.
SELECT dodatak
Pomenutu select kontrolu mozemo promeniti ukoliko SELECT tagu dodamo atribut SIZ
E i kao njegovu vrednost unesemo broj i vrednost tog broja odredjuje
visinu kontrole i uvek ce toliko opcija biti prikazano.
PRIMER:
<select name="country" id="country" size="3">
</select>
U ovom primeru smo u kod dodali atribut size="3" i vise se ne pojavljuje padajuc
i meni vec samo polje sa prikazom vise vrednosti. Ukoliko je broj SIZE manji od
dostupnih vrednosti pojavice se scroll bar sa desne strane.
Pored toga mozemo omoguciti i izbor vise vrednosti dodavanjem atributa multipple
="multipple" ali da bi on funkcionisao potreban je i size atribut jer
ne moze visestruki izbor u padajucem meniju.
Primer:
<select name="country" id="country" size="3" multiple="multiple">
</select>
Ovako smo omogucili da se vise opcija selektuje ali problem je sto bi korisnik m
orao drzati CTRL taster na PC dok pravi visestruki izbor i
mora postojati napomena i upustvo o tome jer vecina korisnika nece shvatiti o ce
mu je rec. Ponekad browseri imaju problem sa ovakvom select kontrolom
potrebno je obavezno testiranje u svim browserima.
UPLOAD FAJLA
Kontrola koja ovo omogucava je opet tipa input ali sa tipom file type="file"
PRIMER:
<input type="file" name="CV" id="CV">
Ukoliko koristimo ovu kontrolu forma mora imati podesen METHOD na POST i pravila
n ENCTYPE ( sto je pomenuto ranije)
Ova kontrola je specificna po tome sto ne dozvoljava stilizaciju i ne moze se s
tilizovati CSS opsima dugme, polje i ostalo vec to zavisi od browsera.
SUBMIT DUGME
Ova kontrola sluza za prosledjivanje forme i unetih podataka serveru gde ce biti
obradjeni. Opet se koristi INPUT samo sa atributom TYPE podesenim na
SUBMIT.
PRIMER:
<input type="submit" name="submit" id="submit" value="Finish">
NAME i ID su ovde obavezni. VALUE definise ono sto ce pisati na dugmetu a ukolik
o ga ne unesemo na nekim browserima pisace SUBMIT QUERY.
Ukoliko zelimo mozemo koristiti sliku umesto obicnog dugmeta a u tom slucaju mor
amo postaviti atribut type="image" i tad su nad atributom dozvoljeni
src, width, height i alt atributi tj ponasa se kao slika.
BUTTON (DUGME)
Nesto novija kontrola je button i kod nje se postavlja tag <button></button> koj
i moze obuhvatiti vise elemenata na primer tekst i sliku.
PRIMER:
<button>
<img src="images/dugme.gif" alt="button" width="10" height="10">
Finish
</button>
HIDEN POLJE
Ovo polje nije vidljivo za korisnika i misli se na direktan prikaz u browser a u
prikazu koda stranice je ipak dostupno
ali se moze koristiti da privremeno sacuva neke podatke ali ipak tu ne treba po
stavljati osetljive podatke.
PRIMER:
<input type="hidden" name="hiddenField" id="hiddenField" value="x">
Na primer imamo formular za sugestije i komentare na nekom sajtu koji prodaje pr
oizvode i ukoliko je korisnik ulogovan priliko pristupa formi sajt moze
u skriveno polje upisati njegov ID po kome se vodi u bazi podataka a korisniku t
o nije bitno da bude vidljivo na stranici. Kada ostavi poruku i posalje
formu prosledice se i taj ID sto moze olaksati sortiranje, pracenje i uopste dal
ju obradu.
FIELDSET i LEGEND
Ukoliko zelimo da deo formulara uokvirimo i da mu damo odredjeni naslov to radim
o pomocu FIELDSET taga kojim okruzimo sve kontrole koje izaberemo a pri
tome LEGEND tag mozemo postaviti odmah po otvaranju FIELDSET taga.
PRIMER:
<fieldset>
<legend>Contact</legend>
<label>Email:<br>
<input type="text" name="email">
</label><br>
<label>Phone:<br>
<input type="text" name="phone">
</label>
</fieldset>
FIELDSET je po default vrednostima BLOCK tip elementa. Ukoliko pazljivije pogled
amo kod u ovom primeru primetimo da su LABEL tagovi postavljeni oko kontrola
u ovom slucaju input. To je drugi nacin da se postave LABEL tagovi mada preporuc
ujem da se postavljaju odvojeno i koristeci atribut FOR.
HTML5 i VALIDACIJA
Do sada je validacija uglavnom vrsena JavaScriptom ali se pojavom HTML5 jezika t
a mogucnost je ugradjena u sam HTML.
PRIMER:
<input type="password" name="password" required="required">

U ovom trenutku samo neki browseri podrzavaju ovu opciju ali bice zastupljenije
u buducnosti.
NOVE HTML5 varijante inputa
HTML verzije 5 doneo je i nove varijante INPUT kontrole a neke od njih su:
tekstualno polje za pretragu (search) type="search",
polje za datum - type="date",
polje za URL - type="url",
polje za e-mail type="email".
Nema potrebe da se objasnjavaju jer podesavaju polje tako da se pripreme za unos
odgovarajuceg sadrzaja a na sam prikaz i funkcionalnost utice to koliko
je browser sposoban da ih obradi tako da pazljivo ih koristite i testirajte!!!
HTML5 PLACEHOLDER
Jos jedna novina je PLACEHOLDER opcija koja mogucuje prikaz teksta pre korisniko
ve interakcije.Ta rec bi bila sklonjena cim korisnik klikne na polje i
krene sa unosom.
Primer:
<input type="search" name="search" placeholder="Search...">

HTML 5 Kodovi

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

HTML 5 Kodovi

Uploaded by

Copyright:

Available Formats

<html>, <body> i <head> TAGOVI KOJI SE UVEK MORAJU POSTAVITI.

<html> se postavlja na pocetku i na kraju svakog HTML dokumenta, na kraju ide uv

Dugacke tabele se moraju razgraniciti na head body i footer deo tabele.

biti enkodovani priliko slanja serveru. Podraz

kod nje na jednom INPUT tagu atribut CHECKED="checked"

<input type="password" name="password" required="required">

You might also like