HTML5

Nekada je HTML omogućavao samo prikazivanje teksta bez ikakvih dodataka i imao je svega 20 funkcija. Bilo je to u vrijeme njegovog nastanka, 1993. godine, nakon čega je konstantno unaprjeđivan. HTML5 posljednja je i najnaprednija verzija ovog koda koja je dugo čekala na konačnu standardizaciju kako bi bila podržana od strane najvećih pretraživača.

Novim standardima istovremeno su nadoknađeni nedostaci i „bagovi” iz prethodnih verzija, a jezik je postao nezavisan na druge softvere kao što su Flash Player, Silverlight i Java. Nova HTML5 sintaksa u stanju je da sama izvršava sve funkcije koje su umjesto nje izvršavali ovi programi, pojačana i praćena novom verzijom CSS-a (CSS3).

Dizajniran da isporučuje skoro sve što želite online bez dodatnih programa kao što su dodaci (plug-in) pretraživačima. On radi sve od animacija do aplikacija, muzike i videa, i također se koristi za kreiranje kompliciranih aplikacija koje rade u Internet pretraživaču.

Također je cross-platform, što znači da nije važno da li koristite tablet ili smartphone, notebook ili Smart TV; ako vaš preglednik podržava HTML 5 raditi će glatko i bez problema.

On u stvari predstavlja tri tipa koda:

HTML, koji obezbeđuje strukturu

Cascading Style Sheets (CSS), koji vodi računa o izgledu

JavaScript, koji daje funkcionalnost i čini da se stvari dešavaju.

https://www.youtube.com/watch?v=mzPxo7Y6JyA&feature=youtu.be

Pretraživači su do sada čuvali relativno malu količinu podataka, uglavnom kolačiće

(cookie) pomoću kojih web sajtovi prate svoje posjetioce. Veći kapacitet za pohranu

podataka koji ima HTML5 znači da Web aplikacije mogu raditi bez Internet

konekcije.

Stranice mogu biti „sjajnije“ s više fontova i raznih efekata

Mogućnost povlačenja i puštanja objekata na web stranici i reakcija na pomicanje

kursora http://hakim.se/experiments/html5/trail/03/

Interaktivne igre pokrenute u pretraživaču bez plug-in

Reprodukcija zvuka i videa bez plug-in.

Tehnologija WebGL je JavaScript API za renderiranje interaktivnih 3D računalne

grafike i 2D grafike u bilo kojem web preglednika bez uporabe dodataka.

http://bookcase.chromeexperiments.com/

NOVE NAREDBE ZA DEFINIRANJE STRUKTURA STRANICE

Umjesto da se gnijezde brojni div tagovi, sada možemo iskoristiti nove HTML5 naredbe za stvaranje bolje strukture stranica. Imena strukturnih HTML5 naredbi ukazuju na nešto smisleno o sadržaju ili o ulozi koju definiraju.

HTML5 uvodi pregršt novih naredbi koje bi nam pomogle definirati strukturu web stranice. Nove naredbe za definiranje strukture i odjeljaka web stranice u HTML5 su:

<header>,

<nav>,

<article>,

<section>,

<aside>

<footer>,

<hgroup> i

<h1>…<h6>

<header></header> naredba dizajnirana za zaglavlje na stranice. Header često sadrži jedan ili više naslova oznake od h1 do h6. Međutim, zaglavlje može sadržavati i druge elemente obično logotip, search form . Unatoč svom imenu, header nije nužno postaviti na početak stranice.

<header id="page-header">

<h1>Company Name</h1>

<div id="logo">

<a href="putanja">

<img src="images/graphic-logo.gif">

</a>

</div>

</header>

<nav></nav> naredba predstavlja dio sa navigacijskim linkovima na stranici, a koji je povezan s drugim stranicama ili unutar same stranice. Naredba se može koristiti više puta, možemo ga koristiti unutar headera, ali i kod navigacija s strane. Nisu svi linkovi unutar naredbe <nav>. Obično< footer> naredba ima listu linkova koji ne trebaju biti unutar <nav> naredbe Oni se mogu oblikovati pomoću CSS neovisno jedan od drugog.

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<article></article> naredba koja određuje nezavisni, samostalni sadržaja. Naredba <article> bi se trebala koristiti za sadržaje na stranici koji su neovisni od ostatka stranice.

Potencijalni sadržaji za naredbu <article> su:

Forum post

Blog post

News story

Comment

<article>

<h1>Google Chrome</h1>

<p>Google Chrome is a free, open-source web browser developed by Google,

released in 2008.</p>

</article>

<section></section> naredba koja predstavlja dio odjeljaka-poglavlja stranice u kojem se tematski grupira sadržaj. Svaki <section> treba identificirati, obično uključivanjem naslova (h1-h6 elementa).

Nemojte koristiti <section> elementa u zamjenu za <div> tag.

<section>

<h1>Heading</h1>

<p>Bunch of awesome content</p>

</section>

<aside></aside> naredba koja predstavlja dodatne sadržaje kao što su na primjer sidebar ili bilo koji drugi sadržaj za koji smatrate kako je odvojen od glavnog sadržaja, a trebao bi imati veze s okolnim sadržajem u kojem se nalazi.

<p>My family and I visited The Epcot center this summer.</p> <aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

<footer></footer> naredba koja se nalazi u podnožju stranice obično sadrži podatke o naslovu web stranice, autorska prava ili poveznice na srodne dokumente.

<footer>

<p>Posted by: Hege Refsnes</p>

<p>Contact information: <a href="mailto:someone@example.com">

