UNIT 1 NOTES

Internet

A worldwide system are interconnected networks and computers.

The Internet is the global system of interconnected computer networks that use
the Internet protocol suite(TCP/IP) to link devices worldwide.

HSTORY OF INTERNET

The Internet had its roots during the 1960's as a project of the United States government's
Department of Defense, to create a non-centralized network. This project was called
ARPANET (Advanced Research Projects Agency Network), created by the Pentagon's
Advanced Research Projects Agency established in 1969 to provide a secure and
survivable communications network for organizations engaged in defense-related
research.

In order to make the network more global a new sophisticated and standard protocol was
needed. They developed IP (Internet Protocol) technology which defined how
electronic messages were packaged, addressed, and sent over the network.

The standard protocol was invented in 1977 and was called TCP/IP (Transmission
Control Protocol/Internet Protocol).

TCP/IP allowed users to link various branches of other complex networks directly to the
ARPANET, which soon came to be called the Internet.

World Wide Web

The World Wide Web ("WWW" or simply the "Web") is a global information medium
which users can read and write via computers connected to the Internet.

WWW is a system of interlinked hypertext documents accessed via the internet with a
web browser, a user views web pages that may contain text, images and other multimedia
and navigates between them using hyperlinks.

History of WWW

Sir Tim Berners-Lee invented the World Wide Web in 1989.

19801991: Invention and implementation of the Web

19921995: Growth of the Web

19961998: Commercialization of the Web

By 1998 there were 750,000 commercial sites on the world wide web.
Search engine

A program that searches for and identifies items in a database that correspond to
keywords or characters specified by the user, used especially for finding particular sites
on the World Wide Web.

Top search engines

1. Google

2. Bing

3. Yahoo

4. Ask.com

5. AOL.com

E-mail and its Protocols

E-mail Protocols are set of rules that help the client to properly transmit the information
to or from the mail server. Here in this tutorial, we will discuss various protocols such
as SMTP, POP, and IMAP.

1. SMTP stands for Simple Mail Transfer Protocol. It was first proposed in 1982. It is
a standard protocol used for sending e-mail efficiently and reliably over the internet.

SMTP is application level protocol.

SMTP is connection oriented protocol.

SMTP is text based protocol.

It handles exchange of messages between e-mail servers over TCP/IP network.

2. IMAP stands for Internet Mail Access Protocol.

Internet Message Access Protocol (IMAP) is an Internet standard protocol used by
e-mail clients to retrieve e-mail messages from a mail server over a TCP/IP
connection.
3. Post Office Protocol (POP) is an application-layer Internet standard protocol used
by local e-mail clients to retrieve e-mail from a remote server over a TCP/IP
connection.
POP has been developed through several versions, with version 3 (POP3) being the
current standard
Web browser

A browser is a software application used to locate, retrieve and display content on

the World Wide Web, including Web pages, images, video and other files.
As a client/server model, the browser is the client run on a computer that contacts the
Web server and requests information.
The Web server sends the information back to the Web browser which displays the results
on the computer or other Internet-enabled device that supports a browser.
The two most popular browsers are Microsoft Internet Explorer and Firefox. Other major
browsers include Google Chrome, Apple Safari and Opera.

Primary functions of the Web browsers

Web browser functions are to provide the resources or information to the user when asked
by them.

It processes the user inputs in the form of URL like http://www.google.com in the
browser and allows the access to that page.

It allows the user to interact with the web pages and dynamic content like surveys, forms,
etc.

It also allows the user to navigate through the complete web page and see its source code
in the HTML format.

Newsgroup

A newsgroup is an Internet-based discussion about a particular topic.

Users post messages to a news server which then sends them to a bunch of other
participating servers. Then other users can access the newsgroup and read the postings.

To participate in a newsgroup, you must subscribe to it.

Examples:

comp

Computer-related topics.

humanities

Topics related to the humanities (fine arts, literature, philosophy, Classical Latin, etc.).

misc

Miscellaneous topics. Examples include:

misc.legal.moderated A moderated legal forum.

misc.taxes.moderated A moderated professional tax forum open to the general public.

 news

Matters related to the functioning of Usenet itself.

sci

Science-related topics.

URL

