1. Internet programiranje - HTMLInternet programiranje - HTML HTML (HyperText Markup Language) je veoma jednostavan jezik koji služi za izvršavanje programa na daljinu. HTML stranice

VVEEBB ddiizzaajjnn VVeelljjaa MMiillaannoovviićć

1

2013

1. Internet programiranje - HTML

HTML (HyperText Markup Language) je veoma jednostavan jezik koji služi za izvršavanje programa na daljinu. HTML stranice imaju ekstenziju .html ili .htm,

a nalaze se u određenom direktorijumu servera vezanog na Internet, što ih čini

dostupnim na web-u. Pomodu HTML jezika se generišu dokumenti tipa hipertekst.

Hipertekst je, tekst koji sadrže veze ili linkove ka drugim dokumentima ili na

samog sebe. Hipertekst je skup stranica , međusobno povezanih linkovima koje

su umetnute u stranice. Na ove linkove se može kliknuti. Za razliku od običnog

teksta, koji se čita linearno (sleva na desno, odozgo naniže), hipertekst se

čita pratedi hiper-veze u tekstu, dakle, ne nužno na linearan način.

Za generisanje HTML stranice potreban je najobičniji tekst editor, na primer Notepad. Mogu se koristiti i specijalni alati, na primer Front Page,

Dremweaver, Joomla… . Stranica se može videti u okviru Web browser-a, Internet Explorer, Mozilla Firefox-a Opera, Safari…

HTML komande se pišu u vidu tzv. TAG- ova. Jedan tag je ustvari komanda koja govori browseru šta i kako da uradi

tj. na koji način da prikaže sadržaj vaše stranice. HTML tagovi su "case insensitive" tj. svejedno je da li se pišu malim ili velikim slovima. Tagovi se pišu unutar oznaka "<" i ">" (bez znakova navoda) npr:

<html>. Ovaj tag se nalazi na početku svakog HTML dokumenta.

Tag govori browseru da je fajl koji je upravo počeo da učitava HTML dokument i

da kao takvog treba i da ga prikaže. Na kraj HTML dokumenta se stavlja završni HTML tag: </html>. Ovaj tag govori browseru da je to kraj HTML dokumenta.

Vedina tagova ima i početni i završni tag. Završni tag se dobija dodavanjem

znaka "/" i označava mesto na kom prestaje dejstvo početnog taga.

Minimalna struktura HTML-dokumenta obuhvata tagove:

<HTML>, </HTML> - zagrade HTML-teksta;

<HEAD>, </HEAD> - zagrade zaglavlja, sadrži meta- definicije HTML-dokumenta;

<TITLE>, </TITLE> - zagrade za naziv HTML- dokumenta i

<BODY>, </BODY> - zagrade teksta obeleženog dokumenta.

Svaki HTML dokument se sastoji od dva dela:

zaglavlja (engl. head) i

tela (engl. body).

Zaglavlje se odvaja tagovima <head> i </head>, a telo dokumenta tagovima:

<body> i </body>.

Sve ono što se napiše u zaglavlju dokumenta nede se prikazati u prozoru

browsera već obično služi samo da pruži neke informacije o stranici. Sve ono što je napisano između tagova <body> i </body> predstavlja telo

dokumenta, pojavide se kao sadržaj prezentacije u prozoru browsera. <html> <head> <title>

msc Velimir Milanovic


2

2013

ovde je naziv prezentacije </title> </head> <body> ovde se unosi sve ono sto zelite da se vidi u prezentaciji </body> </html>

Dodatna opcija omogudava da se obeleži komentar u HTML-obeleženom tekstu koji se

nede videti u vizuelizaciji dokumenta. 

1.1. Osnovni markeri html-a

Otvoriti Notepad dokument i kreirati sledeći sadržaj:

<html> <head><title> moja web stranica</title></head> <body> zdravo svete!!!!!!! </body> </html>

Sačuvati ovaj document pod nazivom vežba1.htm. Zatim otvoriti program

Interent Explorer ili Mozilla Firefox. Otići na opciju “File”-> “Open” i

