An Introduction to SGML

Standard Generalized Markup Language ( SGML) is an international standard

for the definition of device independent, system-independent methods of

representing texts in electronic form.

SGML is a meta language i.e., a means of formally describing a language.

Historically , the word markup has been used to describe annotation or other

marks within a text intended to instruct a compositor or typist how a

Particular passage should be printed or laid out.

A markup language must specify what markup is allowed, what markup is

required, how markup is to be distinguished from text, and what markup means.
 SGML contd

SGML is a system for defining markup languages. Authors markup their

documents by representing structural, presentational, and semantic

information alongside content.

HTML is one example of markup language.

HTML
The latest Version of HTML is HTML 5.0 .

Earlier Versions were level 0 HTML

level 1 HTML

HTML + and the Advent of Graphics

HTML 2.0

HTML 3.0

HTML 3.2

HTML 4.0
Types Of HTML documents

HTML pages are of three types :

Static

Dynamic

Directory Listing
Types Of HTML documents
1 Static Pages

Static pages are static HTML pages that are prepared in advance of
the request. The Web server returns the HTML pages to the User,
but takes no special action. The User requests a static page by
typing in an URL or by clicking a link pointing to an URL. The URL
request is sent to the server. The server responds by returning the
static HTML page.

Web Browser
http://www.vinay.com/home.html

Home.HTML Web Server

Home.HTML
 Types Of HTML documents
2 Dynamic Pages

Dynamic pages are created in response to a users request . A Web

Browser collects information by presenting a page with textboxes,
menus and check boxes that the user fills in or selects.

When the user clicks on a button on a form , the data from the form is
sent to the Web Server.

The server either passes the data to a script or application to be

processes or it queries or posts data to a database. The server then
returns the results to the user in HTML page.
 Types Of HTML documents
2 Dynamic Pages

Web Browser
http://www.vinay.com/add.dll?2,2
Add.dll

The answer Web Server

To your
problem is 2+2
=4

Internet
database
connector

Database

Client Server
 Types Of HTML documents
3 Directory Listing

If users send queries without specifying a particular file, you can either
Create a default document for a web site or for a particular directory or
you can configure server for directory browsing.

If no default document is Created for a directory and directory browsing

is configured, a directory Listing ( a hypertext version of a windows
explorer or file Manager listing ). is returned to the user in the form of
HTML page.

The user can then jump to the appropriate file by clicking it in the directory listing.
Getting Started
Text Editor : Any text editor, if it can save in plain (ASCII) text will do. This
means that anything from Microsoft word 6.0, Notepad , UNIX vi will work.
All it has to do is save the documents in plain, flat, ASCII- style text .

Some of the popular HTML editors are Dreamweaver, MS FrontPage,

Coffecup editor, HotDog Pro, HTML workshop.

Web Browser : Netscape navigator, NCSA Mosaic, MS IE, lynx , Mozilla Firefox,
EPIC /Chrome , Opera , Cello, Chimera, Web explorer, Net Crusier. etc

Graphic Tool : Though you can draw pictures with no problem in paint brush
or MS PowerPoint , but to get them into the right format (GIF, PNG) you need
A graphic tool such as Adobe Photoshop. There are a number of format
Converters are present in market.
 HTML

- Basics
- HTML Elements - Paragraphs
- HTML attributes - Line Breaks
- Lists
- Headings - HTML formatting tags
- Tables
- Horizontal Ruler - Links Hyperlinks and Anchors
- Forms
- HTML comments - The Image Tag
Hyper Text Markup Language (HTML)

HTML is a descriptive markup language that describes the structure

and behavior of a Web document

HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language.

A markup language is a set of markup tags .

HTML uses markup tags to describe web pages.

HTML documents are text files made up of HTML elements.

HTML elements are defined using HTML tags

HTML Tags

HTML tags are used to mark-up HTML-elements

HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets

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

The first tag in pair is the start tag, the second tag is the end tag

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

HTML tags are not case sensitive , <b> means the same as <B>
Note :

Tools needed to learn HTML

An HTML editor / notepad (best suited for beginners)

For professional web developers editors like FrontPage , Dreamweaver.

You do not need a web server

You do not need to have a website

