Html5
-
Upload
akash-tripathi -
Category
Documents
-
view
568 -
download
3
description
Transcript of Html5
![Page 1: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/1.jpg)
University Institute of Technology
Submitted by :-Akash Tripathi
![Page 2: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/2.jpg)
![Page 3: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/3.jpg)
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).
![Page 4: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/4.jpg)
![Page 5: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/5.jpg)
Whats new…
New Semantic Elements:
Forms 2.0
Persistent Local Storage
WebSocket
Server-Sent Events
Canvas
Audio & video
Geolocation
Microdata
Drag & Drop
![Page 6: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/6.jpg)
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
![Page 7: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/7.jpg)
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>
![Page 8: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/8.jpg)
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
![Page 9: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/9.jpg)
Basic HTML5 Document
![Page 10: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/10.jpg)
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
![Page 11: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/11.jpg)
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
Month
Number
Range
SearchTel
Time
urlweek
New <input> attributes in HTML5
form
readonly
autocomplete
autofocus
list
patternrequiredplaceholdermultiple
list
min
max
step
formaction
formenctype
formmethodformnovalidate
![Page 12: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/12.jpg)
<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
![Page 13: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/13.jpg)
Attributes<label for="inputID">Label: </label> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="\w{6,9}" requiredautofocus type="text"/>
![Page 14: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/14.jpg)
<label for="inputID">Label: </label> <input id="inputID" name="inputName" placeholder="placeholder text" pattern="\w{6,9}" requiredautofocus type="text"/>
![Page 15: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/15.jpg)
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 />
![Page 16: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/16.jpg)
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.
![Page 17: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/17.jpg)
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 />
![Page 18: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/18.jpg)
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"/>
![Page 19: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/19.jpg)
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>
![Page 20: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/20.jpg)
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 {}
![Page 21: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/21.jpg)
<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>
![Page 22: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/22.jpg)
Speech Input attribute
<input type="text" x-webkit-speech />
Developed for you in parts by
![Page 23: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/23.jpg)
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
![Page 24: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/24.jpg)
function supports_html5_storage() { try {
return 'localStorage' in window && window['localStorage'] !== null; } catch (e) {
return false; }
}
Implementation
![Page 25: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/25.jpg)
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);
![Page 26: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/26.jpg)
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
![Page 27: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/27.jpg)
WebSocket
var Socket = new WebSocket(url, [protocal] );
AttributesSocket.readyStateSocket.bufferedAmountEventsOpen Socket.onopenMessage Socket.onmessageError Socket.onerrorClose Socket.oncloseMethodsSocket.send()Socket.close()
![Page 28: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/28.jpg)
// 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..."); };
![Page 29: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/29.jpg)
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();
![Page 30: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/30.jpg)
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);
![Page 31: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/31.jpg)
<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)
![Page 32: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/32.jpg)
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!
}
![Page 33: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/33.jpg)
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
![Page 34: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/34.jpg)
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>
![Page 35: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/35.jpg)
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));}
![Page 36: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/36.jpg)
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>
![Page 37: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/37.jpg)
HTML5 can be used as an alternative to Adobe Flash.
![Page 38: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/38.jpg)
Compatibility check…
![Page 39: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/39.jpg)
•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
![Page 40: Html5](https://reader036.fdocuments.net/reader036/viewer/2022062418/55514f51b4c905f2288b53f7/html5/thumbnails/40.jpg)
The End