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
VVEEBB ddiizzaajjnn VVeelljjaa MMiillaannoovviićć
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. <!------ komentar ------>
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:
msc Velimir Milanovic
VVEEBB ddiizzaajjnn VVeelljjaa MMiillaannoovviićć
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:
msc Velimir Milanovic
VVEEBB ddiizzaajjnn VVeelljjaa MMiillaannoovviićć
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">
msc Velimir Milanovic
VVEEBB ddiizzaajjnn VVeelljjaa MMiillaannoovviićć
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
msc Velimir Milanovic
VVEEBB ddiizzaajjnn VVeelljjaa MMiillaannoovviićć
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>
msc Velimir Milanovic
VVEEBB ddiizzaajjnn VVeelljjaa MMiillaannoovviićć
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>
msc Velimir Milanovic
VVEEBB ddiizzaajjnn VVeelljjaa MMiillaannoovviićć
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>
msc Velimir Milanovic
VVEEBB ddiizzaajjnn VVeelljjaa MMiillaannoovviićć
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:
msc Velimir Milanovic