HTML 5, karakteristikat e saj

By
admin
Published: May 8, 2010Posted in: Html, Tutoriale, WebTags: , , ,

Pas artikullit HTML 5, shtylla e re e Web 2,0 po publikojme kete artikull ku do mundohemi te shpjegojme detaje me teknike mbi HTML 5.

Sic e thame edhe ke artikulli me siper web eshte ne evolim edhe ka pesuar shume ndryshime nga 9 vjet me pare kur publikohej HTML 4.1, per kete W3C po pergatit HTML 5 e cila ka si objektiv pershtatjen e gjuhes me te famshme ne web me kohet e sotme. HTML 5 sjell shume risi persa i perket API, multimedia etj.

Me poshte do te shpjegojme disa nga detajet teknike qe sjell HTML 5.

Struktura

HTML 5 sjell nje bashkesi te gjere elementesh te rinj qe e bejne me te thjeshte strukturen e nje faqeje. Me HTML 4 ishte e mundur te ndertoje nje layout shume standard, i perbere nga blloqe DIV(footer, header, kolona etj). Ja nje shembull i struktures HTML 4:

HTML 5 fut elemente te rinj ne nje faqe(header, nav, section, article, aside, footer) :

Nga pikpamja e kodit do te kemi :

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

Ky organizim i ri eshte shume i nevojshme pasi te lejon te ndertosh ne munyre te thjeshte seksione brenda njeri tjetrit.

<section>
  <h1>Liveli 1</h1>
  <section>
    <h1>Liveli 2</h1>
    <section>
      <h1>Liveli 3</h1>
    </section>
  </section>
</section>

Elementi HEADER ngelet i njejte vetem se kemi mundesi te ndertojme nen hedera:

<header>
  <h1>HTML 5</h1>
  <p>tekst</p>
</header>
<header>
  <h1>shembull</h1>
  <h2>ketu shkruhen tags.</h2>
</header>

FOOTER ngelet ai qe eshte:

<footer>© Tutoriale Shqip </footer>

NAV permban links:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/prodotti">Tutoriale</a></li>
    <li><a href="/servizi">Lajme</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

ASIDE mund te perdoret per sidebars:

<aside>
  <h1>Arkiv</h1>
  <ul>
    <li><a href="/2007/09/">Maj</a></li>
    <li><a href="/2007/08/">Qershor</a></li>
    <li><a href="/2007/07/">Korrik</a></li>
  </ul>
</aside>

Elementi SECTION perdoret per  permbledhjen e nje artikulli:

<section>
  <h1>Kapitulli 1: </h1>
  <p>Ishte nje dite e bukur maji...
     ...</p>
</section>

ARTICLE perdoret per permbajtjen e nje artikulli:

<article id="artikulli 3">
  <header>
    <h4><a href="#artikulli 3" rel="bookmark">Artikulli #3</a>
        by <a href="http://example.com/">Titulli</a></h4>
  </header>
  <p>HTML 5 per ju!</p>
</article>

Video dhe Audio

Vitet e fundit permbajtjet multimediale paten nje hov te madh ne web. Html 4 nuk kishte mjete qe ti lejonin webmasterave menaxhimin e multimedias per kete FLASH zuri nje vend thelbesor ne faqet web.
HTML 5 perben nje evolim ne kete aspekt, mbase eshte pika me e forte e cila po i sjell jo pak probleme Adobe. Me HTML 5 eshte shume e thjeshte te menaxhosh file multimedia si nga ana e videos si nga ana e audios.

<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
    <a href="video.ogv">Download video</a>
</video>

Keni mundesine te vendosni edhe nje imazh gjate karikimit te videos me ane te tag POSTER.

Ne te njejten menyre eshte shume e thjeshte riprodhimi i nje file audio:

<audio src="music.oga" controls>
    <a href="music.oga">Download mp3</a>
</audio>

Te dy kontrollet e mesiperme suportojne elementin SOURCE i nevojshme per te specifikuar nje apo me shume video/audio alternative. Atributi MEDIA mund te perdoret per te impostuar risorsat minimale qe nevojiten per te riprodhuar file multimediale.

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp"
    media="handheld">
    <source src="video.ogv" type="video/ogg;
    codecs=theora, vorbis">
    <source src="video.mp4" type="video/mp4">
</video>
<audio>
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

Gjithashtu per te pasur nje kontroll me te madh mbi file multimedial ekziston nje API qe ve ne dispozicion funksione te ndryshme si PLAY(), PAUSE(), CURRENTTIME, etj:

<video src="video.ogg" id="video"></video>
<script>
  var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Play</button>
   <button type="button" onclick="video.pause();">Pause</button>
   <button type="button" onclick="video.currentTime = 0;">
   << Rewind</button>

Me kaq po e mbyllim kete artikull. Se shpejti do publikojme karakteristika te reja te HTML 5.

  • Share/Bookmark

Reth autorit