Web Tech & Adv Java – UNIT 1

MIIT – 2nd year MCA (HMA)

Unit I: INTRODUCTION TO WEB TECHNOLOGIES:

History of the web, Understanding Web System Architecture, Understanding

3-tier Web Architecture, Overview of HTTP,Introducing HTML document
structure, Creating Headings on a web page, Working with links,Creating a
Paragraph, Working with images (Hot Spots), Working with tables, working with
frames,Introduction to Forms and HTML controls. Inline, External, Internal, Style
class, Multiple styles.

History of the web

The World Wide Web ("WWW", "W3" or simply "the Web") is a global information
medium that users can access via computers connected to the Internet.

Tim Berners-Lee invented the World Wide Web while working at CERN in 1989.
He proposed a "universal linked information system" using several concepts and
technologies, the most fundamental of which was the connections that existed
between information.

He developed the first web server, the first web browser, and a document
formatting protocol, called Hypertext Markup Language (HTML).

After publishing the markup language in 1991, and releasing the browser source
code for public use in 1993, many other web browsers were soon developed,
with Marc Andreessen's Mosaic (later Netscape Navigator), being particularly
easy to use and install, and often credited with sparking the Internet boom of
the 1990s.

It was a graphical browser which ran on several popular office and home
computers, bringing multimedia content to non-technical users by including
images and text on the same page.

Websites for use by the general public began to emerge in 1993–94. This spurred
competition in server and browser software, highlighted in the Browser wars
which was initially dominated by Netscape Navigator and Internet Explorer.

Following the complete removal of commercial restrictions on Internet use by

1995, commercialization of the Web amidst macroeconomic factors led to the
dot-com boom and bust in the late 1990s and early 2000s.

The features of HTML evolved over time, leading to HTML version 2 in 1995,
HTML3 and HTML4 in 1997, and HTML5 in 2014.

1
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

The language was extended with advanced formatting in Cascading Style Sheets
(CSS) and with programming capability by JavaScript.

AJAX programming delivered dynamic content to users, which sparked a new era
in Web design, styled Web 2.0.

The use of social media, becoming common-place in the 2010s, allowed users to
compose multimedia content without programming skills, making the Web
ubiquitous in every-day life.

Understanding Web System Architecture

“For many decades we have been browsing our favorite websites on the internet
and getting a quick response whenever we want… but do you ever try to know
how each part of the application works together and how is the request being
processed behind the scenes?”

When you’re building an application, you need to remember three principles in your
mind…

● From the customer’s point of view, the application shouldn’t be

complicated, it should be pleasing and it should address most of their

problems.

● From a business aspect, your web application should stay aligned with its

product/market fit

● From an engineer’s perspective, the application should be scalable,

functional, and it should be able to bear high traffic loads.

What is Web Application Architecture?

Do you know that there is a difference between websites and web applications?

(you might have thought that both are the same).

The web application is a program that runs on a browser and it has mainly three
formal characteristics.

2
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

● Addresses a particular problem, even if it’s simply finding some

information

● As interactive as a desktop application

● Works with Content Management System.

If we talk about the website then traditionally it’s just a combination of static
pages.

Note: A website becomes a web application when it consists of both static

and dynamic pages

● Web application architecture is a mechanism that gives us a clarification on

how the connection is established between the client and the server.

● It determines how the components in an application communicate with each

other

● In technical terms, when a user makes a request on a website, various

components of the applications, user interfaces, middleware systems,

databases, servers, and the browser interact with each other.

● Web Application Architecture is a framework that ties up this relation together

and maintains the interaction between these components.

How Does The Web Request Work?

Let’s take an example if you want to visit [Link].

● You enter [Link] in your browser:

○ When you type the URL in your web browser and hit enter, the web

browser needs to know the address of the server where the page is

located.

○ So it sends the request to the DNS (Domain Name Server, which is a

storehouse of domain names and their IP addresses ).

3
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

○ After that browser sends the request to the found IP address using the

HTTPS protocol.

○ If you already have visited [Link] earlier from the same browser,

then it will pull the address from the cache.

● The web server processes the request:

○ In the next step, the web server sends the request to the storage area to

locate the page and all data that follows with it.

○ Here the Business logic (also called Domain Logic and Application Logic)

comes in the picture.

○ BL takes the responsibility of routing which means how each piece of

