IGNOU MCA 1st Semster HTML Lab Record Solved MCSL 016

MCSL : 016
I n t e r n e t C o n c e p t s a n d We b D e s i g n
1. HTML
2. ADVANCED HTML
3. JAVA SCRIPT
4. VB SCRIPT
5. DREAMWEAVER
1.1 HTML
Session 1
1. Write html code to develop a web page having the background color red and title
My first Page in any color.
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor="#FF0000">
<font color="#99FF66"><strong>My First Page </strong></font>
</body>
</html>
2. Create an html document giving details of your name, age, telephone no, address,
TLC Code & enrolement no aligned in proper order.
<HTML>
<HEAD>
<TITLE>MyWebSite</TITLE>
</HEAD>
<BODY BGCOLOR="BLUE">
<P ALIGN CENTER ><B>MY PERSONAL DETAILS</B>
<HR SIZE="2" WIDHT=100%></HR>
<PRE><H3>
NAME
:
AGE
:
TELEPHONE NUMBER
:
ADDRESS
:
TLC CODE
ENROLMENT NUMBER
</H3>
</PRE>
</BODY>
</HTML>
:
:
:
3. Write an HTML Code to design a page containing text, in form of paragraphs

giving suitable heading style.
<html>
<head>
</head>
<body>
<h1 align="center"><strong>What's new in Windows XP
Professional</strong></h1>
<h2 align="justify">Welcome to Windows XP Professional. Among the new
features
available in Windows XP, there are new security tools that you can use to help
keep your computer more secure, and new technologies that run in the
background,
making your computer run more efficiently and reliably.</h2>
<h3 align="justify">Windows XP has improved upon security, including the new
Security
Center, which allows you to check the status of the important security elements
on your computer—Windows Firewall, Automatic Updates, and virus
protection
software—making it easier for you to understand how to keep your
computer
better protected against viruses and other security threats. Performance is
at an all-time high.</h3>
<h4 align="justify"> You can now use more programs at the same time and they
will
run faster than ever. Windows XP is dependable and stable, so you can always
rely on the performance and effectiveness of your computer.<br>
</h4>
</body>
</html>
Session 2
1. Create a page to show different attributes of font tag
<html>
<head>
</head>
<body>
<p align="left"><strong><font color="#0000FF" face="Arial, Helvetica, sansserif">What's
new in Windows XP Professional</font></strong></p>
<p><font color="#FF0000" face="Courier New, Courier, mono">Welcome to
Windows XP Professional.
Among the new features available in Windows XP, there are new security tools
that you can use to help keep your computer more secure, and new technologies
that run in the background, making your computer run more efficiently and
reliably.</font></p>
<p><font face="Geneva, Arial, Helvetica, sans-serif"><strong><em>Windows
XP has
improved upon security, including the new Security Center, which allows you
to check the status of the important security elements on your
computer—Windows
Firewall</em></strong></font> </p>
<p><font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif">You can
now use more programs
at the same time and they will run faster than ever. Windows XP is dependable
and stable, so you can always rely on the performance and effectiveness of your
computer.</font><br>
</p>
</body>
</html>
2 . Create a page to show different attributes: italics, bold, underline
<html>
<head>
</head>
<body bgcolor="#FFFFFF">
<p align="left"><strong>Bold</strong></p>
<p align="left"><em>Italics</em></p>
<p align="left"><u>Underline</u></p>
<p align="left"><strong><em>Bold and Italics</em></strong></p>
<p align="left"><u><em>Italics and Underline</em></u></p>
<p align="left"><strong><em><u>Bold Italic and
Underline</u></em></strong></p>
</p>
</body>
</html>
3 . Design a Page having background color yellow, giving text color red and using all
attributes of font tab.
<html>
<head><title>My First Page</title></head>
<body bgcolor="#FFFF99">
<p align="left"><strong><font color="#FF0000" face="Arial, Helvetica, sansserif">What's
new in Windows XP Professional</font></strong></p>
<p><font color="#FF0000" face="Courier New, Courier, mono">Welcome to

