************************************************************************

Session 1: 1.
Write HTML code to develop a Web page having the background in red and
title "My First Page" in any other color
Name Sujana Y.
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor=red text=yellow>
<center><b><u>My First Page</b></u></center>
</body>
</html>

************************************************************************
Session 1: 2.
Create an HTML document giving details of your name, age, telephone number,
address, TLC code & enrolment number aligned in proper order.
Name Sujana Y.
Enrolment No: 094545055
************************************************************************

<html>
<head>
<title>My Details</title>
</head>
<body bgcolor=white text=black>
<div align="center">
<table border="0" width="50%">
<tr>
<td colspan="3" height="42">
<p align="center"><u><b>My Details</b></u></td>
</tr>
<tr>
<td width="42%" align="right"><b>Name</b></td>
<td width="3%" align="center"><b>:</b></td>
<td width="51%">Sujana</td>
</tr>
<tr>
<td width="42%" align="right"><b>Age</b></td>
<td width="3%" align="center"><b>:</b></td>
<td width="51%">23</td>
</tr>
<tr>
<td width="42%" align="right"><b>Telephone
Number</b></td>
<td width="3%" align="center"><b>:</b></td>
<td width="51%">+91-9480761007</td>
</tr>
<tr>
<td width="42%" align="right"
valign="top"><b>Address</b></td>
<td width="3%" align="center" valign="top"><b>:</b></td>
<td width="51%">
Gliyaru,<br> Japthi,<br>
Kundapura,<br>
Pin : 576211</td>
</tr>
<tr>
<td width="42%" align="right"><b>TLC Code</b></td>
<td width="3%" align="center"><b>:</b></td>
<td width="51%">1315</td>
</tr>
<tr>
<td width="42%" align="right"><b>Enrolment
Number</b></td>
<td width="3%" align="center"><b>:</b></td>
<td width="51%">094545055</td>
</tr>
</table>
</div>
</body>
</html>

************************************************************************
Session 1: 3.
Write an HTML code to design a page containing text, in form of paragraphs
giving suitable heading style
Name Sujana
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Basic of HTML ~ Paragraph</title>
</head>
<body bgcolor=white text=black>
<H2 align="center"><u>BASIC OF HTML</u></h2>
<div align="center">
<table border="0" width="526">
<tr>
<td align="right" width="520">
<p align="justify">
Web pages or materials in the form of hypermedia documents accessed
through the<br>
located anywhere in the world.

Internet can be

</p>
<p align="justify">
No matter where they originated, most Web documents are created using
Hypertext<br>
Markup Language (HTML). HTML is a powerful authoring language and
has<br>
different versions like HTML 4.2, HTML 4.0, HTML 3.2, HTML 3.0 and
HTML 2.0
</p>
<p align="justify">
HTML is used to define document structure and format, with the help of a
single tag<br>
or a pair of tags. A tag is a string in the language surrounded by a less
than (<) and a<br>
greater than (>) sign. An opening tag does not begin with a (/). An ending
or<br>
closing tag is a string that begins with slash (/).
</p>
<p align="justify">
HTML documents format textual information with embedded markup
tags that<br>
provide style and structure information. A whole document in HTML
begins with<br>
<HTML>and ends with</HTML>.</p>
<p align="justify">&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>

************************************************************************
Session 2: 1.
Create a page to show different attributes of Font tag.
Name Sujana Y
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Font Tag Attributes</title>
</head>
<body>
<p align="center"><font color=#9900CC size=7 face="Comic Sans MS">Welcome to My Page</font></p>
<p align="left"><font size="4">Font Name&nbsp;&nbsp; : Comic Sans MS<br>
Font Size&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :
7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
Font Color&nbsp;&nbsp;&nbsp; : 9900CC</font></p>
</body>
</html>

************************************************************************
Session 2: 2.
Create a page to show different attributes: italics, bold, underline.
Name Sujana
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Formatting Attributes</title>
</head>
<body>
<p align="center"><u><b><font size="4">Following Paragraphs Are Written
Using Formatting Tags</font></b></u></p>
<p align="left">1. This paragraph is written in normal attributes</p>
<p align="left"><i>2. This paragraph is written in Italic face</i></p>
<p align="left"><b>3. This paragraph is written in bold face</b></p>
<p align="left"><u>4. This paragraph is written in underline face</u></p>
<p align="left"><u><i><b>5. This paragraph is written in Italic, bold
and underline face.</b></i></u></p>
</body>
</html>

************************************************************************
Session 2: 3.
Design a page having background color yellow, giving text color red and using
all the attributes of font tab.
Name Sujana
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Background and Font Tag Attributes</title>
</head>
<body bgcolor=yellow text=yellow>
<p><font face="Ancestory SF" size="5" color=red>
This page should have yellow background<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; and the text on it should be
violet in
color<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp and 18 points in size in Cursive writing.</font></p>
</body>
</html>

*******************************************************************************************
*
Session 3: 1.
Write an HTML code to create a Web page of blue color and display links
in red color.
Name Sujana
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Body Attributes</title>
</head>
<body bgcolor=blue link="#FF0000" text="#FFFFFF">
<center><u><b><font size="6">Body Attributes
Use</font></b></u></center><br>
<font size="4"><br>
Browse the linked page </font><a href="q2.html"><font size="4">Click
Here</font></a>
</body>
</html>