data is accessed.

○ It regulates this workflow specifically for each application. As BL

processes the request, it sends it to storage to locate the looked-for

data.

● You get the response back:

○ When the response travels back, it displays in front of your screen.

○ The web page (graphical interface) for any website which is displayed

on your screen is called the front end of an application.

○ Here you see all the UI and UX components to access the information.

Web Application Three Tier Architecture Layers

Web application architectural patterns are separated into many different layers

or tiers which is called Multi- or Three-Tier Architecture. You can easily replace

and upgrade each layer independently.

4
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Presentation Layer:

● This layer is accessible to the client via a browser and it includes user interface

components and UI process components.

● UI components are built with HTML, CSS, and JavaScript (and its frameworks

or library) where each of them plays a different role in building the user

interface.

Business Layer:

● It is also referred to as a Business Logic or Domain Logic or Application Layer.

5
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

● It accepts the user’s request from the browser, processes it, and regulates the

routes through which the data will be accessed.

● The whole workflow is encoded in this layer.

● You can take the example of booking a hotel on a website. A traveler will go

through a sequence of events to book the hotel room and the whole workflow

will be taken care of by the business logic.

Persistence Layer:

● It is also referred to as a storage or data access layer.

● This layer collects all the data calls and provides access to the persistent

storage of an application.

● The business layer is closely attached to the persistence layer, so the logic

knows which database to talk to and the process of retrieving data becomes

more optimized.

● A server and a database management system software exist in data storage

infrastructure which is used to communicate with the database itself,

applications, and user interfaces to retrieve data and parse it.

● You can store the data in hardware servers or in the cloud.

Some other parts of the web application which are separated from the main layers

that exist in the architecture are…

● Cross-cutting code: This part handles communications, operational

management, and security. It affects all parts of the system but should

never mix with them.

● Third-party integrations: Using third-party APIs we can integrate

payment gateways, social logins, GDSs in travel websites, etc.

6
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Types of Web Application Architecture

1. Single Page Applications:

Today a lot of modern web applications are designed as single-page web

applications that only include the most required elements and information to

generate an intuitive and interactive user experience.

In a single page application, the content or information is updated on the current

page rather than loading a new page from the server for each action performed by

the user.

● The application requests only necessary content details and it prevents

interruptions in the user experience.

● AJAX, Asynchronous JavaScript, and XML are mainly used for page

communication.

● Users can continue the interaction with the page while the contents are

updated on the page (faster interaction).

2. Microservices:

● These are small and lightweight services that execute specific, single

functionality.

● The components in the applications are not dependent on each other, so there

is no need to develop each component using the same programming

language.

● This gives the flexibility to the developers to choose the language or

technology stack of their own choice. It enhances the productivity of the

developers and speeds up the development process.

7
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

3. Serverless Architectures:

● In this approach, developers outsource the server and infrastructure

management from a third-party cloud infrastructure services provider.

● The advantage of this approach is that it allows the application to execute the

required or custom logic without worrying about the infrastructure-related

tasks.

● This approach is mainly preferred by the companies who don’t want to

manage or support the servers and the hardware they have developed the

web application for.

Overview of HTTP

What is HyperText?

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

● Whenever a web user opens their web browser, the user indirectly uses
HTTP.

● It is an application protocol that is used for distributed, collaborative,

hypermedia information systems.

8
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Working of HTTP [HyperText Transfer Protocol]

● First of all, whenever we want to open any website we first open a web
browser. After that we will type the URL of that website (e.g.,
[Link] ).

● This URL is now sent to the Domain Name Server (DNS).

● Then DNS first checks records for this URL in their database, and then
DNS will return the IP address to the web browser corresponding to this
URL. Now the browser is able to send requests to the actual server.

● After the server sends data to the client, the connection will be closed.

● If we want something else from the server we should have to re-establish

the connection between the client and the server.

What is an HTTP Request?

HTTP request is simply termed as the information or data that is needed by

Internet browsers for loading a website. This is simply known as HTTP Request.

9
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

There is some common information that is generally present in all HTTP

requests. These are mentioned below.

● HTTP Version

● URL

● HTTP Method

● HTTP Request Headers

● HTTP Body

HTTP Request Headers

