Osnove HTML PDF

Osnove HTML
1 of 12
http://www.osnove-programiranja.com/prirucnici/osnove_html.htm
Autor: prof. Milan Popovic, milan.popovic@bbs.edu.yu

Sadraj:
Uvod u WWW
ta je HTML?
ta je URL ?
Osnovne HTML komande
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
Linkovanje na druge dokumente
Linkovanje na imenovane veze
Apsolutno i relativno linkovanje
HTML komande za slike ( images)
HTML tabele
HTML forme
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)
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
12.12.2012 12:45
Osnove HTML
2 of 12
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).
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
U ovom delu bie opisane osnovne HTML komande i koraci koje treba preduzeti kako bi se neki
dokument pripremio za prezentaciju na Web-u.
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
<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>.
12.12.2012 12:45
Osnove HTML
3 of 12
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>
Ovoje naslog sa h3 tagom

12.12.2012 12:45
Osnove HTML
4 of 12

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 ).
12.12.2012 12:45
Osnove HTML
5 of 12
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:

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)
12.12.2012 12:45
Osnove HTML
6 of 12
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
<li> ugnjeden
</ul>
</ul>
podatak 1
podatak 2
podatak 1
podatak 2
podatak 1
podatak 2
A evo kako e to izgledati na ekranu::

podatak 1
ugnjeden podatak 1
ugnjeden podatak 2
podatak 2
ugnjeden podatak 1
ugnjeden podatak 2
podatak 3
ugnjeden podatak 1
ugnjeden podatak 2
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
12.12.2012 12:45
Osnove HTML
7 of 12
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
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
12.12.2012 12:45
Osnove HTML
8 of 12
URL adresa tog drugog dokumenta.
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.
12.12.2012 12:45
Osnove HTML
9 of 12
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.
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
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.
12.12.2012 12:45
Osnove HTML
10 of 12
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.
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).
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 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>.
12.12.2012 12:45
Osnove HTML
11 of 12
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:
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.
12.12.2012 12:45
Osnove HTML
12 of 12
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:

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:
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.
12.12.2012 12:45

Osnove HTML 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 HTML PDF

Uploaded by

Copyright:

Available Formats

Osnove HTML

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

<h2>Ovoje naslog sa h2 tagom</h2>

<h3>Ovoje naslog sa h3 tagom</h3>

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 boldovani, a

On e se na ekranu pojaviti u sledeem obliku::

Bold i italik tagovi

A evo kako e to izgledati na ekranu:

A evo kako e to izgledati na ekranu:

Ova lista e izgledati ovako na ekranu:

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:

Prava mo HTML dokumenata nalazi se u njihovoj sposobnosti da se povezuju sa drugim

Linkovanje na druge dokumente

oznaava poetak linka

URL adresa tog drugog dokumenta.

Povezivanje unutar istog dokumenta

A onda na vrh naeg dokumenta posatvimo link

Imenovana veza u drugom dokumentu

Apsolutno i relativno linkovanje

Moete se linkovati i na druge susedne foldere, kao u ovom primeru:

Verovatno se zapazili da mnogi dokumeti na internetu sadre slike. To je zbog toga to su

Stavljanje slike u dokument

Pozicioniranje teksta i slike

Ostavljanje praznina oko slike

Na primer,dodavanjem atributa hspace=20 bie dodato20 piksela levoj i desnoj margini

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

Ovako bi gornja tabela izgledala u pretraivau:

Evo jednog jednostavnog primera forme koja sadri dva elementa:

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