1

2
3
4
5
6
Single user system computing is an approach that designs an application in such a
way that all the applications and data reside on a single personal computer.

Advantages
The advantages of using a stand-alone system are as follows.
1. A The user of the personal computer has full control over the system.
Eg: If the user is not satisfied with MS-DOS operating system (OS), she can have
Windows OS loaded in the system. If the person is not interested in the Windows
OS then she can load Linux OS, third party applications are widely portable and
usable in such systems. Thus, this serves as a good development environment.
2. Now a days, one can easily obtain powerful machines at a very cheap price.
Disadvantages
One of the major drawbacks in using stand-alone personal computers is that
applications, data and resources, for example, cannot be shared.

7
Host based approach :
Host centric approach is an approach that design an application in such that both the
functional and data components reside and execute on one centralized platform
giving access to multiple users.
Advantages of Host Based approach
1. It is capable of providing simultaneous access to large number of users.
2. These systems are stable, reliable and well supported.
3. Mainframe systems provide a one-stop-shopping which means that all the
components right from hardware, software and network are made available by
one vendor.

Limitation/Disadvantages of Host Based approach

1. Usually, mainframe technologies are proprietary and are incompatible across
multiple vendors.
2. The cost associated with procuring and maintaining these systems are extremely
high.

8
9
NOS – Network Operating System
A NOS is an extension to OS that provides transparent access to resources on a network.
Examples
Novell Netware
UNIX and its variants
Windows NT, Windows 2000 Adv Server and Windows 2003 Adv Server

The main function of the NOS is to provide a transparent environment in the network context.

10
11
12
13
14
Architecture can be layered as

2 Tier Application:
UI and business logic reside on Client and data reside on database server

3 Tier Application:
UI resides in Client business logic resides in business logic server and data in database server

15
16
2Tier Vs 3 Tier
System Administration
2Complex: More logic on the client to manage
3Less Complex: The application can be centrally managed on the server
Security:
2Low : data level security
3High: fine tuned at the service method
Encapsulation of Data
2Low : tables are exposed
3High:Client invokes methods or services
Performance:
2 poor: Many SQL statements are sent over the network ;
3:good :only service requests and responses are sent between the client and server
Scalability:
2 Poor: Limited
3 Excellent : Load can be distributed among many servers
Application Reuse:
2Poor: monolithic application on client
3Excellent: Can reuse services and object

17
18
Web Terminologies
Web Browser: Is a software application to locate and display Web pages. Allows navigation across web
sites and web pages.
Web Content: Usually referred to file based static content. (Ex: HTML, audio, video or image files)
Web site: A website is location using which we can access the collection of pages related to an
individual, company or an organization. The first page is normally referred to as home page.
URL: This is used to identify a resource on a server in the internet
HTTP: is a default protocol used for accessing the web pages
HTML (Hyper Text Markup Language): This is a language to create web pages
Gateway to Non-Web Resources (CGI-Gateway): To generate dynamic content the web server may
need to contact specific programs written in any programming language. The dynamic content can be
generated by passing certain parameters to the program. The program designed for such a purpose is
referred to as CGI program.

19
Overview of the world wide web
A Web server typically serves static content residing on a file system (HTML Pages, images, audio and
video files). Web servers route requests for dynamic content (Non-Web Content) using “Web
Gateways”.

More on the Gateways topic is covered later in this session under the heading “CGI Gateway”.

20
Web Browser Architecture
The controller module controls the operations of the Browser. The trigger for the controller module is
the user’s mouse and keyboard actions. Browsers contain a Network Interface layer, which is used by
all clients in the browser (HTML or any other optional clients) for network services.

The built-in HTTP Client communicates with Web Server using HTTP Protocol. (More on HTTP
Protocol is covered later in this session).

The web browsers are designed to interpret HTML. However, using a Plug-in architecture, they allow
other non-HTTP clients (and non-HTML data) also to be handled by other applications. This is achieved
by interpreting the mime-type of the content sent by the browser. The browsers maintain a mapping
between the mime-types and the applications to be invoked for the respective data type.
For example: PDF files are opened in Adobe Acrobat Reader, video files are opened by Media Player.

21
URL
The Uniform Resource Locator uniquely identifies a particular resource on the internet. The URL
consists of four parts.

1. Protocol: The protocol to be used for communicating with the server

2. Host: The server to connect to (Can be Server in the Local Area Network or Internet)
Domain Name : The top level domain is classified into two.
a. ‘Organizational top-level domains’ which includes com, org,net,mil etc.
b. ‘Geographical Top-level domains’ which includes in, au, ca, de, us, in, uk, etc.
3. Port: Every protocol on the internet operates on a unique tcp/ip port. (Example: HTTP – Port 80).
If port is not explicitly specified in the URL, default port for that protocol is assumed
4. Path: Path of the resource on the server (usually starts with a ‘/’ which is also sometime known as
WEB ROOT)