URL is an acronym for Uniform Resource Locator and is a reference (an address) to a
resource on the Internet.

A URL has two main components: Protocol identifier: For the URL http://example.com ,
the protocol identifier is http . Resource name: For the URL http://example.com , the
resource name is example.com .

Web Portal

A Web portal is a specially designed website that often serves as the single point of access
for information.

It can also be considered a library of personalized and categorized content.

A Web portal helps in search navigation, personalization, notification and information

integration, and often provides features like task management, collaboration, and
business intelligence and application integration.

Web portals are also known simply as portals.

Domain name

Domain names function on the Internet in a manner similar to a physical address in the
physical world.

Each part of the domain name provides specific information.

Domain names are used in URLs to identify particular Web pages. For example, in the
URL http://iitmjp.ac.in/index.php, the domain name is iitmjp.

Example:

gov - Government agencies

edu - Educational institutions

org - Organizations (nonprofit)

mil - Military

com - commercial business

net - Network organizations

 HTML Notes

HTML stands for Hyper Text Markup Language. An HTML file is a text file containing markup tags. The
markup tags tell the Web browser how to display the page. An HTML file must have an htm or html file
extension. An HTML file can be created using a simple text editor. The rule-making body of the Web is
World Wide Web Consortium (W3C). W3C puts together specifications for Web standards. The most
essential Web standards are HTML, CSS and XML. The latest HTML standard is XHTML 1.0.

Example: Creating a simple web page

1. Start Notepad.
2. Type in the following text

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is a very basic webpage. <b>This text will be displayed in bold</b>
</body>
</html>

3. Save the file as "firstpage.html".

4. Double click the saved file the browser will display the page.

Example Explained:

The first tag in your HTML document is <html>. This tag tells your browser that this is the start
of an HTML document. The last tag in your document is </html>. This tag tells your browser
that this is the end of the HTML document.

The text between the <head> tag and the </head> tag is header information. Header information
is not displayed in the browser window.

The text between the <title> tags is the title of your document. The title is displayed in your
browser's caption.

The text between the <body> tags is the text that will be displayed in your browser.

The text between the <b> and </b> tags will be displayed in a bold font.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. HTM is a file extension
for HTML (Hypertext Markup Language) file format. The HTML file extension is sometimes abbreviated as
.htm for compatibility with older operating systems, such as Disk Operating System (DOS), Windows 3.x
and OS/2., which support eight character file names with a three character extension..

HTML Tags
1. HTML tags are used to mark-up HTML elements
2. HTML tags are surrounded by the two characters < and >

3. The surrounding characters are called angle brackets

4. HTML tags normally come in pairs like <b> and </b>

5. The first tag in a pair is the start tag, the second tag is the end tag

6. The text between the start and end tags is the element content

7. HTML tags are not case sensitive, <b> means the same as <B>

Use Lowercase Tags?

We have just said that HTML tags are not case sensitive: <B> means the same as <b>. It is
recommended to always use because

If you want to prepare yourself for the next generations of HTML, you should start using
lowercase tags. The World Wide Web Consortium recommends lowercase tags in
their HTML 4 recommendation, and XHTML (the next generation HTML) demands
lowercase tags.

Tags can have attributes. Attributes can provide additional information about the HTML elements on
your page.

This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute,
you can tell the browser that the background color of your page should be red, like this: <body
bgcolor="red">.

Attributes always come in name/value pairs like this: name="value".

Attributes are always added to the start tag of an HTML element.

Quote Styles, "red" or 'red'?

Attribute values should always be enclosed in quotes. Double style quotes are the most common,
but single style quotes are also allowed. In some rare situations, like when the attribute value
itself contains quotes, it is necessary to use single quotes:

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines
the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading.

Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>

<p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks

The <br> tag is 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.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help you when
you edit the source code at a later date.

<!-- This is a comment -->

Note: that you need an exclamation point after the opening bracket, but not before the closing
bracket.

Text Formatting Tags

Tag Description

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the
start of an HTML tag. If we want the browser to actually display these characters we must insert
character entities in the HTML source.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number,
and finally a semicolon (;).

To display a less than sign in an HTML document we must write: &lt; or &#60;

