HTML Osnove

HTML OSNOVE
Šta je HTML?
 HTML je jezik za opisivanje web strana
 HTML - Hyper Text Markup Language
 Markup language je skup tagova
HTML tagovi
 Tag je ključna reč okružena sa < i >, npr. <html>
 Tagovi su najčešće u paru, npr. <p> i </p>
 Prvi je otvarajući tag (opening tag), a drugi zatvarajući tag (closing tag), ili početni tag i završni tag (start i end
tag)
 Ne razlikuju se velika i mala slova – preporuka je da se koriste mala slova
HTML dokument = Web strana

 Web browser čita HTML dokument i prikazuje ga kao web stranu
 Ime HTML dokumenta se završava sa ektenzijom .htm ili .html
HTML elementi (Elements)
 HTML element je sve od html-start taga do html-end taga
 Neki HTML elementi nemaju sadržaj i zatvaraju se u start tagu
 Većina HTML elemenata mogu da i maju dodatne atribute
 HTML elementi mogu se ugnježdavati jedan u drugog.
HTML atributi (Attributes)

 Atributi obezbeđuju dodatne informacije o elementu
 Uvek se navode u start tagu
 Pišu se u obliku imeatributa="vrednostatributa"
Naslov se piše unutar zaglavlja.
Vežba 1:
<!DOCTYPE html> je deklaracija koja definiše da je ovaj dokument HTML5 dokument.

Ako želite da u dokumentu (web stranici) koristite našu ćirilicu i latinicu onda u zaglavlje treba da dodate meta tag za
to:
Naslovi i pasusi u HTML-u
U HTML-u se za pisanje naslova i podnaslova koriste tagovi <h1> … </h1>, <h2> … </h2>, do <h6> … </h6>, a <p> </p>
tag za pisanje pasusa.
Koriste se i <b> </b> tag za podebljan tekst, <i> </i> tag za iskošen tekst i <u> </u> tag za podvučen tekst.
Primer:
<br> - tag za prazan red, <sup> </sup> - tag za podignut tekst, <sub> </sub> - tag za spušten tekst.
<! Neki komentar > - ovako se piše komentar u HTML-u
Izgled u browser-u:
Slike u HTML-u
Za prikaz slike u HTML-u koristi se <img> tag. To je tag koji nema zatvarajući tag.
Najbitniji atributi ovog taga su:
 src – adresa slike
 alt – alternativni tekst koji se pojavljuje ako se slika ne prikaže
 width – širina slike u pikselima
 height – visina slike u pikselima
Primer1: Kada su html fajl i slika u istom folderu.
Primer2: Kada su html fajl i slika u različitim folderima (svako u svom folderu…)
Primer slike u HTML-u:
Izgled u browser-u:
Linkovi u HTML-u
Linkovi predstavljaju vezu od jednog web resursa do drugog. Pomoću njih možemo povezati naše stranice (npr. ako
imamo meni: početna, o nama, galerija, kontakt itd).
HTML linkovi mogu upućivati na:
 neku stranicu u okviru sajta,
 neki drugi sajt,
 sliku,
 audio ili video klip,
 dokumenta i
 slične web resurse.
Za povezivanje dokumenata u HTML-u koriste se linkovi (hiperlinkovi). Tag za link je <a> </a> tag.
Najvažniji atribut ovog taga je href atribut. Vrednost ovog atributa je adresa dokumenta koji se otvara kada se klikne
na element (tekst, dugme, slika, lista, stavku menia...) unutar a taga. Adrese koje se koriste u href atributu mogu biti
relativne i apsolutne.
<a href=”link”> Naziv linka </a>
Primeri linkova:
 do drugog sajta <a href=http://www.google.rs>Google</a>;

 do neke strane u okviru sajta <a href=”o-nama.html”>O nama</a>;
 do neke slike <a href=”img/slika.jpg”>Slika</a>;
 e-mail link <a href=mailto:email@gmail.com>Kontakt</a>;
 do nekog elementa sa određenim ID-jem <a href=”#kontakt”>Kontakt</a> itd.
