Advanced html

Advanced HTML
51
UNIT 3 ADVANCED HTML
Structure Page No.
3.0 Introduction 51
3.1 Objectives 51
3.2 Links 52
Anchor tag
3.3 Lists 53
3.3.1 Unordered Lists
3.3.2 Ordered Lists
3.3.3 Definition Lists
3.4 Tables 55
3.4.1 TABLE, TR and TD Tags
3.4.2 Cell Spacing and Cell Padding
3.4.3 Colspan and Rowspan
3.5 Frames 60
3.5.1 Frameset
3.5.2 FRAME Tag
3.5.3 NOFRAMES Tag
3.6 Forms 66
3.6.1 FORM and INPUT Tag
3.6.2 Text Box
3.6.3 Radio Button
3.6.4 Checkbox
3.6.5 SELECT Tag and Pull Down Lists
3.6.6 Hidden
3.6.7 Submit and Reset
3.7 Some Special Tags 71
3.7.1 COLGROUP
3.7.2 THEAD, TBODY, TFOOT
3.7.3 _blank, _self, _parent, _top
3.7.4 IFRAME
3.7.5 LABEL
3.7.6 Attribute for <SELECT>
3.7.7 TEXTAREA
3.8 Summary 79
3.9 Solutions/ Answers 80
3.0 INTRODUCTION
In the previous unit you have learned the basics of HTML. After learning about how
to make static web pages, let us now learn how to develop Interactive Web sites. A
good web site should be interactive and easy to use and understand. Of course, very
simple web sites that merely need to present some static information may not provide
for user input. Interactive web sites are those that are capable of taking input from
the user and presenting the output on the basis of the inputs given. To be able to do
so, you will need more HTML features than have been covered so far. Features like
Links, Lists, Tables, Input controls will allow you to create sophisticated web pages
that respond dynamically to user input. HTML provides all these features using
different tags such as A, UL, OL, INPUT, FRAMESET and others, that you will
study in this unit. Besides the tags themselves you will also learn about their common
attributes.
3.1 OBJECTIVES
This unit will enable you to create sophisticated, interactive web pages. After going
through this unit you will be able to learn:
• links using ANCHOR tag;
• ordered, unordered and definition Lists;

Scripting Languages
52
• tables;
• frames to divide a web page into different parts; and
• forms for accepting user input.
3.2 LINKS
Hyperlinks, or links are one of the most important characteristics of web pages. A
link moves us from the current page to a destination that is specified in the HTML
page.
URL Stands for Universal Resource Locator. A URL is just an address that tells the
browser precisely where on the Internet the resource is to be found. The process of
parsing the URL and actually connecting to the resource can be somewhat complex
and does not concern us here.
3.2.1 Anchor Tag
The Anchor tag is used to create links between different objects like HTML pages,
files, web sites etc. It is introduced by the characters <A> and terminated by </A>.
HREF is the most common attribute of the ANCHOR tag. It defines the destination of
the link.
<HTML>
<HEAD>
<TITLE>IGNOU</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.ignou.ac.in/">IGNOU!</A>
</BODY>
</HTML>
As shown in Figure 3.1, the text “IGNOU” present between the <A> and </A> tags
becomes the hyperlink. On clicking anywhere on this hyperlink, the browser would
attempt to connect to the given URL and the website http://www.ignou.ac.in would
open, if possible. An email link can be specified in the same way. We just have to
specify the email address instead of a page address as the value of HREF as shown in
the following code. On clicking on the link, the default mail program on the user’s
computer opens up with a “To:” address as specified in the hyperlink. You can then
type your message and send e-mail to that address.
Send me <A HREF="mailto:forrest@bubbagump.com">mail</A>
</BODY>
It is also possible to make an image a link if desired. This is done using the <IMG>
tag. Consider the following example.
<HTML>
<HEAD>
</HEAD>
Go to <A HREF="http://ignou.ac.in/"><IMG SRC="image.gif" WIDTH=130
HEIGHT=101></A>
</BODY>
</HTML>

Advanced HTML
53
So in the example shown in Figure 3.2, the image becomes the link. When the user
clicks on the image, the web site http://www.ignou.ac.in opens up, if possible.
Check Your Progress 1
1. Create a web page that provides links to five different web pages or to entirely
different web sites.
2. Write HTML code for the following page (the underlined text is linked to
another file called link_text)
3.3 LISTS
Lists are used when the data are to be mentioned in the form of points like: causes of
a particular issue, list of items etc. Lists break up the monotony of a long paragraph
and direct the reader’s attention to the essential parts.
Lists are segregated into three types, namely Ordered lists, Unordered lists and
Definition lists.
3.3.1 Unordered Lists
First, we will build an unordered list. Sometimes, these lists are also called bulleted
lists. These lists are characterized by list items that do not have numbers. They are
used when the points in the list have no particular order. They are delimited by the
<UL> and </UL> tags. Each point in the list is delimited by the <LI> and </LI> tags.
<HTML>
<HEAD>
</HEAD>
What I want for Id
<UL>
<LI>a big red truck</LI>
<LI>an aeroplane that flies</LI>
<LI> a nice soft toy</LI>
<LI>a drum set</LI>
<LI>a Walkman</LI>
<LI> extra pocket money</LI>
</UL>
Comment: Better give an example that
an Indian reader will relate to.

Scripting Languages
54
</BODY>
</HTML>
The syntax of the <UL> tag is:
<UL TYPE=""> where TYPE= "DISC", "SQUARE" or "CIRCLE".
<LI> </LI>
</UL>
The bullet appearance can be changed to be round (a dark circle), a disc or a circle
depending on the value of the TYPE attribute. As shown in the Figure 3.3, the list of
items are included within the <UL> and </UL> tags. Each list item must be preceded with
a <LI> tag.
3.3.2 Ordered Lists
Lists having numbered items are known as ordered lists. They are used when the
items in the list have a natural order. They can also be used when the number of
items in the list needs to be known at a glance. To make an ordered list, simply
change the <UL> tag to <OL>.
<HTML>
<HEAD>
</HEAD>
What I want for my birthday
<OL>
<LI>a big red truck</LI>
<LI>a toy train</LI>
<LI>a Barbie doll</LI>
<LI>a drum set</LI>
<LI>binoculars</LI>
<LI>a month’s extra pocket money</LI>
</OL>
</BODY>
</HTML>
The syntax of the <OL> tag is:
<OL TYPE="" START=""> where TYPE= "1", "a", "A", "i", "I" and START is the
first item number.
<LI> </LI>
</OL>
The type of the numbering format desired should be specified as the value of the
TYPE attribute. The possible types are shown above in the syntax. The numbering
starts from the START attribute’s value.
3.3.3 Definition Lists
Another type of list is a definition list. Definition lists have a heading and the text
appears below that.
<HTML>
<HEAD>
</HEAD>
<DL>
<DT>10th Amendment </DT>

Advanced HTML
55
<DD>The powers not delegated to the United States by the Constitution, nor
prohibited by it to the States, are reserved to the States respectively, or to the
people.
</DD>
</DL>
</BODY>
</HTML>
A definition list is introduced by the <DL> tag and terminated by </DL>. The
Definition heading should be specified between the <DT> and </DT> tags. The
Definition should be specified between <DD> and </DD> tags.
1. Design a web page that looks similar to following page:
3.4 TABLES
In this section you will see how to put tables in your web documents. It is not that a
table is simply a combination of rows and columns. If you have ever seen any table in
an attractive web page you might be interested to learn how they make good use of
the <TABLE> and related tags.
3.4.1 Table, TR and TD Tags
Three tags form the essential ingredients for creating a table.
TABLE: This is the main tag. It tells the browser that a table follows. It has
attributes like size and border width.
TR: A TableRow defines a horizontal row that consists of TableData cells.
TD: This tag specifies an individual block or cell in a table row.
Thus a table is made up of rows, which in turn are made up of cells.
<--This--- ----is---- ----a---- ---Table--- ---Row-->
Cell
You are now ready to create some tables! We must stress that if you want to learn
how to make quality HTML documents, then you would be spending your time well

