Za vežbe iz HTML-a potrebno nam je nekoliko (besplatnih) programa.

Pre svega, potreban nam je tekst editor. Iako može poslužiti bilo koji (čak i običan Notepad), bolje je ako koristimo neki koji bojom ističe različite oznake unutar dokumenta i koji ima podršku za Unicode, odnosno UTF-8 (drugim rečima za latinicu i ћирилицу). Jedan od takvih programa je PsPad 4.5.3.

Za kreiranje kaskadnih stilova (CSS), poslužiće nam TopStyle Lite 3.1

Konačno, za pregled dokumenata, poslužiće nam bilo koji Web browser, poput npr. Mozilla Firefox-a.

Web stranice imaju ekstenziju .htm ili .html. Postoje i posebni tipovi web dokumenata koji imaju drugačije ekstenzije (.php, .asp, .jsp, itd.). Slike se ne snimaju unutar dokumenta već su izdvojene u zasebne fajlove. Uobičajeno su slike u .gif, .jpg ili .png formatu. Noviji web čitači prepoznaju i vektorski format grafike - .svg.

Stilove za formatiranje dokumenta obično izdvajamo u .css fajlove. Isto je možemo učiniti sa JavaScript programima koji mogu biti izdvojeni u .js fajlovima.

Početna strana sajta gotovo uvek treba da se zove index.html (ili ređe default.html), što saznajemo od web provajdera kod koga postavljamo sajt.

Dobra ideja je da se fajlovi snimaju sa imenima koja se sastoje samo iz malih slova engleske abecede i cifara. LINUX serveri razlikuju mala i velika slova, što znači da lako možemo da pogrešimo u linkovima do fajlova.

Fajlovi mogu biti organizovani u foldere i podfoldere. Ovo nam je značajno zbog načina na koji ćemo se povezati sa određenim fajlom. Pogledajmo sledeći primer:

Osnovni folder (označen kao "/") sadrži foldere grafika, mapa i fajlove index.html i profil.jpg. Unutar foldera "grafika", nalazi se folder slike i fajlovi strelica.png i okvir.png. Unutar foldera "slike", nalaze se fajlovi pozadina.jpg i foto.jpg.

Povezivanje se vrši tako što se HTML fajlovi povezuju sa drugim HTML fajlovima i svim ostalim resursima (slike, stilovi i sl). Veza se može uspostaviti navođenjem relativne ili apsolutne putanje do fajla. Apsolutna putanja navodi se od osnovnog foldera sajta pa do konkretnog fajla, dok se relativna navodi od foldera u kome se nalazi fajl iz koga se vrši povezivanje.

Ako bismo želeli da u fajlu index.html prikažemo sliku foto.jpg, navođenjem apsolutne putanje, to bi izgledalo ovako:

Na potpuno isti način bismo prikazali tu sliku i u fajlu prikaz.html. Pošto su u pitanju apsolutne putanje (uvek počinju kosom crtom), potpuno je nebitno kako su fajlovi raspoređeni jedan u odnosu na drugi.

Međutim, ako koristimo relativne putanje, onda moramo da vodimo računa gde se nalaze fajlovi jedan u odnosu na drugi. Ako bismo želeli da u fajlu index.html prikažemo sliku foto.jpg, to bi izgledalo ovako (obratite pažnju da sada nema vodeće kose crte):

Ali ako bismo želeli da u fajlu prikaz.html prikažemo sliku foto.jpg, to bi izgledalo ovako:

Dvotačka označava nadfolder, što znači da putanja mora prvo da "izađe" iz foldera mapa u kome se nalazi prikaz.html, a tek onda da "uđe" u foldere grafika i slike. Pogledajmo još nekoliko primera:

Suštinski posmatrano, HTML fajl je tekstualni dokument. Sam standard je relativno jednostavan za učenje i razumevanje, tako da je HTML stranicu moguće kreirati i u običnom tekst editoru. Naravno, postoji i veliki broj besplatnih ili komercijalnih programa namenjenih da proces kreiranja Internet prezentacije učine što više intuitivnim.

Inače, izgled web stranice u potpunosti zavisi od HTML-a i CSS-a, pošto web čitač:

• ignoriše svaki novi red (enter) i poistovećuje ga sa jednim razmakom
• ignoriše višestruke razmake i tab-ove i takođe ih svodi na samo jedan razmak

HTML kod prvenstveno služi za definisanje delova dokumenta.

Uopšteno, oznaka ima sledeću strukturu:
<oznaka> tekst </oznaka>
Nazivi oznaka se uobičajeno pišu malim slovima, ali HTML5 dozvoljava da ih pišemo kako želimo.

Na primer, oznaka "<b>" se koristi ako je potrebno da jedan deo teksta bude naglašen (uobičajeno ispisan podebljanim slovima). U HTML fajlu:
Tekst koji sledi je <b>vrlo važan</b> i morate ga pažljivo čitati.

Na ekranu, kako ga tumači web čitač:

Tekst koji sledi je vrlo važan i morate ga pažljivo čitati.

Oznake najčešće imaju i neke dodatne atribute (parametre). Pravila za atribute su sledeća:

• atributi se uvek zadaju u početnom delu oznake (posle naziva same oznake), nikada u završnom delu
• zadaju se u obliku: naziv_param = "vrednost" (naziv atributa bez razmaka, znak jednakosti i vrednost atributa pod navodnicima)
• može ih biti više - u tom slučaju se odvajaju razmakom
• njihov redosled nije bitan

Tako bi oznaka sa parameterima bila napisana na sledeći način:
<oznaka param1="vrednost" param2="vrednost" ...> tekst </oznaka>

Na primer, oznaka kojom se u dokument ubacuje link, sadrži atribut kojim se definiše URL na koji link vodi korisnika:
Posetite <a href="http://www.visokaturisticka.edu.rs"> sajt Škole </a> za sve informacije o upisu.

U web čitaču izgleda ovako:

Posetite sajt Škole za sve informacije o upisu.

Postoji i posebna vrsta oznaka, koje nemaju deo za zatvaranje, odnosno koji ne mogu da obuhvate tekst i druge oznake. Jednostruke oznake imaju posebnu sintaksu:
<oznaka />

Odnosno:
<oznaka param1="vred" param2="vred"... />

Ovakva je na primer oznaka koja nalaže web čitaču da na određeno mesto ubaci sliku ili oznaka kojom se zadaje prelazak u novi red (web čitač, inače sam vrši prelom teksta u sledeći red, kada tekst premaši širinu prozora).
Ovo je <br /> prelom linije.

Dobijamo ovakav rezultat:

Ovo je
prelom linije.

Kao što je već rečeno, novi redovi, kao i uzastopni razmaci u HTML fajlu se ignorišu od strane web čitača. Ako je u HTML fajlu zadato:

Ovo je
i dalje       jedna linija.

U web čitaču to izgleda ovako:

Ovo je i dalje jedna linija.

Zbog toga koristimo oznaku za prelazak u novi red i specijalan razmak. Inače specijalni znakovi HTML-a su:

• &nbsp; za razmak koji se neće automatski prelamati na kraju reda
• &lt; za znak manje: <
• &gt; za znak veće: >
• &quot; za navodnik: "
• &apos; za apostrof: '
• &amp; za ampersend: &

Na bilo kom mestu unutar HTML dokumenta, moguće je postaviti komentar. Komentari se obično koriste da bolje objasne HTML tekst, što pomaže kod kasnijeg menjanja. Tekst komentara se neće videti na stranici.
<!-- Tekst komentara -->

Primer komentara:
<!-- Ovo je komentar -->

Postoje posebne oznake koje, već određuju glavne odeljke same HTML stranice. Po tome, HTML dokument ima sledeću strukturu:

Kao što vidimo, ceo dokument se nalazi unutar jedne posebne oznake - html.

U delu za zaglavlje head, nalaze se informacije o samoj stranici - ko je autor, u kom programu je stranica kreirana, koja kodna strana se koristi, ključne reči, naziv stranice i slično.

U glavnom delu - body nalazi se sam sadržaj stranice, tj. tekst, slike, tabele itd. Sve oznake koje su ovde opisane upotrebljavaju se u ovom delu, osim ako nije naglašeno da su u pitanju oznake zaglavlja.

