Visoka turistička škola

NAPOMENA:
Oznaka <a> služi za kreiranje linkova ka drugim stranama ili sajtovima. Detaljnije će biti objašnjena u odeljku Linkovi.

O atributima događaja ćemo više govoriti u delu koji se bavi jezikom JavaScript. Za sada je bitno da znamo da za određene oznake postoje i specijalni atributi kojima se definiše reagovanje na određeni događaj. Ovi događaji mogu biti:

• Događaji prozora (onload i onunload) - Šta se dešava kada se HTML dokument učita u web browser ili napusti.
• Događaji elemenata forme (onchange, onsubmit, onreset...) - Šta se dešava kada se elementi forme menjaju, kada se klikne na dugmence Submit i sl.
• Događaji tastature (onkeydown, onkeypress, onkeyup) - Šta se dešava kada korisnik pritiska tastere na tastaturi.
• Događaji miša (onclick, onmouseover, onmouseout...) - Šta se dešava kada korisnik pomera miš preko elementa ili klikne na njega.

U primeru je prikazano kako koristimo JavaScript da promenimo boju elementa. Pre svega zadali smo atribut class kojim zadajemo stil "primer" (zeleni tekst, kao u prethodnom odeljku). Atributom id zadali smo naziv ovog elementa "test", koji bi trebao da bude jednistven na celoj HTML stranici. Atribut onmouseover definiše da se, kada korisnik pređe mišem preko elementa, poziva unapred definisana JavaScript funkcija "promenaBoje()" koja će izmeniti neke od elemenata stila (boju pozadine i teksta). Sa druge strane, atribut onmouseout definiše da se, kada korisnik pomeri miš van ovog elementa, poziva JavaScript funkcija "vratiBoju()".
<span class="primer" id="proba" onmouseover="promenaBoje();" onmouseout="vratiBoju();"> Pređite mišem preko ovog teksta </span>

Pređite mišem preko ovog teksta

NAPOMENA:
promenaBoje() i vratiBoju() su funkcije kreirane u JavaScript-u, skript jeziku koji se koristi za dinamiziranje sadržaja HTML stranice. Dok ne naučimo osnove JavaScripta, koristićemo unapred pripremljene funkcije.
Oznaka SPAN će biti objašnjen u odeljku Oznake za formatiranje teksta.

U ovom odeljku ćemo objasniti nekoliko najkorišćenijih oznaka za formatiranje. Neke od ovih oznaka imaju i prateće parametre koji preciznije definišu izgled teksta, ali ti atributi su prema W3C standardu zastareli i preporuka je da se za formatiranje koriste stilovi. Podrazumeva se da ovi tagovi imaju standardne atribute.

<p> služi za obeležavanje pasusa teksta
<p> Tekst pasusa </p>

<br> je jednostruka oznaka koja služi za prelazak u sledeći red
<br />

<h1>..<h6> oznake služe za obeležavanje naslova. Pri tom se <h1> koristi za glavne naslove, <h2> za podnaslove, <h2> za pod-podnaslove, itd.
<h1> Naslov </h1>

<b> se koristi za obeležavanje podebljanog (bold) teksta.
<b> Podebljani tekst </b>

<i> se koristi za obeležavanje kurzivnog (italic) teksta.
<i> Kurzivni tekst </i>

<tt> se koristi za obeležavanje teksta ispisanog fontom fiksne širine (monospace, Courier font).
<tt> Monospace tekst </tt>

<sup> i <sub> oznake se koriste za obeležavanje teksta koji će biti ispisan u eksponentu odnosno indeksu.
^Eksponent, _Indeks

<hr> je jednostruka oznaka koja prikazuje horizontalnu liniju
<hr />

<div> definiše blok unutar HTML dokumenta. Ova oznaka se uglavnom koristi za pozicioniranje i grupisanje delova unutar stranice. Sam po sebi, ova oznaka neće proizvesti skoro nikakav efekat, upravo zbog toga ima veliku upotrebnu vrednost pošto se može potpuno kontrolisati upotrebom stilova.
<div> Elementi bloka </div>

