Html5

Submitted by :-
Akash Tripathi

• HTML5 is a markup language for structuring and
presenting content for the World Wide Web.
• HTML5 is the next major revision of the HTML
standard superseding HTML 4.01, XHTML 1.0, and
XHTML 1.1.
• HTML5 is a cooperation between the World Wide
Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group
(WHATWG).

• <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• <!DOCTYPE html>

The <meta> tag
The <meta> tag
• <meta http-equiv="Content-
Type" • <meta charset="UTF-8">
content="text/html;charset=UTF-
8">

The <script> tag
The <script> tag • <link rel="stylesheet"
• <script type="text/javascript“ src="file.js"> href="file.css">
</script>

• Content-editable
• contextmenu
Elements Attributes • draggable
• dropzone
• Hidden
• data
• spellcheck

Event handlers in Javascript or vbscript to specify values of event tag attribute.
Attributes can be used to trigger any javascript or vbscript code of given value, when
there is any event occurring for any HTML5 element.
Documentation:- Action:- Media:- Windows and forms:-

Oncanplay
offline/online/onoffline Onclick/ondbclick Onabort/onblur/onfocus
oncanplaythrough
onoine/ononline

Ondrag/ondragend Onplay/onpause/onplaying Onerror/oninvalid
onbeforeprint/onafterprint ondragcenter/ondragleave
ondragover/ondragstart Onemptied/onended
ondrop Onformchange/onforminput
Onbeforeonload/onload
onunload Onloadeddata/onprogress
Onkeydown/onkeypress
Oninput/onsubmit
onkeyup
Onratechange
Onhaschange onreadystatechange
Onmousedown
Onpopstate/onresize
onmousemove
Onseeked/onseeking
Onredo/onundo onsuspend/ontimeupdate
Onmouseout/onmouseover
onselect
onmouseup
Onvolumechange/onwaiting
Onstorage
Onmousewheel

Web Form 2.0 provides a greater degree of semantic mark-up than
HTML4 and remove a great deal of the need for tedious scripting and
styling.

New <input> new in HTML5
<input> typesattributes in HTML5
Month step
readonly
min
Color formaction
Date autocomplete Time
week list
Range
list multiple url max
placeholder
required pattern formenctype
Search Email
Tel
formnovalidate Datetime-local
formmethod
Datetime
Number form autofocus

Labels
<label for="inputID">Label: </label>
<input id="inputID" name="inputName" type="text" />

The value of the for attribute should match the value of the
input's id attribute

Attributes
<input id="inputID" name="inputName"
placeholder="placeholder text"
pattern="w{6,9}"
required
autofocus
type="text"/>

form attribute
form="notMyParentForm"

Note: form=" disassociates a form element from its parent form. “

color attribute
<input name="color"
type="color" />

<input id="color"
name="color“
type="color"
placeholder="#FFFFFF"
pattern="#[0-9A-Fa-f]{6}"
required />

url attribute
<input name="website" type="url" />

<input
id="website"
name="url“
type="url“
placeholder="http://www.domain.com"
pattern="(http|https|ftp)://[a-zA-Z0-9-./]*"/>

Different dynamic keyboards displayed
based on input type.

tel attribute
<input name="telephone" type="tel" />

<input
id="phone"
name="phone"
type="tel"
placeholder="415-555-1212"
pattern="d{3}-d{3}-d{4}"/>

email attribute
<input name="address" type="email" />

<input
id="email"
name="email"
type="email"
placeholder="you@domain.com" multiple />

number attribute <input
‘number' specific attributes: id="nickels"
•min type="number"
•max placeholder="0, 5, 10 …"
•step pattern="[0-9]*[05]"
min="0"
max="1000"
step="5" />

range attribute
<input
id="range"
name="range"
type="range"
placeholder="0 to 10"
pattern="[0-9]|10" min="0" max="10" step="1"/>

search attribute
<form>
<input name="q" type="search">
<input type="submit" value="Go">
</form>

date attribute
<form>
<input name="birthday" type="date">
<input type="submit" value="Go"> </form>

datetime attribute
<form>
<input name="t" type="datetime">

week attribute
<form>
<input name="w" type="week">

time attribute
<form>
<input name="t" type="time">

validation attribute
var validityObject = document.getElementById['form_control'].validity;

