Web Application Development MMC205

Module-1 Introduction to Web Development and HTML5

Web Development Basics

What Is the Internet?

The Internet is a huge collection of computers connected in a communications network.

The Transmission Control Protocol/Internet Protocol (TCP/IP) became the standard for
computer network connections in 1982.

Rather than connecting every computer on the Internet directly to every other computer on
the Internet, normally the individual computers in an organization are connected to each
other in a local network.

Internet:

The Internet is a huge collection of computers connected in a communications network.

The Internet is a network of networks.

One node on this local network is physically connected to the Internet.

So, the Internet is actually a network of networks, rather than a network of computers.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 1

Web Application Development MMC205

Obviously, all devices connected to the Internet must be uniquely identifiable.

The Internet is a global network of billions of computers and other electronic devices.
With the Internet, it's possible to access almost any information, communicate with
anyone else in the world, and do much more.

Internet Protocol Addresses

The Internet Protocol (IP) address of a machine connected to the Internet is a unique 32-bit
number.

IP addresses usually are written (and thought of) as four 8-bit numbers, separated by
periods.

The four parts are separately used by Internet-routing computers to decide where a
message must go next to get to its destination.

Although people nearly always type domain names into their browsers, the IP works just as
well.

For example, the IP for United Airlines ([Link]) is [Link]. So, if a browser is

pointed at [Link] it will be connected to the United Airlines Web site.

Internet Protocol Addresses

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 2

Web Application Development MMC205

What is the Web?

The World Wide Web—usually called the Web for short—is a collection of
different websites you can access through the Internet.

A website is made up of related text, images, and other resources.

The purpose of a website can be almost anything: a news platform, an advertisement, an

online library, a forum for sharing images, or an educational site like us!

Difference between internet and Internet

Internet with a capital "I" refers to the entire Internet (meaning the biggest collection of
networks on the planet) .

Internet with a lowercase "i" refers to any group of networks that are connected together.

Difference between Internet and Intranet

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 3

Web Application Development MMC205

Web or Internet?

It is important to understand that the Internet and the Web is not the same thing.

The Internet is a collection of computers and other devices connected by equipment that
allows them to communicate with each other.

The Web is a collection of software and protocols that has been installed on most, if not all,
of the computers on the Internet.

Web browsers:

When two computers communicate over network, one acts as a client and the other as a
server.

The client initiates the communication, which is a request for information stored on the
server. Server then sends that information back to the client.

The server locates the document among its servable documents and sends it to the browser,
which displays it for the user.

Examples of web browser:

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 4

Web Application Development MMC205

Web servers:

Web servers are programs that provide documents to requesting browsers.

Servers are slave programs. They act only when requests are made to them by browsers
running on other computers on the Internet.

Web server is a computer where the web content is stored. Basically web server is used to
host the web sites

Examples of web server:

Web pages are a collection of data, including images, text files, hyperlinks, database files etc.,
all located on some computer (also known as server space) on the Internet.

A web server is dedicated software that runs on the server-side.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 5

Web Application Development MMC205

When any user requests their web browser to run any web page, the webserver places all
the data materials together into an organized web page and forwards them back to the web
browser with the help of the Internet.

A web server is a dedicated computer responsible for running websites sitting out on those
computers somewhere on the Internet.

The primary objective of any web server is to collect, process and provide web pages to the
users.

This intercommunication of a web server with a web browser is done with the help of a
protocol named HTTP (Hypertext Transfer Protocol).

These stored web pages mostly use static content, containing HTML documents, images,
style sheets, text files, etc.

Difference b/w web browser and web server

Web Browser
Web Server
 Web Browser is an application
program that displays a World  A web server is a program or the
wide web document. It usually computer that provide services to
uses the internet service to access other programs called client.
the document.
 The Web browser requests the  The Web server accepts, approves,
server for the web documents and and responds to the request made
services. by the web browser for a web
 The web browser acts as an document or service.
interface between the server and
the client and displays a web  The web server is a software or a
document to the client. system which maintain the web
applications, generate response
 The web browser sends an HTTP and accept clients data.
request and gets an HTTP
response.  The web server gets HTTP
requests and sends HTTP
 Web browser stores the cookies responses.
for different websites.
 Web servers provide an area to
store and organize the pages of
the website

What is the URL?

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 6

Web Application Development MMC205

A URL (Uniform Resource Locator) is a unique identifier used to locate a resource on the
Internet.

It is also referred to as a web address.

