01 - Osnove HTML-a
Šta je HTML?
- HTML je jezik za opisivanje web strana
- HTML - Hyper Text Markup Language
- Markup language je skup markup tagova
HTML tagovi
- Tag je ključna reč okružena sa < i >, npr. <html>
- Tagovi su najčešće u paru, npr. <b> i </b>
- Prvi je start tag (opening tag), a drugi end tag (closing tag)
- Ne razlikuju se velika i mala slova – preporuka je mala
HTML dokument = Web strana
- Web browser čita HTML dokument i prikazuje ga kao web stranu
- Primer:
- <!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>...</h1>
<p>...</p>
</body>
</html>
- <!DOCTYPE html>
- Ime HTML dokumenta se završava sa .htm ili .html
- Za pregled u browser-u VIEW -> SOURCE / PAGE SOURCE
HTML elementi (Elements)
- HTML element je sve od start taga do end taga
- Neki HTML elementi nemaju sadržaj i zatvaraju se u start tagu
- Većina HTML elemenata mogu da i maju dodatne atribute
- Mogu se ugnježdavati (!)
HTML atributi (Attributes)
- Atributi obezbeđuju dodatne informacije o elementu
- Uvek se navode u start tagu
- Pišu se u obliku imeatributa="vrednostatributa"
HTML naslovi (Headings)
- Koriste se tagovi <h1> do <h6>
- <h1>Naslov</h1>
- Važnost pravilne upotrebe naslova
HTML pasusi (Paragraphs) / prelomi reda (Line Breaks)
- Koriste se tagovi <p> i <br />
- <p>prvi red<br />drugi red</p>
HTML veze (Links)
- Koristi se tag <a>
- <a href="http://skola.kraguljac.com/">Klikni ovde</a>
- Veza može pokazivati na bilo koji resurs na netu - HTML stranu, sliku, zvučnu ili video datoteku...
- Target atribut određuje gde se otvara link
- <a href="http://skola.kraguljac.com/" target="_blank">Klikni ovde</a>
- Name atribut određuje imenovano sidro u HTML dokumentu
- <a name="mesto">nešto</a>
- <a href="#mesto">Klikni ovde</a>
- Slanje mail-a
- href="mailto:Ova adresa el. pošte je zaštićena od spambotova. Omogućite JavaScript da biste je videli.?Subject=PredmetPoruke"
HTML slike (Images)
- Koristi se tag <img>
- <img src="/slika.jpg" />
- Alt atribut određuje alternativni tekst za sliku
- <img src="/slika.gif" alt="Opis slike" />
- Podešavanje širine / visine
- Atributi width i height
HTML linije (Lines)
- Koristi se tag <hr />
HTML komentari (Comments)
- Piše se u obliku <!-- Tekst komentara -->
Beline
- Browser uklanja dodatne razmake i dodatne prazne linije u toku prikazivanja strane
- Bilo koji broj praznih linija, kao i bilo koji broj razmaka se računaju kao jedan razmak
HTML formatiranje teksta
- Koriste se tagovi za formatiranje (Formatting Tags):
- <b> - podebljani (bold) tekst
- <big> - veća slova
- <em> - naglašen tekst
- <i> - kurziv (italic) tekst
- <small> - manja slova
- <strong> - jača sloba, podebljani tekst
- <sub> - indeks
- <sup> - eksponent
- <ins> - umetnuti tekst
- <del> - obrisani tekst
- <code> - računarski kod
- <kbd> - tekst sa tastature
- <samp> - primer računarskog koda
- <tt> - telegrafski (teletype) tekst
- <var> - promenljiva
- <pre> - preformatirani tekst
- <abbr> - skraćenica
- <acronym> - skraćenica (akronim)
- <address> - adresa
- <bdo> - smer teksta
- <blockquote> - duži navod
- <q> - kraći navod
- <cite> - citat
- <dfn> - definicija
HTML zaglavlje (Head)
- <head> je kontejner za elemente zaglavlja - <title>, <style>, <meta>, <link>, <script>, <noscript> i <base>
- <title> - Definiše naslov dokumenta koji se koristi i za bookmark i prikaz rezultata na pretraživaču
- <base> - Određuje osnovni URL za sve relativne linkove na stranici
- <link> - Veza ka eksternim sadržajima koji se ugrađuju u stranicu
- <style> - Definisanje stilova za elemente koji se koriste na stranici
- <meta> - Razni dodatni podaci o stranici - description, keywords, author, last modified
- <meta name="author" content="Pera Peric">
- <script> - Definisanje skriptova koji će se koristiti na stranici
HTML stilovi (Styles)
- Stilovi obezbeđuju univerzalan način za doterivanje HTML elemenata
- Mogu se primeniti direktno na HTML element korišćenjem style atributa ili indirektno pomoću posebne CSS datoteke
- Primeri:
- Boja pozadine - <body style="background-color:yellow">
- Font, boja, veličina - <p style="font-family:courier new; color:red; font-size:20px">
- Poravnanje - <h1 style="text-align:center">
HTML tabele (Tables)
- Koriste se sledeći tagovi:
- <table> - za tabelu
- <tr> - za red
- <td> - za ćeliju
- <th> - za ćelije u zaglavlju
- <caption> - za naslov (odmah iz table taga)
- Sadržaj ćelije može biti tekst, slike, liste, pasusi, forme, horizontalne linije, tabele...
- Atributi (bolje je da se koristi CSS, tj. atribut style):
- border - određuje okvir
- colspan - spaja kolone
- rowspan - spaja redove
- cellpadding - dodaje prostor oko sadržaja ćelija
- cellspacing - dodaje prostor između ćelija
- bgcolor – postavlja boju pozadine
- background – postavlja sliku kao pozadinu
- width/height – postavljaju širinu/visinu u px ili %
- align – određuje poravnanje sadržaja
- Da bi tabela očuvala pravilnu strukturu u prazne ćelije treba staviti
HTML liste (Lists)
- Nenumerisana lista (Unordered List)
- Počinje <ul> tagom
- Svaka stavka počinje <li> tagom
- Atribut type:
- square - kvadrat
- circle - krug
- disc - disk
- Numerisana liste (Ordered List)
- Počinje <ol> tagom
- Svaka stavka počinje <li> tagom
- Atribut type:
- A - velika slova
- a - mala slova
- I - rimski brojevi
- i - mali rimski brojvi
- 1 - normalna numeracija (podrazumevano)
- Atribut start (ol) - Promena početnog znaka liste
- Atribut value (li) - Promena početnog znaka liste
- Lista definicija (Definition List)
- <dl> - lista definicija
- <dt> - pojam
- <dd> - definicija pojma
- Ugnježdene liste
HTML forme (Forms)
- Sadrže polja (ili dugmad) koja korisnik može da popuni traženim podacima ili učini izbor između više ponuđenih opcija i unetu informaciju vrati vlasniku stranice
- Forma je oblast koja sadrži elemente forme koji omogućavaju korisniku unos informacija:
- Tekst polja (text fields)
- Tekst oblasti (textarea fields)
- Padajući meniji (drop-down menus)
- Radio dugmad (radio buttons)
- Polja za potvrdu (checkboxes)
- itd.
- <form> tag označava formu
- <input> tag označava element za unos
- tekst polje – <input type="text" name="ime" />
- size – dužina polja za tekst
- maxlength – maksimalan broj karaktera koji se mogu uneti u polje
- value – početni tekst
- tekst polje za lozinku – <input type="password" name="ime" />
- radio dugme – <input type="radio" name="ime" value="vrednost" />
- checked – ako postoji, radio dugme je odmah selektovano
- polje za potvrdu – <input type="checkbox" name="ime" value="vrednost" />
- checked – ako postoji, polje za potvrdu je odmah selektovano
- tekst polje – <input type="text" name="ime" />
- Tekst oblast – <textarea name="ime">Početni tekst</textarea>
- col – broj kolona
- row – broj vrsta (redova)
- wrap – da li se tekst prelama
- Padajuća lista
- <select name="ime">
- <option value="vrednost">tekst opcije</option>
- selected="selected" – odmah selektovana opcija
- size="veličina" – pravi običnu listu
- multiple – selekcija više stavki u običnoj listi
- Polje za biranje datoteka
- <input type="file" name="ime" />
- size – dužina polja za tekst
- maxlength – maksimalan broj karaktera koji se mogu uneti u polje
- accept – tip fajla koji je dozvoljeno izabrati
- image/gif, text/plain, application/pdf...
- Action atribut forme i Submit dugme
- <form action="program.asp" method="get"><br />Username:<br /><input type="text" name="ime" /><br /><input type="submit" value="Posalji" /><br /></form>
- Reset dugme
- <input type=“reset" value=“Obrisi">
- <fieldset> – skupovi polja, za grupisanje srodnih stavki
- <legend> - naslov za grupu polja
HTML Iframe
- Služi da se prikaže stranica/sadržaj unutar stranice
- <iframe src="/URL"></iframe>
- <iframe src="/demo_iframe.htm" width="200" height="200"></iframe>
- iframe kao target za link
- <iframe src="/nesto.html" name="iframe_ime"></iframe>
<p><a href="http://www.kraguljac.com" target="iframe_ime">Klikni ovde</a></p>
- <iframe src="/nesto.html" name="iframe_ime"></iframe>
HTML slike kao mape
- Atribut usemap – definiše koja se mapa koristi
- <img src="/slika.gif" usemap="#imemape" />
- <map> – definiše mapu
- <map name="imemape">
- <area> – definiše oblast na mapi (slici) koja se koristi kao link
- <area shape="rect" coords="0,0,82,126" href="/strana.htm" alt="tekst" />
- Atribut shape – određuje oblik aktivne oblasti
- rect – pravougaonik
- circle – krug
- poly – poligon
- Atribut coords – određuje koordinate ključnih tačaka oblasti
- rect – x1,y1,x2,y2
- circle – x,y,radius
- poly – x1,y1,x2,y2,..,xn,yn
- gornji levi ugao slike je 0,0
- Atribut href – određuje odredište za link
- Atribut nohref – određuje da oblast nema pridružen link
- Atribut target – određuje gde se otvara link
- Atribut alt – određuje alt tekst za oblast
HTML entiteti i simboli
- Rezervisani znakovi u HTML-u se moraju zameniti entitetima
- Znaci kojih nema na tastaturi se takođe često menjaju entitetima
- &ime_entiteta; ili &#kod_entiteta;
- Dijakritički znaci, akcenti
- à - à
- á - á
- â - â
- ã - ã
- Ò - Ò
- Ó - Ó
- Ô - Ô
- Õ - Õ
- Neki češće korišćeni znaci
- -   - neprelamajući razmak
- < - < - manje od
- > - > - veće od
- & - & - ampersand
- ¢ - ¢ - cent
- £ - £ - funta
- ¥ - ¥ - jen
- € - € - evro
- © - © - kopirajt
- ® - ® - registrovana oznaka
- ∑ - ∑ - suma
HTML kodiranje (Character Set)
- HTML4
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- HTML5
- <meta charset="UTF-8">
HTML Uniform Resource Locator - URL
- scheme://host.domain:port/path/filename
- scheme - Definiše vrstu Internet servisa
- http - HyperText Transfer Protocol
- https - Secure HyperText Transfer Protocol
- ftp - File Transfer Protocol
- file - Lokalna datoteka
- host - Definiše host za domen (za http je www)
- domain - Definiše ime Internet domena (npr. w3schools.com)
- port - Broj porta na hostu (za http je 80)
- path - Putanja na serveru (ako nije navedeno dokument je u korenom direktorijumu sajta)
- filename - Ime dokumenta/resursa
HTML5
- HTML5 je najnoviji standard za HTML
- <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Sadrzaj dokumenta...
</body>
</html> - U odnosu na HTML4 neki elementi su ukinuti, a dodato je dosta elemenata za grafiku, medije, forme, geografsku poziciju korisnika...
- Novi elemnti za strukturu dokumenta
- <header> - zaglavlje celog dokumenta ili odeljka
- <main> - Glavni sadržaj dokumenta
- <nav> - Navigacija na stranici, meni
- <section> - Odeljak u dokumentu, tematski deo dokumenta, obučno ima svoj naslov
- <article> - Nezavistan sadržaj na stranici (post na forumu, blog post, vest, komentar...)
- <aside> - Sadržaj koji prati glavni sadržaj, sajdbar
- <figure> - Poseban sadržaj unutar glavnog sadržaja (ilistracija, dijagram, fotografija, listing...)
- <figcaption> - Natpis za <figure>, postavlja se iznad ili ispod
- <footer> - Podnožje celog dokumenta ili odeljka
- <details> - Dodatni detalji koje korisnik može da vidi ili sakrije
- <summary> - Vidljivo zaglavlje za element <details>
- <mark> - Označeni/istaknuti tekst
- <time> - Datum/vreme
- Da bi ovo radilo korektno u starijim pregledačima stavlja se
- header, section, footer, aside, nav, main, article, figure { display: block; }
- Da bi ikako radilo u starijim IE stavlja se
- <!--[if lt IE 9]>
<script src="/html5shiv.js"></script>
<![endif]--> - HTML5 Shiv se preuzima sa code.google.com/p/html5shiv/
- <!--[if lt IE 9]>
- Novi tipovi polja za unos
- color - Odabir boje
- Odaberi omiljenu boju: <input type="color" name="favcolor">
- date - Odabir datuma
- Rodjendan: <input type="date" name="bday">
- datetime - Unos datuma i vremena sa vremenskom zonom
- Rodjendan (datum i vreme): <input type="datetime" name="bdaytime">
- datetime-local - Unos datuma i vremena bez vremenske zone
- Rodjendan (datum i vreme): <input type="datetime-local" name="bdaytime">
- email - Mejl uz kontrolu unosa
- E-mail: <input type="email" name="email">
- month - Odabir meseca i godine
- Vazenje kartice (mesec i godina): <input type="month" name="cartvalid">
- number - Unos numeričke vrednosti uz ograničenja vezana za tip
- Kolicina (izmedju 1 i 5): <input type="number" name="quantity" min="1" max="5">
- Ograničenja - max, min, step (korak), value (podrazumevana vrednost)
- range - Broj unutar zadatog opsega uz ograničenja za tip
- <input type="range" name="points" min="1" max="10">
- search - Polje za pretragu (ponaša se kao tekstualno polje)
- Google pretraga: <input type="search" name="googlesearch">
- tel - Unos telefonskog broja
- Telefon: <input type="tel" name="usrtel">
- time - Odabir vremena
- Odaberite vreme: <input type="time" name="usr_time">
- url - Unos URL adrese uz validaciju pri slanju podataka sa forme
- Omiljeni sajt: <input type="url" name="homepage">
- week - Odabir sedmice i godine
- Godisnji odmor: <input type="week" name="week_year">
- color - Odabir boje
- Novi elementi za forme
- <datalist> - Lista predefinisanih vrednosti za polje za unos, omogućava automatsko kompletiranje unosa
- <input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
- <input list="browsers">
- <keygen> - Omogućava sigurnu autentifikaciju korisnika
- <output> - Prikaz rezultata izračunavanja
- <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
- <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
- <datalist> - Lista predefinisanih vrednosti za polje za unos, omogućava automatsko kompletiranje unosa
- Novi atributi za forme
- Za <form> element:
- autocomplete - Popunjavanje na osnovu ranije unetih vrednosti, vrednost je on ili off
- <form action="demo_form.asp" autocomplete="on">
- novalidate - Logički atribut, ako je naveden ne radi se validacija vrednosti unetih u polja
- <form action="demo_form.asp" novalidate>
- autocomplete - Popunjavanje na osnovu ranije unetih vrednosti, vrednost je on ili off
- Za <input> element:
- autocomplete - Popunjavanje na osnovu ranije unetih vrednosti, vrednost je on ili off, radi za text, search, url, tel, email, password, datepickers, range i color
- <input type="email" name="email" autocomplete="off">
- autofocus - Logički atribut, ako je naveden polje automatski dobija fokus po učitavanju stranice
- <input type="text" name="fname" autofocus>
- form - Definiše kojim sve formama pripada polje za unos
- formaction - Definiše akciju različitu od podrazumevane akcije za formu, radi za type="submit" i type="image"
- <input type="submit" formaction="demo_admin.asp" value="Submit as admin">
- formenctype - Definiše vrstu kodiranja rezličitu od podrazumevanog kodiranja za formu, radi za type="submit" i type="image", a samo za forme sa method="post"
- <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
- formmethod - Definiše metod za slanje podataka sa forme različit od podrazumevanog metoda za formu, radi za type="submit" i type="image"
- <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST">
- formnovalidate - Logički atribut, ako je naveden forma se šalje bez validacije
- <input type="submit" formnovalidate value="Submit without validation">
- formtarget - Navodi gde će se prikazati rezultat slanja podataka sa forme različto od podrazumevanog za formu, radi za type="submit" i type="image"
- <input type="submit" formtarget="_blank" value="Submit to a new window">
- height and width - Definiše visinu i širinu u <input type="image"> radi rezervisanja mesta za sliku pri učitavanju
- <input type="image" src="/img_submit.gif" alt="Submit" width="48" height="48">
- list - Povezuje polje za unos sa predefinisanom listom
- min i max - Definišu najmanju i najveću dozvoljenu vrednost za polje za unos, rade za number, range, date, datetime, datetime-local, month, time i week
- multiple - Logički atribut, ako je naveden korisnik može da unese više od jedne vrednosti u polje za unos, radi za email i file
- Odaberite slike: <input type="file" name="img" multiple>
- pattern - Definiše regularni izraz za validaciju vrednosti u polju za unos
- <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
- placeholder - Savet o vrednosti koja se unosi, stoji u polju pre unosa vrednosti, radi za text, search, url, tel, email i password
- <input type="text" name="fname" placeholder="First name">
- required - Logički atribut, ako je naveden označava polje sa obaveznom vrednošću, radi za text, search, url, tel, email, password, date pickers, number, checkbox, radio i file
- <input type="text" name="usrname" required>
- step - Korak pri odabiru vrednosti, radi za number, range, date, datetime, datetime-local, month, time i week
- <input type="number" name="points" step="3">
- Za <form> element:
- Canvas
- <canvas> je kontejner za crtanje grafike "u letu" korišćenjem skriptova
- To je pravougaona oblast na stranici
- Podrazumevano je da nema okvir i sadržaj, ali se to može menjati pomoću CSS-a
- Moguće je da postoji više ovakvih elemenata na stranici koji se razlikuju po id atributu
- <canvas id="myCanvas" width="200" height="100"></canvas>
- Crtanje na kanvasu
- <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
- <script>
- Linija
- var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
- var c = document.getElementById("myCanvas");
- Krug
- var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
- var c = document.getElementById("myCanvas");
- Ispunjeni tekst
- var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
- var c = document.getElementById("myCanvas");
- Konturni tekst
- var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
- var c = document.getElementById("myCanvas");
- Linearni gradijent
- var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
- var c = document.getElementById("myCanvas");
- Radijalni gradijent
- var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
- var c = document.getElementById("myCanvas");
- Slika na kanvasu
- var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
- var c = document.getElementById("myCanvas");
- Inline SVG (Scalable Vector Graphics)
- Koristi se XML format, dakle čist tekst
- Sve prednosti vektorske grafike
- Svaki element i atribut u SVG grafici može se animirati
- Ugradnja SVG grafike direktno na stranicu
- <svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
- <svg width="300" height="200">
- Video
- <video width="320" height="240" controls>
<source src="/movie.mp4" type="video/mp4">
<source src="/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> - Atribut control prikazuje kontrole play, pause, volume
- Preporuka je da se uvek navedu željene dimenzije, slično kao i za sliku
- Tekstualni deo je tu za pregledače koji ne podržavaju prikazivanje videa na ovaj način
- Od više navedenih <source> elemenata pregledač će iskoristiti prvi koji može
- Pomoću JavaScript-a se mogu iskoristiti DOM metode i svojstva za upravljanje videom
- <video width="320" height="240" controls>
- Audio
- <audio controls>
<source src="/horse.ogg" type="audio/ogg">
<source src="/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
- <audio controls>
- Geolokacija
- Koristi se za određivanje lokacije korisnika
- Zbog privatnosti potrebna je potvrda korisnika
- Prost primer određivanja lokacije bez obrade grešaka
- <script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
</script>
- <script>
- Prikaz na mapi korišćenjem nekog od dostupnih servisa, npr. Google map
- function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false;
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
- function showPosition(position) {
- Drag & Drop
- Make an Element Draggable
- <img draggable="true">
- What to Drag - ondragstart and setData()
- function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
- function drag(ev) {
- Where to Drop - ondragover
- event.preventDefault()
- Do the Drop - ondrop
- function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
- function drop(ev) {
- Make an Element Draggable
- Web Storage
- U HTML5 web stranice mogu da čuvaju podatke lokalno u korisničkom pregledaču, ranije su se koristili kolačići za to
- Koriste se dva objekta:
- window.localStorage - Podaci se čuvaju bez vremenskog ograničenja
- code.sessionStorage - Podaci se čuvaju samo za tekuću sesiju, tj. do zatvaranja kartice
- Parovi ime/vrednost se uvek čuvaju kao stringovi
- Provera da li pregledač omogućava ovo:
- if(typeof(Storage) !== "undefined") {
// Moze da se koristi localStorage/sessionStorage
} else {
// Nema podrske za koriscenje
}
- if(typeof(Storage) !== "undefined") {
- Objekat localStorage
- localStorage.setItem("lastname", "Smith");
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); - localStorage.lastname = "Smith";
document.getElementById("result").innerHTML = localStorage.lastname; - localStorage.removeItem("lastname");
- localStorage.setItem("lastname", "Smith");
- Objekat sessionStorage
- Koristi se slično kao localStorage
- Primer koji broji koliko puta je kliknuto na dugme u toku sesije:
- if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
- if (sessionStorage.clickcount) {
- Application Cache
- Omogućava da se sačuva offline verzija web aplikacije kreiranjem cache manifest datoteke
- Web Workers
- Web worker je JavaScript koji radi u pozadini i tako ne umanjuju performanse web stranice
- Primer:
- <body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
}
</script>
</body>
- <body>
- Server-Sent Events
- Server-Sent Events omogućavaju web stranici da povuku ažurirane verzije sa servera
- Multimedija
- HTML5 podržava kao video format samo MP4, WebM i Ogg
- HTML5 podržava kao audio format samo MP3, WAV i Ogg
- Plug-ins
- Pomoćne aplikacije su mali programi koji dodaju neku funkcionalnost pregledaču - npr. Java apleti i Adobe Flash Player
- Mogu se koristiti za prikazivanje mapa, skeniranje virusa, proveru prijave na e-banking...
- <object> element
- <object width="400" height="50" data="bookmark.swf"></object>
- Tekst koji se navede između tagova se prikazuje ako pregledač ne podržava <object>
- <embed> element
- <embed width="400" height="50" src="/bookmark.swf">
- Ne zatvara se u tagu
- Ne može da ima alternativni tekst
- Sounds / Audio
- Najzgodnije je obezbediti više varijanti:
- <audio controls>
<source src="/horse.mp3" type="audio/mpeg">
<source src="/horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="/horse.mp3">
</audio>
- <audio controls>
- Alternativa je da se samo postavi link i da se koristi pomoćna aplikacija
- <a href="/horse.mp3">Play the sound</a>
- Najzgodnije je obezbediti više varijanti:
- Videos
- Najzgodnije je obezbediti više varijanti:
- <video width="320" height="240" controls>
<source src="/movie.mp4" type="video/mp4">
<source src="/movie.ogg" type="video/ogg">
<object data="movie.mp4" width="320" height="240">
<embed src="/movie.swf" width="320" height="240">
</object>
</video>
- <video width="320" height="240" controls>
- Alternativa je da se samo postavi link i da se koristi pomoćna aplikacija
- <a href="/intro.swf">Play a video file</a>
- Najzgodnije je obezbediti više varijanti:
- YouTube Videos
- YouTube iFrame
- <iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
- YouTube Embedded
- <embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash">
- YouTube iFrame