7/23/2019 W3 XML

1/19

NNNNoooo tttt eeee bbbboooo oooo kkkk :::: W eb Pro ramin

CCCCrrrreeee aaaatttt eeee dddd:::: 10 7 2015 10:04 PM UUUU ddddaaaatttt eeee dddd :::: 10 7 2015 10:53 PM

AAAA uuuu tttt hhhhoooo rrrr:::: rana 06b@ mail.com

UUUURRRRLLLL:::: ht t : www.w3schools.com html html5 browsers.as

HTML5

Define HTML5 Elements as Block ElementsHTML5 defines eight new semanticHTML elements. All these are block-levelelements.

To secure correct behavior in older browsers, you can set the CSS displayproperty to block:

, , , , , , , :;

An HTML5 Skeleton

Example

HTML5 S

: V, ; :0.8;,, ,,:1 ; :5; :8; :0; :0; :; :5;

HTML5 SK

HTML5 S HTML5 G HTML5 G

7/23/2019 W3 XML

2/19

F C

LL E. I UK,

13 .

PP F.

TT J, G T A, .

&; 2014 W3S. A .

New Elements in HTML5

Below is a list of the new HTML5 elements, and a description of what they are used for.

New Semantic/Structural ElementsHTML5 offers new elements for better document structure:

Tag Description

Defines an article in the document

Defines content aside from the page content

Defines a part of text that might be formatted in a different direction from other text

Defines additional details that the user can view or hide

Defines a dialog box or window

Defines a caption for a element

Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.

Defines a footer for the document or a section

Defines a header for the document or a section

7/23/2019 W3 XML

3/19

Defines the main content of a document

Defines marked or highlighted text

Defines a command/menu item that the user can invoke from a popup menu

Defines a scalar measurement within a known range (a gauge)

Defines navigation links in the document

Defines the progress of a task

Defines what to show in browsers that do not support ruby annotations

Defines an explanation/pronunciation of characters (for East Asian typography)

Defines a ruby annotation (for East Asian typography)

Defines a section in the document

Defines a visible heading for a element

Defines a date/time

Defines a possible line-break

Read more about HTML5 Semantics.

New Form Elements

Tag Description

Defines pre-defined options for input controls

Defines a key-pair generator field (for forms)

Defines the result of a calculation

Read all about old and new form elements in HTML Form Elements.

New Input Types

New Input Types New Input Attributes

colordate

datetimedatetime-localemailmonthnumberrangesearchtel

timeurlweek

autocompleteautofocus

formformactionformenctypeformmethodformnovalidateformtargetheight and widthlist

min and maxmultiplepattern (regexp)

7/23/2019 W3 XML

4/19

placeholderrequiredstep

Learn all about old and new input types in HTML Input Types.

Learn all about input attributes in HTML Input Attributes.

HTML5 - New Attribute SyntaxHTML5 allows four different syntaxes for attributes.

This example demonstrates the different syntaxes used in an tag:

Type Example

Empty

Unquoted

Double-quoted

Single-quoted

In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.

HTML5 Graphics

Tag Description

Defines graphic drawing using JavaScript

Defines graphic drawing using SVG

Read more about HTML5 Canvas.

Read more about HTML5 SVG.

New Media Elements

Tag Description

Defines sound or music content

Defines containers for external applications (like plug-ins)

Defines sources for and

Defines tracks for and

Defines video or movie content

7/23/2019 W3 XML

5/19

Previous Next Cha ter

HTML5 Semantic Elements

Semantics is the study of the meanings of words and phrases in language.Semantic elements are elements with a meaning.

What are Semantic Elements?A semantic element clearly describes its meaning to both the browser and the developer.

Examples o f non-semanticelements: and - Tells nothing about its content.

Examples o f semanticelements: , , and - Clearly defines its content.

Browser Support

HTML5 semantic elements are supported in all modern browsers.

In addition, you can "teach" older browsers how to handle "unknown elements".

Read about it in HTML5 Browser Support.

New Semantic Elements in HTML5Many web sites contain HTML code like: to indicate navigation, header, and footer.

HTML5 offers new semantic elements to define different parts of a web page:

HTML5

ElementThe elementdefines a section in adocument.

According to W3C'sHTML5 documentation:"A section is a thematic

grouping of content, typically with a heading."

A Web site's home page could be split into sections for introduction, content, and contact information.

7/23/2019 W3 XML

6/19

Example

WWF T W W F N (WWF) ....

Try it yourself

HTML5 ElementThe element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it independently from the rest of theweb site.

Examples of where an element can be used:

Forum postBlog postNewspaper article

Example

W D WWF D? WWF' ' , .

Try it Yourself

Nesting Semantic ElementsIn the HTML5 standard, the element defines a complete, self-contained block of related elements.

The element is defined as a block of related elements.

Can we use the definitions to decide how to nest elements? No, we cannot!

On the Internet, you will find HTML pages with elements containing elements, and elements containing elements.

You will also find pages with elements containing elements, and elementscontaining elements.

