MMC205 - Web Application Development 2024-25 Pa g e |1

Department of MCA

Module – 1: Introduction to Web

Development and HTML5
Chapter – 1: Web Development Basics:
The syllabus topics are
1.1 Introduction to web technologies and protocols
1.2 Client-server architecture
1.3 Overview of front-end and back-end development

1.1 Introduction to web technologies and protocols

Web technology refers to the tools and techniques used to build and
communicate on the World Wide Web. It involves various protocols,
languages, and standards that enable interaction with websites and other
online resources. Key protocols include HTTP and HTTPS for web page transfer,
FTP for file transfers, and TCP/IP for underlying network communication. Web
development languages like HTML, CSS, and JavaScript are used to create and
style web pages, while other languages like PHP, Python, and Java can be used
for backend development.
Key Concepts in Web Technology:
• Web Development Languages:
Programming languages used to create and maintain websites, including
HTML (structure), CSS (styling), and JavaScript (interactivity).
• World Wide Web (WWW):
A global collection of web pages and other resources accessible through the
internet, using protocols like HTTP and HTTPS.
• Web Browsers:
Software applications used to access and display web pages, like Chrome,
Firefox, and Safari.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 Pa g e |2

• Web Servers:
Computers that host websites and other web content, delivering it to users'
browsers.
• URLs (Uniform Resource Locators):
Address that identifies the location of a specific resource on the web, such
as a web page or image.
• HTML (Hypertext Markup Language):
The standard language for creating web pages, defining the structure and
content.
• CSS (Cascading Style Sheets):
Used to style web pages, controlling the layout, colors, and fonts.
• JavaScript:
A programming language used to add interactivity and dynamic behavior
to web pages.
• Protocols:
Rules that govern how data is transmitted over the internet, such as HTTP
(Hypertext Transfer Protocol) for web pages and FTP (File Transfer Protocol)
for file uploads.
Examples of Web Protocols:
• HTTP (Hypertext Transfer Protocol):
The foundation of the web, used to transfer data between clients (web
browsers) and servers (web hosts).
• HTTPS (Hypertext Transfer Protocol Secure):
The secure version of HTTP, encrypting data transmission to protect
sensitive information.
• FTP (File Transfer Protocol):
Used to transfer files between computers, such as uploading website
files to a server.
• TCP/IP (Transmission Control Protocol/Internet Protocol):
A suite of protocols that provide the foundation for the internet, ensuring
reliable data transmission.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 Pa g e |3

• UDP (User Datagram Protocol):

A faster but less reliable protocol, used for applications where speed is
prioritized over data integrity.

Key Web Development Languages:

• HTML: Creates the basic structure and content of a web page.
• CSS: Styles the appearance of a web page, controlling layout, colors,
and fonts.
• JavaScript: Adds interactivity and dynamic behavior to web pages.
• PHP: A server-side scripting language often used for creating dynamic
web pages and applications.
• Python: A versatile programming language used for web development,
data analysis, and more.
• Ruby: A programming language often used for web development and
framework development.
• Java: A powerful programming language used for building web
applications and server-side logic.

1.2 Client-server Architecture

Introduction
In today’s connected world, almost every online service we use relies on a
foundational model called client-server architecture. From loading web
pages to using mobile apps, this structure powers the way clients (users)
interact with servers (data providers). In this article, we’ll break down what
client-server architecture is, its components, types, and real-life
applications. We’ll also include easy-to-understand examples and diagrams to
help clarify this crucial tech concept.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 Pa g e |4

What is Client-Server Architecture?

Client-server architecture is a network model in which two main entities
— clients and servers — communicate with each other to complete specific
tasks or share data.
• Client: The client initiates requests, waits for the server’s response, and
displays it to the user. For example, a web browser acts as a client when
it requests a website.
• Server: The server processes these requests, retrieves the relevant
information, and sends it back to the client. For example, a web server
responds with website data when a browser requests it.

Key Benefits of Understanding Client-Server Architecture

• It helps web developers, software engineers, and tech enthusiasts
understand how data flows between user interfaces and backend
systems.
• It highlights the role of servers in managing resources and supporting
multiple users, which is essential for scaling apps and websites.
• It helps users understand how common apps, like social media platforms
and online shopping websites, function.

Components of Client-Server Architecture

The client-server model consists of two main components:
1. Client: Responsible for interacting with the user, it requests services
and resources.
2. Server: Processes the requests and manages the resources, sending
appropriate responses back to clients.

Types of Client-Server Architecture

1. Two-Tier Architecture: The simplest form where clients and servers
communicate directly.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 Pa g e |5

2. Three-Tier Architecture: A middleware layer, often called the

application layer, is added between the client and server.
3. N-Tier Architecture: Involves multiple intermediary layers, such as
security and business logic, to manage complex data processing and
ensure security.

Example of Client-Server Architecture: A Bookstore Application

Let’s break down a client-server interaction using a bookstore web
application as an example.
Step 1: Client Request
The client (a web app) wants to display a list of books. It sends a request to
the server endpoint, such as /books.
Step 2: Server Processing
The server receives the request, processes it, checks the database for the list
of books, and prepares a response.
Step 3: Server Response
The server sends back the requested data in JSON format, allowing the client
to display the list of books to the user.

Diagram of Client-Server Architecture

Below are simplified diagrams of the client-server architecture.
1. Two-Tier Client-Server Model Diagram:
Illustrates direct communication between a client and server, where
the client sends a request, and the server processes and responds.

Fig: Two tier client server architecture

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 Pa g e |6

2. Three-Tier Client-Server Model Diagram:

Adds an intermediary middleware layer, handling business logic or
complex database queries.

Fig: Three tier client server architecture

Real-Life Examples of Client-Server Architecture