************************************************************************
Session 3: 2.
Write an HTML code to create a Web page that contains an image at its center.
Name Sujana Y
Enrolment No: 094545055
*******************************************************************************************
*
<html>
<head>
<title>Image Excercise</title>
</head>
<body>
<div align="center">
<table width="100%" height="100%"><tr><td>
<p align="center">
<img src="logo.gif" alt="IGNOU LOGO">
</td></tr></table>
</div>
</body>
</html>

*******************************************************************************************
*
Session 3: 3.
Create a Web page with appropriate content and insert an image towards the left
hand side of the page. When user clicks on the image, it should open another Web
page.
Name Sujana Y
Enrolment No: 094545055
*******************************************************************************************
*
<html>
<head>
<title>Link Exercise</title>
</head>
<body>
<div align="center">
<table border="0" width="100%">
<tr>
<td colspan="2" height="54">
<p align="center"><u><b><font size="6"
color="#FF3300">Welcome
Nokia Site</font></b></u></td>
</tr>
<tr>
<td width="32%" rowspan="10">
<p align="center"><a href="q1.html">
<img border="0" src="iphone.jpg" width="254"
height="423"></a></td>
<td width="66%" height="64"><font size="4">This site will
provide you free contents for NOKIA mobiles</font></td>
</tr>
<tr>
<td width="66%"><i><font size="4">Identify your
mobile</font></i></td>
</tr>
<tr>
<td width="66%"><b>Nokia 30 Series</b></td>
</tr>
<tr>
<td width="66%">1100, 1108, 2100, 2270, 2272, 2275, 2280,
2285,
2300, 3350, 3410, 3510, 3585, 3590, 6210, 6250, 6310, 6310i,
6340, 6340i, 6360, 6370, 6510, 6590, 6590i, 7110, 7160, 7190,
8910</td>
</tr>
<tr>
<td width="66%"><b>Nokia 40 Series</b></td>
</tr>
<tr>
<td width="66%">2355, 2600, 2610, 2626, 2650, 2651, 2855,
3100,
3105, 3108, 3120, 3125, 3152, 3155, 3155i, 3200, 3205, 3220,
3300, 3510i, 3520, 3530, 3560, 3585i, 3586, 3586i, 3587, 3587i,
3595, 5100, 5140, 5140i, 5200, 5300, 6010, 6012, 6015, 6015i,

6020, 6021, 6030, 6060, 6070, 6080, 6085, 6086, 6100, 6101,
6102, 6103, 6108, 6111, 6125, 6126, 6131, 6133, 6136, 6151,
6152, 6155, 6155i, 6165, 6170, 6200, 6220, 6225, 6230, 6230i,
6233, 6234, 6235, 6235i, 6255, 6265, 6265i, 6270, 6275, 6275i,
6280, 6282, 6288, 6300, 6560, 6585, 6610, 6610i, 6650, 6651,
6800, 6810, 6820, 6820i, 6822, 6830, 7200, 7210, 7250, 7250i,
7260, 7270, 7280, 7360, 7370, 7373, 7390, 7600, 8800, 8801,
8910i</td>
</tr>
<tr>
<td width="66%" height="21"><b>Nokia 60 Series</b></td>
</tr>
<tr>
<td width="66%">3230, 3250, 3600, 3620, 3650, 3660, 5500,
6260,
6290, 6600, 6620, 6630, 6670, 6680, 6681, 6682, 7610, 7650, E50,
E60, E61, E62, E70, N70, N71, N72, N73, N75, N80, N90, N91,
N92,
N93, N95</td>
</tr>
<tr>
<td width="66%"><b>Nokia N-Gage Series</b></td>
</tr>
<tr>
<td width="66%">N-Gage, N-Gage QD</td>
</tr>
</table>
</div>
</body>
</html>

************************************************************************
Session 4: 1.
Create a Web page using href attribute of anchor tag & the attribute alink,
vlink etc.
Name Sujana Y
Enrolment No: 094545055
*******************************************************************************************
*
<html>
<head>
<title>Anchor and Link Color</title>
</head>
<body alink=#FF3300 vlink=#800000 link=#0000FF>
<p align="center"><font size="5">This page demonstrates the use of <i>href
</i>Anchor tag and different anchor coloring attributes</font>
</p>
<p align="center"><a href="q1.html">Click to Open the Linked Page</a>
</p>
<p align="center"><a href="q2.html">Click to Open the Linked Page</a>
</p>
<p align="center"><a href="q3.htm">Click to Open the Linked Page</a>
</p>
</body>
</html>

************************************************************************
Session 4: 2.
Create a Web page, wherein when the user clicks on the link it should go to the
bottom of the page.
Name Sujana Y.
Enrolment No: 094545055
*******************************************************************************************
*
<html>
<head>
<title>Bookmark Excercise</title>
</head>
<body>
<h3 align=center><a name="homePosition"></a></h3>
<h3 align=center>This Page Demonstrate the Use of on Page
Link or Bookmark, Using the Anchor Tags</h3>
<p align="right">
<a href="#bottonPosition">Go to Bottom</a>
<br><br>
<p align=center>
<img src=tree.gif alt="Center Picture" width="350" height="450"></p>
<br><br><br>
<br><a href="#homePosition">Go to Top</a><br>
<a name="bottonPosition"></a>
</p>
</body>
</html>

