HTML5 is the latest version of HTML that replaces HTML 4 and XHTML. It delivers rich content like animation, graphics, music and video without plugins. HTML5 was a collaborative effort between the W3C and WHATWG to reduce the need for plugins, improve error handling, and make scripting and markup easier. Key features of HTML5 include 2D drawing with <canvas>, media playback with elements like <video> and <audio>, local storage with localStorage and sessionStorage, new semantic elements, and form controls with input types like color, date and email. HTML5 also enables offline and cached applications.
This presentation gives brief introduction about new standard of HTML i.e. HTML5.
Here we have discussed all new HTML attributes, new HTML tags, Semantic Elements, and so many other things that are new in this standard.
This is my presentation from code|works in NYC 2009 on Thin Server Architecture. The funny animal slides were "sleeper checks" as this was the morning session.
This presentation gives brief introduction about new standard of HTML i.e. HTML5.
Here we have discussed all new HTML attributes, new HTML tags, Semantic Elements, and so many other things that are new in this standard.
This is my presentation from code|works in NYC 2009 on Thin Server Architecture. The funny animal slides were "sleeper checks" as this was the morning session.
Basics of WEB DESIGN and HTML: Static web pages, Dynamic Web pages, Difference between Static and Dynamic web pages, HTML, DHTML, Client Server Configuration.
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
An introduction to HTML5 and its API's for the extream beginners those who already know what is HTML. Presentation also includes few features the CSS3.
Basics of WEB DESIGN and HTML: Static web pages, Dynamic Web pages, Difference between Static and Dynamic web pages, HTML, DHTML, Client Server Configuration.
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
An introduction to HTML5 and its API's for the extream beginners those who already know what is HTML. Presentation also includes few features the CSS3.
This ppt contains a laconic description of HTML history and development and application of HTML5. Some of most frequent and useful tags are also covered.
Web Visualization with HTML5, CSS3, and JavaScript is the course with the rapidly changing web development technologies, it has become important to stay in line with them to progress within the industry, which is why this course in web virtualization has been brought to you to spruce up your web designing and animating skills using HTML5, CSS3, and JavaScript. The latest features of HTML5, CSS3 and JavaScript are set to be provided to you through this course, hence, it is desired that you have basic knowledge on these programming languages for a smoother learning experience. This course will start off by walking you through the CSS3 virtualization techniques to design and animate webs. You will be taught how to create a 3D element using CSS transition and to transform animates into 2D and 3D, along with an insight into the elements of scalable vector graphics which is needed to create basic images and polygons and to animate. Our tutors will further take you through the canvas aspects of HTML5 to start drawing grids and animations using it. You will also get to learn how to create a callback and create and activate a queue that is needed in animating and the animation libraries that will be essential to your web designing projects. By the end of this course, you will have an outstanding knowledge of web visualization using HTML5, CSS3, and JavaScript to secure yourself a prominent place within the web development industry.
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
5. 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
6. 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
7. <!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
8. <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!
9. 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
10. 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
11. 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
12. 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
15. 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!
Good Morning All, I’m Karthik Nallajalla from SmART. Hope everyone doing great. Without wasting time, we shall get started….
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.