22
HTML (Hyper Text Markup Language)
The language used for web documents.
A Sample HTML document:
<html>
<head>
<title>Book Enquiry</title>
</head>
<body>
<h2>ABC Books (P) Limited</h2>
<h3>Book: <font color="007F7F"><i>Introduction to Web Servers</i></font></h3>
<table cols=“2” BORDER=“1” CELLSPACING="1">
<tr><td bgcolor="#5FCF3F">Author:</td><td>Infosys</td></tr>
<tr><td bgcolor="#5FCF3F">Publisher:</td><td>Infosys Press</td></tr>
<tr><td bgcolor="#5FCF3F">Price</td><td bgcolor="#CFCFCF">Rs. 150</td></tr>
</table>
</body>
</html>

23
Copy this code to a notepad
Save as “Sample.html” on your windows desktop
Close notepad

Open file “Sample.html” using browser

24
Types of Content
Web Content: Web Content is usually referred to file based content which doesn’t change.
GIF: Stands for Graphic Interchange format. Another popular format which allows animations etc.
JPEG: Highly compressed image format. Specification from Joint Photographic Experts Group (JPEG)
and hence the name.
PNG: Stands for Portable Network Graphics. Successor to JPEG. Provides better compression and some
features which are not provided by JPEG format.

25
The HTTP Protocol
Web Browsers and Web Servers communicated between each other using the Hyper Text transfer
Protocol (HTTP). This allows a variety of clients to communicate with any Vendor’s server without
compatibility problems.
Hyper Text Transfer Protocol is an application level protocol of the TCP/IP suite.

A browser is a HTTP Client (or Web Client) because it sends requests to a HTTP Server.

26
27
Working of a Web Server
A web server is a specialized server, which understands HTTP protocol. A web server in short is a
computer that delivers web pages using HTTP protocol.

1. User invokes a URL in the browser by clicking on a link or typing a URL

