Web Design Lab-2018

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.


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

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

</SCRIPT>
</BODY>
</HTML>
A program to ON-OFF buttons label using java script.

<HTML><HEAD><TITLE>Using dot syntax</TITLE>
<SCRIPT Language="JavaScript">

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

Web Design Lab-2018

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Web Design Lab-2018

Cargado por

Copyright:

Formatos disponibles

WEB DESIGN LAB

S.No Program Name Page No

A program to illustrate ten Formatting Tags

A program to illustrate HTML Tables

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

Create a web page using Internal – Cascading Style Sheets.

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

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

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

Create a web page using External – Cascading Style Sheets

A program to demonstrate Form Tag.

A program to Scroll a Message in java script.

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

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

Write a program to demonstrate Functions in java script.

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

También podría gustarte