someone@example.com</a>.</p>

</footer>

<hgroup></hgroup> naredba koja se može staviti na mjestu gdje se nalazi više naslova. U strukturi se prikazuje samo jedan naslovi to prvi.

<h1>…<h6> Naslovi ukratko opisuju temu sekciji u kojem se nalaze. h1 naslov ima najveću vrijednost, a naslov h6 najmanju vrijednost

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>

STRUKTURA DOKUMENTA U HTML4

Primjer 1 a) <div class="section" id="forest-elephants" >

<h1>Forest elephants</h1>

<p>In this section, we discuss the lesser known forest elephants.

...this section continues...

<div class="subsection" id="forest-habitat" >

<h2>Habitat</h2>

<p>Forest elephants do not live in trees but among them.

...this subsection continues...

</div>

<div class="subsection" id="diet" >

<h2>Diet</h2>

<p>Forest elephants do not live in trees but among them.

...this subsection continues...

</div>

<h1>Mongolian gerbils</h1>

</div>

b) 1. Forest elephants

1.1 Habitat

<h1>Forest elephants</h1>

<p>In this section, we discuss the lesser known forest elephants.

...this section continues...

<h2>Habitat</h2>

<p>Forest elephants do not live in trees but among them.

...this subsection continues...

<h2>Diet</h2>

<h1>Mongolian gerbils</h1>

struktura

1. Forest elephants

1.1 Habitat

1.2 Diet

2. Mongolian gerbils

STRUKTURA DOKUMENTA U HTML5

Primjer 1 <section>

<h1>Forest elephants</h1>

<section>

<h1>Introduction</h1>

<p>In this section, we discuss the lesser known forest elephants…</p>

</section>

<section>

<h1>Habitat</h1>

<p>Forest elephants do not live in trees but among them…</p>

</section>

<aside>

<p>advertising block</p>

</aside>

</section>

<footer>

<p>(c) 2010 The Example company</p>

</footer>

Struktura

1. Forest elephants

1.1 Introduction

1.2 Habitat

1.3 Untitled (aside)

Primjer 2

<section>

<h1>Forest elephants</h1>

<p>In this section, we discuss the lesser known forest elephants.

...this section continues...

<section>

<h2>Habitat</h2>

<p>Forest elephants do not live in trees but among them.

...this subsection continues...

</section>

</section>

<section>

<h3>Mongolian gerbils</h3>

<p>In this section, we discuss the famous mongolian gerbils.

...this section continues...

</section>

Struktura

1. Forest elephants

1.1 Habitat

2. Mongolian gerbils

Primjer 3

<section>

<h1>Forest elephants</h1>

<p>In this section, we discuss the lesser known forest elephants.

...this section continues...

<h2 class="implicit subsection">Habitat</h2>

<p>Forest elephants do not live in trees but among them.

...this subsection continues...

</section>

Struktura 1. Forest elephants

1.1 Habitat

Primjer 4

<section>

<h1>Forest elephants</h1>

<p>In this section, we discuss the lesser known forest elephants.

...this section continues...

<h1 class="implicit section">Mongolian gerbils</h1>

<p>Mongolian gerbils are cute little mammals.

...this section continues...

</section>

Struktura:

1. Forest elephants

2. Mongolian gerbils

Primjer

<h1>Mammals</h1>

<h2>Dogs</h2>

<p>In this section, we discuss the dogs.

...this section continues...

<section>

<h3>Forest elephants</h3>

<p>In this section, we discuss the lesser known forest elephants.

...this section continues...

<h3>Mongolian gerbils</h3>

<p>Hordes of gerbils have spread their range far beyond Mongolia.

...this subsection continues...

<h2>Reptiles</h2>

<p>Reptiles are animals with cold blood.

...this subsection continues...

</section>

Struktura:

1. Mammals

1.1 Dogs

1.2 Forest elephants (

1.3 Mongolian gerbils

1.4 Reptiles

Primjer

<section>

<h1>Forest elephants</h1>

<section>

<h2>Introduction</h2>

<p>In this section, we discuss the lesser known forest elephants</p>

</section>

<section>

<h2>Habitat</h2>

<p>Forest elephants do not live in trees but among them. Let's

look what scientists are saying in "<cite>The Forest Elephant in

Borneo</cite>":</p>

<blockquote>

<h1>Borneo</h1>

<p>The forest element lives in Borneo...</p>

</blockquote>

</section>

</section>

Struktura:

1. Forest elephants

1.1 Introduction

1.2 Habitat

OSNOVNA STRUKTURA HTML5 DOKUMENTA

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="keywords" content="">

<meta name="description" content="">

<title>Page Title</title>

<link rel="stylesheet" href="css/reset.css" type="text/css">

<link rel="stylesheet" href="css/common.css" type="text/css">

<script src="js/jquery-1.3.2.min.js"></script>

</head>

<body>

</body>

</html>

Za početak koristimo novi DOCTYPE koji stavimo na prvu liniji HTML dokumenta. <! DOCTYPE html>

Naredbe unutar head-a

<!—meta tagovi --> <meta charset="utf-8"> <title>Page Title</title> <meta name="keywords" content=""> <meta name="description" content="">

<!-- stylesheets --> <link rel="stylesheet" href="css/reset.css" type="text/css"> <link rel="stylesheet" href="css/common.css" type="text/css">

<!-- javascript --> <script src="js/jquery-1.3.2.min.js"></script>

<!--conditional comments --> zbog Internet Explorera <!--[if IE]> <script src="js/html5.js"></script> <![endif]-->

ili

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->