Examples:- Styling:-
validityObject.valueMissing ::-webkit-validation-bubble {}
validityObject.typeMismatch ::-webkit-validation-bubble-arrow-clipper {}
validityObject.patternMismatch ::-webkit-validation-bubble-arrow {}
validityObject.tooLong ::-webkit-validation-bubble-message {}
validityObject.rangeUnderflow
validityObject.rangeOverflow
validityObject.stepMismatch
validityObject.valid
validityObject.customError

<meter>, <progress> & <output> attribute
Example:-

<meter value=75 min=0 max=100 >75% full</meter>

<progress>loading...</progress>

<progress value="75" max="100">75% complete</progress>

<output>

Speech Input attribute

<input type="text" x-webkit-speech />

Developed for you in parts by

Persistent local storage is one of the areas where native
client applications have held an advantage over web
applications. For native applications, the operating
system typically provides an abstraction layer for storing
and retrieving application-specific data like preferences
or runtime state.

Logo for localstorage

Implementation

function supports_html5_storage() {
try {
return 'localStorage' in window &&
window['localStorage'] !== null;
} catch (e) {
return false;
}
}

For receiving and storing
interface Storage {
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any
data);
};

var foo = localStorage.getItem("bar");
// ... localStorage.setItem("bar", foo);

For removing

interface Storage {
deleter void removeItem(in DOMString key);
void clear();
};

For total number of values

interface Storage {
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
};

Property Type Description
key string the named key that was added, removed, or modified

the previous value (now overwritten), or null if a new item was
oldValue any
added

newValue any the new value, or null if an item was removed

url* string the page which called a method that triggered this change

var Socket = new WebSocket(url, [protocal] );

Attributes
Socket.readyState
Socket.bufferedAmount
Events
Open Socket.onopen
Message Socket.onmessage
Error Socket.onerror
Close Socket.onclose
Methods
Socket.send()
Socket.close()

// Let us open a web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function() {
// Web Socket is connected, send data using send()
ws.send("Message to send");
alert("Message is sent...");

ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function() {
// websocket is closed. alert("Connection is closed...");
};

HTML 5 defines the <canvas> element as “a resolution-dependent
bitmap canvas which can be used for rendering graphs, game graphics,
or other visual images on the fly.” A canvas is a rectangle in your page
where you can use JavaScript to draw anything you want.

Simple shapes
function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
/ ctx.strokeText("Hello World",10,50);


// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
/ var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

<img id="cat" src="images/cat.png" alt="sleeping cat“
width="177" height="113">
<canvas id="e" width="177" height="113">
</canvas>

drawImage(image,dx,dy)
drawImage(image,dx,dy, dw, dh)
drawImage(image, , sx, sy, sw, sh, dx, dy, dw, dh)

The geolocation API lets you share your location
with trusted web sites.

The geolocation API centers around a new property on the global navigator
object: navigator.geolocation.
The simplest use of the geolocation API looks like this:

function get_location() {
navigator.geolocation.getCurrentPosition(show_
map); }

function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// let's show a map!
}

Property Type Notes
coords.latitude double decimal degrees
coords.longitude double decimal degrees
meters above the reference
coords.altitude double or null
ellipsoid
coords.accuracy double meters
coords.altitudeAccuracy double or null meters
degrees clockwise from true
coords.heading double or null
north
coords.speed double or null meters/second
timestamp DOMTimeStamp like a Date() object

Microdata is a standardized way to provide additional
semantics in your web pages.

<div itemscope>
<p>My name is <span
itemprop="name">Zara</span>.</p> </div>
<div itemscope>
<p>My name is <span
itemprop="name">Nuha</span>.</p>
</div>

Drag and drop is a very common feature. It is when you
"grab" an object and drag it to a different location.

<img draggable="true">

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id); event.preventDefault()
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

<video src=myVideo.ogv
width=320 height=240
controls poster=image.jpg>
</video>

<video src=myVideo.ogv
width=320 height=240
controls poster=image.jpg>
Download my awesome video in
<a href=myVideo.ogg>Ogg</a>
or <a href=myVideo.mp4>MP4</a> format </video>

<audio src="audio.mp3“
controls preload>
</audio>

HTML5 can be used as an alternative to Adobe Flash.

•Stability, faster processes and sponsorship deals.
•WHATWG/W3C 'split'?
•W3C work to ensure the spec doesn't become forked
•How soon will HTML5 become a 'stable standard'? Targeting
2014…!!!
•Browser vendors rapidly providing updates
•Sponsorship deal for w3c

Html5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Html5

Similar a Html5 (20)

Html5