HTML5 - Tag-uri Noi

Curs Html

• HTML5 video tag
• HTML5 embed tag
• Tag-ul canvas
• HTML5 figure tag
• HTML5 hgroup tag
• HTML5 mark tag
• Tag-ul progress
• Tag-ul ruby
• Tag-ul WBR

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:

• autoplay (autoplay='autoplay') - Sunetul, muzica va incepe automat.
• controls (controls='controls') - Controalele audio (play / pauza, etc.) vor fi afisate.
• loop (loop='loop') - Muzica va incepe din nou dupa ce se termina.
• preload (preload='auto|metadata|none') - Specifica daca si cum va fi incarcat fisierul audio cand pagina se incarca. Atributul 'preload' este ignorat daca se adauga 'autoplay'.
  ('auto' - incarca tot fisierul audio cand pagina se incarca; 'metadata' - incarca numai metadata cand pagina se incarca; 'none' - browser-ul nu ar trebui sa incarce fisierul audio cand se incarca pagina).
• src (src='url') - Adresa URL a fisierului audio.

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).

<h4>Exemplu HTML audio tag</h4>

<audio controls='controls'>
 <source src='html/html5_audio_file.ogg' type='audio/ogg' />
 <source src='html/html5_audio_file.mp3' type='audio/mp3' />
 Browser-ul dv. nu recunoste tag-ul audio, dar puteti <a href='html/html5_audio_file.mp3'>Descarca fisierul</a>.
</audio>

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:

• autoplay (autoplay='autoplay') - Filmul /videoclip-ul va incepe automat.
• controls (controls='controls') - Butoanele de control (play / pauza, etc.) vor fi afisate.
• height (height='pixeli') - Inaltimea player-ului, in pixeli.
• width (width='pixeli') - Lungimea player-ului, in pixeli.
• muted (muted='muted') - Sunetul din film va fi pe mut, nu e redat.
• poster (poster='URL') - Specifica o imagine care sa fie afisata in timp ce filmul se incarca, sau pana cand e apasat butonul play. Daca acest atribut nu e adaugat, va fi afisat primul cadru din film.
• loop (loop='loop') - Filmul va porni de la inceput dupa ce se termina.
• preload (preload='auto|metadata|none') - Specifica daca si cum va fi incarcat filmul cand pagina se incarca. Atributul 'preload' este ignorat daca se adauga 'autoplay'.
  ('auto' - incarca tot fisierul video cand pagina se incarca; 'metadata' - incarca numai metadata cand pagina se incarca; 'none' - browser-ul nu ar trebui sa incarce filmul cand se incarca pagina).
• src (src='url') - Adresa URL a fisierului video.

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).

<h4>Exemplu HTML video tag</h4>

<video controls='controls'width='200' height='150'>
 <source src='html/html5_video_ex.mp4' type='video/mp4' />
 <source src='html/html5_video_ex.ogg' type='video/ogg' />
 Browser-ul dv. nu recunoste tag-ul video, dar puteti <a href='html/html5_video_ex.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.

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:

• height (height='pixeli') - Inaltimea cadrului in care e afisat continutul, in pixeli.
• width (width='pixeli') - Lungimea cadrului in care e afisat continutul, in pixeli.
• type (type='MIME_type') - Tipul MIME al continutului.
• src (src='url') - Adresa URL a fisierului.

<h4>Exemplu HTML embed tag</h4>

<embed src='html/cubilus.swf' width='380' height='320' />

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:

• height (height='pixeli') - Lungimea cadrului canvas, in pixeli.
• width (width='pixeli') - Inaltimea cadrului canvas, in pixeli.

<h4>Exemplu HTML canvas tag</h4>

<canvas id='cvs1' width='100' height='100'>
 Acest text e afisat daca browser-ul nu recunoste elementul HTML5 Canvas.
</canvas>

<script>
var canvas=document.getElementById('cvs1');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#0102fe';
ctx.fillRect(0,0,80,80);
</script>

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>.

<h4>Exemplu HTML figure tag</h4>

<figure>
 <img src='html/html_course.jpg' alt='Curs HTML' width='200' height='100' />
 <figcaption>Curs HTML: marplo.net/html</figcaption>
</figure>

HTML5 hgroup tag

Tag-ul <hgroup> se foloseste pentru a grupa mai multe tag-uri H1 - H6.
- Exemplu:

<h4>Exemplu HTML hgroup tag</h4>

<hgroup>
 <h2>Bine ai venit pe marplo.net/</h2>
 <h3>Cursuri gratuite, Forum, Spiritualitate</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:

<h4>Exemplu HTML mark tag</h4>

<p>Cursuri gratuite si tutoriale: <mark>marplo.net</mark> pt. Web Development.</p>

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:

• max (max='nr') - Specifica totalul de unitati din bara de progres.
• value (value='nr') - Specifica numarul de unitati completate din bara de progres.

<h4>Exemplu HTML progress tag</h4>

<progress value='33' max='100'></progress>

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>.

<h4>Exemplu HTML ruby tag</h4>

<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.

<h4>Exemplu HTML wbr tag</h4>

<p>Pentru a crea Pagini<wbr>Web profesionale, un Web<wbr>Master ar trebui sa stie HTML si CSS.</p>