HTML Labsheet
HTML Labsheet
HTML Labsheet
Contents
HTML 2
CSS 4
DHTML & JavaScript 7
<html>
<body>
<p>Use heading tags only for headings. Don't use them just to make something
bold. Use other tags for that.</p>
</body>
</html>
<html>
<body>
<address>
10, M.G.Road,<br>
Bangalore,<br>
India<br>
</address>
</body>
</html>
<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>
<html>
<body>
</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>
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>
</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>
</head>
<body>
</body>
</html>
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0;
top:0;
z-index:-1
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="baloon.gif" width="100" height="180">
</body>
</html>
<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>
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>
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>
</script>
</head>
<body onmousedown="disable()">
<p>Right-click on this page to trigger the event.</p>
</body>
</html>
<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)
}
</head>
<body onload="blinklink()" onunload="stoptimer()">
</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>
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>
</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
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body onload="starttimer()" onunload="stoptimer()">
</body>
</html>
<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
}
}
function hide()
{
if (i<0)
{
i=i+1
document.all("menu").style.bottom=i
}
}
</script>
</head>
<body>
<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()">
<html>
<head>
<title> Passing param </title>
<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>