Scripting Languages
56
if you teach yourself the tags. In our opinion the best HTML editors to use for
beginners are text-based editors. These editors will force you to code HTML
yourself. They don’t attempt to do it for you. Once you are an expert, you can use
other tools to improve your productivity so that you do not have to handcode your
pages.
Now let us start creating tables. The following example shows some tables with
different attributes.
<HTML>
<HEAD>
<TITLE> IGNOU</TITLE>
</HEAD>
<BODY>
<!- - Table with border = 5 - - >
First: Table with border = 5
<TABLE BORDER=5>
<TR>
<TD>Ajay</TD>
</TR>
</TABLE>
<!- - Table with width = 50%- - >
Second: Table with width = 50%
<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Ajay</TD>
</TR>
</TABLE>
<!- - Table with width = 50 - - >
Third: Table with width = 50
<TABLE BORDER=1 WIDTH=50>
<TR>
<TD>Ajay</TD>
</TR>
</TABLE>
<!- - Table with height = 75 and align = center and valign=top - - >
Fourth: Table with height = 75 and align = center and valign=top -
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER>Ajay</TD>
</TR>
</TABLE>
<!- - Table with an image- - >
Fifth: Table with an image
<TABLE BORDER=3>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="image1.gif"
WIDTH=32
HEIGHT=32></TD>
</TR>
</TABLE>
<!- - A complete Table with different sized columns- - >
Sixth: A complete Table with different sized columns
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ajay</TD>
<TD WIDTH=20%>Ramesh</TD>
<TD WIDTH=20%>Vijay</TD>
</TR>
<TR>

Advanced HTML
57
<TD>Pankaj</TD>
<TD>Vikas</TD>
<TD>Rohan</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure 3.1: Tables with Different Attributes.
In the first table the BORDER attribute is given a value of 5. The default is no border
i.e. border = 0.
When no sizes are specified, the table is only as big as it needs to be, as shown in the
first and third table in Figure 3.6. Specifying a table size is easy. Let us reduce the
table size to 50% of the browser window as has been done in the second example.
See the output in the second table in Figure 3.6. As you can see in the example there
are two ways to specify the table width. Each style has its uses.
You can also change the height of a table. The fourth table in Figure 3.6 shows the
effect of the changed height.
You can control where in the cell the data will appear. For this purpose we use the
ALIGN attribute. In the fourth table in Figure 3.6, we have used a center alignment.
Similarly, right and left can be used for right and left alignment respectively. The
default value is ALIGN=left. This is the value that the browser assumes if you have
not told it otherwise.
You can also control where data will appear vertically in a cell. For this purpose you
specify the VALIGN attribute. In the fourth table, we have used the value center.
You can also use top or bottom. Images can also be placed and manipulated in a table
data cell. In the folder that contains the document with the HTML code, substitute an
IMG tag for text. This is shown in the fifth table. You can also include size attributes
with all your image tags. We will not go into the details here, but doing so makes it
easier for the browser to display the table and avoids any nasty little surprises while
resizing the browser window, for instance.
Now, let us look at multiple rows. Suppose three more friends from across the street
see what is going on and want to be in your table. We think we will give them their
own row. Each row can be assigned a different width for its columns. In the sixth
table we have used 60/20/20 as the relative percentage widths of the three columns.
The last table shows how to create a table with multiple rows and columns. The
WIDTH attributes in the first row carry over to the second row.
Comment: This output cannot come
from the code given earlier. From where
are “First:”, “Second:” etc coming?

Scripting Languages
58
3.4.2 Cell Spacing and Cell Padding
Next let us look at a couple of attributes called CELLPADDING and
CELLSPACING. Both are part of the <TABLE> tag. CELLPADDING is the
amount of space between the border of the cell and the contents of the cell. The
default value for this attribute is 1. This is so that any text in the cells does not appear
to be sticking to the border. However, you can specify a value of 0 if you wish.
The CELLSPACING attribute has a somewhat different meaning. It determines the
spacing between adjacent cells. Its default value is 2. The following example shows
these and some other important attributes of the <TABLE> tag.
<HTML>
<HEAD>
<TITLE> IGNOU</TITLE>
</HEAD>
<BODY>
First: Table with cellspacing and cellpadding
<TABLE BORDER=3 CELLSPACING=7 CELLPADDING=7>
<TR>
<TD>Ajay</TD>
<TD>Vijay</TD>
<TD>Rohan</TD>
</TR>
<TR>
<TD>Pankaj</TD>
<TD>Vikas</TD>
<TD>Sanjay</TD>
</TR>
</TABLE>
Second: Table with colspan
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>Ajay</TD>
<TD>Vijay</TD>
</TR>
<TR>
<TD>Vikas</TD>
<TD>Pankaj</TD>
<TD>Rohan</TD>
</TR>
</TABLE>
Third: Table with rowspan
<TABLE BORDER=1>
<TR>
<TD ROWSPAN=2>Ajay</TD>
<TD>Vijay</TD>
<TD>Rohan</TD>
</TR>
<TR>
<TD>Pankaj</TD>
<TD>Deepak</TD>
</TR>
</TABLE>
Fourth :Table with rowspan and colspan
<TABLE BORDER=1>
<TR>
<TD ROWSPAN=2>Ajay</TD>
<TD COLSPAN=2>Vijay</TD>

Advanced HTML
59
</TR>
<TR>
<TD>Pankaj</TD>
<TD>Rohan</TD>
</TR>
</TABLE>
Fifth: Table with strong tag and a link in cell's data
<TABLE BORDER=1>
<TR>
<TD COLSPAN=3
ALIGN=CENTER><STRONG><AHREF="http://IGNOU.org/">Ajay</STRO
NG>
</TD>
</TR>
<TR>
<TD>Vijay</TD>
<TD>Vikas</TD>
<TD>Pankaj</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure 3.2: Some Important Attributes of the Table Tag Family
The first table in Figure 3.7 illustrates cellspacing and cellpadding.
3.4.3 Colspan and Rowspan
Now let us see how to work with COLSPAN (Column Span) and ROWSPAN (Row
Span).
If we want the cell containing Ajay in Figure 3.7 to be extended to the next cell as
well and make that area part of it own, we can use the COLSPAN attribute. This
amounts to merging the two cells into one. Those of you who are familiar with
spreadsheets such as Microsoft Excel will recognize this as similar to its “merge
cells” feature. As you may have guessed, <ROWSPAN> is just like <COLSPAN>.
The second table in Figure 3.7 shows COLSPAN, the third table shows ROWSPAN
and the fourth table shows an example featuring both COLSPAN and ROWSPAN.
1. Design a web page that has 5 equal columns. The table should look the same in
all screen resolutions.