Newspaper: The sports articlesin the sports section, have a technical sectionin each article.

7/23/2019 W3 XML

7/19

HTML5 ElementThe element specifies a header for a document or section.

The element should be used as a container for introductory content.

You can have several elements in one document.

The following example defines a header for an article:

Example

W D WWF D? WWF' : WWF' ' , .

Try it Yourself

HTML5 ElementThe element specifies a footer for a document or section.

A element should contain information about its containing element.

A footer typically contains the author o f the document, copyright information, links to terms of use, contactinformation, etc.

You can have several elements in one document.

Example

P : H R C : @..

Try it Yourself

HTML5 ElementThe element defines a set of navigation links.

The element is intended for large blocks of navigation links. However, not all links in a document shouldbe inside a element!

7/23/2019 W3 XML

8/19

Example

HTML CSS

JS Q

Try it Yourself

HTML5 ElementThe element defines some content aside from the content it is placed in (like a sidebar).

The aside content should be related to the surrounding content.

Example

M I T E .

E C T E C D W, F.

Try it Yourself

HTML5 and ElementsIn books and newspapers, it is common to have captions with images.

The purpose of a caption is to add a visual explanation to an image.

With HTML5, images and captions can be grouped together in elements:

Example

F1. T P R, N.

Try it Yourself

The element defines the image, the element defines the caption.

7/23/2019 W3 XML

9/19

Previous Com lete HTML Reference Next

Why Semantic HTML5 Elements?With HTML4, developers used their own favorite attribute names to style page elements:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

This made it impossible for search engines to identify the correct web page content.

With HTML5 elements like: , this will become easier.

According to the W3C, a Semantic Web:

"Allows data to be shared and reused across applications, enterprises, and communities."

Semantic Elements in HTML5Below is an alphabetical list of the new semantic elements in HTML5.

The links go to our complete HTML5 Reference.

Tag Description

Defines an article

Defines content aside from the page content

Defines additional details that the user can view or hide

Defines a caption for a element

Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

Defines a footer fo r a document or section

Specifies a header for a document or section

Specifies the main content of a document

Defines marked/highlighted text

Defines navigation links

Defines a section in a document

Defines a visible heading for a element

Defines a date/time

HTML Tag

Example

A section in a document, explaining what WWF is:

7/23/2019 W3 XML

10/19

7/23/2019 W3 XML

11/19

Try it yourself

Draw a Line

= .EBI("C"); = .C("2");.T(0,0);.T(200,100);.();

Try it Yourself

Draw a Circle

= .EBI("C"); = .C("2");.P();.(95,50,40,0,2*M.PI);.();

Try it Yourself

7/23/2019 W3 XML

12/19

JavaScript syntax: context.arc(x,y,r,sAngle,eAngle,counterclockwise);

Parameter Values

Parameter Description Play it

x The x-coordinate of the center of the circle Play it

y The y-coordinate of the center of the circle Pla it

r The radius of the circle Pla it

sAngle The starting angle, in radians (0 is at the 3 o'clock position of the arc's

circle)Pla it

eAngle The ending angle, in radians Play it

counterclockwise Optional. Specifies whether the drawing should be counterclockwise orclockwise. False is default, and indicates clockwise, while true indicatescounter-clockwise.

Play it

Draw a Text

= .EBI("C"); = .C("2");. = "30 A";.T("H W",10,50);

Try it Yourself

JavaScript syntax: context.fillText(text,x,y,maxWidth);

Parameter Values

Parameter Description Play it

text Specifies the text that will be written on the canvas Play it

x The x coordinate where to start painting the text (relative to the canvas) Play it

y The y coordinate where to start painting the text (relative to the canvas) Play it

maxWidth Optional. The maximum allowed width of the text, in pixels

Stroke Text

= .EBI("C"); = .C("2");. = "30 A";.T("H W",10,50);

The strokeText() method draws text (with no fill) on the canvas. The default color of the text is black.

Tip:Use the font property to specify font and font size, and use the strokeStyle property to render the

7/23/2019 W3 XML

13/19

text in another color/gradient.

JavaScript syntax: context.strokeText(text,x,y,maxWidth);

Parameter Values

Parameter Description Play it

text Specifies the text that will be written on the canvas Play it

x The x coordinate where to start painting the text (relative to the canvas) Pla it

y The y coordinate where to start painting the text (relative to the canvas) Pla it

maxWidth Optional. The maximum allowed width of the text, in pixels Pla it

Draw Linear Gradient = .EBI("C"); = .C("2");

// C = .LG(0,0,200,0);.CS(0,"");.CS(1,"");

// F .S = ;.R(10,10,150,80);

Try it Yourself

Definition and UsageThe createLinearGradient() method creates a linear gradient object.

The gradient can be used to fill rectangles, circles, lines, text, etc.

Tip:Use this object as the value to the strokeStyle or fillStyle properties.

Tip:Use the addColorStop() method to specify different colors, and where to position the colors in thegradient object.

JavaScript syntax: context.createLinearGradient(x0,y0,x1,y1);