Inače, dokument obično počinje doctype linijom, koja se navodi ispred svega i koja definiše tip dokumenta. Primeri ovih linija se mogu pronaći u W3C specifikacijama, a primer linije koja definiše standardni (striktno) XHTML dokument bi bila:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Srećom, HTML5 standard je veoma pojednostavio ovu liniju, tako da je danas dovoljno napisati:

<!doctype html>

Unutar zaglavlja HTML dokumenta moguće je koristiti nekoliko specifičnih oznaka.

Oznaka title služi za definisanje naslova stranice koji se pojavljuje u naslovnoj liniji web čitača.

<title>Uvod u HTML</title>

Oznaka meta ima višestruku primenu. Jedna od najvažnijih je za određivanje kodnog rasporeda. U sledećem primeru vidimo kako se po XHTML standardu definiše UNICODE UTF-8 raspored koji pored ostalih pisama podržava i srpsku latinicu i ćirilicu.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

HTML5 je značajno pojednostavio način za navođenje kodne strane, tako da je danas dovoljno otkucati:

<meta charset="utf-8" />

Pomoću META taga možemo definisati ključne reči koje opisuju stranicu i koje pretraživači uzimaju u obzir pri indeksiranju.
<meta name="keywords" content="HTML, XHTML, stilovi, uvod, turisticka, skola" />

Postoje i druge primene oznake META, ali one ovde neće biti objašnjene.

Pošto se za formatiranje HTML dokumenta prema W3C standardu koriste CSS stilovi, ovde ćemo pokazati način da se na stranici iskoriste stilovi definisani u posebnom fajlu. Stilove je moguće definisati u okviru same stranice, korišćenjem oznake style. Unutar ove oznake možemo pozvati stilove koji su definisani u zasebnom fajlu.

Drugi način, koji takođe možemo koristiti za povezivanje stilova, je pomoću link oznake:

Preporuka je da, zbog preglednosti i mogućnosti da ponovo koristimo iste stilove, uvek kreiramo stilove u zasebnom CSS fajlu.

Unutar HTML dokumenta i unutar zaglavlja (znači i unutar head i unutar body odeljka) mogu se umetati delovi programa pisani u JavaScript jeziku, korišćenjem script oznake. Ipak, preporuka je da JavaScript ograničimo na zaglavlje. JavaScript je programski jezik pomoću koga je moguće dinamizirati izgled stranice (npr. padajući meniji, dugmići koji se "uključuju" kada pređemo mišem preko njih i još mnogo toga).

Takođe, moguće je povezati dokument sa jednim ili više JavaScript programa koji su napisani u zasebnim JS fajlovima:

U ovom odeljku ćemo objasniti nekoliko najkorišćenijih oznaka za definisanje delova dokumenta. Neke od ovih oznaka imaju i prateće parametre koji preciznije definišu izgled teksta, ali ti atributi su prema HTML5 standardu zastareli i preporuka je da se za formatiranje koriste stilovi. Sve ovde navedene oznake mogu imati opšte atribute o kojima će biti više reči kasnije.

<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 />
<wbr> mogući prelom unutar veoma dugačke reči, kako bismo obezbedili da je web čitač neće prelomiti na pogrešnom mestu
Oto<wbr />rino<wbr />laringo<wbr />log

<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> i <strong> se koriste za obeležavanje naglašenog (bold) teksta.
<b> Podebljani tekst </b>

<i> i <em> se koriste za obeležavanje teksta koji je po smislu drugačiji - obično se prikazuje kao kurziv (italic).
<i> Kurzivni tekst </i>

<mark> služi za izdvajanje "obeleženog" teksta - obično se prikazuje kao tekst obojen markerom.
<mark> Obeležen tekst </mark>

<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 predstavlja promenu teme u tekstu - obično prikazuje horizontalnu liniju.
<hr />

Oznake koje se malo ređe koriste:

<aside> definiše "dodatnu informaciju" ili "komentar" vezan za tekst.
<dfn> definiše "definiciju" u tekstu.
<address> definiše "kontakt informacije" o autoru dokumenta.
<small> definiše "sitna slova" u tekstu.
<q> definiše kratak citat u tekstu - obično se prikazuje unutar navodnika.
<blockquote> definiše blok-citat u tekstu - obično se prikazuje malo uvučeno.