But definitely a browser [ Internet Explorer (IE) / Mozilla Firefox / EPIC/

Chrome / Safari / Opera ]

Document Type Declaration

HTML follows the SGML notation for defining structured documents.

To be valid HTML documents must declare which version of HTML was used
to compose it. This statement is the document-type declaration for the
Document. It names the document type definition (DTD) thats being used
for the document. The DTD is the document in which all the <HTML> tags
details are documented.

Model HTML Document :

<!DOCTYPE HTML PUBLIC HTML Version>
<HTML>
<HEAD><TITLE> Sample Document </TITLE> </HEAD>
<BODY></BODY>
</HTML>
HTML document describe the web pages.
Let us consider a simple example. Type the program in a notepad/text pad and
save the file with the extension .html/.htm.

Example :

<html>
<body>
<h1> My first HTML page </h1>
<p> Ready to start with HTML </p>
</body>
</html>
HTML Elements
HTML documents are defined by HTML elements . An HTML element
Is everything from the start tag to the end tag.

Start Tag * Element Content End Tag *

<p> This is a paragraph </p>

<a href=default.html> This is a link </a>

<br/>

* The start tag is often called as opening tag and the end tag as often called as closing tag
HTML Element syntax
- An HTML element starts with a start tag / opening tag
- An HTML element ends with an end tag / closing tag
- The element content is everything between the start and the end tag
- Some HTML elements have empty content
- Empty elements are closed in the start tag
- Most HTML elements can have attributes
HTML ATTRIBUTE

Attributes provide additional information about HTML elements.

HTML elements can have attributes.

Attributes provide additional information about the element

Attributes are always specified in the start tag
Attributes come in name/value pairs like: name=value

<HTML>
Example :
<BODY BGCOLOR=#rrggbb>
Document content
</BODY>
</HTML>
All HTML documents are composed of four parts :

A HTML document begins with a line declaring which version of HTML

is being Used to create the document. The tag used is <!DOCTYPE>.
(through this tag is not mandatory).

A HTML element that describes the document as a HTML document

<HTML> </HTML>
A decorative header section which enclosed in the <HEAD> element.

The main body of the document which contains the actual document
content. ( the body can be within either <BODY> or <FRAMESET> elements.)
Document Structure Elements

The head contains information about the document such as the

title, indexing information, ownership.

The body consists of images, text and hotlinks to other documents

And files displayed by the Web Browser.

The essential document structure element are :

<HTML> </HTML>
<HEAD> </HEAD>
<BODY> ..</BODY>
Model HTML Document :

<!DOCTYPE HTML PUBLIC HTML Version>

<HTML>
<HEAD><TITLE> Sample Document </TITLE> </HEAD>
<BODY></BODY>
</HTML>
 HEAD Section
he head section is opened and closed by the <HEAD> and </HEAD> tags
formation belonging in the head section should be placed between thes
wo tags.

he head of HTML document is an unordered collection of information abo

e document.
number of tags can be placed between the <HEAD> and </HEAD> tags
cluding <BASE>, <ISINDEX>,<LINK>,<META>,<SCRIPT>,<STYLE>
ND <TITLE>.

e <HEAD> .. </HEAD>
ements do not affect the look of the document when rendered.

<HTML>
<HEAD><TITLE> Sample Document </TITLE> </HEAD>
<BODY></BODY>
</HTML>
 Body Section

The body section is opened and closed by the <BODY> and /BODY>
tags.
The text and images of the document itself to be displayed by the Web
Browser, should be placed within these two tags.

The opening tag should be placed immediately after the closing head
tag (</head>) and before any images or text included in the document.

A closing tag ends the body section and should be placed at the end of
the document after any images or text included in it.
Headings

Headings are important for any document. HTML has 6 headings tags
defined from <h1> to <h6>

Use HTML headings for headings only. Dont use headings to make text
BIG or BOLD

Search engines use your headings to index the structure and content of
your WebPages.

Its important to show the document structure

<h1> defines the largest headings . <h6> defines the smallest headings

Browsers automatically add an empty line before and after headings

Example 001
<html>
<head>
<title> Headings</title>
</head>

<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>
sample line without using headings

</body>
</html>
Horizontal Rule