Vežba:
Objašnjenje:
1. Kod prvog i drugog linka napravili smo vezu ka sajtovima w3shoohls i petlja, i u tim slučajevima se pravi veza ka
drugim sajtu u href atribut treba upisati URL adresu sajta.
2. Kod trećeg linka povezujemo dva html fajla. Kada povezujemo dva html fajla u href atribut treba da napišemo
putanju ili vezu od dokumenta na kome se pravimo link, ka dokumentu prema kome plavimo link...U ovom našem
slučaju iz fajla Linkovi.html napravili smo linkove ka fajlovima Naslovi pasusi.html i Slike.html. Kako se ova tri fajla
nalaze u istom folderu, pišemo relativnu putanju do drugog fajla, bez izlaska i ulaska u neke foldere. Dovoljan je samo
naziv drugog fajla sa ekstenzijom da se navede u href atributu.
3. Kada pravimo link za email u href atribut upisujemo email adresu...

Izgled u browser-u:
Liste u HTML-u
Liste se koriste za navođenje nekog niza elemenata (članova liste). U HTML-u postoji tri vrste listi: neuređene
(nenumerisane) liste, uređene (numerisane) liste i liste za definisanje (opisne liste).
Neuređene (nenumerisane) liste

Koriste se za predstavljanje nenumerisane (unorderd-neuređene) liste članova, gde su članovi liste označeni znakom
(bullet: krug, disk, kvadrat, ili bez oznake).
Neuređena lista počinje tagom <ul>, a završava se tagom </ul>. Svaki član liste počinje tagom <li>, i završava se sa
</li>. Primer:
Izgled ubrowser-u:
Atribut style postavljen u početnom tagu <ul> omogućava korišćenje drugačijih oznaka elemenata liste:
1. <ul style="list-style-type: disc;"> - prikazuje elemente koristeći punu crnu tačku (podrazumevano)
2. <ul style="list-style-type: square;"> - prikazuje elemente koristeći kvadrat crnih ivica
3. <ul style="list-style-type: circle;"> - prikazuje elemente koristeći crnu kružnicu (tj. obris kruga)
4. <ul style="list-style-type: none;"> - prikazuje elemente bez oznake
Primer:
Izgled ubrowser-u:
Uređene (numerisane) liste
Koriste se za predstavljanje numerisane (orderd-uređene) liste članova, gde su članovi liste označeni brojevima, slovima
ili na neki drugi uređen način.
Uređena lista počinje tagom <ol>, a završava se tagom </ol>. Svaki član liste počinje tagom <li>, i završava se sa </li>.
Primer:
Izgled ubrowser-u:
Atribut type postavljen u početnom tagu <ol> omogućava korišćenje drugačijih numeracija elemenata liste:
1. <ol type="1"> - prikazuje elemente koristeći numeraciju brojevima
2. <ol type="a"> - prikazuje elemente koristeći mala slova
3. <ol type="A"> - prikazuje elemente koristeći velika slova
4. <ol type="i"> - prikazuje elemente koristeći male rimske brojeve
5. <ol type="I"> - prikazuje elemente koristeći velike rimske brojeve
Primer:
Izgled ubrowser-u:
Atribut start određuje od kog broja numeracija elemanata u listi počinje. Primer:
Izgled ubrowser-u:
Liste za definisanje (opisne liste)
Koriste se za predstavljanje listi čiji članovi su neki termini za kojima slede njihovi opisi. Lista počinje tagom <dl>, a
završava se tagom </dl>. Termin se upisuje u tag <dt> </dt>, a opis u tag <dd> </dd>.
Primer:
Izgled ubrowser-u:
Tabele u HTML-u
U HTML-u tabele se definišu pomoću taba <table>. Redove tabele definišemo pomoću <tr> taba, ćelije unutar reda
definišemo pomoću <td> taba.
Pored <td> taba koju koristimo za standardne podatke, možemo koristiti i <th> tab za ćelije koje koristimo kao
naslovne u kolonama. Primer:
Rowspan
Kada je potrebno da se sadržaj ćelije prostire preko više redova unutar <td> taba unosi se 'rowspan' atribut čija je
vrednost broj redova preko kojih se ta ćelija prostire. Primer:
Colspan
Ako je potrebno da se ćelija prostire preko dve ili više kolona koristi se 'colspan' atribut unutar <td> taba, čija vrednost određuje na koliko ćelija će se prostirati
sadržaj unutar tog reda. U sledećem primeru korišćen je 'colspan' atribut za spajanje tri ćelije u drugom redu i dve ćelije u četvrtom redu.
Video u HTML-u
U HTML stranicu možemo ugraditi video sa tuđeg servisa, ili postaviti sopstveni video.
Ugrađivanje videa
Danas je većina video sadržaja ugrađena u stranice sa specijalizovanih servisa.
Dva najpopularnija servisa za otpremanje video snimaka su YouTube i Vimeo i oba nude kod za ugradnju videa. Ako
želimo da na stranici dodamo video sa YouTube-a, kliknimo na dugme Share, izaberimo Embed i biće nam prikazan kod
za ugradnju pomoću iframe-a. Na primer:
Prednosti i nedostaci upotrebe video servisa

