Osnove HTML Jezika

Osnove HTML-a
Autor: prof. Milan Popovic, milan.popovic@bbs.edu.yu

Sadraj:
Uvod u WWW
ta je HTML?
ta je URL ?
Osnovne HTML komande
o Osnovni koraci: korienje tagova
HTML tag
head tag
body tag
Title
Headers
Paragraphs
Preformatted text
Boldface and italics
Lists
Blockquote
Center
Horizontal rule (line)
Addresses
Comments
Strike-through
HTML komande za linkovanje
o Linkovanje na druge dokumente
o Linkovanje na imenovane veze
o Apsolutno i relativno linkovanje
HTML komande za slike ( images)
HTML tabele
HTML forme
Uvod u WWW (World Wide Web)

World Wide Web, ili skraeno Web je danas jedan od najpopularnijih mehanizama za
desiminaciju informacija meu ljudima. Pomou web-a moemo prezentirati informacije
koje se sastoje od rei, slika, video i audio zapisa - i sve to bez dodatnog softvera koji
korisnik mora da instalira na svom raunaru - dovoljno je da ima bilo koji web
pretraiva (Internet Explorer, Firefox, Chrome, Opera i sl.)
Pored toga to putem Web-a ljudi mogu da primaju informacije, oni mogu i da kreiraju
sopstvene web stranice i da na taj nain oni postaju izvor informacija za druge.
Kreiranje Web stranica je veoma jednostavno ako savladate nekoliko osnovnih HTML
komandi. U ovom kratkom tutorijalu bie brikazane osnovne HTML komande.
Za kreiranje web stranica mogu se koristiti razni HTML editori kao to su Microsoft Visual
Web Developer i FrontPage, Adobe Cold Fusion i Dreamweaver i sl. U ovom tutorijalu
emo se baviti HTML komandama i pisanjem HTML koda bez upotrebe specijalizovanih
editora. Za programiranje HTML stranica bie vam potreban samo neki prost editor
teksta (NotePad ili WordPad, na primer)
1
ta je HTML ?
HTML je slraenica od Hyper Text Markup Language, to se na srpski moe prevesti kao
Jezik za oznaavanje hiper tekstova. Hiper tekstovi su tekstovi koji pored rei sadre i
sliku, video i audio zapise. HTML je podskup jednog ireg jezika, SGML-a (Standard
General Markup Language) i koristi se za definisanje izgleda World Wide Web
dokumenata (stranica) kao i za uspostavljanje veza (linkova) meu dokumentima
(podrazumeva se da dokument sadri tekst, sliku, zvuk, grafiku).
ta je URL (Uniform Resource Locator) ?

Kada neko eli da vam da uputstvo kako da pristupite nekoj informaciji na internetu on
vam tada saoptava elektronsku adresu na kojoj se ta informacija nalazi. Ta elektronska
adresa je zapravo URL. Svaki dokument na internetu ima jedinstvenu adresu (URL) to
nam omoguava da pomou nje lako dodjemo do web stranice koja nas interesuje u
moru drugih web stranica.
Kada znamo URL adresu, onda u naem pretraivau unesemo tu adresu i posle kratkog
vremena sadraj web stranice e se pojaviti na naem ekranu.
Na primer, da pristupite web stranici koja sadri ovaj tutorijal ptorebno je da znate
sledei URL:
http://osnove-programiranja.com/prirucnici/osnove_html.htm
Osnovne HTML komande

U ovom delu bie opisane osnovne HTML komande i koraci koje treba preduzeti kako bi
se neki dokument pripremio za prezentaciju na Web-u.
Osnovni koraci: upotreba tagova