(http://my.mydomain.com/test.html)
2. The browser tries to get the IP address of the Domain name from the DNS server
3. The DNS server will try to translate the URL if it is a local server. If it is a server on the internet it
will try and resolve it from the other DNS servers on the internet
4. DNS Server will provide the IP address of the Server for the domain name (In the above example it
is 202.68.33.47)
5. The browser then initiates a connection to the server using the IP address
6. Once connection is established…
7. Browser sends a HTTP Request to the server requesting for the path of the document (/test.html)
8. The Web Server looks in its file system and returns the contents of the requested file
9. The browser parses and renders the content returned (Usually HTML)

28
Client
The Client could be an web browser, handheld devices like mobile,
ATM.

Web Server
The Web Server accepts the request and handles it. It provides an
environment in which the server-side program can execute and pass back the
generated response.

Application Server
The Application Server exposes the business logic to the client
Database Server
The data can be stored in any database server like Oracle, DB2, SQL
Server.

29
Web Technologies
Web browser Client Interface :-
•HTML – Hyper Text Markup Language – has tags which are interpreted by the interpreter and the web content is
displayed in the browser; to display data and to focus on how data looks;
•XHTML – stands for Extensible Hyper Text Transfer Language – the advanced version of HTML recommended by
W3C.
•CSS – stands for Cascading Style Sheets; the style(s) for the HTML elements are defined in the external CSS file and
linked to the HTML file;
XML based :-
•XML – stands for Extensible Markup Language; XML elements describes the data;
•DTD – stands for Document Type Descriptor; defines the structure of the XML document;
•Schema – XML Schema is an XML-based alternative to DTDs.
•XML DOM – stands for XML Document Object Model.
•Web Services – Web Services are self-contained application components which can be accessed by other
applications
•SOAP – stands for Simple Object Access Protocol; It is a communication protocol being used between different
applications; Different applications can exchange information using SOAP
•WSDL – stands for Web Services Description Language; It will describe the available web services and access
methods
•Wireless Client Interfaces :-
•WAP – Wireless Application Protocol.
•WML – stands for Wireless Markup Language; supported by every mobile phone browser around the world.

30
31
32
Overview of www and HTML
• Internet is a communication network linking computers world wide.
• WWW is also known as the web.
• WWW is not a single entity, it is a client-server network that
includes web servers that are designed to deliver files to the
client.
• The web uses the http protocol to transmit data.
• A web site is a collection of files, linked together and saved on the
web server. These files are known as web pages.
• A Browser is an application that allows a user to find, view, hear,
and interact with World Wide Web
• Client utilizes browsers such as Internet Explorer, Netscape
Navigator, Mozilla, Opera etc to access web documents called
web pages.
• First page which is displayed in the web browser when it connects
to the web site is called the home page.( The file name of the
home page is normally index.html or default.html)
• A Web server is the computer program (housed in a computer)
that serves requested HTML pages or files.
• Hypertext Transfer Protocol (HTTP) - The standard language that
computers connected to the World Wide Web use to communicate
with each other.

33
Web Pages are coded in HTML. HTML documents are stored on the web
server and are downloaded as part of a response to a request from the client.
HTML is used to create hypertext documents that are platform independent.
An HTML document is a text file which contains the elements a browser uses
to display text, multimedia objects, and hyperlinks. A hyper link connects one
document to another document. Hyper links in the document can be easily
identified as the color of the link is different from the other text.

It contains codes for the layout and styling tags(e.g

italics,paragraphs,boldface,etc) within a text file. Markup language is entirely
different from programming language.

HTML is derived from SGML(Standard Generalized Markup Language). SGML

is used to define other languages.

World Wide Web, HTML, HTTP and Universal Resource Locators (URLs)
were invented by Tim Berners-Lee. He is now the director of the World Wide
Web Consortium(W3C) the group that sets technical standards for the Web.

34
HTML tags are case insensitive, <html> is equal to <HTML>

HTML using ASCII (plain text) format , hence platform independent

HTML is interpreted by the browser, not like other programming languages.

HTML form elements are used to create a GUI.

34
An HTML file contains markup tags that tell the browser how to display the
page. HTML tags are used to mark the elements of a document for your
browser. These elements could be headings, tables, lists etc. and can contain
plain text, other elements, or both. The tags consist of a left angle bracket (<),
a tag name, and a right angle bracket (>). Tags could be paired (e.g., <H1>
and </H1>) to start and end the tag instruction.

Some tags don't need to have the closing part - these are called empty tags
e.g. <BR> whereas some tags necessarily need to have both the starting and
ending part - these are called container tags e.g. <H3> and </H3>. HTML tags
are case insensitive.

Many HTML tags also have attributes assigned to them. An attribute is an

additional feature you can use to configure the element. For example, <H1>
tag can also have an attribute “ALIGN” assigned to it, so that <H1 ALIGN =
“CENTER”> will generate a center aligned heading. Attributes are optional, can
be used depending on how you want to modify the tag. Attributes always
come in name/value pairs like this: name="value" and are added to the start
tag of an HTML element.

35
HTML is not compiled, instead it’s interpret by the browser.
 Every HTML program or document has a rigid structure. The entire web
page is enclosed within the <HTML> </HTML> tag. Within this tag, two
distinct sections, head and body are created. These sections are as
described below.

Document Head
The text between the <HEAD> tag and the </HEAD> tag is header
information. Header information is not displayed in the browser window, it is
necessary for the internal working of the document. An exception to this is
the <TITLE> </TITLE> tag, which displays the document title in the
browser’s title bar.

Document Body
The <BODY></BODY> tag encloses the body of the HTML document.

Comments
The <!-- --> tag is used to insert a comment in the HTML source code. A
comment will be ignored by the browser. Comments can be used to explain
your code or earmark the areas that need improvement, which can help
you when you edit the source code at a later date.
e.g.: <!-- This is a comment -->

37
Note that you need an exclamation point after the opening bracket, but not
before the closing bracket.
You can easily edit HTML files using a WYSIWYG (what you see is what
you get) editor like FrontPage, Visual Interdev etc. However,
these tools do not generate very optimized HTML code because it may
contain Unnecessary tags.

37
<META> element uses name value pairs to provide meta information about
the document. It often provides descriptive information that is targeted
by search engines. The following are the use of this element,
Ex: .
1. To have your page automatically reloaded every X seconds
<META HTTP-EQUIV="REFRESH" CONTENT=X >
2. To have a different page automatically loaded after X seconds
<META HTTP-EQUIV="REFRESH" CONTENT="X; URL=
http://address/file.html">

3. To specify an expiration date for the page so that it will be reloaded after
a certain date.
<META HTTP-EQUIV="Expires" CONTENT="Mon, 23 Sep 2001
01:21:00 GMT">

4. To specify keywords for certain search services to use.

<META HTTP-EQUIV="Keywords" CONTENT="keyword1, keyword2,
...">

5. To specify a description of your page for certain search services to use

<META HTTP-EQUIV="Description" CONTENT="Describe your site
here....“

<LINK> element is used in linking external CSS which will be discussed in 40

later chapters.
<BODY > tag attributes
BACKGROUND=x.jpg - Specifies an image to be tiled as background.
BGCOLOR=color - Specifies the background color
BGPROPERTIES=FIXED -Fixes the background image so that it doesn't
scroll.
TEXT=color -Specifies the color of text in the page
LINK -Specifies the link color.
ALINK -Specifies the active link color.
VLINK -Specifies the active link color.

RGB Color Components.

Color attribute values give a color definition. Colors are defined using a
hexadecimal
notation for the combination of Red, Green, and Blue color values (RGB).
The lowest value
that can be given to one light source is 0 (hex #00). The highest value is
255 (hex #FF).
A collection of color names like blue, green, cyan etc. are also supported
by most of the
browsers.
<html><head>
<title>Background color</title>
</head><body bgcolor="cyan">
<h1> Contents </h1> 41
</body></html>
44
45
46
47
Alink : refers to the active link
Vlink : refers to the visited link

48
Alink : refers to the active link
Vlink : refers to the visited link

49
Alink : refers to the active link
Vlink : refers to the visited link

50
 Formatting tags are used inside the <BODY> of the document to format your text
This is the largest category of tags and you will be using these tags most
frequently.
<FONT> tag is a physical tag that describes the display attributes of the text
inside.
E.g:
<FONT FACE="Comic Sans MS" SIZE=“2“ COLOR="Red">
This is comical and red and small</FONT><BR>
<!-- <br> tag used for line breaks -->
<FONT FACE="Comic Sans" SIZE="+2" COLOR="Red">
This is red and big. Is it comical?</FONT><BR>
If the font face is not specified correctly or not available in the system , the text will
be displayed in the default font.

In HTML the font size is limited to 1 to 7. In future you can use CSS (Cascading
Style Sheets) for changing the properties.
ie you can have a font with size 10 cm .

51
51
In the above Demo if the “ Face “ attribute value is wrong it will print either the
default or the next face value initialized.

More formatting of the web pages will be done using CSS

In the above Demo if the “ Face “ attribute value is wrong it will print either the
default or the next face value initialized.

More formatting of the web pages will be done using CSS

55
Linking the pages
A link is a unidirectional pointer from a source document that contains
the link to the some destination. Links help the user to navigate
across pages as well as within a page. The text or an image that
provides such link(s) is called hypertext or hyperlink.
Hyperlinks can be created by using a <A> tag, which stands for
anchor and has the following attributes.
• HREF - Hypertext Reference: This attribute points
the link to a bookmark, another file, either within the same webs site
or elsewhere on the internet.
• NAME - Name: The name of the bookmark. This attribute lets
you “bookmark” a location on the web page. An HREF
anchor can point a link to that area on the page.
•TITLE - Displays balloon help in IE
•TARGET - With the target attribute, you can define
where the linked document will be opened.

You can use HREF to point to a URL and allow the reader to view the
page from the beginning. Or, you can use HREF to point to a specific
area of that page, indicated by a NAME bookmark, so that the user
goes straight to that section of the document.

58
In relative links , both the files should be in the same folder. ( linked file and the
linking file )

59
 HTML has many ways to format lists information. Lists actually require two
tags: The list tag itself, and the tag or tags used to define individual list
items. Different types of list formatting available are discussed below.
Unordered Lists
• Unordered lists, are enclosed between the <UL > and </UL > tag.
• Each item starts with the <LI> tag .
• The attribute that can be specified with <UL> tag is
TYPE= DISC will give a solid round black
TYPE= SQUARE will give a solid square black bullet
TYPE= CIRCLE will give a circle black bullet

60
Ordered Lists
An Ordered list starts with a <OL> tag and ends with a </OL> tag.
Each list item starts with the tag <LI>
The attribute that can be set with <OL> are:
TYPE - Controls the numbering scheme to be used
TYPE= “1” will give counting numbers (1, 2, 3….)
TYPE= “A” will give uppercase letters (A, B, C….)
TYPE= “a” will give lowercase letters (a, b, c….)
TYPE= “I” will give uppercase Roman numerals (I, II,
III…..)
TYPE= “i” will give lowercase Roman numerals (i, ii,
iii,……..)
START - Alters the numbering sequence. Can be set to any
value
VALUE - Can be set with the <LI >tag to changes the
numbering sequence in the middle of an ordered list.

<--! HTML CODE for ORDERED LIST-->

<html> <head> <title> ordered listr</title> </head> <body
bgcolor="cyan"> <ol type = "1"> <li> item 1 <li> item 2 <li> item 3
</ol> </body> </html>

61
A definition list is not a list of items. This is a list of terms and explanation of
the terms.
A definition list is a list of terms paired with associated definitions- in other
words, a glossary.

Definition list are enclosed with in <dl> and </dl>

<dt> - Definition term.
<dd> - Data definition.

<--!HTML CODE -->

<html>
<head>
<title>Definition List</title>
</head>
<body bgcolor="cyan"> <dl>
<dt>Java</dt>
<dd>An Object Oriented Language</dd>
<dt>HTML</dt>
<dd>A Markup Language</dd>

62
</dl>
</body>
</html>

62
Tables can be used not only to display tabular data but also to position the
contents of the page
in a more structured manner. The page layout can be controlled very effectively
with tables.
Tables will be defined with the <table> tag.

Note: Tables are used on websites for two major purposes.

1) The primary purpose of arranging information in a table
2) Web pages with layout can be created with the hidden tables. (border attribute
values set to “0”).

The Attributes and it values

ALIGN - Align the table in a web page. (LEFT | RIGHT |
CENTER).
BORDER - the thickness of the border
BGCOLOR - The background color for the table.
CELLPADDING - Specifies the space between the cell wall and
contents .
CELLSPACING - Specifies the space between cell.
WIDTH - Specifies the width of the table

The WIDTH attribute value can be in percent (or) pixels. Pixels are the smallest
logical unit for display. Pixel resolution may be different from one PC to another.
Tables built with percents will 64
occupy that percentage of the browser’s visible area or the container area.
Table structure
Tables are defined with the <TABLE> tag.
It contains rows and columns(<TR> tag for row and <TD> tag for the data cells).
TD stands for “Table Data", which is the content of a data cell. TD can be text,
images, lists, paragraphs, forms, horizontal rules, tables, etc
<TH> specifies the table header cell. It should occur within a<TR> tag. Some
browsers will emphasize the text enclosed by this tag.
INCLUDE <TR> Attributes

65
Table structure
Tables are defined with the <TABLE> tag.
It contains rows and columns(<TR> tag for row and <TD> tag for the data cells).
TD stands for “Table Data", which is the content of a data cell. TD can be text,
images, lists, paragraphs, forms, horizontal rules, tables, etc
<TH> specifies the table header cell. It should occur within a<TR> tag. Some
browsers will emphasize the text enclosed by this tag.
INCLUDE <TR> Attributes

66
The <TD> Attributes.

ALIGN - Defines the horizontal alignment in cells and values can be left,
right, center, justify.
BGCOLOR - Specifies the background color of the table cell.
VALIGN - Specifies the vertical alignment of cell content and values can be
top, iddle, bottom, baseline
WIDTH - Specifies the width of the table cell.( % (or) pixels)
COLSPAN - Indicates the number of columns this cell should span
ROWSPAN - Indicates the number of rows this cell should span

67
The rowspan and colspan attributes.

By adding the rowspan and colspan attributes to the table elements, it is possible
to create data cells
that span a given number of rows or columns.

To set a cell to span three rows use <td rowspan=“3”> and to set a heading to
span two columns,
use <td colspan=“2”>.

Setting the value of colspan and rowspan to more than the number of columns or
rows in the table
Should not extend the size of the table.

68
69
70
Most graphical browsers can display inline images. An Image can be
embedded using the <IMG> tag, which takes the name of the image file as an
attribute. Lists below are some attributes of the image tag.

Web pages require JPG (or) GIF (or) PNG image types. On the web, JPG is
the best choice (smallest file) for photo images, and GIF is common for
graphic images because GIF supports transparent color feature. PNG was
designed recently, but it's appeal is growing as people discover what it can do.
Most of the Browsers can not show BMP images.
JPEG: Joint Photographic Experts Group.
GIF: Graphic Interchange Format.
PNG: Portable Network Graphics Format.

71
Images add a great deal to our web sites; they add value to the description, sometimes
are self-explanatory, liven up the page and do so many other things. However, they
need to be used prudently.

Well, an image can tend to get very large - and this can kill the response time since it
takes a long time to download it especially on dial-up lines! Besides, for every image
on your page, a new request is sent out by the client to the server. So if you have two
images on your page, there will be totally three requests - the first one for the actual
page and the next two for the images. This causes three round trips (request +
response = round trip) to happen - this could also jam the network with the additional
data.

In short use images that add value to the site itself and keep the image sizes as small
as possible.

The width and height attribute of <IMG> tag is used to change the actual size of the
image.

If width and height is different from the actual size of the image, quality of the image
may be degraded.

72
Images can be placed inside the anchor tag (<A> </A>) to make them
clickable images or hyperlinks which the user can follow to link to different
URL’s. The image will be displayed with a border. If border is not required,
then we can create borderless images(BORDER=0 to the IMG tag).

An image map is an image that contains many hyper links that might result in a
different URL being loaded, depending on where the user clicks.

73
Sometimes , special characters need to added within a document, such as
accented letters, copyright symbols, or even the angle brackets . In order to
use such characters in an HTML document, it must be “escaped” by using a
special code. The form is &code;
code – numeric or word of the actual character that has to be placed on the
screen.
Eg:
<h1> All html tags should be inside the &lt;HTML&gt; Tag</h1>

74
A form in HTML is enclosed between the <form> and </form> tags.
A form is an logical area which contains form elements.
The form itself contains regular text, other HTML elements such as
tables, and form elements.
Form elements are used to add text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc in a form. it is used for
connecting the application with the server application.When the user
clicks on the submit button the web browser transmits all the
information from the form elemente to the server and server side
program is invoked.
JSP, ASP, and CGI are some examples of server side programs.

Form data can be manipulated by client side scripts like Javascript

and VBScript.

76
The differences between the two methods of submitting data
GET/POST are

78
summarized below:

GET method.
1) The GET method is the default method for browsers to submit information.
2) GET is easy to deal and fast.
3) All the information form the form is appended at the end of the URL.
4) It is not secure because the data input appears in the URL.
5) Most browsers limit a URL to several thousand characters.

