HTML 5

C O R E T E C H I E S ™
HTML 5
1
coretechies HTML 5 @himmsrathore

content
 History overview
 Getting Started With HTML5
 Structure of a Web Page
 Forms Attribute
 Audio and Video
 HTML5 Canvas
 Introduction to Data Storage
 Introduction to Geo location
http://localhost/Html5App/Html5Test/public_html/test08.html
2

An Overview of HTML5
 Tim Berners-Lee invented the "World Wide Web" in 1989.
 From 1991 to 1998, HTML developed from version 1 to version
4.
 In 2000, the World Wide Web Consortium (W3C) recommended
XHTML 1.0.
 In 2008, the first HTML5 public draft was released
 The W3C HTML5 recommendation was released 28. October
2014.
3

Getting Started With HTML5
requirement
 Modern browsers such as
Firefox 3.5 +, IE9, chrome, safari
For Development
Any IDE or Notepad
W3C World Wide Web Consortium
WHATWG Web Hypertext Application Technology Working Group
SGML:Standard generalized markup language
4

Compared to the rather verbose XHTML 1.0
Transitional doctype used
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN”
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd" >
HTML5 doctype is very simple:
<!DOCTYPE html>
5

Some Tags become History
 Basefont
 big
 center
 Font
 S
 Strike
 tt
 U
• frame
• frameset
• noframes
6

• acronym gets replaced by abbr.
• applet gets replaced by object.
• dir gets replaced by ul.
7

deprecated elements
• align
• link, vlink, alink, and text attributes on the body tag
• bgcolor
• height and width
• scrolling on the iframe element
• valign
• hspace and vspace
• cellpadding, cellspacing, and border on table
Be sure to validateyour pages with the W3C Validator service
8

New Structural Tagsand Attributes
Basic Attribute
<header>
<nav>
<section>
<article>
<aside>
<footer>
“Sections can have many articles, and articles can also have many
sections.”
9

10

Solution IE<9

11

User-Friendly web Forms
we’ll cover the following features
 Email field [<input type="email">]
 URL field [<input type="url">]
 Telephone field [<input type="tel">]
 Search field [<input type="search“>]
 Slider (range) [<input type="range">]
 Number [<input type="number">]
12

 Date fields [<input type="date">]
 Dates with Times [<input type="datetime">]
 Color [<input type="color">]
 Autofocus support [<input type="text" autofocus>]
 Placeholder support [<input type="email"
placeholder="me@example.com">]
 In-place editing support [<p contenteditable>lorem
ipsum</p>]
13

 <Progress>
<progress value="60" max="100">60%</progress>
 <Meter>
<meter min="0" max="10" value="8">8 of 10</meter>
 <Figure>
 <Mark>
The mark <mark> element represents a run </mark>of text in
one document marked or highlighted
14

 Autocomplete
 Novalidate
 Autofocus
 Formaction
 Formmethod
 formnovalidate
 Note: The formaction attribute is used with type="submit" and type="image“
 Formtarget
Note: The formnovalidate attribute can be used with type="submit".
15

 Required
 Readonly
 Multiple
 DataList
<input list="Country">
<datalist id="Country">
<option value="India">
<option value="Italy">
<option value="Iran">
<option value="Israel">
<option value="Indonesia">
</datalist>
16

17
Keygen
Output
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>

Advance HTML 5
 Audio & Video
 Canvas & SVG
 GeoLocation
 LocalStorage
18

Audio
19
 HTML5 supports audio and video without the need
for Flash.
<audio controls autoplay>
<source src=“sound/audio.ogg" type="audio/ogg" />
<source src=“sound/audio.wav" type="audio/wav" />
</audio>

20
 Autoplay
This boolean attribute if specified, the audio will automatically begin to play back as
soon as it can do so without stopping to finish loading the data.
 Autobuffer
This boolean attribute if specified, the audio will automatically begin buffering even if
it's not set to automatically play.
 Controls
If this attribute is present, it will allow the user to control audio playback, including
volume, seeking, and pause/resume playback.
 loop
This boolean attribute if specified, will allow audio automatically seek back to the start
after reaching at the end.
 Preload
This attribute specifies that the audio will be loaded at page load, and ready to run.
Ignored if autoplay is present.
 Src
The URL of the audio to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed

Video
21
 video formats browsers should support in the video
tag
 OGG
 MP4
 mpeg4
<video width="300" height="200" controls autoplay>
<source src="/html5/foo.ogg" type="video/ogg" />
<source src="/html5/foo.mp4" type="video/mp4" />
</video>
Autoplay ,autobuffer, controls ,height, loop, preload ,poster,
src ,width

Scalable Vector Graphics SVG
22
 SVG is mostly useful for vector type diagrams ,2D
graphs in an X,Y coordinate system etc.
 HTML5 allows embeding SVG directly using
<svg>...</svg> tag
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>

Canvas
23
 HTML5 element <canvas> gives you an easy and
powerful way to draw graphics using JavaScript.
 moveTo(x,y) defines the starting point of the line
 lineTo(x,y) defines the ending point of the line
 createLinearGradient(x,y,x1,y1) - Creates a linear gradient
 createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient

local storage
24
 HTML5 introduces two mechanisms, similar to HTTP
session cookies, for storing structured data on the client
side and to overcome following drawbacks.
 Cookies are included with every HTTP request, thereby
slowing down your web application by transmitting the
same data.
 Cookies are included with every HTTP request, thereby
sending data unencrypted over the internet.
 Cookies are limited to about 4 KB of data . Not enough to
store required data.
 The two storages are session storage and local
storage and they would be used to handle different
situations.

25
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( sessionStorage.hits ){
sessionStorage.hits = Number(sessionStorage.hits) +1;
}else{
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );
</script>
</body>
</html>

GeoLocation
26
 Geolocation determines a person’s whereabouts by
looking at
 their computer’s IP address, MAC address, Wi-Fi
hotspot location, or
 even GPS coordinates if available. Although not
strictly part of HTML5
navigator.geolocation.getCurrentPosition(function(position) {
showLocation(position.coords.latitude, position.coords.longitude);
});

27

HTML 5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a HTML 5

Semelhante a HTML 5 (20)

HTML 5