HTML5

Dragan Filipović Kurs, Napredni kurs Comments (0)

HTML5 - poslednja verzija HTML-a  (Hypertext Markup Language). Trenutno je u fazi razvoja, a postaće zvanični jezik krajem 2014-te godine, sudeći po najnovijim informacijama W3.org. Sve će naravno zavisiti od razvoja tehnologije, odnosno web brovsera. Trenutno svi popularni brovseri podržavaju veći deo html5.

Neke od novina koje HTML5 uvodi su:

  1. Novi html elementi
  2. Video i Audio
  3. 2D/3D Grafike

1. HTML5 elementi

HTML5 elementi imaju više smisla od xHTML elementa –  semantic code. Npr:

<div id="header"> prelazi u <header>

Div tag kome je dodeljen ID header brovseru ništa bitno ne pokazuje (što se tiče strukture strane), dok novi element <header> ukazuje brovseru da se tu nalazi gornji deo strane ili dela strane – Header.

*Napomena: i tag <header> mora da ima neku klasu ili id ukoliko želimo da ga formatiramo.

Struktura strane je bolje organizovana novim elementima:

header, footer, aside, section, article, nav …

Sada možete bolje obeležiti delove svoje strane – heder, futer, kolonu, članak, navigaciju.

<!-- xHTML kod -->
<div id="wrapper">
  <div id="header">  
    <h1>Naslov prvi</h1>
    <!-- Header sadržaj -->
  </div>
  <div id="centar">
 sadržaj
  </div>
  <div id="kolona">
kolona
  </div>
  <div id="footer">
    <!-- Footer sadržaj -->
  </div>
</div>

Sada imamo:

 <header>  
    <h1>Naslov prvi</h1>
<!-- Header sadržaj -->
 </header>
  <div role="centar">
    <!-- Sadržaj strane -->
  </div>
  <aside role="kolona">
    <!-- kolona -->
  </aside>
  <footer>
    <!-- Footer sadržaj -->
  </footer>

Pored osnovne strukture strane, novi elementi bolje opisuju funkciju delova strane:

time, video, audio, canvas

Video tag nam omogućava da prikažemo video fajlove bez korišćenja flash player-a. Trenutno su podržani samo pojedini formati video fajlova, a podrška zavisi od brovsera. Zato moramo u kodu definisati nekoliko formata video fajla, kako bi određeni brovser koristio određeni fajl. Npr:

<video>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>

Ukoliko želite da probate HTML5, koji omogućava prikaz filmova bez flash plejera, odnosno u nekom drugom, boljem formatu, na dnu strane Youtube sajta imate link ISPROBAJTE NEŠTO NOVO! Link vas vodi do strane TestTube koja, između ostalog, nudi i pregled Youtube video materijala u HTML5 kodu. Isprobajte HTML5 video.

Canvas je 2d/3d crtež – ne linkovana slika već crtež iscrtan direktno na web strani u kombinaciji sa JavaScript-om.

Pogledajte spisak novih elemenata na zvaničnom W3 sajtu – klik hir.

Oznake:

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.