Scripting Languages
60
2. Make out a brief bio-data of yours and code it as an HTML Page. You can
consider using tables to show your academic history.
3.5 FRAMES
Now let us understand how to make frames for web documents. The intelligent use of
frames can give your pages a cleaner look and make them easier to navigate.
The basic concept goes like this: Each frame is a regular, complete HTML document.
If you wanted to lay out your page into two frames placed side by side, then you
would put one complete HTML document in the left frame and another complete
HTML document in the right frame. In addition you need to write a third HTML
document. This MASTER PAGE contains the <FRAME> tags that specify what goes
where. Dividing a page into frames is actually quite simple.
There are only two major frame tags that you need to learn: <FRAMESET> and
<FRAME>. The easiest way to explain them is to start making some frames. As an
aspiring computer professional, you would be well advised to learn the HTML tags in
detail. Do not use HTML editors unless you know HTML, just as you would not let
a child use a calculator unless she already knows her arithmetic well. Once you have
a thorough grasp of HTML, you can then save labour by using different tools. The
tools might not offer the flexibility that you can get through handcoding HTML. So
they should be used judiciously. Of course, this advice is not meant for lay persons
who want to make web pages.
We will now need a few HTML documents. We will give each document a name.
Create a new folder somewhere and create the first HTML file as One.htm. Now
make another html document. Save this in the same folder as Two.htm. Now do the
same for Three, Four, Five, and Six. Save them just like the others. You should now
have a folder that contains 6 complete standalone HTML documents.
3.5.1 Frameset
Now make a master page in which you write the following code.
<HTML>
<HEAD>
<TITLE>My Frame Page -- The Master Page</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Now, save it in your folder (with all the other files) as index.htm. If you try to open
it with your browser now it will be blank. All you have done so far is make a title.
Now let us start defining just how things are going to look. Tell the browser to split
the main window into 2 columns, each occupying 50% of the window.
<FRAMESET COLS="50%,50%">
</FRAMESET>
This will still give a blank output as you have not specified what goes into the
windows. We have one more thing to do before our code displays some output.
3.5.2 Frame Tag
As you can guess, this tag is used for placing an HTML file in the frame created. We
must now tell the browser what to put in each frame.
Comme
heck
out the
code
for all
the
FRAM
ES
related
exampl
es. Do
we
need a
<BOD
Y> tag?

Advanced HTML
61
<HTML>
<HEAD>
<TITLE>My Frame Page- The Master Page</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAME SRC="One.htm">
<FRAME SRC="Two.htm">
</FRAMESET>
</HTML>
You also need to note here that <FRAMESET> is a container tag, and <FRAME>
is not. A container tag has an opening <TAG> and a closing </TAG>. So notice that
the <FRAME> tag has no delimiter to terminate it. Everything is in its attributes.
The <FRAMESET> tag does all the dividing of the page into different windows. It
also has attributes that specify how to divide them up. Can we divide the page into
more than 2 pieces? Yes, just make sure that you specify a page to occupy each
section or the browser will get confused. Look at the code and the output in Figure
3.10.
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="20%,20%,20%,20%,20%">
<FRAME SRC="Three.htm">
<FRAME SRC="Four.htm">
<FRAME SRC="Five.htm">
</FRAMESET>
</HTML>
Figure 3.3: A Web Page with Five Frames
It is only a small step to making the frames all of different sizes. Just make sure your
arithmetic is correct and that the percentages you specify add up to 100, or the
browser will come up with its own interpretation.
If we divide the page into ROWS instead of COLS we get a different layout.
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="10%,20%,30%,15%,25%">

Scripting Languages
62
</FRAMESET>
</HTML>
Let us now take another example with only 2 frames. We can specify 50 to indicate
that number of pixels instead of 50%. We can also use * instead of a number. The *
means whatever is left over.
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="50,*">
</FRAMESET>
</HTML>
When you use frames you have to be very careful to code properly to ensure that all
viewers are able to look at reasonably consistent views. Let us suppose that you
make a frame 100 pixels wide on the left and 100 pixels wide on the right. If some
users are running an 800 × 600 screen they see the middle area as 600 pixels wide.
Other users may have a screen set at 640 × 480. What do they see? The middle area
for them is only 440 pixels wide. So if you use any absolute dimensions in your
<FRAMESET> tags you should have at least one * that will produce an elastic
frame. That way everything will look at least reasonably good. If you do not do that,
your page might need to scroll on one resolution and not on another. As far as
possible you might want to avoid absolute values in your frames and work on relative
numbers so that things get taken care of automatically by the browser.
We can have more than one leftover frame and specify a size relationship between
them. Try it yourself and see the result.
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="50,*,2*">
</FRAMESET>
</HTML>
The above code means: Make 3 frames. Make the first 50 pixels wide. Divide the rest
between frames 2 and 3. But make frame 3 twice as big as frame 2. Put One.html/ in
the first frame, Two.html/ in the second and Three.html/ in the third.
It is important to note that everything is done in order. The first <FRAME> is
displayed according to the first size attribute in the <FRAMESET> tag (50/One), the
second frame with the second (*/Two) and the third frame with the third attribute set
(2*/Three).
Frames inside other frames
Comme
his is
not
clear.
The
proble
m is
more
likely
with
absolut
e
number
s where
50
pixels
might
be a
good
size on
a 640 X
480
screen
but
might
be
miniscu
le on a
1600 X
1200
screen.

Advanced HTML
63
Here we will discuss how to divide frames into different frames i.e. how to put
horizontal frames in a vertical one and vice-versa. Here we are going to divide a
frame in half horizontally.
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="50%,50%">
</FRAMESET>
</FRAMESET>
Here the frame three is at the top and Four at the bottom. This has been done just to
illustrate how to achieve the effect and is not meant to suggest that you actually
divide up your pages like this. Too many frames on a page do not look good. A good
rule of thumb is not to have more than 3 frames on your page. If you can, avoid
frames altogether.
3.5.3 Noframes Tag
The <NOFRAMES> tag can be used for those browsers that are not able to interpret
<FRAME> tags. Although most, if not all, of your visitors will be able to see frames,
there is still a small number of such browsers and there still are many users around
who do not have the latest in equipment. To address as wide an audience as possible,
you could write a no-frames version of your page.
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="50,*,*">
<FRAME SRC="Six.htm">
</FRAMESET>
<FRAMESET ROWS="50%,50%">
</FRAMESET>
</FRAMESET>
<BODY><NOFRAMES> your browser does not handle frames! </NOFRAMES>
</BODY>

Scripting Languages
64
</HTML>
Figure 3.4: Putting in a NOFRAMES Version
Put your non-frames page down between the <NOFRAMES> tags. If someone is
using an old browser, it will skip everything above and come straight down here.
Frames-capable browsers will ignore what is between the <NOFRAMES> tags.
We can also put images in the frames. Let us see how to put in “world.gif” as an
example.
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
The scrollbars that you see can be specified as YES, NO or AUTO. YES means the
window gets scrollbars - whether they are needed or not. NO means there will be no
scrollbars. AUTO is the default. If scrollbars are needed, they appear while if they
are not needed they stay conveniently out of the way. So let us see how to get rid of
our scrollbars.
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>
You would notice a problem with this code. The image is not in the right frame. The
next two attributes deal with margins. The browser automatically gives each frame
some empty space around its contents. This is normally useful for aesthetic purposes.
You can control the size of these margins by using MARGINWIDTH and
MARGINHEIGHT. They control the left and right and top and bottom margins
respectively. We will set them both to 1. (1 is the minimum)
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="146,*">
<FRAMESET ROWS="162,*">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
</FRAMESET>
</FRAMESET>
3.6 FORMS
Comme
lease
check
out all
the
code
for
FRAM
ES by
running
it
exactly
as it
appears
.

Advanced HTML
65
Now let us get a grip on how to add interactivity to your web documents by way of
the <FORM> tag. With this tag you can add to your web pages a guestbook, order
forms, surveys, get feedback or put in any other form that you wish.
3.6.1 FORM and INPUT Tag
A good way to learn about forms is to use your notepad editor and create a new
HTML document. Save it as form1.htm in some folder somewhere. You might want
to create a separate folder for learning this tag. Start up your browser. Use it to open
form1.html and run Notepad and the browser side by side. This way you can create
your pages and almost instantaneously see the results of your work. Remember to hit
the refresh button on your browser.
Next we must tell the browser where to send the data we gather and how to send it.
There are two ways you can do this.
1) You can send the data to a cgi script or use some other mechanism for
processing, or
2) You can have the data emailed to you. The first option is outside the scope of
discussion of this unit.
The second, or mailto, form should have the following attributes in the
<FORM> tag.
Note: Microsoft's Internet Explorer 3.0 does not support mailto forms. When you try
to submit the information, the new mail message window pops up. It does support
forms sent to a CGI script.
<HTML>
<HEAD>
<TITLE> Welcome to IGNOU </TITLE>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx"
ENCTYPE="application/x-www-form-urlencoded">
</FORM>
</BODY>
</HTML>
The line containing the mailto keyword in the Figure 3.17 is very important. The only
thing you have to do is specify your email address after mailto: The rest must be
written exactly as shown. The words FORM, METHOD, POST and ACTION do not
have to be capitalized but there must be a space between every two attributes,
between FORM and METHOD, between POST and ACTION, and between the e-mail
address and ENCTYPE.
Some mail programs are capable of converting the data without needing a separate
program. You may want to try this method first. Just remove the instruction
ENCTYPE="application/x-www-form-urlencoded" and in its place use
ENCTYPE="text/plain".
The following example shows a general form that includes some of the commonly
used controls.
<HTML>
<HEAD>
<TITLE> Welcome to IGNOU </TITLE>
</HEAD>
<BODY>
<FORM METHOD=POST>