Prvo, video fajlovi su uglavnom veliki, pa njihovo hostovanje na specijalizovanim sajtovima znači da ne moramo da
razmišljamo o prostoru na serveru. Takođe možemo koristiti video plejer sa tih sajtova, koji podržava više nivoa
kvaliteta, puštanje preko celog ekrana i slično.
Nedostaci su da drugim servisima ustupamo izvesnu kontrolu nad vašim video zapisom i načinom na koji je
predstavljen. YouTube plejer funkcioniše dobro, ali korisnicima je očigledno da je to YouTube plejer. Pored toga,
ograničena je dužina i vrsta snimka koji možemo objaviti. Postoje i automatski sistemi za proveru kršenja autorskih
prava, koji mogu pogrešiti i automatski ukloniti video.
Hostovanje svog videa
Postoje brojni razlozi da sami hostujemo video. Prvo, možemo koristiti sopstveni plejer, umesto plejera koje servisi
nude. Takođe, verovatno ne želimo da naš sajt sadrži reklame treće strane i da logo nekog servisa odvlači pažnju
posetilaca. Jedna od glavnih prednosti servisa je što ne mislimo o kodecima i formatima, jer oni konvertuju video. Ako
sami hostujemo video, treba da ga konvertujemo u MP4 format.
Najbolji način za ugradnju videa u html stranicu je upotrebom <video> taga. Primer:
Neki stari pregledači ne podržavaju mp4 format, pa je potrebno dodati rezervni. Da bismo omogućili video u više
formata, koristimo element <source>, ugnežden u <video> tagu.
Atribut src na source tagu sadrži putanju do datoteke, a type informacije o formatu. Pregledač sam bira datoteku koja
je kompatibilna. U ovom slučaju atribut src na video tagu nije potreban.
Atributi video taga
ATRIBUT OPIS
src URL adresa videa koji treba reprodukovati
height Visina elementa
width Širina elementa
Označava da pregledač treba da omogući svoje kontrole za video; on podrazumevano izostavlja
controls
kontrole
autoplay Označava da video treba da započne reprodukovanje kada se stranica učita
Ako je prisutan, video će se ponoviti kada dođe do kraja i ponavljaće reprodukciju, dok je korisnik
loop
ne zaustavi
preload Ako je prisutan, pregledač će započeti preuzimanje videa čim se učita stranica za reprodukovanje
poster Prikazuje se slika pre nego što započne reprodukovanje videa.
muted Ako je prisutan, video neće imati zvuk
Vežba: U html dokument Video.html umetnuti video nikola-jokic.mp4, koji se nalazi u folderu video i na Youtube-u.
HTML forme
HTML forme koristimo za izbor različitih vrsta korisničkog unosa podataka. Koriste se za dostavljanje podataka serveru.
Na strani servera prihvata PHP, ASP, JSP ili neka slična stranica, koja pored HTML elemenata sadrži i program koji obrađuje
prosleđene podatke.
HTML forma može sadržavati elementena unos izbor podataka, kao što je okvir za unos teksta, okvir za izbor, okvir za
potvrdu, dugme pošalji (engl. submit) ili vrati na početno stanje (engl. reset).
Forme počinju i završavaju se tagom <form>. Unutar taga <form> unose se ostali elemente forme.
U form taga treba upisati nekoliko atributa, ali dva su najbitnija:
 action – parametar koji ukazuje na koju URL stranice forma šalje podatke.
 method - način na koji se prosleđuju podaci. Može biti GET ili POST.