************************************************************************
Session 4: 3.
Write HTML code to create a Web page of pink color and display a moving message
in red colour.
Name Sujana Y.
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Marquee Exercise</title>
</head>
<body bgcolor=pink>
<marquee behavior=alternate>
<font color="#FF0000" size="5">
<b>Welcome to Indira Gandhi National Open University</b>
</font>
</marquee>
</body>
</html>

************************************************************************
Session 5: 1.
Create a web page, showing an ordered list of the names of five of your friend.
Name Sujana Y.
Enrolment No: 094545291
************************************************************************
<html>
<head>
<title>Ordered List Exercise</title>
</head>
<body>
<h3 align=center><u>List of My Best Five Friends</u></h3>
<ol>
<li>Iona</li>
<li>Shwaetha</li>
<li>Depthi</li>
<li>Rachana</li>
<li>Debabrata Saha</li>
</ol>
</body>
</html>

************************************************************************
Session 5: 2.
Create a HTML document containing a nested list showing the content page of any
book.
Name Sujana
Enrolment No: 094545055
************************************************************************

<html>
<head>
<title>Nested Ordered List Exercise</title>
</head>
<body bgcolor="skyblue">
<ol type="1">
<li>Lists
<ol type="i">
<li>Unorderd list</li>
<li>Orderd List</li>
<li>Defination List</li>
</ol>
</li>
<li>Tables
<ol type="i">
<li>Table Tags</li>
<ol type="I">
<li>TD</li>
<li>TH</li>
<li>TR</li>
</ol>
<li>Cell Spacing and Cell Pading</li>
<li>Colspan and rowspan<li>
</ol>
</li>
<li>Frames
<ol type="i">
<li>Frameset</li>
<li>Frame Tag</li>
<li>No frame tag</li>
</ol>
</li>
</body>
</html>

************************************************************************
Session 5: 3.
Create a web page, showing a un ordered list of the names of five of your friend.
Name Krishna Prabhu
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>un Ordered List Exercise</title>
</head>
<body>
<h3 align=center><u>List of My Best Five Movies</u></h3>
<ul Type="square">
<li>DDLJ</li>
<li>DTPH</li>
<li>KNPH</li>
<li>KRRISH</li>
<li>D2</li>
</ul>
</body>
</html>

************************************************************************
Session 6: 1.
Create a Web page, which should contain a table having two rows and two columns.
Name Sujana
Enrolment No: 094545055
************************************************************************
<html>
<head>

<title>Basic Table Exercise</title>
</head>
<body>
<p align="center"><b>Empty Table Having Two Rows and Two
Columns</b></p>
<table border="1" width="100%">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>

************************************************************************
Session 6: 2.
Fill in some dummy data in the table created by you in question 1 of this session.
Name Sujana Y
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Basic Table With Data Exercise</title>
</head>
<body>
<p align="center"><b>Empty Table Having Two Rows and Two

Columns</b></p>
<table border="1" width="100%">
<tr>
<td>Windows 2000</td>
<td>Windows XP</td>
</tr>
<tr>
<td>Windows 2003</td>
<td>Windows Vista</td>
</tr>
</table>
</body>
</html>

************************************************************************
Session 6: 3.
Create the following table in HTML with Dummy Data
<<<Table Graphics>>>
Name Sujana Y
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Advance Table Exercise</title>
</head>
<body>
<table border="1" width="985" bordercolorlight="#000000"
bordercolordark="#000000" style="border-collapse: collapse">
<tr>
<td rowspan="2" width="148" valign="top">Name of train</td>
<td rowspan="2" valign="top" width="148">
<p align="left">&nbsp; Place</td>
<td rowspan="2" valign="top" width="149">&nbsp;
Destination</td>
<td rowspan="2" valign="top" width="149">&nbsp; Train No.</td>
<td colspan="2" valign="top">&nbsp; Time</td>
<td rowspan="2" valign="top" width="89">&nbsp; Fair</td>
</tr>
<tr>
<td valign="top" width="149">&nbsp; Arrival</td>
<td valign="top" width="149">&nbsp; Departure</td>
</tr>
<tr>
<td width="148" valign="top">Rajdhani Express</td>
<td valign="top" width="148">Sealdah</td>
<td valign="top" width="149">Delhi</td>
<td valign="top" width="149">2313</td>
<td valign="top" width="149">16-35</td>
<td valign="top" width="149">10-45</td>
<td valign="top" width="89">4,500</td>
</tr>
<tr>
<td width="148" valign="top">Darjeeling Mail</td>
<td valign="top" width="148">NJP</td>
<td valign="top" width="149">Sealdah</td>
<td valign="top" width="149">3144</td>
<td valign="top" width="149">08-50</td>
<td valign="top" width="149">19-35</td>
<td valign="top" width="89">1,500</td>
</tr>
<tr>
<td width="148" valign="top">Shatabdi</td>
<td valign="top" width="148">Howrah</td>
<td valign="top" width="149">Mumbai</td>
<td valign="top" width="149">2019</td>
<td valign="top" width="149">07-00</td>
<td valign="top" width="149">22-00</td>

<td valign="top" width="89">3,000</td>
</tr>
</table>
</body>
</html>