1. Web Browsers and Web Servers: Browsers like Chrome and Safari
act as clients, sending requests to web servers to load pages.
2. Mobile Apps and Backend APIs: Apps like Instagram and Amazon
communicate with servers to fetch user data, posts, or product listings.
3. Gaming Platforms: Online games use client-server models to
synchronize player actions, game state, and scores with central servers.

Advantages of Client-Server Architecture

Client-server architecture offers many benefits, especially for scalable and
resource-intensive applications:
1. Centralized Control: Servers can handle multiple clients
simultaneously, allowing for centralized management of resources and
data.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 Pa g e |7

2. Scalability: The architecture is scalable, allowing developers to add

more clients or servers as needed without affecting the entire system.
3. Data Security: Servers can be secured with layers of security controls,
protecting sensitive information and user data.

Drawbacks of Client-Server Architecture

1. Single Point of Failure: If the server goes down, all connected clients
lose access to data and services.
2. Network Dependency: Since the model relies on network
communication, poor connectivity can lead to performance issues.
3. Resource-Intensive: Servers require significant resources to manage
and serve multiple clients, which may increase infrastructure costs.

Why Client-Server Architecture Matters

Understanding client-server architecture is essential for anyone involved
in software development, networking, or systems architecture. By
grasping the roles of clients and servers, developers can design more
efficient, secure, and scalable applications for real-world use.

Conclusion
In summary, client-server architecture is a critical concept in modern
software development. This model powers countless applications by efficiently
handling requests between clients and servers. By exploring real-life
examples, diagrams, and practical scenarios, you’ll be better equipped to
understand, design, and work with this fundamental architecture.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 Pa g e |8

1.3 Overview of front-end and back-end development

Frontend and 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.
In this article, we will discuss the differences between frontend and backend
development.

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.
• 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.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 Pa g e |9

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 Vue.js.
• 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.
• API Development: Creates and manages APIs (Application
Programming Interfaces) to allow communication between the frontend
and backend or with other external services.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 10

• 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, Node.js, 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), Express.js (Node.js), and Spring Boot (Java).
• Backend Libraries: Mongoose, Socket.io, JDBC, Pandas.

Frontend vs Backend
• Below is the difference between front-end and back-end developers.

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, Node.js, Ruby, and databases
CSS, JavaScript, and frameworks
like MySQL, MongoDB, and
like React, Vue.js, and Angular.
PostgreSQL.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 11

Frontend Backend

Work closely with Work closely with front-end

designers, UX/UI developers, and developers, system administrators,
back-end developers and database 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
and interactive. database, 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.

Full-stack Development
Full-stack development refers to the development of both the frontend (client-
side) and backend (server-side) parts of a web application. A full-stack
developer is skilled in both areas and can build a complete web application
from start to finish.
• Frontend Development: Involves creating the user interface (UI),
that users interact with directly on the web page, using technologies like
HTML, CSS, JavaScript, and frontend frameworks like React or Angular.
• Backend Development: Involves working with the server-side,
databases, and the application logic that powers the website or app.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 12

Backend developers use languages like Python, PHP, Ruby, Java, and
frameworks like Django, Spring or Node.js.
• Databases: Full-stack developers often work with databases to store
and manage data. This can involve SQL-based databases like MySQL or
PostgreSQL, or NoSQL databases like MongoDB.
• Server Management: They are also responsible for configuring and
managing servers, ensuring that the website or application is hosted
and running efficiently.

Which is More Important: Frontend or Backend?

Both frontend and backend development are equally important, as they work
together to create a seamless website. While the frontend provides the user
interface that people interact with, the backend ensures that the underlying
data, logic, and functionality work properly. Choosing which is more important
depends on the specific needs of the project:
• If the project focuses on user experience, design, and interactivity,
frontend development takes priority.
• If the project requires data processing, APIs, and managing complex
business logic, backend development is more critical.
In most cases, a combination of both is needed to build a fully
functional web application.

Conclusion
Frontend and backend development are two sides of the same coin, each
playing a crucial role in web development. Frontend developers create the
interface that users interact with, while backend developers ensure that the
underlying data, logic, and functionality work properly. Understanding both
frontend and backend development is essential for anyone looking to pursue
a career in web development. Whether you focus on one side or become a
full-stack developer, mastering the tools and technologies for both is key to
building robust and scalable web applications.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 13

Department of MCA

Module – 1: Introduction to Web

Development and HTML5
Chapter – 2: HTML5 Fundamentals:
The syllabus topics are
2.1. HTML5 elements and attributes
2.2. Semantic HTML5 tags
2.3. Forms and input types
2.4. Multimedia elements (audio, video)

2.1. HTML5 elements and attributes

HTML5 | Introduction
HTML5 is the fifth version of Hypertext Markup Language (HTML), a
standard language used to structure webpages. It defines how content on
a webpage should be structured and displayed. Here are some key points
of HTML5
• Multimedia Support: Embeds audio and video without plugins.
• New Form Controls: Includes input types like date and email.
• Web Storage: Stores data offline for better performance.
• Semantic Elements: Uses tags like <header> and <footer> for better
structure.
• Improved Performance: Faster and more efficient, especially on
mobile.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 14

Here is a simple HTML5 example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Simple HTML Page</title>
</head>
<body>
<header>
<h1>Hello, World!</h1>
</header>
<main>
<p>This is a simple HTML5 page.</p>
</main>
<footer>
<p>@Prof. Rajesh N, Dept. of MCA, AMCEC - All rights
reserved</p>
</footer>
</body>
</html>

• It defines a simple HTML5 page with DOCTYPE, <html>, <head>, and

<body> tags.
• Includes a character set (UTF-8) and viewport settings for mobile
responsiveness.
• Contains a header, main content, and footer with basic text content.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 15

