Dupa mai multi ani de experienta cu HTML 4 si XHTML, HTML5 a venit cu tag-uri noi pentru o mai buna structra a documentului si a formularelor, pentru desen si continut multimedia.
Multe din noile elemente HTML5 nu sunt inca suportate de principalele navigatoare web, dar treptat acestea implementeaza noile caracteristici din HTML5.
In acest tutorial sunt prezentate cateva din noile tag-uri HTML5 suportate in principalele navigatoare web, cu o scurta descriere si exemple de cod.

HTML5 audio tag

Tag-ul <audio> se foloseste pt. a adauga sunet, muzica in pagina web.
Poate folosi aceste atribute: Elementul <audio> foloseste tag-ul <source> ca sa specifice sursa fisierului audio si fisiere alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec recunoscut.
IE9 si Safari folosesc fisiere MP3; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV).
- Exemplu:
<audio controls="controls">
 <source src="audio_file.ogg" type="audio/ogg" />
 <source src="audio_file.mp3" type="audio/mp3" />
 Browser-ul dv. nu recunoste tag-ul audio, dar puteti <a href="audio_file.mp3">Descarca fisierul</a>.
</audio>
- Textul dintre <audio> si </audio> va fi afisat in navigatoarele web care nu recunosc tag-ul audio. In exemplu de mai sus, daca browser-ul nu recunoste tag-ul <audio>, va fi afisat in acel loc un link de download.
Rezultat:

HTML5 video tag

Tag-ul <video> este un element multimedia folosit pt. a adauga in pagina web video clipuri si alt continut video.
Tag-ul HTML5 <video> poate folosi aceste atribute: Elementul <video> foloseste tag-ul <source> ca sa specifice sursa fisierului video si fisiere alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec recunoscut.
IE9 si Safari folosesc fisiere MP4; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV)
- Exemplu:
<video controls="controls"width="200" height="150">
 <source src="video/video_file.mp4" type="video/mp4" />
 <source src="video/video_file.ogg" type="video/ogg" />
 Browser-ul dv. nu recunoste tag-ul video, dar puteti <a href="video/video_file.mp4">Descarca filmul</a>.
</video>
- Textul dintre <video> si </video> va fi afisat in navigatoarele web care nu recunosc tag-ul video. In exemplu de mai sus, daca browser-ul nu recunoste tag-ul <video>, va fi afisat in acel loc un link de download.
Rezultat:

HTML5 embed tag

Tag-ul <embed> se foloseste pentru a adauga in pagina aplicatii cu continut interactiv, cum sunt prezentarile flash SWF, plug-inuri, sau fisiere cu imagini.
Poate sa foloseasca aceste atribute: Exemplu:
<embed src="flash_game.swf" width="150" height="150" />
Rezultat:

Tag-ul canvas

Elementul <canvas> poate fi utilizat ca sa adauge in pagina desene grafice folosind script-uri (de obicei JavaScript), sau compozitii foto si animatii simple.
Atribute: - Exemplu (creaza un patrat albastru):
<canvas id="cvs1" width="88" height="88">
 Acest text e afisat daca browser-ul nu recunoste elementul HTML5 Canvas.
</canvas>

<script type="text/javascript">
var canvas=document.getElementById('cvs1');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#0102fe';
ctx.fillRect(0,0,80,80);
</script>
- Textul dintre <canvas> si </canvas> va fi afisat daca navigatorul web nu recunoaste canvas.
Rezultat:
Acest text e afisat daca browser-ul nu recunoste elementul HTML5 Canvas.

HTML5 figure tag

Tag-ul <figure> se foloseste pentru a adauga in pagina un grup de elemente care au un contint de sine statator, cum ar fi diagrame, poze, cod, etc. Continutul din elementul <figure> e atasat la derularea paginii, dar pozitia lui este independenta. Dace e sters nu ar trebui sa afecteze cursul paginii.
Tag-ul <figure> poate sa contina elementul <figcaption> ca sa adauge o scurta descriere la ceea ce e adaugat in <figure> .
- Exemplu:
<figure>
 <img src="html_course.jpg" alt="Curs HTML" width="200" height="100" />
 <figcaption>Curs HTML: marplo.net/html</figcaption>
</figure>
Rezultat:
Curs HTML
Curs HTML: marplo.net/html

HTML5 hgroup tag

Tag-ul <hgroup> se foloseste pentru a grupa mai multe tag-uri H1 - H6.
- Exemplu:
<hgroup>
 <h2>Bine ai venit pe www,narplo.net</h2>
 <h3>Cursuri gratuite, Jocuri, Anime</h3>
</hgroup>
<p>Restul continutului...</p>

HTML5 mark tag

Tag-ul <mark> defineste un text marcat, se foloseste cand doriti sa scoateti in evidenta parti din text,
- Exemplu:
<p>Cursuri gratuite si tutoriale: <mark>marplo.net</mark> pt. Web Development.</p>
Rezultat:

Cursuri gratuite si tutoriale: marplo.net pt. Web Development.

Tag-ul progress

Elementul <progress> adauga in pagina o bara de progres. De obicei e folosit impreuna cu script-uri JavaScript.
Poate folosi aceste atribute: - Exemplu:
<progress value="33" max="100"></progress>
Rezultat:

Tag-ul ruby

Elementul <ruby> specifica o adnotare rubin. Adnotarile Ruby sunt folosite in scrierile din Asia de Est, pentru a arata pronuntia caracterelor est-asiatice.
Acest tag se foloseste impreuna cu tag-urile <rt> si <rp>.
- <rt> - defineste o explicatie sau pronuntia caracterelor dintr-o adnotare rubin.
- <rp> - defineste ce sa afiseze daca navigatorul web nu recunoaste elementul <ruby>.
Exemplu:
<ruby>
 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

Tag-ul WBR

Elementul <wbr> (Word Break Opportunity) specifica unde in text ar putea fi adaugat rand nou, indica: "Browser-ul poate adauga aici un rand nou daca e necesar". Daca browser-ul nu considera ca trebuie adaugat un nou rand, nu afecteaza cu nimic.
De exemplu, se poate folosi <wbr> ca sa adauge oportunitatea de rand nou la un cuvant prea lung, sau ca sa evitati adaugarea de catre browser a unui rand nou intr-un loc nepotrivit.
Exemplu:
<p>Pentru a crea Pagini<wbr>Web profesionale, un Web<wbr>Master ar trebui sa stie HTML si CSS.</p>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
HTML5 - Tag-uri Noi

Last accessed pages

  1. Zuma Deluxe (2025)
  2. Lectii audio-video de limba engleza, animate (120)
  3. Clasificarea adverbelor - Adverbs classification (208)
  4. Jocuri Zuma (1512)
  5. Trecutul continuu - Exercitii si teste incepatori (157)

Popular pages this month

  1. Bubbles3 (3301)
  2. Gramatica limbii engleze - Prezentare Generala (2644)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2358)
  4. Butterfly Kyodai (2100)
  5. Zuma Deluxe (2025)