Scribd
Upload
85 views

Html5 Feature of Internet

HTML5 and ITS FEATURE on INTERNET Burhan Cerit Iyte Comp. Eng. Topics HTML First browser Development Process and General timeline HTML5 and Future Features Local Storage New Doctype Root element New Semantic element For the header element Drag and drop geolocation speech input new form types multimedia video and audio tags Canvas CSS and JavaScript Conclusion HTML5 and future Features HTML5 has new and powerfull tags these are: Local Storage >Local storage let us to to store our data even after the browser closed

Uploaded by

Burhan Cerit
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
85 views

Html5 Feature of Internet

HTML5 and ITS FEATURE on INTERNET Burhan Cerit Iyte Comp. Eng. Topics HTML First browser Development Process and General timeline HTML5 and Future Features Local Storage New Doctype Root element New Semantic element For the header element Drag and drop geolocation speech input new form types multimedia video and audio tags Canvas CSS and JavaScript Conclusion HTML5 and future Features HTML5 has new and powerfull tags these are: Local Storage >Local storage let us to to store our data even after the browser closed

Uploaded by

Burhan Cerit
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

HTML5 and ITS FEATURE on INTERNET

Burhan Cerit Iyte Comp. Eng.

Topics

HTML First browser Development Process and General timeline HTML5 and Future Features Local Storage New Doctype Root element New Semantic element For the header element

Navigation Web Socket Drag and Drop Geolocation Speech Input New Form Types Multimedia Video and Audio Tags Canvas CSS and JavaScript Conclusion

HTML
HTML <Hyper Text Markup Language>. At early days of 1980s a CERN phyics researcher Tim Berners Lee suggested a system which they can share the documents between colleagues that is named ENQUIRE. Tim B. Lee has written the first browser called WWW | Nexus and first HTML is created with 20 tags and 13 are still remain.

WorldWideWeb or Nexus first wiev

Development Process

Tim Berners Lee at 1980s created the first HMTL tags. Docs sharing lead to born of internet. In 1993s standard HTML suggestion,94 team preperation and finally In 1995 first HTML version 2.0 released. January 1997 W3C announced version 3.2 and standardized. December 1997 HTML 4.0 release April 1998 HTML 4.01 release In the mid of 2008 HTML 4.01 and ISO/IEC 15445:2000 remained the latest version and parallel XML based XHTML released

Generally
1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless Web Design 2005 AJAX 2009 HTML 5

HTML5 and FUTURE


HTML5 future of the web but the future is now far. The timeline starts from 2004 and goes up to 2022. Still there are much to catch flash. Millions of addvertisements, games and apps relies in front of HTML5. The old anti-Microsoft alliance of Google, Adobe, and Apple is splintering. Apple vs Google in mobile space & Apple vs Adobe in browser/plugin.

HTML5
HTML5 ~= HTML + CSS + JS HTML5 uses very often JavaScript and CSS Has many new tags With self supported multimedia tags Browsers consumes less cpu usage and ram.

Features

HTML5 has new and powerfull tags these are:

<canvas>, <audio>, <video>, <progress>, <caption>, <header>, <nav>, <footer>, <article>, <aside>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time> canvas: supports. IE Firefox Safari Chrome Opera iPhone Android 7.0+* 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+

Local Storage
>Local

storage let us to to store our data even after the browser closed and opened again. >Application cache will save your status on page and you will be able to browse through the site even when you are offline. <html manifest="manifest=cache.appcache"> CACHE: /html5/src/logic.js /html5/src/style.css /html5/src/background.png

New Doctype
One of old ones : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> One of 15 doctypes that trigger standards mode in all modern browsers And the new one : <!DOCTYPE html>

Root Element
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> Html element before HTML5 in XHTML version. <html lang="en" xml:lang="en"> xml:lang for XHTML Now: <html lang=en > that is it. ' en ' for Engilish you can find your own language code.

New Semantic Elements


<section> : for grouping the content by numbers documents or applications. <nav> : Navigates the links to sections between pages. <article> : Represent a component of a pages that could be self-contained composition. e.g. Forum post, Newspaper article or Web log. <aside> :which could be considered separate from that content. Such sections are often represented as sidebars in printed typography that related to <nav> element such as advertising,sidebars etc... <hgroup> : Represent the header group from bigger to smaller h1 - h6 <header> :represents a group of introductory or navigational aids similar to <hgroup>.

For the header element


For the header element: <div id="header"> <h1>My Weblog</h1> <p class="tagline">A lot of effort went into making this effortless.</p> </div> <header> <hgroup> <h1>My Weblog</h1> <h2>A lot of effort went into making this effortless.</h2> </hgroup> </header>

Semantic Elements Continue


<footer> :represents a footer for its nearest ancestor sectioning content or sectioning root element.footer typically contains information about its section such as who wrote this, links to related documents, copyright data, and the likes. <time> : Represent the time on 24 hour clock or Gregorian calendar date. <mark> :Marked text are used for representing to link to another page or show some important point.

Navigation
Navigation is as the same as HTML4 and XHTML <nav> <ul> <li><a href="#">Blog</a></li> <li><a href="#">linux</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Contact</a></li> <li class="subscribe"><a href="#">Subscribe via. RSS</a></li> </ul> </nav> e.g. ~/nav.html

Web Socket
Full-duplex, bi-directional communication over the Web: Both the server and client can send data at any time, or even at the same time. Only the data itself is sent, without the overhead of HTTP headers, dramatically reducing bandwidth. Bandwith value of a connection is the highest data transfer rate in theoritically e.g. ~/websocket.html

Drag & Drop


Another powerful element. From your hardware you can drag your files to the desired page and drop that is like uploading or from page downloading to your device. Easy and user friendly. e.g. ~/dragdrop.html

Geolocation
One of the best features of HTML5 Geolocation. Geolocation let you to find your standing location or another location on the map or a direction from one place to destined place. e.g. ~/geolocation.html

Speech Input
That machines will understand us now. This is an amazing feature of HTML5 what can we say let us try. e.g. ~/speakTome.html

New Form Types


On mobile devices form field types will be used as : text,number,e-mail,tel Each one is seperated and used individually. e.g. ~/types.html

Multimedia
When it comes to reality HTML5 uncovering his slience and moving into field of internet from a long awaited development years. With this support HTML5 will become the leader of flash based multimedia content of internet as. <audio> for all kind of audio types <video> for all kind of video types

Video and Audio Tags


They both are the new tags of HTML5 and to play music or video. However reality is different strictly speaking todays' browsers, computers and mobile devices cannot run any application without Apple QuickTime or Adobe Flash.. e.g. ~/audio.html ~/video.html

Canvas
Canvas is the best one of the tags. <canvas> tag let us to create basic drawings and 2D applications, games for iphone, android and all mobile devicess and browsers that has a support of HTML5 tags. Uses very much JavaScript e.g. ~/canvas.html

CSS and JavaScript


HTML5 is not going forward without CSS and JavaScript and AJAX. HTML5 alone does may have much things but it requires configuration of pages and their contents in this way CSS and javaScript come.

Conclusion
HTML5 has a long time to be completed. Up to that time, will flash or silverlight be fully removed ? It seems not possible now hpwever time will show himself and of course companies should move carefully in investigations.

Thank you.

You might also like