WEB TECHNOLOGY

04/05/2023 meghav@kannuruniv.ac.in
Contents
• New Elements –
• Structural Elements
• New Form/Input Elements
• New Attributes Canvas
• Video and Audio
• Web Storage
• Geolocation

04/05/2023 meghav@kannuruniv.ac.in
New Elements
• A lot of new elements are added in HTML5 to facilitate
some extra functionality to write an easy and fast code
to create an engaging and effective website.

04/05/2023 meghav@kannuruniv.ac.in
HTML 5 New Tags:
• Some new tags were introduced in HTML 5 to provide a
better document structure.
• These tags are listed below.

04/05/2023 meghav@kannuruniv.ac.in
Structural or Semantic Tags
Tag Uses
<article> Used to specify a blog, a magazine or a newspaper article or
any other independent piece of content in a document.
<aside> Used to indicate that the specified article is somehow related
to the rest of the document.
Used for bi-directional isolation, i.e, to isolate a part of a
<bdi> content which is formatted in other direction from the outside
text document.
<data> Used to facilitate a machine readable version of the data.
<details> Used to define any additional information on a topic or a
summary.
<dialog> Used to specify a window or a dialog box.

04/05/2023 meghav@kannuruniv.ac.in
Structural or Semantic Tags

<figcaption> Used to specify a caption for a <figure> element.

Used to specify a self-contained content like photos, diagrams
<figure> etc.
<footer> Used to specify a footer for a section.
<header> Used to specify a header for a section.
<main> Used to specify the main content of a document.
<mark> Used to mark or highlight the specified content.
Used to specify a command that the user can invoke from a
<menuitem> popup menu.

04/05/2023 meghav@kannuruniv.ac.in
Structural or Semantic Tags

<meter> Used to determine a scalar value within a given range.

<nav> Used to specify a navigation link in an HTML document.
<progress> Used to define the progress of a task.
<rp> Used to specify the content to show in a browser that don’t support ruby
annotation.
<rt> Used to indicate an explanation or pronunciation of characters.
<ruby> Used to specify a ruby annotation along with <rp> and <rt>.
<section> Used to specify a section in an HTML document.
<summary> Used to define a visible heading for the HTML <details> element.
<time> Used to define a date or time.
<wbr> Used to specify a line break opportunity.

04/05/2023 meghav@kannuruniv.ac.in
HTML5 Form Tags:

Tag Uses
<datalist> Used to facilitate an auto complete feature for
textfield.
<output> Used to specify the output of a calculation or an
outcome of the user action.

04/05/2023 meghav@kannuruniv.ac.in
Graphics Tags:

Tag Uses
<canvas> Used to draw canvas in an HTML document.
<svg> Used to display shapes.

04/05/2023 meghav@kannuruniv.ac.in
HTML5 Media Tags:

Tag Uses
<audio> Used to define an audio file in HTML.

<embed> Used to specify a container for an external file, application or a

media.

<source> Used to specify multiple media resources for a media element.

Used to specify the text tracks for an <audio> or a <video>

<track> element.
<video> Used to specify a video file in HTML.
04/05/2023 meghav@kannuruniv.ac.in
HTML5 New <input> types:

Type Uses
color Used to define an input field to indicate a color selector.
date Used to define an input field to indicate a date selector.
datetime Used to display date and time along with the time zone information.
datetime- Used to display date and time without the time zone information.
local
email Used to specify an input field with an email pattern validation property.
month Used to specify an input field to enter month for the particular year.
number Used to specify a field that accepts a numeric value only.

04/05/2023 meghav@kannuruniv.ac.in
HTML5 New <input> types:

range Used to create a numeric value selector for a range of 1 to 100.

search Used to create a search field.

tel Used to define a control to enter a telephone number.

time Used to define a control to enter time value with no time zone.

url Used to define an input field to enter a URL.

week Used to create a week value selector for a particular year.

04/05/2023 meghav@kannuruniv.ac.in
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 required data.

04/05/2023 meghav@kannuruniv.ac.in
HTML 5 Web storage
• The two storages are session storage and local storage and they
would be used to handle different situations.
• The latest versions of pretty much every browser supports HTML5
Storage.

04/05/2023 meghav@kannuruniv.ac.in
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.
• For 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.

04/05/2023 meghav@kannuruniv.ac.in
• HTML5 introduces the sessionStorage attribute which 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, i.e., session and
as soon as you close the window, the session would be lost.
• Following is the code which would set a session variable and access
that variable −
• A hit is a request to a web server for a file

04/05/2023 meghav@kannuruniv.ac.in
Example
<!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>

04/05/2023 meghav@kannuruniv.ac.in
Local Storage
• The 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.
• Again, cookies do not handle this case well, because they are
transmitted with every request.

04/05/2023 meghav@kannuruniv.ac.in
Example

• HTML5 introduces the localStorage attribute which 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.
• Following 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 −

04/05/2023 meghav@kannuruniv.ac.in
Code
<!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>

04/05/2023 meghav@kannuruniv.ac.in
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.

04/05/2023 meghav@kannuruniv.ac.in
Following is the code which would clear complete local storage −