************************************************************************
Session 7: 1.
Create the following table <<<Table Graphics>>>
Name Sujana Y
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Table With Color</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan="3"><b>Color (White)</b></td>
</tr>
<tr>
<td bgcolor="#FF0000" width="327"><font
color="#FFFFFF">RED</font></td>
<td bgcolor="#008000" width="327"><font
color="#FFFFFF">GREEN</font></td>
<td bgcolor="#000000" width="327"><font
color="#FFFFFF">BLACK</font></td>
</tr>
</table>
</body>
</html>

************************************************************************
Session 7: 2.
Design an HTML Page having 3 images placed in the following format. <<<Table
Graphics>>>
Name Sujana Y
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Table With Images</title>
</head>
<body>
<div align="center">
<table border="1" width="536" height="512" bordercolorlight="#000000"
bordercolordark="#000000" style="border-collapse: collapse">
<tr>
<td>
<div align="center">
<table border="1" width="482" bordercolorlight="#000000"
bordercolordark="#000000" style="border-width:0px; bordercollapse:
collapse">
<tr>
<td width="160">
<img border="0" src="dollar.gif" width="150"
height="150"></td>
<td width="160" style="border-right-style:
none; border-right-width: medium; border-topstyle:
none; border-top-width:
medium">&nbsp;</td>
<td width="160" style="border-style: none;
border-width: medium">&nbsp;</td>
</tr>
<tr>
<td width="160" style="border-left-style: none;
border-left-width: medium; border-bottomstyle:
none; border-bottom-width:
medium">&nbsp;</td>
<td width="160">
<img border="0" src="pound.gif"
width="150" height="150"></td>
<td width="160" style="border-right-style:
none; border-right-width: medium; border-topstyle:
none; border-top-width:
medium">&nbsp;</td>
</tr>
<tr>
<td width="160" style="border-style: none;
border-width: medium">&nbsp;</td>
<td width="160" style="border-left-style: none;
border-left-width: medium; border-bottomstyle:
none; border-bottom-width:
medium">&nbsp;</td>
<td width="160">
<img border="0" src="euro.gif"

width="150" height="150"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

********************************************************************************************
Session 7: 3.
Write HTML code to generate the following output:<<<Table Graphics>>>
Name Sujana Y
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Advance Table Creation</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td rowspan="2" width="33.33%">Weather</td>
<td width="33.33%"><b>DELHI</b></td>
<td width="33.33%"><b>MUMBAI</b></td>
</tr>
<tr>
<td width="33.33%">40</td>
<td width="33.33%">35</td>
</tr>
</table>
</body>
</html>

************************************************************************
Session 8: 1.
What are HTML Physical style tags and Logical style tags?
Name Sujana Y
Enrolment No: 094545055
************************************************************************
The style tags provide a straightforward way to control the font. These tags fall into
two categories: physical styles and logical styles.
Physical style tags allow you to specify a particular font change. For example, to make
text bold, you can mark it off with the <b> tag: <b>bold text</b>.
Logical Styles
At first glance, logical styles seem similar to physical styles:
<strong>: makes text strong.
<em>: makes text emphasized.
<cite>: marks off citations.
<code>: marks off computer code fragments and commands.
We might have noticed that the <strong< tag looks an awful lot like the <b> tag, the
<em> tag looks a lot like the <i> tag, and so on. However, there is a subtle difference
between the physical styles (such as <b> and <i>) and the logical styles (such as
<strong> and <em>).
************************************************************************
Session 8: 2.
Which HTML tag allows you to scroll text on the Web page?
Name Sujana Y
Enrolment No: 094545055
************************************************************************
</html>
<MARQUEE BEHAVIOR="scroll" DIRECTION ="left">Computer Hope</MARQUEE>
</html>
<!-- marquee behavior tag allow you to scroll text. >

************************************************************************
Session 8: 3.
What is the comment tag in HTML?
Name Sujana Y
Enrolment No: 094545055
************************************************************************
The comment tag is used to insert a comment in the 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.
Example:
<!--This text is a comment-->

****************************************************************************************
Session 8: 4.
Design an HTML Page for the "Block Introduction" of this Book: The page should
allow scrolling and the code should contain a comment header with your name and
Enrolment number.
Name Sujana Y
Enrolment No: 094545055
******************************************************************************************
<!-NAME : Sujana Y
ENROLLMENT NO : 094545055
-->
<html>
<head>
<title>Block Introduction</title>
</head>
<body scroll=yes>
<hr color="#000000">
<b><font size="4">Block INTRODUCTION</font></b>
<hr color="#000000">
<p>This Block is a practical block. It consists of 5 sections, namely, HTMLAdvanced <br>
HTML, VBScript, JavaScript, and Dreamweaver. Each
section
introduces the basics <br> of scripting language, how to create the basic
documents and finally a list of 10<br>sessions for doing practical
exercises.
The details of the commands of the scripting<br>language are explained
in the respective units of Block 1 of this course.</p>
<p>The block is organized as follows: section 1 describes HTML. It
introduces the basics<br>of HTML, how to create of HTML document,
steps for creating an HTML program<br>and finally, it contains 10
sessions for lab
practice.</p>
<p>Section 2 goes one step further and introduces Advanced HTML. All
the
lab exercises<br>in this session are about the two basic advanced features:
frames and forms. HTML<br>deals with forms exactly the same way as
you
would with a paper form. There are<br>groups of items are single items
all
gathered together in one large form, like a paper<br>form.</p>
<p>Section 3 focused for JavaScript, which is also a scripting language.
The JavaScript<br>provides interactivity to the user. The following
features and supported in JavaScript:</p>
<ul>
<li>Add scrolling or changing messages to the browser's status
line.</li>
<li>Validate the contents of a form and make calculations.</li>
<li>Display message to the user, either as part of a web page or in
alert boxes.</li>
<li>Animate images or create images that change when you move
the
mouse over<br>them.</li>