<del> definiše "obrisan", tj. nevažeći tekst - kada želimo da se vide promene koje su urađene u dokumentu - obično se prikazuje precrtano.
<ins> definiše novi tekst koji je "naknadno dodat" - obično podvučen.

<section> definiše sekciju unutar HTML dokumenta (npr. poglavlje).
<article> definiše poseban vid sekcije - "članak" u dokumentu.
<header> definiše zaglavlje HTML dokumenta ili sekcije (npr. delovi koji se nalaze u vrhu stranice). Nemojte nikako mešati header sa head oznakom.
<footer> definiše podnožje HTML dokumenta ili sekcije (npr. kontakt, adresa, linkovi...).
<menu> definiše odeljak sa menijem unutar stranice.
<nav> definiše odeljak koji sadrži linkove na druge stranice (navigaciju).

<pre> definiše "unapred formatirani" tekst - obično zadržava entere i višestruke razmake.
<code> definiše deo kompjuterskog programa u dokumentu.
<samp> definiše rezultat kompjuterskog programa.
<kbd> definiše primer ulaza sa tastature.

Pri kreiranju web stranica intenzivno se koriste dve oznake koje služe kao "oznake za sve ostalo" (nepreporučljivo po svim standardima, ali veoma prisutno u praksi):

<div> definiše blok unutar HTML dokumenta. Ova oznaka se uglavnom koristi za pozicioniranje i grupisanje delova unutar stranice. Sama 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. Sama 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 neke od opisanih oznaka.

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

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:

Vodite račina da bi unutar UL, odnosno OL oznake trebale da se pojavljuju samo LI elementi. Unutar samih LI oznaka mogu se naći druge HTML oznake.

Unutar liste možemo imati i podliste. Podlistu (stavke unutar stavki) ubacujemo kao novu UL ili OL listu unutar odgovarajuće LI oznake. Ovde imamo primer u kome smo unutar druge stavke uređene liste umetnuli neuređenu podlistu.

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" />

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 <tr> definiše red tabele, a oznaka <td> sadrži pojedinu ćeliju. Ova oznaka ima dva parametra koji se koriste ukoliko želimo da spojimo više ćelija u jednu:

• colspan - definišemo preko koliko kolona se konkretna ćelija proteže.
• rowspan - definišemo preko koliko redova se konkretna ćelija proteže.

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.

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.

Atributi stila

Prema W3C (WWW Consortium) XHTML standardu, razdvajaju se sadržina (definisana tekstom i HTML oznakama) i formatiranje, odnosno izgled (definisan stilovima).

U HTML-u postoji nekoliko atributa (parametara) koji su standardni za skoro sve oznake. Među njima su možda najvažniji atributi stila kojima se precizno definiše formatiranje (izgled) teksta koji oznaka obuhvata.

• id - Prvenstveno služi da jedinstveno identifikuje elemenat (oznaku) u kome se nalazi. Ova jedinstvena identifikacija se kasnije može koristiti da bi se taj elemenat kontrolisao pomoću JavaScript-a. Osim toga, za takvu jedinstvenu oznaku je moguće definisati i poseban stil prikaza.
• class - Ovaj atribut se koristi da bi se za prikaz elementa upotrebio neki već postojeći stil.
• style - Parametar style se koristi za definisanje stila unutar same oznake. Ukoliko postoji već definisani stil u atributu class, onda će vrednost uneta u atributu style izmeniti odgovarajuće elemente zadatog stila. Drugim rečima style je "jači" od class.

U sledećem primeru obeležavamo link kao "prvi_link" (atribut id), zadajemo mu unapred definisan stil "primer" (preko atributa class) kojim se određuje veličina i boja slova, pozadina, kurziv i sl., a pomoću atributa style specijalno za ovaj link zadajemo stil ispisa bez donje linije.
<a href="http://www.visokaturisticka.edu.rs" id="prvi_link" class="primer" style="text-decoration: none;"> Visoka turistička škola </a>

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.

Atributi događaja

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.