otovriti fajl “vežba1.htm” sa lokacije gde je sačuvan. Zapaziti da je web

stranica koja je ovako kreirana sa naslovom (na vrhu) “Moja web stranica”.

Stranica više nije prazna već u njoj postoji tekst koji smo ukucali (npr:

“Zdravo svete!!!!!!! ” ).

P marker:

Ovo je marker za formiranje paragraf. Oznake su sledeće:

<P> - za početak markera

</P> - za završetak markera mada ovaj deo nije obavezan

Hx marker:

Ovo je marker za formiranje veličine slova. Postoji 6 nivoa velicine slova od

H1 do H6 ( dakle x moze biti 1, 2,…6). Najveća slova su sa velicinom H1.

Oznake su sledeće:

<Hx> za početak markera

</Hx> za završetak markera

B marker:

Ovo je marker za potamnjivanje (podebljavanje) slova. Oznake su sledeće:

<B> za početak markera

</B> za završetak markera

I marker:

Ovo je marker za formiranje kurzivnih (italic) slova.

<I> - za početak markera

</I> - za završetak markera

BR marker:

Ovaj marker služi za prekid teksta i prebacivnje u novi red.

<BR> - za početak markera( za završetak se ne koristi )

Center marker:

Ovaj marker služi za centriranje sadržaja koji se nalazi izmedju makera za

početak <center> i markera za kraj </center>.

Vežba 1:



3

2013

<html> <head><title> naslov moje web strane</title></head> <body> ovo je telo texta. <p>zatim pocinjem novi pasus <h1><b> debela i velika slova </b></h1> <h5><b> kurziv manja slova </i></h5> <p> nastavljam dalje i prelamam <br> text </br> <p> <centar> stavljam text u centar </centar> <p> <p> napravio sam dva razmaka i <br>završavam </br><p><i> vežbu prelomom <br>texta italik</br> </i> </body> <html>

UL marker:

Ovaj marker sluzi za formiranje NENUMERISANE liste elemenata. Ovi elementi

na web stranici dobijaju takav izgled da ispred svakog od njih stoji tačka i

pore|ani su jedan ispod drugog. Ovaj marker se uvek koristi zajedno sa

drugime markerom LI o kome će biti više reči u nastavku.

<UL> - za početak markera

</UL> - za završetak markera

LI marker:

Ovaj marker se koristi zajedno sa markerima za NENUMERISANU ili NUMERISANU

listu. Njegov zadatak je da istakne svaki od elemenata.

<LI> - za početak markera

</LI> za završetak markera ( nije obavezan)

OL marker:

Ovaj marker služi za formiranje NUMERISANE liste elemenata. Ovi elementi na

web stranici dobijaju takav izgled da je ispred svakog od njih redni broj i

poredjani su jedan ispod drugog. Ovaj marker se uvek koristi zajedno sa

marekerom LI.

<OL> - za početak markera

</OL> - za završetak markera

Definicione liste

Ovaj oblik liste se dobija sa <dl> tagom. Svaka stavka ovakve liste se sastoji

iz dva dela: termina koji se definiše i njegove definicije.

Termini zapocinju <dt> tagom, a njihove definicije <dd> tagom. Termini se

poravnavaju uz levu marginu a njihove definicije se pojavljuju u novom redu i

pomerene su za određen broj mesta. Opšta stuktura je:

<DL>

<DT> odrednica 1 <DD> opis odrednice 1

<DT> odrednica 2 <DD> opis odrednice 2

. . . . .

</DL>

Primer za ovu vrstu listi je:

Prolece:

traje od 21. marta do 21. juna.

Leto:

traje od 21. juna do 21. septembra.

Jesen:

traje od 21. septembra do 21. decembra.

Zima:



4

2013

traje od 21. decembra do 21. marta.

HTML kod za prethodni primer je:

Vežba 2: Primer opisne liste

<dl> <dt>Prolece: <dd>traje od 21. marta do 21. juna. <dt>Leto: <dd>traje od 21. juna do 21. septembra. <dt>Jesen: <dd>traje od 21. septembra do 21. decembra. <dt>Zima: <dd>traje od 21. decembra do 21. marta. </dl>

