HTML Handouts
Uploaded by
golatosami09HTML Handouts
Uploaded by
golatosami09DEPARTMENT OF INFORMATION TECHNOLOGY
FACULTY OF ENGINEERING AND TECHNOLOGY
UNIVERSITY OF SINDH, JAMSHORO
HTML LAB MANUAL
SENG: 519 Web Engineering
BS (Software Engineering) Part-III
List of Experiments
1. Basic concepts of HTML-I.
2. (a) Design a HTML page describing your profile in one paragraph in such a way that it
has a heading, a horizontal rule, three links and your photo.
(b) Design a HTML page describing your Academic career. The page should tell about
your degrees, institutions, and hobbies.
3. (a) Basic concepts of HTML-II.
(b) Design a HTML page demonstrating the concept of Internal Hyperlinking.
4. Basic concepts of HTML-III.
5. (a) Design a HTML page which gives the list of Grocery items by using ordered list.
The list should consist of Roman No., A, B, ... and so on.
(b) Design a HTML page which gives the list of Grocery items by using unordered list
and bullets are of form disc, square, and circle.
6. (a) Design a HTML page using <img> tag and background images.
(b) Design a HTML page which contains the various courses conducted in a college.
Use <marquee> tag and images.
7. Basic concept of tables and frames in HTML.
8. (a) Design a HTML page for partitioning browser window in frames and display the
different pages in partitioned windows.
(b) Design a HTML page to partition browser window in such a way that when a link
is clicked in one partition, the corresponding page is displayed in other partition.
9. Basic concepts of form designing.
10. (a) Design a HTML form for reserving a room in a Hotel.
(b) Design a HTML form to reserve a Railway ticket.
11. (a) Design a HTML form to see the result for a candidate when the results are
displayed on the web.
(b) Design a HTML form to find the Railway fare from one place to another.
Experiment No. 01
Aim :
Basic concepts of HTML-I.
Web servers
A web server is a software program that serves web pages to requesting clients. The web server
software runs on any computer. Often people refer to the host running the web-server software as the
web server, and think of it as the hardware. However, technically, the web server is just the software
program and not the hardware.
Web pages
The information on the World Wide Web is presented in web pages. You can create web pages using a
series of client-side technologies. A web page can include a variety of information: text, lists, forms for
capturing data, tables for presenting data, scripts that perform a function, multimedia content that
animate pages, and so on.
No matter the content of the web page, the web browser must process and display the page.
Web browsers
A web browser is a software program residing on a computer that you use to view pages on and
navigate the World Wide Web. When you use a browser to request a page on a website, that browser is
making a web connection to a web server.
As mentioned previously, the web browser processes the web pages that it receives from a web server
and displays the pages to the user. Depending on the browser that you use and the features it includes,
you might be able to play multimedia files, view and interact with Java applets, read your e-mail, or use
other advanced features.
Some of the most popular web browsers today are Microsoft Internet Explorer, Netscape Navigator, and
Mozilla. Unfortunately, most browsers today parse web pages differently. Web designers must pay
special attention to the way a browser behaves, or users might not see the pages as the designers
intended. Therefore, web designers test their pages on multiple browsers before publishing them on their
website.
Introduction to HTML
HTML, or HyperText Markup Language is designed to specify the logical organisation of a document,
with important hypertext extensions. It is not designed to be the language of a WYSIWYG word
processor such as Word or WordPerfect. This choice was made because the same HTML document may
be viewed by many different "browsers", of very different abilities. Thus, for example, HTML allows
you to mark selections of text as titles or paragraphs, and then leaves the interpretation of these marked
elements up to the browser. For example one browser may indent the beginning of a paragraph, while
another may only leave a blank line.
HTML instructions divide the text of a document into blocks called elements. These can be divided into
two broad categories -- those that define how the BODY of the document is to be displayed by the
browser, and those that define information `about' the document, such as the title or relationships to
other documents. The vocabulary of these elements and a description of the overall design of HTML
documents is given in the rest of Section 2. The Last part of the section also describes standard naming
schemes for HTML documents and related files.
The detailed rules for HTML (the names of the tags/elements, how they can be used) are defined using
another language known as the standard generalized markup language, or SGML. SGML is wickedly
difficult, and was designed for massive document collections, such as repair manuals for F-16 fighters,
or maintenance plans for nuclear submarines. Fortunately, HTML is much simpler!
However, SGML has useful features that HTML lacks. For this reason, markup language and software
experts have developed a new language, called XML (the eXtensible markup language) which has most
of the most useful features of HTML and SGML.
What is an HTML File?
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small 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
HTM or HTML Extension?
When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in
our examples. It might be a bad habit inherited from the past when some of the commonly used software
only allowed three letter extensions.
With newer software we think it will be perfectly safe to use .html.
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 a 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>
HTML Elements
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
This is an HTML element:
<b>This text is bold</b>
The HTML element starts with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>
The purpose of the <b> tag is to define an HTML element that should be displayed as bold.
This is also an HTML element:
<body>
This is my first homepage. <b>This text is bold</b>
</body>
This HTML element starts with the start tag <body>, and ends with the end tag </body>.
The purpose of the <body> tag is to define the HTML element that contains the body of the HTML
document.
Basic HTML Tags
The most important tags in HTML are tags that define headings, paragraphs and line breaks.
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.
Basic HTML Tags
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
Experiment No. 2(a)
Aim :
Design a HTML page describing your profile in one paragraph in such a way that it has a heading, a
horizontal rule, three links and your photo.
Program
<HTML>
<HEAD>
<TITLE>Profile
</TITLE>
</HEAD>
<body bgcolor="aqua"><H1 ALIGN="CENTER">PROFILE<HR></H1><BR>
               &nb
sp  
               &nb
sp   
               &nb
sp               &
nbsp
               &nb
sp          
               &nb
sp          
               &nb
sp               &
nbsp 
               &nb
sp       
               &nb
sp
               &nb
sp               &
nbsp               
               &nb
sp               &
nbsp         
PHOTO<IMG SRC="C:\Documents and Settings\user\My Documents\New Folder\[Link]"
HIGHT="100" WIDTH="100" ALIGN="RIGHT"><BR><BR><BR><BR><BR><BR><BR>
<P>
<A HREF="C:\Documents and Settings\[Link]\My Documents\
[Link]">PERSONAL DETAILS</A><BR>
<A HREF="C:\Documents and Settings\[Link]\My Documents\EDUCATIONAL
[Link]">EDUCATIONAL QUALIFICATIONS</A><BR>
<A HREF="C:\Documents and Settings\[Link]\My Documents\[Link]">
SKILLS</A><BR>
</P>
</BODY>
</HTML>
Output
When you click on Personal Details , the Output will be :
When you click on Educational Qualification , the Output will be :
When you click on Skills, the Output will be :
Assignment :
Design the home page of your college containing the introduction of your college using <HR>, <p>,
<marquee>, heading tags and their different attributes.
Viva-Voce Questions :
1. What is the full form of HTML?
2. Why we call HTML as a markup language?
3. What is the meaning of Hypertext?
4. How many types of heading tags can be used in HTML?
5. What is the difference between the size and width attribute of <HR> tag?
Experiment No. 2(b)
Aim :
Design HTML page describing your Academic career. The page will tell about the degrees, institutions,
and your hobbies, add some lists too.
Program
<HTML>
<HEAD>
<TITLE>PERSONAL DETAILS</TITLE>
</HEAD>
<BODY text=blue bgColor=aqua>
<H1 align=center><FONT color=black>ABOUT MY ACADEMIC CAREER</FONT></H1>
<TABLE align=center border=3>
<TBODY>
<TR>
<TH align=middle>DEGREES </TH>
<TH align=middle>BOARD/UNIVERSITY</TH>
<TH align=middle>INSTITUTE </TH>
<TH align=middle>PASSING YEAR </TH>
<TH align=middle>PERCENTAGE </TH>
<TH align=middle>DIVISION </TH>
</TR>
<TR>
<TD align=middle>10TH </TD>
<TD align=middle>BOARD OF SECONDARY EDUCATION BHOPAL</TD>
<TD align=middle>SHRI [Link] </TD>
<TD align=middle>1999 </TD>
<TD align=middle>72 % </TD>
<TD align=middle>FIRST </TD>
</TR>
<TR>
<TD align=middle>12TH </TD>
<TD align=middle>BOARD OF SECONDARY EDUCATION BHOPAL</TD>
<TD align=middle>SHRI [Link] </TD>
<TD align=middle>2001 </TD>
<TD align=middle>73 % </TD>
<TD align=middle>FIRST </TD>
</TR>
<TR>
<TD align=middle>B.E. </TD>
<TD align=middle>PT,[Link]</TD>
<TD align=middle>[Link] </TD>
<TD align=middle>2005 </TD>
<TD align=middle>70 % </TD>
<TD align=middle>FIRST </TD>
</TR>
</TABLE>
<PRE>
<H1><FONT COLOR="BLACK">MY HOBBIES ARE : </FONT> </H1>
1. PLAYING CRICKET
2. SINGING SONGS
3. WATCHING MOVIES
</PRE>
</BODY>
</HTML>
Output
Assignment :
Design an HTML page containing official address of various management personnel using <address>
tag and give the list of all faculty members with their e-mail ids in a table format.
Viva-Voce Questions :
1. What is the use of <PRE> tag?
2. Which attribute of <caption> tag depends on the same attribute of <table> tag?
3. How we can set the background color of a individual cell in the table?
4. What is the difference between cellspacing and cellpadding?
5. What is the difference between rowspan and colspan?
Experiment No. 3(a)
Aim :
Basic concepts of HTML-II.
HTML Links
HTML uses a hyperlink to link to another document on the Web.
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 from, 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 W3Schools:
<a href="[Link] W3Schools!</a>
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="[Link]
target="_blank">Visit W3Schools!</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 name="tips">Useful Tips Section</a>
You should notice that a named anchor is not displayed in a special way.
To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like
this:
<a href="[Link]
Jump to the Useful Tips Section</a>
A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:
<a href="#tips">Jump to the Useful Tips Section</a>
Experiment No. 3(b)
Aim :
Design HTML page demonstrating concept of Internal Hyperlink.
Program
<HTML>
<HEAD>
<TITLE>INTERNAL HYPERLINK
</TITLE>
</HEAD>
<body bgcolor="pink">
<a name="introduction"><h1>introduction</h1>
<h1>aaaaaaaaaaaaaaaaaaaaa
<br>
<a name="theory">theory
<h1>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
<BR>
<a name="adv">advantage
<h1>
fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
<br>
<a name="dis">disadvantage
<h1>
gggggggggggggggggggggggggggggggg
rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr<br>
<a href="#dis" align="bottom">dis</a><br>
<a href="#introduction" align="bottom">introduction</a><br>
<a href="#theory" align="bottom">theory</a><br>
<a href="#adv" align="bottom">adv</a><br>
</body>
</html>
Output
Assignment :
Design an HTML page containing various links related to the college. The links should be like this :
Home, Courses, Co-curricular activities, Contact Us, Admission.
Experiment No. 4
Aim :
Basic concepts of HTML-III.
HTML Lists
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
<dir> Deprecated. Use <ul> instead
<menu> Deprecated. Use <ul> instead
HTML Images
With HTML you can display images in a document.
The Image Tag and the Src Attribute
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 attribute. Src stands for "source". The value of
the src attribute is the URL of the image you want to display on your page.
The syntax of defining an image:
<img src="url">
The URL points to the location where the image is stored. An image named "[Link]" located in the
directory "images" on "[Link]" has the URL: [Link]
The browser puts the image where the image tag occurs in the document. If you put an image tag
between two paragraphs, the browser shows the first paragraph, then the image, and then the second
paragraph.
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an
author-defined text:
<img src="[Link]" alt="Big Boat">
The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images.
The browser will then display the alternate text instead of the image. It is a good practice to include the
"alt" attribute for each image on a page, to improve the display and usefulness of your document for
people who have text-only browsers.
Image Tags
Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
Experiment No. 5(a)
Aim :
Design a HTML page which gives the list of Grocery items by using ordered list. List should consist of
Roman no.A, B ... and so on.
Program
<HTML>
<HEAD>
<TITLE> GROCERY ITEMS
</TITLE>
</HEAD>
<BODY BGCOLOR="AQUA">
<OL TYPE="A">
<LI> SNACKS </LI>
<OL TYPE="1">
<LI> IDALY </LI>
<LI> SAMOSA </LI>
<LI> NOODLES </LI>
<LI> TEA </LI>
<LI> COFFEE </LI>
</OL>
</OL>
<OL TYPE="A" START="2">
<LI> FOODS </LI>
<OL TYPE="1" >
<LI> RICE </LI>
<LI> CHAPATI </LI>
<LI> SALAD </LI>
<LI> PAPAD </LI>
<LI> PICKLE </LI>
</OL>
</OL>
<OL TYPE="A" START="3">
<LI> SWEET DISH </LI>
<OL TYPE="1">
<LI> ICECREAM </LI>
<LI> CAKE </LI>
<LI> PASTRY </LI>
<LI> CHOCKLATES </LI>
</OL>
</OL>
</BODY>
</HTML>
Assignment:
Design an HTML page containing the list of all the courses conducted in your college. Use both ordered
and unordered list and in nested form.
Experiment No. 5(b)
Aim :
Design a HTML page which gives the list of Grocery items by using unordered list bullets are of form
disc, square, and circle.
Program
<HTML>
<HEAD>
<TITLE> GROCERY ITEMS
</TITLE>
</HEAD>
<BODY BGCOLOR="AQUA">
<UL TYPE="DISC">
<LI> SNACKS </LI>
<UL TYPE="CIRCLE">
<LI> IDALY </LI>
<LI> SAMOSA </LI>
<LI> NOODLES </LI>
<LI> TEA </LI>
<LI> COFFEE </LI>
</UL>
</UL>
<UL TYPE="SQUARE">
<LI> FOODS </LI>
<UL TYPE="CIRCLE">
<LI> RICE </LI>
<LI> CHAPATI </LI>
<LI> SALAD </LI>
<LI> PAPAD </LI>
<LI> PICKLE </LI>
</UL>
</UL>
<UL TYPE="CIRCLE ">
<LI> SWEET DISH </LI>
<UL TYPE="SQUARE">
<LI> ICECREAM </LI>
<LI> CAKE </LI>
<LI> PASTRY </LI>
<LI> CHOCKLATES </LI>
</UL>
</UL>
</BODY>
</HTML>
Assignment :
Design an HTML page containing the department wise list of faculty members.
Experiment No. 6(a)
Aim :
Design a HTML page using <img> tag and background images.
Program
<html>
<!--create a website using image tag-->
<head>
</head>
<body background="[Link]" bgproperties="fixed">
<p>This is just a image <img src="prac_img.jpg" alt="a small image was there" align="absbottom"
border="7"> to check various attributes of image tag</p>
<a href="[Link]"><img src="[Link]" border="1" align="left"></a>
</body>
</html>
Output
Experiment No. 6(b)
Aim :
Design a HTML page which contains the various courses conducted in a college. Use <marquee> tag
and images.
<html>
<head>
<title> Rugnta College of Engg. & Tech., Bhilai>
</title>
</head>
<img src="[Link]" align=right height=100 width=100>
<body TEXT="black" LINK="FFFFF" VLINK="green" ALINK="red" background="[Link]"
>
<h1> "Welcome to the world of IT and Electronics" </h1>
<!--HR Width "80%" Size=100 ALIGN=RIGHT color="#FFFFFF"-->
<BR>
<P ALIGN=CENTRE>
<font color="#FFFFFF">
<MARQUEE align=centre bgcolor="blue" style=slide loop=infinite>COLLEGE WITH
A DIFFERENCE</marquee>
</font>
</p>
<Font face="century">List of programmes conducted here:
<OL TYPE=A>
<LI><A HREF="#MCAtext">MCA</A></LI>
<LI>BE</A></LI>
<OL Type=i><LI><A HREF="#CStext">CS</A></LI><DL><DT><DD> Minimum qualification:
Graduate in any discipline</DD></DT></DL>
<LI><A HREF="#ITtext">IT</A></LI><DL><DT><DD> Minimum qualification: Graduate in
any discipline</DD></DT></DL>
</OL>
<LI><A HREF="#MTECHtext">[Link].</A></LI>
</OL>
</font>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<UL>
<LI>
<P><a Name="MCAtext"><I><B><FONT COLOR="#999999" Face="Verdana">MCA has 6
semesters</FONT></B></I></A></P>
</LI>
<LI>
<P><a Name="CStext"><I><B><FONT COLOR="#999999" Face="Verdana">BE(CS) has 8
semesters</FONT></B></I></A></P>
</LI>
<LI>
<P><a Name="ITtext"><I><B><FONT COLOR="#999999" Face="Verdana">BE(IT) has 8
semesters</FONT></B></I></A></P>
</LI>
<LI>
<P><a Name="MTECHtext"><I><B><FONT COLOR="#999999" Face="Verdana">[Link]. has 4
semesters</FONT></B></I></A></P>
</LI>
</BODY>
</HTML>
Output
Assignment :
Design an HTML page giving the various co-curricular activities performed in your college. Give the
images of the activities also.
Viva-Voce Questions :
1. What are the different directions we can provide to a marquee?
2. What happen if I provide loop attribute of <marquee> tag a value equals to 3?
3. Can we have a blinking marquee in HTML?
4. What are the different behavior we can provide to a marquee?
Experiment No. 7
Aim :
Basic concept of tables and frames in HTML.
HTML Frames
With frames, you can display more than one Web page in the same browser window.
Frames
With frames, you can display more than one HTML document in the same browser window. Each
HTML document is called a frame, and each frame is independent of the others.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents
It is difficult to print the entire page
The Frameset Tag
The <frameset> tag defines how to divide the window into frames
Each frameset defines a set of rows or columns
The values of the rows/columns indicate the amount of screen area each row/column will occupy
The Frame Tag
The <frame> tag defines what HTML document to put into each frame
In the example below we have a frameset with two columns. The first column is set to 25% of the width
of the browser window. The second column is set to 75% of the width of the browser window. The
HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is
put into the second column:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Frame Tags
Tag Description
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that do not handle frames
<iframe> Defines an inline sub window (frame)
HTML Tables
With HTML you can create tables.
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 ( ) 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> </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
Experiment No. 8(a)
Aim :
Design a HTML page for paritioning browser window in frames and display the different pages in
partitioned windows.
Program
<HTML>
<HEAD>
<TITLE>framee
</TITLE>
</HEAD>
<frameset cols="50%,*">
<frame src="D:\SUYASH1\GROCERY [Link]" name="frame1">
<frame src="D:\SUYASH1\[Link]" name="frame2">
</frameset>
<HTML>
Output
Experiment No. 8(b)
Aim :
Design HTML page to partition browser window, design in such a way that when a link is clicked in one
partition, the corresponding page is displayed in other partition.
Program
<html>
<!-Create a webpage with different links to other web pages and display these webpages in a particular
frame-->
<head>
<title>
Indexing for navigating>
</title>
</head>
<body bgcolor="black" link="white" alink="yellow" vlink="00FF33">
<hr size=2 width=180 align=left>
<a href="home1(prac1).html" target="display">Home(practical1)</a>
<br>
<hr size=2 width=180 align=left>
<a href="home2(prac1).html" target="display"><img src="[Link]" border=0 height=80
width=80></a>
<br>
<hr size=2 width=180 align=left>
<a href="image(prac2).html" target="display">Co-Curicular Activities(practical2)</a>
<br>
<hr size=2 width=180 align=left>
<a href="table(prac2+prac3).html" target="display">Student's List(practical2+practical3)</a>
<br>
<hr size=2 width=180 align=left>
<a href="form1(prac4+prac5).html" target="display">Login Form-Static(practical4+practical5)</a>
<br>
<hr size=2 width=180 align=left>
<a href="form2(prac4+prac5).html" target="display">Entry Form-Static(practical4+practical5)</a>
<br>
<hr size=2 width=180 align=left>
<a href="student_info(prac6).asp" target="display">Entry Form-Results using GET(practical6)</a>
<br>
<hr size=2 width=180 align=left>
<a href="student_info(prac7).asp" target="display">Entry Form-Results using POST(practical7)</a>
<br>
<hr size=2 width=180 align=left>
<a href="student_info(prac8).asp" target="display">Client side validation(practical8)</a>
<br>
<hr size=2 width=180 align=left>
<a href="login(prac9).asp" target="display">Server side validation(practical9)</a>
<br>
<hr size=2 width=180 align=left>
<a href="[Link]" target="display">Contact Us(practical1)</a>
<br>
<hr size=2 width=180 align=left>
</body>
</html>
Code for dividing the web pages into frames
<html>
<!--Divide a web page into 3 diferent frames using <frameset> tag-->
<head>
<title> Using frames</title>
<frameset rows="15%,*">
<frameset cols="100%,*">
<frame src="[Link]" noresize SCROLLING="NO">
</frameset>
<frameset cols="30%,*">
<frame src="index(prac2).html" name="index" noresize scrolling=auto>
<frame src="image(prac2).html" name="display" noresize>
</frameset>
</frameset>
</head>
<body>
</body>
</html>
Output
Assignment :
Divide your web browser window in two frames. The left frame should contain the links related to
various information about your college. When these links are clicked the corresponding page should be
opened in the right frame.
Viva-Voce Questions :
1. What attribute should we use if we don’t want resizing in different frames?
2. What is the essential attribute we use for displaying a web page in a particular frame?
3. What is the meaning of target attribute in a hyperlinking process?
Experiment No. 9
Aim :
Basic concepts of form designing.
HTML Forms and Input
HTML Forms are used to select different kinds of user input.
Forms
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag.
<form>
<input>
<input>
</form>
Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The
most commonly used input types are explained below.
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
How it looks in a browser:
First name:
Last name:
Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20
characters by default.
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
How it looks in a browser:
Male
Female
Note that only one option can be chosen.
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of
choices.
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
How it looks in a browser:
I have a bike:
I have a car:
I have an airplane:
The Form's Action Attribute and the Submit Button
When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's
action attribute defines the name of the file to send the content to. The file defined in the action attribute
usually does something with the received input.
<form name="input" action="html_form_action.asp"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
How it looks in a browser:
Username:
If you type some characters in the text field above, and click the "Submit" button, you will send your
input to a page called "html_form_action.asp". That page will show you the received input.
Form Tags
Tag Description
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area (a multi-line text input control)
<label> Defines a label to a control
<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset
<select> Defines a selectable list (a drop-down box)
<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a push button
<isindexs> Deprecated. Use <input> instead
Experiment No. 10(a)
Aim :
Design a HTML form for reserving a room in a Hotel.
Program
<HTML>
<HEAD>
<TITLE>HOTEL
</TITLE>
</HEAD>
<BODY BGCOLOR="PINK">
<FORM>
<P ALIGN ="CENTER"><FONT SIZE=8>HOTEL ROOM RESERVATION
FORM</FONT><BR><HR>
<CENTER><U><B><FONT SIZE =5>PERSONAL
INFORMATION</FONT></B></U></CENTER></P>
               &nb
sp               &
nbsp               
    First Name <INPUT TYPE="TEXT"
NAME="T1">       Last Name<INPUT TYPE="TEXT"
NAME="T2"><BR><BR>
               &nb
sp               &
nbsp               
    City
           <INPUT TYPE="TEXT"
NAME="T3">      
State         <INPUT TYPE="TEXT"
NAME="T4"><BR><BR>
               &nb
sp               &
nbsp               
    Address1   <INPUT TYPE="TEXT"
NAME="T5">       Address 2 <INPUT TYPE="TEXT"
NAME="T6"><BR><BR>
               &nb
sp               &
nbsp               
    Post Code  <INPUT TYPE="TEXT"
NAME="T7">      Country     <INPUT
TYPE="TEXT" NAME="T8"><BR><BR>
               &nb
sp               &
nbsp               
    Telephone  <INPUT TYPE="TEXT"
NAME="T9">       Fax     &nbs
p     <INPUT TYPE="TEXT" NAME="T10"><BR><BR>
               &nb
sp               &
nbsp               
    E-Mail       <INPUT TYPE="TEXT"
NAME="T11">       Nationality <INPUT
TYPE="TEXT" NAME="T12"><BR><BR>
<HR>
<CENTER><B><U><FONT SIZE =5>YOUR ARRIVAL AT
HOTEL</FONT></U></B></CENTER>
<BR>              &nbs
p               &n
bsp               
               &nb
sp               &
nbsp ARRIVAL DATE          
         ARRIVAL TIME
<BR>              &nbs
p               &n
bsp               
               &nb
sp               &
nbsp   <INPUT TYPE"=TEXT" NAME="T13" SIZE
="10">              &n
bsp             <INPUT
TYPE="TEXT" NAME="T14"SIZE="10">
<BR>
<HR>
<CENTER><B><U><FONT SIZE =5>YOUR DEPARTURE
DETAILS</FONT></U></B></CENTER>
<BR>              &nbs
p               &n
bsp               
               &nb
sp               &
nbsp DEPARTURE DATE          
     DEPARTURE TIME
<BR>              &nbs
p               &n
bsp               
               &nb
sp               &
nbsp   <INPUT TYPE"=TEXT" NAME="T15" SIZE
="10">              &n
bsp             <INPUT
TYPE="TEXT" NAME="T16"SIZE="10">
<BR>
<HR>
<CENTER><B><U><FONT SIZE =5>ROOMS REQUIRED</FONT></U></B></CENTER>
<BR>              &nbs
p               &n
bsp               
               TYPE OF
ROOMS
               &nb
sp  [Link] PRESONS          NO. OF ROOMS
<BR>              &nbs
p               &n
bsp               
              
<SELECT><OPTION>CHOOSE ONE</OPTION><OPTION>SINGLE
ROOM</OPTION><OPTION>DOUBLE ROOM</OPTION><OPTION>SINGLE ROOM WITH
AC</OPTION><OPTION>SINGLE ROOM WITH
AC</OPTION></SELECT>         <INPUT
TYPE="TEXT" NAME="T19" SIZE ="10">
               &nb
sp  <INPUT TYPE="TEXT" NAME="T20" SIZE ="10">
<BR>
<HR>
<CENTER><B><U><FONT SIZE =5>HOW WOULD YOU LIKE TO PAY FOR YOUR
RESERVATION? </FONT></U></B></CENTER>
<BR>              &nbs
p               &n
bsp               
               &nb
sp               &
nbsp  PAYMENT MODE          
     IF BY CREDIT CARD
<BR>              &nbs
p               &n
bsp               
               &nb
sp               &
nbsp   <SELECT><OPTION>CHOOSE ONE</OPTION><OPTION>CASH
PAYMENT</OPTION><OPTION>BANK DEPOSITE</OPTION><OPTION>CREDIT
CARD</OPTION></SELECT>          &nbs
p       <SELECT><OPTION>CHOOSE
ONE</OPTION><OPTION>AMERICAN
EXPRESS</OPTION><OPTION>VISA</OPTION><OPTION>MASTER
CARD</OPTION></SELECT>
<BR>              &nbs
p               &n
bsp               
               &nb
sp               &
nbsp  CREDIT CARD NUMBER   EXPIRY DATE
<BR>              &nbs
p               &n
bsp               
               &nb
sp               &
nbsp   <INPUT TYPE ="TEXT" NAME="T21" SIZE
="10">              &n
bsp               <
INPUT TYPE="TEXT" NAME="T122"SIZE="10">
<BR>
<HR>
</BODY>
</HTML>
Output
Assignment :
Design a login form. Use password input type.
Viva-Voce Questions :
1. What are the various input types in a form?
2. What is the use of hidden input type in a form?
3. How many types of buttons can be used in a form and what is the function of reset button?
Experiment No. 10(b)
Aim :
Design a HTML form to reserve a Railway Ticket.
Program
<HTML>
<HEAD>
<TITLE>Railway Reservation Form</title>
</HEAD>
<Body bgcolor="Aqua">
<FORM>
<p align = "center">
<caption align ="Top">RAILWAY RESERVATION/CANCELLATION REQUISITION
FORM</CAPTION></P>
If you are a Medical Practitioner Please tick ( ) in Box Dr <INPUT TYPE="TEXT"
NAME="T1"><BR>(You could be of help in an emergency)
<BR><BR>If you want Sr. Citizen concession, please write Yes/No in box <INPUT TYPE="TEXT"
NAME="T2"><BR>(if yes, please carry a proof of age during the journey to avoid <BR>
inconvenience of penal charging under extant Railway Rules)<BR><BR>
Do you want to be upgraded without any extra charge? Write <INPUT TYPE="TEXT"
NAME="T2"><BR>Yes/No in the box.<BR>(If this option is not exercised, full fare paying passengers
may be upgraded automatically)
<BR><BR>
Train No & Name ___________________ Date of journey______________________ <BR>
Class ____________________________ No of Berth/Seat_______<BR>
Station from _______________________ To __________________<BR>
Boarding at ______________________ Reservation upto
_____________________<BR><BR><BR><BR>
<TABLE BORDER =2>
<TR>
<TH ALIGN="CENTER"> [Link].</TH>
<TH ALIGN="CENTER"> Name in Block letter(not more than <BR>15 chars).</TH>
<TH ALIGN="CENTER"> Sex(M/F) </TH>
<TH ALIGN="CENTER"> Age</TH>
<TH ALIGN="CENTER"> Concession/TravelAuthority <BR>No.</TH>
<TH ALIGN="CENTER">Choice if any</TH>
</TR>
<TR>
<TD ALIGN="CENTER">1</TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
</TR>
<TR>
<TD ALIGN="CENTER">2</TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
</TR>
<TR>
<TD ALIGN="CENTER">3</TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
</TR>
<TR>
<TD ALIGN="CENTER">4</TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
</TR>
<TR>
<TD ALIGN="CENTER">5</TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
</TR>
<TR>
<TD ALIGN="CENTER">6</TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
</TR>
</TABLE>
<BR><BR><BR>
CHILDREN BELOW 5 YEARS (FOR WHOM TICKET IS NOT TO BE ISSUED) <BR><BR>
<TABLE BORDER=2>
<TR>
<TH ALIGN="CENTER"WIDTH=100> [Link].</TH>
<TH ALIGN="CENTER"WIDTH=350> Name in Block letter</TH>
<TH ALIGN="CENTER"WIDTH=100> Sex(M/F) </TH>
<TH ALIGN="CENTER"WIDTH=90> Age</TH>
</TR>
<TR>
<TD ALIGN="CENTER">1</TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
</TR>
<TR>
<TD ALIGN="CENTER">2</TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
</TR>
<TR>
<TD ALIGN="CENTER">3</TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
<TD ALIGN="CENTER"></TD>
</TR>
</TABLE><BR><BR>
<B>               
             <u>ONWARD/
RETURN JOURNEY DETAILS </U></B><BR>
Train No. & Name________________________ Date ________________________ <BR>
Class ________ Station from:___________________ To________________________ <BR>
Name of applicant _______________________________________________________ <BR>
Full Address ___________________________________________________________
<BR>______________________________________________________________________<BR>
<br><br>
<B>               
             <u>Signature of
the Applicant/Representative </U></B><BR>
<br><br><br>
Note : [Link] permissible passengers is 6 per requisition.<br>        
 
2. One person can give one requisition form at a time.<br>          
3. Please check your ticket and balance amount before leaving the window.<br>   
     
4. Forms not properly filled or in illegible forms shall not be entertained.<br>   
     
5. Choice is subject to availability<br>
</form>
</body>
</html>
Output
Assignment :
Design an online student admission form.
Viva-Voce Questions :
1. How to design a textbox for giving password?
2. How to limit the number of characters in a textbox?
3. Why we use same name for option input type?
Experiment No. 11(a)
Aim :
Design a HTML form to see the result for a candidate when the results are displayed on the web.
Program
<html>
<head>
<title>mark sheet
</title>
</head>
<body>
<h3 align="center">[Link] SHUKLA UNIVERSITY, RAIPUR, C.G.</H3>
<h5 align="center">Statement of marks for the examination of<H5>
<h4 align="center">[Link] [Link](II YEAR)COMPUTER [Link]. 2005</H4>
<h4><PRE>
ROLL NO.________ NAME - ___________________________
[Link] /_______ F/H NAME - ___________________________
M-NAME - ____________________________
REGULAR RUNGTA COLLEGE OF ENGG. & TECHNOLOGY,KOHKA BHILAI<PRE></h4>
<table border=2 ALIGN=CENTER>
<tr>
<td ROWSPAN=2>SUBJECTS</TD>
<TD COLSPAN=3 ALIGN=CENTER> THEORY</TD>
<TD COLSPAN=3 ALIGN=CENTER>PRACTICALS</TD>
<TD COLSPAN=3 ALIGN=CENTER>SESSIONAL</TD>
</TR>
<TR>
<TD>MIN</TD>
<TD>MAX</TD>
<TD>OBT</TD>
<TD>MIN</TD>
<TD>MAX</TD>
<TD>OBT</TD>
<TD>MIN</TD>
<TD>MAX</TD>
<TD>OBT</TD>
<TR>
<TD>SUBJECT1</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
</TR>
<TR>
<TD>SUBJECT2</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
</TR>
<TR>
<TD>SUBJECT3</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
</TR>
<TR>
<TD>SUBJECT4</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
</TR>
<TR>
<TD>SUBJECT5</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
<TD>-</TD>
</TR>
<tr>
<TD></TD>
<TD></TD>
<TD>total</TD>
<TD></TD>
<TD></TD>
<TD>total</TD>
<TD></TD>
<TD></TD>
<TD>total</TD>
<TD></TD>
</tr>
<tr>
<td colspan=10>pass/fail</td>
</TABLE>
<BODY>
</HTML>
Output
Assignment :
Design a form for issuing a book from the college library.
Experiment No. 11(b)
Aim :
Design a HTML form to find the Railway fare from one place to another.
Program
<html>
<head>
<title>Railway Fare</title>
</head>
<body bgcolor="aqua">
<h1 align="center">Fare Enquiry For A Train </h1><hr>
<form name="fare_enq">
Train Number:<input type="text" name="t1"> Day <input type="text" name="t2">
Month:
<select>
<option>Dec</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
</select> <br><br>
Originating station code:<input type="text" name="t3">Destination Station Code:<input type="text"
name="t4">
<br><br>
class:
<select>
<option>First AC</option>
<option>Second AC</option>
<option>Third AC</option>
<option>AC Chair Car</option>
<option>First Class</option>
<option>Sleeper Class</option>
<option>Second Seating</option>
</select> <br><br>
Enroute Station Code:<input type="text" name="t5"><br><br>
Via Station Code:<input type="text" name="t6"><br><br>
Age:
<select>
<option>Child Age[5-11]</option>
<option>Adult Age[12 and above]</option>
<option>Senior Citizen Female Age[60 and above]</option>
<option>Senior Citizen Male Age[60 and above]</option>
</select> <br><br>
Concession:
<select>
<OPTION VALUE="ZZZZZZ">None
<OPTION VALUE="ARTCLK">Article Clerk -> [ARTCLK (50%)]
<OPTION VALUE="ARTISF">Artist Lower Class -> [ARTISF (75%)]
<OPTION VALUE="ARTIUF">Artist Upper Class -> [ARTIUF (50%)]
<OPTION VALUE="AWD50">Award 50% -> [AWD50 (50%)]
<OPTION VALUE="AWD75">Award 75% -> [AWD75 (75%)]
<OPTION VALUE="AWD100">Award 100% -> [AWD100 (100%)]
<OPTION VALUE="BSGUDF">Bharat Scouts/Guides -> [BSGUDF (50%)]
<OPTION VALUE="BSDALF">Bharat Seva Dal -> [BSDALF (25%)]
<OPTION VALUE="BLIND">Blind Concession -> [BLIND (75%)]
<OPTION VALUE="CANCER">Cancer Patient -> (For 3A, SL, CC class) [CANCER
(75%)]
<option value="CNESC">Cancer Patient Escort-> (For 3A, SL, CC class)
[CNESC (75%)]</option>
<option value="CANCEU">Cancer Patient -> (For 1A, 2A class) [CANCEU
(50%)]</option>
<option value="CNESCU">Cancer Patient Escort-> (For 1A, 2A class) [CNESCU
(50%)]</option>
<OPTION VALUE="DOCTOR">Doctor -> [DOCTOR (10%)]
<OPTION VALUE="PUBEXA">Public Exam(6-12yrs) -> [PUBEXA (50%)]
<OPTION VALUE="CIRCLF">Circus Artist Lower Class ->[CIRCLF (75%)]
<OPTION VALUE="CIRCUF">Circus Artist Upper Class -> [CIRCUF (50%)]
<OPTION VALUE="CVINTF">Civil International -> [CVINTF (25%)]
<OPTION VALUE="DFDM">Deaf and Dumb -> [DFDM (50%)]
<option value="DFDESC">Deaf and Dumb Escort [50%]</option>
<OPTION VALUE="HNDCAP">Handicap Lower Class -> [HNDCAP (75%)]
<OPTION VALUE="HNDCUP">Handicap 1AC 2AC -> [HNDCUP (50%)]
<OPTION VALUE="HEART">Heart Patient (for 3A, SL, 2S class)-> [HEART
(75%)]
<option value="HRTESC">Heart Patient Escort (for 3A, SL, 2S class)->
[HRTESC (75%)]</option>
<option value="HEARTU">Heart Patient (for 1A, 2A class)-> [HEARTU (50%)]</option>
<option value="HRTESU">Heart Patient Escort (for 1A, 2A class)-> [HRTESU
(50%)]</option>
<option value="HMPHL">Heamophilia Patient (for 3A, CC, SL, 2S)[75%]</option>
<option value="HMPESC">Heamophilia Patient Escort (for 3A, CC, SL, 2S)[75%]
</option>
<OPTION VALUE="I1709A">IAFT 1709 Form D -> [I1709A (40%)]
<OPTION VALUE="I1720L">IAFT 1720 Lower Class -> [I1720L (50%)]
<OPTION VALUE="I1720U">IAFT 1720 Upper Class -> [I1720U (50%)]
<OPTION VALUE="WORKER">Industrial Worker -> [WORKER (25%)]
<option value="KIDNEY ">Kidney Patients (for 3A, SL, 2S Class) -> [KIDNEY
(75%)]</option>
<option value="KIESC">Kidney Patient Escort (for 3A, SL, 2S Class) ->
[KIESC (75%)]</option>
<option value="KIDNEU">Kidney Patients (for 1A, 2A Class) -> [KIDNEU
(50%)]</option>
<option value="KIESCU">Kidney Patients Escort (for 1A, 2A Class) ->
[KIESCU (50%)]</option>
<OPTION VALUE="KISANF">Kisan Concession -> [KISANF (25%)]
<OPTION VALUE="LPROSY">Leprosy Patient -> [LPROSY (75%)]
<OPTION VALUE="MNTLPT">Mental Patient -> [MNTLPT (75%)]
<OPTION VALUE="NURSE">Nurse -> [NURSE (25%)]
<OPTION VALUE="POLO">Polo Team -> [POLO (50%)]
<OPTION VALUE="PARTLF">Proffessional Artist lower class -> [PARTLF (75%)]
<OPTION VALUE="PARTUF">Proffessional Artist Upper class -> [PARTUF (50%)]
<OPTION VALUE="PTOFOR">PTO Common Wealth Country -> [PTOFOR (50%)]
<OPTION VALUE="PTORDR">PTO Indian Railway -> [PTORDR (66.6%)]
<OPTION VALUE="PUBESC">Public Examination -> [PUBESC (50%)]
<OPTION VALUE="SEARCH">Research Scholar -> [SEARCH (50%)]
<OPTION VALUE="SCOUTF">Scout Concession -> [SCOUT (50%)]
<OPTION VALUE="SRCTZN">Senior Citizen -> [SRCTZN (30%)]
<OPTION VALUE="SCINTL">Service Civil Inter -> [SCINTL (25%)]
<OPTION VALUE="SPORT">Sports Lower class -> [SPORT (75%)]
<OPTION VALUE="SPORTI">Sports Inter N Level FC -> [SPORTI (75%)]
<OPTION VALUE="SPORTN">Sports National Level FC -> [SPORTN (50%)]
<OPTION VALUE="STJONF">ST JOHN'S Ambulance -> [STJONF (25%)]
<OPTION VALUE="STDNT">Student Concession -> [STDNT (50%)]
<OPTION VALUE="STDSPS">Student SC/ST -> [STDSPS (75%)]
<OPTION VALUE="TBPAT">TB Patient -> [TBPAT (75%)]
<OPTION VALUE="TEACHR">Teacher -> [TEACHR (25%)]
<OPTION VALUE="TLSMIA">Thalassemia Patient (for 3A, SL, 2S class)->
[TLSMIA (75%)]</option>
</select> <br><br>
<input type="submit" value="Get It"><input type="submit" value="Clear Data">
</form>
</body>
</html>
Output
Assignment :
Design an HTML from for registering yourself on a mailing site.
Viva-Voce Questions :
1. Which attribute should we use to get the checkbox selected by default?
2. Which attribute should be used to display n elements at a time in a drop-down list?
3. What is the difference between maxlength and size attribute?
Experiment No. 12
Aim :
Concepts of Cascading Style Sheet (CSS).
Cascading Style Sheet
CSS is a breakthrough in Web design because it allows developers to control the style and layout of
multiple Web pages all at once. As a Web developer you can define a style for each HTML element and
apply it to as many Web pages as you want. To make a global change, simply change the style, and all
elements in the Web are updated automatically.
Style sheets allow style information to be specified in many ways. Styles can be specified inside a single
HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple
external style sheets can be referenced inside a single HTML document.
How to Insert a Style Sheet
When a browser reads a style sheet, it will format the document according to it. There are three ways of
inserting a style sheet:
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet,
you can change the look of an entire Web site by changing one file. Each page must link to the style
sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css"
href="[Link]" />
</head>
The browser will read the style definitions from the file [Link], and format the document according
to it.
An external style sheet can be written in any text editor. The file should not contain any html tags. Your
style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/[Link]")}
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal
styles in the head section by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/[Link]")}
</style>
</head>
The browser will now read the style definitions, and format the document according to it.
Note: A browser normally ignores unknown tags. This means that an old browser that does not support
styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is
possible to prevent an old browser from displaying the content by hiding it in the HTML comment
element:
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/[Link]")}
-->
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use
this method sparingly, such as when a style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any
CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you
wish to change, and each property can take a value. The property and value are separated by a colon, and
surrounded by curly braces:
body {color: black}
Note: If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}
Note: If you wish to specify more than one property, you must separate each property with a semicolon.
The example below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center;color:red}
To make the style definitions more readable, you can describe one property on each line, like this:
p
{
text-align: center;
color: black;
font-family: arial
}
Grouping
You can group selectors. Separate each selector with a comma. In the example below we have grouped
all the header elements. All header elements will be displayed in green text color:
h1,h2,h3,h4,h5,h6
{
color: green
}
Styling Form Elements
It’s possible to change the default look of form elements by styling their html tags: input, select and
textarea.
The input Tag\
Defining rules for the input tag will change any instance of that tag in your document. For example, if I
wish all elements to have a purple background, I could define the following in my style sheet.
input {
background-color: #666699;
}
This will add a purple background color to those elements that are marked up using the input tag.
The select Tag
The <select> tag creates a list menu. You can create rules for select which will affect any list menus in
your document.
select {
background-color: #666699;
color: #ffffff;
}
The textarea Tag
The <textarea> tag marks up multiple line text input fields. Once again, setting rules for textarea will
change the look of all of these elements in your document.
textarea {
background-color: #666699;
color: #ffffff; }
The form Tag
You can also style the form tag itself, adding borders, background colors and adjusting the margins and
padding. Form is a block level element, so you can change the way it displays in much the same way
that you would style a paragraph.
form {
border: 1px solid #666699;
padding: 5px;
}
Experiment No. 13(a)
Aim :
Design a HTML page having a table containing the list of students and use CSS to change its
appearances
Program
<!Doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Trasitional//EN">
<html>
<!--Create a website having a table containing the list of students and use CSS to change its
appearances->
<head>
<title>Designing Tables</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<table border="1" bgcolor="cyan" bordercolorlight="red" bordercolordark="black">
<caption align=left><b>Strengh of the students in various disciplines</b></caption>
<tr>
<th colspan=50>Name of the course</th>
<th> No. of students</th>
</tr>
<tr>
<td colspan=50>MCA</td>
<td>58</td>
</tr>
<tr>
<td colspan=50>BE(IT)</td>
<td>40</td>
</tr>
<tr>
<td colspan=50>BE(CS)</td>
<td>46</td>
</tr>
<tr>
<td colspan=50>Mechanical</td>
<td>50</td>
</tr>
</table>
</body>
</html>
Code for the cascading style sheet
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Output
The above output is using stylesheet. If we remove a line from the head tag, i.e.
<link rel="stylesheet" href="[Link]">
then the output will be like this:
Viva-Voce Questions :
1. What is a general syntax for defining style for a HTML element?
2. What are the various methods for associating cascading style sheet with a HTML page?
3. In which HTML tag the <link> tag is used?
4. What is the difference between margin and padding?
Experiment No. 13(b)
Aim :
Design a HTML form having a different form elements and use CSS to change their appearances.
Program
<html>
<head>
<link rel="stylesheet" href="[Link]"/>
<title>
Using Cascading Style Sheet
</title>
</head>
<body>
<form>
Textbox 1: <input name="textbox1" type="text" size="20" value="form elements"><br><br>
Textbox 2: <input name="textbox2" type="password" size="15" value="password"
class="altTextField"><br><br>
Textbox 3: <input name="textbox3" type="text" size="20" value="css"><br><br>
Textarea 1: <textarea name="textarea1" cols="25" rows="5">textarea</textarea><br>
<input type="checkbox" checked="checked" class="radioStyle"><br>
<input type="radio"><br>
<input type="button" value="other button" class="altButtonFormat">
</form>
</body>
</html>
Code for the cascading style sheet
body
{background-color:66cccc}
INPUT {
background-color: #99ccff;
color: black;
font-family: arial, verdana, ms sans serif;
font-weight: bold;
font-size: 12pt
}
TEXTAREA {
background-color: navy;
border: black 2px solid;
color: white;
font-family: arial, verdana, ms sans serif;
font-size: 12pt;
font-weight: normal
}
.altButtonFormat {
background-color: #c0c0c0;
font-family: verdana;
border: #000000 1px solid;
font-size: 12px;
color: #778899
}
.altTextField {
background-color: #ececec;
font-family: verdana;
font-size: 12pt;
color: #09c09c
}
.radioStyle {
background-color: #FF0000;
border: #000000 solid 1px;
font-family: verdana;
font-size: 12px;
color: #000000
}
Output
The above output is using stylesheet. If we remove a line from the head tag, i.e.
<link rel="stylesheet" href="[Link]">
then the output will be like this:
Assignment :
Design an HTML page and an HTML form. Also make a CSS file and use this file to change the
appearances of the HTML form and the HTML page.
Viva-Voce Questions :
1. How can we group various selectors and declarations in CSS?
2. How to override different styles?
3. How to define comments in CSS?
Experiment No. 16
Aim :
Concepts of Active Server Pages (ASP)
Active Server Pages
An ASP file can contain text, HTML tags and scripts. Scripts in an ASP file are executed on the server
What is an ASP File?
An ASP file is just the same as an HTML file
An ASP file can contain text, HTML, XML, and scripts
Scripts in an ASP file are ASP stands for Active Server Pages
ASP is a program that runs inside IIS
IIS stands for Internet Information Services
IIS comes as a free component with Windows 2000
IIS is also a part of the Windows NT 4.0 Option Pack
The Option Pack can be downloaded from Microsoft
PWS is a smaller - but fully functional - version of IIS
PWS can be found on your Windows 95/98 CD
executed on the server
An ASP file has the file extension ".asp"
How Does ASP Differ from HTML?
When a browser requests an HTML file, the server returns the file
When a browser requests an ASP file, IIS passes the request to the ASP engine. The ASP engine
reads the ASP file, line by line, and executes the scripts in the file. Finally, the ASP file is
returned to the browser as plain HTML
Active Server Pages consist of six built in objects. They are ready made objects which provide
functionality to your web pages without requiring you to make custom .
Following are the six built in ASP objects :
Application
ASPError
ObjectContext
Request
Response
Server
Session
Request
The Request object makes available all the values that client browser passes to the server during an
HTTP request.
Collections Description
Form Collection of all the values of Form element in the HTTP request.
QueryString Collection of variables which are stored in the HTTP query string. Name / value
pairs can also be appended to the URL after the end of page name e.g.
"[Link] contains
one variable 'author' with a value of 'Faisal Khan'.
Response
The Response object is used to send the output back to the client (browser).
Methods Description
Redirect Redirects the browser to another page (URL) e.g.
[Link] "[Link]
Write Writes the specified string to the web page e.g. [Link]
"Hello World!".
Web server works in this way to fulfill a request from the browser:
When a user at a specific IP address requests a file, the web server retrieves that file and returns it to the
requesting IP address. The contents of a file are not important to the web server. It is the web browser
that makes the request and interprets and displays the data in the file that was returned from the web
server.
When you make a request from a web server, an IP connection is made across the Internet between the
client making the request and the host running the web-server software. As soon as a request is satisfied
by the web server, the Internet connection between the client and the host breaks. A page containing
images or links to other pages all require separate connections. Often, it takes many requests to retrieve
all the information on one web page.
How to use the value of one web page on another using ASP objects and java script
When the user submits the form, through an INPUT or BUTTON element with TYPE=submit, the
form values are submitted to the URI given in FORM's required ACTION attribute. ACTION usually
points to a server-side script that handles the form submission.
There can be two actions: GET and POST
When the METHOD is get (the default), the form input is submitted as an HTTP GET request with ?
form_data appended to the URI specified in the ACTION [Link] the get method allows the
form submission to be contained completely in a URL. This can be advantageous in that it permits
bookmarking in current browsers. However, the amount of form data that can be handled by the get
method is limited by the maximum length of the URL that the server and browser can process. When
GET method is used the values are accessed using querystring method of Request object.
With a METHOD value of post, the form input is submitted as an HTTP POST request with the form
data sent in the body of the request. Most current browsers are unable to bookmark POST requests, but
POST does not entail the length restrictions imposed by GET. When we use POST method , form
method of Request object is used for accessing the values of another web page.
Experiment No. 17
Aim :
Design a student entry form that sends the values to a ASP script using GET method and display the
values on another page
Program
<html>
<head>
<title>
Student Entry Form
</title>
<body bgcolor="FFCC33">
<script language=javascript>
</script>
<form name="stud_data" action="resultget(prac6).asp" method=GET">
<fieldset>
<legend>
Personal Information
</legend>
<table>
<tr>
<td colspan=40>
Name
</td>
<td> <input type="text" name="sname" maxlength=20 size=40><br>
</td>
</tr>
<tr>
<td colspan=40>
Age
</td>
<td><input type="text" name="age" size=10><br>
</td>
</tr>
<tr>
<td>
Sex
</td>
</tr>
<tr>
<td colspan=25>
<input type="radio" Name="sex" value="Female" Checked>
</td>
<td>
Female
</td>
</tr>
<tr>
<td colspan=25>
<input type="radio" Name="sex" value="Male">
</td>
<td>
Male
</td>
<tr>
<td colspan=40>
Father's Name
</td>
<td>
<input type="text" Name="fname" SIZE=40>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>
Educational Qualification
</legend>
<table>
<tr>
<td colspan=20>
Highest Qualification
</td>
<td>
<select name="qual">
<option value="MCA">MCA
<option value="BSC">Bachelors
<option value="BE">BE
<option value="High">High School
<option value="Phd">Ph.D.
</td>
</tr>
<tr>
<td colspan=20>
Name of the university or college
</td>
<td>
<input type="text" name="univ" size=50>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>
Others
</legend>
Write a few words about yourself
<textarea rows=6 cols=100 name="about" size=100></textarea>
</fieldset>
<tr>
<br>
<br>
<fieldset>
<td colspan=20 align="right">
<input type="reset" name="reset" value="Reset">
</td>
<td>
<input type="submit" name="submit" value="Submit">
</td>
</fieldset>
</tr>
</form>
</body>
</html>
Output
Code for the script which access the values from the above web page
using GET method
<html>
<!--Write a script which takes the values from a form using GET method and display those values-->
<head>
</head>
<body>
<script language=javascript runat=server>
var name,age,sex,fname,qual,univ;
[Link]("<p>"+"Results using"+"<b>"+ " GET"+"</b>"+" method"+"</p>");
[Link]("You have provided the following information");
[Link]("<br>");
name=[Link]("sname");
age = [Link]("age");
sex=[Link]("sex");
fname=[Link]("fname");
qual = [Link]("qual");
univ=[Link]("univ");
about=[Link]("about");
[Link]("Name :" + name + "<br>");
[Link]( "Age :"+age +"<br>");
[Link]( "Sex :"+sex+"<br>" );
[Link]("Father's Name :" + fname+"<br>" );
[Link]("Highest Qualification :"+ qual+"<br>" );
[Link]( "University :"+univ+"<br>" );
[Link]("About the student :"+ about +"<br>");
</script>
</body>
</html>
Output
Assignment :
Design an HTML form for online admission. Print the values entered by the user on another page.
Use GET method here.
Viva-Voce Questions :
1. What are the two values for action attribute in <form> tag?
2. How web servers execute a request?
3. What is the difference between static and dynamic web pages?
Experiment No. 18
Aim :
Design a student entry form that sends the values to a ASP script using POST method.
Program
<html>
<!--Create a student entry form that sends the values to a ASP script using POST method->
<head>
<title>
Student Entry Form
</title>
<body bgcolor="788855">
<script language=javascript>
</script>
<form name="stud_data" action="resultpost(prac7).asp" method=POST>
<fieldset>
<legend>
Personal Information
</legend>
<table>
<tr>
<td colspan=40>
Name
</td>
<td> <input type="text" name="sname" maxlength=20 size=40><br>
</td>
</tr>
<tr>
<td colspan=40>
Age
</td>
<td><input type="text" name="age" size=10 maxlength=2><br>
</td>
</tr>
<tr>
<td>
Sex
</td>
</tr>
<tr>
<td colspan=25>
<input type="radio" Name="sex" value="Female" Checked>
</td>
<td>
Female
</td>
</tr>
<tr>
<td colspan=25>
<input type="radio" Name="sex" value="Male">
</td>
<td>
Male
</td>
<tr>
<td colspan=40>
Father's Name
</td>
<td>
<input type="text" Name="fname" SIZE=40>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>
Educational Qualification
</legend>
<table>
<tr>
<td colspan=20>
Highest Qualification
</td>
<td>
<select name="qual">
<option value="MCA">MCA
<option value="BSC">Bachelors
<option value="BE">BE
<option value="High">High School
<option value="Phd">Ph.D.
</td>
</tr>
<tr>
<td colspan=20>
Name of the university or college
</td>
<td>
<input type="text" name="univ" size=50>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>
Others
</legend>
Write a few words about yourself
<textarea rows=6 cols=100 name="about" size=100></textarea>
</fieldset>
<tr>
<br>
<br>
<fieldset>
<td colspan=20 align="right">
<input type="reset" name="reset" value="Reset">
</td>
<td>
<input type="submit" name="submit" value="Submit">
</td>
</fieldset>
</tr>
</form>
</body>
</html>
Output
Code for the script which access the values from the above web page
using POST method
<html>
<!--Write a script which takes the values from a form using POST method and display those values->
<head>
<title>
accessing student data
</title>
</head>
<body>
<script language=javascript runat=server>
var sname,age,sex,fname,qual,univ,about;
[Link]("<p>"+"Results using "+"<b>"+"POST"+"</b>"+" method"+"</p>");
[Link]("You have provided the following information:<br>");
sname=[Link] ("sname");
age=[Link] ("age");
sex=[Link] ("sex");
fname=[Link] ("fname");
qual=[Link] ("qual");
univ=[Link] ("univ");
about=[Link] ("about");
[Link]("Name :"+sname+"<br>");
[Link]("Age :"+age+"<br>");
[Link]("Sex :"+sex+"<br>");
[Link]("Father's Name :"+fname+"<br>");
[Link]("Highest Qualification :"+qual+"<br>");
[Link]("University :"+univ+"<br>");
[Link]("About the student :"+about+"<br>");
</script>
</body>
</html>
Output
Assignment :
Design an HTML form for online admission. Print the values entered by the user on another
page. Use POST method here.
Viva-Voce Questions :
1. How to define that which scripting language we are going to use in our script code?
2. How can we use the values of one web page on another web page?
3. What is the difference between GET and POST method? Which one is more secure?
Experiment No. 19
Aim :
Design a student entry form using client side validation script
Program
<html>
<!--Create a student entry form using client side validation script-->
<head>
<title>
Student Entry Form
</title>
<body bgcolor="CCCCFF">
<script language=javascript>
function validation()
{
var msg, cansubmit=true;
msg="Please fill the following information:";
if ( document.stud_data.[Link]=="" )
{
msg=msg+"Name";
cansubmit=false;
}
if ( document.stud_data.[Link]=="" )
{
msg=msg+" ,Age";
cansubmit=false;
}
if( document.stud_data.[Link]=="" )
{
msg=msg+" ,Father's name";
cansubmit=false;
}
if( document.stud_data.[Link]=="" )
{
msg=msg+" ,University Name";
cansubmit=false;
}
if (cansubmit==false)
alert(msg);
return cansubmit;
</script>
<form name="stud_data" action="resultget(prac6).asp" method=GET onsubmit="return validation();">
<fieldset>
<legend>
Personal Information
</legend>
<table>
<tr>
<td colspan=40>
Name
</td>
<td> <input type="text" name="sname" maxlength=20 size=40><br>
</td>
</tr>
<tr>
<td colspan=40>
Age
</td>
<td><input type="text" name="age" size=10><br>
</td>
</tr>
<tr>
<td>
Sex
</td>
</tr>
<tr>
<td colspan=25>
<input type="radio" Name="sex" value="Female" Checked>
</td>
<td>
Female
</td>
</tr>
<tr>
<td colspan=25>
<input type="radio" Name="sex" value="Male">
</td>
<td>
Male
</td>
<tr>
<td colspan=40>
Father's Name
</td>
<td>
<input type="text" Name="fname" SIZE=40>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>
Educational Qualification
</legend>
<table>
<tr>
<td colspan=20>
Highest Qualification
</td>
<td>
<select name="qual">
<option value="MCA">MCA
<option value="BSC">Bachelors
<option value="BE">BE
<option value="High">High School
<option value="Phd">Ph.D.
</td>
</tr>
<tr>
<td colspan=20>
Name of the university or college
</td>
<td>
<input type="text" name="univ" size=50>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>
Others
</legend>
Write a few words about yourself
<textarea rows=6 cols=100 name="about" size=100></textarea>
</fieldset>
<tr>
<br>
<br>
<fieldset>
<td colspan=20 align="right">
<input type="reset" name="reset" value="Reset">
</td>
<td>
<input type="submit" name="submit" value="Submit">
</td>
</fieldset>
</tr>
</form>
</body>
</html>
Output
Assignment :
Design a login form containing username and password. Show a message box if user has left any field
blank. Use client side validation here.
Viva-Voce Questions :
1. What is the difference between client-side and server-side script?
2. How can we differentiate a client-side script and a server-side script using tags?
3. What are the various ASP objects?
4. Why client-side validation is preferred?
Experiment No. 20
Aim :
Design a student entry form using server side validation script
Program
<html>
<!--Create a login form with validation for Username and Password and link it to student entry form-->
<head>
<title>
Login
</title>
</head>
<body height="40" width="40">
<script language="javascript">
function validate()
{
var cansubmit=true,aalert="Please fill the following";
if ( [Link]=="" )
{
cansumit=false;
aalert=aalert+"Username";
}
if ( [Link]=="" )
{
cansubmit=false;
aalert=aalert+"Password";
}
if ( cansubmit==false )
alert(aalert);
return cansubmit;
}
</script>
<form name="login" action="student_info(prac9).asp" method=GET onsubmit="return validate();">
<table>
<tr>
<td>
<b>Username</b>
</td>
<td>
<input type="text" name="user" value="" size=20>
</td>
</tr>
<tr>
<td>
<b>Password</b>
</td>
<td>
<input type="password" name="pass" value="">
</td>
</tr>
</table>
<input type="submit" name="submit" value="Login">
</form>
</body>
</html>
Code for making the form and sending the value to the server for
validation
<html>
<!--Create a student entry form using server side validation script-->
<head>
<title>
Student Entry Form
</title>
<body bgcolor="FFCCCC">
<form name="stud_data" action="[Link]" method=GET>
<fieldset>
<legend>
Personal Information
</legend>
<table>
<tr>
<td colspan=40>
Name
</td>
<td> <input type="text" name="sname" maxlength=20 size=40><br>
</td>
</tr>
<tr>
<td colspan=40>
Age
</td>
<td><input type="text" name="age" size=10><br>
</td>
</tr>
<tr>
<td>
Sex
</td>
</tr>
<tr>
<td colspan=25>
<input type="radio" Name="sex" value="Female" Checked>
</td>
<td>
Female
</td>
</tr>
<tr>
<td colspan=25>
<input type="radio" Name="sex" value="Male">
</td>
<td>
Male
</td>
<tr>
<td colspan=40>
Father's Name
</td>
<td>
<input type="text" Name="fname" SIZE=40>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>
Educational Qualification
</legend>
<table>
<tr>
<td colspan=20>
Highest Qualification
</td>
<td>
<select name="qual">
<option value="MCA">MCA
<option value="BSC">Bachelors
<option value="BE">BE
<option value="High">High School
<option value="Phd">Ph.D.
</td>
</tr>
<tr>
<td colspan=20>
Name of the university or college
</td>
<td>
<input type="text" name="univ" size=50>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>
Others
</legend>
Write a few words about yourself
<textarea rows=6 cols=100 name="about" size=100></textarea>
</fieldset>
<tr>
<br>
<br>
<fieldset>
<td colspan=20 align="right">
<input type="reset" name="reset" value="Reset">
</td>
<td>
<input type="submit" name="submit" value="Submit">
</td>
</fieldset>
</tr>
</form>
</body>
</html>
Code for the script for server side validation
<html>
<!--Write a script that validates the data coming from a student entry form, on server-->
<head>
<title>
Student Entry Form
</title>
<body>
<script language=javascript runat="server">
var sname,age,fname,sex,qual,univ,about,empty="Please fill : <br>",a=0,b=0,c=0,d=0;
sname=[Link]("sname");
age=[Link]("age");
sex=[Link]("sex");
qual=[Link]("qual");
about=[Link]("about");
univ=[Link]("univ");
if (sname=="")
empty=empty+"Name<br>";
else
a=1;
if (age=="")
empty=empty+"Age<br>";
else
b=1;
if (fname=="")
empty=empty+"Father's Name<br>";
else
c=1;
if (univ=="")
empty=empty+"University Name<br>";
else
d=1;
[Link]("You have given the following information:");
[Link]("<br>");
if (a==1)
[Link] ("Name:"+sname+"<br>");
if (b==1)
[Link] ("Age:"+age+"<br>");
if (d==1)
[Link] ("University Name:"+univ+"<br>");
if (c==1)
[Link] ("Father's Name:"+fname+"<br>");
[Link] ("Sex:"+sex+"<br>");
[Link] ("Highest Qualification:"+qual+"<br>");
[Link] ("About the student:"+about+"<br>");
[Link]("<br>");
[Link]("<br>");
if ((a==0) || (b==0) || (c==0) || (d==0))
{
[Link] ("<font color=red>"+empty+"</font>");
}
</script>
<a href="student_info(prac9).asp"><img src="[Link]"></a>
</body>
</html>
Output
Assignment :
Design an HTML form for registering on a site. Show the blank entries on a separate page and prompt
the user to complete them. Provide a back button also on a second page. Use server side validation here.
Viva-Voce Questions :
1. Which language is generally used on server-side?
2. What do you mean by submitting a form?
3. What is the difference between action and method attribute of <form> tag?
4. How to call a javascript function on clicking the submit button?
Appendix -1
DIFFERENT CATEGORIES OF HTML TAGS
BASIC ELEMENTS
1. Document Type <HTML></HTML> (beginning and end of file)
2. Title <TITLE></TITLE> (must be in header)
3. Header <HEAD></HEAD> (descriptive info, such as title)
4. Body <BODY></BODY> (bulk of the page)
STRUCTURAL DEFINITION
5. Heading <H?></H?> (the spec. defines 6 levels)
<H? ALIGN=LEFT|CENTER|
6. Align Heading RIGHT></H?>
7. Division <DIV></DIV>
8. Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
9. Defined Content <SPAN></SPAN>
10. Block Quote <BLOCKQUOTE></BLOCKQUOTE> (usually indented)
11. Quote <Q></Q> (for short quotations)
12. Citation <Q CITE="URL"></Q>
13. Emphasis <EM></EM> (usually displayed as italic)
14. Strong Emphasis <STRONG></STRONG> (usually displayed as bold)
15. Citation <CITE></CITE> (usually italics)
16. Code <CODE></CODE> (for source code listings)
17. Sample Output <SAMP></SAMP>
18. Keyboard Input <KBD></KBD>
19. Variable <VAR></VAR>
20. Definition <DFN></DFN> (not widely implemented)
Author's <ADDRESS></ADDRESS>
21.
Address
22. Large Font Size <BIG></BIG>
23. Small Font Size <SMALL></SMALL>
24. Insert <INS></INS> (marks additions in a new version)
25. Time of Change <INS DATETIME=":::"></INS>
26. Comments <INS CITE="URL"></INS>
27. Delete <DEL></DEL> (marks deletions in a new version)
28. Time of Change <DEL DATETIME=":::"></DEL>
29. Comments <DEL CITE="URL"></DEL>
30. Acronym <ACRONYM></ACRONYM>
31. Abbreviation <ABBR></ABBR>
PRESENTATION FORMATTING
32. Bold <B></B>
33. Italic <I></I>
34. Underline <U></U> (not widely implemented)
35. Strikeout <STRIKE></STRIKE> (not widely implemented)
36. Strikeout <S></S> (not widely implemented)
37. Subscript <SUB></SUB>
38. Superscript <SUP></SUP>
39. Typewriter <TT></TT> (displays in a monospaced font)
40. Preformatted <PRE></PRE> (display text spacing as-is)
41. Width <PRE WIDTH=?></PRE> (in characters)
42. Center <CENTER></CENTER> (for both text and images)
43. Blinking <BLINK></BLINK> (the most derided tag ever)
44. Font Size <FONT SIZE=?></FONT> (ranges from 1-7)
Change Font <FONT
45. SIZE="+|-?"></FONT>
Size
<FONT COLOR="#$$$$$
46. Font Color $"></FONT>
47. Select Font <FONT FACE="***"></FONT>
<FONT
48. Point size POINT-SIZE=?></FONT>
49. Weight <FONT WEIGHT=?></FONT>
50. Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3)
51. Marquee <MARQUEE></MARQUEE>
POSITIONING
52. Multi-Column <MULTICOL COLS=?></MULTICOL>
53. Column Gutter <MULTICOL GUTTER=?></MULTICOL>
54. Column Width <MULTICOL WIDTH=?></MULTICOL>
55. Spacer <SPACER>
<SPACER TYPE=HORIZONTAL|
56. Spacer Type VERTICAL|BLOCK>
57. Size <SPACER SIZE=?>
58. Dimensions <SPACER WIDTH=? HEIGHT=?>
59. Alignment <SPACER ALIGN=LEFT|RIGHT|
CENTER>
60. Layer <LAYER></LAYER>
61. Name <LAYER ID="***"></LAYER>
62. Location <LAYER LEFT=? TOP=?></LAYER>
<LAYER PAGEX=?
63. Rel. Position PAGEY=?></LAYER>
64. Source File <LAYER SRC="***"></LAYER>
65. Stacking <LAYER Z-INDEX=?></LAYER>
<LAYER ABOVE="***"
66. Stack Position BELOW="***"></LAYER>
<LAYER HEIGHT=?
67. Dimensions WIDTH=?></LAYER>
68. Clipping Path <LAYER CLIP=,,,></LAYER>
69. Visible? <LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER>
<LAYER
70. Background BACKGROUND="$$$$$$"></LAYER>
<LAYER
71. Color BGCOLOR="$$$$$$"></LAYER>
72. Inline Layer <ILAYER></ILAYER> (takes same attributes as LAYER)
73. Alt. Content <NOLAYER></NOLAYER>
LINKS, GRAPHICS, AND SOUNDS
74. Link Something <A HREF="URL"></A>
75. Link to Location <A HREF="URL#***"></A> (if in another document)
76. <A HREF="#***"></A> (if in current document)
77. Target Window <A HREF="URL" TARGET="***"></A>
78. Action on Click <A HREF="URL" ONCLICK="***"></A> (Javascript)
Mouseover
79. <A HREF="URL" ONMOUSEOVER="***"></A> (Javascript)
Action
Mouse out
80. <A HREF="URL" ONMOUSEOUT="***"></A> (Javascript)
Action
81. Link to Email <A HREF="[Link]
82. Specify Subject <A HREF="[Link] (use a real question mark)
83. Define Location <A NAME="***"></A>
84. Display Image <IMG SRC="URL">
85. Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
86. Alignment <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
87. Alternate <IMG SRC="URL" ALT="***"> (if image not displayed)
88. Dimensions <IMG SRC="URL" WIDTH=? HEIGHT=?> (in pixels)
<IMG SRC="URL" WIDTH=% HEIGHT=%>
(as percentage of page
89.
width/height)
90. Border <IMG SRC="URL" BORDER=?> (in pixels)
Runaround
91. <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels)
Space
92. Low-Res Proxy <IMG SRC="URL" LOWSRC="URL">
93. Imagemap <IMG SRC="URL" ISMAP> (requires a script)
94. Imagemap <IMG SRC="URL" USEMAP="URL">
95. Movie Clip <IMG DYNSRC="***" START="***" LOOP=?
>
Background <BGSOUND SRC="***" LOOP=?|INFINITE>
96.
Sound
97. Client-Side Map <MAP NAME="***"></MAP> (describes the map)
<AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|
98. Map Section NOHREF>
99. Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
100. Embed Object <EMBED SRC="URL"> (insert object into page)
101. Object Size <EMBED SRC="URL" WIDTH=? HEIGHT=?>
102. Object <OBJECT></OBJECT>
103. Parameters <PARAM>
DIVIDERS
104. Paragraph <P></P> (closing tag often unnecessary)
<P ALIGN=LEFT|CENTER|
105. Align Text RIGHT></P>
106. Justify Text <P ALIGN=JUSTIFY></P>
107. Line Break <BR> (a single carriage return)
108. Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL>
109. Horizontal Rule <HR>
110. Alignment <HR ALIGN=LEFT|RIGHT|CENTER>
111. Thickness <HR SIZE=?> (in pixels)
112. Width <HR WIDTH=?> (in pixels)
113. Width Percent <HR WIDTH="%"> (as a percentage of page width)
114. Solid Line <HR NOSHADE> (without the 3D cutout look)
115. No Break <NOBR></NOBR> (prevents line breaks)
116. Word Break <WBR> (where to break a line if needed)
LISTS
117. Unordered List <UL><LI></UL> (before each list item)
118. Compact <UL COMPACT></UL>
<UL TYPE=DISC|CIRCLE|
119. Bullet Type SQUARE> (for the whole list)
<LI TYPE=DISC|CIRCLE|
120. Bullet Type SQUARE> (this & subsequent)
121. Ordered List <OL><LI></OL> (before each list item)
122. Compact <OL COMPACT></OL>
123. Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list)
124. Numbering Type <LI TYPE=A|a|I|i|1> (this & subsequent)
125. Starting Number <OL START=?> (for the whole list)
126. Starting Number <LI VALUE=?> (this & subsequent)
127. Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition)
128. Compact <DL COMPACT></DL>
129. Menu List <MENU><LI></MENU> (before each list item)
130. Compact <MENU COMPACT></MENU>
131. Directory List <DIR><LI></DIR> (before each list item)
132. Compact <DIR COMPACT></DIR>
BACKGROUNDS AND COLORS
133. Tiled Bkground <BODY BACKGROUND="URL">
<BODY
134. Watermark BGPROPERTIES="FIXED">
135. Bkground Color <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue)
136. Text Color <BODY TEXT="#$$$$$$">
137. Link Color <BODY LINK="#$$$$$$">
138. Visited Link <BODY VLINK="#$$$$$$">
139. Active Link <BODY ALINK="#$$$$$$">
SPECIAL CHARACTERS
Special
140. &#?; (where ? is the ISO 8859-1 code)
Character
141. < <
142. > >
143. & &
144. " "
145. Registered TM ®
146. Registered TM ®
147. Copyright ©
148. Copyright ©
Non-Breaking
149.
Space
FORMS
<FORM ACTION="URL"
150. Define Form METHOD=GET|POST></FORM>
151. File Upload <FORM ENCTYPE="multipart/form-data"></FORM>
<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|
152. Input Field FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET">
153. Field Name <INPUT NAME="***">
154. Field Value <INPUT VALUE="***">
155. Checked? <INPUT CHECKED> (checkboxes and radio boxes)
156. Field Size <INPUT SIZE=?> (in characters)
157. Max Length <INPUT MAXLENGTH=?> (in characters)
158. Button <BUTTON></BUTTON>
<BUTTON
159. Button Name NAME="***"></BUTTON>
160. Button Type <BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON>
<BUTTON
161. Default Value VALUE="***"></BUTTON>
162. Label <LABEL></LABEL>
<LABEL
163. Item Labelled FOR="***"></LABEL>
164. Selection List <SELECT></SELECT>
<SELECT
165. Name of List NAME="***"></SELECT>
166. # of Options <SELECT SIZE=?></SELECT>
167. Multiple Choice <SELECT MULTIPLE> (can select more than one)
168. Option <OPTION> (items that can be selected)
169. Default Option <OPTION SELECTED>
170. Option Value <OPTION VALUE="***">
<OPTGROUP
171. Option Group LABEL="***"></OPTGROUP>
<TEXTAREA ROWS=? COLS=?
172. Input Box Size ></TEXTAREA>
<TEXTAREA
173. Name of Box NAME="***"></TEXTAREA>
174. Wrap Text <TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA>
175. Group elements <FIELDSET></FIELDSET>
176. Legend <LEGEND></LEGEND> (caption for fieldsets)
177. Alignment <LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT"></LEGEND>
TABLES
178. Define Table <TABLE></TABLE>
179. Table Alignment <TABLE ALIGN=LEFT|RIGHT|CENTER>
180. Table Border <TABLE BORDER></TABLE> (either on or off)
181. Table Border <TABLE BORDER=?></TABLE> (you can set the value)
182. Cell Spacing <TABLE CELLSPACING=?>
183. Cell Padding <TABLE CELLPADDING=?>
184. Desired Width <TABLE WIDTH=?> (in pixels)
185. Width Percent <TABLE WIDTH=%> (percentage of page)
186. Table Color <TABLE BGCOLOR="$$$$$$"></TABLE>
<TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS|
187. Table Frame VSIDES|BOX|BORDER></TABLE>
188. Table Rules <TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE>
<TABLE
189. Border Color BORDERCOLOR="$$$$$$"></TABLE>
<TABLE BORDERCOLORDARK="$$$$$
190. Dark Border $"></TABLE>
<TABLE BORDERCOLORLIGHT="$$$$$
191. Light Border $"></TABLE>
192. Table Row <TR></TR>
193. Alignment <TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>
194. Table Cell <TD></TD> (must appear within table rows)
195. Alignment <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
196. No linebreaks <TD NOWRAP>
197. Columns to Span <TD COLSPAN=?>
198. Rows to Span <TD ROWSPAN=?>
199. Desired Width <TD WIDTH=?> (in pixels)
200. Width Percent <TD WIDTH="%"> (percentage of table)
201. Cell Color <TD BGCOLOR="#$$$$$$">
202. Header Cell <TH></TH> (same as data, except bold centered)
203. Alignment <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>
204. No Linebreaks <TH NOWRAP>
205. Columns to Span <TH COLSPAN=?>
206. Rows to Span <TH ROWSPAN=?>
207. Desired Width <TH WIDTH=?> (in pixels)
208. Width Percent <TH WIDTH="%"> (percentage of table)
209. Cell Color <TH BGCOLOR="#$$$$$$">
210. Table Body <TBODY>
211. Table Footer <TFOOT></TFOOT> (must come before THEAD>
212. Table Header <THEAD></THEAD>
213. Table Caption <CAPTION></CAPTION>
<CAPTION ALIGN=TOP|BOTTOM|LEFT|
214. Alignment RIGHT>
215. Column <COL></COL> (groups column attributes)
Columns <COL SPAN=?></COL>
216.
Spanned
217. Column Width <COL WIDTH=?></COL>
218. Width Percent <COL WIDTH="%"></COL>
219. Group columns <COLGROUP></COLGROUP> (groups column structure)
Columns <COLGROUP SPAN=?></COLGROUP>
220.
Spanned
221. Group Width <COLGROUP WIDTH=?></COLGROUP>
222. Width Percent <COLGROUP WIDTH="%"></COLGROUP>
FRAMES
Frame
223. <FRAMESET></FRAMESET> (instead of <BODY>)
Document
<FRAMESET
224. Row Heights ROWS=,,,></FRAMESET> (pixels or %)
<FRAMESET
225. Row Heights ROWS=*></FRAMESET> (* = relative size)
<FRAMESET
226. Column Widths COLS=,,,></FRAMESET> (pixels or %)
<FRAMESET
227. Column Widths COLS=*></FRAMESET> (* = relative size)
228. Borders <FRAMESET FRAMEBORDER="yes|no"></FRAMESET>
<FRAMESET
229. Border Width BORDER=?></FRAMESET>
230. Border Color <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET>
<FRAMESET FRAMESPACING=?
231. Frame Spacing ></FRAMESET>
232. Define Frame <FRAME> (contents of an individual frame)
Display <FRAME SRC="URL">
233.
Document
234. Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top>
235. Margin Width <FRAME MARGINWIDTH=?> (left and right margins)
236. Margin Height <FRAME MARGINHEIGHT=?> (top and bottom margins)
<FRAME SCROLLING="YES|NO|
237. Scrollbar? AUTO">
238. Not Resizable <FRAME NORESIZE>
<FRAME FRAMEBORDER="yes|
239. Borders no">
<FRAME BORDERCOLOR="#$$$$$
240. Border Color $">
Unframed
241. <NOFRAMES></NOFRAMES> (for non-frames browsers)
Content
242. Inline Frame <IFRAME></IFRAME> (takes same attributes as FRAME)
<IFRAME WIDTH=? HEIGHT=?
243. Dimensions ></IFRAME>
<IFRAME WIDTH="%"
244. Dimensions HEIGHT="%"></IFRAME>
SCRIPTS AND JAVA
245. Script <SCRIPT></SCRIPT>
<SCRIPT
246. Location SRC="URL"></SCRIPT>
<SCRIPT
247. Type TYPE="***"></SCRIPT>
<SCRIPT
248. Language LANGUAGE="***"></SCRIPT>
249. Other Content <NOSCRIPT></NOSCRIPT> (if scripts not supported)
250. Applet <APPLET></APPLET>
251. File Name <APPLET CODE="***">
252. Parameters <APPLET PARAM NAME="***">
253. Location <APPLET CODEBASE="URL">
254. Identifier <APPLET NAME="***"> (for references)
255. Alt Text <APPLET ALT="***"> (for non-Java browsers)
<APPLET ALIGN="LEFT|RIGHT|
256. Alignment CENTER">
257. Size <APPLET WIDTH=? HEIGHT=?> (in pixels)
258. Spacing <APPLET HSPACE=? VSPACE=?> (in pixels)
259. Server Script <SERVER></SERVER>
MISCELLANEOUS
260. Comment <!-- *** --> (not displayed by the browser)
261. Prologue <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
262. Searchable <ISINDEX> (indicates a searchable index)
263. Prompt <ISINDEX PROMPT="***"> (text to prompt input)
264. Send Search <A HREF="URL?***"></a> (use a real question mark)
265. URL of This File <BASE HREF="URL"> (must be in header)
Base Window
266. <BASE TARGET="***"> (must be in header)
Name
<LINK REV="***"
267. Relationship REL="***" HREF="URL"> (in header)
<LINK TYPE="***"
268. Linked File SRC="***"></LINK>
Meta
269. <META> (must be in header)
Information
270. Style Sheets <STYLE></STYLE> (implementations vary)
271. Bidirect Off <BDO DIR=LTR|RTL></BDO> (for certain character sets)
Appendix -2
DESCRIPTION OF HTML TAGS
<a>
Create a hyperlink (href attribute) or fragment identifier (name attribute) within a document.
Attributes
href=url
Specify the URL of a hyperlink target (required if not a name anchor).
methods=list
Specify a comma-separated list of browser-dependent presentation methods.
name=string
Specify the name of a fragment identifier (required if not a hypertext reference anchor).
rel=relationship
Indicate the relationship from this document to the target.
rev=relationship
Indicate the reverse relationship of the target to this document.
target=name
Define the name of the frame or window to receive the referenced document.
title=string
Provide a title for the target document.
urn=urn
Specify the location-independent Uniform Resource Name for this hyperlink.
Example
To create an anchor named info at some point in a document called [Link], use the <a> tag with the
name attribute:
<a name="info">Information</a>
To provide a hyperlink to that point in [Link], use the <a> tag with the href attribute appending the
anchor name to the filename using a hash mark (#):
<a href="[Link]#info">Link to information</a>
<address>
The enclosed text is an address.
<b>
Format the enclosed text using a bold typeface.
<blockquote>
The enclosed text is a block quotation.
<body>
Delimit the beginning and end of the document body.
Attributes
alink=color
Set the color of active hypertext links in the document.
background=url
Specify the URL of an image to be tiled in the document background.
bgcolor=color
Set the background color of the document.
bgproperties=value
IE2 and later. When set to fixed, prevent the background image from scrolling with the
document content.
leftmargin=value
IE2 and later. Set the size, in pixels, of the document's left margin.
link=color
Set the color of unvisited hypertext links in the document.
text=color
Set the color of regular text in the document.
topmargin=value
IE2 and later. Set the size, in pixels, of the document's top margin.
vlink=color
Set the color of visited links in the document.
<br>
Break the current text flow, resuming at the beginning of the next line.
Attributes
clear=margin
Break the flow and move downward until the desired margin, either left, right, or all, is
clear.
<caption>
Define a caption for a table.
Attributes
align=position
For Netscape, set the vertical position of the caption to either top or bottom. Default is top,
centered. For Internet Explorer, set the horizontal alignment of the caption to either left,
center, or right, or even the vertical position to top or bottom. The default is top,
centered. You cannot set both the horizontal and vertical position with this attribute alone.
valign=position
IE2 and later. Set the vertical position of the caption to either top or bottom. Default is top.
Use this with a horizontal specification to align to set both vertical and horizontal caption
position in Internet Explorer.
<center>
Center the enclosed text.
<col>
IE2 and later. Set properties for a column (or columns) within a <colgroup> of a table.
Attributes
align=value
Specify alignment of text in the cells of a column. Value can be center, left, or right.
span=n
Specify the number of columns to be affected by the <col> settings.
<comment>
IE2 and later. Place a comment in the document. Comments will be visible in all other browsers.
Comments can be placed within <!- - comment text - -> for all browsers.
<div>
Create a division within a document.
Attributes
align=type
Align the text within the division to left, center, or right.
<font>
Set the size, color, or typeface of the enclosed text.
Attributes
color=color
Set the color of the enclosed text. text"
face=list
Set the typeface of the enclosed text to the first available font in the comma-separated list of font
names.
size=value
Set the size to an absolute value (1 to 7), or relative to the <basefont> size using +n or -n.
<form>
Delimit a form.
Attributes
action=url
Specify the URL of the application that will process the form. The default is the current URL.
enctype=encoding
Specify how the form element values will be encoded.
method=style
Specify the parameter-passing style, either get or post The default is get.
target=name
IE3 only. Specify a target window for results of form submission to be loaded. The special attributes
_bottom, _top, _parent, and _self may be used.
<frame>
Define a frame within a frameset.
Attributes
bordercolor=color
N3 only. Set color for frame border if border is turned on with frameborder=yes.
frameborder=[1|0]
IE3 only. Enable or disable the displaying of a 3-D border for a frame. Default is 1, which inserts
the border. The value 0 turns the border off.
frameborder=[yes|no]
N3 only. Enable or disable the displaying of a 3-D border for a frame or a plain border. The
default is yes (for 3-D borders).
marginheight=n
Place n pixels of space above and below the frame contents.
marginwidth=n
Place n pixels of space to the left and right of the frame contents.
name=string
Define the name of the frame.
noresize
Disable user resizing of the frame.
scrolling=type
Always add scrollbars (yes), never add scrollbars (no), or add scrollbars when needed (auto).
src=url
Define the URL of the source document for this frame.
<frameset>
Define a collection of frames or other framesets.
Attributes
border=n
N3 only. Set size in pixels of frame borders within a frameset. Default border width is 5 pixels.
bordercolor=color
N3 only. Set color for frame borders in a frameset.
cols=list
Specify the number and width of frames within a frameset.
frameborder=[yes|no]
N3 only. Enable or disable the displaying of 3-D borders or regular borders for frames. The
default is yes (3-D borders).
frameborder=[1|0]
IE3 only. Enable or disable the displaying of 3-D borders for frames within a frameset. The
default is 1 (borders on).
framespacing=n
IE3 only. Add additional space between adjacent frames in pixels.
rows=list
Specify the number and height of frames within a frameset.
<hn>
The enclosed text is a level n header; for level n from 1 to 6.
Attributes
align=type
Specify the heading alignment as either left (default), center, or right.
<head>
Delimit the beginning and end of the document head.
<hr>
Break the current text flow and insert a horizontal rule.
Attributes
align=type
Specify the rule alignment as either left, center (default), or right.
noshade
Do not use 3-D shading to render the rule.
size=pixels
Set the thickness of the rule to an integer number of pixels.
width=value
Set the width of the rule to either an integer number of pixels or a percentage of the page width.
<html>
Delimit the beginning and end of the entire HTML document.
Attributes
version=string
Indicate the HTML version used to create this document.
<i>
Format the enclosed text in an italic typeface.
<img>
Insert an image into the current text flow.
Attributes
alt=text
Provide alternative text for non-image-capable browsers.
border=n
Set the pixel thickness of the border around images contained within hyperlinks.
controls
IE2 and later. Add playback controls for embedded video clips.
dynsrc=url
IE2 and later. Specify the URL of a video clip to be displayed.
height=n
Specify the height of the image in pixels.
hspace=n
Specify the space, in pixels, to be added to the left and right of the image.
ismap
Indicate that the image is mouse-selectable when used within an <a> tag.
loop=value
IE2 and later. Set the number of times to play the video; value may be an integer or the value
infinite.
lowsrc=url
N2 and later. Specify a low-resolution image to be loaded by the browser first, followed by the
image specified by the <src> attribute.
src=url
Specify the source URL of the image to be displayed (required).
start=start
IE2 and later. Specify when to play the video clip, either fileopen or mouseover.
usemap=url
Specify the map of coordinates and links that define the hypertext links within this image.
vspace=n
Specify the vertical space, in pixels, added at the top and bottom of the image.
width=n
Specify the width of the image in pixels.
<input type=checkbox>
Create a checkbox input element within a <form>.
Attributes
checked
Mark the element as initially selected.
name=string
Specify the name of the parameter to be passed to the form-processing application if the input
element is selected (required).
value=string
Specify the value of the parameter sent to the form-processing application if this form element is
selected (required).
<input type=hidden>
Create a hidden element within a <form>.
Attributes
maxlength=n
Specify the maximum number of characters to accept for this element.
name=string
Specify the name of the parameter that is passed to the form-processing application for this input
element (required).
size=n
Specify the number of characters to display for this element.
value=string
Specify the value of this element that is passed to the form-processing application.
<input type=image>
Create an image input element within a <form>.
Attributes
align=type
Align the image to either the top, middle, or bottom of the form element's text.
name=string
Specify the name of the parameter to be passed to the form-processing application for this input
element (required).
src=url
Specify the source URL of the image (required).
<input type=password>
Create a content-protected text-input element within a <form>.
Attributes
maxlength=n
Specify the maximum number of characters to accept for this element.
name=string
Specify the name of the parameter to be passed to the form-processing application for this input
element (required).
size=n
Specify the number of characters to display for this element.
value=string
Specify the initial value for this element.
<input type=radio>
Create a radio-button input element within a <form>.
Attributes
checked
Mark the element as initially selected.
name=string
Specify the name of the parameter that is passed to the form-processing application if this input
element is selected (required).
value=string
Specify the value of the parameter that is passed to the form-processing application if this
element is selected (required).
<input type=reset>
Create a reset button within a <form>.
Attributes
value=string
Specify an alternate label for the reset button.
<input type=submit>
Create a submit button within a <form>.
Attributes
name=string
Specify the name of the parameter that is passed to the form-processing application for this input
element (required).
value=string
Specify an alternate label for the submit button, as well as the value passed to the form-
processing application for this parameter if this button is clicked.
<input type=text>
Create a text input element within a <form>. (This is the default input type.)
Attributes
maxlength=n
Specify the maximum number of characters to accept for this element.
name=string
Specify the name of the parameter that is passed to the form-processing application for this input
element (required).
size=n
Specify the number of characters to display for this element.
value=string
Specify the initial value for this element.
<li>
Delimit a list item in an ordered (<ol>) or unordered (<ul>) list.
Attributes
type=format
Set the type of this list element to the desired format. For <li> within <ol>: A (capital letters),
a (lowercase letters), I (capital Roman numerals), i (lowercase Roman numerals), or 1 (Arabic
numerals; default). For <li> within <ul>: circle, disc (default), or square.
value=n
Set the number for this list item to n.
<link>
Define a link in the document <head> between this document and another document.
Attributes
href=url
Specify the hypertext reference URL of the target document.
methods=list
Specify a browser-dependent list of comma-separated display methods for this link.
rel=relation
Indicate the relationship from this document to the target. For Internet Explorer 3.0,
rel=style indicates the existence of an external style sheet.
rev=relation
Indicate the reverse relationship from the target to this document.
src=url
IE3 only. Specify the URL for the external style sheet to be used in formatting the document.
title=string
Provide a title for the target document.
type=text/css
IE3 only. Show type of outside link to be an external cascading style sheet.
urn=urn
Provide the location-independent Uniform Resource Name for the target document.
<marquee>
IE2 and later. Create a scrolling-text marquee.
Attributes
align=position
Align the marquee to the top, middle, or bottom of the surrounding text.
behavior=style
Define marquee style to be scroll, slide, or alternate.
bgcolor=color
Set the background color of the marquee.
direction=dir
Define the direction, left or right, the text is to scroll.
height=value
Define the height, in pixels, of the marquee area.
hspace=value
Define the space, in pixels, to be inserted left and right of the marquee.
loop=value
Set the number of times to animate the marquee; value is an integer or infinite.
scrollamount=value
Set the number of pixels to move the text for each scroll movement.
scrolldelay=value
Specify the delay, in milliseconds, between successive movements of the marquee text.
vspace=value
Define the space, in pixels, to be inserted above and below the marquee.
width=value
Define the width, in pixels, of the marquee area.
<meta>
Provides additional information about a document.
Attributes
content=string
Specify the value for the meta-information (required). For client pulls, content="n;url=url"
tells the browser to load the specified url after n seconds. If no URL is specified, the source
document will be reloaded. Must be used with http-equiv="refresh" within <meta>.
http-equiv=string
Specify the HTTP equivalent name for the meta-information and cause the server to include the
name and content in the HTTP header for this document when it is transmitted to the client. A
value of refresh creates a "client-pull" within a document.
name=string
Specify the name of the meta-information.
<multicol>
N3 only. Format enclosed HTML and text in multicolumn format. Text and elements will flow across
specified number of columns to give them approximately equal length.
Attributes
cols=n
Specify number of columns (required).
gutter=n
Specify amount of space in pixels between columns. Default is 10 pixels.
width=n
Specify width of columns in pixels.
<nobr>
No breaks allowed in the enclosed text.
<noframes>
Define content to be presented by browsers that do not support frames.
<noscript>
N3 only. Specify alternative content for browsers that do not support JavaScript.
<ol>
Define an ordered list containing numbered (ascending) <li> elements.
Attributes
compact
Present the list in a more compact manner.
start=n
Start numbering the list at n, instead of 1.
type=format
Set the numbering format for this list to either A (capital letters), a (lowercase letters), I (capital
Roman numerals), i (lowercase Roman numerals), or 1 (Arabic numerals; default).
<option>
Define an option within a <select> item in a <form>.
Attributes
selected
Make this item initially selected.
value=string
Return the specified value to the form-processing application instead of the <option> contents.
<p>
Start and end a paragraph.
Attributes
align=type
Align the text within the paragraph to left, center, or right.
<pre>
Render the enclosed text in its original, preformatted style, honoring line breaks and spacing verbatim.
Attributes
width=n
Size the text, if possible, so that n characters fit across the display window.
<s>
The enclosed text is struck through with a horizontal line.
<script>
Specify enclosed script in a supported scripting language to be used in the document.
Attributes
language=lang
Identify language of the script, e.g., JavaScript or VBScript.
src=url
N3 only. Specify the URL of an outside file containing the script to be loaded and run with the
document.
<select>
Define a multiple-choice menu or scrolling list within a <form>, containing one or more <option>
tags.
Attributes
multiple
Allow user to select more than one <option> within the <select>.
name=string
Define the name for the selected <option> values that, if selected, are passed to the form-
processing application (required).
size=n
Display items using a pulldown menu for size=1 (without multiple specified) and a
scrolling list of n items otherwise.
<strike>
The enclosed text is struck through with a horizontal line.
<strong>
Strongly emphasize the enclosed text.
<style>
IE3 only. Surrounds list of style elements to be used in formatting of document. The <style> block
comes before the <body> tag and outside all other elements except <html> ... </html>.
<sub>
Format the enclosed text as a subscript.
<sup>
Format the enclosed text as a superscript.
<table>
Define a table.
Attributes
align=position
Align the table either left or right with the surrounding text flow.
background=url
Specify an image to be tiled in the background of the table.
bgcolor=color
N3, IE2 and later. Define the background color for the entire table.
border=n
Create a border n pixels wide.
bordercolor=color
IE2 and later. Define the border color for the entire table.
bordercolordark=color
IE2 and later. Define the dark border-highlighting color for the entire table.
bordercolorlight=color
IE2 and later. Define the light border-highlighting color for the entire table.
cellpadding=n
Place n pixels of padding around each cell's contents.
cellspacing=n
Place n pixels of spacing between cells.
frame=[void|above|below|hsides|lhs|rhs|vsides| box|border]
IE3 only. Specify which sides of a table's outer border will be drawn. void removes outer
borders. box and border display all. hsides draws horizontal sides, vsides draws vertical
sides. lhs draws left side, rhs right side.
hspace=n
Specify the horizontal space, in pixels, added at the left and right of the table.
rules=[all|cols|groups|none|rows]
IE3 only. Turn off (none) or turn on rules between table cells by cols, rows, groups, or
all.
vspace=n
Specify the vertical space, in pixels, added at the top and bottom of the table.
width=n
Set the width of the table to n pixels or a percentage of the window width.
<td>
Define a table data cell.
Attributes
align=type
Align the cell contents to the left, center, or right.
background=url
Specify an image to be tiled in the background of the cell.
bgcolor=color
N3, IE2 and later. Define the background color for the cell.
bordercolor=color
IE2 and later. Define the border color for the cell.
bordercolordark=color
IE2 and later. Define the dark border highlighting color for the cell.
bordercolorlight=color
IE2 and later. Define the light border highlighting color for the cell.
colspan=n
Have this cell straddle n adjacent columns.
nowrap
Do not automatically wrap and fill text in this cell.
rowspan=n
Have this cell straddle n adjacent rows.
valign=type
Vertically align this cell's contents to the top, center, bottom, or baseline of the cell.
width=n
Set the width of this cell to n pixels or a percentage of the table width.
<textarea>
Define a multiline text input area within a <form>; content of the <textarea> tag is the initial,
default value.
Attributes
cols=n
Display n columns of text within the text area.
name=string
Define the name for the text-area value that is passed to the form-processing application
(required).
rows=n
Display n rows of text within the text area.
wrap=style
N2 and later. Set word wrapping within the text area to off, virtual (display wrap, but do
not transmit to server), or physical (display and transmit wrap).
<tfoot>
IE2 and later. Specify the rows that will be grouped as the table footer. Requires no ending tag. Used to
indicate where rules will be drawn when rules=groups is set in the <table> tag.
<th>
Define a table header cell.
Attributes
align=type
Align the cell contents to the left, center, or right.
background=url
Specify an image to be tiled in the background of the cell.
bgcolor=color
N3, IE2 and later. Define the background color for the cell.
bordercolor=color
IE2 and later. Define the border color for the cell.
bordercolordark=color
IE2 and later. Define the dark border-highlighting color for the cell.
bordercolorlight=color
IE2 only. Define the light border-highlighting color for the cell.
colspan=n
Have this cell straddle n adjacent columns.
nowrap
Do not automatically wrap and fill text in this cell.
rowspan=n
Have this cell straddle n adjacent rows.
valign=type
Vertically align this cell's contents to the top, center, bottom, or baseline of the cell.
width=n
Set the width of this cell to n pixels or a percentage of the table width.
<title>
Define the HTML document's title.
<tr>
Define a row of cells within a table.
Attributes
align=type
Align the cell contents in this row to the left, center, or right.
background=url
Specify an image to be tiled in the background of the cell.
bgcolor=color
N3, IE2 and later. Define the background color for this row.
border=n
Create a border n pixels wide.
bordercolor=color
IE2 and later. Define the border color for this row.
bordercolordark=color
IE2 and later. Define the dark border-highlighting color for this row.
bordercolorlight=color
IE2 and later. Define the light border-highlighting color for this row.
valign=type
Vertically align the cell contents in this row to the top, center, bottom, or baseline of
the cell.
<tt>
Format the enclosed text in typewriter-style (monospaced) font.
<ul>
Define an unordered list of bulleted <li> elements.
Attributes
compact
Display the list in a more compact manner.
type=bullet
N2 and later. Set the bullet style for this list to either circle, disc (default), or square.
<var>
The enclosed text is a variable's name.
You might also like
- Introduction to Internet and HTML BasicsNo ratings yetIntroduction to Internet and HTML Basics20 pages
- Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSPNo ratings yetWeb Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP98 pages
- Evolution of HTML: A Historical OverviewNo ratings yetEvolution of HTML: A Historical Overview42 pages
- HTML Basics: Structure and Syntax GuideNo ratings yetHTML Basics: Structure and Syntax Guide36 pages
- Introduction to HTML and Web TechnologyNo ratings yetIntroduction to HTML and Web Technology124 pages
- Introduction to HyperText Markup LanguageNo ratings yetIntroduction to HyperText Markup Language19 pages
- Understanding HTML Basics and StructureNo ratings yetUnderstanding HTML Basics and Structure34 pages
- Hyper Text Markup Language (HTML) : Unit 5No ratings yetHyper Text Markup Language (HTML) : Unit 512 pages
- Project Internship Report On Web Development and Web DesingingNo ratings yetProject Internship Report On Web Development and Web Desinging15 pages
- NMR Spectroscopy: Energy Levels ExplainedNo ratings yetNMR Spectroscopy: Energy Levels Explained21 pages
- Grade IX Graphic Design Curriculum 2020No ratings yetGrade IX Graphic Design Curriculum 202015 pages
- Nonhomogeneous Wavelet Dual SuperframesNo ratings yetNonhomogeneous Wavelet Dual Superframes23 pages
- (Received 1 September 1997) : Philip PettitNo ratings yet(Received 1 September 1997) : Philip Pettit24 pages
- Location Markers: Prepositions & AdverbsNo ratings yetLocation Markers: Prepositions & Adverbs10 pages
- Understanding Deadlock and CPU SchedulingNo ratings yetUnderstanding Deadlock and CPU Scheduling6 pages
- AIP Conference Proceedings Template GuideNo ratings yetAIP Conference Proceedings Template Guide7 pages