7/23/2019 W3 XML

14/19

Parameter Description

x0 The x-coordinate of the start point of the gradient

y0 The y-coordinate of the start point of the gradient

x1 The x-coordinate of the end point of the gradient

y1 The y-coordinate of the end point of the gradient

Example

Define a gradient (top to bottom) as the fill style for the rectangle:

JavaScript:

=.EBI("C"); =.C("2"); =.LG(0,0,0,170);.CS(0,"");.CS(1,"");.S=;.R(20,20,150,100);

Try it yourself

Define a gradient that goes from black, to red, to white, as the fill style for the rectangle:

JavaScript:

=.EBI("C"); =.C("2"); =.LG(0,0,170,0);.CS(0,"");.CS(0.5,"");.CS(1,"");.S=;.R(20,20,150,100);

7/23/2019 W3 XML

15/19

Try it yourself

Definition and UsageThe createRadialGradient() method creates a radial/circular gradient object.

The gradient can be used to fill rectangles, circles, lines, text, etc.

Tip:Use this object as the value to the strokeStyle or fillStyle properties.

Tip:Use the addColorStop() method to specify different colors, and where to position the colors in thegradient object.

JavaScript syntax: context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Parameter Values

Parameter Description

x0 The x-coordinate of the starting circle of the gradient

y0 The y-coordinate of the starting circle of the gradient

r0 The radius of the starting circle

x1 The x-coordinate of the ending circle of the gradient

y1 The y-coordinate of the ending circle of the gradient

r1 The radius of the ending circle

Example

Draw a rectangle and fill with a radial/circular gradient:

JavaScript:

=.EBI("C"); =.C("2");

=.RG(75,50,5,90,60,100);.CS(0,"");.CS(1,"");

// F .S=;.R(10,10,150,100);

7/23/2019 W3 XML

16/19

Try it yourself

HTML canvas drawImage() Method

ExampleDraw the image onto the canvas:

JavaScript:

. = () =.EBI("C"); =.C("2"); =.EBI(""); .I(,10,10);;

Try it yourself

efinition and UsageThe drawImage() method draws an image, canvas, or video onto the canvas.

The drawImage() method can also draw parts of an image, and/or increase/reduce the image size.

Note:You cannot call the drawImage() method before the image has loaded. To ensure that theimage has been loaded, you can call drawImage() from window.onload() or fromdocument.getElementById(" imageID").onload.

JavaScript SyntaxPosition the image on the canvas:

JavaScript syntax: context.drawImage(img,x,y);

Position the image on the canvas, and specify width and height of the image:

JavaScript syntax: context.drawImage(img,x,y,width,height);

7/23/2019 W3 XML

17/19

Clip the image and position the clipped part on the canvas:

JavaScript syntax: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Parameter Values

Parameter Description Play it

img Specifies the image, canvas, or video element to use

sx Optional. The x coordinate where to start clipping Pla it

sy Optional. The y coordinate where to start clipping Play it

swidth Optional. The width of the clipped image Play it

sheight Optional. The height of the clipped image Play it

x The x coordinate where to place the image on the canvas Play it

y The y coordinate where to place the image on the canvas Play it

width Optional. The width of the image to use (stretch or reduce the image) Play it

height Optional. The height of the image to use (stretch or reduce the image) Play it

What is HTML Local Storage?With local storage, web applications can store data locally within the user's browser.

Before HTML5, application data had to be stored in cookies, included in every server request. Local storage ismore secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access thesame data.

TML Local Storage ObjectsHTML local storage provides two objects for storing data on the client:

window.localStorage - stores data with no expiration datewindow.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

Before using local storage, check browser support for localStorage and sessionStorage:

((S) !== "")

// // S! N W S ..

The localStorage ObjectThe localStorage object stores the data with no expiration date. The data will not be deleted when the browser

7/23/2019 W3 XML

18/19

is closed, and will be available the next day, week, or year.

Example

// S

S.I("", "S");// R.EBI("").HTML = S.I("");

Try it yourself

Example explained:

Create a localStorage name/value pair with name="lastname" and value="Smith"Retrieve the value of "lastname" and insert it into the element with id="result"

The example above could also be written like this:

// SS. = "S";// R.EBI("").HTML = S.;

The syntax for removing the "lastname" localStorage item is as follows:

S.I("");

Note:Name/value pairs are always stored as strings. Remember to convert them to another format whenneeded!

The following example counts the number of times a user has clicked a button. In this code the value string is

converted to a number to be able to increase the counter:

Example

(S.) S. = N(S.) + 1; S. = 1;.EBI("").HTML = " "+S. + " ().";

Try it Yourself

The sessionStorage ObjectThe sessionStorage object is equal to the localStorage object, exceptthat it stores the data for only onesession. The data is deleted when the user closes the specific browser tab.

The following example counts the number of times a user has clicked a button, in the current session:

7/23/2019 W3 XML

19/19

Example

(S.) S. = N(S.) + 1;

S. = 1;.EBI("").HTML = " "+S. + " () .";

Try it Yourself

a