HTML Advanced: HTML 5: N.Nalini AP (SR) Scope VIT

HTML Advanced: HTML 5
N.Nalini
AP(Sr)
SCOPE
VIT
HTML5: Ground Rules
Some rules for HTML5 were established:
• New features should be based on HTML, CSS, DOM, and JavaScript

• Reduce the need for external plugins
• Better error handling
• More markup to replace scripting
• HTML5 should be device independent
• Dev process should be visible to the public
• Note: To check our browser capabilities HTML5—html5test.com
• HTML5 Validator--http://validator.nu
HTML5: New Features
• Video/audio elements for media playback

• Better support for local offline storage
• New content specific elements, like article, footer,
header, nav, section
• New form controls, like calendar, date, time, email, url,
search
• Canvas and SVG element for drawing
HTML: DOCTYPE
Previous versions of HTML defined a lot of doctypes, and choosing

the right one could be tricky. In HTML5, there is only one doctype:
<!DOCTYPE html>
HTML5: What's New
HTML 5 Form
Form Enhancements
• Placeholder text
• Specific text input: email, URL, number, search
• Slider
• Date picker
• User Agent validation
HTML5: Input - e-mail
The email type is used for input fields that should

contain an e-mail address.
The value of the email field is automatically validated

when the form is submitted.
E-mail: <input type="email" name="user_email" />

HTML5: Input - url
The url type is used for input fields that should contain a
URL address.
The value of the url field is automatically validated

when the form is submitted.
Homepage: <input type="url" name="user_url" />

HTML5: Input - number
The number type is used for input fields that should contain
a numeric value.
Set restrictions on what numbers are accepted:
Points: <input type="number" name="points" min="1"

max="10" />
HTML5: Input - range
The range type is used for input fields that should

contain a value from a range of numbers.
The range type is displayed as a slider bar.
You can also set restrictions on what numbers are

accepted:
<input type="range" name="points" min="1" max="10"

/>
HTML5: Input – date pickers
HTML5 has several new input types for selecting date

and time:
> date - Selects date, month and year

> month - Selects month and year
> week - Selects week and year
> time - Selects time (hour and minute)
> datetime - Selects time, date, month and year
> datetime-local - Selects time, date, month and
year (local time)
HTML5: Input - search
The search type is used for search fields like a site search or Google
search.
The search field behaves like a regular text field.

HTML5: Input – color picker
The color type is used for input fields that should contain a color.
This input type will allow you to select a color from a color picker:
Color: <input type="color" name="user_color" />

HTML5: Input - form
HTML5 has several new elements and attributes for forms.
> datalist
> keygen
> output
HTML5: Form elements
The datalist element specifies a list of options for an

input field. The list is created with option elements
inside the datalist.
The purpose of the keygen element is to provide a

secure way to authenticate users.
The output element is used for different types of

output, like calculations or script output:
FORM ATTRIBUTES
autocomplete An option to turn off automatic form completion of values for a field. Possible
values are “on” and “off”.
autofocus Whether focus should be set to this field as soon as it has loaded.
list To connect with a <datalist> element by its id, to use its <option> elements as
suggestions.
max Maximum value for the value that can be put in.
min Minimum value for the value that can be put in.
multiple Allows for selection of multiple files for <input type=”file”> elements, and for
multiple e-mail addresses separated by a comma.
novalidate Applies only to the <form> element, and prevents a form from being validated
before submitted.
pattern Declaring what pattern should be used for validating a field’s value, in the form
of a regular expression.
placeholder Meant to be able to display a hint to the end user what to input.
readonly If a field should be readonly.

required For validation purposes, if a field is required or not.
spellcheck Lets the web browser know if it should spell check the contents or
not.
step Possibility to control the size of each step for elements that accepts
number or date input.
formaction For buttons that submit a form (e.g. <input

type=”submit”>, <input type=”image”> and <button>
elements) to be able to override the action attribute of
the form; for instance if different buttons should submit
the form to different URLs. No more JavaScript to do this!
formenctype For buttons that submit a form to be able to override the

form’s specified encoding
formmethod For buttons that submit a form to be able to override the
form’s method attribute, in case a button should change
the method.
formnovalidate Append to a submit button to bypass form validation.
formtarget For buttons that submit a form to be able to override the