Features of HTML5
HTML5 introduces several new elements and attributes to improve web
development:
• Semantic Elements:
o New tags like <article>, <aside>, <nav>, <header>, <footer>,
and <section> provide meaning and structure to the content,
improving both accessibility and SEO.
• Multimedia Support:
o Native support for <audio> and <video> tags removes the need
for third-party plugins like Flash.
• Canvas API:
o Allows drawing graphics, animations, and games directly in the
browser using JavaScript.
• Geolocation API:
o Provides access to the user’s geographical location (with
permission), enabling location-based services.
• Web Storage (localStorage and sessionStorage):
o Local storage (localStorage) and session storage (sessionStorage)
provide client-side data storage, improving performance and
enabling offline functionality.
• Web Workers:
o Allows background processing of JavaScript, improving
performance by preventing blocking of the main thread.
• Form Enhancements:
o New input types (e.g., date, email, number) and form validation
make forms easier and more efficient to create.
• Drag and Drop API:
o Allows users to drag and drop elements within a web page or
between applications, enhancing interactivity.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 16

• SVG Integration:
o Improved support for Scalable Vector Graphics (SVG), allowing for
resolution-independent vector graphics to be embedded directly
into HTML.
• WebSocket API:
o Enables real-time, bidirectional communication bet.
Deprecated Elements in HTML5
HTML5 has removed several outdated elements, replacing them with newer,
more flexible solutions:

Removed Elements Use Instead Elements

<acronym> <abbr>

<applet> <object>

<basefont> CSS

<big> CSS

<center> CSS

<dir> <ul>

<font> CSS

<frame> None

<frameset> None

<noframes> None

<isindex> None

<strike> CSS, <s> or <del>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 17

Removed Elements Use Instead Elements

<tt> CSS

HTML5 Advantages
• Multimedia Support: Native audio and video tags for easier media
embedding.
• Better Performance: Faster loading times with fewer dependencies.
• Cross-Platform: Works across all major browsers and mobile devices.
• Geolocation: Access users’ location for location-based features.
• Offline Capability: Works offline with Web Storage and AppCache.
• Simplified Code: New semantic tags for cleaner, more readable code.
• Mobile-Friendly: Optimized for a smoother mobile experience.

HTML5 Disadvantages
• Browser Inconsistencies: Older browsers may not fully support
HTML5 features.
• Mobile Compatibility: Some older mobile devices may struggle with
certain HTML5 features.
• Security Risks: New features like Web Storage can potentially expose
user data if not handled properly.
• Complexity: Advanced features like WebSockets and APIs can be
challenging for beginners.
• Lack of Support in Older Internet Explorer Versions: Some older
versions of IE (like IE 8 and below) do not support HTML5 at all.

Best Practices of Using HTML5

• Use Semantic Tags: Improve SEO and accessibility by using tags like
<header>, <footer>, <article>, and <section>.
• Ensure Cross-Browser Compatibility: Test your code across multiple
browsers, especially older versions.
• Use <meta charset=”UTF-8″>: Always specify the character
encoding at the start to avoid encoding issues.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 18

• Mobile Responsiveness: Use the <meta name=”viewport”

content=”width=device-width, initial-scale=1.0″> tag for mobile-
friendly designs.
Browser Support for HTML5
• Apple Safari, Google Chrome, Mozilla Firefox, and Opera (latest
versions) provide extensive support for HTML5 features.
• Internet Explorer 9.0 supports some HTML5 functionalities, although
it is considered outdated.
• Mobile browsers on iPhones, iPads, and Android devices offer
excellent HTML5 support.
• These mobile browsers ensure smooth access to modern web apps and
features, providing a smooth experience on smartphones and tablets.

2.1.1 HTML 5 Elements

HTML5 introduced several new elements that help structure a webpage better
and make it more interactive. These elements not only improve the design but
also make the code more readable and accessible. Here are some key
elements of HTML5:
• <article>: The <article> tag is used to represent an article. More
specifically, the content within the <article> tag is independent from the
other content of the site (even though it can be related).
• <aside>: The <aside> tag is used to describe the main object of the
web page in a shorter way like a highlighter. It basically identifies the
content that is related to the primary content of the web page but does
not constitute the main intent of the primary page. The <aside> tag
contains mainly author information, links, related content and so on.
• <figcaption>: The <figcaption> tag in HTML is used to set a caption
to the figure element in a document.
• <figure>: The <figure> tag in HTML is used to add self-contained
content like illustrations, diagrams, photos or codes listing in a
document. It is related to main flow, but it can be used in any position

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 19

of a document and the figure goes with the flow of the document and if
it is removed it should not affect the flow of the document.
• <header>: It contains the section heading as well as other content,
such as a navigation links, table of contents, etc.
• <footer>: The <footer> tag in HTML is used to define a footer of HTML
document. This section contains the footer information (author
information, copyright information, carriers etc.). The footer tag is used
within body tag. The <footer> tag is new in the HTML 5. The footer
elements require a start tag as well as an end tag.
• <main>: Delineates the main content of the body of a document or
web app.
• <mark>: The <mark> tag in HTML is used to define the marked text.
It is used to highlight the part of the text in the paragraph.
• <nav>: The <nav> tag is used to declaring the navigational section in
HTML documents. Websites typically have sections dedicated to
navigational links, which enables user to navigate the site. These links
can be placed inside a nav tag.
• <section>: It demarcates a thematic grouping of content.
• <details>: 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.
The content of details tag is visible when open the set attributes.
• <summary>: The <summary> tag in HTML is used to define a
summary for the <details> element. The <summary> element is used
along with the <details> element and provides a summary visible to the
user. When the summary is clicked by the user, the content placed inside
the <details> element becomes visible which was previously hidden.
The <summary> tag was added in HTML 5. The <summary> tag
requires both starting and ending tag.
• <time>: The <time> tag is used to display the human-readable
data/time. It can also be used to encode dates and times in a machine-
readable form. The main advantage for users is that they can offer to

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 20

