online: 3; azi: 87; total: 50542 Webdesign - Html - 19

HTML5 - Tag-uri Noi


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:
  • 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).
- 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:
  • 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)
- 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:
  • 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.
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:
  • height (height="pixeli") - Lungimea cadrului canvas, in pixeli.
  • width (width="pixeli") - Inaltimea cadrului canvas, in pixeli.
- 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="imagine.jpg" alt="Curs HTML" width="200" height="100" />
 <figcaption>Curs HTML: www.discant.ro/html/</figcaption>
</figure>
Rezultat:
Curs HTML
Curs HTML: www.discant.ro/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 e, 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 e si tutoriale: <mark>www.discant.ro</mark> pt. Web Development.</p>
Rezultat:

Cursuri e si tutoriale: www.discant.ro 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:
  • max (max="nr") - Specifica totalul de unitati din bara de progres.
  • value (value="nr") - Specifica numarul de unitati completate din bara de progres.
- 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>