Scripting Languages
66
Text box with name, value and size attributes
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 XYZ" SIZE=10>
<BR>Text box with password and maxlength
<INPUT TYPE=PASSWORD MAXLENGTH=10>
<BR>Radio button with default checked<BR>
Who is your best friend?<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ajay" CHECKED>
Ajay <BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rohan"> Rohan
<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tarun"> Tarun<P>
<BR>Checkbox<BR>
<INPUT TYPE=CHECKBOX NAME="AJAY" VALUE="YES"> Ajay <BR>
<INPUT TYPE=CHECKBOX NAME="Rohan" VALUE="YES"> Rohan <BR>
<INPUT TYPE=CHECKBOX NAME="BU" VALUE="YES"> Bunty<P>
<BR>Drop down list<BR>
<SELECT NAME="BEST FRIEND" SIZE=4>
<OPTION VALUE="Ajay">Ajay
<OPTION VALUE="Rohan">Rohan
<OPTION VALUE="Tarun">Tarun
<OPTION VALUE="Gagan">Gagan
<OPTION VALUE="Harish">Harish
<OPTION VALUE="Manjit">Manjit
</SELECT>
</FORM>
</HTML>
Figure 3.5: A Web Page with a Form
3.6.2 Text Box
The <INPUT> tag is used to indicate where user input is expected. It has different
attributes, of which the TYPE attribute is used to specify the kind of input that is to
be provided. The most common value of this attribute of the <INPUT> tag is TEXT.
As shown in Figure 3.18, every INPUT needs a NAME. When the user types in his
address (for example 1234 ABC), it will become the input's value and be paired with
NAME so the end result after running it through the Mailto Formatter will be
ADDRESS=1234 ABC.

Advanced HTML
67
We can, if we want, type in a VALUE.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 XYZ">
This will automatically pair the value 44 XYZ with the name ADDRESS, unless the
user changes it. Take care to use quotes as specified in the example.
We can specify the size of the text input box.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 XYZ" SIZE=10>
The default value is 20. You already know that the default value is the value that the
browser assumes if you have not told it otherwise.
Go ahead and remove VALUE="44 XYZ".
If we want, we can specify how many characters a user can input.
Experiment with this and try to input more than 10 characters! The MAXLENGTH
attribute is used to restrict the number of characters to be entered in the textbox.
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=20 MAXLENGTH=10>
Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same,
except that for security it displays *** instead of the actual input. The text entered as
password would not be echoed on the page. So you can use this whenever you want
to accept a password or some other sensitive information from the user.
<INPUT TYPE=PASSWORD>
Remember that each <INPUT> must have a NAME, that gives the name of the
field.
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
The SIZE, VALUE, and MAXLENGTH attributes work here also just as they do
with TEXT
3.6.3 Radio Button
Radio buttons are used when only one out of the group of options is to be chosen.
In the example code we have put a line break after each button.
Each of the Radio Buttons must be assigned a VALUE and you must label each
button. The code given in Figure 3.18 illustrates this. You can also modify these
labels with other HTML tags if you wish.
This takes care of the basics of your radio buttons. You can tidy things up by adding
a statement above the buttons, and if you want choose a default selection (optional).
To choose a default selection you need to add “CHECKED” with the appropriate
radio button. The user of course can only choose one option. The choice will be
returned to you as the name/value pair BEST FRIEND=Ajay (or whatever the user
picks).
3.6.4 Checkbox
Checkboxes are used when one or more out of the group of options is to be chosen.
Building Check boxes is very similar to radio buttons. Figure 3.18 illustrates the use
of Checkbox.
The user can choose any number such as 1, 2, none or all of the options. The choices
will be returned to you as the name/value pairs
Ajay=YES
Tarun=YES
(or whatever the user chooses. If nothing, nothing will be returned to you)

Scripting Languages
68
The following is code for making a table containing different options for 3 different
questions. Try it yourself and see the result.
<CENTER>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>
<TD WIDTH=199>
Which of these guys are your friends?<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Ajay" VALUE="YES"> Ajay
<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Rohan" VALUE="YES"> Rohan
<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Tarun" VALUE="YES">
Tarun<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..BU" VALUE="YES"> Bunty<P>
</TD>
<TD WIDTH=200>
Which of these guys would you lend money to?<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Ajay" VALUE="YES">
Ajay <BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Rohan" VALUE="YES">
Rohan <BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Tarun" VALUE="YES">
Tarun<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...BU" VALUE="YES">
Bunty<P>
</TD>
<TD WIDTH=199>
Which of these guys would you trust with your sister?<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Ajay" VALUE="YES"> Ajay
<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Rohan" VALUE="YES">
Rohan <BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Tarun" VALUE="YES">
Tarun<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...BU" VALUE="YES">
Bunty<P>
</TD>
</TR></TABLE>
</CENTER>
Figure 3.6: A Form on a Web Page with Checkboxes
3.6.5 SELECT Tag and Pull Down Lists
The next type of input is a Pull Down List. With this type you have to use
<SELECT> instead of <INPUT> and it also has a closing tag. This control is used

Advanced HTML
69
when we have a long list of items to be displayed. The user can also choose any item.
All we have to do to turn it into a Scrolling List is to add a SIZE attribute to the
<SELECT> tag. The SIZE is simply how many options show in the window.
3.6.6 Hidden
Yet another type of input is HIDDEN input.
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Friend Form
1">
A HIDDEN input is a name/value pair that is returned to you but does not show up
anywhere on the web page. The hidden input above is needed for use with the mailto
Formatter (MTF). It is how MTF recognizes the forms it has to parse.
Suppose you were a company trying to generate leads for a new product. You have a
standard form for gathering information that has name, company, phone, products
interested in, etc. The only problem is there are 6 slightly different versions of the
form in 6 different places. You need to know what is coming from where. What to
do?
You could add a HIDDEN input to your forms like this:
<HTML>
<BODY>
<FORM METHOD=POST>
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 1"> ...for the
first version
second version
third version
</FORM>
</HTML>
By the way, it doesn't matter what the name/value pair in the hidden input is (or any
input for that matter).
<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> HIDDEN inputs are
also useful for cgi scripts. For example, many Internet Service Providers have a script
you can have your forms sent to. It then sends the form back to you properly
formatted. The hidden input can be used to tell the cgi script who you are, where to
send the parsed data, and so on.
3.6.7 Submit and Reset
Submit and Reset are special types of input buttons. Submit is used to send the data to
the server and Reset clears/resets the form.
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
We can easily change what the buttons say.
<INPUT TYPE=SUBMIT VALUE="Send it off!"><BR>
<INPUT TYPE=RESET VALUE="Clear the form!"><P>
If necessary, the SUBMIT button can also have a NAME. You would need this if, for
whatever reason, you had more than one SUBMIT button.