<span> je slična <div> oznaci, s tim što se koristi za obeležavanje dela teksta. Sam po sebi takođe ne proizvodi nikakav efekat, sve dok se ne upotrebi u kombinaciji sa nekim stilom.
<span> Obeleženi tekst </span>

U primeru koji sledi iskoristićemo sve prikazane oznake.

Jedna od najvažnijih karakteristika Web dokumenata je što su oni predstavljeni ne običnim tekstom, već tzv. "hipertekstom". Hipertekst je tekst u kome su određene reči, rečenice ili pojmovi drugačije ispisani (npr. drugom bojom) i što služe kao tzv. "likovi", odnosno veze sa drugim stranicama koje su vezane za te pojmove.

Te stranice mogu biti deo iste prezentacije, a mogu biti i na sasvim drugim Internet sajtovima.

Apsolutni link se obično koristi kada želimo da pristupimo stranici na drugom sajtu. URL (Uniform Resource Locator) uvek počinje sa "http://" iza koga se navodi sam naziv sajta i putanja do stranice. Primer: http://www.visokaturisticka.edu.rs/info/vest154.html

Relativni link se uvek odnosi na neku stranicu unutar sajta. Ako je stranica u istom folderu, može se navesti samo naziv te stranice, kao npr: strana.html

Ako se stranica nalazi u nekom podfolderu, navodi se putanja od stranice sa linkom do tražene stranice. Npr: dokumenti/vazno/strana.html

Ako se strana nalazi u nadfolderu, taj folder se obeležava kao "..", npr: ../docs/strana.html

Ponekad je zamorno navoditi nadfoldere i podfoldere, pogotovu ako želimo da koristimo isti link na više različitih strana. Tada možemo korisiti apsolutne linkove, kao npr: http://www.nassajt.com/docs/strana.html ili samo /docs/strana.html (kada link počinje kosom crtom, uvek se odnosi na osnovni folder sajta)

Ako želimo da link služi za pisanje e-maila, možemo ga navesti kao npr: mailto:ime@adresa.com

Linkovi ne moraju uvek da vode na HTML fajlove, već i na slike, PDF dokumente i sl. Ukoliko browser ne može da otvori fajl, ponudiće posetiocu da ga snimi na svoj računar.

Za linkove se koristi oznaka <a>, koja u svom najjednostavnijem obliku izgleda kao:
<a href="URL"> Tekst linka </a>

Na primer:
<a href="http://www.w3schools.com/default.asp">W3Schools Online Web Tutorials</a>

Što u dokumentu izgleda kao link:

W3Schools Online Web Tutorials

Ova oznaka ima i jednu posebnu mogućnost. Ukoliko se navede atribut "name", na tom mestu će biti obeležen tzv. bookmark, odnosno mesto unutar stranice koje može da se referencira linkom.
<a name="naziv" />

Na primer, bookmark:
<a name="pocetak" />

Može se pozvati linkovima
<a href="#pocetak"> Početak strane </a>, ako je link na istoj stranici, odnosno
<a href="index.html#pocetak"> Početak strane </a>, ako se poziva bookmark sa druge stranice.

Početak strane

Svaka boja na računaru se dobija kao kombinacija tri komponente: crvene (R), zelene(G) i plave (B). Da bi se neka boja u potpunosti odredila, potrebno je odrediti nivo svake od ovih komponenti.

Uobičajeno, nivo svake komponente zauzima vrednost jednog bajta, odnosno od 0 do 255.

