4. What is HTML5?
Latest standard for HTML
Designed to replace both HTML 4, XHTML, and the HTML DOM Level 2
Previous version of HTML, HTML 4.01, came in 1999
Delivers rich content without the need for additional plugins
animation to graphics
music to movies
games
Cross-platform and designed to work with:
PC
Tablet
Smartphone
Smart TV
5. How Did HTML5 Get Started?
Collaborative effort of
W3G (World Wide Web Consortium)
WHATWG (Web Hypertext Application Technology Working Group)
Formulated rules for designing HTML5:
New features should be based on HTML, CSS, DOM, and JavaScript
The need for external plugins (like Flash) should be reduced
Error handling should be easier than in previous versions
Scripting has to be replaced by more markup
Device-independent
Development process should be visible to the public
6. <!DOCTYPE>
Only one <!doctype> declaration, and it is very simple
<!DOCTYPE html>
New Features
2D drawing
Media playback
Support for local storage
Content-specific elements
Form controls
7. <canvas>
Used to draw graphics, on the fly, via scripting (usually JavaScript)
It is a container for graphics, you must use a script to actually draw the graphics
Dude, don’t waste time. Demo it!
8. Media Elements
<audio>
Defines sound or music content
<video>
Defines video or movie content
<source>
Defines sources for <video> and <audio>
<track>
Defines tracks for <video> and <audio>
<embed>
Defines containers for external applications (like plug-ins)
DEMO Time
9. Local Storage
Web pages can store data locally within the user's browser
Web Storage is more secure and faster
Data is not included with every server request, but used ONLY when asked for
Unlike cookies, the storage limit is far larger (around 5MB)
Two new objects for storing data on the client:
window.localStorage - stores data with no expiration dateTablet
code.sessionStorage - stores data for one session (data is lost when the tab is closed)
DEMO Time
10. Application Cache
Web site can be cached, and accessible without an internet connection
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed
resources from the server
11. Semantic Elements
Semantic elements = Elements with meaning
Clearly describes the element to both the browser and the developer
Non-semantic elements: <div> and <span> - Tells nothing about its content
Semantic elements: <form>, <table>, and <img> - Clearly defines its content
Existing sites today contains HTML code like :
<div id="nav">, <div class="header">, or <div id="footer">
to indicate navigation links, header, and footer.
So some new elements were created in HTML5
14. New Input Types
HTML5 has several new input types for better input control and validation.
Color
Date
Datetime
Datetime-local
Email
Month
Number
Range
Search
Tel
Time
URL
Week
Not all browsers support all the new
input types. However, you can already
start using them; If they are not
supported, they will behave as regular
text fields.
DEMO Time!
The first official logo of HTML. I’ll give a very quick overview of HTML before going on our today’s topicHyperText Markup Language is the markup language for creating web pages that can be rendered in a web browser. In other words, a language that a Web browsers can understand. HTML andworld wide web changed the world we live.
Timeline of Universal Web TechnologiesHTML first publicly available in 1991 and developed by Tim Berners-Lee.
Now comes the next level Web Development HTML 5
Which means this HTML standard can work on any Modern Multimedia device.
The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web (abbreviated WWW or W3).WHATWG is a community of people interested in evolving HTML and related technologies.They both worked together to design and develop next level of HTMLThey have a vision and created rules for designing HTML5Currently HTML 5.1 working draft is in progress.
DOCType is an instruction to the web browser about what version of HTML the page is written in.We already started using it in our current project.Now we shall look at some of the exciting features of HTML.
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins."Detach All" will stop debugging but will leave the process running.Resources: http://www.html5canvastutorials.com/All the Canvas Properties and methods listed in W3Schools.http://www.w3schools.com/tags/ref_canvas.asp
With HTML5, there is no need of using third party plugins for playing Audio/Video files.AudioBefore HTML5, there was no standard for playing audio files on a web page, audio files had to be played with a plug-in (like flash).
Cookies are included with every HTTP request, thereby slowing down your web application by needlessly transmitting the same data over and overCookies are included with every HTTP request, thereby sending data unencrypted over the internet (unless your entire web application is served over SSL)Cookies are limited to about 4 KB of data — enough to slow down your application (see above), but not enough to be terribly usefulWhat we really want isa lot of storage spaceon the clientthat persists beyond a page refreshand isn’t transmitted to the serverhttp://www.w3schools.com/html/html5_webstorage.asphttp://html5demos.com/storage
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.