NAZAD NA POČETNU Novi HTML elementi NAZAD
Kao što već
znate, HTML5 je uveo mnoštvo novih elemenata i daleko pojednostavio upotrebu
svojim korisnicima. Sada ćemo obraditi par jednostavnijih primjera koje naš
editor podržava, tj.
oni koji su trenutno prihvaćeni kao standard u novijim browserima. Mnoge
funkcije nisu još podržane, pa o njima nažalost možemo pričati samo u
teoriji.
A do novog standarda evo nekih vježbi koje
i sad možemo da uradimo.
Zadatak br.1-ubacimo footer u našu stranicu
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Napisao: Marko Marković</p>
<p><datuma="1.3.2012"></time></p>
</footer>
</body>
</html>
Isprobaj sam
Rezultat
Zadatak br.2-ubacimo header u stranicu
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>Maturski rad</h1>
<p><Datum ="15.3.2012"></time></p>
</header>
<p>Ovaj rad je urađen 15.3.2012.</p>
</article>
</body>
</html>
Vjerovatno ste već primjetili kako između headera i footera svaki tekst koji nije od važnost, tj unutar paragrafa je, neće biti ispisan, i samo služi kao odrednica dizajneru.Isprobajte još solucija, promjenite liniju koda, obrišite nešto, pa posmatrajte šta će se desiti.
Zadatak br.3-ubacimo nav tag u naš kod
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="
G:\My Web Sites\mysite\naslovna.htm
" > naslovna</a>
</nav>
Kao što vidite, nav nam pomaže u navigaciji kroz web stranicu, ispod ove stranice možemo staviti jos vise <a> tagova sa linkovima i tako imati grupu linkova kojom se možemo orjentisati kroz naš sajt.
Zadatak br.4-isprobajmo article tag
<!DOCTYPE html>
<html>
<body>
<article>
<h1>Marutski rad</h1>
<p>Ovaj maturski rad upravo obrađuje dio po imenu article.....</p>
</article>
</body>
</html>
Article tag nam pomaže pri pisanju članaka.
Zadatak br.5- aside tag
<!DOCTYPE html>
<html>
<body>
<p>Ovo je maturski rad</p>
<aside>
<h4>Maturski rad</h4>
<p>Ovaj maturski rad je napisao Aleksandar Đordević</p>
</aside>
</body>
</html>
<Aside> služi za dodavanje nekih informacija sa strane koje nisu toliko potrebne.Isprobaj još: <section>(dio stranice), <summary>(sadržaj) i <time>(za navođenje vremena)
Zadatak br.6-summary i details tagovi
<!DOCTYPE html>
<html>
<body>
<details>
<summary>HTML5</summary>
<p>HTML5 je novi ,inovativni standard HTML-a koji donosi mnoge nove funkcije u
web programiranje </p>
</details>
</body>
</html>
Ovi tagovi su trenutno podržani samo u Google Chrome-u.
Zadatak br.7-<hgroup> tag
<!DOCTYPE html>
<html>
<body>
<hgroup>
<h1>Dobrodošli</h1>
<h2>Ovo je moj rad</h2>
</hgroup>
<p>Ovo je ostatak sadržaja bez "<h>" tagova...</p>
</body>
</html>
Isprobaj sam
Rezultat
Ovaj tag služi za grupaciju svih tagova
od h1 do h6.
Sada da pređemo malo na forme i njihove elemente.
Zadatak br.8-napravimo jednu formu
<!DOCTYPE html>
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" name="name" id="name" placeholder="First and Last" required autofocus/>
<br />
<label for="email">Email:</label>
<input type="email" name="email" id="email" required/>
<br />
<label for="url">Your URL:</label>
<input type="url" name="url" id="url" />
<br />
<label for="phone">Telephone:</label>
<input type="tel" name="phone" id="phone" required/>
</form>
</body>
</html>
Vidite, ovde "name" predstavlja običan textbox bez ikakvih ograničenja, e-mail ima ograničenje da se ne može unijeti ništa drugo osim e-maila, takođe i na url adresi ne može se unijeti ništa osim url adrese, i za telefon, ništa osim forme telefona. Sve smo to pistigli dodavanjem atributa "required". Pokušajte da ga pomjerate, brišete ili koristite u drugačijim formama. Zapazite promjene.
Pokušao bih da ovde stavim jos i elemente <list> i <color> ali nažalost ovaj editor ih ne podržava, kao ni većina trenutnih browsera. Za više o njima, pogledajte teorijski dio ovoga rada.
Zadatak br.9-ubacimo video u našu stranicu
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="G:\My Web Sites\Maturski Rad\Parkour Generations Showreel.flv"
type="video/flv" />
Vas browser ne podržava video tag.
</video>
</body>
</html>
Isprobaj sam
Rezultat
Ovdje je ubačen jedan video u naš editor, ali pošto ovaj editor ne podržava ovakav video format, ispisuje se ova poruka. Isti princip je sa audio formatima.