Windows
XP Professional. Among the new features available in Windows XP, there are
new
security tools that you can use to help keep your computer more secure, and
new technologies that run in the background, making your computer run more
efficiently
and reliably.</font></p>
<p><font color="#FF0000" face="Geneva, Arial, Helvetica, sansserif"><strong><em>Windows
XP has improved upon security, including the new Security Center, which allows
you to check the status of the important security elements on your
computer—Windows
Firewall</em></strong></font> </p>
<p><font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif">You can
now use more programs at the same time and they will run faster than ever.
Windows
XP is dependable and stable, so you can always rely on the performance and
effectiveness
of your computer.</font><font color="#FF0000"><br>
</font> </p>
</body>
</html>
Session3
1. Write an html code to create a webpage of blue color and display links in red color.
<html>
<head>
</head>
<body bgcolor="#0000FF" link="#FF0000" vlink="#FF0000" alink="#FF0000">
<p align="left"><a href="1.htm"><strong>Link To Page 1</strong></a></p>
<p align="left"><strong><a href="2.htm">Link To Page 2</a></strong></p>
<p align="left"><strong><a href="3.htm" target="_blank">Link To page
3</a></strong></p>
</body>
</html>
2. Write an html code to create a webpage that contains an image at its Center
<html>
<head></head>
<body>
<div align="center"><img src="Img1.jpg" width="241" height="133"> </div>
</body>
</html>
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
webpage.
<html>
<head></head>
<body>
Welcome to Windows XP Professional. Among the new features available in
Windows
XP, there are new security tools that you can use to help keep your computer more
secure, and new technologies that run in the background, making your computer
run more efficiently and reliably.
<p><a href=10.htm><img src=Img1.jpg width=272 height=151
border=0></a></p>
</body>
</html>
Session 4
1 . Create a web page using href attribute of anchor tag & th attribute alink, vlink etc.
<html>
<head></head>
<body link=#0000FF vlink=#009900 alink=#0000FF>
<p><a href=1.htm target=_blank>My Link 1</a></p>
<p><a href=2.htm target=_parent>My Link 2</a></p>
<p><a href=3.htm target=_self>My Link 3</a></p>
</body>
</html>
2 . Create a Webpage, wherein when the user clicks on the link it should goto the
bottom of the page.
<html>
<head></head>
<body link=#0000FF vlink=#009900 alink=#0000FF>
<p><a href=#Anch1>my Bottom Link</a></p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>e</p>
<p>f</p>
<p>g</p>
<p>h</p>
<p>i</p>
<p>j</p>
<p>k</p>
<p>l</p>
<p><a name=Anch1></a>m</p>
</body>
</html>
3 . Write html code to create a web page of pink color and display a moving message
in red color
<html>
<head></head>
<body bgcolor=#FF99FF >
<marquee>
<font color=#FF0000><strong>This is a Moving Text</strong></font>
</marquee>
</body>
</html>
Session 5
1 . Create a web page showing an ordered list of names of five of your Friends.
<html>
<head></head>
<body >
<ol>
<li>Dennis Richy</li>
<li>Bilgets</li>
<li>Stallman</li>
<li>Howard Aicen</li>
<li>Chalse Babege</li>
</ol>
</body>
</html>
2 . Create an html document containing a nested list showing the content page of any
book
<html><head></head>
<body >
<strong>Contents </strong>
<ol>
<li>Introduction</li>
<li>Getting Started</li>
<ul>
<li>What is C</li>
<li>Saliant features of C </li>
<li>The C 8haracter set</li>
<li>Constants,Variables and Keywords</li>
</ul>
<li>The Decision Control Structure</li>
<ul>
<li>The if Statement</li>
<ul><li>Multiple Statements within if</li></ul>
<li>The if-else Statement</li>
<li>Nested if-else</li>
<li>Forms of if</li>
<li>Use of Logical operater</li>
</ul>
<li>The case control structure</li>
<li>Functions</li>
<li>The C Preprocessor</li>
<li>Arrays</li>
<li>Strings</li>
<li>Structures</li>
<li>Input/Output in C</li>
<li>Dics basics</li>
<li>VDU Basics</li>
<li>Keyboard Basics</li>
<li>Interaction with Hardware through C</li>
<li>Operations on Bits</li>
<li>Graphics Programming</li>
<li>Mouse Programming</li>
<li>C and Assembly</li>
<li>Last Word</li>
</ol>
</body></html>
3 . Create a web page showing an unordered list of names of five of your Friends.
<html>
<head></head>
<body >
<ul>
<li>Dennis Richy</li>
<li>Bilgets</li>
<li>Stallman</li>
<li>Howard Aicen</li>
<li>Chalse Babege</li>
</ul>
</body>
</html>
Session 6
Create a web page, which should contain a table having two rows and two columns
<html><head></head>
<body>
<table width=100% border=2>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body></html>
2 . Fill some dummy data in the table created by you in question 1 of this session
<html><head></head>
<body>
<tr>
<td><strong>Item Code</strong></td>
<td><strong>Item Name</strong></td>
</tr>
<tr>
<td>SYS009</td>
<td>Hard Disk</td>
</tr>
</table>
</body></html>
3 . Create the following table with dummy Data

