Web Design (LAB)
Contents
HTML 2
CSS 4
DHTML & JavaScript 7
Web Design - Lab 1
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>
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>
Web Design - Lab 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:
<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>
Web Design - Lab 3
Hello User you will be taken to Microsoft’s homepage in five seconds time
<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
}
</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>
Web Design - Lab 4
<style type="text/css">
a:active {color: #0000FF}
a:visited {color: #00FF00}
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
}
</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>
Web Design - Lab 5
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.
</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">
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>
Web Design - Lab 6
DHTML & Javascript
1. Write a DHTML code that displays message to the user when the document is
loaded in the browser.
<html>
<head>
<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>
<form onsubmit="confirmInput()" action="http://www.myserver.com/">
Enter your name: <input type="text">
<input type="submit">
</select>
</form>
Web Design - Lab 7
</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")
}
</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>
</html>
5. Write a DHTML code to disable the right-click of your mouse.
Web Design - Lab 8
<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>
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)
}
Web Design - Lab 9
</script>
</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
}
}
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>
Web Design - Lab 10
</html>
8. Write a DHTML code which can resize an image when you move the mouse over
the image.
<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"
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
Web Design - Lab 11
i++
timer=setTimeout("starttimer()",10)
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<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}
</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
}
}
Web Design - Lab 12
function show_hide_menu()
{
if (c==0)
{
clearInterval(intHide)
intShow=setInterval("show()",10)
c=1
}
else
{
clearInterval(intShow)
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 />
<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>
Web Design - Lab 13
</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>
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"
onmouseover="mytext_onmouseover()"
onmouseout="mytext_onmouseout()">
Flipping between serif and sans-serif faces.
</div>
</body>
</html>
Web Design - Lab 14
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);
</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>
Web Design - Lab 15