add birthday reminders or scheduled events in their calendars and

search engines can produce smarter search results.
• <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It
differentiates a text from other text that may be formatted in different
direction. This tag is used when a user generated text with an unknown
direction.
• <wbr>: 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.
• <datalist>: The <datalist> tag is used to provide autocomplete feature
in the HTML files. It can be used with input tag, so that users can easily
fill the data in the forms using select the data.
• <keygen>: The <keygen> tag in HTML is used to specify a key-pair
generator field in a form. The purpose of <keygen> element is to
provide a secure way to authenticate users. When a form is submitted
then two keys are generated, private key and public key. The private
key stored locally, and the public key is sent to the server. The public
key is used to generate client certificate to authenticate user in future.
• <output>: The <output> tag in HTML is used to represent the result
of a calculation performed by the client-side script such as JavaScript.
• <progress>: It is used to represent the progress of a task. It also
defines how much work is done and how much is left to download a task.
It is not used to represent the disk space or relevant query.
• <svg>: It is the Scalable Vector Graphics.
• <canvas>: The <canvas> tag in HTML is used to draw graphics on web
page using JavaScript. It can be used to draw paths, boxes, texts,
gradient and adding images. By default, it does not contain border and
text.
• <audio>: It defines the music or audio content.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 21

• <embed>: Defines containers for external applications (usually a video

player).
• <source>: It defines the sources for <video> and <audio>.
• <track>: It defines the tracks for <video> and <audio>.
• <video>: It defines the video content.

2.1.2 HTML Attributes

HTML attributes are special words placed inside the opening tag of an HTML
element to define its characteristics. Each attribute has two parts:
• Attribute name
• Attribute value (separated by an equal sign = and enclosed in double
quotes ” “).
Syntax:
<tag_name attribute_name="value"> Contents... </tag_name>
Example:
<html>
<body>
<h1>HTML Attributes Example</h1>
<img src="https://media.geeksforgeeks.org/wpcontent/uploads/
20241230152400887784/Salesforce-Governance-
Model.webp"
alt="Example image" width="500">
</body>
</html>
• src Attribute: Specifies the URL of the image to be displayed. In this
example, the image is loaded from
“https://www.example.com/image.jpg”.
• alt Attribute: Provides alternative text for the image, which is
displayed if the image cannot be loaded. It also improves accessibility
and SEO.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 22

• width Attribute: Sets the width of the image in pixels, making it

responsive and visually appealing.

Types of HTML Attributes

HTML attributes can be categorized into different types based on their
functionality. Some common types of attributes include:
• Style attributes: Used to define the visual styling of elements, such as
color, background, and font.
• Event attributes: Used to specify actions that occur in response to user
interactions, such as mouse clicks or key presses.
• Attribute-element Attributes: Used to define the relationship
between elements, such as the src attribute of the img element.
• Form Attributes: Used to define the behavior of form elements, such
as the action attribute of the form element.

HTML Attributes
The complete list of HTML attributes are given below.

Attributes: Description

accept This attribute can be used with <input> element only.

Define character encoding and is used for form

accept-charset
submission.

The keyboard shortcuts to activate/focus specific

accesskey
elements.

Specify where the form data is to be sent to the server

action
after submission of the form.

align Specify the alignment of text content of The Element.

alt Show or display something if the primary attribute

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 23

Attributes: Description

Only works for external scripts (and used only in when

async
src attribute is present ).

Specify whether the input field has autocompleted would

autocomplete
be on or off.

The audio/video should automatically start playing when

autoplay
web page is loaded.

The element should get focused when the page loads. It

autofocus
is a boolean attribute.

bgcolor Set the background color of an HTML element.

Set visible border width to most HTML elements within

border
the body.

charset Define character encoding.

Indicate whether an element should be checked when the

checked
page loads up. It is a Boolean attribute.

Specify the URL of the document that explains the quotes,

cite message or text which describes why the text was
inserted.

Class Specifies one or more class names for an HTML element.

cols The number of columns a cell should span.

colspan HTML specifies the number of columns a cell should span.

The values that are related to the http-equiv or name

content
attribute.

Specify whether the content present in the element is

contenteditable
editable or not.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 24

Attributes: Description

controls It is a Boolean attribute and also new in HTML5

coords Specify the coordinate of an area in an image-map

data Specify the URL of the Embedded file of the Object.

Specific to HTML5 and you can use the data-* attribute

data-*
on all HTML elements.

Specify the date and time of the inserted and the deleted
datetime
text.

Specify that the track will be enabled if the user’s

default preferences do not indicate that another track would be
more appropriate.

defer Executed when the page has finished parsing.

dir The text direction of the element content.

Enable the text direction of the input and the Textarea

dirname
Field after submitting the form.

The disabled attribute in HTML indicates whether the

disabled
element is disabled or not.

Download the element when the user clicks on the

download
hyperlink

draggable Specify whether an element is draggable or not.

Specify whether the dragged data is copied, moved, or

dropzone
linked when it is dropped on any element.

That data will be present in the form and should be

enctype
encoded when submitted to the server.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 25

Attributes: Description

For Attribute is used in both the <label> and the

for
<output> element.

form That the element can contain one or more forms

Specify where to send the data of the form. After

formaction
submission of the form, the formaction attribute is called.

The HTML headers attribute specifies one or additional

headers
header cells a table cell is expounded to.

height attribute is used to specify the height of the

height
Element.

The hidden attribute in HTML is used to define the

hidden
visibility of elements.

The range where the value of gauge is considered to be

high
of high value.

href It is used to specify the URL of the document.

The language for a linked document. It is used only when

hreflang
the href attribute is set.

Provide header information or value of the content

http-equiv
Attribute.

It is used by CSS and JavaScript to perform a certain task