<li>Detect the browser in use and display different contents for
different browsers.</li>
<li>Detect installed plugins and notify the user if a plugin is
required.</li>
</ul>
<p>This section also gives tips on how to incorporate JavaScript into a
Web page.</p>
<p>Section 4 introduces VBScript. Like JavaScript, VBScript is a
powerful and easy to<br>learn tool that can be use to provide interactivity
to the Web page. As in the previous<br>section we also discuss how to
incorporate VBScript into HTML page.</p>
<p>Section 5 is the last section, which works like an HTML editor.
Before providing lab<br>session we provide the following description
about
the package:</p>
<ul>
<li>How to work in a Dreamweaver.</li>
<li>Insert external media in the WebPages.</li>
<li>Adding SSI to the page.</li>
<li>Adding CSS style to the page.</li>
</ul>
</body>
</html>

****************************************************************************************
Session 9: 1.
What difference does it make if we express the width of a table in percentage or in
pixel value? And how do we set the width of a particular column or cell in a table?
Name Sujana Y
Enrolment No: 094545055
*****************************************************************************************
When we use percentage instead of fixed pixel Sizes, the table will resize automatically
to fit any size browser window. Using percentage rather than fixed pixel sizes is
something that you should always do. This gives the browser the freedom to resize to
the users monitor settings, a freedom that does not exist when fixed size is used.
Example: The following HTML tags makes a table 500 pixel wide and 400 pixels high
<table width=“500” height=“400” >
To make the first cell of the table 20% of the total table width and the second cell 80% of
the table width, we would type the following :
<table> <tr><td width= “20%”> skinny cell </td>
<td width= “80%”> fat cell </td></tr> </table>

************************************************************************
Session 9: 2.
Write HTML code to generate the following output: <<<Table Graphics>>>
Name Sujana Y
Enrolment No: 094545055
************************************************************************
<html>
<head>
<title>Advanced Table Creation</title>
</head>
<body>
<table border="1" width="985">
<tr>
<td width="245">&nbsp;1</td>
<td width="245">&nbsp;2</td>
<td width="245">&nbsp;3</td>
<td width="246">&nbsp;4</td>
</tr>
<tr>
<td width="245">&nbsp;5</td>
<td width="490" colspan="2" rowspan="2">
<img border="0" src="pound.gif" width="534" height="47"></td>
<td width="246">&nbsp;6</td>
</tr>
<tr>
<td width="245">&nbsp;7</td>
<td width="246">&nbsp;8</td>
</tr>
<tr>
<td width="245">&nbsp;9</td>
<td width="245">&nbsp;10</td>
<td width="245">&nbsp;11</td>
<td width="246">&nbsp;12</td>
</tr>
</table>
</body>
</html>

***********************************************************************************************
***********************
Session 9: 3.
Cerate a Web page that should contain a table having seven rows and four
columns, along with the attributes - colspan & rowspan.
Name Sujan Y
Enrolment No: 094545055
********************************************************************************************
<html>
<head>
<title>Advanced Table Creation</title>
</head>
<body>
<table border="1" width="100%" bordercolorlight="#FFFFFF"
bordercolordark="#000000" bordercolor="#000000">
<tr>
<td colspan="4">&nbsp;</td>
</tr>
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td rowspan="2">&nbsp;</td>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>

</html>

***********************************************************************************************
***************************
Session 10: 1.
What are the different versions of HTML?
Name Krishna Prabhu
Enrolment No: 094545291
***********************************************************************************************
Following are the different version of HTML
HTML 2.0
HTML 3.0
HTML 3.2
HTML 4.0
HTML 4.2

***********************************************************************************************
***************************
Session 10: 2.
List 5 different HTML Editors.
Name Krishna Prabhu
Enrolment No: 094545291
***********************************************************************************************
List of 5 HTML Editors
1) Notepad
2) Microsoft Front Page
3) Micromedia Dreamweaver
4)Blue Voda
5)Microsoft Visual Web Developer

***********************************************************************************************
***************************
Session 10: 3.
What is the different image formats?
Name Krishna Prabhu
Enrolment No: 094545291
***********************************************************************************************
List of different image formats
JPEG
BMP
GIF
TIF

SECTION 2 (Advanced HTML)
***********************************************************************
*
Session 1: 1.
How do you handle the situation when the browser doesn’t
support frames?
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
<NOFRAMES> tag used for display information when the browser
doesn’t support
frames.
***********************************************************************
*
Session 1: 2.
What are inline frames?
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
Inline frames
Inline frames are similar to frames pages except that the inline frame
and its contents
are embedded on an existing Web page. Anything that you can put on
a regular page
you can put in an inline frame. You can customize inline frames in the
same ways as
regular frames and also enable scroll bars.
One of the advantages of using inline frames is that you don't need to
create a separate
frames page in order to have embedded content.
You can use inline frames in a variety of ways:
To insert a contract for your site visitor to fill out.
To give examples of what other Web pages look like.
As a container for a form (form: A set of data-entry fields on a page
that are
processed on a Web server. The data is sent to the server when a site
visitor
submits the form by clicking a button or, in some cases, by clicking a
graphic.)
As a scrolling box with products and prices.
Add an inline frame to a page
1. In Page view, at the bottom of the document window, click Design.
2. On the Insert menu, click Inline Frame.