form’s target attribute.
Media elements
Tag Description
<audio> Defines sound content
<embed> Defines a container for an external (non-HTML) application
Defines multiple media resources for media elements (<video>

<source>
and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines video or movie

HTML5: Video
<!DOCTYPE HTML>
<html>
<body>
<video src="movie.ogg" width="320" height="240"

controls="controls">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML5: Video
<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles"
srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles"
srclang="no" label="Norwegian">
</video>
HTML5: Video
HTML5: Audio
<!DOCTYPE HTML>
<html>
<body>
<audio src="song.ogg" controls="controls">

Your browser does not support the audio element.
</audio>
</body>
</html>
HTML5: Audio
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
HTML5: Audio
HTML5: Figure
<figure>
<img src="/media/examples/elephant-660-480.jpg"
alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure>
HTML5: Canvas
The HTML5 canvas element uses JavaScript to draw graphics on a

web page.
A canvas is a rectangular area, and control every pixel of it.
The canvas element has several methods for drawing paths, boxes,
circles, characters, and adding images.
HTML5: Canvas
Adding a canvas element to the HTML5 page.
Specify the id, width, height of the element:
<canvas id="myCanvas" width="200" height="100"></canvas>

HTML5: Canvas
The canvas element has no drawing abilities of its own.

All drawing must be done inside a JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
HTML5 SVG
• HTML5 is SVG ELEMENT (Scalable Vector Graphics Element) –to draw

the graphical representation.
• Canvas needs lots of coding.
• ✔ It defines the Vector based graphics
• ✔ The script of SVG is in XML format
• ✔ Since it is vector based graphics, So there is no any chance to
loose the quality even on zoomed situation
• ✔ Every independent element can be animated also
• ✔ It is the recommendation of W3C
Example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

<polygon points="100,10 40,180 190,60 10,60 160,180"/>
</svg>
</body>
</html>
HTML5 CANVAS vs HTML5 SVG
✔ It is created with the help of Java Script ✔ It is created in XML format
✔ Since it is in XML format, So we can also call

✔ It is rendered pixel by pixel
external Java Script for even handling and etc.
✔ It is Resolution Dependent ✔ It is Resolution Independent
✔ It has no support for event handling ✔ It has support for even handling
✔ It has low text rendering capabilities ✔ It has high text rendering capabilities
✔ The graphics output can be saved as jpg or png

✔ The graphics output can’t be saved in image format
format
✔ Best suited for graphical intensive games ✔ Not suited for games application
✔ Once the graphic is drawn, it is forgotten by the

✔ It is always remembered by the browser
browser
HTML5 Web Storage Objects
• The HTML5 Web Storage is a process, which stores the data locally on
the user's browser.
HTML web storage provides two objects for storing data on the client:
• window.localStorage - stores data with no expiration date

• window.sessionStorage - stores data for one session (data is lost when the
browser tab is closed)
Before using web storage, check browser support for localStorage and
sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
The localStorage Object
The localStorage object stores the data with no expiration
date. The data will not be deleted when the browser is closed,
and will be available the next day, week, or year.
Example
• // Store
localStorage.setItem("lastname", "Smith");
• // Retrieve
document.getElementById("result").innerHTML =
localStorage.getItem("lastname");
• //remove
localStorage.removeItem("lastname");
The sessionStorage Object
The sessionStorage object is equal to the localStorage object, except
that it stores the data for only one session. 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:
Example
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked
the button " + sessionStorage.clickcount + " time(s) in this session.";

HTML Advanced: HTML 5: N.Nalini AP (SR) Scope VIT

Uploaded by

Copyright:

Available Formats

HTML Advanced: HTML 5: N.Nalini AP (SR) Scope VIT

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Advanced: HTML 5: N.Nalini AP (SR) Scope VIT

Uploaded by

Copyright:

Available Formats

HTML Advanced: HTML 5

Some rules for HTML5 were established:

• New features should be based on HTML, CSS, DOM, and JavaScript

• Video/audio elements for media playback

Previous versions of HTML defined a lot of doctypes, and choosing

The email type is used for input fields that should

The value of the email field is automatically validated

E-mail: <input type="email" name="user_email" />

The value of the url field is automatically validated

Homepage: <input type="url" name="user_url" />

Set restrictions on what numbers are accepted:

Points: <input type="number" name="points" min="1"

The range type is used for input fields that should

The range type is displayed as a slider bar.

You can also set restrictions on what numbers are

<input type="range" name="points" min="1" max="10"

HTML5 has several new input types for selecting date

> date - Selects date, month and year

The search field behaves like a regular text field.

Color: <input type="color" name="user_color" />

HTML5 has several new elements and attributes for forms.

The datalist element specifies a list of options for an

The purpose of the keygen element is to provide a

The output element is used for different types of

readonly If a field should be readonly.

formaction For buttons that submit a form (e.g. <input

formenctype For buttons that submit a form to be able to override the

formtarget For buttons that submit a form to be able to override the

<audio> Defines sound content

<embed> Defines a container for an external (non-HTML) application

Defines multiple media resources for media elements (<video>

<video> Defines video or movie

<video src="movie.ogg" width="320" height="240"

<video width="320" height="240" controls="controls">

<audio src="song.ogg" controls="controls">

The HTML5 canvas element uses JavaScript to draw graphics on a

A canvas is a rectangular area, and control every pixel of it.

Adding a canvas element to the HTML5 page.

Specify the id, width, height of the element:

<canvas id="myCanvas" width="200" height="100"></canvas>

The canvas element has no drawing abilities of its own.

• HTML5 is SVG ELEMENT (Scalable Vector Graphics Element) –to draw

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

✔ Since it is in XML format, So we can also call

✔ It is Resolution Dependent ✔ It is Resolution Independent

✔ The graphics output can be saved as jpg or png

✔ Once the graphic is drawn, it is forgotten by the

• window.localStorage - stores data with no expiration date

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.