<!DOCTYPE HTML>

<html>
<body>

<script type = "text/javascript">

localStorage.clear();

// Reset number of hits.

if( localStorage.hits ) {
localStorage.hits = Number(localStorage.hits) +1;
} else {
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );

</script>

<p>Refreshing the page would not to increase hit counter.</p>

<p>Close the window and open it again and check the result.</p>

</body>
</html>
04/05/2023 meghav@kannuruniv.ac.in
Geolocation
• The process or technique of identifying the geographical
location of a person or device by means of digital information
processed via the internet.
• The Geolocation API of HTML5 helps in identifying the user’s
location, which can be used to provide location specific
information or route navigation details to the user.

04/05/2023 meghav@kannuruniv.ac.in
• There are many techniques used to identify the location of the user.
• Desktop browser generally uses WIFI or IP based positioning techniques
whereas a mobile browser uses cell triangulation, GPS, A-GPS, WIFI based
positioning techniques, etc.
• Geolocation API will use any one of these techniques to identify the user’s
location.
• The Geolocation API protects the user’s privacy by mandating that the user
permission should be sought and obtained before sending the location
information of the user to any website.
• The user will be prompted with a popover or dialog requesting for the user’s
permission to share the location information.
• User can accept or deny the request.
04/05/2023 meghav@kannuruniv.ac.in
• The first step in using any of the APIs in HTML5 is to check for
its compatibility with the browser.
Check for Browser compatibility
• The geolocation property of the global navigator object helps in
detecting the browser support for the Geolocation API.
if (navigator.geolocation) {
// Get the user's current position
} else {
alert('Geolocation is not supported in your browser’);
}

04/05/2023 meghav@kannuruniv.ac.in
Get the user’s current location
• The current location of the user can be obtained using
the getCurrentPosition function of the navigator.geolocation object.
• This function accepts three parameters –
• Success callback function,
• Error callback function
• position options.
• If the location data is fetched successfully, the success callback function will be
invoked with the obtained position object as its input parameter.
• Otherwise, the error callback function will be invoked with the error object as its
input parameter.

04/05/2023 meghav@kannuruniv.ac.in
 if (navigator.geolocation){
// Get the user's current position
navigator.geolocation.getCurrentPosition(showPosition, showError, optn);
} else {
alert('Geolocation is not supported in your browser’);
}

1.Success callback function

• This callback function is invoked only when the user accepts to share the location information and
the location data is successfully fetched by the browser.
• The location data will be available as a position object and the function will be called with the
position object as its input parameter.
• A position object contains a timestamp property denoting the time at which the location data is
retrieved and a coords object.
• The coords object has the following properties

04/05/2023 meghav@kannuruniv.ac.in
 • Latitude, longitude – Geographic coordinates in decimal degrees

• Accuracy – Accuracy level of the latitude and longitude coordinates in meters.

• Bigger the number lesser is the accuracy

• Altitude – Height of the position above the sea level in meters

• AltitudeAccuracy – Denotes how far off the altitude position could be from the actual attitude
value obtained in meters. the number lesser is the accuracy

• Heading – Provides 360 degree heading information

• Speed – Indicates relative speed in meters per second

function showPosition(position) {
document.write('Latitude:'+position.coords.latitude+'Longitude: '+position.coords.longitude);
}

04/05/2023 meghav@kannuruniv.ac.in
2. Error callback function

• This is an optional callback function that takes a ‘Position Error’ object as its input parameter.

• This function is invoked under any one of the following circumstances

• Unknown Error occurred

• Request timed out

• User has denied to share the location information

• Location information itself is unavailable

04/05/2023 meghav@kannuruniv.ac.in
 function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}

04/05/2023 meghav@kannuruniv.ac.in
Position Options
• It describes the options to use while retrieving the user’s location.
• enableHighAccuracy: Boolean. If true, the user agent will try to provide the most accurate
position.
• This can result in slower response time and higher power consumption. Is false, less
accurate position will be obtained.
• Default value is false.
• Timeout: Positive long value.
• It denotes the maximum time (in milliseconds) that the user agent can take to respond
with the location data. Default value is Infinity.
• maximumAge: Positive long value.
• It denotes how long (in milliseconds) the user agent can keep using the cached location
data before trying to obtain new location data.
• A zero value indicates that the user agent must not use the cached location data and
infinity value indicates that the cached location data must be used by the user agent

04/05/2023 meghav@kannuruniv.ac.in
if (navigator.geolocation){
var optn ={
enableHighAccuracy : true,
timeout : Infinity,
maximumAge : 0
};
navigator.geolocation.getCurrentPosition(showPosition, showError, optn);
} else {
alert('Geolocation is not supported in your browser’);
}

04/05/2023 meghav@kannuruniv.ac.in
Track Location changes
• The watchPosition() can be used to get the location data at regular
intervals.
• The success callback function is invoked automatically as and when
the device or the useragent position changes.
• The parameters to this function is similar to the getCurrentPosition()
function.
• It returns a watch ID value which can be used to unregister the
success callback function by passing it to the clearWatch() function.

04/05/2023 meghav@kannuruniv.ac.in