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>
  • 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 &nbsp;

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

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
    • a&#768; - à
    • a&#769; - á
    • a&#770; - â
    • a&#771; - ã
    • O&#768; - Ò
    • O&#769; - Ó
    • O&#770; - Ô
    • O&#771; - Õ
  • Neki češće korišćeni znaci
    • &nbsp; - &#160; - neprelamajući razmak
    • &lt; - &#60; - manje od
    • &gt; - &#62; - veće od
    • &amp; - &#38; - ampersand
    • &cent; - &#162; - cent
    • &pound; - &#163; - funta
    • &yen; - &#165; - jen
    • &euro; - &#8364; - evro
    • &copy; - &#169; - kopirajt
    • &reg; - &#174; - registrovana oznaka
    • &sum; - &#8721; - 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/
  • 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">
  • 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>
    • <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>
  • 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>
    • 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">
  • 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>
    • Linija
      • var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.moveTo(0,0);
        ctx.lineTo(200,100);
        ctx.stroke();
    • Krug
      • var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.arc(95,50,40,0,2*Math.PI);
        ctx.stroke();
    • Ispunjeni tekst
      • var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "30px Arial";
        ctx.fillText("Hello World",10,50);
    • Konturni tekst
      • var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "30px Arial";
        ctx.strokeText("Hello World",10,50);
    • 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);
    • 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);
    • Slika na kanvasu
      • var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var img = document.getElementById("scream");
        ctx.drawImage(img,10,10);
  • 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>
  • 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
  • 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>
  • 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>
    • 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+"'>";
        }
  • 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);
        }
    • 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));
        }
  • 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
        }
    • 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");
    • 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.";
  • 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>
  • 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>
    • Alternativa je da se samo postavi link i da se koristi pomoćna aplikacija
      • <a href="/horse.mp3">Play the sound</a>
  • 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>
    • Alternativa je da se samo postavi link i da se koristi pomoćna aplikacija
      • <a href="/intro.swf">Play a video file</a>
  • 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">
Vi ste ovde: Home Predavanja Četvrta godina Informatički smer - Web dizajn 01 - Osnove HTML-a