A horizontal rule element is a divider between sections of text such as a full

width horizontal rule or equivalent graphic.

Attributes:

size thickness of the ruler

width in number or percent to specify the exact pixel width

align left, right or center

noshade ruler will not be shaded - <hr noshade>

color name / #rrggbb

 <html>
Example 002
<head>
<title> Horizontal Ruler </title>
</head>

<body>

<hr COLOR = RED align=center size=4 width=200>

<hr align=center size=4 width=300>
<hr align=center size=4 width=400>

Horizontal Ruler Example

<hr align=center size=4 width=400>

<hr align=center size=4 width=300>
<hr COLOR=BLUE align=center size=4 width=200>
</body>
</html>
HTML comments

Comments can be inserted in the HTML code to make it more

readable and understandable.

Comments are ignored by the browser and are not displayed.

Comments are written like this :

<!-- this is a comment -->

Paragraphs

Documents in HTML can be divided into paragraphs. Paragraphs are

defined using the <p> tag.

Browsers automatically adds an empty line before and after

paragraphs.

By default all text within the paragraph will be aligned to the left side
of the page Layout.

Attribute Value Description

align left Specifies the alignment of

right the text within a paragraph
center
justify
 <html>
Example 003
<head>
<title> Paragraphs </title>
</head>

<body>

<p> This is first paragraph </p>

<p> This is second paragraph </p>
<p> This is third paragraph </p>

</body>
</html>
Attribute Value Description

align left Specifies the alignment of

right the text within a paragraph
center
justify
HTML Line Breaks

Use the <br /> tag if you want a line break ( anew line) without
starting a new paragraph.

The <br /> element is an empty HTML element. It has no end tag.

<br> or <br />