The advantage of using a name instead of a number is that a name is easier to remember. The
disadvantage is that not all browsers support the newest entity names, while the support for entity
numbers is very good in almost all browsers.

Note that the entities are case sensitive.

Non-breaking Space
The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9
of them. To add spaces to your text, use the &nbsp; character entity.
 Most Common Character Entities
Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

" quotation mark &quot; &#34;

' apostrophe &apos; (does not work in IE) &#39;

Additional Commonly Used Character Entities

Result Description Entity Name Entity Number

cent &cent; &#162;

pound &pound; &#163;

yen &yen; &#165;

section &sect; &#167;

copyright &copy; &#169;

registered trademark &reg; &#174;

multiplication &times; &#215;

division &divide; &#247;

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a
movie, etc.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link, the href attribute is used to address the document
to link to, and the words between the open and close of the anchor tag will be displayed as a
hyperlink.

This anchor defines a link to EEE 111 webpage:

<a href="http://www.google.com">Visit google</a>

The line above will look like this in a browser:

Visit google

The Target Attribute

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

<a href="http://www.google.com" target="_blank"> Visit google</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create
links that can jump directly into a specific section on a page, instead of letting the user scroll
around to find what he/she is looking for.

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you
care to use.

The line below defines a named anchor:

<a href="#down">Bottom of the page</a>

You should notice that a named anchor is not displayed in a special way.

To link directly to the "down" section, add a # sign and the name of the anchor to the end of a
URL, like this:

<a href="http://www.iitmjp.ac.in#down">Jump to down section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "firstpage.html" will look like this:

<a name="down">Down is here</a>

IMG Tag
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not used in HTML image element.

<img src="good_morning.jpg" alt="Good Morning Friends"/>

Attributes of img tag

All attributes of HTML image tag are given below.

1) src : It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server. The location of image may be on the same
directory or another server.

2) alt : The alt attribute defines an alternate text for the image, if it can't be displayed.

3) width : It is an optional attribute which is used to specify the width to display the image.

4) height : It specifies the height of the image.

Marquee Tag

The HTML <marquee> tag is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web site page depending on the settings.

Example:

<marquee>This is basic example of marquee</marquee>

basefont tag
The HTML <basefont> tag is used to specify a base font for the document to use. This base font
is applied to complete document. This tag is depreciated now.
Attribute of basefont are: color, size, face.
Syntax:
<basefont color="red" size="5 face=Arial Black>
Example
<html>
<head>
<basefont color="red" size="5">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>The basefont element is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each
row is divided into data cells (with the <td> tag). The letters td stands for "table data,"
which is the content of a data cell. A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders.
Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:

Heading Another Heading

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the
border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders
visible:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>
How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1

Table Tags
Tag Description

<table> Defines a table

<th> Defines a table header

<tr> Defines a table row

<td> Defines a table cell

<caption> Defines a table caption

<colgroup> Defines groups of table columns

<col> Defines the attribute values for one or more columns in a table

<thead> Defines a table head

<tbody> Defines a table body

<tfoot> Defines a table footer

Code:

<table border=3>

<tr>
 <th colspan=6>IP University Courses</th>

</tr>

<tr>

<th colspan=3>Graduate</th>

<th colspan=3>Post Graduate</th>

</tr>

<tr>

<th>BBA</th>

<th>BCA</th>

<th>B.Tech</th>

<th>MBA</th>

<th>MCA</th>

<th>M.Tech</th>

</tr>

<tr>

<td>240</td>

<td>120</td>

<td>100</td>

<td>200</td>

<td>100</td>

<td>80</td>

</tr>

</table>

HTML supports ordered, unordered and definition lists

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black
circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:

Coffee
Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:

1. Coffee
2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms.

A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each
definition-list definition starts with the <dd> tag.

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Here is how it looks in a browser:

Coffee

Black hot drink

Milk

White cold drink

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images,
links, other lists, etc.

List Tags
Tag Description

<ol> Defines an ordered list

<ul> Defines an unordered list

<li> Defines a list item

<dl> Defines a definition list

<dt> Defines a definition term

<dd> Defines a definition description

Image Map

The HTML and XHTML standards provide a feature that lets you embed many different links inside the
same image. Clicking different areas of the image causes the browser to link to different target
documents. Such mouse-sensitive images known as image maps.