Boja se navodi posle znaka "taraba" (#) koji slede heksadekadne oznake za R, G i B vrednosti.

U heksadekadnom zapisu vrednosti od 0 do 255 su vrednosti od 00 do FF.

Tako bi najcrvenija crvena boja imala zapis  #FF0000 , najintenzivnija zelena bi bila  #00FF00 , a najplavlja plava  #0000FF . Crna boja je  #000000 , a bela  #FFFFFF . Neka od nijansi sive bi bila boja kojoj su sve tri komponente jednake, kao npr.  #808080 .

U HTML-u je moguće kreirati dve vrste lista - neuređenu listu i numerisanu listu. Neuređena lista (bullets) se obeležava oznakama
<ul> ...stavke liste... </ul>
a numerisana lista oznakama
<ol> ...stavke numerisane liste... </ol>

Same stavke unutar bilo koje od ove dve liste se navode unutar oznaka
<li> pojedinačna stavka </li>

Primer za neuređenu listu bi bio:

Primer numerisane liste:

Unutar HTML fajla se mogu prikazivati slike. Slike su date kao zasebni fajlovi i pozivaju se preko URL-a koji vodi do slike, što znači da prikazana slika čak i ne mora da bude na istom sajtu.

Da bi se slika prikazala koristi se jednostruka <img> oznaka:
<img src="putanja do slike" alt="alternativni tekst" width="sirina slike" height="visina slike" />

Kao što se vidi, ova oznaka ima nekoliko atributa koje možemo koristiti:

• src - obavezan atribut. Definiše putanju do fajla slike.
• alt - definiše tekst koji se prikazuje ako slika iz nekog razloga nije pronađena ili ne može da se prikaže.
• width - određuje širinu slike u pikselima ili procentima. Ukoliko parametar nije naveden, slika se prikazuje u svojoj originalnoj širini.
• height - slično kao gornji atribut, određuje se visina slike.

Primer za prikaz slike:
<img src="adorable.gif" alt="Mali meda" width="100" height="92" />

NAPOMENA:
Slike su obično u JPG ili GIF formatu. Iako mnogi web čitači danas prepoznaju i druge formate slika, ova dva formata se koriste tradicionalno na Internetu.

Tabele su do nedavno predstavljale jedan od najboljih HTML alata za formatiranje sadržaja stranice. Danas to više nije slučaj, pošto se pokazalo da su stranice komponovane pomoću tabela teške za održavanje. Ipak, i dalje imaju svoju upotrebnu vrednost za prikaz tabelarnih podataka.

HTML tabele su vrlo fleksibilne - pojedine ćelije se mogu protezati na više redova i kolona, tako da je u krajnjoj liniji moguće ostvariti bilo kakav kompozicijski zahtev. Kada se dođe do granice mogućnosti tabele, uvek je moguće smestiti novu tabelu unutar ćelije već postojeće tabele.

Svaka tabela se sastoji iz redova i kolona, s tim što je, zbog prirode HTML-a, njena struktura hijerarhijski organizovana. Tabela sadrži redove, dok redovi sadrže ćelije. Nije neophodno navesti koliko ima redova, odnosno ćelija, i time se omogućava fleksibilnost tabela.

Oznaka kojom se označava tabela je <table>, unutar nje se nalazi jedan ili više redova označenih kao <tr>, unutar kojih se nalazi nekoliko (ne obavezno isti broj) ćelija koje su označene kao <td>. Sadržaj ćelija tabele se uvek mora nalaziti u <td> odeljcima. Dakle struktura tabele bi izgledala ovako:

Opciono, unutar tabele se mogu koristiti i oznake <thead>, <tfoot> i <tbody>. Ove oznake služe za grupisanje redova unutar tabele, da bi se izdvojilo zaglavlje, podnožje i glavni deo sa podacima. Ako se ove oznake koriste, obavezno je da sekcije tabele budu navedene upravo po redosledu zaglavlje, podnožje, pa tek onda telo tabele.

Oznaka <table> ima određen broj parametara koji se mogu zadati.

• border - služi za zadavanje debljine linija kojima se iscrtava tabela. Npr. border="4" predstavlja linije debljine 4 piksela (tačkice). Vrednost "0" označava tabelu sa nevidljivim linijama.
• cellspacing - određuje veličinu razmaka između ćelija.
• cellpadding - određuje veličinu margine unutar svake ćelije. To je broj piksela koliko će sadržaj ćelije biti odvojen od ivica ćelije.
• width - služi za zadavanje širine tabele. Može biti zadat kao broj (piksela) ili kao procenat. Npr. width="250" znači da će tabela imati širinu od 250 piksela, dok width="50%" znači da će tabela imati širinu jednaku polovini okvira ili stranice unutar koje se nalazi tabela.
• frame - određuje koje spoljne linije tabele će biti iscrtane debljinom koja je zadata u border parametru. Ima nekoliko mogućih vrednosti koje mogu da se zadaju:
  • frame="above" - samo gornja ivica,
  • frame="belowe" - samo donja ivica,
  • frame="lhs" - samo leva ivica,
  • frame="rhs" - samo desna ivica,
  • frame="hsides" - gornja i donja,
  • frame="vsides" - leva i desna,
  • frame="box" ili frame="border" - sve četiri stranice i
  • frame="void" - nijedna od ivica se neće crtati.
• rules - određuje način iscrtavanja unutrašnjih linija. Uz ovaj parametar je neophodno koristiti i border parametar. Ima nekoliko mogućih vrednosti:
  • rules="none" - neće se iscrtavati unutrašnje linije,
  • rules="groups" - iscrtava linije oko sekcija tabele,
  • rules="rows" - iscrtavaće se samo horzontalne linije (koje odvajaju redove),
  • rules="cols" - samo samo vertikalne linije (odvajaju kolone),
  • rules="all" - iscrtavaće se sve unutrrašnje linije

Oznaka <tr> definiše red tabele i njeni atributi su:

• align - poravananje, odnosno centriranje po horizontali unutar svih ćelija reda. Moguće vrednosti su:
  • align="right" - poravananje po desnoj strani ćelija,
  • align="left" - poravananje po levoj strani ćelija,
  • align="center" - centriranje unutar ćelija,
  • align="justify" - poravananje po obe strane ćelija,
  • align="char" - poravnanje po određenom znaku u tekstu ćelija.
• char - zadaje se znak po kome se vrši poravanje. Ovo će funkcionisati samo ako je zadata vrednost "char" u atributu align.
• valign - poravnanje, odnosno centriranje po vertikali. Vrednosti koje mogu biti zadate:
  • valign="top" - poravnanje prema vrhu,
  • valign="middle" - vertikalno centriranje,
  • valign="bottom" - poravnanje prema dnu,
  • valign="baseline" - tekst se poravnava tako da u svakoj ćeliji prvi red teksta bude na istoj visini.

Konačno oznaka <td> sadrži pojedinu ćeliju. Ova oznaka ima nekoliko parametara, ali najkorišćeniji su:

• colspan i rowspan - ukoliko želimo da spojimo više ćelija u jednu, definišemo preko koliko kolona (colspan)) i redova (rowspan) se konkretna ćelija proteže.
• align i valign - poravnanje po horizontali i vertikali. Moguće vrednosti su iste kao u odgovarajućim parametrima oznake TR.
• char - zadaje se znak po kome se vrši poravanje. Ovo će funkcionisati samo ako je zadata vrednost "char" u atributu align.

