Osnove HTML-a 

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

       Sadržaj:

Uvod u WWW (World Wide Web)

World  Wide Web, ili skraćeno Web je danas jedan od najpopularnijih mehanizama za desiminaciju informacija među ljudima. Pomoću web-a možemo prezentirati informacije koje se sastoje od reči, slika, video i audio zapisa - i sve to bez dodatnog softvera koji korisnik mora da instalira na svom računaru  - dovoljno je da ima bilo koji web pretraživač (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 način oni postaju izvor informacija za druge. Kreiranje Web stranica je veoma jednostavno ako savladate nekoliko osnovnih HTML komandi. U ovom kratkom tutorijalu biće 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 biće vam potreban samo neki prost editor teksta (NotePad ili WordPad, na primer)

Šta je HTML ?

HTML je slraćenica od Hyper Text Markup Language, što se na srpski može prevesti kao Jezik za označavanje hiper tekstova. Hiper tekstovi su tekstovi koji pored reči sadrže 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) među dokumentima (podrazumeva se da dokument sadrži 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 saopštava elektronsku adresu na kojoj se ta informacija nalazi. Ta elektronska adresa je zapravo URL. Svaki dokument na internetu ima jedinstvenu adresu (URL) što nam omogućava da pomoću nje lako dodjemo do web stranice koja nas interesuje u moru drugih web stranica.

Kada znamo URL adresu, onda u našem pretraživaču unesemo tu adresu i posle kratkog vremena sadržaj web stranice će se pojaviti na našem ekranu.

Na primer, da pristupite web stranici koja sadrži ovaj tutorijal ptorebno je da znate sledeći URL:

http://osnove-programiranja.com/prirucnici/osnove_html.htm

Osnovne HTML komande

U ovom delu biće 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 pomoću njih ukaže pretraživaču  kako neki tekst ili slika treba da budu prikazani na ekranu. Tagovi se stavljaju unutar  < > zagrada. U većini slučajeva, tagovi se postavljaju na početak nekog dela dokumenta, a na kraju tog dela dokumenta postavlja se tag završetka.

Na primer da napravite naslov dokumenta koristite sledeći opis:

 <title>Moj prvi HTML Dokument</title>

Uočite ova dva taga, <title> i </title> između kojih se nalazi tekst naslova dokumenta. Vidite da se tag završetka razlikuje od taga početka po kosoj crti (/).

HTML tagovi nisu osetljivi na velika i mala slova ( URL jeste osetljiv). U većini slučajeva (osim kod formatiranog teksta) HTML ignoriše blanko znake i prazne linije. Međutim, pogodno je da kada pišete HTML kod stavljate prazne linije zbog lakše čitljivosti kada budete želeli da ažurirate HTML kod.

Tag HTML

<html>  tag označava početak HTML programa (koda).

<html> tag se obično postavlja na početak dokumenta, kao prva naredba za pretraživače. Na kraju dokumenta postavlja se tag završetka </html> . Između ova dva taga nalaziće se svi ostali tagovi kao i sam sadržaj dokumenta.

Tag head

<head> tag je tag koji služi za početak jednog posebnog dela dokumenta koje se naziva zaglavlje dokumenta. Zaglavlje se neće prikazivati na ekranu.Ono služi da se unutar njega definišu neke karakteristike dokumenta, kao to je naslov.

Zaglavlje se opisuje između tagova <head> i </head>.

Sada možemo dati primer dokumenta koji sadrži 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 omogućava da definišete naziv vašeg dokumenta. To se postiže na sledeći način:

<title>Moj prvi HTML dokument</title>

Naziv dokumenta, pošto se nalazi u zaglavlju, neće 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 definišu početak i kraj sadržaja vašeg dokumenta. Sav tekst, sve slike i linkovi na druge dokumente nalaziće se unutar ovih tagova.

<body> se nalazi odmah nakon zaglavlja (head tagova). Tipična web stranica može izgledati ovako:

<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
Ovde se nalazi sadržaj vašeg dokumenta: tekst, slike, grafika itd.
</body>
</html>

h (Header) tagovi

h tag se koristi za iybor veličine slova koja će se koristiti za naslove i podnaslove u vašem dokumentu. Postoji šest nivoa veličine od h1 do h6. Najveća 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

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

Ovoje naslog sa h2 tagom

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

Ovoje naslog sa h3 tagom

<h4>Ovoje naslog sa h4 tagom</h4>

Ovoje naslog sa h4 tagom

<h5>Ovoje naslog sa h5 tagom</h5>
Ovoje naslog sa h5 tagom
<h6>Ovoje naslog sa h6 tagom</h6>
Ovoje naslog sa h6 tagom
Tagovima za naslove se ne postiže samo promena veličine slova, već su naslovi i boldovani, a takođe ispred i iza naslova se dodaje po jedna prazna linija.

Paragrafi

U HTML, paragraf se označava 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 sličan prethodnom sa raylikom što se ne dodaje jedna prazna linija ispred 

Pre-formatizovani tekst

Tag <pre> se koristi da označi da će vaš tekst zadržati formu u ubliku kako je kreiran sa svim blanko znacima, novim linijama, tabovima i sl. Drugim rečima biće onakav kakvog ste ga uneli.

Na primer:

<pre>ovo je 

               jedan primer 
               pre-formatizovanog 
        teksta</pre>
On će se na ekranu pojaviti u sledećem obliku:: 
ovo je 

               jedan primer 
               pre-formatizovanog 
        teksta

Bold i italik tagovi

Možete posebnim tagovima označiti da vaš tekst bude u bold i/ili italic obliku.

Postoji i tag za podvlačenje teksta, ali se obično ne koristi jer se linkovi takođe prikazuju kao podvučeni (o tome nešto kasnije).

Ne možete koristiti istovremeno oba taga (za bold i za italic). Ako greskom to pokušate onaj poslednji unet će biti primenjen.

Bold i itali se javljaju u dva oblika: fizičkom i logičkom i možete koristiti oba prema vašoj želji. Upotreba ovih tagova vidi se u sledećim primerima:

Fizički tagovi
Ovo je <b>boldovano</b>
Ovo je boldovano
Ovo je <i>italic</i>
Ovo je italic
Logički tagovi
Ovo je <strong>jako istaknuto</strong>
Ovo je jako istaknuto
Ovo je <em>istaknuto</em>
Ovo je istaknuto
Postoji mala razlika između fizičkog i logičkog taga. Kod fizičkog se menja samo oblik slova, a logički je zavisan od pretraživača i može uneti i druge promene (  recimo promenu boje slova ).

Liste

U HTML postoji jednostavan način za pravljenje lista sa nabrajanjem, bez nabrajanja ili za definisanje. Čak štaviše moguće je staljati listu unutar liste i na taj način postići hijerarhijsko nabrajanje.

Kada koristite liste prazna polja između "bulita" ili brojeva se automatski dodaju i mogu biti različiti od pretraživača do pretraživača.

Liste bez rednih brojeva

Liste bez rednog broja počinju tagom <ul> iza koga slede linije teksta koje se označavaju tagom <li>. Lista se završava 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:

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 omogućavaju da pravite strukturirane liste bez "bulita" i rednih brojeva. Evo primera: 

<dl>
<dt> Ovo je jedan pojam
<dd> Ovo je njegova definicija
<dd> ovo je druga definicija
<dt> Ovo je drugi pojam
<dd> Ovo je njegova definicija
</dl>

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
Ugnježdene liste (lista u listi)

Na kraju, evo jednog primera koji pokazuje složenu list, gde se unutar jedne liste nalaze druge liste. 

<ul>
<li> podatak 1
 <ul>
 <li> ugnježden podatak 1
 <li> ugnježden podatak 2
 </ul>
<li> podatak 2
 <ul>
 <li> ugnježden podatak 1
 <li> ugnježden podatak 2
 </ul>
<li> podatak 3
 <ul>
 <li> ugnježden podatak 1
 <li> ugnježden podatak 2
 </ul>
</ul>
A evo kako će to izgledati na ekranu::

Blok navod

Blok navod (blockquote) tag se koristi da se neki deo teksta izdvoji i prikaže kao navod koji će u odnosu na ostatak teksta biti i sa leve i sa desne strane dopunjen blanko znacima. To se postiže sledećim 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 možete centrirati (postaviti u centar ekrana) tekst, sliku, naslove pomoću tagova: 
<center>Ova rečenica je centrirana</center>

što će na ekranu izgledati ovako:

Ova rečenica je centrirana

<center> tag automatski dodaje novu liniju na kraju teksta koji je centriran.

Horizontalna linija

Ako želite da razdojite delove vašeg dokumenta, to možete postići ubacivanjem horizontalne linije pomoću taga  <hr>.

Horizontalna linija će biti prikazana ovako:

Adresa

Tag <address> se obično postavlja na kraj dokumenta i najčešće koristi za davanje kontakt informacija autora dokumenta. Sve što se stavi unutar ovog taga biće prikazano u italic obliku.

Evo primera korišćenja 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

Moguće je u HTML dokumente uneti komentare koji se neće prikazivati na ekranu pretraživača. To je najbolji način da se postave upozorenja i dodatne instrukcije za svako buduće ažuriranje vašeg dokumenta.

Komentari imaju sledeći oblik:

<!-----Ovo je komentar koji se neće pojaviti u pretraživaču----->
Komentar se može nalaziti i u više linija kao u sledećem primeru: 
<!----Ovaj komentar se takođe neće videti u pretraživačima 
iako je postavlje u dve linije--->

Precrtavanje teksta

Ako vam bude potrebno možete koristiti <strike> tag da deo teksta prcrtate kao što je urađeno u sledećem primeru: 
<strike>Ovaj tekst će biti precrtan</strike>
Na ekranu pretraživača 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 obično podvučeni ili naglašeni 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) postiže se na sledeći način: 
<a href="http://www.osnove-programiranja.com/">Osnove programiranja</a>