HTML koristi tagove da pomou njih ukae pretraivau kako neki tekst ili slika treba da
budu prikazani na ekranu. Tagovi se stavljaju unutar < > zagrada. U veini sluajeva,
tagovi se postavljaju na poetak nekog dela dokumenta, a na kraju tog dela dokumenta
postavlja se tag zavretka.
Na primer da napravite naslov dokumenta koristite sledei opis:
<title>Moj prvi HTML Dokument</title>
Uoite ova dva taga, <title> i </title> izmeu kojih se nalazi tekst naslova dokumenta.
Vidite da se tag zavretka razlikuje od taga poetka po kosoj crti (/).
HTML tagovi nisu osetljivi na velika i mala slova ( URL jeste osetljiv). U veini sluajeva
(osim kod formatiranog teksta) HTML ignorie blanko znake i prazne linije. Meutim,
pogodno je da kada piete HTML kod stavljate prazne linije zbog lake itljivosti kada
budete eleli da aurirate HTML kod.
Tag HTML
2
<html> tag oznaava poetak HTML programa (koda).

<html> tag se obino postavlja na poetak dokumenta, kao prva naredba za
pretraivae. Na kraju dokumenta postavlja se tag zavretka </html> . Izmeu ova dva
taga nalazie se svi ostali tagovi kao i sam sadraj dokumenta.
Tag head
<head> tag je tag koji slui za poetak jednog posebnog dela dokumenta koje se naziva
zaglavlje dokumenta. Zaglavlje se nee prikazivati na ekranu.Ono slui da se unutar
njega definiu neke karakteristike dokumenta, kao to je naslov.
Zaglavlje se opisuje izmeu tagova <head> i </head>.
Sada moemo dati primer dokumenta koji sadri zaglavlje u kojem je definisan naziv
dokumenta tagovima <title> i </title>:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
Title tag
title tag vam omoguava da definiete naziv vaeg dokumenta. To se postie na sledei
nain:
<title>Moj prvi HTML dokument</title>
Naziv dokumenta, poto se nalazi u zaglavlju, nee biti prikazan na ekranu, ali e se
pojaviti u na raznim drugim mestima (na vrhu prozora, u bukmark-u stranica i sl.)
Body tag
<body> i </body> tagovi definiu poetak i kraj sadraja vaeg dokumenta. Sav tekst,
sve slike i linkovi na druge dokumente nalazie se unutar ovih tagova.
<body> se nalazi odmah nakon zaglavlja (head tagova). Tipina web stranica moe
izgledati ovako:
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
Ovde se nalazi sadraj vaeg dokumenta: tekst, slike, grafika itd.
</body>
</html>
h (Header) tagovi
h tag se koristi za iybor veliine slova koja e se koristiti za naslove i podnaslove u

vaem dokumentu. Postoji est nivoa veliine od h1 do h6. Najvea slova se dobijaju
tagom h1 a najmanja tagom h6. Slede primeri ya svih 6 nivoa.
<h1>Ovoje naslog sa h1 tagom</h1>
Ovo je naslov sa h1 tagom

Ovoje naslog sa h2 tagom



Tagovima za naslove se ne postie samo promena veliine slova, ve su naslovi i

boldovani, a takoe ispred i iza naslova se dodaje po jedna prazna linija.
Paragrafi
U HTML, paragraf se oznaava tagom tag <p> i pistavlja se na kraj svakog paragrafa
"normalnog" teksta (pod normalnim se podrazumeva tekst koji nema upotrebljene neke
druge tagove).
<p> ovaj tag prouzrokuje postavljanje teksta u novu liiju uz dodavanje jedne prazne linije ispred
<br> ovaj tag je slian prethodnom sa raylikom to se ne dodaje jedna prazna linija ispred
Pre-formatizovani tekst
Tag <pre> se koristi da oznai da e va tekst zadrati formu u ubliku kako je kreiran sa
svim blanko znacima, novim linijama, tabovima i sl. Drugim reima bie onakav kakvog
ste ga uneli.
Na primer:
<pre>ovo je
jedan primer
pre-formatizovanog
teksta</pre>
On e se na ekranu pojaviti u sledeem obliku::

ovo je
teksta
jedan primer
pre-formatizovanog
Bold i italik tagovi

