Scribd
Upload
95 views10 pages

Web Design Lab-2018

The document outlines a web design lab program from 2016-2017. It includes 12 programs covering basic HTML tags, CSS, tables, frames, forms, and JavaScript events and functions. The programs provide examples and demonstrations of important elements for web design like formatting text, creating tables, styling pages with CSS internally and externally, using frames, form elements, alerts, scrolling text, and manipulating buttons with JavaScript.

Uploaded by

Nithiyanantham Bcomca
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
95 views10 pages

Web Design Lab-2018

The document outlines a web design lab program from 2016-2017. It includes 12 programs covering basic HTML tags, CSS, tables, frames, forms, and JavaScript events and functions. The programs provide examples and demonstrations of important elements for web design like formatting text, creating tables, styling pages with CSS internally and externally, using frames, form elements, alerts, scrolling text, and manipulating buttons with JavaScript.

Uploaded by

Nithiyanantham Bcomca
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 10

WEB DESIGN LAB

(2016 - 2017)

S.No Program Name Page No


1 A program to illustrate ten Formatting Tags
2 A program to illustrate HTML Tables
3 Write a program to create a Three Frames Top-Main-Bottom.
4 Create a web page using Internal – Cascading Style Sheets.
5 Create a web page using External – Cascading Style Sheets.
6 A program to demonstrate Form Tag.
7 Write a program to display Alert Dialog Box in java script.
8 Write a program to Scroll a Message in java script.
9 Demonstrate Event Object in java script. Using input and output values.
10 A program to illustrate Mouse Over – Mouse Out – On Click Events.
11 Write a program to demonstrate Functions in java script.
12 Write a program to ON-OFF a button label using java script.

A program to illustrate ten Formatting Tags


<html><head><title>Formating Example</title></head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses a <i>italicized</i> typeface.</p>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
<p>The following word uses a <small>small</small> typeface.</p>
<p>The following word uses a <big>big</big> typeface.</p>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div
tag</span> alongwith CSS</p>
</body>
</html>

A program to illustrate HTML Tables

<html><head><title>HTML Table</title></head>
<body>
<table border="1" width="100%">
<thead><tr><td colspan="4">This is the head of the table</td></tr></thead>
<tfoot><tr><td colspan="4">This is the foot of the table</td></tr></tfoot>
<tbody><tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr></tbody>
</table>
</body>
</html>

Write a program to create a Three Frames Top-Main-Bottom.


HTML Frame
<html><head><title>HTML Frames</title></head>
<frameset rows="10%,80%,10%">
<frame name="top" src="top_frame.html" />
<frame name="main" src="main_frame.html" />
<frame name="bottom" src="bottom_frame.html" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
Top Frame
<html><body bgcolor="#4a7d49">
<h3>This is Top frame</h3>
<p>THIAGARAJAR COLLEGE </p>
</body></html>
Main Frame
<html><body bgcolor="#b5dcb3">
<h3>This is Middle frame</h3>
<p>Department of Computer Application and Information Technology</p>
</body></html>
Bottom Frame
<html><body bgcolor="#4a7d49">
<h3>This is Bottom frame</h3>
<p>EVEN Semester 2016 – 2017</p>
</body></html>

Create a web page using Internal – Cascading Style Sheets.


<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
</style>
</head>
<body>
<p class="red">This is red</p>

<p class="thick">This is thick</p>

<p class="green">This is green</p>

<p class="thick green">This is thick and green</p>


</body>
</html>

Create a web page using External – Cascading Style Sheets


<!DOCTYPE html>
<html><head><title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="Style1.css">
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">This is thick and green</p>
</body></html>

Style1.css
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}

A program to demonstrate Form Tag.

<!--A Program to illustrate Formtag -->