There are two ways to create image maps:

server-side image maps: Here you simply put your image inside a hyper link and
use ismap attribute which makes it special image and when the user clicks some place within the
image, the browser passes the coordinates of the mouse pointer along with the URL specified in
the <a> tag to the web server.

client-side image maps: is created with the usemap attribute for the <img> tag, along with
corresponding <map> and <area> tags

Example of server side image map

<html>

<body>

<a href=hello.php">
 <img src=image.gif" alt=image" width="100" height="132" ismap>

</a>

<p>Click the image, and the click coordinates will be sent to the server as a URL query string.</p>

</body>

</html>

Client side image map

Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by
special <map> and <area> extension tags.
The image that is going to form the map is inserted into the page using the <img /> tag as a
normal image, except it carries an extra attribute called usemap. The value of the usemap
attribute is the value which will be used in a <map> tag to link map and image tags.
The <map> along with <area> tags define all the image coordinates and corresponding links.
The <area> tag inside the map tag, specifies the shape and the coordinates to define the
boundaries of each clickable hotspot available on the image.

Example:

<html>

<body>

<img src="" alt="" usemap=#mypic">

<map name="mypic">

<area shape="rect" coords="x1,y1,x2,y2" href="xyz.html" alt="xyz">

<area shape="circle" coords="x1,y1,radius" href="abc.html" alt="abc">

<area shape="polygon" coords="x1,y1,x2,y2,....xn,yn" href="lmn.html" alt="lmn">

</area>

</body>

</html>

DIV tag

The HTML <div> tag is used to group the large section of HTML elements together.

This is the very important block level tag which plays a big role in grouping various other HTML tags and
applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we
define different parts ( Left, Right, Top etc) of the page using <div> tag.
Adding sound file in HTML Page

Before HTML5, audio files could only be played in a browser with a plug-in (like flash).
The HTML5 <audio> element specifies a standard way to embed audio in a web page.
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.
Example:

<audio controls>

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.
</audio>

HTML frames

HTML frames are used to divide your browser window into multiple sections where each section
can load a separate HTML document.
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.

Creating Frames using <frameset>

The <frameset> tag defines a frameset.

The <frameset> element holds one or more <frame>elements.
Each <frame> element can hold a separate document.
To use frames on a page we use <frameset> tag instead of <body> tag.
The <frameset> tag defines how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical
frames.
Frame Tag
frame is indicated by <frame>tag and it defines which HTML document shall open into the frame.

<iframe> Tag

The <iframe> tag defines a rectangular region within the document in which the browser can display a
separate document, including scrollbars and borders. The src attribute is used to specify the URL of the
document that occupies the inline frame.

<noframe> tag

NOFRAMES element to provide alternate content for user agents that do not support frames or are
configured not to display frames.

Example

<html>

<head>

<title>HTML Frames</title>

</head>

<frameset rows="10%,80%,10%">

<frame name="top" src="top_frame.htm" />

<frame name="main" src="main_frame.htm" />

<frame name="bottom" src="bottom_frame.htm" />

<noframes>

<body>

Your browser does not support frames.

</body>

</noframes>

</frameset>

</html>
Attributes of frame tag

Src= indicate the URL of the document to be loaded into the frame.
Name= Gives the frame a unique name.
Scrolling= controls the appearance of horizontal and vertical scrollbars in a frame. This takes the
value yes/no/auto.
noresize= By default you can resize any frame by clicking and dragging on the borders of a frame.
The noresize attribute prevents a user from being able to resize the frame. For example
noresize="noresize".
frameborder=This attribute provides the user agent with information about the frame border.
Possible values:
1: This value tells the user agent to draw a separator between this frame and every adjoining
frame. This is the default value.
0: This value tells the user agent not to draw a separator between this frame and every adjoining
frame.

HTML forms

An HTML form is a section of a document which contains controls such as text fields, password fields,
checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing.

The HTML <form> tag is used to create an HTML form and it has following syntax:

<form action="Script URL" method="GET|POST">

form elements like input, textarea etc.

</form>

Form Attributes