POST method.
1) Used to pass large amount of information to the server.
2) Contents are sent with HTTP request body not with URL.

78
Elements on a form
A form is made up of fields or controls. Form controls include text
fields,
password fields, multiline text fields, scroll lists etc.

All form elements should be enclosed in <form> and </form> tag.

<html>
<body>
<form name=form1>
Name <input type="text" name="nam"><br>
DOB <input type="text" name="dob"><br>
</form>
</body>
</html>

79
Text field.
Text is the default attribute for the <input> element type attribute.
<input name=“t1” value=“ok”> will create a a textbox.
Examples
• <INPUT TYPE=“TEXT" NAME=“txtCustomerName“>
Will create a text box. Since the above statement does not specify
the size of the text field, the maximum no of characters will be 20
by default.
• <INPUT TYPE=“TEXT" NAME=“txtCustomerName“ SIZE =“30” >
creates a text box of size 30 .The user can type any number of
characters.
To restrict the number of characters use attribute MAXLENGTH
• <INPUT TYPE=“TEXT" NAME=“txtCustomerName“ SIZE =“40”
MAXLENGTH =“30”>
Will create a text box of size 40 .The user can type 30 characters.

Password field
The password field are same as the text field, except that the input
to the field is not revealed. All the attributes of the text filed are
applicable to the password field.