URLs consist of multiple parts -- including a protocol and domain name -- that tell a web
browser how and where to retrieve a resource.

A colon followed by double forward-slash (://)

A colon followed by port number (optional – unless specified otherwise, “:80” is the default
when using HTTP, and “:443” is the default when using HTTPS)

It is used to indicate the location of a web resource to access the web pages.

Syntax of URL

protocol://hostname/filename

Protocol: A protocol is the standard set of rules that are used to allow electronic
devices to communicate with each other.

Hostname: It describes the name of the server on the network.

Filename: It describes the pathname to the file on the server.

What is a protocol?

A Protocol is a set of rules that we use for specific purposes. In the current scenario, when
we are talking about protocols, it is about communication- the way we talk to each other.

In web, multiple protocols are used to communicate. Primarily for end users, the most
important and visible protocols are HTTP and HTTPS. Though there are many other
protocols as well, HTTP and HTTPS protocols cater to most of the population.

HTTP

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 7

Web Application Development MMC205

HTTP stands for Hypertext Transfer Protocol.

The protocol used to transfer hypertext between two computers is known as

Hypertext Transfer Protocol.

HTTP provides a standard between a web browser and a web server to establish
communication.

It is a set of rules for transferring data from one computer to another.

Data such as text, images, and other multimedia files are shared on the World Wide
Web

Features of HTTP:

Connectionless protocol:

HTTP is a connectionless protocol.

HTTP client initiates a request and waits for a response from the server.

When the server receives the request, the server processes the request and sends
back the response to the HTTP client after which the client disconnects the
connection.

The connection between client and server exist only during the current request and
response time only.

HTTP is media independent:

It specifies that any type of media content can be sent by HTTP as long as both the
server and the client can handle the data content.

Stateless:

HTTP is a stateless protocol as both the client and server know each other only
during the current request.

Messages

HTTP messages are of two types: request and response.

Both the message types follow the same message format.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 8

Web Application Development MMC205

Request Message: The request message is sent by the client that consists of a request line,
headers, and sometimes a body.

Response Message: The response message is sent by the server to the client that consists of
a status line, headers, and sometimes a body.

HTTPS

HTTPS stands for HyperText Transfer Protocol Secure.

It is the most common protocol for sending data between a web browser and a website.

HTTPS is the secure variant of HTTP and is used to communicate between the user’s
browser and the website, ensuring that data transfer is encrypted for added security.

Any website, especially those requiring login details, should use HTTPS. You can see a
padlock icon in the URL bar, which means the page is secure. Browsers, like Google Chrome,
treat HTTPS seriously and mark non-HTTPS websites as “Not Secure.”

In most cases, the HTTPS protocol must be used while entering bank account information.

The HTTPS protocol is mostly utilised in situations when entering login credentials is
necessary.

HTTPS employs an encryption mechanism called Secure Sockets Layer (SSL), also known as
Transport Layer Security, to enable encryption.

HTTP HTTPS

HTTP stands for HyperText Transfer

HTTPS stands for HyperText Transfer Protoco
l Secure.
Protocol.

URL begins with “[Link] URL starts with “[Link]

HTTP Works at the Application Layer. HTTPS works at Transport Layer.

HTTP speed is faster than HTTPS. HTTPS speed is slower than HTTP.

HTTP uses port number 80 for commun HTTPs uses 443 port number for communicati
ication. on.

In HTTP, Encryption is absent. Encryption is present in HTTPS.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 9

Web Application Development MMC205

Overview of 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.

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,Bootstrap.

Frontend Libraries: jQuery and SASS(Syntactically Awesome Style Sheets).

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.

Backend development handles the server-side operations, including processing data,

managing application logic, and handling user requests.

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.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 10

Web Application Development MMC205

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.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 11

Web Application Development MMC205

HTML5 Fundamentals

HTML stands for HyperText Markup Language.

It is the standard language used to create and structure content on the web.

It defines the structure of a webpage by using a series of elements, tags, and attributes to
organize text, images, links, and other multimedia elements.

HTML is a markup language, not a programming language, meaning it annotates text to

define how it is structured and displayed by web browsers.

A markup language is a system that uses special codes or tags within a text document to
define its structure, content, and presentation.

It forms the building blocks of all websites and is complemented by CSS for style and
JavaScript for interactivity.

<!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1>Welcome to RNSIT</h1>

<p>Web Application Development</p>

</body>

</html>

output

Welcome to RNSIT

Web Application Development

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 12

Web Application Development MMC205

In this example:

<!DOCTYPE html>: Declares the document type and version (HTML5).

<html>: The root element that wraps all HTML content.

<head>: Contains meta-information about the webpage, like the title.

<title>: Specifies the title of the webpage (appears in the browser tab).

<body>: Contains the visible content of the webpage.

<h1>: Represents the main heading on the page (“Welcome to RNSIT”).

<p>: Defines a paragraph of text (“Web Application Development”).

Features of HTML:

It is easy to learn and easy to use.

It is platform-independent.

Images, videos, and audio can be added to a web page.

Hypertext(hypertext refers to text that contains links (hyperlinks) that allow users to
navigate between different web pages or sections within the same page) can be added to the
text.

It is a markup language.

Why learn HTML?

It is a simple markup language. Its implementation is easy.

It is used to create a website.

Helps in developing fundamentals about web programming.

Boost professional career.

Advantages:

HTML is used to build websites.

It is supported by all browsers.

It can be integrated with other languages like CSS, JavaScript, etc.

Disadvantages:

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 13

Web Application Development MMC205

HTML can only create static web pages. For dynamic web pages, other languages have to be
used.

A large amount of code has to be written to create a simple web page.

The security feature is not good.

Sl No
.
Elements Description
1 header Represents introductory content or a group of navigational links.

2 nav Defines a section of navigation links.

3 main Specifies the main content of the document (only one per page).

4 section Represents a thematic grouping of content, typically with a

heading.
5 footer Footer for a section or page, typically contains metadata or links.

6 mark Highlights parts of text.

7 time Represents a date/time. The datetime attribute of this element is
used translate the time into a machine-
readable format so that browsers can offer to add date reminders
through the user's calendar, and search engines can produce
smarter search results.

8 figure Self-contained content like illustrations, diagrams, etc.

9 figcaption Caption for <figure>.
10 menu Shows a menu bar on a web page.

11 audio For embedding sound content.

12 video For embedding video content.

13 source Represents a media resource.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 14

Web Application Development MMC205

HTML5 Elements

<!DOCTYPE html>

<html >

<head>

<title>HTML5 Layout Example</title>

</head>

<body>

<!-- Header section -->

<header>

<h1>My Website</h1>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<!-- Main content area -->

<main>

<!-- Section 1 -->

<section>

<h2>Welcome</h2>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 15

Web Application Development MMC205

<p>This is the welcome section of the website.</p>

</section>

<!-- Section 2 -->

<section>

<h2>Latest News</h2>

<p>Here’s the latest update from our team.</p>

</section>

</main>

<!-- Footer section -->

<footer>

<p>&copy; 2025 My Website</p>

</footer>

</body>

</html>

Example for Elements from 6 to 9

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Elements Example</title>

</head>

<body>

<h1>HTML5 Elements Demo</h1>

<p>This is a <mark>highlighted</mark> word in a sentence.</p>

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 16

Web Application Development MMC205

<p>Our meeting is scheduled for <time datetime="2025-05-09 14:00">May 9, 2025 at 2:00

PM</time>.</p>

<figure>

<img src="C:\Users\raghu\Desktop\WEB\Web Autonomous\web practice\[Link]"

alt="Placeholder image">

<figcaption>This is a placeholder image with a caption.</figcaption>

</figure>

</body>

</html>

Example for Elements from 10 to 13

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Menu, Audio, and Video Example</title>

</head>

<body>

<h1>HTML5 Media and Menu Elements</h1>

<!-- Menu Element -->

<menu>

<li><a href="#home">Home</a></li>

<li><a href="#audio">Audio</a></li>

<li><a href="#video">Video</a></li>

</menu>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 17

Web Application Development MMC205

<!-- Audio Element -->

<h2 id="audio">Sample Audio</h2>

<audio controls>

<source src="C:\Users\raghu\Desktop\WEB\Web Autonomous\web

practice\Premalo.mp3" type="audio/mpeg">not support </audio>

<!-- Video Element -->

<h2 id="video">Sample Video</h2>

<video width="320" height="240" controls>

<source src="C:\Users\raghu\Desktop\WEB\Web Autonomous\web practice\video.mp4"

type="video/mp4">not support </video>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 18

Web Application Development MMC205

HTML5 Attributes

HTML5 introduced many new attributes (some global, some element-specific) to enhance
interactivity, accessibility, and semantics.

Sl Attribute Description
No
.
1 accesskey Represents a keyboard shortcut to access an element
2 contenteditable Specifies whether or not a user is allowed to edit the content

3 contextmenu Represents the context menu for an element

4 draggable Specifies whether or not a user is able to drag an element

5 dropzone Specifies the drop target for a dragged element

6 hidden Hides a non-relevant element

7 spellcheck Specifies or not the spelling or grammar checking feature is

enabled for an element
8 itemid Represents an id that specifies a vocabulary for a specific typ
e of items
9 itemprop Specifies a property of an item

10 itemref Provides a reference of a specific type of items

11 itemscope Represents boolean attribute that shows the position and pres
ence of microdata on an HTML document, which is read by
a computer
12 itemtype Represents a valid URL to define a specific type of items.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 19

Web Application Development MMC205

<accesskey>

<html>

<body>

<nav>

<a href="#home" accesskey="h">Home</a>

<a href="#about" accesskey="a">About</a>

<a href="#contact" accesskey="c">Contact</a>

</nav>

</body>

</html>

contenteditable

<!DOCTYPE html>

<html>

<head>

<title>contenteditable attribute</title>

</head>

<body>

<h2>contenteditable attribute</h2>

<p contenteditable="true">

RNS INSTITUTE OF TECHNOLOGY

</p>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 20

Web Application Development MMC205

Draggable

<p draggable="true">This is a draggable paragraph.</p>

<draggable><p draggable="true">This is a draggable paragraph.</p>

<dropzone>

<div dropzone="copy"></div>

<hidden>

<html>

<body>

<p hidden>MBA DEPARTMENT.</p>

<p>MCA DEPARTMENT</p>

</body>

</html>

<spellcheck>

<html>

<body>

<h3>Example of Enabling SpellCheck</h3>

<form>

<p>

<textarea spellcheck="true"></textarea>

</p>

<button type="reset">Reset</button>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 21

Web Application Development MMC205

</form>

</body>

</html>

itemref (attribute)

itemref provides a list of element id’s with additional properties elsewhere in the document.

The itemref attribute can only be specified on elements that have an itemscope attribute
specified.

Example

<div itemscope id="amanda" itemref="a"></div>

<p id="a">Name: <span itemprop="name">Amanda</span></p>

</div>

Context Menu

<h2>Right-click to see the Context Menu</h2>

<div contextmenu="myMenu" style="border: 1px solid #ccc; padding: 10px;">

Right-click this box to see a custom context menu.

</div>

itemid Attribute

The itemid is a type of global attribute.

Attributes that are common to all elements of HTML that provide microdata in the form of a
unique, global identifier of an item.

You should use this attribute only when you are using microdata.

Microdata lets you define your own custom-tailored elements and start implanting custom-
tailored properties in your web pages.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 22

Web Application Development MMC205

<html>

<head>

<title>BANGALORE</title>

</head>

<body>

<h2>RNSIT INSTITUTE OF TECHNOLOGY</h2>

<dl itemscope="" itemtype="[Link]

itemid="urn:isbn:0-330-34032-8">

<dt>Name </dt>

<dd itemprop="title">Intro to Java</dd>

<dt>Instructor </dt>

<dd itemprop="author">Geekyy G</dd>

</body>

</html>

The HTML itemprop attribute is a global attribute, that is basically used to add a
property to an item.

<html>

<body>

<h1 itemprop="movie name">RRR</h1>

<br>

<span itemprop="Directors">S S Rajamouli</span>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 23

Web Application Development MMC205

<br>

<span itemprop="Heroes">NTR, RAM CHARAN </span>

<br>

</div>

</body>

</html>

Itemscope and itemtype

The itemtype attribute specifies the URL but the URLs are not connected with any resources
rather they are used by browsers to act as the identifiers.

The HTML itemscope attribute works with item types to ensure that the HTML contained in a
block is about a particular item.

Example:

<div itemscope itemtype=

"[Link]

<span itemprop="description">

GeeksforGeeks is a portal for geeks.

It has tutorials on various topics.

</span>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 24

Web Application Development MMC205

Semantic HTML5 tags

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <img>, <table>, and <article> - Clearly defines its content.

<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>

<article> Element

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.

Examples of where the <article> element can be used:

Forum posts,Blog posts,User comments,Product cards,Newspaper articles

Example

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 25

Web Application Development MMC205

<article>

<h2>Google Chrome</h2>

<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the
world's most popular web browser today!</p>

</article>

<aside> Element

The <aside> element defines some content aside from the content it is placed in (like a
sidebar).

The <aside> content should be indirectly related to the surrounding content.

Example

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot
was amazing! I had a great summer together with my family!</p><aside><h4>Epcot
Center</h4><p>Epcot is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal special
events.</p></aside>

<details> tag

specifies additional details that the user can open and close on demand.

The <details> tag is often used to create an interactive widget that the user can open and
close.

By default, the widget is closed. When open, it expands, and displays the content within.

Any sort of content can be put inside the <details> tag.

Example

<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney

World Resort featuring exciting attractions, international pavilions, award-winning
fireworks and seasonal special events.</p></details>

<summary> tag

The <summary> tag defines a visible heading for the <details> element. The heading can be
clicked to view/hide the details.

Note: The <summary> element should be the first child element of the <details> element.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 26

Web Application Development MMC205

Example

<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney

World Resort featuring exciting attractions, international pavilions, award-winning
fireworks and seasonal special events.</p></details>

Forms and input types

An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

The HTML <form> element is used to create an HTML form for user input:

SyntaxThe <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.

Form elements
These are the following HTML <form> elements:

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

<input> It is used to get input data from the form in various types such as text, password,
email, etc. by changing its type.

<button> It defines a clickable button to control other elements or execute a functionality.

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

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

<fieldset> It is used to draw a box around other form elements and group the logically
related data.

<legend> It defines a caption for field set elements.

<datalist> It is used to specify pre-defined list options for input 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.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 27

Web Application Development MMC205

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Text Box ([Link])

It is a type of input which takes the text.

Any type of input can be created using <input>.

The type attribute indicates what type of input is needed for the text box, the value should
be given as text.

For any type of input, a name has to be provided which is done using name attribute.

The size of the text can be controlled using size attribute.

Every browser has a limit on the number of characters it can collect. If this limit is exceeded,
the extra characters are chopped off. To prevent this chopping, maxlength attribute can be
used.

When maxlength is used, users can enter only those many characters that is given as a value
to the attribute

Password Box

If the contents of a text box should not be displayed when they are entered by the user, a
password control can be used.

In this case, regardless of what characters are typed into the password control, only bullets
or asterisks are displayed by the browser.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 28

Web Application Development MMC205

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/[Link]" >

<html xmlns="[Link]

<head>

<title>Password Box</title>

</head>

<body>

<form action = " ">

<p>

<label>Enter the email id:

<input type = "text" name = "myname" maxlength = "25" />

</label>

</p>

<p>

<label>Enter the password:

<input type = "password" name = "mypass" maxlength = "20" />

</label>

</p>

</form>

</body>

</html>

Radio Button

Radio buttons are special type of buttons which allows the user to select only individual option.

Radio buttons are created using the input tag with the type attribute having the value radio.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 29

Web Application Development MMC205

When radio buttons are created, values must be provided with the help of value attribute.

All the radio buttons which are created would have same name.

This is because the radio buttons are group elements.

If one of the radio buttons has to be selected as soon as the web page is loaded, checked
attribute

should be used. The value also would be checked

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/[Link]" >

<html xmlns="[Link]

<head>

<title>Radio Button</title>

</head>

<body>

<h3>Who is your Favourite Actor?</h3>

<form action = " ">

<p>

<input type="radio" name="act" value="one"/>Puneeth Rajkumar

<input type="radio" name="act" value="two"/>Pawan Kalyan

<input type="radio" name="act" value="three"/>Ram Charan

<input type="radio" name="act" value="four"/>Prabhas

</p>

</form>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 30

Web Application Development MMC205

Check Box

Check box is a type of input using which multiple options can be selected.

Check box can also be created using the <input> tag with the type having the value “checkbox”.

During the creation of check box, the value should be provided using the value attribute.

All the checkbox which are created would have the same name because they are group
elements.

If one of the check box have to be selected as soon as the page is loaded, checked attribute
should be

used with the value checked.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/[Link]" >

<html xmlns="[Link]

<head>

<title>Check Box</title>

</head>

<body>

<h3>Who is your Favourite Actor?</h3>

<form action = " ">

<p>

<input type="checkbox" name="act" value="one"/>Puneeth Rajkumar

<input type="checkbox" name="act" value="two"/>Pawan Kalyan

<input type="checkbox" name="act" value="three"/>Ram Charan

<input type="checkbox" name="act" value="four"/>Prabhas

<input type="checkbox" name="act" value="five"/>Allu Arjun

</p>

</form>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 31

Web Application Development MMC205

</body>

</html>

The <label> HTML element represents a caption for a form element in a user
interface.

Example:

<form>

<label>

Male

<input type="radio"

name="gender"

id="male"

value="male" />

</label>

<fieldset>

The <fieldset> tag is used to group related elements in a form.

The <fieldset> tag draws a box around the related elements.

The <legend> tag defines a caption for the <fieldset> element.

Example:

<fieldset>

<legend>Personalia:</legend>

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname"><br><br>

<label for="lname">Last name:</label>

<input type="text" id="lname" name="lname"><br><br>

<label for="email">Email:</label>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 32

Web Application Development MMC205

<input type="email" id="email" name="email"><br><br>

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

</fieldset>

The <datalist>

The <datalist> tag specifies a list of pre-defined options for an <input> element.

Example: [Link]

<datalist id="browsers">

<option value="Edge">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<select> Tag:

Menu items is another type of input that can be created on the page.

To create the menu item, <select> tag is used.

To insert the item in the menu, <option> tag is used.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/[Link]" >

<html xmlns="[Link]

<head> <title> Menu </title>

</head>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 33

Web Application Development MMC205

<body>

<p>

<b>RNSIT Branches - Information Science, Computer Science, Electronics, Electrical,

Mechanical</b>

</p>

<form action = "">

<p>

<select name = "branches" size="2">

<option> Information Science </option>

<option> Computer Science </option>

<option> Electronics </option>

<option> Electrical </option>

<option> Mechanical </option>

</select>

</p>

</form>

</body>

</html>

The <textarea> Tag:

Text area is a type of input using which multiple statements can be entered.

Text area is created using <textarea> tag.

Text area should have the name.

During the creation of text area, it should be mentioned how many sentences can be entered.
This is done using rows attribute.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 34

Web Application Development MMC205

Similarly, it should also be mentioned how many characters can be entered in a line. This is
done using cols attribute.

If the value given to rows is exceeded i.e. if users enter sentences more than specified, the scroll
bar automatically appears.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/[Link]" >

<html xmlns="[Link]

<head>

<title> text area </title>

</head>

<body>

<form action=" ">

<h3> Enter your comments</h3>

<p>

<textarea name="feedback">

</textarea>

</p>

</form>

</body>

</html>

The Action Buttons: ([Link])

The Reset button clears all of the controls in the form to their initial states. The Submit button
has two actions:

First, the form data is encoded and sent to the server; second, the server is requested to execute
the server resident program specified in the action attribute of the <form> tag.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 35

Web Application Development MMC205

The purpose of such a server-resident program is to process the form data and return some
response to the user.

Every form requires a Submit button. The Submit and Reset buttons are created with the
<input> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/[Link]" >

<html xmlns="[Link]

<head>

<title> action buttons </title>

</head>

<body>

<form action=" ">

<p>

<input type="text" name="variable"/>

<input type="SUBMIT" value="CLICK"/>

<input type="RESET" value="RESET"/>

</p>

</form>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 36

Web Application Development MMC205

Example of a Complete Form:

Multimedia elements (audio, video)

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 37

Web Application Development MMC205

Advanced HTML5

Canvas

The HTML <canvas> element is used to draw graphics on a web page.

The HTML <canvas> element is only a container for graphics.

You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Canvas is supported by all major browsers.

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no
content.

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and
height attribute to define the size of the canvas.

Example

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:4px solid #000000;">

Your browser does not support the HTML canvas tag.

</canvas>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 38

Web Application Development MMC205

After creating the rectangular canvas area, you must add a JavaScript to do the drawing.

Example2: [Link]

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:6px solid #d3d3d3;">

Your browser does not support the HTML canvas tag.</canvas>

<script>

var c = [Link]("myCanvas");

var ctx = [Link]("2d");

[Link](0,0);

[Link](200,100);

[Link]();

</script>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 39

Web Application Development MMC205

getContext("2d"): Accesses the 2D drawing context.

moveTo(0, 0):Sets the starting point of the line.

lineTo(200, 100):Defines the end point of the line.

stroke():Actually draws the line on the canvas.

Example 3: [Link]

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:6px solid #d3d3d3;">

Your browser does not support the HTML canvas tag.</canvas>

<script>

var c = [Link]("myCanvas");

var ctx = [Link]("2d");

[Link]();

[Link](95,50,40,0,2*[Link]);

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 40

Web Application Development MMC205

[Link]();

</script>

</body>

</html>

[Link](); // Starts a new path

[Link](95,50,40,0,2*[Link]):

arc- Defines a circle

center at (95, 50),

radius 40,

starting angle 0,

ending angle 2π radians (full circle)

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 41

Web Application Development MMC205

Example4:

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:9px solid #d3d3d3;">

Your browser does not support the HTML canvas tag.</canvas>

<script>

var c = [Link]("myCanvas");

var ctx = [Link]("2d");

[Link] = "30px Arial";

[Link]("RNSIT",10,50);

</script>

</body>

</html>

HTML SVG Graphics

SVG stands for Scalable Vector Graphics.

SVG defines vector-based graphics in XML format.

SVG graphics are scalable, and do not lose any quality if they are zoomed or resized.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 42

Web Application Development MMC205

SVG is supported by all major browsers.

SVG integrates with other standards, such as CSS, DOM, XSL and JavaScript.

The SVG element is a container for SVG graphics.

SVG has several methods for drawing paths, rectangles, circles, polygons, text, and much
more.

Example1:

<!DOCTYPE html>

<html>

<body>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40"

stroke="green" stroke-width="4" fill="yellow" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 43

Web Application Development MMC205

The svg element creates a container of 100x100 pixels.

cx and cy define the center position of the circle:

cx="50“: The x-coordinate of the circle’s center is 50 pixels from the left of the SVG.

cy="50“: The y-coordinate of the circle’s center is 50 pixels from the top of the SVG.

r="40“: This is the radius of the circle.

stroke="green“: The outline (border) of the circle is green.

stroke-width="4“: The border is 4 pixels thick.

fill="yellow“: The inside of the circle is filled with yellow.

Example2:

<!DOCTYPE html>

<html>

<body>

<svg width="400" height="120">

<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue"

/>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 44

Web Application Development MMC205

Example3:

<!DOCTYPE html>

<html>

<body>

<h2>SVG ellipse Element</h2>

<svg height="140" width="500">

<ellipse cx="120" cy="80" rx="100" ry="50" style="fill:yellow;stroke:green;stroke-width:3"

/>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 45

Web Application Development MMC205

Example4:

<!DOCTYPE html>

<html>

<body>

<h2>SVG line Element</h2>

<svg height="200" width="300">

<line x1="0" y1="0" x2="300" y2="200" style="stroke:red;stroke-width:2" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 46

Web Application Development MMC205

Example3:

<!DOCTYPE html>

<html>

<body>

<svg width="400" height="180">

<polygon points="100,10 40,198 190,78 10,78 160,198"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 47

Web Application Development MMC205

Differences Between SVG and Canvas

"Vector based" refers to a type of computer graphics where images are created using
mathematical equations and geometric shapes (points, lines, curves) rather than pixels

HTML5 APIs

1. Geolocation API

The Geolocation API is used to get the user's current location.

Since this can compromise privacy, the location is not available unless the user approves it.

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.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 48

Web Application Development MMC205

Example

<!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");

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

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 49

Web Application Development MMC205

function error()

alert("Sorry, no position available.");

</script>

</body>

</html>

<button onclick="getLocation()">: When clicked, it runs the getLocation() JavaScript

function.

Checks if the browser supports geolocation ([Link]).

If yes, it calls getCurrentPosition() to try and get the user's location.

If successful, it runs the success() function.

If it fails, it runs the error() function.

If not supported, it shows an error message.

[Link] and [Link] get the actual coordinates

2. Web Storage

With web storage, applications can store data locally within the user's browser.

Before HTML5, application data had to be stored in cookies, included in every server
request.

Web storage is more secure, and large amounts of data can be stored locally, without
affecting website performance.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 50

Web Application Development MMC205

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never
transferred to the server.

Web storage is per origin (per domain and protocol). All pages, from one origin, can store
and access the same data.

Web Storage API Objects

Web storage provides two objects for storing data in the browser:

[Link] - stores data with no expiration date (data is not lost when the
browser tab is closed)

[Link] stores data for one session (data is lost when the browser tab is
closed)

Example

<!DOCTYPE html>

<html>

<body>

<h1>Browser test for Web Storage API</h1>

<div id="result"></div>

<script>

const x = [Link]("result");

if (typeof(Storage) !== "undefined")

[Link] = "Your browser supports Web storage!";

else

[Link] = "Sorry, no Web storage support!";

</script>

</body>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 51

Web Application Development MMC205

</html>

Browser test for Web Storage API

Your browser supports Web storage!

const x = [Link]("result");

This line gets the HTML element with the ID result and stores it in the variable x.

This element will be used to display a message to the user.

if (typeof(Storage) !== "undefined")

This line checks whether the Storage object is defined in the browser.

typeof(Storage) returns undefined if the browser doesn't support Web Storage.

If it's not undefined then the browser does support Web Storage (like localStorage or
sessionStorage).

