Best Introduction to HTML5 (please DOWNLOAD for notes)

HTML Timeline
0 1995 : HTML 2.0
0 1997 :HTML 3.2
0 1998 : start the Web standards project
0 1999 : HTML 4.0
0 2000 : XHTML 1.0
0 2004 : WHATWG begins what become HTML5
0 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 JavaScript
0 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 drawing
0 The <video> and <audio> elements for media
playback
0 Support for local storage
0 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 those
0 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 Elements
Tag 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

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

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.

(Practical Perspective)
Create a Canvas
0 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 Support
IE9+, Firefox, Opera, Chrome, and Safari support <canvas> element.

(Practical Perspective Cont.)
0Draw Onto The Canvas With JavaScript
All 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 visit
http://www.w3schools.com/html/html5_canvas.asp

HTML5 Inline SVG
0 First What is SVG?
0 SVG stands for Scalable Vector Graphics
0 SVG is used to define vector-based graphics for the Web
0 SVG defines the graphics in XML format
0 SVG graphics do NOT lose any quality if they are zoomed or
resized
0 Every element and every attribute in SVG files can be animated
0 SVG is a W3C recommendation
Browser Support
IE9+, Firefox, Opera, Chrome, and Safari support inline SVG.

Differences Between
SVG 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 Support
IE9+, 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 to
show 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 Support
IE9+, 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 Audio
0 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 Support
IE9+, 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 Types
HTML5 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 fields
0 Tel: Define a field for entering a telephone number
0 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>

0 HTML5 <keygen> Element
0 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.

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 Attributes
New attributes for <form>:
0Autocomplete --- novalidate
New attributes for <input>:
0Autocomplete --- autofocus
0Form -- formaction -- formenctype(with post only)
0Formnovalidate -- formmethod -- formtarget
0height and width -- list -- min and max
0Multiple -- pattern (regexp) -- placeholder
0Required -- step

Best Introduction to HTML5 (please DOWNLOAD for notes)

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

Best Introduction to HTML5 (please DOWNLOAD for notes)

Notes de l'éditeur