80
When it is necessary to enter more than one line of text in a form field
we can use <textarea>
The information enclosed within the <textarea> element must be plain
text and should not include any HTML markup.
Internet explorer will wrap the text by default.
Some old versions of Netscape Browser will not support word wrap.

82
Lists let the user select one choice out of many possible choices. The
SELECT element contains OPTION elements which can be selected
by the user. Its attributes are
•NAME- key value to the server when an option is selected. By
default, the user can only select one option.
•MULTIPLE-allows the user to select multiple values, which are
submitted to server with separate name/value pairs.
•DISABLED-makes the SELECT element unavailable. The user is
unable to edit the disabled selection, no value is submitted with the
form, the SELECT element cannot receive focus, and the element is
skipped when navigating the document by tabbing.
•The SIZE attribute of SELECT displays only the specified number of
options visible at any time. Scroll bar will allow to access any non-
visible options.
•The value enclosed by the OPTION element is submitted to the
server.
•The attribute SELECTED in the OPTION element sets the form
control to select this item by default.
• With the scroll list, it is possible to select multiple items out of a large
group of items. But all items are not presented to the user at once.

83
•If there are a few options to choose from that are not mutually exclusive, it
is probably better to use a group of check boxes that the user can check
off.
• For example, to display a check box whether the user wants the facility of
Internet banking use
<INPUT TYPE="checkbox" NAME=”InternetBanking“ > Internet Banking
In this example, if the checkbox is selected, value InternetBanking =no will
be transmitted to the server.
• Setting a value for the checkbox might make more sense.
<INPUT TYPE="checkbox" NAME=”Facilities“ VALUE= “InternetBanking”>
If the above check box is selected Facilites = InternetBanking will sent to
the server
• It is also possible to have multiple check boxes with the same name.
The code
<INPUT TYPE="checkbox" NAME=”Facilities“ VALUE= “InternetBanking”>
•<INPUT TYPE="checkbox" NAME=”Facilities“ VALUE= “DebitCard”>
•Would send multiple entries like the following to the server when both the
facilities were selected
•Facilities= InternetBanking&Facilities=DebitCard
84
The second mechanism for selection is a set of radio buttons. In a set
of radio buttons only one can be selected at a time - to do this all the
buttons should be given the same value for the NAME attribute.
Which is known as a radio group.
e.g.
<INPUT TYPE=RADIO NAME=rdbAgeGroup VALUE=1>
<INPUT TYPE=RADIO NAME=rdbAgeGroup VALUE=2>.