Id
for a unique element.

ismap The HTML ismap attribute is a boolean attribute.

The kind of track. This attribute is only used in <Track>

kind
element.

The title of the Text Track is used by the browser when

label
listing available text tracks.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 26

Attributes: Description

lang Specify the language of the element content.

List of pre-defined options for an <input> element to

list
suggest the user.

Restart the audio and video again and again after

loop
finishing it. It contains the Boolean value.

The range where the value of gauge is considered to be

low
low.

max Specifies the maximum value of an element.

The maximum number of characters in the <input>

maxlength
element. Its default value is 524288.

The media attribute is used with the <link> and <style>

media elements to specify the type of media (screen, print, etc.)
the document is optimized for.

The HTTP method is used to send data while submitting

method
the form.

min Specify the lower bound of the gauge.

Allowed to select more than one value that is present in

multiple
an element.

The audio output of the video is muted, it is a Boolean

muted
attribute.

name Specify a name for the element.

That the form-data should not be validated when

novalidate
submitting the form.

onblur That moment when the element loses focus.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 27

Attributes: Description

oncopy The user copied the content present in an element.

The user cut or delete the content that has been present
oncut
in the element.

onkeypress when a user presses a key on the Keyboard.

Order of events occurs related to the onmousedown

onmousedown
event.

This onscroll attribute works when an element scrollbar is

onscroll
being scrolled.

The optimum attribute in HTML indicates the optimal

optimum
numeric value for the gauge.

Specifies a regular expression pattern that the input value

pattern
must match to be valid.

Specifies a short hint that describes the expected value

placeholder
of an input field/text area.

Specify that the text written in input or text area Element

readonly
is read-only.

Specify that the input element must be filled out before

required
submitting the Form.

Ordered the list in Descending Order(9, 8, 7, 6 …..)

reversed
instead of ascending order(1, 2, 3 ….)

The number of visible text lines for the control i.e the
rows
number of rows to display.

rowspan The number of rows a cell should span.

Specify which option should be by default selected when

selected
the page loads.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 28

Attributes: Description

Specify the initial width for the input field and a number
size
of visible rows for the select element.

spellcheck Applied to HTML forms using the spellcheck attribute.

srclang Specify the language of the track text.

start The start value for numbering the individual list item.

step Set the discrete step size of the <input> element.

style There are 3 ways of implementing style in HTML.

tabindex When the tab button is used for navigating.

Specifies where to open the linked document (e.g., in a

target
new window/tab, in the same window/tab, etc.).

title Specify extra information about the element.

Specify whether the content of an element is translated

translate
or not.

value Specify the value of the element with which it is used.

The wrap attribute specifies how text should be wrapped

in a <textarea> element (either by spaces or by the
wrap
browser’s default). It determines how text is handled
when the form is submitted.

Best Practices for Using HTML Attributes

• Implementing HTML attributes correctly enhances the functionality,
accessibility, and maintainability of your web pages. Here are some best
practices to consider:

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 29

• Use Lowercase Attribute Names: While HTML is case-insensitive, it’s

recommended to use lowercase for attribute names to maintain
consistency and readability.
• Avoid Inline Styles: Instead of using the style attribute for inline CSS,
apply external or internal stylesheets. This approach promotes
separation of content and presentation, enhancing maintainability.

2.2. 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.
Why Use Semantic HTML Tags?
• Accessibility: Semantic elements make web pages more accessible.
Screen readers and other assistive technologies can interpret the
structure and navigate the content more efficiently.
• SEO: Better structured data leads to better SEO. Search engines
prioritize well-structured content that uses semantic elements correctly,
as it’s easier to index.
• Maintainability: Semantic HTML helps create a logically structured
document, which is easier to read and maintain.
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>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 30

6. <footer>
7. <header>
8. <main>
9. <mark>
10. <nav>
11. <section>

HTML 5 Semantic Based Page Structure

Fig: HTML 5 Semantic Based Page Structure

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.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 31

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>
<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>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 32

<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;
}
</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>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 33