Scripting Languages
70
Create a Web page similar to the following:
3.7 SOME SPECIAL TAGS
We now look at some new tags that have been added to HTML in the latest versions.
3.7.1 COLGROUP
<COLGROUP> defines a group of columns in the table and allows you to set the
properties of those columns. <COLGROUP> goes immediately after the <TABLE>
tag and before any <TR>. <COLGROUP> works very much like <COL>, but you
should note that <COLGROUP> requires both an opening and a closing tag.
<TABLE BORDER=1 CELLPADDING=4 RULES=GROUPS FRAME=BOX>
<COLGROUP></COLGROUP>
<COLGROUP SPAN=3></COLGROUP>
3.7.2 THEAD, TBODY, TFOOT
<THEAD>, <TBODY>, and <TFOOT> form groups of rows. <THEAD> indicates
that a group of rows are the header rows at the top of the table. <TBODY> indicates
that a group of rows are body rows. <TFOOT> indicates that a group of rows are the
footer rows at the bottom of the table.
The most popular use for these three tags, which are currently only recognized by
MSIE 4 and up, is to put borders between groups of rows instead of between every
two rows. For example, suppose you have a table in which you want borders around
the top row, the bottom row, and around the entire block of rows in between. You
could do that with the following code. Note that in addition to <THEAD>,
<TBODY>, and <TFOOT> you also must use <TABLE RULES=GROUPS>. The
following example shows the use of these tags:
<HTML>
<BODY>
<TABLE CELLPADDING=6 RULES=GROUPS FRAME=BOX>
<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH>
<TH>Qty</TH> </TR>
</THEAD>
<TBODY>
Comme
his
code
fragme
nt does
not at
all
explain
the tag.
Please
give a
more
informa
tive
exampl
e

Advanced HTML
71
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Komal</TD> <TD>639</TD>
</TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lovely</TD> <TD>596</TD>
</TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Rohan</TD> <TD>1135</TD>
</TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Suresh</TD> <TD>1002</TD>
</TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Rohan</TD> <TD>908</TD>
</TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lovely</TD> <TD>371</TD>
</TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Suresh</TD> <TD>272</TD>
</TR>
</TBODY>
<TFOOT><TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH>
</TR></TFOOT>
</TABLE>
</HTML>
Figure 3.7: Using the THEAD, TBODY and TFOOT Tags
3.7.3 _blank, _self, _parent, _top
These all are attributes of the <A> tag. The following example explains each of these
attributes.
<HTML>
<BODY>
<UL>
<LI>TARGET = "_blank"</LI>
<A HREF="newwindow.html" TARGET="_blank">a new window</A> <BR>
<LI> TARGET = "_self"</LI>
go to <A HREF="selftarget.html" TARGET="_self">next</A> page<BR>
<LI>TARGET = "_top"</LI>
<A HREF="selftarget.html" TARGET="_top">top</A><BR>
</UL>

Scripting Languages
72
</HTML>
Figure 3.8: Attributes of the <A> Tag
• TARGET = "_blank"
"_blank" opens the new document in a new window. Run the code given in Figure
3.22 and check how it works. This value does not require the use of any frames.
"_blank" is popular in web pages which are devoted to links to "other resources on
the net". By opening a new window for each resource, the user has a sense of a
"main" page (the list of resources) and "secondary" pages (each individual resource).
Also, the web site providing the link does not risk being supplanted by a link that it
has provided.
Note: Some versions of MSIE do not support "_BLANK"
• TARGET = "_self"
"_self" puts the new document in the same window and frame as the current
document. "_self" works the same as if you had not used TARGET at all. For an
example see Figure 3.22.
• TARGET = "_parent"
"_parent" is used in a situation where a frameset file is nested inside another frameset
file. A link in one of the inner frameset documents which uses "_parent" will load the
new document where the inner frameset file had been.
If the current document's frameset file does not have any "parent", then "_parent"
works exactly like "_top": the new document is loaded in the full window. Note that
"_parent" does not work in a frameset, which is merely nested inside another frameset
in the same frameset file.
• TARGET = "_top"
"_top" loads the linked document in the topmost frame, that is, the new page fills the
entire window.
Refer to Figure 3.22.
3.7.4 IFRAME
<IFRAME> is an HTML 4.0 addition to the frames toolbox. Currently only MSIE
supports <IFRAME>. Unlike frames created using <FRAMESET> and <FRAME>,
<IFRAME> creates a frame that sits in the middle of a regular non-framed web page.
<IFRAME> works like <IMG>, only instead of putting a picture on the page, it puts
another web page.
For example, suppose within the same directory as this page there is a file called
"hello.html". This code puts hello.html into an inline frame:

Advanced HTML
73
<IFRAME SRC="hello.html" WIDTH=450 HEIGHT=100>
If you can see this, your browser does not understand IFRAME. However, we'll still
link <A HREF="hello.html">link</A> you to the file.
</IFRAME>
which gives us this inline frame:
Here’s what the code means:
IFRAME
The name of the <IFRAME> tag
SRC="hello.html"
The URL of the document to show in the inline frame.
WIDTH=450 HEIGHT=100
The dimensions of the inline frame.
If you can see this, your browser doesn't understand IFRAME. However, we'll still
<A HREF="hello.html">link</A> you to the file.
Code between <IFRAME> and </IFRAME> is not displayed by browsers that
understand <IFRAME>. Browsers that do not understand <IFRAME> will display
this code (because they don't know how to ignore it).
You can do most of the things with <IFRAME> that you can do with regular frames,
including setting the frame border, internal margins, and setting information on scroll
bars. You can use the attribute so that you can set links to the target frame.
3.7.5 <LABEL>
<LABEL>, an HTML 4.0 element supported by MSIE and Netscape 6, defines a set
of text that is associated with a particular form element. For example, the code below
indicates that the phrase "send more information" is associated with the “moreinfo”
checkbox because the checkbox is within the <LABEL> element:
<HTML>
<BODY>
<LABEL FOR="moreinfo">
send more information
<INPUT NAME="moreinfo" TYPE=CHECKBOX ID="moreinfo">
</LABEL>
</HTML>
The FOR attribute is required in the above example. The value of FOR should be the
same as the value of ID in the form field that the label applies to.
You can also associate a <LABEL> with a field that is not within its contents using
the FOR attribute.
3.7.6 Attribute for <SELECT>
TABINDEX = integer
TABINDEX is supported by MSIE 4.x and higher and Netscape 6.
Normally, when the user tabs from field to field in a form (in a browser that allows
tabbing, not all browsers do) the tab order is the order in which the fields appear in
the HTML code.

Scripting Languages
74
However, sometimes you want the tab order to flow a little differently. In that case,
you can number the fields using TABINDEX. The tabs then flow in order from the
one with the lowest TABINDEX to the highest.
The code below illustrates this:
<HTML>
<BODY>
<TABLE BORDER CELLPADDING=3 CELLSPACING=5
BGCOLOR="#FFFFCC">
<TR>
<TD>name: <INPUT NAME="realname" TABINDEX=1></TD>
<TD ROWSPAN=3>comments<BR>
<TEXTAREA COLS=25 ROWS=5
TABINDEX=4></TEXTAREA></TD></TR>
<TR> <TD>email: <INPUT NAME="email" TABINDEX=2></TD></TR>
<TR> <TD>department: <SELECT NAME="dep" TABINDEX=3>
<OPTION VALUE="">...
<OPTION VALUE="mkt">Marketing
<OPTION VALUE="fin">Finance
<OPTION VALUE="dev">Development
<OPTION VALUE="prd">Production</SELECT></TD></TR>
</TABLE>
</HTML>
TABINDEX can also be used with <A>, <INPUT>, <TEXTAREA>, and
<BUTTON>.
3.7.7 TEXTAREA
<TEXTAREA> indicates a form field where the user can enter large amounts of text.
In most respects, <TEXTAREA> works like an <INPUT> field. It can have a name
and a default value. It has to be noticed that <TEXTAREA> is a container tag, so it
has a start tag and an ending tag.
In its simplest form, <TEXTAREA> requires the NAME, COLS and ROWS
attributes, and nothing between <TEXTAREA ...> and </TEXTAREA>. Look at the
code fragment shown below
<FORM ACTION="../cgi-bin/mycgi.pl" METHOD=POST>
your comments:<BR>
<TEXTAREA NAME="comments" COLS=40 ROWS=6></TEXTAREA>
<P><INPUT TYPE=SUBMIT VALUE="submit">
</FORM>
gives us this form:
Comme
he
browser
output
has
been
given
for all
the
three
code
fragme
nts. It
would
be
better
to make
it clear
that
they are
fragme
nts and
are not
complet
e code
that
will run
directly
.

Advanced HTML
75
your comments:
The matter between <TEXTAREA ...> and </TEXTAREA> are used as the default
value
<FORM ACTION="../cgi-bin/mycgi.pl">
your response:<BR>
<TEXTAREA NAME="comments" COLS=40 ROWS=6>
Kamal said
: I think it's a great idea
: but it needs more thought
</TEXTAREA>
<P><INPUT TYPE=SUBMIT VALUE="submit">
</FORM>
gives us your response:
Figure 3.10: Using the TEXTAREA Tag
The contents are interpreted as text only; HTML markup is ignored. Theoretically the
user can type unlimited amounts of text into the textarea field. In practice the browser
sets a limit that is usually no more than 32 K. If you want users to send in their latest
novel, consider using some file upload mechanism.
Case Study: Suppose your boss has asked you to create a Web page from which
customers can order computer equipment. You need to collect the customer’s name,
address, phone number, age, credit card information, and what the customer wants to
order.
<HTML>
<HEAD>
<TITLE>ComputoRama Order Form</TITLE>
</HEAD>
<BODY>
<FORM ACTION="mailto:mail@abc.com" METHOD=POST>
<TABLE BORDER="2" CELLPADDING="1">
<TR>
<TD ROWSPAN="2">Who Are You?</TD>
<TD><INPUT TYPE="text" NAME="FirstName" SIZE=2Ø></TD>
<TD><INPUT TYPE="text" NAME="MiddleInitial" SIZE=1></TD>
<TD><INPUT TYPE="text" NAME="LastName" SIZE=2Ø></TD>
<TD><INPUT TYPE="text" NAME="Age" SIZE=3></TD>
</TR>
<TR>
<TD><FONT SIZE="-2">First Name</FONT></TD>
<TD><FONT SIZE="-2">MI</FONT></TD>
<TD><FONT SIZE="-2">Last Name></TD>
Comment: Maybe you would like this
sentence to be inside a <PRE> tag.

Scripting Languages
76
<TD><FONT SIZE="-2">Age</TD>
</TR>
<TR>
<TD ROWSPAN="3">How Do We Contact You?</TD>
<TD COLSPAN="4" VALIGN="TOP">Street Address: <TEXTAREA
name="StreetAddress" rows=2 cols=3Ø></TEXTAREA></TD>
</TR>
<TR>
<TD COLSPAN="2">City: <INPUT TYPE="text" NAME="City"
SIZE=20></TD>
<TD COLSPAN="2">State: <INPUT TYPE="text" NAME= "State"
SIZE=2></TD>
</TR>
<TR>
<TD COLSPAN="2">ZIP Code: <INPUT TYPE="text"
NAME="ZIPCode"
SIZE=10></TD>
<TD COLSPAN="2">Daytime Phone
(<INPUT TYPE="text" NAME="Phone1" SIZE=3>)
<INPUT TYPE="text" NAME="Phone2" SIZE=3>-
<INPUT TYPE="text" NAME="Phone3" SIZE=4></TD>
</TR>
<TR>
<TD>Credit Card
<INPUT TYPE="radio" NAME="CreditCardType" VALUE="Visa"
CHECKED>Visa
<INPUT TYPE="radio" NAME="CreditCardType"
VALUE="MasterCard">M/C</TD>
<TD COLSPAN="2" ALIGN="CENTER">
<INPUT TYPE="text" NAME="CreditCardNumber1" SIZE=4>
<INPUT TYPE="text" NAME="CreditCardNumber4"
SIZE=4></TD>
<TD COLSPAN="2">Expiration Date:
<INPUT TYPE="text" NAME="ExpirationMonth" SIZE=2>/
<INPUT TYPE="text" NAME="ExpirationYear" SIZE=2></TD>
</TR>
<TR>
<TD>Merchandise</TD>
<TD COLSPAN=4><SELECT MULTIPLE NAME="Merchandise"
SIZE=1>
<OPTION SELECTED> HAL-47Ø <OPTION> Banana9ØØØ
<OPTION> High Res Monitor <OPTION> Low Res Monitor
<OPTION> Deluxe Keyboard <OPTION> Regular Keyboard
<OPTION> Laser Printer <OPTION> Inkjet Printer <OPTION>
Dot Matrix Printer
<OPTION> Mouse <OPTION> Trackball
<OPTION> Scanner
</SELECT></TD>
</TR>
<TR>
<TD ALIGN=CENTER COLSPAN="5">
<H1>Thank You For Your Order!</H1>
</TD>
</TR>
</TABLE>
<CENTER>
<INPUT TYPE="submit" VALUE="Ship It!"> <INPUT TYPE="reset"
VALUE="Clear Entries">

Advanced HTML
77
</CENTER>
</FORM>
</BODY>
</HTML>
Suppose you are asked to design a registration form for members of a web site.
Registration information will include hobbies, interests, assets owned by the member
etc. Create the following Web page.(Case study)
3.8 SUMMARY
In this unit we have learned some important and advanced topics of HTML. You
should now be able to develop interactive Web pages also. We have discussed ways
of linking to different locations in a Web site. We have learned about lists that allow
us to develop Web pages with elementary data. Lists can be of three types i.e.
Ordered Lists, Unordered Lists and Definition Lists. We all know how important a
table is in any document -- from someone’s bio data to a Chief Executive’s report a
table is the simplest way to understand the information. If we display the data in
paragraph form then it would look unorganized and would be difficult to
comprehend. On the other hand, a table presents all the data at a glance. We have also
seen how frames are used to divide a page into multiple sections. For example if we
want to create a Web page that contains information on three different topics, then we
could use frames.
One of the most important points in Web pages is the interaction with the end user.
For creating interactive Web pages we use Forms. In a form we can have different
controls like Text box, Radio buttons, check box, drop down lists etc. All these
controls allow us to interact with the user accept inputs from the user. In the final
section we have learned about some of the recently introduced tags that are available
in the latest version of HTML.
3.9 SOLUTIONS/ ANSWERS

Scripting Languages
78
1. Following is the code to design a Web page that provides links to five different
Web sites.
<HTML>
<TITLE> Link to five different Web sites </title>
<BODY>
Web site 1 <A HREF="http://www.hotmail.com/">Hotmail</A>
Web site 2 <A HREF="http://www.google.com/">google</A>
Web site 3 <A HREF="http://www.astalavista.com/">altavista</A>
Web site 4 <A HREF="http://www.education.com/">education</A>
Web site 5 <A HREF="http://www.computer.com/">computer</A>
</BODY>
</HTML>
2. Following is the code for the given page
<HTML>
<HEAD>
</HEAD>
<BODY>
<B><FONT SIZE=5><P>GENERAL TABLE OF CONTENTS</P>
</FONT><P>So, you want to make a Web page</P></B> LESSONS:
<P><A HREF="../../makapage/introduction.htm">Introduction</A></P>
<P><A HREF="../../makapage/lesson01.html">Lesson 1</A>: getting started, saving
as html <BR>
<A HREF="../../makapage/lesson02.html">Lesson 2</A>: backgrounds, bold, italic,
font & fontsize <BR>
<A HREF="../../makapage/lesson03.html">Lesson 3</A>: basic formatting, line
breaks, inserting images <BR>
<A HREF="../../makapage/lesson04.html">Lesson 4</A>: links, images, thumbnails,
anchors <BR>
<A HREF="../../makapage/lesson05.html">Lesson 5</A>: lists, more formatting,
horizontal rules, comments <BR>
<A HREF="../../makapage/lesson06.html">Lesson 6</A>: more resources <BR>
<A HREF="../../makapage/picker/index.html">Color Picker</A> <BR>
<A HREF="../../makapage/dafonts/master.html">Handy Dandy Font Viewer</A> -
<A HREF="../../makapage/dafonts/index.html">(intro)</A> <BR>
<A HREF="../../makapage/special.html">Special Characters</A> <BR>
<A HREF="../../makapage/upload.html">Upload your page to the Web</A> </P>
<P> </P>
<FONT SIZE=2><P> </P></FONT></BODY>
</HTML>
Code of the given page
<HTML>
<HEAD>
</HEAD>
<BODY>
<P> Following are the key to success: </P>
<UL>
<LI><img src = “arrow.gif”>
Devotion </LI>
<LI><img src = “arrow .gif”>
Hardwork </LI>
<LI><img src =”arrow.gif”>
Smart work </LI>
</UL>
<P> Following are the key to success: </P>
<OL>
Comme
he
output
of this
code is
not
very
pleasin
g – all
the
options
are on
the
same
physica
l line.
Could
be
improv
ed

Advanced HTML
79
<LI> Devotion </LI>
<LI> Hardwork </LI>
<LI> Smartwork </LI>
</OL>
</BODY>
</HTML>
1. Following is the code for a Web page that has 5 equal columns.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER CELLSPACING=3 BORDERCOLOR="#000000">
<TR><TD WIDTH="20%">
<P>Column 1</TD>
<TD WIDTH="20%">
<P>Column 1</TD>
<TD WIDTH="20%">
<P>Column 1</TD>
<TD WIDTH="20%">
<P>Column 1</TD>
<TD WIDTH="20%">
<P>Column 1</TD>
</TR>
</TABLE>
<P> </P></BODY>
</HTML>
2. Design your Bio-Data in HTML Page.
<HTML>
<HEAD>
</HEAD>
<BODY>
<B><U><P>Qualifications</P></B></U>
<P ALIGN="JUSTIFY"><B>X & XII</B> from CBSE Board.</P>
<P ALIGN="JUSTIFY"><B>BCOM (PASS)</B> from Delhi University in
1999.</P>
<P ALIGN="JUSTIFY"><B>O Level</B> from DOEACC Society India in
2000.</P>
<P ALIGN="JUSTIFY"><B>MCP </B>(Microsoft Certified Professional) in 2001
in Analyzing Requirements and Defining Solutions Architecture with
<U>93.9%</U>.</P>
<P ALIGN="JUSTIFY"><B>CIC</B> (Certificate In Computing) from Indira
Gandhi National Open University with <U>Ist Division</U>. </P>
<P ALIGN="JUSTIFY"><B>PGDCA</B> (Post Graduate Diploma in Computer
Applications) from IGNOU with <U>Ist Division</U>.</P>
<P ALIGN="JUSTIFY"><B>ADCA </B>(Advance Diploma in Computer
Applications) from IGNOU with <U>Ist Division</U>.</P>
<P ALIGN="JUSTIFY"><B>MCA </B>from Indira Gandhi National Open
University with <U>Ist Division</U>. </P>
<B><U><P>Languages Known</P>
<P ALIGN="JUSTIFY"></B></U>C including data structures, C++ including data
structure, MS COBOL 4.5, MS FORTRAN 77, Assembly using MASM, Unix Shell
Programming,<FONT SIZE=5> </FONT>HTML, Corman Common LISP, Visual
Basic 6.0.</P>
<B><U><P>Personal Details</P>
Comment: Better use tables to show
the academic history.

Scripting Languages
80
</B></U><P>Name ABC</P>
<P>Father’s Name<B>	</B>XYZ	</P>
<P>Date of Birth<B>	</B>23<SUP>rd</SUP> Jan,1979.	</P>
<P>Address<B>	</B>A-2, East Of Kailash, New Delhi.	</P>
<P>Tel.<B>	</B>29090909</P>
<P>Email<B>	</B>ram@hotmail.com</P>
<P>Sex<B>	</B>Male	</P>
<P>Marital Status<B>	</B>Single</P>
<B><U><P>Interests and activities</P>
</B></U><P>Troubleshooting hardware and software problems.	</P>
<B><U><P>Additional Assets</P>
</B></U><P>Hard work, devotion and curiosity to learn and adapt to new
environments.	</P>
<FONT SIZE=2><P> </P>
</FONT><B><P>Date:</B><FONT SIZE=2>
<B> (RAM)</P>
<P>Place:</P></B></FONT></BODY>
</HTML>
<head>
<title>IGNOU SSO</title>
<META HTTP-EQUIV="expires" CONTENT="Sat, 15 Mar 2003 23:59:59 GMT">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<form name= "theForm" action= "/suggest/emailRegistrationServlet" method=POST
onsubmit="return validate()">
<input type="Hidden" name="successURL"
value="http://email.IGNOU.com/success.html">
<input type="Hidden" name="pageTitle" value="IGNOU Email">
<input type="Hidden" name="sourceChannel" value="Email">
<table border=0 cellpadding=0 width="100%">
<tbody>
<tr bgcolor=#8fbc8f>
<td colspan=3 align=center><b class="tdw"> IGNOU Email</b></td>
</tr>
<tr bgcolor=#0066cc>
<td colspan=3><b> <font color="#FFFFFF"><span >ACCOUNT
INFORMATION</span></font></b></td>
</tr>
<tr>
<td valign=center width="31%" class="td"> IGNOU ID: </td>
<td valign=center width="43%"> <input name=username> <span >*</span>
</td>
<td bgcolor=#f0f0f0 width="26%" class="td1">Use only letters, numbers,
dot(.), minus(-) or the underscore (_) .No spaces or special characters
please.<br> <span >If you choose your IGNOU ID as xyz,
your e-mail will be xyz@IGNOU.com.</span> </td>
</tr>
<tr>
<td height=42 width="31%" class="td">Password:</td>
<td height=42 width="43%"> <input name=password type=password>
<span>*</span></td>
<td bgcolor=#f0f0f0 rowspan=2 width="26%" class="td1">Must be at least
three (3) characters long, may contain numbers (0-9) , upper and lowercase
letters (A-Z, a-z) and underscore(_) but no spaces or special characters.
Make sure it is difficult for others to guess! </td>

Advanced HTML
81
</tr>
<tr>
<td width="31%" class="td">Re-Enter Password:</td>
<td width="43%"> <input name=confirmPassword type=password> <span
>*</span></td>
</tr>
<tr>
<td width="31%" class="td">Security Queston:</td>
<td width="43%"> <input name=secretQus> <span >* </span></td>
<td bgcolor=#f0f0f0 rowspan=2 width="26%" class="td1">Just in case you
forget your password, we'll verify your identity by asking you this
question. Choose a question only you know the answer to and that has
nothing to do with your password whatsoever.</td>
</tr>
<tr>
<td height=2 width="31%" class="td">Your Answer:</td>
<td height=2 width="43%"> <input name=secretAns> <span >*</span>
</td>
</tr>
<tr>
<td width="31%" class="td">Alternative Email</td>
<td width="43%"> <input maxlength=100 name=altEmail size=35>
  <span >(optional)
</span></td>
<td bgcolor=#f0f0f0 width="26%" class="td1"> This will help you to retrieve
your IGNOU ID <br>
and password in case you forget it. </td>
</tr>
<tr bgcolor=#0066cc>
<td colspan=3><b class="tdw"> <font color="#FFFFFF"><span
class="tdb">PERSONAL
INFORMATION</span></font></b></td>
</tr>
<tr>
<td width="31%" class="td">First Name:</td>
<td width="43%"> <input name=firstName
document.theform.firstname.focus();>
<input type=hidden name=frmURL>
<input type=hidden name="education" value="u">
<span >* </span></td>
<td width="26%"> </td>
</tr>
<tr>
<td width="31%" class="td">Middle Name:</td>
<td width="43%"> <input name=MiddleName> </td>
</tr>
<tr>
<td width="31%" class="td">Last Name:</td>
<td width="43%"> <input name=lastName> <span >*</span> </td>
</tr>
<tr>
<td width="31%" class="td">Date of Birth</td>
<td width="43%"> <font face="MS Sans Serif" size=2>
<select name="date">
<option selected><font face="Arial, Helvetica, sans-serif">
date</font></option>
<option value="01"><font face="Arial, Helvetica, sans-serif">
01</font></option>

Scripting Languages
82
02</font></option>
<option value="03"><font face="Arial, Helvetica, sans
serif">03</font></option>
04</font></option>
05</font></option>
06</font></option>
07</font></option>
08</font></option>
09</font></option>
10</font></option>
11</font></option>
12</font></option>
13</font></option>
14</font></option>
15</font></option>
16</font></option>
17</font></option>
18</font></option>
19</font></option>
20</font></option>
21</font></option>
22</font></option>
23</font></option>
24</font></option>
25</font></option>
26</font></option>
27</font></option>
28</font></option>
29</font></option>
30</font></option>
31</font></option>

Advanced HTML
83
</select>
<select name="month">
<option selected><font face="Arial, Helvetica, sans-serif">
month</font></option>
01</font></option>
02</font></option>
03</font></option>
04</font></option>
05</font></option>
06</font></option>
07</font></option>
08</font></option>
09</font></option>
10</font></option>
11</font></option>
12</font></option>
</select>
<select
size=1 name=year>
<option selected>year</option>
<option value="1970">1970</option>

Scripting Languages
84
</select>
</font><span > *</span> </td>
<td rowspan=5 align="center"> <font face=arial size=2 color=red><b>Accounts
not accessed for a <br>
consecutive period of 120 days or<br>
more may be deactivated without<br>
any prior intimation. All data in such<br>
mailboxes will be lost. IGNOU will<br>
have no liability for the same.</b> </font> </td>
</tr>
<tr>
<td height=25 width="31%" class="td">Marital Status </td>
<td height=25 width="43%"> <select name=maritalStatus size=1 id="select">
<option selected value="">[Select one]</option>
<option value="S">Single</option>
<option value="M">Married</option>
</select> <span >*</span> </td>
</tr>
<tr>
<td width="31%" class="td">Gender</td>
<td width="43%"> <font face="Arial, Helvetica, sans-serif"
size=2>
<select size=1 name=gender>
<option value=""
selected>[Select one]</option>
<option value=M>Male</option>
<option
value=F>Female</option>
</select>
</font> <span >*</span> </td>
</tr>
<tr>
<td height=35 width="31%" class="td">Pincode </td>
<td height=35 width="43%"> <span class=td1r>
<input name=pin size=10 maxlength=15 onKeyPress="if (event.keyCode <
45 || event.keyCode > 57) event.returnValue = false;">
</span> <span >*</span> </td>
</tr>
<tr>
<td height=24 width="31%" class="td">Country:</td>
<td height=24 width="43%"> <select name="country" size=3>
<option value="in">Select One
<option value="us">United States of America
<option value="bs">Bahamas
<option value="bh">Bahrain
<option value="bd">Bangladesh
<option value="bb">Barbados
<option value="by">Belarus
<option value="be">Belgium
<option value="bz">Belize
<option value="bj">Benin
<option value="bm">Bermuda
<option value="bt">Bhutan
<option value="cv">Cape Verde
<option value="zm">Zambia