[Link] = "Your browser supports Web storage!";

If Web Storage is supported, this message will be displayed inside the HTML element with
ID result.

The localStorage Object

localStorage object stores the data with no expiration date.

The data will not be lost when the browser is closed, and will be available the next day,
week, or year.

Example

<!DOCTYPE html>

<html>

<body>

<div id="result"></div>

<script>

const x = [Link]("result");

if (typeof(Storage) !== "undefined") {

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 52

Web Application Development MMC205

[Link]("lastname", " PRASAD K");

[Link]("bgcolor", "yellow");

[Link] = [Link]("lastname");

[Link] = [Link]("bgcolor");

} else {

[Link] = "Sorry, no Web storage support!";

</script>

The sessionStorage Object

sessionStorage object is equal to the localStorage object, except that it stores the data for
only one session.

The data is deleted when the user closes the specific browser tab.

Example

<!DOCTYPE html>

<html>

<head>

<script>

function clickCounter() {

const x = [Link]("result");

if (typeof(Storage) !== "undefined")

if ([Link]) {

[Link] = Number([Link])+1;

} else {

[Link] = 1;

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 53

Web Application Development MMC205

[Link] = "You have clicked the button " + [Link] + " time(s) in
this session!";

} else {

[Link] = "Sorry, no Web storage support!";

</script>

</head>

<body>

<h1>sessionStorage</h1>

<button onclick="clickCounter()" type="button">Click me!</button>

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

<p>Click the button to see the counter increase.</p>

<p>Close the browser tab (or window), and try again, and the counter is reset.</p>

</body>

</html>

---------------

if ([Link]): This condition checks if clickcount exists and is not null,

undefined or zero

Output

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 54

Web Application Development MMC205

3. HTML Web Workers API

A web worker is an external JavaScript file that runs in the background, without affecting
the performance of the page.

When executing scripts in an HTML page, the page becomes unresponsive until the script is
finished.

A web worker is an external JavaScript file that runs in the background, independently of
other scripts, without affecting the performance of the page. You can continue to do
whatever you want: clicking, selecting things, etc., while the web worker runs in the
background.

Web workers are useful for heavy code that can't be run on the main thread, without
causing long tasks that make the page unresponsive.

Check Web Worker API Support

Before using web worker, we can quickly check browser support:

Example1:

<!DOCTYPE html>

<html>

<body>

<h1>Browser test for Web Worker API</h1>

<div id="result"></div>

<script>

const x = [Link]("result");

if(typeof(Worker) !== "undefined") {

[Link] = "Your browser support Web Workers!";

} else {

[Link] = "Sorry, your browser does not support Web Workers.";

</script>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 55

Web Application Development MMC205

</body>

</html>

Offline web applications using AppCache.

What is AppCache?

AppCache (Application Cache) was a feature introduced in HTML5 that allowed web
applications to cache resources (HTML, CSS, JS, images) for offline use.

When implemented, a browser could serve a cached version of a site even when the user
was offline.

Basic Structure of AppCache

[Link] file([Link])

[Link] file that references it

[Link] listed in the manifest file

Steps to Run an Offline Web App Using AppCache

1. Set Up a Local Web Server

AppCache does not work from the file:// protocol. You must serve the files over http:// or
https://

You can use a simple Python server:

python -m [Link] 8000

2. Create Your Web App Files

[Link]

<!DOCTYPE html>

<html manifest="[Link]">

<head>

<title>Offline App</title>

</head>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 56

Web Application Development MMC205

<body>

<h1>You are viewing this offline!</h1>

<script src="[Link]"></script>

</body>

</html>

[Link]

[Link]("App is running!");

[Link] (plaintext)

CACHE MANIFEST

# version 1.0

CACHE:

[Link]

[Link]

NETWORK:

CACHE MANIFEST
# version 1.0
CACHE:
[Link]
[Link]
NETWORK:
*

3. Understand the AppCache File Format

CACHE: section lists files to cache.

NETWORK: defines resources that must come from the network (use * to allow all).

You must change something in the file (like version comment) to force updates.

4. Start the Server and Test

Navigate to: [Link]

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 57

Web Application Development MMC205

Once it's loaded, you can:

Disconnect from the internet.

Refresh the page.

It should still work offline, as the resources are cached.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 58