Module 1 WAD Notes

Module 1
INTRODUCTION TO WEB DEVELOPMENT AND HTML5
1.1 Introduction to web technologies
Web Technology refers to the various tools and techniques that are
utilized in the process of communication between different types of
devices over the Internet. A web browser is used to access web pages.
Web browsers can be defined as programs that display text, data,
pictures, animation, and video on the Internet. Hyperlinked resources on
the World Wide Web can be accessed using software interfaces provided
by Web browsers.

Web Development can be Classified into Two Ways:

 Frontend Development: The part of a website that the user interacts
with directly is termed as front end. It is also referred to as the ‘client
side’ of the application.

 Backend Development: The Backend is the server side of a website. It

is the part of the website that users cannot see or interact with. It is the
portion of software that does not come in direct contact with the users. It
is used to store and arrange data.

Frontend Development Languages

The front-end portion is built by using some languages which are
discussed below:
 HTML: HTML stands for Hypertext Markup Language. It is used to
design the front-end portion of web pages using a markup language.
HTML is the combination of Hypertext and Markup language. Hypertext
defines the link between the web pages. The markup language is used
to define the text documentation within the tag which defines the
structure of web pages.

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 1

 Module 1 WAD Notes

 CSS: Cascading Style Sheets fondly referred to as CSS is a simply

designed language intended to simplify the process of making web
pages presentable. CSS allows you to apply styles to web pages. More
importantly, CSS enables you to do this independent of the HTML that
makes up each web page.
 JavaScript: JavaScript is a famous scripting language used to create
magic on the sites to make the site interactive for the user. It is used to
enhancing the functionality of a website to running cool games and web-
based software.
 AJAX: Ajax is an acronym for Asynchronous Javascript and XML. It is
used to communicate with the server without refreshing the web page
and thus increasing the user experience and better performance.
There are many other languages through which one can do front-end
development depending upon the framework for
eg… Flutter user Dart, React uses JavaScript and Django uses Python,
and much more.

Backend Development Languages

The back end portion is built by using some languages which are
discussed below:
 PHP: PHP is a server-side scripting language designed specifically for
web development. Since PHP code executed on the server-side, so it is
called a server-side scripting language.
 [Link]: [Link] is an open-source and cross-platform runtime
environment for executing JavaScript code outside a browser. You
need to remember that NodeJS is not a framework, and it’s not a
programming language. Most people are confused and understand it’s
a framework or a programming language. We often use [Link] for
building back-end services like APIs like Web App or Mobile App. It’s
used in production by large companies such as Paypal, Uber, Netflix,
Wallmart, and so on.
 Python: Python is a programming language that lets you work quickly
and integrate systems more efficiently.

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 2

 Module 1 WAD Notes

 Ruby: Ruby is a dynamic, reflective, object-oriented, general-purpose

programming language. Ruby is a pure Object-Oriented language. The
objective of Ruby’s development was to make it act as a sensible buffer
between human programmers and the underlying computing machinery.
 Java: Java is one of the most popular and widely used programming
languages and platforms. It is highly scalable. Java components are
easily available.
 JavaScript: JavaScript can be used as both (front end and back end)
programming.
 Golang: Golang is a procedural and statically typed programming
language having the syntax similar to C programming language.
Sometimes it is termed as Go Programming Language.
 C#: C# is a general-purpose, modern and object-oriented programming
language pronounced as “C sharp”.
 DBMS: The software which is used to manage database is called
Database Management System (DBMS).

1.2 Protocols
Protocols are a set of rules that allow computers and other devices to
communicate over the Internet. These protocols ensure that data is sent,
received, and understood correctly between different systems. There are
many types of internet protocols, each serving a specific purpose, such
as transferring files, sending emails, or securing data.
It is like the address system used for sending data. Every device
connected to the internet has a unique IP address that helps data know
where to go and where it is coming from.
1. SMTP(Simple Mail Transfer Protocol)
SMTP protocol is important for sending and distributing outgoing emails.
This protocol uses the header of the mail to get the email id of the receiver
and enters the mail into the queue of outgoing mail. And as soon as it
delivers the mail to the receiving email id, it removes the email from the
outgoing list. The message or the electronic mail may consider the text,
video, image, etc. It helps in setting up some communication server rules.

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 3

Module 1 WAD Notes

2. PPP(Point-to-Point Protocol)
PPP is a communication protocol that is used to create a direct connection
between two communicating devices. This protocol defines the rules using
which two devices will authenticate with each other and exchange
information with each other. For example, A user connects his PC to the
server of an Internet Service Provider and also uses PPP. Similarly, for
connecting two routers for direct communication it uses PPP.
3. FTP (File Transfer Protocol)
This protocol is used for transferring files from one system to the other.
This works on a client-server model. When a machine requests for file
transfer from another machine, the FTO sets up a connection between the
two and authenticates each other using their ID and Password. And, the
desired file transfer takes place between the machines.

4. HTTP(Hyper Text Transfer Protocol)

HTTP protocol is used to transfer hypertexts over the internet and it is
defined by the www(world wide web) for information transfer. This protocol
defines how the information needs to be formatted and transmitted. And, it
also defines the various actions the web browsers should take in response
to the calls made to access a particular web page. Whenever a user opens
their web browser, the user will indirectly use HTTP as this is the protocol
that is being used to share text, images, and other multimedia files on
the World Wide Web.

HTTPS(HyperText Transfer Protocol Secure)

5. HTTPS is an extension of the Hypertext Transfer Protocol (HTTP). It

is used for secure communication over a computer network with
the SSL/TLS protocol for encryption and authentication. So,
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 4
 Module 1 WAD Notes

generally, a website has an HTTP protocol but if the website is such

that it receives some sensitive information such as credit card
details, debit card details, OTP, etc then it requires an SSL certificate
installed to make the website more secure. So, before entering any
sensitive information on a website, we should check if the link is
HTTPS or not. If it is not HTTPS then it may not be secure enough to
enter sensitive information.

1.3 Client-server architecture