You can select only one of the two radio buttons. Since they form a
group.

• It is important to set the VALUE attribute for each radio button.

• Value will not be displayed to the user.
•If you are used “Checked” attribute the button will be selected by
default.

85
Hidden Text field
<INPUT TYPE=“hidden” NAME=“userinformation” VALUE =“form1”>
•creates a hidden text field.
•With a hidden text it is possible to transmit default or previously
specified text that is hidden from the user.
•Since the hidden field cannot be modified by the user, its VALUE
attribute must be set.
•This hidden text can be utilized for handling programs.

86
The file control generally consists of a text entry box and a button immediately
to the right of the field.
By clicking the “Browse” button enables the user to browse the local system to
find a file to specify for upload.
To upload a file to the server set the <form> element attribute enctype value as
“multipart/form-data”.

The image control creates a graphical version of submit button, which not only
submits the form but transmits coordinate information about where the user
clicked in the image.
The image is specified by the src attribute.

87
Types buttons
• The Submit button sends the form contents to the server when clicked.
– <Input Type=Submit
Name=cmdSubmit Value
=“Submit”>
• The Reset button : Contrary to popular expectations, it does not clear
the form but resets it to its original state. For e.g. if a textbox started off
with a default value of "Me" and it was subsequently changed to "You"
by the user, clicking on the Reset button will change it back to "Me".
<Input Type=Reset Name=cmdReset
Value="Reset">.

