Dive into HTML5

75 %
25 %
Information about Dive into HTML5

Published on February 28, 2014

Author: KarthikNallajalla

Source: slideshare.net


Interested to know about HTML5 then check this link out....

HyperText Markup Language

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

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

<!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

<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!

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

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

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

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

Semantic Elements in HTML5 DEMO Time!

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!

HTML5 Games

Thank you everyone Welcome RJ

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Dive Into HTML5

Dive Into HTML5 by Mark Pilgrim with contributions from the community. Dive Into HTML5 elaborates on a hand-picked selection of features from the HTML5 ...
Read more

Dive Into HTML5

Dive Into HTML5 by Mark Pilgrim with contributions from the community ive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the ...
Read more

Dive Into HTML5 - Amazon Simple Storage Service (S3 ...

DIVEINTOHTML5 BY MARKPILGRIM WITHILLUSTRATIONSFROMTHEPUBLICDOMAIN ive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 ...
Read more

Dive Into

The Dive Into Series by Mark Pilgrim with illustrations from the Public Domain Dive into HTML5. Dive into Python 3 “If you’re good at something, never ...
Read more

Video - Dive Into HTML5

But support for the

Canvas - Dive Into HTML5

Imagine you’re drawing a picture in ink. You don’t want to just dive in and start drawing with ink, because you might make a mistake. Instead, you ...
Read more

Dive into HTML5: Handverlesene Infos zu HTML5 als ...

Mit Dive into HTML5 hat der Software-Entwickler und Buchautor Mark Pilgrim ein neues kostenloses Werk zum Thema HTML5 vorgestellt.
Read more

Deep Dive into “HTML5” | Giorgio Sardo Blog

How do I develop using Canvas, SVG, CSS3? What’s new in JavaScript? In this deep dive you will learn how to use HTML5 and how new web ...
Read more

Dive into HTML5… on HTML5 Doctor | HTML5 Doctor

This article was written by Oli Studholme. He works as a developer for Information Architects, Inc. in Tokyo, Japan. He wrote “Beginning HTML5 and CSS3 ...
Read more

Nachrichten und TIpps - diveintohtml5.com -

Mit über 2 Millionen Sozial Benutzer und von einem Sitz in Zypern Devisen und Rohstoffhandel Unternehmen begann, hat eToro einen Sprung in der Welt der ...
Read more