Client-server architecture is a fundamental concept in system
design where a network involves multiple clients and a server. Clients are
devices or programs that request services or resources, while the
server is a powerful machine providing these resources or services.
This architecture allows efficient data management and resource
sharing, making it popular in web applications, databases, and other
network-based systems. By separating roles and distributing tasks,
client-server architecture enhances performance, scalability, and
security.
 This architecture allows for efficient data management and resource
allocation by centralizing critical functions on the server, which can
handle complex processing and large-scale data storage.
 Clients manage user interactions and send specific requests to the
server, which processes these requests and sends back appropriate
responses.
 The client-server architecture is highly scalable, as it can accommodate
more clients by scaling the server's capabilities or adding additional
servers.
 This design is prevalent in various applications, including web services,
database management, and email systems, providing a robust framework
for developing and managing complex, distributed systems efficiently.

Key Components of Client Server Architecture

Client-server architecture in system design involves several key
components that work together to ensure efficient communication,
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 5
 Module 1 WAD Notes

resource management, and service delivery. Here are the main

components:

 Client: The client is a device or application that requests services or

resources from the server. It initiates communication with the server and
processes the results returned by the server.
 Server: The server is a powerful machine or application that provides
services or resources to clients. It processes client requests, performs
the necessary computations or data retrieval, and sends back the
appropriate responses.
 Network: The network facilitates communication between clients and
servers. It enables data exchange using various protocols and ensures
reliable connectivity.
 Protocols: Protocols are standardized rules that govern data
transmission and communication between clients and servers. They
ensure that data is transmitted in a secure, reliable, and understood
manner.
 Middleware: Middleware is software that acts as an intermediary
between clients and servers. It provides additional functionalities like
authentication, logging, message queuing, and transaction management.
 Database: A database is a structured collection of data stored on the
server. It stores and manages data that clients request, ensuring data
consistency, integrity, and security.
 User Interface (UI): The UI is the part of the client application that
interacts with the user. It provides a means for users to input data and
view results returned by the server.
 Application Logic: Application logic refers to the code and algorithms
that define the application's functionality. It processes user inputs,
interacts with the server, and manages the flow of data between the
client and the server.

Frameworks and Tools for Client-Server Development

Developing client-server applications involves various frameworks and
tools that cater to both the client and server sides. Here are some
commonly used frameworks and tools for client-server development:

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 6

 Module 1 WAD Notes

1. Server-Side Frameworks
 [Link]: A JavaScript runtime built on Chrome's V8 engine, ideal for
building scalable network applications.
 [Link]: A minimal and flexible [Link] web application framework
that provides a robust set of features for web and mobile applications.
 Django: A high-level Python web framework that encourages rapid
development and clean, pragmatic design. Comes with a built-in ORM,
admin interface, and authentication mechanisms.
 Spring Boot: A Java-based framework that simplifies the development of
new Spring applications. Provides embedded servers and simplifies
dependency management.
 Ruby on Rails: A server-side web application framework written in Ruby.
Emphasizes convention over configuration and the use of the MVC
pattern.
2. Client-Side Frameworks
 React: A JavaScript library for building user interfaces, maintained by
Facebook. Allows for the creation of reusable UI components and
provides a virtual DOM for efficient rendering.
 Angular: A platform and framework for building single-page client
applications using HTML and TypeScript. Developed and maintained by
Google.
 [Link]: A progressive JavaScript framework for building user interfaces.
Designed to be incrementally adoptable, with a core library focused on
the view layer.
.
 Bootstrap: A popular front-end framework for developing responsive and
mobile-first websites. Provides pre-designed components and utilities.

1.4 Overview of Frontend vs Backend Development

In web development, the terms frontend and backend are essential for
understanding how websites and web applications work. These two
components make up the core of any modern web application, each
serving a unique purpose. Frontend is what users see and interact with on
a website, like the layout, buttons, and text. Backend is the part that works
behind the scenes, handling tasks like storing data and processing
requests.
we will discuss the differences between frontend and backend
development.
Frontend vs Backend
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 7
 Module 1 WAD Notes

Below is the difference between front-end and back-end development

Frontend Backend
Refers to the client-side of the Refers to the server side of the web
web application. application.
Involves technologies like PHP,
Involves technologies like HTML,
Python, [Link], Ruby, and databases
CSS, JavaScript, and frameworks
like MySQL, MongoDB, and
like React, [Link], and Angular.
PostgreSQL.
Work closely with Work closely with front-end developers,
designers, UX/UI developers, and system administrators, and database
back-end developers administrators
Deals with UI design, user Deals with data processing, server
interaction, and performance on communication, and storing/retrieving
the client side. data from databases.
The back-end developer builds the
Frontend developer uses tools to
server, database, and application logic,
create an interface and focus on
focusing on the application’s
the user experience.
performance.
Ensures that the website is Ensures that the website processes
visually appealing, responsive, data, communicates with the database,
and interactive. and handles server requests.
Front-end developers are in high Back-end developers are also in high
demand due to the increasing demand, especially with the growth of
emphasis on user experience data-driven applications, cloud
(UX) and interface design. services, and APIs.
Frontend Development
The frontend is the part of a website or web application that users directly
interact with. It includes everything visible on the screen, such as the
layout, design, and interactive features. The frontend is responsible for
creating a smooth, attractive, and user-friendly experience. It’s called the
client-side because it runs on the user’s browser.
 User Interface (UI) Design: Frontend development focuses on designing
the look of a website, including layout, colors, typography, and interactive
elements.

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 8

 Module 1 WAD Notes

 Responsiveness: Ensures that websites work well on various devices

and screen sizes, providing a seamless experience on desktops, tablets,
and smartphones.
 Interactivity: It implements interactive features like buttons, forms,
animations, and dynamic content that engage users.
 Cross-Browser Compatibility: Ensures that the website functions
correctly across different web browsers, such as Chrome, Firefox, and
Safari.
Frontend Technologies
Frontend development uses various technologies to create the user
interface (UI) and user experience (UX). Some of the most common
frontend technologies include:
 HTML (Hypertext Markup Language): The standard language for