3. Set the initial page (initial page: The page that is initially displayed
in a frame
when a site visitor browses to a frames page containing the frame. In
FrontPage,
you can assign the initial page to a frame in Page view.) of the inline
frame.

***********************************************************************
*
Session 1: 3.
Which tag is used to define frames in HTML?
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
<FRAMESET> tag define frames in HTML
Example:
<frameset col= “50%, 50%”>
<frameset rows= “10%,50%,40%”>
</frameset>

***********************************************************************
********
Session 2: 1.
Write an HTML code to develop a Web page having two frames
that divide the Web
page into two equal rows.
Name Krishna Prabhu
Enrolment No:
094545291
***********************************************************************
********
<html>
<head>
<title>Basic Frame Exercise</title>
</head>
<frameset rows="*,*">
<frame name="topFrame">
<frame name="bottomFrame">
</frameset>
</html>

***********************************************************************
*
Session 2: 2.
Write an HTML code to develop a Web page having two frames
that divide the Web
page into two equal rows and then divide the second row into
two equal columns.
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
<html>
<head>
<title>Advance Frame Exercise</title>
</head>
<frameset rows="*,*">
<frame name="topFrame">
<frameset cols="*,*">
<frame name="bottomFrameA">
<frame name="bottomFrameV">
</frameset>
</frameset>
</html>

***********************************************************************
*
Session 2: 3.
Write an HTML code to develop a Web page having frames as
described in the above question and then fill each frame with a
different background color.
Name Krishna Prabhu
Enrolment No: 094545055
***********************************************************************
*
<html>
<head>
<title>Advance Frame Exercise</title>
</head>
<frameset rows="*,*">
<frame name="topFrame" src="top.htm">
<frameset cols="*,*">
<frame name="bottomFrameA" src="bottomleft.htm">
<frame name="bottomFrameV" src="bottomRight.htm">
</frameset>
</frameset>
</html>

***********************************************************************
********
Write the code to develop a web page as shown below using
frames.
Name Krishna Prabhu
Enrolment No:
094545291
***********************************************************************
********

<HTML>
<head>
<title>Frames Example</title>
</head>
<frameset cols="*,2*">
<frame src=1.html>
<frameset rows="50%,50%">
<frame src=2.html>
<frameset cols="*,2*">
<frame src=3.html>
<frame src=3.html>
</frameset>
</frameset>
</frameset>
</html>

***********************************************************************
*
Design a page with a text box called name and a button with
label Enter. When you click on the button another page should
open with the message “Welcome <name>”, where name
should be equal to the name entered in the first page.
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
********
<html>
<head>
</head>
<script Language=VBScript>
Sub btnEnter_OnClick()
document.write" WELCOME "&frm.txtName.Value&"<br>"
End Sub
</script>
<form name="frm">
<table><tr>
<td><h4>Enter your Name</h4></td><td><input type=text
Name=txtName size="27"></td>
</tr></table>
<input type="submit" value="Enter" Name="btnEnter" />
</form>
</body>

***********************************************************************
*
‘Design a page, which is like ‘compose’ page of e-mail’
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
<html>
<head>
</head>
<body>
<form>
<table cellspacing="10">
<tr>
<td>To</td>
<td><input type=text Name=txtState size="40"></td>
</tr>
<tr>
<td>Cpoy</td>
<td><input type=text Name=txtState size="40"></td>
</tr>
<tr>
<td>Message</td>
<td></td>
</tr>
<tr>
<td></td>
<td rowspan=3><Textarea cols=35 rows=9></textarea></td>
</tr>
<table>
<input type=button Name=btnSend value="Send" size="40">
</form>
</body>

***********************************************************************
*
Program No:1
Create a form in HTML containing the following fields and then
perform the validation of each field using vb script.
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
<html>
<head>
<title>Validate</title>
</head>
<script Language=VBScript>
function addcheck()
msgbox"Please check your email details are correct before submitting"
end function
Sub btnSubmit_OnClick()
name=frm.txtName.value
count=len(name)
for i=1 to count
var=mid(name,i,1)
if isnumeric(var)=true then
Msgbox "Name schould be charector"
Exit sub
frm.txtName.value=""
frm.txtName.focus
Exit for
end if
next
no=frm.txtPhone.value
count=len(no)
for i=1 to count
var=mid(No,i,1)
if isnumeric(var)<>true then
Msgbox "Enter only numeric digits"
Exit sub
frm.txtPhone.value=""
frm.txtPhone.focus
Exit for
end if
next