[ in XHTML , XML and future versions of HTML , HTML elements with

no end tag (closing tag) are not allowed.

Even if <br> works in all browsers, writing <br /> instead is more
future proof
 <html>
Example 004
<head>
<title> Line Break </title>
</head>

<body>

<h1> Line Break Example </h1>

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

line breaks </p>

</body>
</html>
HTML Formatting Tags
HTML uses tags like <b> and <i> for formatting output, like bold or
Italic text. These HTML tags are called formatting tags. The list of the
formatting tags is as given below

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
 <html>
Example 005
<head>
<title> Formatting tags 1</title>
</head>
<body>

<h1> Formatting Tags </h1>

<b> Bold Characters </b> <br />
<big> Big Characters </big> <br />
<em> Emphasized text </em> <br />
<i> italic text </i> <br />
<small> small text </small>
<strong> Strong text </strong>
example of sub_script <br />
example of super^script <br />
<ins> Inserted string </ins>
</body>
</html>
 Marquee
This tag is used to scroll text horizontally across the screen. It mainly
used to deliver a specific message to the visitor or to scroll Ads on a
page. It is not a standard HTML tag and all browser may not support
this tag.
<marquee > Computer Science , Christ University </marquee>
Attributes :
bgcolor any standard color name or hexadecimal color value
Height any valid percentage or no of pixel
Behavior scroll , slide , alternate
Width - any valid percentage or no of pixel
Hspace - any valid percentage or no of pixel (left and right margin of the marquee )
Vspace -any valid percentage or no of pixel (top and bottom margin of the Marquee )
Loop - any positive integer of Infinite
Scrollamount Number of Pixel
Scrolldelay Number specifying the delay in milliseconds
Direction - UP , left , right, Down
Marquee Example

<html>
<head >
<title > Marquee tag example </title>
</head>

<marquee bgcolor="red" behavior="alternate" direction="right"

loop=4 scrollamount=1 scrolldelay=40 title="title" Width="50%">

Computer Science , Christ University

</marquee>
Block Formatting Tags
Preformatted text :
The preformatted text element presents blocks of text in fixed-width
font.
<pre>
Department Number of employees Department code
-------------------------------------------------------------------------------
Finance 25 252
Marketing 27 456
Production 33 234
Operations 22 235
HRD 35 236
------------------------------------------------------------------------------
</pre>
 Block Formatting Tags
CENTER : all lines of text between the beginning and end
<CENTER>
elements are centered between the current left and right
margins.

Ex :
<center>

The text content with in this tag will

be centered between the current left and right

margins.

</center>

Example file : 006 Block formatting.html

Block Formatting Tags
FONT :

The element is <font size=value>. Valid value range from 1- 7.

The default font size = 3 . The value given to size can optionally
have a + or - character in front of it to specify that it is relative
to the document base font
Attribute

Size - specifies relative font size on a scale of 1 through 7 . Default

size is 3. one can also specify the relative size by using + or
Ex: +4
Color - specifies font color in the format # RRGGBB using numbers
Face - specifies type faces Ex : Times new roman , Arial
 Font

Example :

<font size=4> changes font size to 4 </font>

<font size=+2> changes font size to base font +2 or to 5 if base

font size is not set </font>

<font face="Calibri" size=7> Calibri font </font> <br />

Example file : 007 font.html

Special characters
Browsers automatically wrap text to fit within the margins . Line
breaks cab be introduced wherever space characters appear .

Sometimes you will want to prevent the browser from wrapping

text between two particular words.
Symbol Entity
Copyright sign &copy;
Registered &reg;
trademark
Trademark &#8482
Less than &lt; <
Greater than &gt; >
Ampersand &amp; &
Non breaking &nbsp;
space
Em dash &#8212;
Quotation mark &quot
Hyperlinks and Anchors

A link is a address to a document or resource on the web

In Web terms, a hyperlink is a reference (an address) to a resource
on the web.
Hyperlink can point to any resource on the web: an HTML page, an
image , a sound file , a movie, etc
An anchor is a term used to define a hyperlink destination inside a
document.
The HTML anchor element <a> , is used to define both hyperlink
and anchors.
 Syntax for HTML link

<a href =url > Link Text </a>

The start tag contains attributes about the link

The element content (link text) defines the part to be displayed.

Note : the element content does not have to be text . You can
link from an image or any other HTML element.

Href attribute

<a href=http://www.yahoo.com> Click for yahoo </a>

Example file : 008 href link.html

 Example file : 009 Target and named anchor.html
Target attribute

<a href=http://www.yahoo.com target=_blank> Click Here </a>

The target attribute defines where the linked document will be

opened. The above code will open the document in a new browser
window .

The Name attribute

When the name attribute is used , the <a> element defines a named
anchor inside a HTML document. Named anchor are not displayed in
any special way. They are invisible to the reader.

Named anchor Syntax: <a name=label> any content </a>

Link syntax : <a href=#label> My content </a>

# in the href attribute defines a link to a named anchor.

Inserting E-Mail link

An email works the same way as the links to web pages. Instead of
specifying a page address in the href attribute. We specify an email
address. Also an email link uses the mailto: protocol which invokes
email programs.

Example :

<html>
<head> <title> Email Link example </title> </head>
<body>
<a href=mailto:vinay.m@christuniversity.in> Mail Me Back </a>
</body>
</html>
 Example file : 010 img.html
The IMAGE tag
In HTML, Images are defined with the <img> tag
The <img> tag is empty , which means that it contains attributes only
and it has no closing tag.
To display an image on a page , you need to use the src sttribute .
(src stands for source)
1. Src attribute
Syntax : <img src=url />
2. Alt attribute
Syntax : <img src=Sunflower.jpeg alt=A Big sunflower Image>
* The alt attribute tells the reader what he or she is missing on a page if the browser cant load
image. The browser will then display the alternate text instead of the image.
1. Create two web pages and type content in each page , insert
images in each page and link them

Use Marquee
Header tags
Image tag
and formatting tags
LISTS
Lists tags causes standard items ( such as bullets or numbers ) to be
Inserted before the listed text.

They can be nested within one another To create sub-lists (the effect of this on
the appearance of a document (differs with the browser used) the text of a list
entry uses the same style and fonts as normal text.

Types of lists supported by HTML are :

Unordered list
Ordered or Numbered list
Definition list
Directory list
Menu list
LIST ITEM TAG

The <LI> denotes an item in a list. It is only used as sub element of

A list type.

<DIR>, <OL>, <UL> and <MENU> all use it to mark a component

of their structure.

The <LI> tag can take four attribute ;

START : SPECIFY THE START VALUE

TYPE : 1,2,3 OR i,ii,iii OR A,B,C

VALUE : sets the numbering value of the list item:

COMPACT : Instructs the browser to render the list item in as small

a space as possible.
Example :
<OL type=a start=2> Produces an ordered list beginning with the lowercase letter b.
 Example file : 011 List1.html
Unordered List

The three types which can be specified in a <UL> list tag are :

TYPE: Disc
TYPE: Circle
TYPE: Square

Example file : 012 List2.html

Numbered ordered List

Using a numerically ordered list tag causes numbers ( starting

From one ) to be placed before the listed text. An ordered list is
Specified using <ol. </ol>

Type =
A = A,b,C i = i,ii,iii
a = a,b,c 1= 1,2,3
I = I,II,III
Definition List

Definition Lists place nothing before entries preceded by <DT> and

Indent entries following <DD>.

A definition list is opened by <DL> and closed by </DL>.

Listed items between them are preceded by <DT> (definition term)

And then <DD>

Use of <DT> without <DD> or vice-versa is non-standard.

Example file : 013 dList.html

Menu List

A menu list is a list of items with typically one line per item. The menu
List style is more compact than the style of an unordered list.

A menu list must begin with a <menu> element which is immediately

followed by a <LI> (list item ) element.

Example :
<MENU>
<LI> FIRST ITEM
<LI> SECOND ITEM
<LI> THIRD ITEM
</MENU>
 Nested Lists

Lists can bee nested within each other. The effect of this on the
appearance of a document varies with the browser used to view it.

Different types of lists can be nested within each other.

Top level entry

1. nested
2. Lists
3. Entries

Top Level entry

1. Nested Example file : 014 NList.html
2. Lists
3. entries
 Create a web page with similar content of
hotel menu
Tables
Tables were officially introduced in HTML 3.2 by Netscape in early 1995
after which they suddenly revolutionized the way web pages were
designed and data were represented not just because they could be used
for presenting data in a tabular form but also because they gave a web
page designer much better control over page layout and placement of
various HTML elements on a page.

Basic table Parts :

Caption : indicates what the table is about

Table Heading : label the rows , columns or both. Its optional
Table cells : are the individual squares in the table
Table data : the values in the cells
Table Sample

Sample Statistics Caption

NAME Salary
Table Headings
Andrews 10000

John 40000
Table Data

Anthony 50000

Table Cells
Tables
Table Tag is used to generate a row/cell matrix within the document .

Cells may contain objects such as text, images, anchors and so on .

All table related tags occur between the <TABLE> and </TABLE>

container tags.

Any table related tags occurring outside of these tags will be ignored.

A simple table structure is like :

<TABLE>
<TR>
<TD> content </TD>
</TR>
</TABLE>

TD Table data , TR Table row

To give caption to the table , <CAPTION> </CAPTION> is used. It is
An optional tag , and is defined within the <TABLE> </TABEL> and
above the <TR> </TR> .

A table header cell is defined with the <TH> and </TH> tag pair.
The contents of the table header cells are automatically centered and
appear in boldface.

Example file : 015 Table.html

Tables Attributes
Example file : 016 Table 2.html
Attributes of <TABLE> Tag :

Border : by default table has no border

Align : LEFT, RIGHT , CENTER
CELLSPACING : defines the amount of space between the cells in the table.
CELLPADDING : defines the amount of space between edges of the cell
and its contents.
WIDTH : specifies the width of the entire table in exact pixel value or
percentage of the browser window width.

HEIGHT : specifies the height of the entire table in pixels or as a

percentage of the browser window height
Tables Attributes
Example file : 017 Table 3.html
Attributes of <TR> tag
ALIGN , VALIGN , BGCOLOR , BORDERCOLOR,
BORDERCOLORDARK , BORDERCOLORLIGHT

Attributes of <TD> tag

ALIGN , VALIGN , WIDTH, HEIGHT, NOWRAP, COLSPAN , ROWSPAN,

BGCOLOR , BORDERCOLOR,
BORDERCOLORDARK , BORDERCOLORLIGHT

Attributes of <TH> tag

<TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM >
<TH NOWRAP> , <TH COLSPAN=?> , <TH ROWSPAN=?>
<TH WIDTH=?> IN PIXEL <TH WIDTH=%>
<TH BGCOLOR=#RRGGBB>
FRAMES

Frames extend the layout flexibility of web pages by allowing the visible
Client area to be divided into more than one sub-region.
Each frame has several properties :
It can load a URL independently of the other frames
It can be given a NAME allowing it to be targeted by other URLs
It resizes itself dynamically in response to changes in the size of visible
client area and it can choose to allow or disallow itself to be manually
resized by the user.

Frame enabled web pages can be generated using two basic tags :
FRAMESET tags and FRAME tags whereas <NOFRAME> tag is used to
Specify a section of a document that will be used by browsers that cant
use frames.
FRAME document

A frame document has a basic structure very much like your normal HTML
Document.
The BODY container is replaced by FRAMESET container which describes
the sub-HTML documents or frames that will make up the page.

<HTML>
<HEAD </HEAD>
<FRAMESET>
..
</FRAMESET>
</HTML>
FRAMESET ELEMENT

Frame syntax is similar in scope and complexity to the used by tables and
has been designed to be quickly processed by browsers.

Attributes of the frameset

Rows : specify in value ( pixel or percentage )
<frameset rows=50%,50%>
( divides entire page into 2 equal parts )

Cols : the cols attribute takes as its value a comma separated list of values
that has exact syntax as the list described for rows attribute.

Border : used to set the thickness of the border , o for no border.

 FRAMESET ELEMENT

Bordercolor : specifies the frameborder color

Frameborder : = 0 doest displayes border

Framespacing : specify the extra space between the frames in pixel.

Example 0
Example 2 Example 3

Example 1

Frameset Linking with the NAME and TARGET attribute

Example 4
*Note : Frameset can be nested also
 The FORM element <Form> </Form>

The form element is used to delimit a data input form.

There can be several forms in a single document but the FORM element
Control cant be nested .

To make the form functional as stated earlier three things need to be

Specified.

The address of the program that will handle the form contents
( ACTION )

The Method in which the form data will be passed ( METHOD )

How the form data will be encoded (ENCTYPE )

ACTION ATTRIBUTE

The attribute is a URL specifying the location to which the contents

of the Form are submitted to process a response typically this will be
form handling server side SCRIPT ( CGI Script, ASP, JSP ) .

if action attribute is missing , then the URL of the document itself is

assumed.

Example :
<FORM ACTION=http://www.iit.com/cgi/postquery
METHOD=POST >
METHOD ATTRIBUTE

After specifying the URL to process the form the next question arises is
how to submit the form to the address specified in the ACTION Attribute.

METHOD attribute of the form element handles this by using two predefined
methods GET and POST . The default method if not specified is GET.
GET METHOD

GET method appends the form data to the end of the URL of the processing Script
specified in the method attribute itself.

It is generally the default method for browsers to submit information.

The get method is not very secure since the data input appears in the URL.

There is limitation to just how much data can be passed with GET method.

It is impossible to append 10000 word essay at the end of a URL as most browsers limit
a URL to several thousand characters.
POST METHOD

POST on the other hand sends the form data as separate section following the HTTP
header.

This separate section is called the entity body.

In a situation where a large amount of information must be passed back, the POST
method is preferred.

The POST method transmits all form input information immediately after the requested
URL.

[ Once the server has received the request from a form using POST it knows to continue
listening for the rest of the information ]
ENCTYPE Attribute

The ENCTYPE attribute specifies the format of the submitted data in case the
protocol does not impose a format itself.

When data is passed from a web server , it is typically encoded just like an URL

It is encoding , spaces are replaced by the + symbol and non-alphanumeric characters

are placed by %nn where nn is the hexadecimal ASCII code for the character.
 FORM Controls

INPUT Element

The input element is a basic form element used to create form controls for user input.

Two main ATTRIBUTES TYPE and NAME

TYPE = TEXT , CHECKBOX , HIDDEN , IMAGE, PASSWORD , RADIO

RESET , SUMBIT , FILE

Ex:
<FORM METHOD=POST ACTION=mailto:vinay@gamil.com>
<input type=text name=name1 size=50>
<input type=radio name=rd1 >
<input type=submit value=submit