HTTP Request Headers generally store information in the form of key-value and
must be present in each HTTP Request. The use of this Request Header is to
provide core information about the client’s information, etc.

HTTP Request Body

HTTP Request Body simply contains the information that has to be transferred.
HTTP Request has the information or data to be sent to these browsers.

HTTP Method

HTTP Methods are simply HTTP Verb. In spite of being present so many HTTP
Methods, the most common HTTP Methods are HTTP GET and HTTP POST.
These two are generally used in HTTP cases. In HTTP GET, the information is
received in the form of a website.

What is HTTP Response?

HTTP Response is simply the answer to what a Server gets when the request is
raised. There are various things contained in HTTP Response, some of them are
listed below.

● HTTP Status Code

● HTTP Headers

● HTTP Body

10
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

HTTP Response Headers

HTTP Response headers are simply like an HTTP Request where it has that work
to send some important files and data to the HTTP Response Body.

HTTP Response Body

HTTP Responses are the responses that are received successfully upon the
request. Generally, it comes under the requests generated by the web. In most
cases, the request is to transfer the HTML data into a webpage.

What is an HTTP Status Code?

HTTP Status Codes are the 3-digit codes that tell the message or simply tell us
about the HTTP Request whether it has been completed or not. There are simply
5 types of status codes.

● Informational responses (100–199)

● Successful responses (200–299)

● Redirects (300–399)

11
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

● Client errors (400–499)

● Server errors (500–599)

Introducing HTML document structure

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

● The <!DOCTYPE html> declaration defines that this document is an HTML5

document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML page
● The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
● The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
● The <h1> element defines a large heading
● The <p> element defines a paragraph

12
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Creating Headings on a web page

HTML headings are titles or subtitles that you want to display on a

webpage.

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

13
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

● HTML headings are defined with the <h1> to <h6> tags.

● <h1> defines the most important heading. <h6> defines the least
important heading.

Bigger Headings

<h1 style="font-size:60px;">Heading 1</h1>

HTML - The Head Element

The HTML <head> element is a container for the following

elements: <title>, <style>, <meta>, <link>, <script>, and <base>.

title:

<head>
<title>A Meaningful Page Title</title>
</head>

style:

<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>

14
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Link:

<head>
<link rel="stylesheet" href="[Link]">
</head>

meta:

<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
</head>

15
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

script:

The <script> element is used to define client-side JavaScripts.

<script>
function myFunction() {
[Link]("demo").innerHTML = "Hello
JavaScript!";
}
</script>

Base:

The <base> element specifies the base URL and/or target for all relative
URLs in a page.

The <base> tag must have either an href or a target attribute present, or
both.

There can only be one single <base> element in a document

Example:

<head>
<base href="[Link] target="_blank">
</head>

<body>
<img src="images/[Link]" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

Working with HTML links

● HTML links are hyperlinks.

● You can click on a link and jump to another document.
● When you move the mouse over a link, the mouse arrow will turn into a
little hand

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

16
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Example

<!DOCTYPE html>
<html>
<body>

<h1>HTML Links</h1>
<p><a href="[Link] [Link]!</a></p>

</body>
</html>

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

● _self - Default. Opens the document in the same window/tab as it was

clicked
● _blank - Opens the document in a new window or tab
● _parent - Opens the document in the parent frame
● _top - Opens the document in the full body of the window

Example:

<a href="[Link] target="_blank">Visit W3Schools!</a>

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href
attribute.