.GFG {
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>

</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;

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 34

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

<body>
<h2>AMCEC</h2>
<figure>
<img src="AMCEC Logo..png"
alt="Logo is Not Avilable"
style="width:20%">
<figcaption>
AMCEC Logo
</figcaption>
</figure>
</body>

</html>

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{

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 35

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>
</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>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 36

<p>
Posted by: GeeksforGeeks
</p>

<p>
Contact:
<a href="https://www.geeksforgeeks.org">
geeksforgeeks.org
</a>.
</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>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 37

A few of them are

Rashtrapati Bhavan,
White House etc
</p>

<article>
<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{

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 38

font-size:25px;
text-align:none;
margin-top:0px;
}
</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>

<head>
<title>nav Tag</title>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 39

<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>
<html>

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

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 40

</head>

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

</html>

Best Practices for Using HTML5 Semantic Elements

• Do not overuse <div>: Use semantic elements where appropriate
instead of non-semantic <div> elements to provide more specific
information about the content.
• Structure content logically: Organize the content within semantic
elements to reflect the meaning and importance of the information.
• Validate your HTML: Use tools like the W3C HTML Validator to ensure
that your use of semantic elements adheres to HTML5 standards.

Supported Browsers
• Google Chrome: 1
• Edge: 12
• Mozilla: 1
• Opera: 15
• Safari: 4

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 41

2.3. Forms and input types

HTML5 Forms
Table of Content
• Form Elements
• Commonly Used Input Types in HTML Forms
• HTML Forms Example
o Basic HTML Forms
o Advance HTML Forms
Syntax:
<form>
<!--form elements-->
</form>
2.3.1 Form Elements
The HTML <form> comprises several elements, each serving a unique
purpose. For instance, the <label> element defines labels for
other <form> elements. On the other hand, the <input> element is versatile
and can be used to capture various types of input data such as text, password,
email, and more simply by altering its type attribute.

Elements Descriptions

<label> It defines labels for <form> elements.

It is used to get input data from various types such as text,

<input>
password, email, etc by changing its type.

It defines a clickable button to control other elements or

<button>
execute a functionality.

<select> It is used to create a drop-down list.

<textarea> It is used to get input long text content.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 42

Elements Descriptions

It is used to draw a box around other form elements and

<fieldset>
group the related data.

<legend> It defines a caption for fieldset elements

It is used to specify pre-defined list options for input

<datalist>
controls.

<output> It displays the output of performed calculations.

<option> It is used to define options in a drop-down list.

<optgroup> It is used to define group-related options in a drop-down list.

2.3.2 Commonly Used Input Types in HTML5 Forms

In HTML forms, various input types are used to collect different types of data
from users. Here are some commonly used input types:

Input Type Description

<input type="text"> Defines a one-line text input field

<input
Defines a password field
type="password">

<input
Defines a submit button
type="submit">

<input type="reset"> Defines a reset button

<input type="radio"> Defines a radio button

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 43

Input Type Description

<input type="email"> Validates that the input is a valid email address.

<input Allows the user to enter a number. You can specify

type="number"> min, max, and step attributes for range.

<input Used for checkboxes where the user can select

type="checkbox"> multiple options.

<input type="date"> Allows the user to select a date from a calendar.

<input type="time"> Allows the user to select a time.

<input type="file"> Allows the user to select a file to upload.

HTML Forms Example

Example 1: Basic HTML Forms
Example: This HTML form collects user personal information such as
username and password with a button to submit the form.

<!DOCTYPE html>
<html>

<head>
<title>Html Forms</title>
</head>

<body>
<h2>HTML Forms</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 44

<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>

<input type="submit" value="Submit">

</form>
</body>

</html>

Output:

Fig: Basic HTML Form

In this example:
• HTML Structure: The code has a basic HTML structure with a title
"HTML Forms."
• Heading: The <h2> tag displays "HTML Forms" as the main heading on
the page.
• Form Tag: The <form> tag defines a form for user input.
• Username Field: A text input field for the username with a label.
• Password Field & Submit: A password input field and a submit button
to send the form data.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 45

Example 2: Advance HTML Forms

This HTML form collects users personal information, including name, email,
password, gender, date of birth, and address. It features proper styling for
input fields and submission buttons.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML Form</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
form {
width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
fieldset {
border: 1px solid black;
padding: 10px;
margin: 0;
}
legend {
font-weight: bold;
margin-bottom: 10px;
}
label {
display: block;

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 46

margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
input[type="date"] {
width: calc(100% - 20px);
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
.gender-group {
margin-bottom: 10px;
}
.gender-group label {
display: inline-block;
margin-left: 10px;
}
input[type="radio"] {
margin-left: 10px;
vertical-align: middle;
}
input[type="submit"] {
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>User Personal Information</legend>
<label for="name">Enter your full name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" required />
<label for="password">Enter your password:</label>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 47

<input type="password" id="password" name="pass" required />

<label for="confirmPassword">Confirm your password:</label>
<input type="password" id="confirmPassword" name="confirmPass"
required />
<label>Enter your gender:</label>
<div class="gender-group">
<input type="radio" name="gender" value="male" id="male"
required />
<label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female"
/>
<label for="female">Female</label>
<input type="radio" name="gender" value="others" id="others"
/>
<label for="others">Others</label>
</div>
<label for="dob">Enter your Date of Birth:</label>
<input type="date" id="dob" name="dob" required />
<label for="address">Enter your Address:</label>
<textarea id="address" name="address" required></textarea>
<input type="submit" value="Submit" />
</fieldset>
</form>
</body>

</html>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 48

Output:

HTML Forms
Example Output

Here are some of the key attributes that can be used with
the <form> element:
1. action: This attribute specifies where to send the form-data when a
form is submitted. The value of this attribute is typically a URL.
2. method: This attribute defines the HTTP method used to send the form-
data. The values can be “get” or “post”.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 49

3. target: This attribute specifies where to display the response received

after submitting the form. The values can be “_blank”, “_self”,
“_parent”, “_top”, or the name of an iframe.
4. enctype: This attribute is used when method=“post”. It specifies how
the form-data should be encoded when submitting it to the server. The
values can be “application/x-www-form-urlencoded”,
“multipart/form-data”, or “text/plain”.
5. autocomplete: This attribute specifies whether a form should have
autocomplete on or off. When autocomplete is on, the browser
automatically completes values based on values that the user has
entered before.
6. novalidate: This Boolean attribute specifies that the form-data should
not be validated on submission.

2.4. Multimedia elements (audio, video)

HTML5 introduced 5 most popular media element tags i.e. <audio>, <video>,
<source>, <embed>, <track>. These media element tags changed the entire
development using HTML. In this article, you will get to know about these five
media element tags briefly.

Media Tags:

Media Tag Description

An inline element is used to embed

<audio>
sound files into a web page.

Used to embed video files into a web

<video>
page.

Used to attach multimedia files like

<source>
audio, video, and pictures.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 50

Media Tag Description

Used for embedding external

applications, generally multimedia
<embed>
content like audio or video, into an
HTML document.<

Specifies text tracks for media

<track> components, specifically for audio
and video elements.

Advantage of Media tag:

• Plugins are no longer required
• Speed - anything naturally integrated into a browser will be rendered
and executed in a faster fashion than imported third-party
• Native (built-in) controls are provided by the browser.
• Accessibilities (keyboard, mouse) are built-in automatically

Table of Content
• <audio> Tag
• <video>
• Adding youtube videos
• <embed>
• <source>
• <track>

1. <audio> Tag:
It is a useful tag if you want to add audio such as songs, or any sound files
into your webpage.
Syntax:
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 51

Example 1: In this example, we will use <audio> tag with an example.

<!DOCTYPE html>
<html>

<head>
<style>
h1 {
color: green;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<p>Audio Sample</p>
<!--- Autoplay ensure to run audio automatically
after running the program -->
<audio controls autoplay>
<source src=
"https://media.geeksforgeeks.org/wp-
content/uploads/20190531165842/Recording1514.ogg"
type="audio/ogg">
<source src=
"https://media.geeksforgeeks.org/wp-
content/uploads/20190531165842/Recording1514.mp3"
type="audio/mpeg">
</audio>
</body>

</html>

Output:

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 52

2. <video> Tag:
It is a standard way to embed a video into your web page.

Syntax:
<video src="" controls> </video>

Example 2: In this example, we will see the use of <video>tag.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>Video Sample</p>
<video width="400" height="350" controls preload>
<source src="myvid.mp4" type="video/mp4">
<source src="myvid.ogg" type="video/ogg">
</video>
</center>
</body>
</html>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 53

Output:

3. Adding youtube videos:

Youtube videos can also be directly added to your web page using the embed
video option on any youtube video. <iframe> element is used to add the
video with the src attribute but a shortcut to that is simply to go to any
youtube video and right-click on the video, then select the copy embed code
option.
Example 3: In this code we will see how to add youtube videos with the
help of iframe tag in an HTML document.
<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
</head>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 54

<body>
<iframe width="942" height="530"
src=
"https://www.youtube.com/embed/KWnoiOimNbs"
title=
"Introduction to Python | Sample Video for Python Foundation Course |
GeeksforGeeks"
frameborder="0"
allow=
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share"
allowfullscreen>
</iframe>
</body>

</html>

Output:

4. <embed> Tag:
It is used as a container for embedding plug-ins such as flash animations.
Syntax:
<embed attributes>
Example 4: In this example, we will use <embed> tag with an example.
<!DOCTYPE html>
<html>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 55

<head>
<style>
h1 {
color: green;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<p>Embed Sample</p>
<embed src=
"https://media.geeksforgeeks.org/wp-
content/uploads/20210723103530/simplescreesdfdsrecorder2021071.gif"
width="300px" height="300px">
</body>

</html>

5. <source> Tag:
As you can observe that <audio>, <video> elements contain the <source>
element, the <source> tag is used to attach multimedia files.
Syntax:
<source src="" type="">
...
</source>
Example 5: In this example, we will use <source> tag with an example.
<!DOCTYPE html>
<html>
<head>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 56

<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>Source Tag</h2>
<audio controls>
<source src="audio.mp3"
type="audio/mp3">
</audio>
</center>
</body>
</html>

Output:

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 57

6. <track> Tag:
It is used to specify subtitles, caption files, or different files containing text,
that ought to be visible once the media is taking part in it. Thus, it is a simple
sector for the <audio> and <video> elements.
Syntax:
<track Attribute>
Example 6: In this example, we will use <track> tag with an example.
<!DOCTYPE html>
<html>

<head>
<style>
h1 {
color: green;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>Track Tag: Both Audio and Video</h2>
<video width="300" height="300" controls>
<source src="myvid.mp4" type="video/mp4">
<track src=
"https://contribute.geeksforgeeks.org/wp-content/uploads/11.mp4"
kind="subtitle" srclang="en"
label="English">
</video>
</body>

</html>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 58

Output:

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 59

Department of MCA

Module – 1: Introduction to Web

Development and HTML5
Chapter – 3: Advanced HTML5:
The syllabus topics are
3.1. Canvas and SVG for graphics
3.2. HTML5 APIs(Geolocation, Web Storage, Web Workers)
3.3. Offline web applications using AppCache.

3.1. 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.
• 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.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 60

Example: In this example, we will see the code for drawing a circle using SVG
elements.
<!DOCTYPE html>
<html>

<head>
<title>SVG</title>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG</title>
</head>

<body>
<h2 align="center">
SVG Circle(Geeks For Geeks)
</h2>

<svg id="svgelem" height="200">

<circle id="greencircle" cx="60"
cy="60" r="50" fill="green" />
</svg>
</body>

</html>

Output:

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 61

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.

Example: In this example, we will see the code for drawing a square using
Canvas elements.

<!DOCTYPE html>
<html>

<head>
<title>HTML5 Canvas Tag</title>
</head>

<body>
<h2>Canvas Square(Geeks For Geeks)</h2>

<canvas id="newCanvas" width="100"

height="100" style="border:1px solid #000000;">
</canvas>

<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0, 0, 100, 100);
</script>
</body>

</html>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 62

Output:

Difference between SVG and HTML5 Canvas

SVG Canvas

SVG uses geometric shapes to

Canvas uses pixels
render graphics

Vector based (composed of shapes) Raster based (composed of pixel)

SVG has better scalability. So it can Canvas has poor scalability. Hence it
be printed with high quality at any is not suitable for printing on higher
resolution. resolution.

SVG gives better performance with Canvas gives better performance

smaller number of objects or larger with smaller surface or larger
surface. number of objects.

SVG can be modified through script Canvas can be modified through

and CSS. script only.

Multiple graphical elements, which Single element similar to <img> in

become the part of the page’s DOM behavior. Canvas diagram can be
tree. saved to PNG or JPG format.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 63

Conclusion
Both SVG and HTML5 Canvas are used for web-based graphics, but their
applications differ based on the use case:
• Use SVG when you need high-quality, scalable graphics like logos and
icons.
• Use Canvas when you need dynamic, real-time rendering, such as
animations or games.
Choose based on your project’s requirements, keeping in mind scalability,
performance, and interaction needs.

3.2. HTML5 APIs (Geolocation, Web Storage, Web

Workers)

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.

Here are some of the main HTML5 APIs:

3.2.1. Geolocation API
The Geolocation API allows websites to access the user's geographic location
(latitude and longitude).

Example:
<html>
<body>
<button onclick="getLocation()">Get My Location</button>
<p id="location"></p>
<script>
function getLocation() {

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 64

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
document.getElementById("location").innerHTML = "Geolocation is not
supported by this browser.";
}
}
function showPosition(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
document.getElementById("location").innerHTML = `Latitude:
${latitude}<br>Longitude: ${longitude}`;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
document.getElementById("location").innerHTML = "User denied the
request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("location").innerHTML = "Location
information is unavailable.";
break;
case error.TIMEOUT:
document.getElementById("location").innerHTML = "The request to
get user location timed out.";
break;
case error.UNKNOWN_ERROR:
document.getElementById("location").innerHTML = "An unknown
error occurred.";
break;
}

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 65

}
</script>
</body>
</html>
• Get Location: Click the button to retrieve the user's current location.
• Error Handling: Handles errors if location permission is denied or
unavailable.
• Dynamic Update: Displays latitude and longitude in the paragraph
tag.

3.2.2 Web 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.

Example:
<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 = document.getElementById("username").value;

if (username) {

localStorage.setItem("username", username);

alert("Username saved!");

} else {

alert("Please enter a username.");

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 66

function loadData() {

const username = localStorage.getItem("username");

if (username) {

document.getElementById("result").innerHTML = `Saved Username:

${username}`;

} else {

document.getElementById("result").innerHTML = "No username

saved.";

</script>

</body>

</html>

• 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.

3.2.3 Web Worker API

HTML is a Markup language that is used to design web pages and JavaScript
is a programming language that enables dynamic interactivity on websites
when it is applied to an HTML. It helps users to build modern web applications.

But the problem with this JavaScript was designed to run in a single-threaded
environment, so multiple scripts cannot run at the same time also when
executing Javascript scripts on an HTML page, the page becomes unresponsive
until the script is finished.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 67

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.

Table of Content

• What is a Web Worker?

• Types of Web Workers

• Syntax for Creating a Web Worker

• Syntax for Terminating a Web Worker

• Example of Web Worker

What is a Web Worker?

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.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 68

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("webWorker.js");

Syntax for Terminating a Web Worker

It is used to terminate a web worker.

worker.terminate();

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 webWorker.js 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 index.html and add the following codes to that file.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Worker</title>
</head>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 69

<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("webWorkers.js");

// Called onmessage method to get value from

// script file and show it on web page
worker.onmessage = function (event) {
document.getElementById("countM")
.innerHTML = event.data;
};
</script>
</body>
</html>

JavaScript Code

// Initialized a variable with 0

var count = 0;

function timedCount() {
count = count + 1;

// It is used to send value

// back to html page

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 70

postMessage(count);

// It is a timeout function
setTimeout("timedCount()", 1000);
}

timedCount();

Output: In this program, Web Worker is counting numbers in the background

and still, we can use our web page like here we have used the alert box.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 71

Supported Browsers:

• Google Chrome 4.0

• Firefox 3.5
• Microsoft Edge 10.0
• Safari 4.0
• Opera 11.5

Note: Chrome doesn't let you load Web Workers when running scripts from
a local file. So, for this use, a web host or you can use live server extension.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 72

3.3. 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.
Before understanding Application Cache, let’s understand what is HTML:
HTML stands for hypertext markup language (HTML) for developing web-based
applications and websites. The new version of HTML provides different
functionality with Internet technologies. It also supports video and audio while
HTML doesn’t support it.
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
extension.appcache.
<html manifest="demo.appcache">

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
index.html
3. Create another HTML file and link this with the main HTML file.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 73

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
index.html
# contain style and scripts
css/theme.css
js/jquery.min.js
js/default.js
# shows images
/favicon.ico
images/logo.png
# network session
NETWORK:
login.php
FALLBACK:
//offline.html

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: Before adding Cache Manifest
File in HTML check the following things:
1. Check web server is configured to serve the manifest files or not.
2. Upload the cache manifest file.
3. Add a manifest attribute to the HTML file.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 74

Now let us take an example and understand with help of him.

Example: Follow the below steps:
Step 1: Create a file save as index.html and add a manifest attribute in the
HTML tag.

<!DOCTYPE html>
<html manifest="demo.appcache">

<body text="red">
<center>
Application Cache In HTML 5.

<p>
<a href="page.html">Click Here</a>,
This page contain data even offline mode .
</p>

</body>

</html>

Output:

Application cache in HTML5

Step 2: Now, Create another HTML file and save it as page.html.

<!DOCTYPE html>
<html manifest="demo.appcache">

<body text="green">
<h3>

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 75

<center>
Welcome to GeeksForGeeks.

<p>A computer science portal for geeks. </p>

<p>Go Offline and refresh page. </p>

</center>
</h3>
</body>

</html>

Application cache in HTML5

Explanation: Main HTML file (index.html) contain link of next page. When the
user clicks on that link next page will execute. The main file contains a
manifest attribute so even if the user went offline and he refreshes the page
it will show the content of that page. This all works because of the application
cache.

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 76

Output:

Advantage:
• Offline Mode: Users can use applications without the internet or offline.
• Less Space: Web pages are already cached so they occupy less space.
• Increase Speed: Web pages contain cached data. cached data are local
so they load fast

AMCEC Dept. of MCA Prof. Rajesh N

MMC205 - Web Application Development 2024-25 P a g e | 77

• Reduced server load: The web browser will only download data if it is
updated on the server. It also decreases HTTP requests.
• Modern browser: The HTML 5 feature Cache feature is available in all
modern web browsers.
Disadvantage:
• Old browser: Not available in an older version of HTML.

AMCEC Dept. of MCA Prof. Rajesh N