Evoluia internetului

Elaborat de:oncu Vitalie UTM TI

Prezentare realizat n cadrul practicii desfurate la Institutul de Dezvoltare a Societii Informaionale www.idsi.md

Deosebiri HTML4 vs HTML5

Primadiferenimportantestetaguldoctypecareadevenitmultmai simpludememorizat. Formaveche:<!DOCTYPEhtmlPUBLIC//W3C//DTDXHTML1.0
Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd>

Formanou:<!DOCTYPEhtml> Taguldoctypeesteoinstruciuneadresatbrowseruluiwebsi specificregulilelimbajuluidemarcare,prinaceastapaginawebeste corectinterpretat.

Versiuni HTML
HTML1.0(19891994)

Asprijinitimaginiliniedetexticontrolare. Afostfoartelimitatntermenidedesigniprentareaconinutului nHTML1.0deexemplunuarputeas utilizezetabelesaurame specificefonturi schimbefundalulpaginiisausafoloseascforme

Versiuni HTML
HTML2.0(1995)

Estesprijinitdemaimultebrowsere Afostnbuntitpentruasprijini formecusetlimitatdeelementedeformular deaschimbafundalulpaginii utilizareadetabele

Versiuni HTML
HTML3.2(1997)

Includesuportpentrucreareadetabeleiopiuniextinsepentru elementedeformular Permitepaginidewebpentruaincludeecuaiimatematicecomplexe

Versiuni HTML
HTML4.01(1999)

Adaugsuportpentrufoidestil Adaugscriptingpentruelementemultimedia

Versiuni HTML

HTML52008declaratneoficial standartizat2014 InHTML5aufostadaugatetagurinoipentrua usuraintroducereafisierelormultimediain pagina.Intreeleenumeram:fisiereaudio,video, grafica,documenteinteractiveetc.

Compatibilitatea html de azi n viitor

curent Near future Farther future

79% 79% 83%

83% 88% 88%

55% 55% 55%

65% 65% 81%

67% 76% 81%

Legend:
Curent HTML4.01 Near future HTML5 Farther future HTML5 < HTML...

Zonele noi prototipului HTML5

Tag: <header>
<header>definetetitluri(sisubtitluri),saumeniudenavigare
insite.PoatefiadaugatdirectinBODY,sauin<article>,ori <section>.DeobiceiinacestelementseadaugataguriH1,H2, Hx,sau<nav>cuprincipalelelinkuri. <header> <h1>InternetExplorer9</h1> <p><timepubdatedatetime="20110315"></time></p> </header> suportabrowserulInternetExplorer9,Firefox,Opera,Chromesi Safari

Tag:<nav>
<nav>marcheazlinkurigrupateintrunmeniu
<nav> <ahref="/html/">HTML</a>| <ahref="/html5/">HTML5</a>| <ahref="/css/">CSS</a>| <ahref="/css3/">CSS3</a>| <ahref="/js/">JavaScript</a> </nav> suportabrowserulInternetExplorer9,Firefox,Opera,ChromesiSafari

Tag:<aside>
<aside>defineteozonalateral,saualtconinutcareeconsiderat
ntrunfelseparatdeconinutuldinjurullui.Unexempluarfi,banner saupublicitate <p>MyfamilyandIvisitedTheEpcotcenterthissummer.</p> <aside> <h4>EpcotCenter</h4> <p>TheEpcotCenterisathemeparkinDisneyWorld,Florida.</p> </aside>

suportabrowserulInternetExplorer9,Firefox,Opera,ChromesiSafari

Tag:<article>
<article>defineteunelementindependentinpagin(saun
<section>),sipoateconinearticoledetiri,postrideblog, comentarii,saualtcontinutcutextsiimagini. <article> <h1>InternetExplorer9</h1> <p>WindowsInternetExplorer9(abbreviatedasIE9)was released.....</p> </article> suportabrowserulInternetExplorer9,Firefox,Opera,ChromesiSafari

Tag:<section>
<section>reprezintoseciunedistinctadocumentuluisa
aplicaiei.Sefolosetepentruagrupalogicstructuradocumentului. <section> <h1>WWF</h1> <p>TheWorldWideFundforNature(WWF)is....</p> </section>

Tag:<footer>
<footer>ultimaparteaunuisite,careesteseparatdecontinut,si
apareinparteadejosawebsiteului.

<footer> <p>Postedby:HegeRefsnes</p> <p><timepubdatedatetime="20120301"></time></p> </footer>

Tag:<audio>
<audio>marcheazintroducereaunuiconinutaudio
<audiocontrols="controls"> <sourcesrc="song.ogg"type="audio/ogg"/> <sourcesrc="song.mp3"type="audio/mp3"/> </audio> <video>marcheazintroducereaunvideoinpaginaweb

Tag:<canvas>
<canvas>marcheazintroducereaunuiconinutgrafic
<canvasid="myCanvas"></canvas> <scripttype="text/javascript"> varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>

Tag: <video>
<video>marcheazintroducereaunvideoinpaginaweb
<videowidth="320"height="240"controls="controls"> <sourcesrc="movie.mp4"type="video/mp4"/> <sourcesrc="movie.ogg"type="video/ogg"/> Yourbrowserdoesnotsupportthevideotag. </video>

Avantaje

Utilizatoriiaucontroltotalasupraconinutuluimultimedia. Videoclipurilepotfisalvatesautrimiseprinemailprietenilor. Sepotcreanoicontroalepentrumanipulareaconinutuluimultimedia folosindHTML,CSS,Javascrip. Nuestenecesarainstalareaunuipluginpentruarulaconinutaudio sauvideo.

Dezavantaje
IncompatibilitateabrowserelorcuHTML5

nutoatebrowsereleacceptatagurihtml5

Concluzii
HTML5Esteunlimbajstabilsibinestructuratbazatpevechile versiuni

CuHTML5putemusordemanipulatconinutmultimediaigrafic frainstalapluginuri. nbogeteconinutuldocumentelorweb,cunoitaguri,cumarfi <section><article><nav>sau<header>

V mulumesc pentru atenie!

Intrebari?