HTML Labsheet

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>

<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

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

HTML Labsheet

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Labsheet

Hochgeladen von

Copyright:

Verfügbare Formate

Web Design (LAB)

Web Design - Lab 1

1. Write a HTML program which displays “I am studying HTML” in all the

<h1> I am studying HTML </h1>

2. Write a HTML program which uses the address tag.

3. Write a HTML program which displays an image as a hyperlink.

Web Design - Lab 2

<h4>A Definition List:</h4>

Web Design - Lab 3

<p><b>Note:</b> Netscape 4 does not support the "first-letter" property.</p>

Web Design - Lab 4

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

3. Write a CSS code which places text over an image.

<p><b>Note:</b> Netscape 4 does not support the "z-index" property.</p>

<p>Default z-index is 0. Z-index -1 has lower priority.</p>

Web Design - Lab 5

Web Design - Lab 6

<form onsubmit="confirmInput()" action="http://www.myserver.com/">

Web Design - Lab 7

5. Write a DHTML code to disable the right-click of your mouse.

Web Design - Lab 8

6. Write a DHTML program which displays a blinking header.

Web Design - Lab 9

<h1 id="blink">Blinking header</h1>

Web Design - Lab 10

<b>Mouse Over the image</b><br />

<img id="image" src="baloon.gif"

Web Design - Lab 11

<img id="myimage" src="smiley.gif" width="32" height="32" />

10. Write a DHTML code, which displays a drop down menu.

Web Design - Lab 12

<table class="topnav" width="150">

Web Design - Lab 13

Flipping between serif and sans-serif faces.

Web Design - Lab 14

<script language = "Javascript">

Web Design - Lab 15

Das könnte Ihnen auch gefallen