if name = frm.txtName.value="" or frm.txtAddress.value="" or
frm.txtphone.value="" or frm.txtemail.value="" Then
MSGBOx "Enter All the fields."
Exit Sub
else
name =frm.txtName.value
add = frm.txtAddress.value
phone=frm.txtphone.value
email=frm.txtemail.value
v=frm.date.value & "/" & frm.month.value & "/" & frm.year.value
document.write"Your Details"&"<br>"
document.write"<Table>"
document.write"<tr>"
document.write"<td>"
document.write"Name"
document.write"</td>"
document.write"<td>"
document.write name
document.write"</td>"
document.write"</tr>"
document.write"<tr>"
document.write"<td>"
document.write"Address"
document.write"</td>"
document.write"<td>"
document.write add
document.write"</td>"
document.write"</tr>"
document.write"<tr>"
document.write"<td>"
document.write"Phone"
document.write"</td>"
document.write"<td>"
document.write phone
document.write"</td>"
document.write"</tr>"
document.write"<tr>"
document.write"<td>"
document.write"Email"
document.write"</td>"
document.write"<td>"
document.write email
document.write"</td>"
document.write"</tr>"

document.write"<tr>"
document.write"<td>"
document.write"Date"
document.write"</td>"
document.write"<td>"
document.write v
document.write"</td>"
document.write"</tr>"
document.write"</table>"
end if
End Sub
</script>
<body>
<form Name="frm">
<table cellpadding="4" border="2">
<tr>
<td width="137" height="25" align="right">Name</td>
<td width="230" height="25"><input type=text Name=txtName
width="20" size="27"></td></tr>
<tr>
<td width="137" height="76" align="right">Address</td>
<td width="230" height="76"><Textarea width="20" rows="3"
cols="21" Name=txtAddress></textarea></td></tr>
<tr>
<td width="137" height="25" align="right">Phone</td>
<td width="230" height="25"><input type=text Name=txtPhone
size="27"></td>
</tr>
<tr>
<td width="137" height="25" align="right">email</td>
<td width="230" height="25"><input type=text Name=txtEmail
size="27" onBlur=addCheck()></td>
</tr>
<tr>
<td width="137" height="48" align="right">Date of Birth</td>
<td width="230" height="48">
<select Name="date">
<option Selected>date</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>

<option value="07">07</option>
<option value="08">08</option>
<option value="04">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select Name="month" >
<option selected>month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="04">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select Name="year">
<option Selected>year</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>

<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Register" Name="btnSubmit" />
</td><td</td></tr>
</table>

</form>
</body>
</html>

***********************************************************************
********
Program No:2
Using an HTML form accept the principle rate of interest and
time from the user, validate the three fields and the display
the simple interest to the user.
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
<html>
<head>
<title>Simple Intrest</title>
</head>
<script Language=VBScript>
Sub btnCal_OnClick()
if name = frm.txtP.value="" or frm.txtR.value="" or frm.txtT.value=""
Then
MSGBOx "Enter All the fields."
Exit Sub
end if
P=frm.txtP.value
count=len(P)
for i=1 to count
var=mid(P,i,1)
if isnumeric(var)<>true then
Msgbox "Enter only numeric digits"
Exit sub
frm.txtP.value=""
frm.txtP.focus
Exit for
end if
next
R=frm.txtR.value
count=len(R)
for i=1 to count
var=mid(R,i,1)
if isnumeric(var)<>true then
Msgbox "Enter only numeric digits"
Exit sub
frm.txtR.value=""

frm.txtR.focus
Exit for
end if
next
T=frm.txtT.value
count=len(T)
for i=1 to count
var=mid(T,i,1)
if isnumeric(var)<>true then
Msgbox "Enter only numeric digits"
Exit sub
frm.txtT.value=""
frm.txtT.focus
Exit for
end if
next
ans=(P*T*R)/100
frm.txtI.value=ans
End Sub
</script>
<body>
<form Name="frm">
<Center><lable><h3>Calculating the simple intrest</h3></lable>
<table cellpadding="4" border="2">
<tr>
<td width="137" height="25" align="right">Principle AMount</td>
<td width="230" height="25"><input type=text Name=txtP
width="20" size="27"></td></tr>
<tr>
<td width="137" height="25" align="right">Rate of Intrest</td>
<td width="230" height="25"><input type=text Name=txtR
size="27"></td>
</tr>
<tr>
<td width="137" height="25" align="right">Time</td>
<td width="230" height="25"><input type=text Name=txtT
size="27"></td>
</tr>
<tr>
<td width="137" height="48" align="right">Simple Intrest</td>
<td width="230" height="48">

<input type=text Name=txtI size="27"></td>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Calculate" Name="btnCal" />
</td><td</td></tr>
</table>
</center>
</form>
</body>

***********************************************************************
*
Program No:3
Using the do while loop display the factorial of a number.
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
<html>
<head>
<title>Factorail</title>
</head>
<script Language=VBScript>
Sub btnCal_OnClick()
if frm.txtF.value="" Then
MSGBOx "Please enter a number."
Exit Sub
end if
f=frm.txtF.value
count=len(f)
for i=1 to count
var=mid(f,i,1)
if isnumeric(var)<>true then
Msgbox "Please enter a number"
Exit sub
frm.txtP.value=""
frm.txtP.focus
Exit for
end if
next
eg=Int(f)
i=1
fact=1
Do While i<=eg
fact=fact*i
i=i+1
Loop
frm.txtAns.value=fact
End Sub
</script>
<body>

