Html5

University Institute of Technology

Submitted by :-Akash Tripathi

Overview• 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).

Whats new…

New Semantic Elements:

Forms 2.0

Persistent Local Storage

WebSocket

Server-Sent Events

Canvas

Audio & video

Geolocation

Microdata

Drag & Drop

The doctype for HTML 4.01 looks like this:

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

Here’s the doctype for XHTML 1.0:

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

The doctype for HTML5 looks like this:

• <!DOCTYPE html>

Give It To Me Straight, DOCTYPE

Keeping It Simple

Here’s the declarations in HTML 4.01

The <meta> tag• <meta http-equiv="Content-Type"

content="text/html;charset=UTF-8">

The <script> tag• <script type="text/javascript“ src="file.js">

</script>

New in this WORLD…!!!

• <article>• <aside>• <bdi>• <command>• <details>• <summary>• <figure>• <figcaption>• <footer>• <header>• <group>• <mark>• <nav>• <progress>• <ruby>• <rt>• <rp>• <section>• <time>• <wbr>

Elements

Attribute

s

• Content-editable

• contextmenu

• draggable• dropzone• Hidden• data• spellcheck

Basic HTML5 Document

Documentation:-offline/online/onoffline

onoine/ononline

onbeforeprint/onafterprint

Onbeforeonload/onloadonunload

Onhaschange

Onredo/onundo

Onstorage

Action:-

Onclick/ondbclick

Ondrag/ondragendondragcenter/ondragleave

ondragover/ondragstartondrop

Onkeydown/onkeypressonkeyup

Onmousedownonmousemove

Onmouseout/onmouseoveronmouseup

Onmousewheel

Media:-

Oncanplayoncanplaythrough

Onplay/onpause/onplaying

Onemptied/onended

Onloadeddata/onprogress

Onratechangeonreadystatechange

Onseeked/onseekingonsuspend/ontimeupdate

Onvolumechange/onwaiting

Windows and forms:-

Onabort/onblur/onfocus

Onerror/oninvalid

Onformchange/onforminput

Oninput/onsubmit

Onpopstate/onresize

onselect

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.

Events

Web Form 2.0Web 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.

<input> types new in HTML5

Color Date

DatetimeDatetime-local

Email

Month

Number

Range

SearchTel

Time

urlweek

New <input> attributes in HTML5

form

readonly

autocomplete

autofocus

list

patternrequiredplaceholdermultiple

list

min

max

step

formaction

formenctype

formmethodformnovalidate

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

Labels

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

Attributes<label for="inputID">Label: </label> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="\w{6,9}" requiredautofocus type="text"/>

<label for="inputID">Label: </label> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="\w{6,9}" requiredautofocus type="text"/>

form attributeform="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="[email protected]" multiple />

number attribute‘number' specific attributes:•min•max•step

<input id="nickels" type="number" placeholder="0, 5, 10 …" 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"> <input type="submit" value="Go"> </form>

week attribute<form> <input name="w" type="week"> <input type="submit" value="Go"> </form>

time attribute<form> <input name="t" type="time"> <input type="submit" value="Go"> </form>

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

Examples:-validityObject.valueMissing validityObject.typeMismatchvalidityObject.patternMismatchvalidityObject.tooLongvalidityObject.rangeUnderflow validityObject.rangeOverflowvalidityObject.stepMismatchvalidityObject.valid validityObject.customError

Styling:-::-webkit-validation-bubble {}::-webkit-validation-bubble-arrow-clipper {} ::-webkit-validation-bubble-arrow {} ::-webkit-validation-bubble-message {}

<meter>, <progress> & <output> attributeExample:-

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

Web storage

Logo for localstorage

function supports_html5_storage() { try {

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

return false; }

}

Implementation

For total number of values

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

};

For removing

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

};

For receiving and storinginterface 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);

Property Type Description

key string the named key that was added, removed, or modified

oldValue any the previous value (now overwritten), or null if a new item was 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

WebSocket

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

AttributesSocket.readyStateSocket.bufferedAmountEventsOpen Socket.onopenMessage Socket.onmessageError Socket.onerrorClose Socket.oncloseMethodsSocket.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..."); };

canvasHTML 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.

function draw_b() { var b_canvas =

document.getElementById("b"); var b_context =

b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);

}

Simple shapes

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

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Arial";ctx.fillText("Hello World",10,50);/ ctx.strokeText("Hello World",10,50);

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");

// Create gradientvar 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 gradientctx.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)

Geolocation

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

coords.altitude double or null meters above the reference ellipsoid

coords.accuracy double meters

coords.altitudeAccuracy double or null meters

coords.heading double or null degrees clockwise from true north

coords.speed double or null meters/second timestamp DOMTimeStamp like a Date() object

microdata

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 n drop(DnD)Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.

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

<img draggable="true">

event.preventDefault()

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

Audio n Video

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

Compatibility check…

•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

The End

Html5

Documents

Transcript of Html5