Advance HTML

Lecture #03
Course Instructor: Engr. Samina
Bilquees
HTML5 - New Features
Some of the most interesting new features in HTML5:
New Semantic Elements: These are like <header>,
<footer>, and <section>.
Forms 2.0: Improvements to HTML web forms where
new attributes have been introduced for <input> tag.
WebSocket : A next-generation bidirectional
communication technology for web applications.
Server-Sent Events: HTML5 introduces events
which flow from web server to the web browsers and
they are called Server-Sent Events (SSE).
Canvas: This supports a two-dimensional drawing
surface that you can program with JavaScript.
HTML5 - New Features
Audio & Video: You can embed audio or
video on your web pages without resorting to
third-party plugins.
Geolocation: Now visitors can choose to
share their physical location with your web
application.
Microdata: This lets you create your own
vocabularies beyond HTML5 and extend your
web pages with custom semantics.
Drag and drop: Drag and drop the items
from one location to another location on the
same webpage.
The autofocus attribute of <input>
This is a simple one-step pattern, easily
programmed in JavaScript at the time of
document load, automatically focus one
particular form field.
HTML5 introduced a new attribute called
autofocus which would be used as follows:
<input type="text" name="search" autofocus/>
The required attribute
Now you do not need to have javascript for client
side validations like empty text box would never
be submitted because HTML5 introduced a new
attribute called required which would be used as
follows and would insist to have a value:
<input type="text" name="search" required/>
New Elements in HTML5
 HTML5 <article> Tag
 The <article> tag specifies independent, self-contained
content.
 An article should make sense on its own and it should be
possible to distribute it independently from the rest of the
site.
 Potential sources for the <article> element:
 Forum post
 Blog post
 News story
 Comment
 <article>a
 <h1>Internet Explorer 9</h1>
 <p>Windows Internet Explorer 9 (abbreviated as IE9) was
released
to the public on March 14, 2011 at 21:00 PDT.....</p>
 </article>
The Placeholder attribute
HTML5 introduced a new attribute
called placeholder. This attribute on
<input> and <textarea> elements provides a
hint to the user of what can be entered in the
field.
Enter email : <input type="email"
name="newinput"
placeholder="[email protected]"/>
<input type="submit" value="submit" />
New Elements in HTML5
HTML5 <datalist> Tag
The <datalist> tag specifies a list of pre-
defined options for an <input> element.
The <datalist> tag is used to provide an
"autocomplete" feature on <input> elements.
Users will see a drop-down list of pre-defined
options as they input data.
Use the <input> element's list attribute to
bind it together with a <datalist> element.
New Elements in HTML5
HTML5 <datalist> Tag
<input type="text" list="browsers"
name="browser" />
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>
New Elements in HTML5
HTML5 <details> Tag
The <details> tag specifies additional details
that the user can view or hide on demand.
The <details> tag can be used to create an
interactive widget that the user can open and
close. Any sort of content can be put inside
the <details> tag.
The content of a <details> element should
not be visible unless the open attribute is set.
New Elements in HTML5
HTML5 <details> Tag
<details>
<summary>Copyright
1999-2011.</summary>
<p> - by Refsnes Data. All Rights
Reserved.</p>
<p>All content and graphics on this web site
are the property of the company Refsnes
Data.</p>
</details>
New Elements in HTML5
HTML5 <embed> Tag
The <embed> tag defines a container for an
external application or interactive content (a
plug-in).
<embed src="helloworld.swf" />
Attribute Value Description

height pixels Specifies the height of the embedded

New content

src URL Specifies the address of the external file

to embed

width pixels Specifies the width of the embedded