There are two attributes within the opening < form > tag:
1. action tells the Web browser where to send the form data when the user fills out and submits
the form. This should either be an absolute URL (such as http://www.example.com/myscript.php
) or a relative URL (such as myscript.php , /myscript.php , or ../scripts/myscript.php.
2. method tells the browser how to send the form data captured by various form elements. You
can use two methods:
GET: GET method sends the data captured by form elements to the web server encoded into a
URL, which points to a web server. GET is useful for sending small amounts of data (1024 bytes)
and makes it easy for the user to resubmit the form. GET requests remain in the browser history

POST: POST method send the data enclosed in the body of the request message. POST method
can send much larger amounts of form data. POST requests do not remain in the browser history

Forms Elements

text input & password

A text input field This allows the user to enter a single line of text. You can optionally prefill
the field with an initial value using the value attribute.
<input type=text name=textField id=textField value= >

A password field This works like a text input field, except that the entered text is not
displayed. This is, of course, intended for entering sensitive information such as passwords.
Again, you can prefill the field using the value attribute.
<input type=password name=pass id=pass value=>

Checkbox

A checkbox field This is a simple toggle; it can be either on or off. The value attribute should
contain the value that will be sent to the server when the checkbox is selected.

<input type=checkbox name=checkboxField id=checkboxField value=yes>

Radio button

All buttons in a group have the same name attribute. Only one button can be selected per group.
As with checkboxes, use the value attribute to store the value that is sent to the server if the
button is selected.
<input type=radio name=radioButtonField id=radioButtonField1 value=radio1>
Submit button

A submit button Clicking this type of button sends the filled-in form to the server-side script
for processing. The value attribute stores the text label that is displayed inside the button (this
value is also sent to the server when the button is clicked)
<input type=submit name=submitButton id=submitButton value=Submit Form>
reset button

A reset button This type of button resets all form fields back to their initial values (often
empty). The value attribute contains the button label text:
<input type=reset name=resetButton id=resetButton value=Reset Form>

pull-down menu

A pull-down menu This allows a user to pick a single item from a predefined list of options.

The size attributes value of 1 tells the browser that you want the list to be in a pull-down menu
format. Within the select element, you create an option element for each of your options.
Place the option label between the <option> ... </option> tags. Each option element can have an
optional value attribute, which is the value sent to the server if that option is selected.
<select name=pullDownMenu id=pullDownMenu size=1>

<option value=option1>Option 1</option>

<option value=option2>Option 2</option>

<option value=option3>Option 3</option>

</select>

list box

This works just like a pull-down menu, except that it displays several options at once. To turn a
pull-down menu into a list box, change the size attribute from 1 to the number of options to
display at once:
<select name=listBox id=listBox size=3>

<option value=option1>Option 1</option>

<option value=option2>Option 2</option>

<option value=option3>Option 3</option>

</select>

multi-select list box

This works like a list box, but it also allows the user to select multiple items at once by holding
down Ctrl (on Windows and Linux browsers) or Command (on Mac browsers). To turn a normal
 list box into a multi-select box, add the attribute multiple (with a value of multiple) to the
select element.
<select name=multiListBox id=multiListBox size=3 multiple=multiple>

<option value=option1>Option 1</option>

<option value=option2>Option 2</option>

<option value=option3>Option 3</option>

</select>

text area

This is similar to a text input field, but it allows the user to enter multiple lines of text. Unlike
most other controls, you specify an initial value (if any) by placing the text between the
<textarea> ... </textarea> tags, rather than in a value attribute. A textarea element must include
attributes for the height of the control in rows (rows) and the width of the control in columns
(cols):
<textarea name=textAreaField id=textAreaField rows=4 cols=50></textarea>

Example of HTML form

<html>

<body>

<form action="valid.jsp">

Enter name:<input type="text" name="name" value="">

Enter password:<input type="password" name="password">

Enter Email:<input type="email" name="email" value="">

Enter Gender:

<input type="radio" name="gender" id="male" value="male">male

<input type="radio" name="gender" id="female" value="female">female

Select Country:

<select name="country" id="register_country">

<option value="india">india</option>

<option value="pakistan">pakistan</option>

<option value="africa">africa</option>

<option value="china">china</option>

<option value="other">other</option>

</select>

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

</form>

</body>

</html>

output