HTML Labsheet

Download as doc, pdf, or txt
Download as doc, pdf, or txt
You are on page 1of 15

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

You might also like