Tagovi <thead>, <tfoot> i <tbody> imaju atribute align, valign i char, koji su već objašnjeni.

Sledi jednostavan primer, gde u prvom redu jedna ćelija pokriva dve kolone, a u drugom redu se nalaze dve ćelije. Postignut efekat je identičan spajanju ćelija u Word-u ili Excel-u. Takođe je primenjeno i poravnanje po horizontali i vertikali. Širina cele tabele je svedena na polovinu širine stranice (prozora) u web čitaču:

U web čitaču ova tabela izgleda ovako:

Da pogledamo još jedan primer kako funkcioniše spajanje ćelija. Recimo da imamo tabelu sa tri reda i po tri ćelije u svakom redu. Ako bismo prvu ćeliju proširili preko dve kolone, a bez uklanjanja bilo koje druge ćelije, dobili bismo deformisanu tabelu.

Pokazalo se da je jedna ćelija u prvom redu višak, što znači da bismo trebali da je uklonimo. U ovom slučaju uklonićemo ćeliju sa brojem 2.

Kako bi se ponašala tabela ukoliko bismo prvu ćeliju proširili preko dva reda, opet bez prethodnog izbacivanja ćelija koje su višak?

Ukoliko ste mislili da će ćelije 4 i 7 da "ispadnu" ispod tabele, prevarili ste se. Ne zaboravite, tabela se sastoji prvenstveno iz redova koji su popunjeni ćelijama, kolone kao takve se nigde ne pominju. Kada smo ćeliju 1 proširili na dva reda, ustvari se pojavio višak u drugom redu.