creating the structure of web pages. It defines elements such as
headings, paragraphs, links, and images.
 CSS (Cascading Style Sheets): Used for styling HTML
elements. CSS controls the layout, colors, fonts, and responsiveness of a
webpage.
 JavaScript: A programming language that adds interactivity to the web.
JavaScript is used to create dynamic content, such as forms, animations,
and interactive maps.
 Frontend Frameworks: React, Angular, Tailwind, Bootstrap, and [Link].
 Frontend Libraries: jQuery and SASS.

Backend Development
The Backend refers to the server side of web development. It is
responsible for handling and processing data, storing and retrieving
information, and ensuring that the frontend has the necessary data to
function properly. While users interact with the frontend, the backend
works behind the scenes to handle the business logic and data
management.
 Server-Side Logic: Backend development handles the server-side
operations, including processing data, managing application logic, and
handling user requests.
 Database Management: Manages and interacts with databases
(e.g., MySQL, PostgreSQL, MongoDB) to store, retrieve, and update data
based on user interactions.

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 9

 Module 1 WAD Notes

 API Development: Creates and manages APIs (Application

Programming Interfaces) to allow communication between the frontend
and backend or with other external services.
 Security: Ensures the security of data by implementing authentication,
authorization, encryption, and protection against attacks like SQL
injection.
Backend Technologies
Backend development uses various technologies to handle the server-side
logic and data management. Some of the most popular backend
technologies include:
 Programming Languages: Common languages for backend
development include PHP, Python, Ruby, [Link], Java, and C#.
 Databases: Backend systems interact with databases to store and
retrieve data. Popular databases include MySQL, PostgreSQL,
MongoDB, and SQLite.
 Web Servers: Web servers like Apache, Nginx, and IIS are used to
handle HTTP requests and deliver content to users.
 Backend Frameworks: Django (Python), Ruby on Rails
(Ruby), [Link] ([Link]), and Spring Boot (Java).
 Backend Libraries: Mongoose, [Link], JDBC, Pandas.

1.5 HTML5 elements and attributes,

 HTML5 elements

HTML5 introduced many new tags that will benefit many developers.
These tags are generally supported by all major browsers. These
tags belong to many aspects such as graphics, media, and forms.
List of all elements introduced in HTML5

HTML Tag Description

<article> Represents an independent article with

content separate from the rest of the site.

Describes content related to the main

<aside> object of the web page but not its main
intent.

Used to insert audio into an HTML

<audio>
webpage.

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 10

Module 1 WAD Notes

HTML Tag Description

<canvas> Used to draw graphics on a web page

using JavaScript.

Defines a command button for special

<command> operations (supported only by Internet
Explorer).

Provides autocomplete feature for input

<datalist>
elements.

Used for initially hidden content that can

<details>
be displayed interactively.

Embeds external multimedia content like

<embed>
audio or video into an HTML document.

Adds self-contained content like

<figure>
illustrations, diagrams, or photos.

Defines a footer containing information

<footer>
like author details and copyright.

Contains information related to the title

<header>
and heading of the content.

Groups heading elements (h1-h6) to

<hgroup>
provide structured heading information.

Specifies a key-pair generator field in a

<keygen>
form for secure user authentication.

Defines marked text to highlight a part of

<mark>
the paragraph.

Defines a scale for measurement with a

<meter>
well-defined range, used as a gauge.

Declares the navigational section of

<nav>
HTML documents.

Represents the result of a client-side

<output>
script calculation.

Represents the progress of a task or

<progress>
download.

Specifies ruby annotations used in

<ruby>
Japanese publications.

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 11

Module 1 WAD Notes

HTML Tag Description

Defines a section of documents, dividing
<section>
content into sections and subsections.

Displays human-readable date/time and

<time> encodes dates/times in a machine-
readable form.

Defines a word break opportunity, used

<wbr>
for line breaks in long words.

Embeds video content such as movie

<video>
clips in a document.

1. The <details> tag is used for the content/information which is

initially hidden but could be displayed if the user wishes to see
it. This tag is used to create interactive widget which user can
open or close it..This tag is introduced in HTML5.

<!DOCTYPE html>

<html>

<head>

<title>Detail and summary Tag</title>

<style>