New content
New Elements in HTML5
HTML5 <figure> Tag
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit
Rock"
width="304" height="228" />
</figure>
The <figure> tag specifies self-contained
content, like illustrations, diagrams, photos,
code listings, etc.
While the content of the <figure> element is
related to the main flow, its position is
independent of the main flow, and if removed
it should not affect the flow of the document.
New Elements in HTML5
HTML5 <figcaption> Tag
The <figcaption> tag defines a caption for a
<figure> element.
The <figcaption> element can be placed as
the first or last child of the <figure> element.
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit
Rock"
width="304" height="228" />
<figcaption>Fig1. - A view of the pulpit rock
in Norway.</figcaption>
</figure>
New Elements in HTML5
New Elements in HTML5
HTML5 <mark> Tag
The <mark> tag defines marked text.
Use the <mark> tag if you want to highlight
parts of your text.
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy
<mark>milk</mark> today.</p>
</body>
New Elements in HTML5
HTML5 <output> Tag
The <output> tag represents the result of a
calculation (like one performed by a script).
<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"></output>
</form>
New Elements in HTML5
HTML5 <progress> Tag
Use the <progress> tag in conjunction with
JavaScript to display the progress of a task.
The <progress> tag is not suitable for
representing a gauge (e.g. disk space usage
or relevance of a query result). To represent a
gauge, use the <meter> tag instead.
<progress value="22"
max="100"></progress>
New Elements in HTML5
HTML5 <meter> Tag
Use the meter element to measure data
within a given range (a gauge).
The <meter> tag defines a scalar
measurement within a known range, or a
fractional value. This is also known as a
gauge.
<meter value="2" min="0" max="10">2
out of 10</meter><br />
<meter value="0.6">60%</meter>
HTML Plug-ins
The purpose of a plug-in is to extend the
functionality of a web browser.
Helper applications (plug-ins) are computer
programs that extend the standard functionality
of a web browser.
Examples of well-known plug-ins are Java applets.
Plug-ins can be added to web pages with the
<object> tag or the <embed> tag.
Plug-ins can be used for many purposes: display
maps, scan for viruses, verify your bank id, etc.
HTML Plug-ins
The <object> Element
The <object> element is supported by all
browsers.
The <object> element defines an embedded
object within an HTML document.
It is used to embed plug-ins (like Java applets,
PDF readers, Flash Players) in web pages.
Example:
<object width="400" height="50"
data="bookmark.swf"> </object>
The <embed> element can be used in the same
way.
HTML5 Audio
HTML5 provides a standard for playing audio
files
<audio controls="controls">
<source src="song.mp3"
type="audio/mpeg" />
Your browser does not support the audio
element.
</audio>
HTML5 Video
Until now, there has not been a standard for
showing a video/movie on a web page.
Today, most videos are shown through a plug-in (like
flash). However, different browsers may have
different plug-ins.
HTML5 defines a new element which specifies a
standard way to embed a video/movie on a web
page: the <video> element.
<video width="320" height="240"
controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>
HTML5 Video
HTML5 Video
The control attribute adds video controls, like play,
pause, and volume.
It is also a good idea to always include width and height
attributes. If height and width are set, the space
required for the video is reserved when the page is
loaded. However, without these attributes, the browser
does not know the size of the video, and cannot reserve
the appropriate space to it. The effect will be that the
page layout will change during loading (while the video
loads).
You should also insert text content between the <video>
and </video> tags for browsers that do not support the
<video> element.
The <video> element allows multiple <source>
elements. <source> elements can link to different video
files. The browser will use the first recognized format.
HTML5 Video + DOM
The HTML5 <video> element also has
methods, properties, and events.
There are methods for playing, pausing, and
loading, for example. There are properties
(e.g. duration, volume, seeking) that you can
read or set. There are also DOM events that
can notify you, for example, when the
<video> element begins to play, is paused, is
ended, etc.
The examples below illustrate, in a simple
way, how to address a <video> element, read
and set properties, and call methods.
HTML5 Video + DOM
 <!DOCTYPE html>
 <html>
 <body>
 <div style="text-align:center">
 <button onclick="playPause()">Play/Pause</button>
 <button onclick="makeBig()">Big</button>
 <button onclick="makeSmall()">Small</button>
 <button onclick="makeNormal()">Normal</button>
 <br />
 <video id="video1" width="420">
 <source src="mov_bbb.mp4" type="video/mp4" />
 <source src="mov_bbb.ogg" type="video/ogg" />
 Your browser does not support HTML5 video.
 </video></div>
HTML5 Video + DOM
 <script type="text/javascript">
 var myVideo=document.getElementById("video1");
 function playPause()
 {
 if (myVideo.paused)
 myVideo.play();
 else
 myVideo.pause();
 }
 function makeBig()
 {
 myVideo.width=560;
 }
 function makeSmall()
 {
 myVideo.width=320;
 }
 function makeNormal()
 {
 myVideo.width=420;
 } </script>
 <p>Video courtesy of <a href="http://www.bigbuckbunny.org/"
target="_blank">Big Buck Bunny</a>.</p>
 </body> </html>
HTML5 Video + DOM
HTML5 - Web Storage
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 large data.
The two storage's are session storage and local
storage and they would be used to handle different
situations.
HTML5 - Web Storage
Session Storage
The Session Storage is designed for scenarios where
the user is carrying out a single transaction, but
could be carrying out multiple transactions in
different windows at the same time.
Example
If a user buying plane tickets in two different
windows, using the same site. If the site used cookies
to keep track of which ticket the user was buying,
then as the user clicked from page to page in both
windows, the ticket currently being purchased would
"leak" from one window to the other, potentially
causing the user to buy two tickets for the same
flight without really noticing.
HTML5 - Web Storage
Session Storage would be used by the sites to add
data to the session storage, and it will be accessible
to any page from the same site opened in that
window and as soon as you close the window,
session would be lost.
Following is the code which would set a session
variable and access that variable −
 <!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>
<p>Refresh the page to increase number of hits.</p>
 <p>Close the window and open it again and check the result.</p>
</body>
 </html>
HTML5 - Web Storage
Local Storage
Local Storage is designed for storage that spans
multiple windows, and lasts beyond the current session.
In particular, Web applications may wish to store
megabytes of user data, such as entire user-authored
documents or a user's mailbox, on the client side for
performance reasons.
Example
Local Storage attribute would be used to access a
page's local storage area without no time limit and this
local storage will be available whenever you would use
that page.
Next is the code which would set a local storage variable
and access that variable every time this page is
accessed, even next time when you open the window −
HTML5 - Web Storage
 <!DOCTYPE HTML> <html>
 <body>
 <script type="text/javascript">
 if( localStorage.hits )
 { localStorage.hits = Number(localStorage.hits) +1; }
 else{ localStorage.hits = 1; }
 document.write("Total Hits :" + localStorage.hits );
 </script>
 <p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the