Grešku ćemo ispraviti ako uklonimo jednu od ćelija iz drugog reda, u ovom slučaju, neka to bude ćelija 4.

Pomoću formi korisnik može uneti neke podatke direktno preko HTML stranice. Forme mogu sadržati elemente koji se najčešće sreću kod korisničkog interfejsa - polja za unos, liste, padajuće liste, okvire za selekciju (checkbox), radiobutton-e i dugmiće koji mogu biti standardni ili u obliku sličice. Postoje i sakrivena polja koja nisu dostupna korisniku, ali imaju neku vrednost. Ovakva polja se koriste za prenos internih podataka.

Podaci koji se unose u formi mogu se proslediti serveru ili obraditi na samoj HTML stranici pomoću JavaScript-a.

Svaka forma je smeštena unutar <form> taga.

Tag <form> ima nekoliko atributa, ali najvažniji su:

• action - Obavezan atribut. Definiše adresu CGI programa ili PHP i sl. dokumenata kome će biti prosleđene vrednosti iz forme.
• method - može imati jednu od moguće dve vrednosti čime se određuje način prosleđivanja podataka. U pitanju su metodi HTTP protokola kojima se definiše prenos podataka od klijenta ka serveru.
  • method="get" - podaci će biti vidljivi u obliku URL-a pri slanju na server. Na taj način je moguće slati podatke i preko običnih linkova, bez korišćenja forme.
  • method="post" - pri prenosu sakriva podatke od korisnika, koristi se ako se prosleđuje veća količina podataka.

Elementi forme se u najvećem broju slučajeva definišu upotrebom <input> taga. Ovaj tag ima veliki broj atributa koji se koriste zavisno od tipa elementa.

• type - Obavezan atribut. Pomoću ovog parametra se definiše tip elementa. Moguće vrednosti su:
  • type="text" - Polje za unos teksta.
  • type="password" - Polje za unos sakrivenog teksta.
  • type="button" - dugmence na formi.
  • type="submit" - SUBMIT dugmence za slanje sadržaja forme.
  • type="reset" - RESET dugmence za brisanje forme.
  • type="image" - Slika koja se ponaša kao SUBMIT dugmence.
  • type="radio" - "Radio" opcija - koristi se za izbor između više mogućnosti, kada je moguće odabrati samo jednu.
  • type="checkbox" - "Checkbox" opcija (štikliranje) - koristi se za višestruki izbor.
  • type="file" - Koristi se za prosleđivanje celog fajla. Prikazuje polje za unos u kome će se ispisati puna putanja do fajla i "Browse" dugmence za izbor fajla.
  • type="hidden" - Nevidljivi elemenat forme koji služi samo da se u njega smeste neki podaci koji se prosleđuju sa svim ostalim.
• name - Obavezan atribut. U ovom atributu se definiše ime elementa forme, po kome se na serveru identifikuje vrednost. Ukoliko je tip elementa "radio" onda se jedinstvena grupa opcija označava istim imenom.
• alt - Alternativni tekst za sliku ako je type="image".
• checked - Ima samo jednu moguću vrednost: "checked". Navodi se bez vrednosti i označava da je elemenat unapred odabran. Koristi se ako je TYPE podešen na "checkbox" ili "radio".
• disabled - Može se navesti samo vrednost "disabled". Koristi se ako želimo da se elemenat forme vidi ali da mu korisnik ne može pristupiti. Ne koristi se ako je TYPE "hidden"
• maxlength - Navodi se broj znakova koji se mogu uneti u polje. Koristi se samo ako je type="text".
• readonly - Može se navesti samo vrednost "readonly". Označava da se vrednost polja za unos ne može menjati. Koristi se samo ako je type="text".
• size - Navodi se broj znakova. Označava veličinu elementa. Ne može se koristiti uz text="hidden".
• src - Navodi se URL do slike koju želimo da prikažemo. Koristi se samo ako je text="image".
• value - Ima višestruko značenje. Za tipove button, submit i reset definiše tekst na dugmencetu. Za checkbox i radio je obavezan i definiše vrednost koja odgovara toj opciji. Za text, password i hidden definiše unapred definisanu vrednost polja. Za tip file se ne može koristiti.