Name of
train
Place
Destination
Train No.
10
Time
Fair
Arrival Departure
<html><head></head>
<body>
<table width="100%" border="1">
<tr>
<td width="28%" rowspan="2" ><strong>Name Of Train</strong></td>
<td width="11%" rowspan="2" ><strong>Place</strong></td>
<td width="16%" rowspan="2" ><strong>Destination</strong></td>
<td width="17%" rowspan="2" ><strong>Train No</strong></td>
<td colspan="2" ><div align="center"><strong>Time</strong></div></td>
<td width="13%" rowspan="2" ><strong>Fair</strong></td>
</tr>
<tr>
<td width="8%" ><strong>Arrival</strong></td>
<td width="7%" ><strong>Departure</strong></td>
</tr>
<tr>
<td >Lokamanya Thilak</td>
<td >Tvm</td>
<td >Loka Manya Thilak</td>
<td >CH8906</td>
<td >03:40</td>
<td >03:55</td>
<td >650</td>
</tr>
<tr>
<td >Nizamudhenn Express</td>
<td >Kannur</td>
<td >Koyambathoor</td>
<td >NEH08634</td>
<td >20:25</td>
<td >16:45</td>
<td >320</td>
</tr>
</table>
</body></html>
Session 7
1 . Create the Following Table
<html><head></head>
<body bgcolor=#AAAAAA>
<tr bgcolor=#FFFFFF>
<td colspan=3> </td>
</tr>
<tr>
<td bgcolor=#FF0000> </td>
<td bgcolor=#009933> </td>
11
<td bgcolor=#000000> </td>
</tr>
</table>
</body></html>
2 . Design an HTML page having 3 images placed in the following format
<html><head></head>
<body>
<table width=46% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=26% align=left valign=top><img src=SUN FL.jpg
width=159 height=129></td>
<td width=24%> </td>
<td width=50%> </td>
</tr>
<tr>
<td> </td>
<td align=left valign=top><img src=animals7.jpg width=159
height=129></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align=left valign=top><img src=setup.bmp width=159
height=129></td>
</tr>
</table>
</body></html>
3 . Write HTML code to generate the following output
<html><head></head>
<body>
<tr>
<td rowspan="2">Weather</td>
<td><strong>Delhi</strong></td>
<td><strong>Mumbai</strong></td>
</tr>
<tr>
<td>40</td>
<td>35</td>
</tr>
</table>
</body></html>
Session 8
12
1. What are HTML Physical style tags and Logical style tags?
2. Which Tag allows you to Scroll Text on Web Page?

Scrolling Tag allows us to scroll text on the Web Page
<iframe align="left" scrolling="yes" width="100%" height="100%"
src="cont.htm">
3. What is the Comment tag in HTML
Comment tags are used to provide comments to the webpage. The contents inside
the tag will not displayed by the web browser when it displays the page.
Eg. <!This is comments used to help web designers >
4. Design an HTML page for the Block Introduction of this book. The page should
allow scrolling and the code should contain comment header with your name and
enrolment no.
<!Name : >
<!Enrolment No :>
<html>
<head>
</head>
<body>
<tr>
<td><strong>Block Introduction</strong></td>
</tr>
<tr>
<td height="118" align="left" valign="top">
<iframe align="left" scrolling="yes" width="100%" height="100%"
src="content.html">
<p><br>
</p>
</iframe></td>
</tr>
</table>
</body></html>
Session 9
What difference does it make if we express the width of a table in percentage or pixel
value? And how do we set the width of a particular column or cell in a table?
13
If the width of the table is expressed in percentage the width of the table varies
according to the width of the page displayed by the browser. It the width is 100%
then width of the table will be the width of the page.
The width of the particular column and cell is set by
<table border=1 width=100%>
<tr>
<td width=60%></td>
<td width=40%></td>
</tr>
</table>
Write HTML Code to generate the following outputs
<html><head></head>
<body>
<table width=100% border=1 cellpadding=0>
<tr>
<td width=33%>1</td>
</tr>
<tr>
<td>5</td>
<td colspan=2 rowspan=2 align=left valign=top><img src=SUN
FL.jpg width=274 height=138></td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body></html>
Create a web page that should contain a table having seven rows and four columns,
along with attributes- colspan and rowspan.
14
<html><head></head>
<body>
<table width=100% border=1 cellpadding=0>
<tr>
</tr>
<tr>
<td height=21>5</td>
<td colspan=2 rowspan=2 align=left valign=top>Example for Colspan
and Row Spans</td>
</tr>
<tr>
<td height=21>7</td>
</tr>
<tr>
<td rowspan=3>Example for Colspan and Row Spans</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>
</body></html>
Session 10
1 . What are different versions of HTML?
1 HTML 2.O
2 HTML 3
3 HTML 3.2
4 HTML 4.0
5 HTML 4.0.1
6 XHTML
7DHTML
2 . List 5 different HTML Editors
a) Macromedia Dreamweaver
b) Microsoft Front page
15
c) Web page Maker

d) Microsoft Asp.Net Editor
3 . What is the different image formats?
a) jpg/jpeg jpeg Images
b) gif (Graphic interchange format)
c) bmp bitmap
d) tif
e) ico icon files
1.1 Advanced HTML

