Session 1: 1. Write HTML Code To Develop A

************************************************************************
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.

************************************************************************
<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="51%">23</td>
</tr>
<tr>
<td width="42%" align="right"><b>Telephone
Number</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="51%">1315</td>
</tr>
<tr>
<td width="42%" align="right"><b>Enrolment
Number</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>

<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> Internet can be
located anywhere in the world.
</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"> </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   : Comic Sans MS<br>
Font Size      :
7      <br>
Font Color    : 9900CC</font></p>
</body>
</html>
************************************************************************
Session 2: 2.
Create a page to show different attributes: italics, bold, underline.

************************************************************************
<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.

************************************************************************
<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>

         and the text on it should be
violet in
color<br>          &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.

************************************************************************
<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.

********************************************************************************************
<html>
<head>
<title>Image Excercise</title>
</head>
<body>
<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.

********************************************************************************************
<html>
<head>
<title>Link Exercise</title>
</head>
<body>
<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.

********************************************************************************************
<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.

********************************************************************************************
<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.

************************************************************************
<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.

************************************************************************
<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.

************************************************************************
<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.

************************************************************************
<html>
<head>
<title>Basic Table Exercise</title>
</head>
<body>
<p align="center"><b>Empty Table Having Two Rows and Two
Columns</b></p>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
************************************************************************
Session 6: 2.
Fill in some dummy data in the table created by you in question 1 of this session.

************************************************************************
<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>
<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>>>

************************************************************************
<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"> Place</td>
<td rowspan="2" valign="top" width="149">
Destination</td>
<td rowspan="2" valign="top" width="149"> Train No.</td>
<td colspan="2" valign="top"> Time</td>
<td rowspan="2" valign="top" width="89"> Fair</td>
</tr>
<tr>
<td valign="top" width="149"> Arrival</td>
<td valign="top" width="149"> 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="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>
</tr>
<tr>
<td width="148" valign="top">Shatabdi</td>
<td valign="top" width="148">Howrah</td>
<td valign="top" width="149">Mumbai</td>
</tr>
</table>
</body>
</html>
************************************************************************
Session 7: 1.
Create the following table <<<Table Graphics>>>

************************************************************************
<html>
<head>
<title>Table With Color</title>
</head>
<body>
<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>>>

************************************************************************
<html>
<head>
<title>Table With Images</title>
</head>
<body>
<table border="1" width="536" height="512" bordercolorlight="#000000"
bordercolordark="#000000" style="border-collapse: collapse">
<tr>
<td>
<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"> </td>
<td width="160" style="border-style: none;
border-width: medium"> </td>
</tr>
<tr>
<td width="160" style="border-left-style: none;
border-left-width: medium; border-bottomstyle:
none; border-bottom-width:
medium"> </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"> </td>
</tr>
<tr>
<td width="160" style="border-style: none;
border-width: medium"> </td>
<td width="160" style="border-left-style: none;
border-left-width: medium; border-bottomstyle:
none; border-bottom-width:
medium"> </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>>>

************************************************************************
<html>
<head>
<title>Advance Table Creation</title>
</head>
<body>
<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?

************************************************************************
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?

************************************************************************
</html>
<MARQUEE BEHAVIOR="scroll" DIRECTION ="left">Computer Hope</MARQUEE>
</html>

****************************************************************************************
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.

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

<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?

*****************************************************************************************
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>>>
************************************************************************
<html>
<head>
<title>Advanced Table Creation</title>
</head>
<body>
<table border="1" width="985">
<tr>
<td width="245"> 1</td>
<td width="245"> 2</td>
<td width="245"> 3</td>
<td width="246"> 4</td>
</tr>
<tr>
<td width="245"> 5</td>
<td width="490" colspan="2" rowspan="2">
<img border="0" src="pound.gif" width="534" height="47"></td>
<td width="246"> 6</td>
</tr>
<tr>
<td width="245"> 7</td>
<td width="246"> 8</td>
</tr>
<tr>
<td width="245"> 9</td>
<td width="245"> 10</td>
<td width="245"> 11</td>
<td width="246"> 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"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
</table>
</body>
</html>
***********************************************************************************************
***************************
Session 10: 1.
What are the different versions of HTML?
***********************************************************************************************
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.
***********************************************************************************************
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?
***********************************************************************************************
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?
************************************************************************
<NOFRAMES> tag used for display information when the browser doesn’t support
frames.
************************************************************************
Session 1: 2.
What are inline frames?
************************************************************************
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?
************************************************************************
<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.
************************************************************************
<html>
<head>
<title>Advance Frame Exercise</title>
</head>
<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.
************************************************************************
<html>
<head>
<title>Advance Frame Exercise</title>
</head>
<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.

************************************************************************
*******
<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’

************************************************************************
<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.

************************************************************************
<html>
<head>
<title>Validate</title>
</head>
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 name
document.write"</tr>"
document.write"Address"
document.write add
document.write"Phone"
document.write phone
document.write"Email"
document.write email
document.write"Date"
document.write v
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>
</select>
<select Name="month" >
<option selected>month</option>
</select>
<select Name="year">
<option Selected>year</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.

************************************************************************
<html>
<head>
<title>Simple Intrest</title>
</head>
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)
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)
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)
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>
<tr>
<td width="137" height="25" align="right">Principle AMount</td>
<td width="230" height="25"><input type=text Name=txtP width="20"
<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>
<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.

************************************************************************
<html>
<head>
<title>Factorail</title>
</head>
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)
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>
<tr>
<td width="137" height="25" align="right">Enter a number</td>
<td width="230" height="25"><input type=text Name=txtF width="20"
<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>
<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

************************************************************************
<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>Canada</option>
<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>
</center></form>
</body>
</html>
************************************************************************
Program No: 1
Embed Java script in html document asking user’s name and then printing Hello
<User Name>.

************************************************************************
<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.

************************************************************************
<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.

************************************************************************
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function go(){
if(document.selecter.select1.options[document.selecter.select1.selectedIndex].value!
="none")
{
location=document.selecter.select1.options[document.selecter.select1.selectedIndex].valu
e
}
}
//->
</script>
</head>
<body>
<!--
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.

**********************************************************************
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 bg="#"+hex1[Math.floor(Math.random()*hex1.length)]
+hex2[Math.floor(Math.random()*hex2.length)]
return bg;
}
</script>
<html>
<body>
Hello
<script language="JavaScript">
setInterval("chcolor()",1000);
</script>
</body>
</html>

Session 1: 1. Write HTML Code To Develop A

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Session 1: 1. Write HTML Code To Develop A

Diunggah oleh

Hak Cipta:

Format Tersedia

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

Name Sujana Y. Enrolment No: 094545055

<H2 align="center"><u>BASIC OF HTML</u></h2>

Name Sujana Y Enrolment No: 094545055

Name Sujana Enrolment No: 094545055

Name Sujana Enrolment No: 094545055

Name Sujana Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y. Enrolment No: 094545055

Name Sujana Y. Enrolment No: 094545055

Name Sujana Y. Enrolment No: 094545291

Name Sujana Enrolment No: 094545055

Name Krishna Prabhu Enrolment No: 094545055

Name Sujana Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujan Y Enrolment No: 094545055

List of 5 HTML Editors

Name Krishna Prabhu Enrolment No:

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

if name = frm.txtP.value="" or frm.txtR.value="" or frm.txtT.value="" Then

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

Name Sujana Y Enrolment No: 094545055

document.write('<form name="selecter"><select name="select1">');

Name Sujana Y Enrolment No: 094545055

Anda mungkin juga menyukai