A local link (a link to a page within the same website) is specified with a relative
URL (without the "[Link] part):

17
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

<h2>Absolute URLs</h2>

<p><a href="[Link]

<p><a href="[Link]

<h2>Relative URLs</h2>

<p><a href="html_images.asp">HTML Images</a></p>

<p><a href="/css/[Link]">CSS Tutorial</a></p>

HTML Links - Use an Image as a Link

<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Link to an Email Address

<a href="[Link] email</a>

Button as a Link

<button onclick="[Link]='[Link]'">HTML Tutorial</button>

Link Titles

<a href="[Link] title="Go to W3Schools HTML

section">Visit our HTML Tutorial</a>

Creating a Paragraph

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically

add some white space (a margin) before and after a paragraph.

Example:

<!DOCTYPE html>

<html>

18
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

<body>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

</body>

</html>

Output:

This is a paragraph.

This is a paragraph.

This is a paragraph.

HTML Display

● You cannot be sure how HTML will be displayed.

● Large or small screens, and resized windows will create different
results.
● With HTML, you cannot change the display by adding extra spaces or
extra lines in your HTML code.
● The browser will automatically remove any extra spaces and lines
when the page is displayed:

Example:

<p>

This paragraph

contains a lot of spaces

in the source code,

but the browser

ignores it.

</p>

19
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Working with images (Hot Spots) - Image Maps

● With HTML image maps, you can create clickable areas on an

image.

Image Maps

The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>

<p>Click on the computer, the phone, or the cup of coffee to go to a new

page and read more about the topic:</p>

<img src="[Link]" alt="Workplace" usemap="#workmap"

width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="[Link]">

<area shape="rect" coords="290,172,333,250" alt="Phone"

href="[Link]">

<area shape="circle" coords="337,300,44" alt="Cup of coffee"

href="[Link]">

</map>

</body>
</html>

How Does it Work?

The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that
describes the clickable areas.

20
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

The Image

The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:

<img src="[Link]" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.

Create Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the
image by using the required name attribute:

<map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute.

The Areas

Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, and you can choose one of
these values:

● rect - defines a rectangular region

● circle - defines a circular region
● poly - defines a polygonal region
● default - defines the entire region

You must also define some coordinates to be able to place the clickable area
onto the image.

21
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Shape="rect"

The coordinates for shape="rect" come in pairs, one for the x-axis and one
for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44
pixels from the top:

The coordinates 270,350 is located 270 pixels from the left margin and 350
pixels from the top:

22
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Working with tables

What is HTML Tables?

An HTML Table is an arrangement of data in rows and columns in
tabular format. Tables are useful for various tasks, such as presenting text
information and numerical data. A table is a useful tool for quickly and
easily finding connections between different types of data. Tables are also
used to create databases.

Tags used in HTML Tables

23
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Defining Tables in HTML

An HTML table is defined with the “table” tag. Each table row is defined
with the “tr” tag. A table header is defined with the “th” tag. By default,
table headings are bold and centered. A table data/cell is defined with the
“td” tag.

Table Cells

Table Cell are the building blocks for defining the Table. It is denoted with
<td> as a start tag & </td> as a end tag.

Table Rows

The rows can be formed with the help of combination of Table Cells. It is
denoted by <tr> and </tr> tag as a start & end tags.

24
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Table Headers

The Headers are generally use to provide the Heading. The Table Headers
can also be used to add the heading to the Table. This contains the <th> &
</th> tags.

Example 1: Creating a simple table in HTML using a table tag.

25
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Adding a border to an HTML Table

A border is set using the CSS border property. If you do not specify a
border for the table, it will be displayed without borders.

Example: Addition of the border to the HTML Table.

26
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

27
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Adding Collapsed Borders in an HTML Table

For borders to collapse into one border, add the CSS border-collapse
property.

Example: Addition of Collapsed Borders in HTML.

28
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

29
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Adding Cell Padding in an HTML Table

Cell padding specifies the space between the cell content and its borders.
If we do not specify a padding, the table cells will be displayed without
padding.

Example: Addition of Table cell padding in HTML.

30
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

31
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Adding Border Spacing in an HTML Table

Border spacing specifies the space between the cells. To set the
border-spacing for a table, we must use the CSS border-spacing property.

Example: Explains the border space property to make the space between
the Table cells.

32
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

33
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

34
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Adding Cells that Span Many Columns in HTML

Tables
To make a cell span more than one column, we must use the colspan
attribute.
Example: Use of colspan attribute in HTML.

35
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Adding Cells that span many rows in HTML Tables

To make a cell span more than one row, we must use the rowspan
attribute.
Example: Use of the rowspan attribute in HTML.

36
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

37
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Adding a Caption in an HTML Table

To add a caption to a table, we must use the “caption” tag.

Syntax

38
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

39
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

40
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Adding a Background Colour to the Table

A color can be added as a background in an HTML table using the
“background-color” option.

Example: Addition of the Table background color in HTML.

41
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

42
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

43
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

44
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Creating Nested Tables

Nesting tables simply means making a Table inside another Table. Nesting
tables can lead to complex tables layouts, which are visually interesting
and have the potential of introducing errors.
Example: Nesting of HTML Table.

45
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

46
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

HTML - Frames

HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document independently. A
collection of frames in the browser window is known as a frameset. The
window is divided into frames in a similar way the tables are organized: into
rows and columns.

[Link]

<html>
<head>
<title>Frames</title>
</head>
<frameset cols="50% ,50%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
<noframes></noframes>
</html>

47
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

[Link]

<html>
<head>
<title>Frames</title>
</head>
<body>
<h1 align="center">Frame 1</h1>
<h4 align="center">This is Frame 1</h4>
</body>
</html>

[Link]

<html>
<head>
<title>Frames</title>
</head>
<body>
<h1 align="center">Frame 2</h1>
<h4 align="center">This is Frame 2</h4>
</body>
</html>

[Link]

<html>
<head>
<title>Frames</title>
</head>
<body>
<h1 align="center">Frame 3</h1>
<h4 align="center">This is Frame 3</h4>
</body>
</html>

[Link]

<html>
<head>
<title>Frames</title>
</head>
<frameset rows="33%,33%,33%">
<frame src="[Link]">

48
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

<frame src="[Link]">
<frame src="[Link]">
</frameset>
<noframes></noframes>
</html>

[Link]

<html>
<head>
<title>Frames</title>
</head>
<frameset cols="33%,33%,33%">
<frame src="[Link]">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
<noframes></noframes>
</html>

49
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

frame_border_thickness.html

<html>
<head>
<title>Frames</title>
</head>
<frameset cols="33%,33%,33%" frameborder="1" framespacing="10">
<frame src="[Link]">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
<noframes></noframes>
</html>

50
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Introduction to Forms and HTML controls

The basic purpose of an html form is to allow user to enter the data on
one end and then send the data on other end through webserver.

Creating html forms

<html>
<head>
<title>
Creating HTML Form
</title
</head>
<body>
<form>
First Name:
<input type="text" name="firstname">
<br>
Last Name:
<input type="text" name="lastname">
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

51
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Form with action url:

<html>
<head>
<title>
Creating HTML Form
</title
</head>
<body>
<form action="[Link]" method="post">
First Name:
<input type="text" name="firstname">
<br>
Last Name:
<input type="text" name="lastname">
<br>
<input type="submit" value="SUBMIT">
</form>
<p>
If you click the <b><u>"SUBMIT"</u></b> button you will be redirected
to the
<b><u>[Link]</u></b> page.
</p>
</body>
</html>

52
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

USING HTML CONTROLS:

USING INPUT TAGS TO ADD CONTROLS

ADDING TEXT FIELD TO THE FORM:

<html>
<head>
<title>
Adding Text Field

53
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

</title>
</head>
<body>
<form action="">
First name:
<input type="text" name="firstname" size="30" />
<br />
Last name:
<input type="text" name="lastname" size="30" />
</form>
</body>
</html>

ADDING BUTTON:

<html>
<head>
<title>
Adding Button
</title>
</head>
<body>
<form action="">
<input type="button" value="Hello World!">
</form>
</body>
</html>

54
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

ADDING CHECKBOX:

<html>
<head>
<title>
Adding Check Box
</title>
</head>
<body>
<form action="">
<b>I love reading:</b>
<input type="checkbox" name="hobby" value="books">
</br>
<b>I love playing:</b>
<input type="checkbox" name="hobby" value="play" checked>
</br>
<b>I love driving:</b>
<input type="checkbox" name="hobby" value="drive">
</form>
</body>
</html>

ADDING RADIO BUTTON:

<html>
<head>
<title>
Adding Radio Button
</title>
</head>
<body>
<form action="">

55
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

YES:
<input type="radio" name="poll" value="yes"/>
</br>
NO:
<input type="radio" name="poll" value="no"/>
</form>
</body>
</html>

ADDING SUBMIT BUTTON:

<html>
<head>
<title>
Adding a Submit Button
</title>
</head>
<body>
<form action="[Link]" method="post">
First Name:
<input type="text" name="Enter your name">
<br>
Last Name:
<input type="password" name="Password">
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

56
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

ADDING RESET BUTTON

<html>
<head>
<title>
Adding Reset Button
</title>
</head>
<body>
<form action="[Link]" method="post">
User Name:
<input type="text" size="30"/>
</br>
Password:
<input type="password" size="30"/>
</br>
<input type="submit" Value="SUBMIT">
<input type="reset">
</form>
</body>
</html>

ADDING A TEXT AREA:

<html>
<head>
<title>
Adding Textarea
</title>
</head>
<body>

57
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

<form>
<textarea rows="10" cols="30">
This is an example of text area on the Web page. A user can input text
in this
area.
</textarea>
</form>
</body>
</html>

ADDING SELECTION CONTROL:

<html>
<head>
<title>
Adding a Selection Control
</title>
</head>
<body>
<form>
<select>
<optgroup label="General hobby">
<option value ="playing">Playing</option>
<option value ="music">Music</option>
</optgroup>
<optgroup label="Educational hobby">
<option value ="stamp collection">Stamp Collection</option>
<option value ="reading">Reading</option>

58
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

</optgroup>
</select>
</form>
</body>
</html>

ADDING MULTIPLE SELECTION CONTROL

<html>
<head>
<title>
Adding a Selection Control
</title>
</head>
<body>
<form>
<select MULTIPLE>
<optgroup label="General hobby">
<option value ="playing">Playing</option>
<option value ="music">Music</option>
</optgroup>
<optgroup label="Educational hobby">
<option value ="stamp collection">Stamp Collection</option>
<option value ="reading">Reading</option>
</optgroup>
</select>
</form>
</body>
</html>

59
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Inline, External, Internal, Style class, Multiple styles

Inline Style Sheets:

<html>
<head>
<title>Inline Styles</title>
</head>
<body>
<table border="1">
<caption><h2>Student Details</h2></caption>
<th style="background-color: #800000">Name</th>
<th style="background-color: #800000">Date of Birth</th>
<th style="background-color: #800000">Address</th>
<tr>
<td style="background-color: #808080">Sumit Saxena</td>
<td style="background-color: #808080">15-03- 1983</td>
<td style="background-color: #808080">Flat No.303, Shipra
Suncity,
Ghaziabad</td>
</tr>
<tr>
<td style="background-color: #008000">Amitabh Kumar</td>
<td style="background-color: #008000">22-02- 1984</td>
<td style="background-color: #008000">[Link]- 125, Kalkaji,
Delhi</td>
</tr>
<tr>
<td style="background-color: #00ff00">Rohit Jandial</td>
<td style="background-color: #00ff00">05-07- 1983</td>
<td style="background-color: #00ff00">Flat No- 324, South Ext,
Delhi</td>
</tr>
<tr>
<td style="background-color: #808000">Avantika Srivastava</td>
<td style="background-color: #808000">10-12- 1984</td>
<td style="background-color: #808000">[Link]-541, Vikas Puri,
Delhi</td>
</tr>

60
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

</table>
</body>
</html>

Output:

Internal Style Sheets:

<html>
<head>
<title>Internal Style Sheets</title>
<style type="text/css">
body
{background-color:#f0f8ff; font-family:Arial}
a:link {color: #808080}
a:visited {color: #ffff00}
a:hover {color: #00ff00}
a:active {color: #ff0000}
</style>
</head>
<body>
<h1>Internal Style Sheet Example</h1>
<a href= [Link] target="_blank">
<h2>Page 1</h2>
<a href= [Link] target="_blank">
<h2>Page 2</h2>
</body>
</html>

61
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

External Style Sheet:

external_style.css
<html>
<head>
<title>External Style Sheets</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>External Style Sheet Example</h1>
<a href= [Link] target="_blank">
<h2>Page 1</h2>
<a href= [Link] target="_blank">
<h2>Page 2</h2>
</body>
</html>

[Link]

body{background-color:#f0f8ff; font-family: Arial}

a:link {color: #808080}
a:visited {color: #0000ff}
a:hover {color: #00ff00}
a:active {color: #ff0000}

62
 Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

Multiple Style Sheets:

<html>
<head>
<title>Multiple Style Sheets</title>
<link rel="stylesheet" type="text/css" href="[Link]">
<link rel="stylesheet" type="text/css" href="[Link]">
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Multiple Style Sheet Example</h1>
<a href= [Link] target="_blank">
<h2>Page 1</h2>
<a href= [Link] target="_blank">
<h2>Page 2</h2>
</body>
</html>

63
Web Tech & Adv Java – UNIT 1
MIIT – 2nd year MCA (HMA)

64