Session 1
1. How do you handle situation when browser does not support frames?
The <NOFRAMES> tag is used for those browsers that are not able to
interpret <FRAME> tags. If the browser doesnt support FRAME the text
between <NOFRAME> and </NOFRAME> will displayed on the browsers window
<html><head></head>
<frameset rows=*,* frameborder=NO border=0 framespacing=0>
<frame src=frn2.htm name=topFrame >
<frame src=frn1.htm name=16ainframe>
</frameset>
<body><noframes> your browser does not handle frames</noframes>
</body></html>
2. What are inline frames?
2. Which tag is used to define frames in HTML?
Frameset tag is used to define frames in HTML
<frameset rows=*,* frameborder=NO border=0
framespacing=0>
<frame src=frn2.htm name=topFrame >
<frame src=frn1.htm name=16ainframe>
</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.
<html><head></head>
<frame src=frm1.html name=topFrame >
<frame src=frm2.html name=16ainframe>
16
</frameset>
<body>
</body></html>
1. . 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>
</head>
<frameset rows=*,* cols=* frameborder=yes border=1 framespacing=0>
<frame src=frm1.html name=topFrame scrolling=NO noresize >
<frameset rows=* cols=*,* framespacing=0 frameborder=yes border=1>
<frame src=frm2.html name=leftFrame scrolling=NO noresize>
</frameset>
</frameset>
<body>
</body</html>
2. Write an Html code to develop a web page having frames as described in the
above question and fill each frame with different background colors.
<html><head>
</head>
</frameset>
</frameset>
<body>
</body</html>
Session 3
What tags used to display information for browsers that do not support frames?
<NOFRAMES></NOFRAMES> tag is used to display information for browsers
that does not support frames.
Write various attributes of frameset tag and frame tag?

</script>
</head>
<body onLoad="MM_timelinePlay('Timeline1')">
<div id="Layer1" style="position:absolute; left:21px; top:16px; width:192px;
height:147px; z-index:1"><img src="1Tourism1.jpg" name="Image1"
width="196" height="141"></div>
</body>
</html>
SESSION 4
1 . Design a form as follows.

<html>
<head>
</head>
<body>
<form name="form1">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="23%">Your name</td>
<td width="77%"><input type="text" name="textfield"></td>
</tr>
<tr>
<td>Yi\our Address</td>
<td><input type="text" name="textfield2"></td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="textfield3"></td>
</tr>
<tr>
<td>Your Gender</td>
<td><input type="radio" name="radiobutton" value="radiobutton">
Male
55
<input type="radio" name="radiobutton" value="radiobutton">

Female </td>
</tr>
<tr>
<td>Your Country</td>
<td><select name="select" size="1">
<option>India</option>
<option>America</option>
<option>Canada</option>
<option>Denmark</option>
<option>Egypt</option>
<option>France</option>
<option>Germany</option>
<option>Hungry</option>
</select></td>
</tr>
<tr>
<td>Your Opinion</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><textarea name="textarea" cols="50"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="reset" name="Reset" value="Reset">
<input type="submit" name="Submit2" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
SESSION 2
1 . Insert an image in a page. In the browser, when you take cursor over it, another
image emerges under it and when you click on the second image, it takes you to
exercise 2 of session 1.

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!-function MM_swapImgRestore() { //v3.0
56
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)

x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i]
[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('animals7.JPG')">
<a href="ex1session2.htm" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image1','','animals7.JPG',1)"><img src="12.jpg"
name="Image1" width="218" height="140" border="0"></a>
</body>
</html>
57
Thanks to Mr. Muneer
58

IGNOU MCA 1st Semster HTML Lab Record Solved MCSL 016

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IGNOU MCA 1st Semster HTML Lab Record Solved MCSL 016

Uploaded by

Copyright:

Available Formats

MCSL : 016

3. Write an HTML Code to design a page containing text, in form of paragraphs

<p><font color="#FF0000" face="Courier New, Courier, mono">Welcome to

3 . Create the following table with dummy Data

2. Which Tag allows you to Scroll Text on Web Page?

c) Web page Maker

1.1 Advanced HTML

3 . Which element is used to display a drop down list box?

Page containing link

1.3 Java Script

2. Write code to create a scrolling text.

<a href="#" onMouseOut="MM_swapImgRestore()"

<input type="button" name="Submit4" value="+" onClick="calc('+')">

2. Write a program to create a small window in a main window.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<td bgcolor="#cccc12"><div align="center"><strong><font size="6">WELCOME

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

var ns5 = (ns && parseInt(navigator.appVersion) > 4);

document.MM_Time[0][1].values[0] = new Array("69px", "77px", "85px",

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<input type="radio" name="radiobutton" value="radiobutton">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)

Thanks to Mr. Muneer

You might also like