result.</p> </body> </html>
HTML5 - Web Storage
Delete Web Storage
Storing sensitive data on local machine could be
dangerous and could leave a security hole.
The Session Storage Data would be deleted by
the browsers immediately after the session gets
terminated.
To clear a local storage setting you would need to
call localStorage.remove('key'); where 'key' is
the key of the value you want to remove.
 If you want to clear all settings, you need to call
localStorage.clear() method.
HTML5 Drag and Drop
Drag and drop is a very common feature.
It is when you "grab" an object and drag
it to a different location.
In HTML5, drag and drop is part of the
standard, and any element can be drag
gable.
HTML5 Drag and Drop
Make an Element Draggable
<img draggable="true" />
What to Drag - ondragstart and setData()
Where to Drop - ondragover
Do the Drop - ondrop
HTML5 Drag and Drop
<body>
<p>Drag the cat image into the
rectangle:</p>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="img_logo.gif"
draggable="true" ondragstart="drag(event)"
width=“200" height="69" />
</body>
Make an Element Draggable
<img draggable="true" />
New Elements in HTML5
HTML5 <keygen> Tag
The <keygen> tag specifies a key-pair
generator field used for forms.
When the form is submitted, the private key
is stored locally, and the public key is sent to
the server.
 <form
action="http://www.w3schools.com/html5/demo_keygen.as
p" method="get">
 Username: <input type="text" name="usr_name" />
 Encryption: <keygen name="security" />
 <input type="submit“ value=“Submit” />
 </form>
New Elements in HTML5
HTML5 <command> Tag
The <command> tag defines a command that
the user can invoke.
A command can be part of a context menu or
toolbar, using the <menu> element, or can be
put anywhere else in the page, to define a
keyboard shortcut.
<menu>
<command type="command" label="Save"
onclick="save()">Save</command>
</menu>
New Elements in HTML5
HTML5 Canvas
The HTML5 <canvas> element is used to draw
graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for
graphics. You must use a script to actually draw the
graphics.
Canvas has several methods for drawing paths,
boxes, circles, characters, and adding images.
Creating a Canvas
A canvas is a rectangular area on an HTML page, and
it is specified with the <canvas> element.
Note: By default, the <canvas> element has no
border and no content.
The markup looks like this:
<canvas id="myCanvas" width="200"
height="100"></canvas>
HTML5 Canvas
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas
tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
HTML5 Canvas
HTML5 – Web Sockets
Web Sockets is a next-generation bidirectional
communication technology for web applications
which operates over a single socket and is
exposed via a JavaScript interface in HTML 5
compliant browsers.
Once you get a Web Socket connection with the
web server, you can send data from browser to
server by calling a send() method, and receive
data from server to browser by an onmessage
event handler.
Following is the API which creates a new
WebSocket object.
var Socket = new WebSocket(url, [protocol] );
HTML5 – WebSockets
WebSocket Attributes:
HTML5 – WebSockets
WebSocket Events:
HTML5 – WebSockets
WebSocket Methods:

HTML5 – WebSockets
 WebSocket Example:
 A WebSocket is a standard bidirectional TCP socket
between the client and the server. The socket starts out as
a HTTP connection and then "Upgrades" to a TCP socket
after a HTTP handshake. After the handshake, either side
can send data.
 <script type="text/javascript">
 function WebSocketTest()
{
 if ("WebSocket" in window)
{
 alert("WebSocket is supported by your Browser!");
 // Let us open a web socket
 var ws = new WebSocket("ws://localhost:9998/echo");
 ws.onopen = function()
{
HTML5 – WebSockets
 // 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...");
 };
 } else
{
 // The browser doesn't support WebSocket
 alert("WebSocket NOT supported by your Browser!");
 } } </script>
HTML5 – WebSockets
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">Run
WebSocket</a>
</div>
</body>
HTML5 Geolocation
The HTML Geolocation API is used to get the
geographical position of a user.
Since this can compromise user privacy, the
position is not available unless the user
approves it.
Use the getCurrentPosition() method to get
the user's position.
Example
HTML5 Server-Sent Events
Server-Sent Events allow a web page to get
updates from a server.
This was also possible before, but the web
page would have to ask if any updates were
available. With server-sent events, the
updates come automatically.
Examples: Facebook/Twitter updates, stock
price updates, news feeds, sport results, etc.
HTML5 Server-Sent Events
Example
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML
+= event.data + "<br>";
};
Create a new EventSource object, and specify the
URL of the page sending the updates (in this
example "demo_sse.php")
Each time an update is received, the onmessage
event occurs
When an onmessage event occurs, received data is
placed into the element with id="result"
Server-Side Code Example
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
Set the "Content-Type" to "text/event-stream"
Specify that the page should not cache
Output the data to send (Always start with
"data: ")
Flush the output data back to the web page
THE END