• A button <Input Type=Button Name=cmdAdd

Value=“Click Me">.doesn't do anything when clicked - you have
to write some script (coming up in the next unit) to make it work. Then
why use it at all? There may be times when some action other than
submitting a form needs to be done on a button.

You will learn more about client-side validations in later part of this
course. 88
<html><body>
<form action="" method=post name=form1>
<table border=3 cellpadding=1 cellspacing=1 width="75%">
<tr> <td>enter your name</td>
<td><input name="first_name" value="smith" size="10"
maxlength="15" ></td>
</tr> <tr> <td>enter your password</td>
<td><input name=password1 type=password></td>
</tr> <tr> <td>enter your hobbies</td><td><select name="hobbies"
multiple size="2">
<option value="tr">travel
<option selected>reading
<option>sleeping </select> </td>
</tr> <tr> <td>notify by email</td>
<td><input type="checkbox" name="email" checked></td>
</tr> <tr> <td>output device </td>
<td><input type="radio" name="output" value="screen"> screen
<input type="radio" name="output" value="printer">printer
</td>
</tr> <tr> <td><input type="submit" value="submit query"
name=submit1></td>
<td><input type="reset" value="clear" name=reset1></td>
</tr> <tr> <td>text area</td>
<td><textarea name="feedback" rows =3 cols= 40> default text
goes here 89
</tr>
</table></form></body></html>

89
Frames
With frames, the browser window can be split into separate
sections, showing different but related information.
More than one HTML document can be displayed in the same
browser window. The document is called as a frame, and each
frame can be independent of the others.
Each frame has its own URL, thus one frame can stay visible while
another changes.

The Frameset and Frame Tag:

The <frameset> tag defines how frames can be defined in a
window.
Each Frameset can have number of frames defined by the frame
tag.
The <frame> tag defines what each frames will contain.
The <frameset> requires a mandatory attribute of either COLS or
ROWS that decides the number and size of columns or rows in a
browser window.

The disadvantages of using frames are:

•Printing the contents of the entire page in a frame
•Tacking the no of HTML documents

91
92
Attributes of the FRAMESET/FRAME tag are as given below.
Frameset.
COLS : Defines the no. of frame columns
and their widths.
ROWS : Defines the no. of frame rows
and their heights.
FRAMEBORDER : Defines borders around each
frame, A value of “0” represents invisible border
and a
value of “1” display the border.
FRAMESPACING : Defines the space in pixels
between frames.
SCROLLING : Determines weather scroll bar
should be displayed or not. It can take YES, NO and AUTO values.
Frame.

NAME : Name of the frame.

NORESIZE : Prevents the user from resizing
the frame.
SCROLLING : Control the display of scrollbars.
The value are AUTO (or) NO.
SRC : Specifies the full or
partial URL of the document displayed in a frame.
93
In the example given has two framesets.
The first frameset have two columns one of 40% width and the other of the
remaining width i.e 60% note that it is indicated by a *.
The second frameset set divides the first column into two rows. First row of
width 35% and the second row remaining width i.e. 65% note that it is
indicated by a *.

The HTML document “cell1.htm" is placed into the first row and first column
The HTML document “cell2.htm" is placed into the second row and first
column.
The HTML document “cell3.htm" is placed into the second column.

