137E180
LAB- II
ANNAMALAI UNIVERSITY
DIRECTORATE OF DISTANCE EDUCATION
Bachelor of Computer Applications
First Year
DDE
PROGRAMMING LAB - II
(WEB DESIGNING)
Copyright Reserved
(For Private Circulation Only)
DDE
HTML
1. Write a HTML program which displays “I am studying HTML” in all the
heading levels.
<html>
<body>
<h1> I am studying HTML </h1>
<h2> I am studying HTML </h2>
<h3> I am studying HTML </h3>
<h4> I am studying HTML </h4>
<h5> I am studying HTML </h5>
<h6> I am studying HTML </h6>
<p>Use heading tags only for headings. Don't use them just to make something
bold. Use other tags for that.</p>
</body>
</html>
2. Write a HTML program which uses the address tag.
<html>
<body>
<address>
DDE
10, M.G.Road,<br>
Bangalore,<br>
India<br>
</address>
</body>
</html>
3. Write a HTML program which displays an image as a hyperlink.
<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>
</body>
</html>
2
4. Write a HTML program which displays the definitions of Coffee and Milk.
<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
5. Write a HTML program which displays two text fields: one accepting the user
name and the second accepting the password.
<html>
<body>
<form>
Username:
<input type="text" name="user">
<br>
Password:
DDE
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the browser displays asterisks or
bullets instead of the characters.
</p>
</body>
</html>
6. Write a HTML program which redirects a user from the current page to
Microsoft homepage after five seconds.
<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://www.microsoft.com">
</head>
<body>
<p>
Hello User you will be taken to Microsoft’s homepage in five seconds time
3
<a href="http://www.microsoft.com">Microsoft Home Page</a>
</p>
<p>
You will be redirected to the new address in five seconds.
</p>
<p>
If you see this message for more than 5 seconds, please click on the link above!
</p>
</body>
</html>
CSS
1. Write a CSS code which displays the first letter of a paragraph with bigger font
size and color.
<html>
<head>
<style type="text/css">
div:first-letter
{
color: #ff0000;
font-size:xx-large
}
DDE
</style>
</head>
<body>
<p><b>Note:</b> Netscape 4 does not support the "first-letter" property.</p>
<div>
You can use the first-letter pseudo-element to add special style to the first letter of a text.
</div>
</body>
</html>
2. Write a CSS code which the changes the color of a link when you move the mouse
over the link.
<html>
<head>
<style type="text/css">
a:active {color: #0000FF}
a:visited {color: #00FF00}
4
a:link {color: #FF0000}
a:hover {color: #FF00FF}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>
3. Write a CSS code which places text over an image.
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0;
top:0;
z-index:-1
}
DDE
</style>
</head>
<body>
<p><b>Note:</b> Netscape 4 does not support the "z-index" property.</p>
<h1>This is a Heading</h1>
<img class="x" src="baloon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
</body>
</html>
4. Write a CSS code which can display the different types of cursor.
<html>
<body>
<p>
<b>Note:</b> Netscape 4 does not support the "cursor" property.
5
</p>
<p>
Move the mouse over the words to see the cursor change.
</p>
<span style="cursor:auto">
Auto</span><br>
<span style="cursor:crosshair">
Crosshair</span><br>
<span style="cursor:default">
Default</span><br>
<span style="cursor:hand">
Hand</span><br>
<span style="cursor:move">
Move</span><br>
<span style="cursor:e-resize">
e-resize</span><br>
<span style="cursor:ne-resize">
ne-resize</span><br>
<span style="cursor:nw-resize">
nw-resize</span><br>
<span style="cursor:n-resize">
n-resize</span><br>
<span style="cursor:se-resize">
se-resize</span><br>
<span style="cursor:sw-resize">
DDE
sw-resize</span><br>
<span style="cursor:s-resize">
s-resize</span><br>
<span style="cursor:w-resize">
w-resize</span><br>
<span style="cursor:text">
text</span><br>
<span style="cursor:wait">
wait</span><br>
<span style="cursor:help">
help</span>
</body>
</html>
DHTML & Javascript
1. Write a DHTML code that displays message to the user when the document is
loaded in the browser.
<html>
<head>
6
<script type="text/javascript">
function mymessage()
{
alert("This message was triggered from the onload event")
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
2. Write a DHTML program that informs that end user when a form is submitted to
the server.
<html>
<head>
<script type="text/javascript">
function confirmInput()
{
alert("Your form has been submitted successfully")
}
</script>
</head>
<body>
DDE
<form onsubmit="confirmInput()" action="http://www.myserver.com/">
Enter your name: <input type="text">
<input type="submit">
</select>
</form>
</body>
</html>
3. Use the onblur() method on a text box and display a message when the textbox
looses focus.
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was triggered by the onblur event handler")
}
7
</script>
</head>
<body>
<p>The onblur event handler occurs when an element loses focus. Try click or write in
the input field, then click elsewhere on the document so the input field lose focus.</p>
<form>
Enter your name: <input type="text" onblur="message()">
</form>
</body>
</html>
4. Write a DHTML code to change the color of the text “Hai, my name is DUKE”
when the mouse moves over it and restore its original color when the mouse moves
out.
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Hai, my name is DUKE </h1>
</body>
DDE
</html>
5. Write a DHTML code to disable the right-click of your mouse.
<html>
<head>
<script type="text/javascript">
function disable()
{
if (event.button == 2)
{
alert("Sorry no rightclick on this page.\nNow you can not view my source\nand you can
not steal my images")
}
}
</script>
</head>
<body onmousedown="disable()">
<p>Right-click on this page to trigger the event.</p>
</body>
</html>
8
6. Write a DHTML program which displays a blinking header.
<html>
<head>
<script type="text/javascript">
function blinklink()
{
if (!blink.style.color)
{
blink.style.color="red"
}
if (blink.style.color=="red")
{
blink.style.color="black"
}
else
{
blink.style.color="red"
}
timer=setTimeout("blinklink()",100)
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
DDE
</head>
<body onload="blinklink()" onunload="stoptimer()">
<h1 id="blink">Blinking header</h1>
</body>
</html>
7. Write a DHTML code, which can select or deselect five checkboxes on the click of
a button.
<html>
<head>
<script type="text/javascript">
function makeCheck(thisForm)
{
for (i = 0; i < thisForm.option.length; i++)
{
thisForm.option[i].checked=true
}
9
function makeUncheck(thisForm)
{
for (i = 0; i < thisForm.option.length; i++)
{
thisForm.option[i].checked=false
}
}
</script>
</head>
<body>
<form name="myForm">
<input type="button" value="Check" onclick="makeCheck(this.form)">
<input type="button" value="Uncheck" onclick="makeUncheck(this.form)">
<br />
<input type="checkbox" name="option">Apples<br />
<input type="checkbox" name="option">Oranges<br />
<input type="checkbox" name="option">Bananas<br />
<input type="checkbox" name="option">Melons
</form>
</body>
</html>
8. Write a DHTML code which can resize an image when you move the mouse over
the image.
DDE
<html>
<head>
<script type="text/javascript">
function moveover()
{
image.width="200"
image.height="360"
}
function moveback()
{
image.width="100"
image.height="180"
}
</script>
</head>
<body>
<b>Mouse Over the image</b><br />
<img id="image" src="baloon.gif"
10
onmouseover="moveover()"
onmouseout="moveback()" width="100" height="180" />
</body>
</html>
9. Write a DHTML code which can move an image horizontally from one end of the
browser to the other.
<html>
<head>
<script type="text/javascript">
var i=1
function starttimer()
{
myimage.style.position="relative"
myimage.style.left=+i
i++
timer=setTimeout("starttimer()",10)
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
DDE
<body onload="starttimer()" onunload="stoptimer()">
<img id="myimage" src="smiley.gif" width="32" height="32" />
</body>
</html>
10. Write a DHTML code which displays a drop down menu.
<html>
<head>
<style>
body{font-family:arial;}
table{background:black;position:absolute;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightgreen}
table.topnav{font-size:80%;top:0;left:0}
table.menu{font-size:100%;bottom:0;z-index:-1}
11
</style>
<script type="text/javascript">
var i=0
var c=0
var intHide
function show()
{
if (i>-100)
{
i=i-1
document.all("menu").style.bottom=i
}
}
function show_hide_menu()
{
if (c==0)
{
clearInterval(intHide)
intShow=setInterval("show()",10)
c=1
}
else
{
clearInterval(intShow)
DDE
intHide=setInterval("hide()",10)
c=0
}
}
function hide()
{
if (i<0)
{
i=i+1
document.all("menu").style.bottom=i
}
}
</script>
</head>
<body>
<table class="topnav" width="150">
<tr>
<td bgcolor="#FF0000" onclick="show_hide_menu()">
<a href="../default.asp">MENU</a><br />
12
<table class="menu" id="menu" width="100%">
<tr>
<td class="menu"><a href="../html">HTML</a></td>
</tr>
<tr>
<td class="menu"><a href="../xhtml">XHTML</a></td>
</tr>
<tr>
<td class="menu"><a href="../css">CSS</a></td>
</tr>
<tr>
<td class="menu"><a href="../xml">XML</a></td>
</tr>
<tr>
<td class="menu"><a href="../xsl">XSL</a></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<p>Click on the MENU to see the menu options.</p>
</body>
</html>
DDE
11. Write a JavaScript code to flip between two different fonts using Onmouseover
and Onmouseout event.
<html>
<head>
<title>This is Font Changing</title>
</head>
<body>
<script language="Javascript">
function mytext_onmouseover()
{
mytext.style.fontFamily = "serif";
}
function mytext_onmouseout()
{
mytext.style.fontFamily = "sans-serif";
}
</script>
<div id=mytext style="font-family:serif;font-size:40pt"
13
onmouseover="mytext_onmouseover()"
onmouseout="mytext_onmouseout()">
Flipping between serif and sans-serif faces.
</div>
</body>
</html>
12. Write a function in JavaScript to find the cube of a given number.
<html>
<head>
<title> Passing param </title>
<script language = "Javascript">
function Cube(No)
{
var cube = no * no * no;
document.write(cube);
}
</script>
</head>
<body>
<script language ="Javascript">
var no;
no = prompt("Could please enter a Number to find the cube? ","0");
Cube(no);
DDE
</script>
</body>
</html>
13. Write a javascript code to display a gif image. (Use a suitable gif image)
<html>
<head>
<title>Numbers</title>
</head>
<body>
<pre>
<script language="JavaScript">
document.writeln("One,");
document.writeln("Two,");
document.writeln("Three,");
document.writeln("...");
document.write('<br><img src="Ani-chick.gif">');
document.write("<br><h1>Welcome to the new world</h1>");
</script>
</body>
</html>
14
XML
1. Write an XML program which displays the breakfast menu at a Hotel. Format
the the document with an XSL style sheet.
XML document
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="simple.xsl" ?>
<breakfast_menu>
<food>
<name>Belgian Waffles</name>
<price>$5.95</price>
<description>two of our famous Belgian Waffles with plenty of real maple
syrup</description>
<calories>650</calories>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>light Belgian waffles covered with strawberries and whipped
cream</description>
<calories>900</calories>
</food>
<food>
<name>Berry-Berry Belgian Waffles</name>
<price>$8.95</price>
<description>light Belgian waffles covered with an assortment of fresh berries and
whipped cream</description>
<calories>900</calories>
</food>
<food>
DDE
<name>French Toast</name>
<price>$4.50</price>
<description>thick slices made from our homemade sourdough bread</description>
<calories>600</calories>
</food>
<food>
<name>Homestyle Breakfast</name>
<price>$6.95</price>
<description>two eggs, bacon or sausage, toast, and our ever-popular hash
browns</description>
<calories>950</calories>
</food>
</breakfast_menu>
The XSL document (simple.xsl)
<?xml version="1.0"?>
<HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">
15
<BODY STYLE="font-family:Arial, helvetica, sans-serif; font-size:12pt;
background-color:#EEEEEE">
<xsl:for-each select="breakfast_menu/food">
<DIV STYLE="background-color:teal; color:white; padding:4px">
<SPAN STYLE="font-weight:bold; color:white"><xsl:value-of
select="name"/></SPAN>
- <xsl:value-of select="price"/>
</DIV>
<DIV STYLE="margin-left:20px; margin-bottom:1em; font-size:10pt">
<xsl:value-of select="description"/>
<SPAN STYLE="font-style:italic">
(<xsl:value-of select="calories"/> calories per serving)
</SPAN>
</DIV>
</xsl:for-each>
</BODY>
</HTML>
2. Create an xml document whose root element is movies. Its child elements are
movie, title, writer, producer, director, actor, comments. Create a cascading style
sheet document for the tags.
Movies.xml
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="Movies.css"?>
<!DOCTYPE movies SYSTEM "Movies.dtd">
<movies>
DDE
<movie type="comedy" rating="PG-13" review="5" year="1987">
<title>Raising Arizona</title>
<writer>Ethan Coen</writer>
<writer>Joel Coen</writer>
<producer>Ethan Coen</producer>
<director>Joel Coen</director>
<actor>Nicolas Cage</actor>
<actor>Holly Hunter</actor>
<actor>John Goodman</actor>
<comments>A classic one-of-a-kind screwball love story.</comments>
</movie>
<movie type="comedy" rating="R" review="5" year="1988">
<title>Midnight Run</title>
<writer>George Gallo</writer>
<producer>Martin Brest</producer>
<director>Martin Brest</director>
<actor>Robert De Niro</actor>
<actor>Charles Grodin</actor>
<comments>The quintessential road comedy.</comments>
</movie>
16
<movie type="mystery" rating="R" review="5" year="1995">
<title>The Usual Suspects</title>
<writer>Christopher McQuarrie</writer>
<producer>Bryan Singer</producer>
<producer>Michael McDonnell</producer>
<director>Bryan Singer</director>
<actor>Stephen Baldwin</actor>
<actor>Gabriel Byrne</actor>
<actor>Benicio Del Toro</actor>
<actor>Chazz Palminteri</actor>
<actor>Kevin Pollak</actor>
<actor>Kevin Spacey</actor>
<comments>A crime mystery with incredibly intricate plot twists.</comments>
</movie>
</movies>
Movies.dtd
<!ELEMENT movies (movie)+>
<!ELEMENT movie (title, writer+, producer+, director+, actor*, comments?)>
<!ATTLIST movie
type (drama | comedy | adventure | sci-fi | mystery | horror | romance |
documentary) "drama"
rating (G | PG | PG-13 | R | X) "PG"
review (1 | 2 | 3 | 4 | 5) "3"
year CDATA #IMPLIED>
<!ELEMENT title (#PCDATA)>
DDE
<!ELEMENT writer (#PCDATA)>
<!ELEMENT producer (#PCDATA)>
<!ELEMENT director (#PCDATA)>
<!ELEMENT actor (#PCDATA)>
<!ELEMENT comments (#PCDATA)>
Movies.css
movie {
display: block;
margin-bottom: 10px;
background-color: white;
text-align: left;
}
title {
display: block;
color: black;
font-family: Helvetica, sans-serif;
font-size: 24pt;
font-weight: bold;
}
writer {
17
display: block;
color: blue;
font-family: Courier, monospace;
font-size: 14pt;
text-indent: 12px;
}
producer {
display: block;
color: red;
font-family: Western, fantasy;
font-size: 12pt;
text-indent: 12px;
}
director {
display: block;
color: green;
font-family: Times, serif;
font-size: 14pt;
text-indent: 12px;
}
actor {
display: block;
color: fuchsia;
font-family: Zapf-Chancery, cursive;
font-size: 20pt;
text-indent: 12px;
DDE
}
comments {
display: none;
}
VBScript
1. Write a VBScript, which on clicking a button changes the background and
foreground colour.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Example 2</H1>
Clicking a button executes a subroutine that randomly changes the
background or foreground color of this page.
<INPUT TYPE=Button Name=btnFG Value="Foreground">
<INPUT TYPE=Button Name=btnBG Value="Background">
<SCRIPT LANGUAGE=VBScript>
Sub btnFG_OnClick
Color = hex(rnd()* 16777215)
18
Document.FGColor = Color
btnFG.Value = Color
End Sub
Sub btnBG_OnClick
Color = hex(rnd()* 16777215)
Document.BGColor = Color
btnBG.Value = Color
End Sub
</SCRIPT>
</BODY>
</HTML>
2. Write a VBScript to accept name and date. Validates whether the given date is a
date value or not.
<HTML>
<HEAD>
<TITLE>Client-Side Validation</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=VBScript>
Function Form1_OnSubmit()
If Form1.UserName.Value = "" then
Alert "Please enter your name!"
Form1_OnSubmit=False
Exit Function
DDE
End If
If Form1.BirthDay.Value = "" then
Alert "Please enter your birth date!"
Form1_OnSubmit=False
Exit Function
End If
If Not IsDate(Form1.BirthDay.Value) Then
Alert "You entered an invalid birthday!"
Form1_OnSubmit=False
Exit Function
End If
Form1_OnSubmit=True
Alert "Thanks for the information!"
End Function</SCRIPT>
<H2>Enter Information in Both Fields</H2>
<FORM NAME=Form1>
Name:<INPUT Type=text, NAME=UserName><P>
Birthday:<INPUT Type=text, NAME=Birthday><P>
<INPUT Type=Submit NAME=Validate>
</FORM>
19
</BODY>
</HTML>
3. Write a VBScript to convert Upper case or lower case characters.
<html>
<body>
<script type="text/vbscript">
txt="Have a nice day!"
document.write(ucase(txt))
document.write("<br>")
document.write(lcase(txt))
</script>
</body>
</html>
4. Write a VBScript to remove the leading or trailing spaces from the text
<html>
<body>
<script type="text/vbscript">
fname=" VB "
document.write("Hello" & trim(fname) & "Script<br>")
document.write("Hello" & rtrim(fname) & "Script<br>")
document.write("Hello" & ltrim(fname) & "Script<br>")
</script>
</body>
</html>
DDE
5. Write a VBScript to reverse a string.
<html>
<body>
<script type="text/vbscript">
sometext = "Hai Everybody!"
document.write(strReverse(sometext))
</script>
</body>
</html>
6. Write a VBScript to round a number.
<html>
<body>
<script type="text/vbscript">
i = 48.66776677
j = 48.3333333
document.write(Round(i))
document.write("<br />")
document.write(Round(j))
</script>
</body>
</html>
20
7. Write a VBScript to print certain text from the text
<html>
<body>
<script type="text/vbscript">
sometext="Welcome to our Web Site!!"
document.write(Mid(sometext, 9, 2))
</script>
</body>
</html>
8. Write a VBScript to display date and time.
<html>
<body>
<script type="text/vbscript">
document.write("Today's date is " & date())
document.write("<br>")
document.write("The time is " & time())
</script>
</body>
</html>
9. Write a VBScript to display the days.
<html>
<body>
<p>VBScripts' function <b>WeekdayName</b> is used to get a weekday:</p>
<script type="text/vbscript">
document.write("<p>")
document.write(WeekDayName(1))
DDE
document.write("<br />")
document.write(WeekDayName(2))
document.write("</p><p>")
document.write("Get the abbreviated name of a weekday:")
document.write("<br />")
document.write(WeekDayName(1,true))
document.write("<br />")
document.write(WeekDayName(2,true))
document.write("</p><p>")
document.write("Get the current weekday:")
document.write("<br />")
document.write(WeekdayName(weekday(date)))
document.write("<br />")
document.write(WeekdayName(weekday(date), true))
document.write("</p>")
</script>
</body>
</html>
10. Write a VBScript with a function in the head section
<html>
<head>
<script type="text/vbscript">
alert("Hello")
21
</script>
</head>
<body>
<p>
We usually use the head section for "functions".
The reason for this is to be sure that the script is loaded before the function is
called.
</p>
</body>
</html>
11. Write a VBScript Creating an array in vbscript
html>
<body>
<script type="text/vbscript">
dim famname(5)
famname(0)="Jan Egil"
famname(1)="Tove"
famname(2)="Hege"
famname(3)="Stale"
famname(4)="Kai Jim"
famname(5)="Borge"
for i=0 to 5
document.write(famname(i) & "<br />")
next
</script>
</body>
</html>
12. Write a VBScript to demonstrate for loop.
DDE
<html>
<body>
<script type="text/vbscript">
for i = 0 to 5
document.write("The number is " & i & "<br>")
next
</script>
</body>
</html>
13. Write a VBScript to loop through html headers
<html>
<body>
<script type="text/vbscript">
for i=1 to 6
document.write("<h" & i & ">This is header " & i & "</h" & i &
">")
next
</script>
</body>
</html>
14. Write a VBScript to demonstrate For each loop
<html>
22
<body>
<script type="text/vbscript">
dim names(2)
names(0) = "Tove"
names(1) = "Jani"
names(2) = "Hege"
for each x in names
document.write(x & "<br>")
next
</script>
</body>
</html>
15. Write a VBScript to demonstrate Do While loop
<html>
<body>
<script type="text/vbscript">
i=0
do while i < 10
document.write(i & "<br>")
i=i+1
loop
</script>
</body>
</html>
16. Write a VBScript to write any Function
DDE
<html>
<head>
<script type="text/vbscript">
function myFunction()
myFunction = "BLUE"
end function
</script>
</head>
<body>
<script type="text/vbscript">
document.write("My favorite color is " & myFunction())
</script>
<p>A function procedure CAN return a result.</p>
</body>
</html>
137E180
ANNAMALAI UNIVERSITY PRESS 2019– 20