Tekst koji se nalazi između <a> i </a> tagova ("Osnove programiranjal") je tekst na koji korsinik treba da klikne kako se otvorila nova URL adresa ( http://www.osnove-programiranja.com/ ).

Evo šta je značenje pojedinih elemenata pri linkovanju:

<a                    			-- označava početak linka
href                  			-- označava "hypertext reference"
http://www.osnove-programiranja.com/ 	-- ovo je URL dokumenta na koji se povezujemo
Osnove programiranja       		-- the text that will appear and be clickable
/a>                   			-- kraj linka
Dakle, sve što vam je potrebno da vaš dokument povežete 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 vašeg dokumenta, potrebno je da najpre definišete mesto za linkovanje (anchor - sidro), a zatim da napravite link do tog mesta. Na primer, ako želite da se sa vrha vašeg dokumeta na prvu rečenicu iz četvrtog paragrafa vašeg dokumenta, vi ćete tom vađem četvrtom paragrafu dati neko ime, na primer "vazno" i kreirati link na to ime.

Evo kako bi to psotigli:

Najpre na početku četvrtog paragrafa definisemo vezu (anchor, sidro):

<a name="vazno">Prva rečenica iz četvrtog paragrafa</a>
A onda na vrh našeg dokumenta posatvimo link 
<a href="#vazno">Link na vaznu napomenu</a>
Znak # koji se pojavljuje u linku zapravo pokazuje pretraživaču 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 povežete na neki drugi dokument, ali ne na njegov početak, već na neki specifičan deo tog dokumenta. Za primer, pretpostavimo pa vi iz vašeg dokumenta želite da se povežete 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 vašem prvom dokumentu, idete na mesto u dokumentu sa kojeg želite da ostvarite link napravite link na sledeći način: 
 <a href="drugiDokument.html#drugiparagraf">Vazna napomena</a>
Korisnik će primetiti da je tekst "Vazna napomena" naglašen i da predstavlja link. Ako na njega klikne dobiće na ekranu drugi paragraf iz drugog dokumenta.

Apsolutno i relativno linkovanje

Ako u vašoj ulici sretnete suseda kojeg do tada niste znali i koji vas pita gde stanujet, vi mu verovatno nećete iydiktirati celu vašu adresu, već ćete mu recimo reći "druga kuća odavde". To se naziva relativnim adresiranjem, jer ste mu saopštili poziciju (adresu) vaše kuće u odnosu na mesto na kojem se nalazite. Za razliku od toga, vaša puna poštanska sdresa, je dovolja da vas nađe bilo ko, sa bilo koje pozicije. To je vaša apsolutna adresa.

Isti se koncept koristi i za adresiranje na internetu pomoću URL adresa. Ako se dokumenti koje povezujemo nalaze u istom folderu (direktorijumu) nije potrebno da saooštavano celu adresu. Na primer:

<a href="drugi_dokument.html">Idi na sledeću stranu</a>

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

Možete se linkovati i na druge susedne foldere, kao u ovom primeru: 
<a href="../treci_dokument.html">Idi na treću stranu</a>
Ovo će vas linkovati na dokument koji se nalazi u folderu za jedan nivo višem od trenutnog foldera.

Preporučuje se upotreba relativnog linkovanja kad god je to moguće, jer to olakšava manipulaciju vašim stranicama.

 

HTML komande za slike (images)

Verovatno se zapazili da mnogi dokumeti na internetu sadrže slike. To je zbog toga što su slikama mogu preneti mnoge informacije. Kako kaže kineska poslovica "Jedna slika vredi 1000 reči". Najčešće se koriste slike u .gif i .jpeg formatu, ali su mogući 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 korišćenje) na internetu. Vi ih mozete preuzeti, konvertovati u .gif format (ako su u nekom drugom formatu). Da vas podsetimo, možete koristiti samo slike koje ste sami napravili, ili za čije korišćenje imate dozvolu.