Moete posebnim tagovima oznaiti da va tekst bude u bold i/ili italic obliku.
Postoji i tag za podvlaenje teksta, ali se obino ne koristi jer se linkovi takoe prikazuju
kao podvueni (o tome neto kasnije).
Ne moete koristiti istovremeno oba taga (za bold i za italic). Ako greskom to pokuate
onaj poslednji unet e biti primenjen.
Bold i itali se javljaju u dva oblika: fizikom i logikom i moete koristiti oba prema vaoj
elji. Upotreba ovih tagova vidi se u sledeim primerima:
Fiziki tagovi
Ovo je <b>boldovano</b>
Ovo je boldovano
Ovo je <i>italic</i>
Ovo je italic
Logiki tagovi
Ovo je <strong>jako istaknuto</strong>
Ovo je jako istaknuto
Ovo je <em>istaknuto</em>
Ovo je istaknuto
Postoji mala razlika izmeu fizikog i logikog taga. Kod fizikog se menja samo oblik
slova, a logiki je zavisan od pretraivaa i moe uneti i druge promene ( recimo
promenu boje slova ).
Liste
U HTML postoji jednostavan nain za pravljenje lista sa nabrajanjem, bez nabrajanja ili
za definisanje. ak tavie mogue je staljati listu unutar liste i na taj nain postii
hijerarhijsko nabrajanje.
Kada koristite liste prazna polja izmeu "bulita" ili brojeva se automatski dodaju i mogu
biti razliiti od pretraivaa do pretraivaa.
Liste bez rednih brojeva
Liste bez rednog broja poinju tagom <ul> iza koga slede linije teksta koje se
oznaavaju tagom <li>. Lista se zavrava tagom </ul>.
Evo jedne liste bez rednih brojeva:
<ul>
<li> linija 1
<li> linija 2
<li> linija 3
</ul>
A evo kako e to izgledati na ekranu:

5
linija 1
linija 2
linija 3
Liste sa rednim brojevima

Evo kako napravili gornju listu, ali sada sa rednim brojem ispred svake linije:
<ol>
<li> linija 1
<li> linija 2
<li> linija 3
</ol>
A evo kako e to izgledati na ekranu:

1. linija 1
2. linija 2
3. linija 3
Definicione liste
Definicione lsite vam omoguavaju da pravite strukturirane liste bez "bulita" i rednih
brojeva. Evo primera:
<dl>
<dt> Ovo
<dd> Ovo
<dd> ovo
<dt> Ovo
<dd> Ovo
</dl>
je
je
je
je
je
jedan pojam
njegova definicija
druga definicija
drugi pojam
njegova definicija
Ova lista e izgledati ovako na ekranu:

Ovo je jedan pojam
Ovo je njegova definicija
Ovo je druga definicija.
Ovo je drugi pojam
Ovo je njegova definicija
Ugnjedene liste (lista u listi)
Na kraju, evo jednog primera koji pokazuje sloenu list, gde se unutar jedne liste nalaze
druge liste.
<ul>
<li> podatak 1
<ul>
<li> ugnjeden
<li> ugnjeden
</ul>
<li> podatak 2
<ul>
<li> ugnjeden
<li> ugnjeden
</ul>
<li> podatak 3
<ul>
<li> ugnjeden
podatak 1
podatak 2
podatak 1
podatak 2
podatak 1
<li> ugnjeden podatak 2

</ul>
</ul>
A evo kako e to izgledati na ekranu::

podatak 1
o ugnjeden podatak 1
podatak 2
podatak 3
Blok navod
Blok navod (blockquote) tag se koristi da se neki deo teksta izdvoji i prikae kao navod
koji e u odnosu na ostatak teksta biti i sa leve i sa desne strane dopunjen blanko
znacima. To se postie sledeim tagovima:
<blockquote>Tekst koji se eli prikazati kao navod</blockquote>
Da ponovo istaknemo, blok navodu e biti dodata leva i desna margina kako bi se
razlikovao od ostatka teksta u dokumentu.
Centriranje
Vi moete centrirati (postaviti u centar ekrana) tekst, sliku, naslove pomou tagova:
<center>Ova reenica je centrirana</center>
to e na ekranu izgledati ovako:

