best introduction to html5 (please download for notes)
DESCRIPTION
This is good html5 introduction VIP:for better understand download this file & u will find good explanations in the note sectionTRANSCRIPT
HTML5 Introduction Khaled MohamedSoftware Engineer Mobile:01118009869Email:[email protected]
HTML Timeline
0 1995 : HTML 2.00 1997 :HTML 3.20 1998 : start the Web standards project0 1999 : HTML 4.00 2000 : XHTML 1.00 2004 : WHATWG begins what become HTML50 2010 : HTML5 grows increased
What Is HTML5 ?!
0 HTML5 will be the new standard for HTML.0 HTML5 is still a work in progress. However, the major
browsers support many of the new HTML5 elements and APIs.
How Did HTML5 Get Started?
0 HTML5 is a cooperation between (W3C) and (WHATWG).0 WHATWG was working with web forms and applications, and
W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:0 New features should be based on HTML, CSS, DOM,and JavaScript0 Reduce the need for external plugins (like Flash).0 Better error handling.0 More markup to replace scripting.0 HTML5 should be device independent.0 The development process should be visible to the public.
HTML5 – New Features
Some of the most interesting new features in HTML5:0 The <canvas> element for 2D drawing0 The <video> and <audio> elements for media
playback0 Support for local storage0 New content-specific elements, like <article>,
<footer>, <header>, <nav>, <section>0 New form controls, like calendar , date , time , email ,
url , search …….And More
Interested…??So See those0 The HTML5 <!DOCTYPE>To declare html5 doc it is very simple you just need to write: <!DOCTYPE html>
0 Simple HTML5 document<!DOCTYPE html><html><head><title>Title of the document</title></head><body>The content of the document......</body></html>
Browser Support for HTML5
0 HTML5 till now not official standard, and no browsers have full HTML5 support.
0 But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.
0 You Can Find very useful HTML5 Reference Here:http://www.w3schools.com/tags/default.asp
What HTML5 Adds for US?
0 Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. All those elements are removed or re-written in HTML5.
0 HTML5 also includes new elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, find Geolocation, include web storage, application cache, web workers, etc.
New Media ElementsTag Description<audio> Defines sound content<video> Defines a video or movie<source> Defines multiple media resources for <video> and <audio><embed> Defines a container for an external application or interactive
content (a plug-in)<track> Defines text tracks for <video> and <audio>
New Semantic/Structural Elements
Tag Description<article> Defines an article
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element
New Semantic/Structural Elements(Cont.)
Tag Description<figure> Specifies self-contained content, like illustrations, diagrams, photos,
code listings, etc.<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
New Semantic/Structural Elements(Cont.)
Tag Description<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links<progress> Represents the progress of a task
<section> Defines a section in a document such as chapter
<time> Defines a date/time
Removed Elements
The following HTML 4.01 elements are removed from HTML5:0 <acronym>0 <applet>0 <basefont>0 <big>0 <center>0 <dir>0 <font>0 <frame>0 <frameset>0 <noframes>0 <strike>0 <tt>
The New <canvas> Element
0 The <canvas> element is used to draw graphics, on the fly, on a web page.
0 Draw a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text onto the canvas:
0 The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
0 Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
The New <canvas> Element(Practical Perspective)
Create a Canvas0 A canvas is a rectangular area on an HTML page, and it is
specified with the <canvas> element.The markup looks like this:<canvas id="myCanvas“ width="200" height="100"></canvas>
0 To add a border, use the style attribute:<canvas id="myCanvas“ style="border:1px solid #000000;">
0 Browser SupportIE9+, Firefox, Opera, Chrome, and Safari support <canvas> element.
The New <canvas> Element(Practical Perspective Cont.)
0Draw Onto The Canvas With JavaScriptAll drawing on the canvas must be done inside a JavaScript:<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>Of course you can Do more with <canvas> if you interests visithttp://www.w3schools.com/html/html5_canvas.asp
HTML5 Inline SVG
0 First What is SVG?0 SVG stands for Scalable Vector Graphics0 SVG is used to define vector-based graphics for the Web0 SVG defines the graphics in XML format0 SVG graphics do NOT lose any quality if they are zoomed or
resized0 Every element and every attribute in SVG files can be animated0 SVG is a W3C recommendation
Browser SupportIE9+, Firefox, Opera, Chrome, and Safari support inline SVG.
Differences BetweenSVG and Canvas
0 SVG is a language for describing 2D graphics in XML.
0 Canvas draws 2D graphics, on the fly (with a JavaScript).
0 SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
0 In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
0 Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.
HTML5 Drag and Drop
0 In HTML5, drag and drop is part of the standard, and any element can be draggable.
Browser SupportIE9+, Firefox, Opera, Chrome, and Safari support drag and drop.
In Next Slide You Will Find an Example with Explanation
HTML5 Geolocation
0 The HTML5 Geolocation API is used to get the geographical position of a user.
0Displaying the Result in a Map
function showPosition(position){var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }
0 To display the result in a map, you need access to a map service that can use latitude and longitude, like Google Maps.
0 In the example above we use the returned latitude and longitude data toshow the location in a Google map (using a static image).
For More Info Visit :http://www.w3schools.com/html/html5_geolocation.asp
HTML5 Video
0 Until now, ‘s No a standard for showing a video/movie on a web page.
0 Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.
0 HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.
0 Browser SupportIE9+, Firefox, Opera, Chrome, and Safari support the <video> element.
HTML5 Video(example)
0 <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video>
HTML5 Audio0 Until now, there’s No standard for playing audio files
on a web page.0 Today, most audio files are played through a plug-in
(like flash). However, different browsers may have different plug-ins.
0 HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.
0 Browser SupportIE9+, Firefox, Opera, Chrome, and Safari support the
<audio> element.
HTML5 Audio(example)
0 <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>
HTML5 Input TypesHTML5 has several new input types for forms. These new features
allow better input control and validation.0 Color : used for input fields that should contain a color.0 Date : user to select a date.0 Datetime : allows the user to select a date and time (withtimezone).0 Email: used for input fields that should contain e-mail address.0 File : used for upload files.0 Range: used for input fields contain a value from a range of numbers.0 Search: is used for search fields0 Tel: Define a field for entering a telephone number0 Time: allows the user to select a time.0 Week: allows the user to select a week and year.0 Url: used for input fields contain a URL address. value of the url field is automatically validated when the form is submitted.
HTML5 New Form Elements
0HTML5 <datalist> Element specifies a list of pre-defined options for an <input> element.
0 The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.
0 Use the <input> element's list attribute to bind it together with a <datalist> element.
0 <input list="browsers"><datalist id="browsers"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"></datalist>
HTML5 New Form Elements
0 HTML5 <keygen> Element0 The purpose of the <keygen> element is to provide a
secure way to authenticate users.0 The <keygen> tag specifies a key-pair generator field
in a form.0 When the form is submitted, two keys are generated,
one private and one public.0 The private key is stored locally, and the public key is
sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.
HTML5 New Form Elements
0 The <output> element represents the result of a calculation (like one performed by a script).
0 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100 +<input type="number" id="b" value="50">=<output name="x" for="a b"></output></form>
HTML5 New Form AttributesNew attributes for <form>:0Autocomplete --- novalidateNew attributes for <input>:0Autocomplete --- autofocus0Form -- formaction -- formenctype(with post only)
0Formnovalidate -- formmethod -- formtarget0height and width -- list -- min and max0Multiple -- pattern (regexp) -- placeholder0Required -- step
Thank You