Advanced HTML
85
<option value="zw">Zimbabwe </select> <span >* </span></td>
</tr>
<tr>
<td height=27 width="31%" class="td"> Education </td>
<td height=27 width="43%"> <select name=education id="select2">
<option selected value="">[Select One]</option>
<option value=Grad_Post_Prof>Graduate/Post Graduate-
Professional</option>
<option value=Grad_Post_Gen>Graduate/Post Graduate-General</option>
<option value=SomeColl>SomeCollege but not Graduate</option>
<option value=SSC_HSC>SSC/HSC</option>
<option value=5to9>School 5-9 Years</option>
<option value=lessthan4>School upto 4 years</option>
</select> <span >* </span></td>
<td height=27 width="26%"> </td>
</tr>
<tr>
<td height=2 width="31%" class="td">Annual Income </td>
<td height=2 width="43%"> <select name=incomeGroup size=1 id="select3"
style="HEIGHT: 22px; WIDTH: 190px">
<option selected value="">[Select one]</option>
<option value=0to1>Rs 1 Lakh & below</option>
<option value=1to3>Rs 1 Lakh -2.99 Lakhs</option>
<option value=3to5>Rs 3 - 4.99 Lakhs</option>
<option value=5to10>Rs 5 - 9.99 Lakhs</option>
<option value=mysterious>a mysterious sum of money</option>
<option value=morethan10>above Rs 10 Lakhs</option>
</select> <span > * </span></td>
<td height=2 width="26%"> </td>
</tr>
<TR>
<TD width="31%"><FONT face="Arial, Helvetica, sans-serif"
size=2>City:</FONT></TD>
<TD colSpan=2> <FONT face="Arial, Helvetica, sans-serif" size=2>
<SELECT name=city>
<option value="" selected>[Select One] </option>
<option value="Ahmedabad">Ahmedabad </option>
<option value="Bangalore">Bangalore </option>
<option value="Patna">Patna </option>
<option value="Noida">NOIDA </option>
<option value="Pune">Pune </option>
<option value="Surat">Surat </option>
<option value="Varanasi">Varanasi </option>
<option value="Vishakapatnam">Vishakapatnam</option>
</SELECT>
</FONT> <FONT color=#ff0000 face=Arial size=1>*</FONT> </TD>
</TR>
<TR>
<TD height=35><FONT face="Arial, Helvetica, sans-serif"
size=2>State:</FONT></TD>
<TD height=35>
<INPUT maxLength=100 name=state size=35>
<FONT color=#ff0000 face=Arial size=1>*</FONT>
</TD>
<td height=2> </td>
</TR>
<TR>
size=2>Occupation</FONT></TD>