.G {

Color:#0064ff;

font-size:50px;

Text-align:none;

margin-bottom:0px;

p{

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 12

 Module 1 WAD Notes

font-size:25px;

text-align:none;

margin-top:0px;

</style>

</head>

<body>

<details>

<summary class="G">

GeeksforGeeks

</summary>

<p>GeeksforGeeks is a Computer Science portal

where you can learn good programming.

</p>

</details>

</body>

</html>

2. The <header> tag is a semantic HTML element that is used to

define the introductory or navigational content of a webpage or
a section. Typically, a header contains elements like:
 The website or page title
 Logo or branding
 Navigation menus
 Search bar
 Any introductory information relevant to the page or section

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 13

Module 1 WAD Notes

<!DOCTYPE html>

<html>

<head>

<title>Header Tag</title>

<style>

h1, h3 {

Color:#006400;

Text-align:left;

margin-bottom:0px;

p{

font-size:25px;

text-align:left;

margin-top:0px;

</style>

</head>

<body>

<article>

<header>

<h1>GeeksforGeeks</h1>

<h3>GeeksforGeeks</h3>

<p>A computer Science portal</p>

</header>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 14

 Module 1 WAD Notes

</article>

</body>

</html>

3. The <footer> tag in HTML is used to define the footer section

of an HTML document.
 The footer section typically contains information such as contact
information, sitemap, back-to-top links, related documents, copyright, etc.
 The footer tag is a semantic tag included in HTML (in 2014) along with
other tags like article, nav, header, etc.
 It is not mandatory, but adds to clear structure to the document

<!DOCTYPE html>
<html>

<body>
<footer>
<a href="[Link]
About Us
</a>|
<a href="[Link]
Privacy Policy
</a>|
<a href="[Link]
Careers
</a>

<p>@geeksforgeeks, Some rights reserved</p>

</footer>
</body>

</html>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 15

Module 1 WAD Notes

4. The <nav> tag in HTML is used to define navigation sections

on a webpage. It typically contains links to important sections
of the website, such as menus, tables of contents, or indexes,
and is often structured within unordered lists (<ul>) or as
standalone links.

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML nav Tag</title>
</head>

<body>

<h2> HTML nav Tag</h2>

<!-- nav tag starts -->

<nav>
<a href="#">Home</a> |
<a href="#">Interview</a> |
<a href="#">Languages</a> |
<a href="#">Data Structure</a> |
<a href="#">Algorithm</a>
</nav>

<!-- nav tag ends -->

5. The <wbr> tag in HTML stands for word break opportunity and
is used to define the position within the text which is treated as
a line break by the browser. It is mostly used when the used
word is too long and there are chances that the browser may
break lines at the wrong place for fitting the text.

<!DOCTYPE html>
<html>

<body>
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 16
 Module 1 WAD Notes

<h1>GeeksforGeeks</h1>
<h2>&lt;wbr&gt; Tag</h2>

<p>GFGstandsforGeeksforGeeksanditis<wbr>acomputerscienceportalforgeeks.
6. </p>

</body>

</html>

 Html5 Attributes

HTML attributes are special words that provide additional information to an

HTML element. Attributes are placed inside the element's opening tag, and
they are used to configure or adjust the element's behavior. All attributes
are made up of two parts: a name and a value −

 Name: The attribute name is the keyword, also known as the attribute
identifier, which defines a specific characteristic for the element in which it
is using. For example, the paragraph <p> element (in the below-given
example) has an attribute "align", which defines the alignment of the
paragraph on the page.
 Value: The attribute value is the data or information that defines the value
to be set for that attribute. The value is assigned within the double quotes.
For example, "left", "center", or "right" can be assigned to the "align"
attribute with the paragraph tag (as shown in the below example).

Below is the syntax of an element HTML having attribute −

<tag_name attribute="Value">...</tag_name>

Rules and Characteristics

The following are the rules and characteristics of HTML attributes; you
should follow while using attributes with HTML elements:

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 17

 Module 1 WAD Notes

 Attributes are optional; you can use them to provide additional information
about an HTML element.
 Attributes have name and value pairs, but some of the attributes do not
require any value; those are known as Boolean attributes.
 An HTML element can have multiple attributes, and they should be
separated by spaces.
 Attributes should always be written with the opening tag.
 All HTML elements can have attributes except a few
like <head>, <title>, <script>, etc.

Example of HTML Attributes

This example demonstrates the use of attributes with HTML elements. Here,
we are using the align attribute with different paragraph elements−

<!DOCTYPE html>

<html>

<head>

<title>Example of HTML Attributes</title>

</head>

<body>

<p align="left">Left Aligned</p>

<p align="center">Center Aligned</p>

<p align="right">Right Aligned</p>

</body>

</html>

A. HTML Core Attributes

The four core attributes that can be used on the majority of HTML elements

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 18

 Module 1 WAD Notes

1. The id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element
within an HTML page. There are two primary reasons that you might want to
use an id attribute on an element −

 If an element carries an id attribute as a unique identifier, it is possible to

identify just that element and its content.
 If you have two elements of the same name within a Web page (or style
sheet), you can use the id attribute to distinguish between elements that
have the same name.

We are using the id attribute to distinguish between two paragraph elements

−

Example
<!DOCTYPE html>

<html>

<head>

<title>ID Attribute Example</title>

</head>

<body>

<p id="html">This para explains what is HTML</p>

<p id="css">This para explains what is Cascading Style Sheet</p>

</body>

</html>

2. The title Attribute

The title attribute gives a suggested title for the element. The syntax for
the title attribute is similar as explained for id attribute −

The behavior of this attribute will depend upon the element that carries it,
although it is often displayed as a tooltip when the cursor comes over the
element or while the element is loading.

Example
<!DOCTYPE html>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 19

Module 1 WAD Notes

<html>

<head>

<title>The title Attribute Example</title>

</head>

<body>

<h3 title="Hello HTML!">Titled Heading Tag Example</h3>

</body>

</html>

On executing the above example, it will display the heading "Titled

Heading Tag Example". If you bring your cursor over it, you will see that
whatever title you used in your code is coming out as a tooltip of the cursor.

3. The style Attribute

The style attribute allows you to write inline CSS rules for an element.

Example
<!DOCTYPE html>

<html>

<head>

<title>The style Attribute</title>

</head>

<body>

<p style="font-family:arial; color:#FF0000;">Welcome to Tutorialspoint...</p>

</body>

</html>

4. The class Attribute

The class attribute specifies one or more CSS classes for an HTML element.
Multiple classes can be used on a single element with this attribute. The
value of this attribute is a space-separated list of class names if you are
specifying multiple classes.

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 20

Module 1 WAD Notes

Example
class="className1 className2 className3"

B. HTML Internationalization Attributes

There are three internationalization attributes, which are available for most
(although not all) XHTML elements.

1. The dir Attribute

The dir attribute allows you to indicate to the browser about the direction in
which the text should flow. The dir attribute can take one of two values, as
you can see in the table that follows −

[Link] Value & Meaning

1 ltr
Left to right (the default value)

2 rtl
Right to left (for languages such as Hebrew or Arabic that are read right to left)

Example
<!DOCTYPE html>

<html dir="rtl">

<head>

<title>Display Directions</title>

</head>

<body>

This is how IE 5 renders right-to-left directed text.

</body>

</html>

2. The lang Attribute

The lang attribute allows you to indicate the main language used in a
document, but this attribute was kept in HTML only for backwards

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 21

 Module 1 WAD Notes

compatibility with earlier versions of HTML. This attribute has been replaced
by the xml:lang attribute in new XHTML documents.

The values of the lang attribute are ISO-639 standard two-character

language codes. Check HTML Language Codes: ISO 639 for a complete list
of language codes.

Example
<!DOCTYPE html>

<html lang="en">

<head>

<title>English Language Page</title>

</head>

<body>

This page is using English Language

</body>

</html>

C. HTML Boolean Attributes

Boolean attributes represent true and false values and do not require any
value with the attribute name. To set the true value, you need to write the
attribute's name, and to set it false, the attribute should be omitted
altogether.

Here are some Boolean attributes –

 disabled
 readonly
 required
 inert
 autocomplete

Example

Here is an example of an HTML Boolean attribute (required) −

<!DOCTYPE html>

<html>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 22

 Module 1 WAD Notes

<body>

<h1>Example of "required" attribute</h1>

<form>

<label for="user_name">Input User Name:</label>

<input type="text" id="user_name" name="user_name" required>

<input type="submit">

</form>

</body>

</html>

1.6 Semantic HTML5 tags

HTML5 introduced a range of semantic elements that clearly describe
their purpose in human and machine-readable language. Unlike non-
semantic elements, which provide no information about their content,
semantic elements clearly define their content.
For instance, <form>, <table>, and <article> tags clearly define the
content and purpose, to the browser.

Semantic Elements
Here are some of the fundamental HTML5 semantic elements that you
should use to structure your web content:
1. <article>
2. <aside>
3. <details>
4. <figcaption>
5. <figure>
6. <footer>
7. <header>
8. <main>
9. <mark>
10. <nav>
11. <section>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 23

Module 1 WAD Notes

1. The <article> Tag

The <article> tag is used for content that stands alone and can be
independently distributed or reused, such as a blog post or news article.
Example:
<!DOCTYPE html>
<html>

<head>
<title>Article Tag</title>
<style>
h1 {
color: #006400;
font-size: 50px;
text-align: left;
}
p{
font-size: 25px;
text-align: left;
margin-top: 0;
}
</style>
</head>

<body>
<article>
<h1>GeeksforGeeks</h1>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 24

Module 1 WAD Notes

<p>A Computer Science portal for geeks. It contains well written, well
thought, and well explained computer science and programming articles,
quizzes, and practice/competitive programming/company interview
questions.</p>
</article>
</body>
</html>
2. The <aside> Tag
It is used to place content in a sidebar i.e. aside from the existing content.
It is related to surrounding content.
Example:
<!DOCTYPE html>
<html>

<head>
<title>Aside Tag</title>
<style>
h4 {
Color:#006400;
font-size:50px;
Text-align:none;
margin-bottom:0px;
}
p{
font-size:25px;
text-align:none;
margin-top:0px;

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 25

Module 1 WAD Notes

}
</style>
</head>

<body>
<p>GeeksforGeeks is a Computer Science Portal</p>
<aside>
<h4>GeeksForGeeks</h4>
<p>GeeksforGeeks is a computer Science platform
where you can learn good programming.
</p>
</aside>
</body>

</html>
3. The Details and Summary Tag
The “details” defines additional details that the user can hide or view.
“summary” defines a visible heading for a “details” element.
Example:
<!DOCTYPE html>
<html>

<head>
<title>Detail and summary Tag</title>
<style>
.GFG {

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 26

Module 1 WAD Notes

Color:#006400;
font-size:50px;
Text-align:none;
margin-bottom:0px;
}
p{
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>

<body>
<details>
<summary class="GFG">
GeeksforGeeks
</summary>
<p>GeeksforGeeks is a Computer Science portal
where you can learn good programming.
</p>
</details>
</body>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 27

Module 1 WAD Notes

</html>
4. The Figure and Figcaption Tag
These are used to add an image to a web page with a small description.
Example:
<!DOCTYPE html>
<html>

<head>
<title>Figcaption Tag</title>
<style>
h2 {
Color:#006400;
font-size:50px;
Text-align:none;
margin-bottom:0px;
}
p{
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>

<body>
<h2>GeeksforGeeks</h2>
<figure>
<img src="[Link]"
alt="gfg"
style="width:20%">
<figcaption>
GeeksforGeeks Logo
</figcaption>
</figure>
</body>

</html>

OUTPUT
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 28
Module 1 WAD Notes

5. The Header Tag

As the name suggests, it is for the header of a section introductory of a
page. There can be multiple headers on a page.
Example:
<!DOCTYPE html>
<html>

<head>
<title>Header Tag</title>
<style>
h1, h3 {
Color:#006400;
Text-align:left;
margin-bottom:0px;
}
p{
font-size:25px;
text-align:left;
margin-top:0px;
}
</style>
</head>

<body>
<article>
<header>
<h1>GeeksforGeeks</h1>
<h3>GeeksforGeeks</h3>
<p>A computer Science portal</p>
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 29
Module 1 WAD Notes

</header>
</article>
</body>

</html>
6. The Footer Tag
Footer located at the bottom of any article or document, they can contain
contact details, copyright information etc. There can be multiple footers on
a page.
Example: The below example shows the implementation of the Footer.
<!DOCTYPE html>
<html>

<head>
<title>footer Tag</title>
<style>
p{
font-size:25px;
text-align:left;
margin-top:0px;
}
</style>
</head>

<body>
<footer>
<p>
Posted by: GeeksforGeeks
</p>

<p>
Contact:
<a href=
"[Link]
[Link]
</a>.
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 30
Module 1 WAD Notes

</p>
</footer>
</body>

</html>
7. The Main Tag
It defines the main content of the document. The content inside the main
tag should be unique.
Example:
<!DOCTYPE html>
<html>

<head>
<title>main Tag</title>
<style>
h1 {
color:#006400;
}
p{
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>

<body>
<main>
<h1>Important Residences</h1>
<p>
A few of them are
Rashtrapati Bhavan,
White House etc
</p>

<article>
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 31
Module 1 WAD Notes

<h1>Rashtrapati Bhavan</h1>
<p>
It is the home of
the President of India.
</p>
</article>

<article>
<h1>The White House</h1>
<p>
It is the home of the
President of United
States of America.
</p>
</article>
</main>
</body>

</html>
8. The Section Tag
A page can be split into sections like Introduction, Contact Information, Details,
etc and each of these sections can be in a different section tag.
Example:
<!DOCTYPE html>
<html>

<head>
<title>section Tag</title>
<style>
h1 {
color:#006400;
}
p{
font-size:25px;
text-align:none;
margin-top:0px;
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 32
Module 1 WAD Notes

}
</style>
</head>

<body>
<section>
<h1>Data Structure</h1>
<p>
Data Structure is a data
organization and storage
format that enables efficient
access and modification.
</p>
</section>
<section>
<h1>Algorithm</h1>
<p>
A process or set of rules to
be followed in calculations
or other problem-solving
operations, especially by
a computer.
</p>
</section>
</body>

</html>

9. The nav Tag

It is used to define a set of navigation links in the form of a navigation bar
or nav menu.
Example: The below example shows the implementation of the nav tag.

<!DOCTYPE html>
<html>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 33

Module 1 WAD Notes

<head>
<title>nav Tag</title>
<style>
h1 {
color:#006400;
}
</style>
</head>

<body>
<h1>Navigation Bar</h1>
<nav>
<a href="/home/">
Home
</a> |
<a href="/about-us/">
About Us
</a> |
<a href="/data-structure/">
Data Structure
</a> |
<a href="/operating-system/">
Operating System
</a>
</nav>
</body>
</html>

10. The Mark Tag

It is used to highlight the text.

Example:

<!DOCTYPE html>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 34

Module 1 WAD Notes

<html>

<head>
<title>mark Tag</title>
<style>
h1 {
color:#006400;
}
</style>
</head>

<body>
<h1>mark tag</h1>
<p>
GeeksforGeeks is a
<mark>Computer Science</mark>
portal
</p>
</body>

</html>

1.7 Forms and input types

 HTML5 Form Tags
HTML Tag Description

Represents a predefined list for

1. <datalist>
input options.

Used as a container to display

2. <output> calculation results or user action
outcomes.

1. <datalist> tag
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 35
Module 1 WAD Notes

The <datalist> tag in HTML provides a way to display a list of predefined

options for <input> elements.
This allows users to either type their own value or select from the list of
suggestions, making data entry more efficient.

<!DOCTYPE html>

<html>

<body>

<form action="">

<label>Your Cars Name: </label>

<input list="cars">

<datalist id="cars">

<option value="BMW" />

<option value="Bentley" />

<option value="Mercedes" />

<option value="Audi" />

<option value="Volkswagen" />

</datalist>

</form>

</body>

</html>

2. <output> tag

The HTML <output> tag is used to represent the result of a calculation

performed by the client-side script such as JavaScript. The <output> tag is
a new tag in HTML 5, and it requires a starting and ending tag.
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 36
Module 1 WAD Notes

<!DOCTYPE html>
<html lang="en">

<head>
<title>Document</title>
<style>
body {
text-align: center;
}
</style>
</head>

<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
HTML output Tag
</h2>
<form oninput="[Link] =
parseInt([Link]) + parseInt([Link]) +
parseInt([Link])">
<input type="number" name="A" value="50" /> +
<input type="range" name="B" value="0" /> +
<input type="number" name="C" value="30" />
<br>
<!-- output tag -->
Result: <output name="sumresult"></output>
</form>
</body>

</html>

 HTML5 <input> Types

Type Description

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 37

Module 1 WAD Notes

Type Description

color Represents an input field for

selecting a color.

date Represents an input field for

selecting a date.

Represents a display of full date

datetime and time with time zone
information.

datetime-local Represents date and time without

time zone information.

Represents an input field with

email
email pattern validation.

Represents an input field to enter

month
a month for a specific year.

Represents a field that selects a

number
numeric value only.

Represents a numeric value

range
selector within a specified range.
search Represents a search field.

tel Represents a control to enter a

telephone number.

time Represents a control to enter a

time value without time zone.

url Represents an input field to enter

a URL.

week Represents a selector for a week

value in a specific year.

 date
The date attribute in the input tag creates a calendar to choose
the date, which includes day, month, and year.
<!DOCTYPE html>
<html>
<head>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 38

Module 1 WAD Notes

<title>HTML Input Type Date</title>

</head>
<body>

<h2>HTML <input type="date"></h2>

<input type="date" value="2024-05-02">

</body>
</html>
 number
The HTML <input type="number"> element creates an input
field for entering numeric values. It allows for easy input of
numbers with optional restrictions such as minimum, maximum,
and step values.

<!DOCTYPE html>
<html>

<head>
<title>
HTML input Type Number
</title>
</head>

<body>

<h2>HTML &lt;input type="number"&gt;</h2>

<label for="number">Enter Number:</label>

<input type="number" value ="10" step="5">

</body>
</html>

 search

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 39

Module 1 WAD Notes

HTML <search> Tag indicates a grouping of elements related

to the search. The elements inside a <search> tag include form
elements designed for conducting searches.
<!DOCTYPE html>
<head>

<title> HTML search Tag</title>

</head>
<body>
<h1>GeeksforGeeeks</h1>
<h3>HTML &lt;search&gt; Element</h3>
<search>
<form>
<input type="text"
placeholder="enter name">
</form>
</search>
</body>
</html>

 tel
The HTML <input type="tel"> element creates a telephone number
input field, specifically designed for entering phone numbers. It
provides features like input validation for telephone numbers
<!DOCTYPE html>
<html>
<head>
<title> add a Telephone number </title>
</head>
<body style="text-align: center">

<h2>
How to add a Telephone number
into a Form using HTML?
</h2>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 40

 Module 1 WAD Notes

<form>
<label for="name">Name:</label>
<input type="text" id="name"
placeholder="Enter Name..." />
<br><br>

<label for="phone">Phone No.:</label>

<input type="tel" id="phone"
placeholder="Enter Phone Number..." />
<br><br>

<button>Submit</button>
</form>
</body>

</html>
 range
For describing the range of numbers, the value
of type attribute of <input> element is "range".
It defines the control for a number entered by the user whose
exact value is not important( more like a slider control). Its default range
varies from
0 to 100.
Restrictions can be set on what numbers are accepted by
using additional attributes such as:
 step - it specifies the legal number intervals, the default value is 1
 value - it specifies the default value
 max - it specifies the maximum value allowed. The default is 100
 min - it specifies the minimum value allowed, the default is 0

<!DOCTYPE html>
<html>

<head>
<title>Describing Range of Numbers in HTML Form</title>
</head>
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 41
Module 1 WAD Notes

<body>

<div>
<label for="gfg_range">
Choose from the range
</label>
<br>
<input type="range"
id="gfg_range"
min="1"
value="1"
max="10"
step="2">
</div>
</body>
</html>

1.8 Multimedia elements (audio, video)

HTML5 Media Tags
HTML Tag Description
<audio> Defines sound content.

<embed> Defines a container for external

media or files.

<source> Specifies multiple media resources

for media elements.

<track> Defines text tracks for audio and

video files.

Defines video content within an

<video>
HTML document.

 <audio>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 42

 Module 1 WAD Notes

The <audio> tag in HTML5 is used to embed audio content on a

webpage. It allows you to play audio files like MP3, OGG, or WAV
directly in the browser. The <audio> element provides attributes for
controlling playback, such as play, pause, and volume.
 Using the <source> element enables the specification of various audio
files, allowing the browser to choose the compatible format.
 The <audio> element allows integration with JavaScript, enabling the
creation of custom audio controls and behaviors.
 The 'controls' attribute provides buttons for managing audio, like play,
pause, and volume adjustment.
 Any text contained between the <audio> tags is visible only on browsers
that can't render the <audio> element.
 <audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>
<!DOCTYPE html>
<html>

<body>
<audio controls>
<source src=
"[Link]
content/uploads/20230524142525/gfg_offline_classes_en.mp3"
type="audio/mp3">
<source src=
"[Link]
content/uploads/20220913101124/[Link]"
type="audio/mp3">
</audio>
</body>

</html>

 <video>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 43

 Module 1 WAD Notes

The <video> element in HTML is used to add video content to web pages.
It supports various video formats, including MP4, WebM, and Ogg. Video
and audio tags are introduced in HTML5.
Syntax:
<video src="" controls> </video>
 The src attribute specifies the URL of the video file.
 The controls attribute adds default video controls (play, pause, volume, etc.).

<html >
<body>
<video width="320" height="240" controls>
<source src=
"[Link]
content/uploads/20190616234019/Canvas.move_.mp4"
type="video/mp4">
Sample Vedio
</video>
</body>
</html>

1.9 Canvas and SVG for graphics

SVG (Scalable Vector Graphics) is an XML-based vector image format,
suitable for creating graphics and interactive elements. HTML5 Canvas is
more like a blank canvas where you can draw whatever you want using
pixels. SVG is great for logos and icons, while Canvas is good for dynamic
animations and games.

What is SVG?
SVG (Scalable Vector Graphics) is an XML-based format used for defining
two-dimensional vector graphics on the web. Unlike raster images such as
.jpg, .gif, or .png, SVG images can be scaled to any size without losing
quality.
 Scalable: SVG images maintain high quality at any resolution, making
them ideal for logos, icons, and scalable graphics.

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 44

 Module 1 WAD Notes

 Editable: SVG images can be created and edited using any text editor
since they are based on XML.
 Interactive: You can modify SVG graphics using CSS or JavaScript.
What is HTML5 Canvas?
The HTML5 Canvas element provides a space on the web page where you
can dynamically draw graphics using JavaScript. Unlike SVG, which is
vector-based, Canvas is pixel-based (raster).
 Pixel-based: Canvas allows you to draw shapes, images, and text pixel
by pixel.
 Dynamic: It’s ideal for real-time graphics, such as games, interactive
animations, or visual effects.
 JavaScript-based: You must use JavaScript to manipulate the canvas
and render graphics.

Difference between SVG and HTML5 Canvas

SVG Canvas
SVG uses geometric shapes to
Canvas uses pixels
render graphics

Vector based (composed of Raster based (composed of

shapes) pixel)

SVG has better scalability. So it Canvas has poor scalability.

can be printed with high quality Hence it is not suitable for
at any resolution. printing on higher resolution.

Canvas gives better

SVG gives better performance
performance with smaller
with smaller number of objects
surface or larger number of
or larger surface.
objects.

SVG can be modified through Canvas can be modified

script and CSS. through script only.

Single element similar to <img>

Multiple graphical elements,
in behavior. Canvas diagram
which become the part of the
can be saved to PNG or JPG
page's DOM tree.
format.

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 45

Module 1 WAD Notes

1.10 HTML5 APIs

HTML5 APIs are built to make web development simple and easy. They
offer ready-to-use tools for adding cool features like videos, graphics, and
real-time updates to websites without needing complex code.

1. Geolocation API
The Geolocation API allows websites to access the user's geographic
location (latitude and longitude). The Geolocation API is used to
access the user's current location.

The Geolocation API is accessed via a call

to [Link]. This will cause the browser to ask the
user for permission to access their location data. If the user
accept, the browser will search for the best available functionality
on the device to access this information (for example GPS).

The getCurrentPosition() method is used to return the user's

current location.

The example below returns the latitude and longitude of the

user's current location:

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = [Link]("demo");

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 46

Module 1 WAD Notes

function getLocation() {
if ([Link]) {
[Link](success, error);
} else {

[Link] = "Geolocation is not supported by this browser.";

}
}

function success(position) {
[Link] = "Latitude: " + [Link] +
"<br>Longitude: " + [Link];
}

function error() {
alert("Sorry, no position available.");
}
</script>

</body>
</html>
Example explained:

 Check if Geolocation is supported

 If Geolocation is supported, run
the getCurrentPosition() method. If not, display a message
to the user
 The success() function outputs the user's location in latitude
and longitude
 The error() function alerts a text if the browser retrieves an
error in getCurrentPosition()

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 47

 Module 1 WAD Notes

[Link] Storage API

The Web Storage API provides mechanisms by which browsers can store
key/value pairs, in a much more intuitive fashion than using cookies.
 Key-Value Storage: Saves and loads a username using localStorage.
 Persistent Storage: Data remains even after refreshing or reopening the
browser.
 User Interaction: Uses buttons to save and load data

<html>

<body>

<input type="text" id="username" placeholder="Enter your username">

<button onclick="saveData()">Save Username</button>

<button onclick="loadData()">Load Username</button>

<p id="result"></p>

<script>

function saveData() {

const username = [Link]("username").value;

if (username) {

[Link]("username", username);

alert("Username saved!");

} else {

alert("Please enter a username.");

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 48

Module 1 WAD Notes

function loadData() {

const username = [Link]("username");

if (username) {

[Link]("result").innerHTML = `Saved Username:

${username}`;

} else {

[Link]("result").innerHTML = "No username saved.";

</script>

</body>

</html>

3. Web Workers
JavaScript was designed to run in a single-threaded environment, so
multiple scripts cannot run at the same time also when executing
Javascript on an HTML page, the page becomes unresponsive until
the script is finished.
So, To overcome this Web worker comes into the picture. The Web
Workers is a separate piece of JavaScript code that runs in the
background of the web page without affecting it.

What is a Web Worker?

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 49

 Module 1 WAD Notes

Web workers are multithreaded objects that are used to execute Javascript
in the background without affecting the performance of the application or
webpage. Web Workers allow for long-running scripts that are not
interrupted by scripts that respond to clicks or other user interactions and
allow long tasks to be executed without affecting the responsiveness of the
web page. Generally, it is used for big CPU-intensive tasks.
Types of Web Workers
Web Workers provide a way to run scripts in the background, separate
from the main thread of your web page. They allow you to perform tasks
without interfering with the user interface. Here are the two main types of
Web Workers:
1. Dedicated Workers:
 A dedicated worker is accessible only by the script that spawned it.
 It runs in its own thread, isolated from the main thread.
 Useful for scenarios where you want to offload heavy computations or
time-consuming tasks without affecting the responsiveness of your web
page.
 Dedicated workers are typically used within a single script.
2. Shared Workers:
 A shared worker can be accessed by multiple scripts running in different
windows, iframes, or other contexts, as long as they are in the same
domain.
 Shared workers are designed for scenarios where you need to share
data or coordinate actions across different parts of your application.
 They provide a way to communicate and collaborate between different
tabs or frames.
 Shared workers are more versatile and can be utilized by various scripts
simultaneously.
 Syntax for Creating a Web Worker
 It is used to create a web worker
worker = new Worker("[Link]");
 Syntax for Terminating a Web Worker
 It is used to terminate a web worker.
[Link]();

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 50

Module 1 WAD Notes

Example of Web Worker

Step 1: Create a Javascript file for Web Worker and the code which you want to
run in the background. Here we are creating a [Link] file and using it to
count from 1 in the background and show that to our web page and in the
frontend, we will use the alert box.
Step 2: Now create an [Link] and add the following codes to that file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Worker</title>
</head>

<body>
<p>Web Worker is Counting Numbers</p>

<p>Counting: <output id="countM"></output></p>

<button onclick="alertMessage()">
Alert On
</button>

<script>

// This is function to run alert

function alertMessage() {
alert("Web Worker is Running in Background");
}

// Created a web worker and passed script which

// needs to execute in background
var worker = new Worker("[Link]");

// Called onmessage method to get value from

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 51

 Module 1 WAD Notes

// script file and show it on web page

[Link] = function (event) {
[Link]("countM")
.innerHTML = [Link];
};
</script>
</body>
</html

1.11 Offline web applications using AppCache.

Web applications must be accessible without an internet connection.
Almost all web-based applications work in online mode. So current version
of HTML provides the functionality to work with the web-based application
in online and offline modes. HTML5 provides application cache
functionality that allows a web application to run without the internet.

Application Cache in HTML5: HTML5 provides application cache

functionality that allows a web application to run without the internet. By
using the application cache interface, Internet Browser cache data and
make it available for the user in offline mode. Create an offline web
application, it uses a manifest file.
Syntax:
<html manifest=”file_name extension_of_file”>
Implementation: Create an HTML file. Then add the manifest attribute in
the document tag of the HTML file. The manifest file contains the
[Link].
<html manifest="[Link]">

How to use Application Cache?

Let us understand how to use Application Cache with the help of the
approach.
Approach:
1. Create a Manifest File
2. Create an HTML file and add a manifest attribute tag. example [Link]
3. Create another HTML file and link this with the main HTML file.

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 52

 Module 1 WAD Notes

 Step 1: Create a Manifest File: A manifest is a file that suggests to the

browsers which data to store as cache. This file starts with CACHE
MANIFEST. Here, ‘#’ shows a comment.
Manifest file
 CACHE MANIFEST
 CACHE:
 # shows pages
 [Link]
 # contain style and scripts
 css/[Link]
 js/[Link]
 js/[Link]
 # shows images
 /[Link]
 images/[Link]
 # network session
 NETWORK:
 [Link]
 FALLBACK:
 //[Link]
Properties: The manifest file contains three different sections:
1. CACHE MANIFEST: It cached data for the download for the first time.
2. NETWORK: It's only available online mode.
3. FALLBACK: File under fallback pages if a page is not available.

Step 2: Add Manifest Attribute in HTML file

Now let us take an example and understand.

Example: Follow the below steps:
Step 1: Create a file save as [Link] and add a manifest attribute in the
HTML tag.
<!DOCTYPE html>
<html manifest="[Link]">
<body text="red">
<center>
Application Cache In HTML 5.
<p>
<a href="[Link]">Click Here</a>,
This page contain data even offline mode .
</p>
Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 53
Module 1 WAD Notes

</body>
</html>

Step 2: Now, Create another HTML file and save it as [Link].

<!DOCTYPE html>
<html manifest="[Link]">
<body text="green">
<h3>
<center>
Welcome to GeeksForGeeks.
<p>A computer science portal for geeks. </p>
<p>Go Offline and refresh page.
</center>
</h3>
</body>
</html>

Shahina Begum, Asso Prof, Dept of MCA, SIET, Vijayapur Page 54