IA Referat HTML

Universitatea Valahia din Trgovi te Facultatea de Inginerie Electric Specializarea: EE + ET Anul I
PROIECT
la Informatica Aplicata
Student:Matache Eduard-Ionut Coordonator: Asist. ing. Ana-Maria SUDUC
- 2012
Matache Eduard-Ionut
HTML5
Tema:
HTML5
HTML5
Cuprins
1. 2. 3. 4. 5. Introducere .......................................................................... Error! Bookmark not defined. [Cuprinsul] .......................................................................... Error! Bookmark not defined. [Indica ii privind formatarea] ............................................... Error! Bookmark not defined. [Con inutul proiectului]........................................................ Error! Bookmark not defined. [Bibliografie] ....................................................................... Error! Bookmark not defined.
HTML5
Introducere
Internetul este intr-o continua evolutie. Pe zi ce trece apar site-uri din ce in ce mai inovatoare,care forteaza limitele HTMLului.Acest lucru se poate explica usor prin faptul ca dezvoltarea limbajului s-a oprit in 1999,la HTML 4.WC3 (World Wide Web Consortium) a continuat dezvoltarea XML, precum si altor limbaje markup cum ar fi:Scalable Vector Graphics (SVG), XForms and MathML.Programatorii au invatat CSS si limbajul JavaScript pentru asi crea propriile aplicatii pe framework-uri dj existente care foloseau Asynchronous JavaScript + XML (AJAX).Astfel , HTML nu s-a dezvoltat in ultimii 8 ani. Acest lucru vrea sa se schimbe in 2004, cand trei dintre cei mai mari producatori de browsere: Apple, Opera si Mozilla au inceput sa lucreze impreuna, formand (Web Hypertet Application Technology Working Group sau WHATWG), pentru dezvoltarea clasicului HTML.Astfel apare HTML 5(denumit si Web Applications 1.0) care se vrea a 5-a mare revizie a HTML-ului. Avand ca punct de plecare HTML 5,W3C a fondat, in 2007,HTML working group(sau W3C HTML WG),care a publicat prima schita a proiectului in 22 Ianuarie 2008.
HTML5
Structura
HTML 5 introduce un nou set de elemente,care fac mult mai usoara structurarea paginilor.Majoritatea paginilor HTML 4 folosesc structuri cum ar fi headere,footere si coloane.Acestea sunt realizate cu ajutorul tagului <div>, caruia i se adauga atributele id sau class.
Folosirea tagului <div> se datoreaza faptului ca actuala versiune de HTML nu dispune de elemente specializate pentru a descrie fiecare structura (header,footer,coloana) in parte.HTML 5 rezolva aceasta problema introducand elemente noi, dupa cum se poate vedea in imaginea de mai jos:
HTML5
(elementul div poate fi inlocuit cu: header,nav,section,article,aside,footer).
Codul pentru o pagina avand structura de mai sus va fi: <body> <header>...</header> <nav>...</nav> <article> <section> ...
HTML5
</section> </article> <aside>...</aside> <footer>...</footer> </body> De exemplu pentru urmatoarea structura markup s-au folosit section incuibat si elemente hl:
<section> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section> </section> De asemenea pentru compatibilitate cu browswerele actuale, este posibila folosirea altor elemente de heading (h2.h6) in locul elementelor h1.
7
HTML5
Folosind sectiunile(sections), paginile vor devein mult mai usor navigabile.De exemplu, se poate sari usor de la un articol la altul, fara sa fie necesara folosirea de catre autor a linkurilor de skip.Cei care realizeaza paginile au, de asemenea, de beneficiat pentru ca inlocuirea div-urilor cu alte elemente face codul mult mai usor de urmarit.Elementele de header reprezinta headerul unei sectiuni.Headerele pot contine mai mult decat doar headingul unei sectiuni.De exemplu acestea pot include subtitluri sau informatii(nume, functie) despre autor.
<header> <h1>A Preview of HTML 5</h1> <p class="byline">By Lachlan Hunt</p> </header> <header> <h1>Example Blog</h1> <h2>Insert tag line here.</h2> </header>
Elementele de footer reprezinta footerul sectiunii careia i se aplica.De obicei acesta contine informatii despre sectiunea respective, despre autor, link-uri si coyright-ul.
8
HTML5
<footer> 2007 Example Inc.</footer> Elementele de nav reprezinta sectiunea de navigation links.Se foloseste atat pentru navigarea pe site, cat sip e post de cuprins. nav> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/services">Services</a></li> <li><a href="/about">About</a></li> </ul> </nav> Elementul aside este folosit pentru continut care abordeaza aceeasi tematica si este in general, folosit pentru crearea sidebar-urilor. <aside> <h1>Archives</h1> <ul> <li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li> </ul> </aside>
HTML5
Elementele de section reprezinta o sectiune a documentului sau a aplicatiei, de exemplu un capitol.
<section> <h1>Chapter 1: The Period</h1> <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, ...</p> </section>
Un element article reprezinta o sectiune independent a documentului, paginii sau site-ului.Acesta poate fi folosit pentru a scrie un articol de stiri, un post pe blog, un post pe un forum sau un comentariu.
<section> <h1>Chapter 1: The Period</h1> <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness,
10
HTML5
it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, ...</p> </section>
AUDIO si VIDEO
In ultimii ani elementele audio si video au devenit din ce in ce mai populare si mai des folosite, datorita unor site-uri precum YouTube, Viddler, Revver, MySpace si altele, care ofera oricui posibilitatea de a crea astfel de fisiere.Avand in vedere actuala versiune HTML nu ofera posibilitatea de a introduce si de a controla asemenea elemente, multe site-uri folosesc Flash-ul pentru a crea aceasta functionalitate.Chiar daca se pot introduce elemente audio/video in pagini folosind mai multe pluginuri (QuickTime, Windows Media etc.), Flash-ul este singurul care ofera o solutie compatibila cu toate browserele. Dupa cum s-a vazut in cazul media player-elor bazate pe Flash, programatorii isi doresc sa creeze interfete proprii, originale, care permit, in general, utilizatorului optiunile: play, pause, stop, seek si adjust volume.Ideea este de a pune la dispozitie aceste functionalitati in browsere prin adaugarea de resurse proprii pentru inserarea elementelor audio/video si prin realizarea e DOM API-uripentru scripturi care sa controleze functionarea lor. Noile elemente video si audio vor facilita realizarea acestor deziderate.Majoritatea API-urilor sunt commune pentru cele doua
11
HTML5
elemente, singura deosebire referindu-se la diferentele intre cele doua tipuri media: vizual si non-vizual.Cea mai simpla modalitate de a insera un clip video este de a folosi elemental video si de a permite browserului sa creeze o interfata default.Atributul controls este un atribut Boolean si indica daca programatorul doreste sau nu interfata cu utilizatorul(UI) by default. <video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video> Atributul optional poster poate fi folosit pentru a specifica o imagine care va fi afisata in locul clipului video inainte ca acesta sa incapa sa ruleze.Desi exista formate video care ofera propriului lor poster frame feature, cum ar fi MPEG-4, Solutia propusa de HTML 5 va functiona pentru orice format. La fel de simplu se insereaza elemente audio in pagina, folosind audio.Majoritatea atributelor sunt commune intre audio si video.Totusi, din motive evidente, pentru elemental audio lipsesc atributele: width, height si poster.
<audio src="music.oga" controls> <a href="music.oga">Download song</a> </audio>