94
Having made the frame structure, one would also be interested in doing
things like
clicking on something in one frame and having some action in some
other frame. So
here's how to do it. This involves two steps .
1. Ensure frame naming by setting the NAME attribute of the
<FRAME> tag

Value Description

_blank Loads the page into a new window

_self Loads the page over the current frame

_parent Loads the link over the parent frame

_top Loads the link over all the frames in the window.
95
 e.g: <FRAME SRC="HDJ_Page1.htm" NAME="frame1">.
2. TARGET attributes in the <A> tag to specify the target frame where the
page is to be displayed.

Target can be a name of the frame that you specified in the FRAME tag.

95
96
Floating Frames
Up to this point all frames shown have been attached to the sides of the
browser. Another
form of frame, called a floating frame also called as inline frame. These
are used to
create an inline framed region, or window, that acts as any other
embedded object. An
inline frame can be defined by a <IFRAME> tag and may occur
anywhere within the
<BODY> tag. Unlike the <FRAME> element which should occur only
within the
<FRAMESET> element.
The major attributes that can be set here are
• SRC is set to the URL of the file to load,
• HEIGHT and WIDTH are set in pixel or percentage value of the
screen that the floating –frame region should consume.
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 align="center"> Frame </h1>
<iframe name="floatframe1 src="images.html" height=100 width=100
align="left">
It will be displayed only if the browser supports it 97
</iframe>
<p>Floating frame example.
</body>
</html>

97
Floating Frames
Up to this point all frames shown have been attached to the sides of the
browser. Another
form of frame, called a floating frame also called as inline frame. These
are used to
create an inline framed region, or window, that acts as any other
embedded object. An
inline frame can be defined by a <IFRAME> tag and may occur
anywhere within the
<BODY> tag. Unlike the <FRAME> element which should occur only
within the
<FRAMESET> element.
The major attributes that can be set here are
• SRC is set to the URL of the file to load,
• HEIGHT and WIDTH are set in pixel or percentage value of the
screen that the floating –frame region should consume.
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 align="center"> Frame </h1>
<iframe name="floatframe1 src="images.html" height=100 width=100
align="left">
It will be displayed only if the browser supports it 98
</iframe>
<p>Floating frame example.
</body>
</html>

98
99
Headings
HTML has six levels of headings, numbered 1 through 6, with 1 being the
largest.
Headings are typically displayed in larger and/or bolder fonts than normal body
text.
The first heading in each document should be tagged <H1>. The syntax of the
heading
element is: <Hy>Text of heading </Hy> where y is a number between 1 and 6.
HTML automatically adds an extra blank line before and after a heading.

HTML elements permitted within the BODY are classified as either block-level
elements (or) inline elements.
Block-level elements typically contain inline elements and other block-level
elements. Block-level elements usually begin on a new line.

100
Paragraphs
Unlike documents in most word processors, HTML document ignore
multiple spaces, tabs and carriage returns. Word wrapping can happen
any time in your source file and multiple spaces are collated into a
single space. To preserve some text formatting we use the <p> tag
which created paragraphs. Normally the browser places a blank line
before the paragraph

Some elements do not have closing tags (known as empty tag).

<BR> is an empty tag used when you want to end a line, but don't want to
start a new paragraph. The <BR> tag forces a line break wherever you
place it.

e.g. : <P>This <BR> is a para<BR>graph with line breaks</P>

<P> tag has a ALIGN attribute which aligns the paragraph to LEFT,
RIGHT, CENTER or JUSTIFY (justified)

Horizontal rules
The <HR> tag draws a horizontal line across the page. It is useful to
separate different sections of a single page.
Some attributes are
SIZE - Sets the line thickness
WIDTH - Sets the width of the of the line
ALIGN - sets the alignment to LEFT,RIGHT or
CENTER.
101
NOSHADE - renders the bar without surrounding shadow.

101
The following example shows the basic use of the physical text
formatting tags:
<HTML>
<HEAD>
<TITLE> Physical tags </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF“ TEXT =“red”>
<H1 ALIGN ="center"> Physical tags </H1>
<HR>
This is <B> bold </B> <BR>
This is <I> Italic </I> <BR>
This is <U> underline</U> <BR>
This is <TT> Monospaced</TT> <BR>
This is <STRIKE> Strike-through</STRIKE> <BR>
This is <S>Strike-through</S> <BR>
This is <BIG> Big</BIG> <BR>
This is even<BIG><BIG> Bigger </BIG></BIG> <BR>
This is <SMALL> small</SMALL> <BR>
This is even<SMALL><SMALL> smaller</SMALL></SMALL> <BR>
This is <SUP> superscript</SUP> <BR>
This is <SUB> subscript</SUB> <BR>
</BODY>
</HTML>
102
103