<html>
<head>
<title> form tag
</title>
</head>
<body>
<center>
<h3 align="center">To illustrate form based tags</h3> <hr color="red">
<form action="">
<p>This is a text box to enter any text.<input type="text" >
<p>This is a text box to enter password.<input type="password" >
<p>Thisis a text area to enter large text<textarea> </textarea>
<p>This is a button.<input type="button" Value="Click" >
<p><b><u>Radio Options</u></b><br>
<input type="radio" name="y" >yes<input type="radio" name="n" >no</p>
<p><b><u>Checkbox Options</u></b><br>
Sunday<input type="checkbox" checked >
Monday<input type="checkbox" >
Tuesday<input type="checkbox" >
</p>
<p><b><u>Menu driven options </u></b>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select></p>
</form>
</center>
</body>
</html>
Program to display Alert Dialog Box in java script.
<HTML><HEAD><TITLE>JavaScript Test</TITLE></HEAD>
<BODY bgcolor="white">
<br>Testing the Alert<br>
<P> Click <a href='javascript:alert("Use this wisley!")'>here</a>
to see an example in alert dialog box
<p>End
</BODY></HTML>

A program to Scroll a Message in java script.


<HTML><HEAD><TITLE>Scrolling Message Script</TITLE>
<SCRIPT language="JavaScript">
<!--
var msg = 'My first scolling message. This is fun... '
function scrollMsg(){
document.scrollDemo.textScroll.value = msg
msg = msg.substring(1,msg.length) + msg.substring(0,1)
setTimeout("scrollMsg()", 200)
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="white" onLoad="scrollMsg()">
<P>
<FORM name="scrollDemo">
<FONT face="Courier New,Courier" size=3><B>
<INPUT type="text" name="textScroll" size=30 value="Loading">
</B></FONT>
</FORM>
</BODY></HTML>

Demonstrate Event Object in java script. Using input and output values.
<HTML>
<HEAD>
<TITLE>Event Object Demo</TITLE>
</HEAD>
<BODY bgcolor="white">
<P>
<form name="demo">
Output : <input type="text" name="out" size="40">
<p>
Input : <input type="text" name="inp" size="40">
<p>
<input type="button" name="button1" value="Display In Alert"
onClick="alert(document.demo.inp.value)">
<input type="button" name="button2" value="Transfer" onClick="document.demo.out.value =
document.demo.inp.value">
</form>

</BODY></HTML>

A program to illustrate Mouse Over – Mouse Out – On Click Events.


<HTML><HEAD><TITLE>Event Demo</TITLE>
<SCRIPT language="JavaScript">
<!--function doNothing(){ }//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="white">
<P>
<A href="JavaScript:doNothing()"
onMouseOver="alert('Result of onMouseOver Event')">
onMouseOver Event Demo</A>

<A href="JavaScript:doNothing()" onMouseOut="alert('Result of onMouseOut Event')">


onMouseOut Event Demo</A>
<P>

<A href="JavaScript:doNothing()"
onClick="alert('Result of onClick Event')">
onClick Event Demo</A>
</BODY></HTML>

Write a program to demonstrate Functions in java script.


<HTML><HEAD><TITLE>JavaScript Test</TITLE>
<script>
function myAdder(num1,num2)
{
var total=num1+num2
return total
}
</script>
</HEAD>
<BODY bgcolor="white">
<SCRIPT language="JavaScript">
<!--
document.write("<br>Testing the function<br>")
document.write(myAdder(100,480))
document.write("<br>")
document.write(myAdder(200,700)+"<br>")
document.write("End")
//-->
</SCRIPT>

</BODY>
</HTML>

A program to ON-OFF buttons label using java script.


<HTML><HEAD><TITLE>Using dot syntax</TITLE>
<SCRIPT Language="JavaScript">
<!--
function changeLabel(){
if (document.buttonDemo.onOffButton.value==" ON "){
document.buttonDemo.onOffButton.value=" OFF"
}
else{
document.buttonDemo.onOffButton.value=" ON "
}
}
//-->
</SCRIPT>
</HEAD>

<BODY bgcolor="white">
<P>
<FORM name="buttonDemo">
<INPUT type="Button" value=" ON " name="onOffButton"
onClick="changeLabel()">
</FORM></BODY></HTML>

You might also like