Ova reenica je centrirana
<center> tag automatski dodaje novu liniju na kraju teksta koji je centriran.
Horizontalna linija
Ako elite da razdojite delove vaeg dokumenta, to moete postii ubacivanjem
horizontalne linije pomou taga <hr>.
Horizontalna linija e biti prikazana ovako:
Adresa
Tag <address> se obino postavlja na kraj dokumenta i najee koristi za davanje
kontakt informacija autora dokumenta. Sve to se stavi unutar ovog taga bie prikazano
u italic obliku.
Evo primera korienja address taga:
<address>
Osnove HTML-a / Milan Popovic / milan.popovic@bbs.edu.yu
</address>
A na ekranu e to izgledati ovako:

Osnove HTML-a / Milan Popovic / milan.popovic@bbs.edu.yu
Komentari
Mogue je u HTML dokumente uneti komentare koji se nee prikazivati na ekranu
pretraivaa. To je najbolji nain da se postave upozorenja i dodatne instrukcije za
svako budue auriranje vaeg dokumenta.
Komentari imaju sledei oblik:

Komentar se moe nalaziti i u vie linija kao u sledeem primeru:


Precrtavanje teksta
Ako vam bude potrebno moete koristiti <strike> tag da deo teksta prcrtate kao to je
uraeno u sledeem primeru:
<strike>Ovaj tekst e biti precrtan</strike>
Na ekranu pretraivaa to e izgledati ovako:

Ovaj tekst e biti precrtan
HTML komande za linkovanje

Prava mo HTML dokumenata nalazi se u njihovoj sposobnosti da se povezuju sa
drugim dokumentima, delovima teksta, slikama, video i audio zapisima. Veze (linkovi)
su obino podvueni ili naglaeni u dokumentima da se istakne njihova pojava. Kada
korisnik klikne na neki link automatski se otvara novi prozor sa prikazom dokumenta na
koji link ukazuje.
Linkovanje na druge dokumente