12
HTML5
HTML 5 ofera atributul source, pentru a preciza elementele audio sau video din care browserul poate allege, bazandu-se pe tipurile sale media sip e suportul codecurilor. <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>
Pentru programatorii care isi doresc cea mai mult control asupra interfetei cu utilizatorul astfel incat sa o poata dimensiona in functie de designul paginii, API-urile suplimentare ofera mai multe metode de a lasa scripturile sa controleze functionarea elementului media.Cele mai simple metode de folosire sunt: play ( ), pause ( ), si a seta CurrentTime sa deruleze de la inceput.Urmatorul exemplu ilustreaza cum se pot folosi acestea:
13
HTML5
<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>
Reprezentarea Documentelor
Spre deosebire de variantele anterioare HTML si XHTML, care sunt definite in termini de sintaxa, HTML 5 e definit in termini de Document Object Model (DOM)= cele trei reprezentari folosite de browsere pentru a define un document.De exemplu, considerand un document format din title, heading si paragraph, asa ar arata reprezentarea in DOM:
14
HTML5
Arborele DOM include un element titlu in head si elemente h1 si p in body.
Avantajul de a defini HTML 5 in termini de DOM este ca limbajul insusi poate fi definit independent de sintaxa.Exista, in principal, doua sintaxe care pot fi folosite pentru a reprezenta documente HTML: HTML serialization (sau HTML 5) si XML serialization (sau XHTML 5). HTML serialization se refera la sintaxa inspirata din sintaxa SGML (a versiunilor anterioare HTML). <!DOCTYPE html> <html> <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document.
15
HTML5
</body> </html>
XML serialization se refera la o sintaxa care foloseste XML 1.0 si namespaces, ca si XHTML 1.0. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document.</p> </body> </html>
Browserele folosesc tipul MIME pentru a face deosebire intre cele 2.Orice document text/html trebuie sa se conformeze cerintelor HTML serialization si orice document de tipul XML MIME, cum ar fi application/xhtml + xml trebuie sa fie in conform cu cerintele standardului XML serialization.
16
HTML5
Bibliografie
1. 2. 3. 4. http://www.alistapart.com/articles/previewofhtml5 http://www.ibm.com/developerworks/library/x-html5/ http://www.w3.org/TR/2008/WD-html5-diff-20080122/ http://www.pcworld.com/article/id,140408-pg,1/article.html
17

IA Referat HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

IA Referat HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Valahia din Trgovi te Facultatea de Inginerie Electric Specializarea: EE + ET Anul I

Student:Matache Eduard-Ionut Coordonator: Asist. ing. Ana-Maria SUDUC

(elementul div poate fi inlocuit cu: header,nav,section,article,aside,footer).

Elementele de section reprezinta o sectiune a documentului sau a aplicatiei, de exemplu un capitol.

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

Arborele DOM include un element titlu in head si elemente h1 si p in body.

S-ar putea să vă placă și