Unutar forme je moguće koristiti i tag <label> za pridruživanje tekstualnih natpisa elementima forme. To znači da ako na formi imamo npr. checkbox kontrolu, moći ćemo da je uključimo ili isključimo samo ako kliknemo na njeno polje, ali pomoću labela, "štikliranje" će biti moguće i ako kliknemo na natpis.

Ovaj tag je jednostavan za korišćenje. Ima samo jedan parametar:

• for - Navodi se identifikacija elementa kome je pridružen. Ova vrednost treba da bude jednaka ID parametru (standardni parametar za sve tagove) elementa forme kome je natpis pridružen.

Padajuće liste se definišu pomoću tagova <select> i <option>:

Tag <select> određuje celu padajuću listu. Njegovi atributi su:

• multiple - Može se navesti samo vrednost "multiple". Ako se ovaj parametar uključi u tag, korisniku će biti omogućeno da odabere više stavki iz liste.
• size - Navodi se broj stavki koje će biti vidljive kada se otvori padajuća lista.
• disabled - Može se navesti samo vrednost "disabled". Koristi se ako želimo da se lista vidi ali da joj korisnik ne može pristupiti.
• name - Obavezan parametar. U ovom atributu se definiše ime liste, po kome se na serveru identifikuje vrednost.

Tag <option> se koristi za definisanje jednog elementa liste. Može se koristiti samo unutar <select> taga. Atributi su:

• selected - Može se navesti samo vrednost "selected". Ako se ovaj parametar uključi u tag, označava da je ova opcija unapred selektovana kada se forma prikaže.
• disabled - Može se navesti samo vrednost "disabled". Koristi se ako želimo da se lista vidi ali da joj korisnik ne može pristupiti.
• value - Obavezan parametar. U ovom atributu se navodi vrednost koja se šalje serveru ako je ova opcija selektovana.

Po nekoliko opcija je moguće grupisati unutar <optgroup> taga. Atributi su:

• label - Obavezan atribut. Označava ime grupe koje će se videti u listi.
• disabled - Može se navesti samo vrednost "disabled". Koristi se ako želimo da se toj grupi opcija ne može pristupiti.

Unos teksta u više linija (u editoru) obezbeđuje tag <textarea>.

Ovaj tag ima svega nekoliko parametara:

• rows - Obavezan atribut. Broj redova koji će se videti. Određuje visinu liste.
• cols - Obavezan atribut. Broj znakova u redu koji će se videti. Određuje širinu liste.
• name - Obavezan parametar. U ovom atributu se definiše ime editora preko koga server prepoznaje uneti tekst.
• disabled - Može se navesti samo vrednost "disabled". Koristi se ako želimo da korisnik ne može pristupiti editoru.
• readonly - Može se navesti samo vrednost "readonly". Označava da se prikazani tekst ne može menjati.

U sledećem primeru su iskorišćeni skoro svi elementi forme:

Okviri (frames) nisu deo striktnog standarda, ali svi web browseri ih i dalje podržavaju. Zahvaljujući ovoj mogućnosti možemo da unutar strane prikažemo jednu ili više zasebnih HTML stranica u posebnim okvirima. Iako je u pitanju oznaka koja ima i deo za otvaranje i deo za zatvaranje, između njih se ne navodi tekst.

Najčešće upotrebljeni parametri kojima se određuje prikaz u okviru su sledeći:

• src - URL adresa do stranice koju želimo da prikažemo u okviru.
• width - Širina okvira (u pikselima ili u procentima).
• height - Širina okvira (u pikselima ili u procentima).
• frameborder - Vrednost može biti "1" da se prikaže linija oko okvira, ili "0" da se ne prikaže.
• scrolling - Definiše prikaz scroll barova. Moguće vrednosti su "no"- ne prikazuje, "yes" - obavezno prikazuje, "auto" - prikazuje ako ima potrebe.