Linkovanje na drugi dokument (drugi URL) postie se na sledei nain:
<a href="http://www.osnove-programiranja.com/">Osnove programiranja</a>
Tekst koji se nalazi izmeu <a> i </a> tagova ("Osnove programiranjal") je tekst na
koji korsinik treba da klikne kako se otvorila nova URL adresa ( http://www.osnoveprogramiranja.com/ ).
Evo ta je znaenje pojedinih elemenata pri linkovanju:
<a
href
http://www.osnove-programiranja.com/
Osnove programiranja
/a>
------
oznaava poetak linka

oznaava "hypertext reference"
ovo je URL dokumenta na koji se povezujemo
the text that will appear and be clickable
kraj linka
Dakle, sve to vam je potrebno da va dokument poveete sa nekim drugim

dokumentom jeste URL adresa tog drugog dokumenta.
Linkovanje na imenovanu vezu

Povezivanje unutar istog dokumenta
Da se linkujete na neki poseban deo vaeg dokumenta, potrebno je da najpre definiete
mesto za linkovanje (anchor - sidro), a zatim da napravite link do tog mesta. Na primer,
ako elite da se sa vrha vaeg dokumeta na prvu reenicu iz etvrtog paragrafa vaeg
dokumenta, vi ete tom vaem etvrtom paragrafu dati neko ime, na primer "vazno" i
kreirati link na to ime.
Evo kako bi to psotigli:
Najpre na poetku etvrtog paragrafa definisemo vezu (anchor, sidro):
<a name="vazno">Prva reenica iz etvrtog paragrafa</a>
A onda na vrh naeg dokumenta posatvimo link

<a href="#vazno">Link na vaznu napomenu</a>
Znak # koji se pojavljuje u linku zapravo pokazuje pretraivau da treba da ostvari vezu
unutar istog dokumenta, a ne da ide na drugu URL adresu (kao kod povezivanbja sa
drugim dokumentima).
Imenovana veza u drugom dokumentu

Mogu nastupiti situacije u kojima vi elite da se poveete na neki drugi dokument, ali ne
na njegov poetak, ve na neki specifian deo tog dokumenta. Za primer, pretpostavimo
pa vi iz vaeg dokumenta elite da se poveete sa paragrafom 2 iz jednog drugog
dokumenta ija je URL adresa "drugiDokument.html".
Kao prvo, potrebno je da postavite vezu (anchor, sidro) u dokument na koji se
povezujete (drugiDokument.html). Da to uradite, idete na drugi paragraf tog dokumenta
i napravite vezu, recimo ovako:
<a name="drugiparagraf">some text</a>
Sada, da bi kreirali link na ovu vezu u vaem prvom dokumentu, idete na mesto u
dokumentu sa kojeg elite da ostvarite link napravite link na sledei nain:
<a href="drugiDokument.html#drugiparagraf">Vazna napomena</a>
Korisnik e primetiti da je tekst "Vazna napomena" naglaen i da predstavlja link. Ako

na njega klikne dobie na ekranu drugi paragraf iz drugog dokumenta.
Apsolutno i relativno linkovanje

Ako u vaoj ulici sretnete suseda kojeg do tada niste znali i koji vas pita gde stanujet, vi
mu verovatno neete iydiktirati celu vau adresu, ve ete mu recimo rei "druga kua
odavde". To se naziva relativnim adresiranjem, jer ste mu saoptili poziciju (adresu)
vae kue u odnosu na mesto na kojem se nalazite. Za razliku od toga, vaa puna
potanska sdresa, je dovolja da vas nae bilo ko, sa bilo koje pozicije. To je vaa
apsolutna adresa.
Isti se koncept koristi i za adresiranje na internetu pomou URL adresa. Ako se
dokumenti koje povezujemo nalaze u istom folderu (direktorijumu) nije potrebno da
saootavano celu adresu. Na primer:
<a href="drugi_dokument.html">Idi na sledeu stranu</a>
Ovo e vas linkovati na drugi_dokument.html koji se nalazi u istom folderu kao i

dokument koji ga poziva.
Moete se linkovati i na druge susedne foldere, kao u ovom primeru:
<a href="../treci_dokument.html">Idi na treu stranu</a>
Ovo e vas linkovati na dokument koji se nalazi u folderu za jedan nivo viem od
trenutnog foldera.
Preporuuje se upotreba relativnog linkovanja kad god je to mogue, jer to olakava
manipulaciju vaim stranicama.
HTML komande za slike (images)

Verovatno se zapazili da mnogi dokumeti na internetu sadre slike. To je zbog toga to
su slikama mogu preneti mnoge informacije. Kako kae kineska poslovica "Jedna slika
vredi 1000 rei". Najee se koriste slike u .gif i .jpeg formatu, ali su mogui idrugi
formati.
Prva stvar kada elite da koristite slike jeste da ih sami kreirate ili locirate na internetu.
Postoji na hiljade "public domain" (slobodnih za korienje) na internetu. Vi ih mozete
preuzeti, konvertovati u .gif format (ako su u nekom drugom formatu). Da vas
podsetimo, moete koristiti samo slike koje ste sami napravili, ili za ije korienje imate
dozvolu.
Stavljanje slike u dokument

Slike koje se pojavljuju u vaim dokumentima moraju imati kompletnu URL adresu (ili
adresu foldera gde se nalaze). Za prikaz slike koriste se sledei tagovi:
<img src="path or URL of image file">
Na primer, <img src="http://osnove-programiranja.com/img/NET048.jpg">
Ovde "img src" oznaava izvor slike sa URL adresom gde se slika nalazi. U ovom sluaju
slika NET048.jpg se nalazi u folderu img na web serveru osnove-programiranja.comi
Ako se slika nalazi u istom folderu gde se nalazi i sam dokument, tada nije potrebno
zadavati celu URL adresu, ve samo ime fajla koji sadri sliku.
Na primer ako imate sliku "mojaslika.gif" u istom folderu sa dokumentom dovoljno je da
napiete:
<img src="mojaslika.gif">
Pozicioniranje teksta i slike

Atributi za img tag
10
Tekst moe da "pliva" na desno ili nalevo od slike. Atribut align=left kazuje da e tekst
"plivati" nalevo i nadole od slike, a sa atributom align=right tekst e "plivati" nadesno i
nadole.
Na primer:
<img src="http://www.osnove-programiranja.com/img/NET048.jpg" align=right>Ova slika
se koristi kao ilustarcija. Poto ovde iammo align=right tag, tekst e se nalaziti
sa strane umesto ispod slike.<br clear=right>
Ostavljanje praznina oko slike

Vi moete poveavati prazninu (belinu) oko slike pomou horiznontalnih i vertikalnih
margina koje zadajete u piksolvima.
Na primer,dodavanjem atributa hspace=20 bie dodato20 piksela levoj i desnoj margini
slike.Atribut vspace= dodaje margine na vrh i na dno slike .
Primer:
<img src="http://www.osnove-programiranja.com/img/NET048.jpg" align=left hspace=20>Ova
slika
se koristi kao ilustarcija. Poto ovde iammo align=right tag, tekst e se nalaziti
sa strane umesto ispod slike.<br clear=right>
Postoje jo neki atributi za slike, ali ovde se njima neemo baviti.
Alternatvni tekst
Ako se slika ne moe pojaviti (iz bilo kog razloga) mogue je umesto nje dati altrenativni
tekst pomou alt modifikatora, kao u sledeem primeru:
<img align=middle alt="Ilustracija" src="http://www.osnove-programiranja.com/img/NET048.jpg">
Linkovanje sa slike
Moe se praviti link bilo sa teksta bilo sa slike. Da sliku uinimo linkom dovoljno je da
tag slike postavimo unutar taga za linkovanje.
Na primer:
<a href="http://www.osnove-programiranja.com/">
<img src="http://www.osnove-programiranja.com/img/NET048.jpg"></a>
Kao to vidite, <img src> tag je unutar <a href></a> taga. Kada je neka slika link, ona
e imati oko sebe jedan plavi okvir kojim se pokazuje da je slika link. Kada user klikne
na sliku povezae se na eljeni dokument, isto kao kada je kliknuo na tekst koji je
oznaavao neki link.
HTML Tabele
Tabele se kreiraju pomou <table> taga. Tabele se dele u redove (rows) pomou taga
<tr>, a svaki red se sastoji od jedne ili vie elija podataka (data cells) pomou taga
<td>. elije tabele mogu da sadre tekst, sliku, listu, paragraf, formu, horizontalnu
liniji, pa ak i novu tabelu (tabela u tabeli).
11
Evo jednog primera tabele:

<table border="1">
<tr>
<td>red 1, elija 1</td>
</tr>
<tr>
</tr>
</table>
Ovako bi gornja tabela izgledala u pretraivau:

red 1, elija 1 red 1, elija 2
red 2, elija 1 red 2, elija 2
HTML Forme
HTML forma je deo dokumenta koji u sebi moe da sadri elemente forme kao to su
razna polja za unos potataka, razne vrste dugmia za pokretanje akcije i sl.
Forma se kreira tagom <form> a pojedinani elementi forme tagovima <input>.
Evo jednog jednostavnog primera forme koja sadri dva elementa:
<form>
<input>
<input>
</form>
U pretraivau bi to izgledalo ovako:
Tag <form> i tagovi <input> mogu imati niz atributa koji ih poblie definiu.
Posmatrajmo slededei primer:
<form>
Ime
:
<input type="text" name="ime">
<br>
Prezime:
<input type="text" name="prezime">
</form>
U pretraivau e to izgledati ovako:

Ime
Prezime:
12
Tag <input> se koristi i za definisanje dugmia (buttons) koji imaju razliite oblike i
upotrebu.
Akciono dugme
Akciono dugme se koristi za pokretanje neke akcije, recimo brisanje svih polja u formi,
startovanje nekog javsript programa i sl.
Akciono dugme se kreira na nain prikazan u sledeem primeru:
<form>
<input type="button" name="dugme" value="Start" onClick="Akcija">
</form>
Ovako bi to izgledalo u pretraivau:
Radio dugme
Radio dugme se koristi kada elite da pravite izbor izmeu malog broja opcija kao u
sledeem primeru.
<form>
<input type="radio" name="pol" value="muski"> Muski
<br>
<input type="radio" name="pol" value="yenski"> Yanski
</form>
Ovako to izgleda u pretraivau::

Muski
Zenski
Uoite da samo jedna od dve opcije moe biti odabrana kada kliknete na dugme.
Checkbox dugme
Checkbox dugme se koristi kada elite da odaberete jednu ili vie opcija iz nekog
manjeg skupa kao to to pokazuje sledei primer:
<form>
ta sve imam?
Imam bicikl:
<input type="checkbox" name="vozilo" value="Bicikl">
<br>
Imam auto:
<input type="checkbox" name="vozilo" value="Auto">
<br>
Imam avion:
<input type="checkbox" name="vozilo" value="Avion">
</form>
A evo kako bi to izgledalo u pretraivau:

13
ta sve imam?
Imam bicikl:
Imam auto :
Imam avion:
Uoite da kod checkbox dumia moete da birate vie od jedne opcije (za razliku od
radio dugmia gde birate samo jednu opciju).
Slanje sadraja forme serveru
Forme se najee koriste za slanje podataka ka serveru. Za slanje podatka se koristi
dugme tipa "submit" a u tagu <form> se dodaje atribut "action" kojim se definie koji
e program na serverskoj strani preuzeti poslate podatke. Atributom "method" definie
se metod slanja podataka koji moe biti "get" ili "post".
Evo primera:
<form name="input" action="http://osnove-programiranja.com/vezbe/login.php"
method="get">
Korisnik:
<input type="text" name="korisnik">
<input type="submit" value="Submit">
</form>
Ovako to izgleda u pretraivau:

Korisnik:
Submit
Ako sada u input polje ukucate niz slova i kliknete na dugme "Submit" pretraiva e
poslati va podatak serveru na kojem e se aktivirati program login.asp koji e preuzeti
poslati podatak i sprovesti odgovarajuu akciju.
14

Osnove HTML Jezika

Uploaded by

Copyright:

Available Formats

You might also like

Osnove HTML Jezika

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 HTML Jezika

Uploaded by

Copyright:

Available Formats

Osnove HTML-a

Autor: prof. Milan Popovic, milan.popovic@bbs.edu.yu

Uvod u WWW (World Wide Web)

ta je URL (Uniform Resource Locator) ?

Osnovne HTML komande

Osnovni koraci: upotreba tagova

<html> tag oznaava poetak HTML programa (koda).

h tag se koristi za iybor veliine slova koja e se koristiti za naslove i podnaslove u

Ovo je naslov sa h1 tagom

Ovoje naslog sa h2 tagom

Ovoje naslog sa h3 tagom

<h6>Ovoje naslog sa h6 tagom</h6>

Tagovima za naslove se ne postie samo promena veliine slova, ve su naslovi i

On e se na ekranu pojaviti u sledeem obliku::

Bold i italik tagovi

A evo kako e to izgledati na ekranu:

Liste sa rednim brojevima

A evo kako e to izgledati na ekranu:

Ova lista e izgledati ovako na ekranu:

<li> ugnjeden podatak 2

A evo kako e to izgledati na ekranu::

to e na ekranu izgledati ovako:

A na ekranu e to izgledati ovako:

Komentar se moe nalaziti i u vie linija kao u sledeem primeru:

Na ekranu pretraivaa to e izgledati ovako:

HTML komande za linkovanje

Linkovanje na druge dokumente

oznaava poetak linka

Dakle, sve to vam je potrebno da va dokument poveete sa nekim drugim

Linkovanje na imenovanu vezu

A onda na vrh naeg dokumenta posatvimo link

Imenovana veza u drugom dokumentu

Korisnik e primetiti da je tekst "Vazna napomena" naglaen i da predstavlja link. Ako

Apsolutno i relativno linkovanje

Ovo e vas linkovati na drugi_dokument.html koji se nalazi u istom folderu kao i

HTML komande za slike (images)

Stavljanje slike u dokument

Pozicioniranje teksta i slike

Ostavljanje praznina oko slike

Postoje jo neki atributi za slike, ali ovde se njima neemo baviti.

Evo jednog primera tabele:

Ovako bi gornja tabela izgledala u pretraivau:

U pretraivau bi to izgledalo ovako:

U pretraivau e to izgledati ovako:

Ovako to izgleda u pretraivau::

A evo kako bi to izgledalo u pretraivau:

Ovako to izgleda u pretraivau:

You might also like