HTML 5

HTML5
• HTML stands for Hyper Text Markup Language. It is

used to design web pages using markup language.
HTML is the combination of Hypertext and Markup
language. Hypertext defines the link between the
web pages. Markup language is used to define the
text document within tag which defines the structure
of web pages. HTML 5 is the fifth and current version
of HTML. It has improved the markup available for
documents and has introduced application
programming interfaces(API) and Document Object
Model(DOM).
Features
• It has introduced new multimedia features which supports audio and video controls by
using <audio> and <video> tags.
• There are new graphics elements including vector graphics and tags.
• Enrich semantic content by including <header> <footer>, <article>, <section> and
<figure> are added.
• Drag and Drop- The user can grab an object and drag it further dropping it on a new
location.
• Geo-location services- It helps to locate the geographical location of a client.
• Web storage facility which provides web application methods to store data on web
browser.
• Uses SQL database to store data offline.
• Allows to draw various shapes like triangle, rectangle, circle, etc.
• Capable of handling incorrect syntax.
• Easy DOCTYPE declaration i.e. <!doctype html>
• Easy character encoding i.e. <meta charset=”UTF-8″>
HTML5 document structure
• HTML5 is the latest version of Hypertext Markup
Language and includes three main components:
• HTML is a markup language that uses tags to
create web pages that can be viewed in a browser.
• CSS (Cascading Style Sheets) are used for the
layout and design of web pages.
• JavaScript is a programming language written
within an HTML page that allows for creating
interactive effects on web pages.
Creating
editable content
• The contenteditable attribute specifies
whether the content of an element is editable
or not.
• Syntax
• <element contenteditable="true|false">
Checking spelling mistakes
• Definition and Usage
• The spellcheck attribute specifies whether the
element is to have its spelling and grammar
checked or not.
• The following can be spellchecked:
• Text values in input elements (not password)
• Text in <textarea> elements
• Text in editable elements
Exploring custom
data attributes
• HTML5, we now have the ability to embed
custom data attributes on all HTML elements.
These new custom data attributes consist of
two parts:
• 1.Attribute Name: The data attribute name
must be at least one character long and must
be prefixed with 'data-'. It should not contain
any uppercase letters.
• 2.Attribute Value: The attribute value can be
any string.
syntax
• Using this syntax, we can add application data to our
markup as shown below:
• <ul id="vegetable-seeds">
<li data-spacing="10cm" data-sowing-time="March
to June">Carrots</li>
<li data-spacing="30cm" data-sowing-
time="February to March">Celery</li>
<li data-spacing="3cm" data-sowing-time="March
to September">Radishes</li>
</ul>
Client-Side storage
• Client-side storage works on similar principles,
but has different uses. It consists of JavaScript
APIs that allow you to store data on the client
(i.e. on the user's machine) and then retrieve
it when needed. This has many distinct uses,
such as:
• Personalizing site preferences (e.g. showing a
user's choice of custom widgets, color
scheme, or font size).
• Persisting previous site activity (e.g. storing
the contents of a shopping cart from a
previous session, remembering if a user was
previously logged in).
• Saving data and assets locally so a site will be
quicker (and potentially less expensive) to
download, or be usable without a network
connection.
• Saving web application generated documents
locally for use offline
"easier" features we mentioned above are as
follows
• 1.The Web Storage API provides a very simple
syntax for storing and retrieving smaller, data
items consisting of a name and a
corresponding value. This is useful when you
just need to store some simple data, like the
user's name, whether they are logged in, what
color to use for the background of the screen,
etc.
• 2. The IndexedDB API provides the browser
with a complete database system for storing
complex data. This can be used for things from
complete sets of customer records to even
complex data types like audio or video files.
Basic syntax
• All of your web storage data is contained

within two object-like structures inside the
browser: sessionStorage and localStorage. The
first one persists data for as long as the
browser is open (the data is lost when the
browser is closed) and the second one persists
data even after the browser is closed and then
opened again.
• The Storage.setItem() method allows you to
save a data item in storage — it takes two
parameters: the name of the item, and its
value
• localStorage.setItem('name','Chris');
• The Storage.getItem() method takes one
parameter — the name of a data item you
want to retrieve — and returns the item's
value. Now type these lines into your
JavaScript console:
• let myName = localStorage.getItem('name');
myName
• The Storage.removeItem() method takes one
parameter — the name of a data item you
want to remove — and removes that item out
of web storage. Type the following lines into
your JavaScript console:
• localStorage.removeItem('name'); let
myName = localStorage.getItem('name');
myName
Drag and drop feature
• Drag and drop is a very common feature. It is
when you "grab" an object and drag it to a
different location.
HTML Drag and Drop Example
• <!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
• function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
• </script>
• </head>
• <body>
<div id="div1" ondrop="drop(event)" ondragover="all
owDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Offline web applications
• offline web application feature is really useful
for allowing your site’s users to work with the
resources which don’t require network
connectivity like HTML, image, CSS, JavaScript,
media files and other resources.
Cache manifest file and the caching mechanism
• The entire offline caching operation revolves

around the manifest file. This file implicates
the list of files that are to be cached on the
client, which will be served by the web
application during the down time. The cache
manifest file has specific syntax/rules to be
followed:
• This file should be included as a part of the web
application.
• The MIME type for the manifest file should be
specified as text/cache-manifest and the same
should be configured in the web server.
• The manifest file should contain the first line as
“CACHE MANIFEST“
• Comments can be added to the cache manifest
file by prefixing the line with character #.
Cache manifest file has the below distinct
sections:
• CACHE – In this section the developer can mention the relative URLs of
the resources that need to be cached. Without using this section, files
can also be listed directly under the CACHE MANIFEST line.
• NETWORK – This section can be used to specify the list of files (relative
URLs) that always need a network to be served. When requests are
made to these files, the local user cache will be bypassed. Wild cards
like * can be used.
• FALLBACK – This section is used to fall back to a configured resource
when network is not available. It takes two relative URL parameters:
the first one should be the actual network resource and the second
one is the fall back resource. When the user is offline and the request
is made to the network resource then the user is served with the
fallback resource from the local cache.
Below is a sample manifest file:
• CACHE MANIFEST
• #Files included here are cached locally
• #as that of the files under the CACHE
• #section
• /Images/image1.jpg
• /Images/image2.jpg
• NETWORK:
• /Services/SampleDataService.Svc
• FALLBACK:
• /networkresource.html /offlineresource.html
• <html manifest=”demofile.manifest”>
• <script type="text/javascript">
• function OnLoad()
{ window.applicationCache.addEventListner('updateready', function (e)
• {
• if (window.applicationCache.status ==
window.applicationCache.UPDATEREADY)
• {
• window.applicationCache.swapCache();
• }
• }
• );
• } function
• UpdateCache()
{ window.applicationCache.update();
}</script>
Web Communication
• The World Wide Web is about communication

between web clients and web servers.
• Clients are often browsers (Chrome, Edge,
Safari), but they can be any type of program or
device.
• Servers are most often computers in the
cloud.
HTTP Request / Response
• Communication between clients and servers is done

by requests and responses:
• A client (a browser) sends an HTTP request to the
web
• A web server receives the request
• The server runs an application to process the request
• The server returns an HTTP response (output) to the
browser
• The client (the browser) receives the response
The HTTP Request Circle
• A typical HTTP request / response circle:

• The browser requests an HTML page. The server returns an
HTML file.
• The browser requests a style sheet. The server returns a CSS
file.
• The browser requests an JPG image. The server returns a JPG
file.
• The browser requests JavaScript code. The server returns a JS
file
• The browser requests data. The server returns data (in XML
or JSON).
XHR - XML Http Request
• All browsers have a built-in XMLHttpRequest Object

(XHR).
• XHR is a JavaScript object that is used to transfer data
between a web browser and a web server.
• XHR is often used to request and receive data for the
purpose of modifying a web page.
• Despite the XML and Http in the name, XHR is used
with other protocols than HTTP, and the data can be of
many different types like HTML, CSS, XML, JSON, and
plain text.
• The XHR Object is a Web Developers Dream, because
you can:
• Update a web page without reloading the page
• Request data from a server - after the page has
loaded
• Receive data from a server - after the page has loaded
• Send data to a server - in the background
• The XHR Object is the underlying concept of AJAX
and JSON:
The Cross-document Messaging
• The Cross-document Messaging API in HTML5

makes it possible for two documents to
interact with each other without directly
exposing the DOM
Requirements and attributes
• Using the Messaging API's postMessage method, plain text

messages can be sent from one domain to another, e.g. from a
parent document to an IFRAME.[3] This requires that the author
first obtain the Window object of the receiving document. As a
result, messages can be posted to the following:[2]
• other frames or iframes within the sender document's window
• windows the sender document explicitly opens through
JavaScript calls
• the parent window of the sender document
• the window which opened the sender document
The message event being received has the
following attributes:
• data - The data, or actual content, of the incoming
message.
• origin - The origin of the sender document. This
typically includes the scheme, hostname and port.
It does not include the path or fragment identifier.[1]
• source - the WindowProxy of where the document
came from (the source window).
• postMessage is not a blocking call; messages are
processed asynchronously
Example
• Consider we want document A loaded

from example.net to communicate with
document B loaded from example.com into
an iframe or popup window.[1] The JavaScript
for document A will look as follows:
• var o =
document.getElementsByTagName('iframe')
[0]; o.contentWindow.postMessage('Hello B',
'http://example.com/');
• The origin of our contentWindow object is
passed to postMessage. It must match
the origin of the document we wish to
communicate with (in this case, document B).
Otherwise, a security error will be thrown and
the script will stop.[3] The JavaScript for
document B will look as follows:
• function receiver(event)
• {
• if (event.origin == 'http://example.net')
• {
• if (event.data == 'Hello B')
• {
• event.source.postMessage('Hello A, how are you?', event.origin);
• }
• Else
• { alert(event.data);
• }}}
• window.addEventListener('message', receiver, false);
• An event listener is set up to receive messages
from document A. Using the origin property, it
then checks that the domain of the sender is
the expected domain. Document B then looks
at the message, either displaying it to the user,
or responding in turn with a message of its
own for document A
desktop notifications.
• Desktop notification is a way to notify user
about important events even if the browser or
tab is inactive or minimized. This increase the
user experience and also keeps the user
engage with your applications.
Design:
• I have developed a Desktop notification which

look like this. In this we have option to put
icon, title and body text.
Code:
• Creating a Desktop notification is as easy as

the line of code shown below.
• var notification = new Notification("I am
Desktop Notification");
• You can pass arguments to Notification
function and they are as follows:
• title: Title of notification
• body: Content of Notification.
• icon: Icon path (URL,image or blank).
• tag : ID of notification.
• dir: Direction of Text. (left,right,auto)
JavaScript code
• <script>
function notifyMe() {
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
else if (Notification.permission === "granted") {
var options = {
body: "This is the body of the notification",
icon: "icon.jpg",
dir : "ltr"
};
var notification = new Notification("Hi there",options);
}
• else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if (!('permission' in Notification)) {
Notification.permission = permission;
}

if (permission === "granted") {
var options = {
body: "This is the body of the notification",
icon: "icon.jpg",
dir : "ltr"
};
var notification = new Notification("Hi there",options);
}
});
}
}
script>
• To trigger a Desktop notification, here is a
HTML code. Put this under tag.
• <button onclick="notifyMe()">Notify me!</
button>

HTML 5

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 5

Uploaded by

Copyright:

Available Formats

HTML5

• HTML stands for Hyper Text Markup Language. It is

• All of your web storage data is contained

• The entire offline caching operation revolves

• The World Wide Web is about communication

• Communication between clients and servers is done

• A typical HTTP request / response circle:

• All browsers have a built-in XMLHttpRequest Object

• The Cross-document Messaging API in HTML5

• Using the Messaging API's postMessage method, plain text

• Consider we want document A loaded

• I have developed a Desktop notification which

• Creating a Desktop notification is as easy as

You might also like