Lista unutar liste

Unutar neke liste može se definisati nova lista. Na primer: <ul> <li> a few new england states: <ul>

<li> vermont <li> new hampshire <li> maine

</ul> <li> two midwestern states: <ul>

<li> michigan <li> indiana

</ul> </ul>

Boje i HTML

Svi elementi stranice rad sa bojama organizuju identično:

o Preko predefinisanog engleskog naziva boje (npr. "yellow" za žutu boju)

o Ili preko heksadecimalne RGB vrednosti ispred koje obavezno treba

staviti simbol # (npr. #ffff00)

Boja pozadine se određuje atributom bgcolor u okviru <BODY> taga.

U slučaju da se prilikom navođenja taga BODY izostave opisani atributi, čitač im dodeljuje predefinisane vrednosti.

Na primer ako želite žutu pozadinu tada <BODY> tag treba da glasi:

<body bgcolor="#ffff00"> ili <body bgcolor="yellow">

Pored pozadine, može se menjati i boja teksta, pomodu atributa text. <body bgcolor="#ffff00" text="#008000">

ili <body bgcolor="#ffff00" text="green">

ili <body bgcolor="yellow" text="#008000">

ili <body bgcolor="yellow" text="green">

Kao promena boje, pozadina u obliku slike se definiše pomodu

odgovarajudeg atributa u BODY tagu. Atribut je u ovom slučaju background.

Na primer, ako se želi da se kao pozadina stavi slika "pozadina1.jpg" tada de

odgovarajudi tag izgledati:

<body background="pozadina1.jpg">

Pri definisanju pozadine u obliku slike, dobra praksa je da se definiše

i bgcolor atribut.

<body background="pozadina1.jpg" bgcolor="#0000ff">



5

2013

FONT marker:

Ovaj marker omogućava da se pomoću atributa definiše font koji želimo da

koristimo, njegova veličina, kao i boja. Sastoji se iz početka koji izgleda

kao npr:

<font color=”blue” size=”5” face=”helvetica”> i kraja </font>

Kompletna informacija koja se stavi u ovom slucaju izme|u početka i kraja

bila bi napisana fontom “Helvetica” veličine 5, a boja tog teksta bi bila

plava.

Vežba 3:

<html> <title> moja prva web stranica</title> <body> <font color=”blue” size=”5” face=”helvetica”> <ol> <li> fudbal <li> košarka

<li> ragbi <li> tenis </ol> </font> </body> </html>

IMG tag:

U okviru HTML stranice slika se prikazuje pomodu <IMG> taga. Ovaj tag mora imati

bar jedan atribut src atribut koji definiše naziv, i eventualno lokaciju,

grafičkog fajla koji se želi prikazati u okviru stranice.

<img src="slika.gif">

left - postavlja sliku uz levu marginu: <img src="slika.gif"

align="left">

right - postavlja sliku uz desnu marginu: <img src=" slika.gif"

align="right">

top - poravnava sliku sa vrhom slova u tekudoj liniji: <img src=" slika.gif" align="top">

bottom - poravnava sliku sa donjom ivicom slova: <img src=" slika.gif"

align="bottom">

middle - postavlja sliku tako je donja ivica slova na sredini slike: <img

src=" slika.gif" align="middle">

absmiddle - postavlja sliku tako da se sredina slike i sredina slova

poklapaju:

<img src=" slika.gif" align="absmiddle">

Da bi se promenila originalna veličina slike, željena veličina se može definisati pomodu dva atributa: height i width. <img src=" slika.gif" height="50%“ width="50%">

U okviru stranice može se definisati i debljina granice pomodu atributa border

čija se vrednost zadaje u pikselima.

<img src=" slika.gif" border="5">

Alt atribut de u slučaju da čitač korisnika stranice iz bilo kog razloga

ne učita sliku, na onom mestu gde bi trebalo da bude slika prikazati tekst koji predstavlja vrednost ovog atributa.

<img src=" slika.gif" alt="Broj osam">

Linkovi

Veze između različitih stranica se nazivaju linkovi ili hiperveze. One