<form action="nekastranica.php" method="GET">

...elementi unutar forme
</form>
Metod GET sve podatke iz forme "nakači" na URL (prenosi kroz URL), manje bezbedan način prenosa podataka i hakeri
ga mogu koristiti za neke vrste napada, ali je jednostavniji.
Metod POST je malo komplikovaniji način prosleđivanja podataka, ali se zato podaci šalju "pozadino" (sigurno).
Primer:
<form action="login_stranica.php" method="GET">
Username: <br>
<input type="text" name="username" > <br>
Password: <br>
<input type="password" name="pwd" > <br>
<input type="submit" name="submit" value="LOG IN" >
</form>
Elementi forme:
1. Input tipa Tekst

Jedan o najvažnijih elemenata forme je <input>. Koristi se za određivanje različitih tipova unosa, kao što su: tekst, password, radio dugme
itd. Odabir tipa unosa se vrši pomoću atributa type. Input tipa Text se koristi za unos jednolinijskog teksta. Primer:
2. Input tipa Password
Input tipa Password se koristi za unos password-a. Ovaj tip koristimo kada ne želimo da se vidi tekst koji unosimo, (umesto slova će biti
prikazane tačkice). Primer:
3. Input tipa Radio

Input tipa Radio se koristi za postavljanje radio dugmića. Uloga radio dugmića je da omogući korisniku da odabere samo jednu od
ponuđenih opcija. Primer:
4. Input tipa CheckBox
Input tipa Checkbox se koristi za postavljanje Checkbox kvadratića. Checkbox kvadratići se koriste kada želimo omogućiti korisniku da
odabere jednu ili više od ponuđenih opcije. Primer:
5. Input tipa Submit

Input tipa Submit predstavlja dugme kojim se podnosi zahtev za pokretanje forme. Nakon što se forma ispuni podacima, pritiskom na
dugme Submit, prikupljaju se podaci iz forme i šalju na server (u neki php, asp ili jsp fajl). Primer:
5. Input tipa Reset
Input tipa Reset predstavlja dugme kojim se svi podaci unutar forme vraćaju na zadane postavke (default). Primer:
6. Textarea
Element <textarea> se koristika kao prostor za unos višelinijskog teksta. Primer:
7. Button
Element <button> definiše akcijsko dugme, koje koristimo za izvršavanje neke akcije. Primer:
8. Select
Element <select> služi za definisanje padajuću listu. Koristi se kada želimo odabrati jednu ili više ponuđenih stavki. Primer:
Element <option> definiše opciju koja može biti odabrana.