Scripting Languages
86
<TD height=25>
<SELECT name=occupation size=1 style="HEIGHT: 22px; WIDTH: 190px">
<option value="" selected>[Select one]</option>
<option value="Artist">Artist</option>
<option value="Social worker">Social worker</option>
<option value="Student">Student</option>
<option value="Teacher/Administrator">Teacher / Administrator</option>
<option value="Unemployed/Between_jobs">Unemployed / Between
jobs</option>
<option value="No_Work">What ? me work</option>
<option value="Others">others</option>
</SELECT> <font color=#ff0000 face=Arial size=1>*</font> </TD>
<TD height=25>  </TD>
</TR>
<TR>
size=2>Industry</FONT></TD>
<TD height=29>
<SELECT name=industry>
<OPTION selected value="">[Select one]</OPTION>
<OPTION value=Sales>Sales</OPTION>
<OPTION value=Marketing>Marketing</OPTION>
<OPTION value=Production>Production</OPTION>
<OPTION value="Self_Employed">Self Employed</OPTION>
<OPTION value=Student>Student</OPTION>
<OPTION value=Others>Others</OPTION>
</SELECT> <font color=#ff0000 face=Arial size=1>*</font> </TD>
<TD height=29> </TD>
</TR>
</table>
</form>
</body>
</html>

Advanced html

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Advanced html (20)

More from Suneel Dogra (20)

Advanced html