<form Name="frm">
<Center><lable><h3>Finding the factorial of given
number</h3></lable>
<table cellpadding="4" border="2">
<tr>
<td width="137" height="25" align="right">Enter a number</td>
<td width="230" height="25"><input type=text Name=txtF
width="20" size="27"></td></tr>
<tr>
<td width="137" height="25" align="right">Rate of Intrest</td>
<td width="230" height="25"><input type=text Name=txtAns
size="27"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Factorial" Name="btnCal" />
</td><td</td></tr>
</table>
</center>
</form>
</body>

***********************************************************************
*
Program No:4
Design a form using all input types
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
<html>
<head>
</head>
<center>
<lable><h3> Input Types of Form</h3></lable>
<table cellpadding="4" width="422" border="2">
<tr>
<td width="86" height="25" align="left">Name</td>
<td width="310" height="25"><input type="text"
Name="txtName" width="20" size="27"></td>
</tr>
<tr>
<td width="86" height="76" align="left">Address</td>
<td width="310" height="76"><textarea width="20" rows="3"
cols="21" Name="txtAddress"></textarea></td>
</tr>
<tr>
<td width="86" height="25" align="left">Password</td>
<td width="310" height="25"><input type="password"
Name="txtpw" size="27"></td>
</tr>
<tr>
<td width="86" height="25" align="left">Country</td>
<td width="310" height="25"><select Name="cmbCountry">
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Brazil">Brazil</option>
<option value="Canada&gt;Canada&lt;/option&gt;
&lt;option value=" China">China, Peoples Republic of</option>
<option value="Denmark">Denmark</option>
<option value="England">England</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>

<option value="Hong Kong">Hong Kong</option>
<option value="India">India</option>
<option value="Malaysia">Malaysia</option>
<option value="Mexico">Mexico</option>
<option value="New Zealand">New Zealand</option>
<option value="South Africa">South Africa</option>
<option value="Switzerland">Switzerland</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select></td>
</tr>
<tr>
<td width="86" height="21" align="left">Sex</td>
<td width="310" height="21">Male<input type="radio"
name="rbMale" value="Male">
Female<input type="radio" name="rbFemale"
value="FeMale"></td>
</tr>
<tr>
<td width="86" height="48" align="left">Hobies</td>
<td width="310" height="48">Cricket<input type="checkbox"
value="ON"> Music<input type="checkbox" </td value="ON">
</tr>
<tr>
<td width="86" height="48" align="left">Submit Button</td>
<td width="310" height="48"><input type="submit"
value="Submit" Name="btnRegisiter" />
</tr>
<tr>
<td width="86" height="48" align="left">Reset Button</td>
<td width="310" height="48"><input type="reset"
value="Clear" />
</tr>
</table>
&nbsp; </center></form>
</body>
</html>

***********************************************************************
*
Program No: 1
Embed Java script in html document asking user’s name and
then printing Hello
<User Name>.
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
<html>
<head>
<body>
<script language="javascript">
var name=prompt("Enter your name");
alert("Hello"+" " + name);
</script>
</body>
</html>

***********************************************************************
*
Program No:2
Design a web page to display a multiplication table.
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
<html>
<head>
<script language="javascript">
function fn(x)
{
for(i=1;i<=10;i++)
{
alert("HI"+i);
document.write(parseInt(x.value)*i+"<BR>");
}
}
</script>
</head>
<body>
<form>
<input type="text" name="no">
<input type="submit" value="GetTable" Name="B" OnClick=fn(no)>
</form>
</body>
</html>

***********************************************************************
*
Program No:3
Designing a web page to create a pull down menu box.
Name Sujana Y
Enrolment No: 094545055
***********************************************************************
*
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!-function go(){
if(document.selecter.select1.options[document.selecter.select1.selecte
dIndex].value!="none")
{
location=document.selecter.select1.options[document.selecter.select1
.selectedIndex].value
}
}
//->
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!-document.write('<form name="selecter"><select name="select1">');
document.write('<option value=none>Quick Links');
document.write('<option value=none>---------------------------');
document.write('<option
value="http://www.southcansoftware.com">My Company');
document.write('<option value="http://www.gmail.com">My Mail to
check');
document.write('<option value="http://www.google.com">Serch');
document.write('</select>');
document.write('<input type="button" value="Go" onclick="go()">');
//->
</script>
</body>
</html>

***********************************************************************
********
Program No:4
Design a page to change color of the text randomly.
Name Sujana Y
Enrolment No: 094545055
**********************************************************************
<script language="JavaScript" type="text/javascript">
function chcolor(){
document.fgColor=randomBg();
setInterval('chcolor',1000)
}
function randomBg(){
var hex1=new
Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
var hex2=new
Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
var hex3=new
Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
var hex4=new
Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
var hex5=new
Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
var hex6=new
Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
var bg="#"+hex1[Math.floor(Math.random()*hex1.length)]
+hex2[Math.floor(Math.random()*hex2.length)]
+hex3[Math.floor(Math.random()*hex3.length)]
+hex4[Math.floor(Math.random()*hex4.length)]
+hex5[Math.floor(Math.random()*hex5.length)]
+hex6[Math.floor(Math.random()*hex6.length)]
return bg;
}
</script>
<html>
<body>
Hello
<script language="JavaScript">
setInterval("chcolor()",1000);
</script>
</body>
</html>

Sign up to vote on this title
UsefulNot useful