Prva opcija u vrhu, po defoult-u je u startu odabrana, (u ovom slučaju to je Apple).
Ako želimo da u startu bude odabrana neka druga opcija (npr. Sony), koristimo atribut selceted.
Ako želimo prikazati više opcija odjednom, koristimo atribut size, gdje navedemo broj opcija koje želimo prikazati. Primer:
Blok i linijski elementi
Postoje dve osnovne vrste HTML elemenata: blok i linijski elementi.
a) Blok elemente
Sadržaj blok elementa uvek se „ispisuje” u novom redu (jedan ispod drugog). Mogu unutar sebe sadržati druge blok ili linijske elemente.
Primer blok elemenata su html tagovi: <p>, <h1>...<h6>, <table>...
Kao glavni strukturni blok element koristi se <div> tag.
b) Linijski elementi
Linijski elementi se „ispisuju” u istom redu (jedan iza drugog). Ne mogu unutar sebe sadržavati blok elemente ali mogu druge linijske
elemente.
Primer linijskih elemenata su html tagovi: <img>, <a>, <em>, <strong>...
Kao linijski strukturni element koristi se <span> tag.

Div - blok kontejner
Tag <div> definiše HTML elemente koji imaju namenu da se u njih smeštaju drugi elemente, I da se preko njih uređuje I raspoređuje
sadržaj veb stranice (html dokumenta).
Div je dakle "nosač", "kontejner" (engl. - "container"), drugih elemnata.
Uloga div elemenata u podeli stranica
Moderan web dizajn već dugo podrazumeva podelu veb stranice podelu preko div tagova.Primer, na vrhu stranice je heder, na
dnu je futer, u sredini je glavni div kontejner podeljen na tri dela, sa tri div-a, u koje može da se smesti neki sadržaj (naslvi, tekstovi,
liste, slike…).
Tri osnovna svojstva <div> elementa su:
 style – definisanje css svojstava
 class – određuje naziv klase za pristup elementu iz CSS-a ili JavaScripta
 id - jedinstveni identifikator za pristup elementu iz CSS-a ili JavaScripta
Span - inline kontejner
Tag <span> definiše HTML elemente koji predstavljaju linijske (inline) elemente.
Primer, span elementi kao što vidimo, dobro dođu kada zatreba obojiti ili drugačije podesiti delove teksta. Primer:
Tekst obojen u <span style='color: #ff4444;'>crveno</span>.
Elementi za grupisanje sadržaja na veb stranici

HTML5 standard je uveo nove elemente kojima je moguće grupisati sadržaj HTML dokumenata. Neki od tih elemenata su:
 Element header za naslovni sadržaj

 Element nav za navigacioni sadržaj
 Element main za glavni sadržaj
 Element footer za završni sadržaj
 Element aside za sadržaj sa strane, dodatni sadržaj, i sl.
Na narednoj slici prikazan je primer upotrebe ovih elemenata.

HTML Osnove

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

HTML Osnove

Uploaded by

Copyright:

Available Formats

HTML OSNOVE

HTML dokument = Web strana

HTML atributi (Attributes)

<!DOCTYPE html> je deklaracija koja definiše da je ovaj dokument HTML5 dokument.

Primer1: Kada su html fajl i slika u istom folderu.

<a href=”link”> Naziv linka </a>

 do drugog sajta <a href=http://www.google.rs>Google</a>;

3. Kada pravimo link za email u href atribut upisujemo email adresu...

Neuređene (nenumerisane) liste

Prednosti i nedostaci upotrebe video servisa

<form action="nekastranica.php" method="GET">

1. Input tipa Tekst

3. Input tipa Radio

5. Input tipa Submit

Element <option> definiše opciju koja može biti odabrana.

Postoje dve osnovne vrste HTML elemenata: blok i linijski elementi.

Primer blok elemenata su html tagovi: <p>, <h1>...<h6>, <table>...

Kao glavni strukturni blok element koristi se <div> tag.

Primer linijskih elemenata su html tagovi: <img>, <a>, <em>, <strong>...

Kao linijski strukturni element koristi se <span> tag.

Uloga div elemenata u podeli stranica

Tekst obojen u <span style='color: #ff4444;'>crveno</span>.

Elementi za grupisanje sadržaja na veb stranici

 Element header za naslovni sadržaj

You might also like