6

2013

omogudavaju jednostavan prelazak sa jednog mesta na stranici na drugo mesto unutar same stranice ili na sasvim novoj stranici. Linkovi koji se mogu

definisati u okviru jedne HTML stranice mogu se podeliti na tri grupe:

krajnja pozicija se nalazi na stranici koja je u okviru iste aplikacije

i nalazi se na istom serveru gde i stranica sa polaznom pozicijom,

krajnja pozicija se nalazi na stranici koja ne pripada istoj aplikaciji,

ved se nalazi na drugom serveru, krajnja pozicija pripada istoj stranici kao i polazna pozicija

Za sve linkove definicija početne pozicije se dobija korišdenjem taga <A>. Opšti izgled ovog taga je:

<A atribut> ... </A>.

Sintaksa ovog taga podrazumeva da se u okviru polazne pozicije opišu:

fizička pozicija polazne pozicije i

fizička lokacija krajnje pozicije.

Polazna pozicija označava na stranici mesto sa koga se prelazi na neki drugi

deo stranice i definiše se pomodu atributa href:

<A HREF= adresa krajnje pozicije> polazna pozicija sa koje se prelazi na

krajnju </A>

Link na stranicu u okviru istog servera. Najjednostavniji slučaj rada sa linkovima je prelazak na stranicu u okviru istog servera. Kod ove vrste

linkova koristi se tag <A> sa atributom href i nazivom stranice do koje se

želi da se napravi veza.

<a href="Prva.html"> Veza do stranice Prva.html </a>

Da bi se pristupilo stranici izvan servera potrebno je navesti celu web

adresu te stranice. Opšti oblik adrese koja se pojavljuje kao vrednost href

atributa je:

<a href="http://www. etf.bg.ac.yu/"> Link ka Elektrotehnickom fakultetu </a>

Link na istu stranicu

Za ovu vrstu linkova prvo se napravi oznaka na mestu na stranici gde se nalazi

krajnja pozicijia. Oznaka se dobija pomodu atributa name u <A> tagu:

<A NAME= ime_krajnje_pozicije> tekst krajnje pozicije sa koje se prelazi iz

polazne pozicije </A>

na polaznoj poziciji navodi se tag sa imenom krajnje pozicije:

<A HREF="#ime_krajnje_pozicije"> tekst polazne pozicije </A>

na krajnjoj poziciji se navodi tag koji definiše ime krajnje pozicije:

<A NAME= " ime_krajnje_pozicije "> tekst krajnje pozicije </A>

<html> <head><title> link u okviru iste stranice</title></head> <h2>programiranja </h2> <ol> <li> <a href="#html"> web i jezik html </a> ; <li> <a href="#java"> programski jezik java </a> <li> <a href="#uvodc"> uvod u c</a> </ol> <h3> <a name="html"> web i jezik html</a> </h3> <p><br></p> <p><br> </p> <p><br> </p> <h3> <a name="java"> programski jezik java </a> </h3>



7

2013

<p><br> </p> <p><b</p> <p><br> </p> <h3> <a name="uvodc"> uvod u c </a> </h3> <p><br></p><p><br></p><p><br></p></ul> </body> </html>

Slika kao link

Slika u HTML dokumentu može predstavljati i polazni čvor u hipervezi. Dolazna

adresa se tada navodi kao kod običnog linka, a umesto teksta koji se može aktivirati navodi se tag IMG.

<A HREF="URL dolazne datoteke"> "tag IMG za željenu sliku"</A>

<a href="Primer.html"><img src="slika.gif"></a>

Link za elektronsku poštu

Linkovi se mogu iskoristiti i za pisanje nove mail poruke pomodu default programa za elektronsku poštu

<a href="mailto: [email protected]"> Posaljite e-mail poruku! </a>

TABLE marker:

Ovaj marker se koristi za formiranje tabela na web stranicama.

<table> - oznaka za početak markera

</table> - oznaka za kraj markera.

U početni deo markera <table> mogu se smestiti različiti atributi, a najčešće

se koriste sledeća tri:

border – označava granice izmedju polja odnosno širinu granice izmedju

polja u pikselima:

cellpaddding – koristi se za širinu polja u tabeli

cellspacing – koristi se za širinu prostora izmedju polja;

Primer markera sa svim gore navedenim atributima bi bio:

<table border=”1” cellpadding =”10” cellspacing=”5”>

Uz marker <table> uobičajeno je korišćenje druge tri vrste markera i to:

<tr> u paru sa </tr> za obeležavanja početka tj. zavrsetak novog

reda;

<th> u paru sa </th> za obeležavanje zaglavlja tabele;

<td> u paru sa </td> označava pojedinačno polje;

Vežba 4 :

<Html>

<Head><Title> Rad sa tabelama u HTML - u </title></head>

<body>

<H2> Ovde demonstriram rad sa tagovim vezanim za tabele</H2>

<P>

<H4>Upotrebio sam: </H4>

<P>

<ul type=’disc”>

<li> cellpadding – rastojanje izmedju sadrržaja ćelije i njene

granične linije

<li> cellspacing – rastojanje izmedju pojedinih ćelija tabele

<li> table border="2" – debljina granične linije u pixselima

<li> th width="33% -definiše 1/3 veličine prozora

</ul>

<p> <p>

<table border="2" cellpadding="10" cellspacing="20">

<tr>



8

2013

<th width="33%"><font face="Arial" size="2"> Ime: </font></th>

<th width="33%"><font face="Verdana" size="2"> Prezime: </font></th>

<th width="33%"><font face="Verdana" size="2"> Zvanje: </font></th>

</tr>

<tr>

<td><font face="Verdana" size="2"> Pera </font></td>

<td><font face="Verdana" size="2"> Perić </font></td>

<td><font face="Verdana" size="2"> student </font></td>

</tr>

</table>

</body>

</Html>

HTML dopušta mogudnost da se pojedine delije tabele protežu duž više redova ili kolona tabele.

Ovakav efekat se može postidi pomodu atributa colspan i rowspan, koji se

ubacuju u <td> ili <th> tag one delije koja se želi posebno da formatira.

Vrednost ovih atributa se zadaje brojem kolona ili redova tabele duž

kojih treba da se prostire data delija.

U prvu ćeliju u sledećem primeru, je postavljena slika tipa GIF pod nazivom

space.gif. ovo je neophodno stoga što svaka delija tabele mora imati neki sadržaj, inače browser je neće prikazati.

Vežba 5:

<html> <title> Slozena tabela </title> <table border="4" width="40%"> <tr> <th rowspan="2" colspan="2"><img src="space.gif"></th> <th colspan="6"><h3> DANI U NEDELJI:</h3> </th> </tr><tr> <th width="20%"><H4> ponedeljak</H4> </th> <th width="20%"><H4> utorak</H4></th>



9

2013

<th width="20%"><H4> sreda</H4></th> <th width="20%"><H4> cetvrtak</H4></th> <th width="20%"><H4> petak</H4></th> </tr><tr> <th rowspan="5"> C <p> A <p> S <p> O <p> V <p> I <p> </th> <th> 1. </th> <td> srpski </td> <td> istorija</td> <td> fizicko</td> <td> pevanje</td> <td> spavanje</td> </tr><tr> <th> 2. </th> <td> word</td> <td> C#</td> <td> mreze </td> <td> access</td> <td> baze</td> </tr> <tr> <th> 3.</th> <td> matematika</td> <td> HTMl</td> <td> mreze </td> <td> baze</td> <td> baze</td> </tr> <tr> <th> 4. </th> <td> gradjansko</td> <td> XML</td> <td> spavanje</td> <td> baze </td> <td> baze </td> </tr> <tr> <th> 5. </th> <td> pascal</td> <td> AutoCAD</td> <td> spavanje</td> <td> programiranje</td> <td> delphi</td> </tr> </table> </body> </html>

Vežba 6:

Documents

1. Internet programiranje - HTMLInternet programiranje - HTML HTML (HyperText Markup Language) je veoma jednostavan jezik koji služi za izvršavanje programa na daljinu. HTML stranice