Stavljanje slike u dokument

Slike koje se pojavljuju u vašim dokumentima moraju imati kompletnu URL adresu (ili adresu foldera gde se nalaze). Za prikaz slike koriste se sledeći tagovi:

<img src="path or URL of image file">

Na primer, <img src="http://osnove-programiranja.com/img/NET048.jpg">

Ovde "img src" označava izvor slike sa URL adresom gde se slika nalazi. U ovom slučaju 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 sadrži sliku.

Na primer ako imate sliku "mojaslika.gif" u istom folderu sa dokumentom dovoljno je da napišete:

 <img src="mojaslika.gif">

Pozicioniranje teksta i slike

Atributi za img tag

Tekst može 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.  Pošto ovde iammo align=right tag, tekst će se nalaziti 
   sa strane umesto ispod slike.<br clear=right>

Ostavljanje praznina oko slike

Vi možete povećavati prazninu (belinu) oko slike pomoću horiznontalnih i vertikalnih margina koje zadajete u piksolvima.

Na primer,dodavanjem atributa hspace=20 biće 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.  Pošto 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 nećemo baviti.

Alternatvni tekst

Ako se slika ne može pojaviti (iz bilo kog razloga) moguće je umesto nje dati altrenativni tekst pomoću alt modifikatora, kao u sledećem primeru:

<img align=middle alt="Ilustracija" src="http://www.osnove-programiranja.com/img/NET048.jpg">

Linkovanje sa slike

Može se praviti link bilo sa teksta bilo sa slike. Da sliku učinimo 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 povezaće se na željeni dokument, isto kao kada je kliknuo na tekst koji je označavao neki link.

HTML Tabele

Tabele se kreiraju pomoću <table> taga. Tabele se dele u redove (rows) pomoću taga <tr>, a svaki red se sastoji od jedne ili više ćelija podataka (data cells) pomoću taga <td>. Ćelije tabele mogu da sadrže 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>
<td>red 1, ćelija 2</td>
</tr>
<tr>
<td>red 2, ćelija 1</td>
<td>red 2, ćelija 2</td>
</tr>
</table>

 Ovako bi gornja tabela izgledala u pretraživaču:

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 može da sadrži elemente forme kao što su razna polja za unos potataka, razne vrste dugmića za pokretanje akcije i sl.

Forma se kreira tagom <form> a pojedinačni elementi forme tagovima <input>.

Evo jednog jednostavnog primera forme koja sadrži dva elementa:

<form>
  <input>
  <input>
</form>

U pretraživaču bi to izgledalo ovako:

 

Tag <form> i tagovi <input> mogu imati niz atributa koji ih pobliže definišu.

Posmatrajmo slededeći primer:

<form>
Ime    : 
<input type="text" name="ime">
<br>
Prezime: 
<input type="text" name="prezime">
</form>

U pretraživaču će to izgledati ovako:

Ime      :
Prezime:

Tag <input> se koristi i za definisanje dugmića (buttons) koji imaju različite 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 način prikazan u sledećem primeru:

<form>
<input type="button" name="dugme" value="Start" onClick="Akcija">
</form>

Ovako bi to izgledalo u pretraživaču:

 

Radio dugme

Radio dugme se koristi kada želite da pravite izbor između malog broja opcija  kao u sledećem primeru.

<form>
<input type="radio" name="pol" value="muski"> Muski
<br>
<input type="radio" name="pol" value="yenski"> Yanski
</form>

Ovako to izgleda u pretraživaču::

Muski
Zenski

Uočite da samo jedna od dve opcije može biti odabrana kada kliknete na dugme.

Checkbox dugme

Checkbox dugme se koristi kada želite da odaberete jednu ili više opcija iz nekog manjeg skupa kao što to pokazuje sledeći 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 pretraživaču:

Šta sve imam?
Imam bicikl:
Imam auto :
Imam avion:

Uočite da kod checkbox dumića možete da birate više od jedne opcije (za razliku od radio dugmića gde birate samo jednu opciju).

Slanje sadržaja forme serveru

Forme se najčešće koriste za slanje podataka ka serveru. Za slanje podatka se koristi dugme tipa "submit" a u tagu <form> se dodaje atribut "action" kojim se definiše koji će program na serverskoj strani preuzeti poslate podatke. Atributom "method" definiše se metod slanja podataka koji može 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 pretraživaču:

Korisnik:

Ako sada u input polje ukucate niz slova i kliknete na dugme "Submit" pretraživač će poslati vaš podatak serveru na kojem će se aktivirati program login.asp koji će preuzeti poslati podatak i sprovesti odgovarajuću akciju.

 

HTML Color tag

Using HTML color codes for web site background color:

<body style="background:#80BFFF">

Using HTML color codes for setting font/text color:

<span style="color:#80BFFF">

Using HTML color codes for table background color:

<table style="background:#80BFFF">

Using HTML color code for link color:

<a style="color:#80BFFF">