WT Lab Manual Completed (1)

(1)

1. Write a HTML program to demonstrate Formatting Tags. Aim: To write a HTML program to illustrate Formatting Tags.

<html>

<head>

<title>Example - Text Formating Tags</title> </head>

<body>

<h1>Header Size 1</h1> <p><h3>Header Size 3</h3>

The Next Line of example text should be in the middle of the document

<p><b>Bold Text</b>, <i>Italic Text</i>, <u>and underlined text.</u>

</center>

<br><font face="arial">Font Face = Arial</font>

<br><font color="#FF0000">Font Colour = Red</font> <p>Normal Text, <sub>Subscript text</sub>, <sup>Supersrpit Text</sup>

<p><em>Text in Emphasis</em> <br><strong>Text in Strong</strong> <pre>

This is preformatted text (using the PRE) tag as it appears in the editor

view the source code and you will

notice that there are no tags until here. It is dsiplayed the exact way that its been

set out in the editor. If required the font can be changed <font face="arial">like this</font> using

(2)

</pre>

<tt>This text should appear as if it has been typed by a typewriter</tt>

<p>

<small>The fine print (small text)</small> <hr>

<font size="2">--- End Of Example ---</font> </center>

</body> </html>

Output:

2. Write a HTML program to demonstrate Inter Documented Links. Aim: To write a HTML program to demonstrate Inter Documented Links.

<html>

(3)

<title>Inter Documented Links</title> </head>

<a href="#c10">See also Chapter 10.</a> </p>

<h2><a name="C1">Chapter 1 </h2>

<p>this chapter explains ba bla bla</p> <h2>Chapter 2 </h2>

<p>This chapter explains ba bla bla</p> <h2>Chapter 3 </h2>

<p>This chapter explains ba bla bla</p> <h2>Chapter 4 </a></h2>

<p>This chapter explains ba bla bla</p> <h2>Chapter 5 </h2>

<p> This chapter explains ba bla bla</p> <h2>Chapter 6 </h2>

<p> This chapter explains ba bla bla</p> <h2><a name="C10">Chapter 10 </h2>

(4)

<a href="#c1">See also Chapter 1.</a> </p>

</body> </html>

Output:

3. Write a HTML program using <hr> and headings tags. Aim: To write a Write a html program using <hr> and headings tags. <html>

<head>

<title> This is Sample Page</title> </head>

<body>

(5)

<h2 align="center">This is heading…2</h2> <h3 align="center">This is heading…3</h3> <h4 align="center">This is heading…4</h4> <h5 align="center">This is heading…5</h5> <h6 align="center">This is heading…6</h6>

<p align="center">This is Basic Web Page Example. <br>I am studying B. Sc

III year(M.S.CS)<br>This is the first time I am learning HTML</p> <hr width="50%" size="15" color="red">

</body> </html>

Output:

4. Write a HTML program to illustrate all types of Lists in HTML. Aim: To write a HTML program to illustrate all types of Lists in HTML.

<html>

<head>

<title>Lists in HTML</title> </head>

<body>

<h2><u>Using Ordered and Unordered Lists</u></h2> <h3>Courses offerd by B V Raju College</h3>

(6)

<li>MPCs</li> <li>MSCs</li> <li>MPC</li> <li>MBBTBC</li> <li>BTBCC</li> </ul>

<li>Vocational</li> </ul>

<li>Organic Chemistry</li> </ul>

<h2><u>Using Definition List</u></h2> <h3>Course Abbrevations</h3>

<dl>

<dt>BSc

<dd>Bachelor of Science</dd> </dt>

<dt>BCom

<dd>Bachelor of Commerce</dd> </dt>

<dt>MSc

<dd>Master in Science</dd> </dt>

<dt>MCA

<dd>Master in Computer Applications</dd> </dt>

</dl> </body> </html>

(7)

5. Write a HTML program to design your class time table using tables. Aim: To write a HTML program to design the class time table using tables.

<html>

<head>

<title>Time Table</title> </head>

<b>III MECS-B Time Table</b> <br><br><br>

</caption> <colgroup>

(8)

<th rowspan="7" width="10%">Lunch break</th> <th>5</th>

(9)

</table> </body>

(10)

6. Write a HTML program to divide the webpage using frames. Aim: To write a HTML program to divide the webpage using frames.

Frames.html <html>

</html>

Frame_a.html <html>

<head>

<title>Frames</title> </head>

<h3 align="center">This Is Frame A</h3>

(11)

<a href="program2.html" target="output">Program2</href> <br><br><br>

<a href="program3.html" target="output">Program3</href> </body>

</html>

Frame_b.html <html>

<head>

<title>frame_b</title> </head>

<h1 align="center">This Is Frame B</h1> </body>

</html>

Program1.html <html>

<head>

<title>Program1</title> </head>

<h1 align="center">This is Program1</h1> </body>

</html>

Program2.html <html>

<head>

<title>Program2</title> </head>

</html>

Program3.html

<html>

<head>

(12)

</html> Output:

7. Write a HTML program to design a student registration form.(Assume the form fields). Aim: To write a HTML program to design a student registration form.(Assume the form fields). Registration.html

<html>

<head>

<title>Student Registration Form</title> </head>

<tr>

<center><font size=5><b>Student Registration Form</b></font></center>

</td> </tr>

<tr>

(13)

<td><b>Father Name</b></td>

</tr> <tr>

<tr>

<td><b>Gender</td>

<td><input type="radio" name="sex" value="male" size="10">Male

<input type="radio" name="sex" value="Female" size="10">Female</td>

</tr> <tr>

<td><b>Hobbies</td> <td>

<input type="checkbox" name="telugu">Telugu <input type="checkbox" name="english">English <input type="checkbox" name="hindi">Hindi </td>

</tr> <tr>

<td><b>Course</td>

<option value="-1" selected>select..</option> <option value="B.Tech">B.TECH</option> <option value="MCA">MCA</option> <option value="MBA">MBA</option> <option value="BCA">BCA</option> </select></td>

</tr> <tr>

<td><b>Address</td>

<td><textarea type="text" name="personaladdress"

id="personaladdress" cols="22" rows="3"></textarea></td> </tr>

<tr>

<td><b>EmailId</td>

(14)

</tr> <tr>

<td><b>MobileNo</td>

</tr> <tr>

</tr> </table> </form>

</body> </html>

Output

(15)

Aim: To write a HTML program to design the web page as above. <html>

<head>

<title>BatMobile</title> </head>

<body>

<th>Special Equipment</th>

<th colspan="2">Specifications/Performace Data</th> </tr>

<tr>

<td>Retraceble protective armor</td> <td><b>Engine Type</b></td> <td>Jet Turbine</td>

</tr> <tr>

<td>Weapons System</td> <td><b>Thrust</b></td> <td>150lbs@103%ROS</td> </tr>

<tr>

<td>Instruments-Aircraft w/on-board Computer</td> <td><b>Torque</b></td>

<td>[email protected]%ROS</td> </tr>

(16)

<td rowspan="9"><img src="bus.png"></td> <td><b>Top Speed</b></td>

<td>Unknown</td> </tr>

<tr>

<td><b>Brake Rating</b></td> <td>Excellent</td>

</tr> <tr>

<td><b>Wheel Base</b></td> <td>141.0 in.</td>

</tr>

<tr>

<td><b>Length</b></td> <td>260.7 in.</td>

</tr> <tr>

<td><b>Width</b></td> <td>94.4 in.</td>

</tr> <tr>

<td><b>Height</b></td> <td>51.2 in.</td>

</tr> <tr>

<td><b>Wheels</b></td> <td>Cast alloy,15 x6.5</td> </tr>

<tr>

<td><b>Fuel Requirement</b></td> <td>high oct 97% special.</td> </tr>

</table> </body> </html>

(17)

9. Write a HTML program to demonstrate all types of style sheets.

Definition of CSS: “CSS is an acronym which means Cascading Style Sheets. CSS is a style language that defines layout of HTML documents.

For example, CSS covers fonts, colors, margins, lines, height, width, background images, advanced positions and many other things.

The basic CSS syntax The basic syntax for a CSS rule is as follows

A CSS rule is simply a statement that consists of a selector and a declaration. Selector: is the hook used to choose what part(s) of your HTML to apply the CSS to. It indicates the element to which the rule is applied. Following the selector is the…

(18)

Declaration: Inside a declaration block you can have as many declarations as you want and each declaration is a combination of a CSS Property and a value.

Property: is one of the CSS Properties used to tell what part of the selector will be changed (or styled). It specifies a characteristic, such as color, font-family, position, and is followed by a colon (:)

Value: assigns a value to the property. Types of Style Sheets

There are three types of CSS styles:

 Inline Style Sheets

 Internal Style Sheets

 External Style Sheets

Inline styles:

Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to.

Use inline style sheets when you want to apply a style to a single occurrence of an element. Inline style sheets are declared within individual tags and affect those tags only. Inline style sheets are declared with the style attribute.

Program: <html> <head>

<title>HTML Inline CSS</title> </head>

<body>

<h3>Example on Inline Style Sheet</h3><hr> <p style = "color:red;">This is red</p>

<p style = "color:blue;">This is thick</p> <p style = "color:green;">This is green</p> </body>

(19)

Output:

Internal or Embedded Style Sheets:

Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in.

Use an internal style sheet when you want an HTML document to have a unique style. An internal style sheet is defined using the <style> tag and goes in the head section of an HTML document.

Program: <html> <head>

<title>HTML Internal CSS</title> <style type = "text/css">

.red {

color: red; }

.blue{

color: blue; }

.green { color:green; }

</style> </head> <body>

<h3>Example on Internal Style Sheet</h3><hr> <p class = "red">This is red</p>

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

(20)

Output:

External style sheet

Use an external style sheet when you want to apply one style to many pages. If you make one change in an external style sheet, the change is universal on all the pages where the style sheet is used.

An external style sheet is declared in an external file with a .css extension. It is called by pages whose interface it will affect. External style sheets are called using the tag which should be placed in the head section of an HTML document. This tag takes three attributes.

Attributes of the tag:

rel - When using an external style sheet on a webpage, this attribute takes the value "style sheet"

type - When using an external style sheet on a webpage, this attribute takes the value "text/css"

href - Denotes the name and location of the external style sheet to be used. Program:

<title>HTML External CSS</title>

<h3>Example on External Style Sheet</h3><hr> <p class = "red">This is red</p>

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

(21)

Style.css .red {

color: red; }

.blue{

color: blue; }

.green {

color:green; }

Output:

10. Write a HTML program to demonstrate Layers in CSS.

Aim: To Write a HTML program to demonstrate Layers in CSS. <html>

<head>

{

background-color:red; width:500px;

height:200px; position:relative; top:50px;

left:120px; z-index:1; }

.blue {

background-color:blue; width:500px;

height:200px; position:relative; top:-50px;

(22)

z-index:2; }

.green {

background-color:green; width:500px;

height:200px; position:relative; top:-100px; left:200px; z-index:3; }

</style> </head> <body>

<h2>Example on Layers in CSS</h2> <div class="red" >

</div>

</body> </html> Output:

(23)

Aim: To Write a Javascript program to perform all arithmetical operations using forms.

Calculator.html <html>

<head>

<title>A Simple calculator</title>

</head>

<h2 align="center"> A Simple Calculator</h2> <form name="calc">

<tr>

<td>Enter first number:</td>

<tr>

<td>Enter second number:</td>

</tr> <tr>

<td>Result:</td>

<tr >

(24)

</form> </body>

</html> Math.js

function findSum() {

var n1=parseInt(document.calc.first.value); var n2=parseInt(document.calc.second.value); result=n1+n2;

document.calc.res.value=result; }

function findSub() {

var n1=document.calc.first.value; var n2=document.calc.second.value; result=n1-n2;

function findMul() {

var n1=document.calc.first.value; var n2=document.calc.second.value; result=n1*n2;

function findDiv() {

var n1=document.calc.first.value; var n2=document.calc.second.value; result=n1/n2;

(25)

12. Write a Javascript program to demonstrate all string handling methods.

Aim: To write a Javascript program to demonstrate all string handling methods. Program:

<html>

<h2><b><u>String Handling Functions in Javascript</u></b></h2> <script language="javascript">

var str="B V Raju College";

document.write("<br><b>The String is:" + str + "</b><hr width=300 color=red align=left>");

document.write("<br><u><b>Using charAt() and charCodeAt() methods</b></u>");

document.write("<br>charAt(5)-->" + str.charAt(5)); document.write("<br>charCodeAt(5)-->" +

str.charCodeAt(5));

document.write("<br><hr width=300 color=red align=left>><u><b>Using indexOf() and lastIndexOf() methods</b></u>");

document.write("<br>indexOf('e')-->" + str.indexOf('e')); document.write("<br>lastIndexOf('e')-->" +

(26)

document.write("<br><hr width=300 color=red align=left>><u><b>Using toLowerCase() and toUpperCase()

methods</b></u>");

document.write("<br>toLowerCase()-->" + str.toLowerCase());

document.write("<br>toUpperCase()-->" + str.toUpperCase());

document.write("<br><hr width=300 color=red align=left>><u><b>Using substr() and slice() methods</b></u>");

document.write("<br>substr(1,9): " + str.substr(1,9)); document.write("<br>slice(4,10): " + str.slice(4,10)); </script>

</body> </html>

Output:

13. Write a Javascript program for validating form fields.

(Fields: User Name, Password, Confirm Password, Email ID and Phone Number). Login.html

<html>

<head>

(27)

</head>

<tr>

<h2>REGISTRATION FORM</h2> </th> </tr> <tr> <th>User Name:</th> <td>

<input type="text" name="uname" placeholder="User Name" > </td> </tr> <tr> <th>Password:</th> <td>

<input type="password" name="pwd" placeholder="Enter Password"> </td> </tr> <tr> <th>Confirm Password:</th> <td>

<input type="password" name="cpwd" placeholder="Reenter Password"> </td> </tr> <tr> <th>Email ID:</th> <td>

<input type="text" name="email" placeholder="Enter Email ID"> </td> </tr> <tr> <th>Phone Number:</th> <td>

</td> </tr>

<tr>

(28)

</td> </tr> </form> </table> </body> </html> Home.html <html> <body>

<h1 align="center">Hello Welcome User</h1> </body> </html> Validate.js function validate() { var uname=document.f1.uname.value; var pwd=document.f1.pwd.value; var cpwd=document.f1.cpwd.value; var email=document.f1.email.value; var atpos = email.indexOf("@"); var dotpos = email.lastIndexOf(".");

var phone=document.f1.phone.value;

if(uname=="") {

alert("User Name Can not be empty"); document.f1.uname.focus()

return false; }

else if(pwd=="") {

alert("Password Cannot be empty"); document.f1.pwd.focus();

return false; }

else if(pwd.length<6) {

alert("Password must be atleast 6 characters"); document.f1.pwd.focus();

return false; }

else if(pwd!=cpwd) {

alert("Password and Confirm Password must be equal"); document.f1.cpwd.focus();

return false; }

(29)

alert("Email ID Can not be empty"); document.f1.email.focus();

return false; }

else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {

alert("Not a valid e-mail address"); document.f1.email.focus();

return false; }

else if(phone=="") {

alert("Phone Number Can not be empty"); document.f1.phone.focus();

return false; }

else if(isNaN(phone) || phone.indexOf(" ")!=-1) {

alert("Phone Number must be numeric"); document.f1.phone.focus();

return false; }

else if (phone.length!=10)

{

alert("Phone number must be 10 digits"); document.f1.phone.focus();

return false; }

else {

return true; }

}

(30)

14. Write a Javascript program to demonstrate exception handling.

<html>

<head>

<title>Example on Exception Handling</title> </head>

<h3>EXAMPLE ON EXCEPTION HANDLING</h3> <hr>

<p><b>Please input a number between 5 and 10</b></p> <form>

<button type="button" onclick="myFunction()">Test Input</button> </form>

var x;

x = document.getElementById("demo").value; try

{

if(x == "") throw "empty";

if(isNaN(x)) throw "not a number"; x = parseInt(x);

if(x < 5) throw "too low"; if(x > 10) throw "too high"; if(x>=5 && x<=10)

{

alert("The number is:" + x); }

}

catch(err) {

(31)

} }

</script> </body>

</html>

Output1:

Output2:

15. Write a Javascript program to demonstrate all Array Object based methods.

<html>

<head>

<title>Example on Array Object Based Methods</title> </head>

<h2>Example on Array Object Based Methods</h2> <hr width=430 align=left color=red>

/* Using Join and Concat Methods */

document.write("<h3><u>Using JOIN and CONCAT methods</u></h3>"); var arr1=[10,20,30];

var arr2=[40,50,60];

document.write("<b>First Array Elements are----></b>" + arr1);

(32)

document.write("<br><b>arr1.join(':')---></b>" + arr1.join(":"));

document.write("<br><b>arr1.concat(arr2)----></b>" + arr1.concat(arr2)); document.write("<hr width=300 align=left color=green>");

/* Using POP and SHIFT Methods */

document.write("<h3><u>Using POP and SHIFT methods</u></h3>");

var arr=[10,20,30,40,50];

document.write("<b>The array elements are---></b>" + arr); arr.pop();

document.write("<br><b>After arr.pop()---></b>" + arr); arr.shift();

document.write("<br><b>After arr.shift()---></b>" + arr);

document.write("<hr width=300 align=left color=green>");

/* Using PUSH and UNSHIFT Methods */

document.write("<h3><u>Using PUSH and UNSHIFT methods</u></h3>");

var arr=[10,20,30,40,50];

document.write("<b>The array elements are---></b>" + arr); arr.push(60);

document.write("<br><b>After arr.push(60)---></b>" + arr); arr.unshift(5);

document.write("<br><b>After arr.unshift(5)---></b>" + arr);

/* Using SORT and REVERSE Methods */

document.write("<h3><u>Using SORT and REVERSE methods</u></h3>");

var arr=[1,9,8,5,7,2];

document.write("<b>The array elements are---></b>" + arr);

document.write("<br><b>After arr.sort()---></b>" + arr.sort()); document.write("<br><b>After arr.reverse()---></b>" + arr.reverse());

/* Using SLICE and SPLICE Methods */

document.write("<h3><u>Using SLICE and SPLICE methods</u></h3>");

var arr=[1,9,8,5,7,2];

document.write("<b>The array elements are---></b>" + arr);

document.write("<br><b>After arr.slice(1,4)---></b>" + arr.slice(1,4)); document.write("<br><b>After arr.slice(2,5)---></b>" + arr.slice(2,5));

(33)

document.write("<br><b>After arr.splice(2,2,'BVRICE','IIIBSc')---></b>" + arr);

</script> </body>

</html>

Output

(34)

Aim: To write a Javascript program to demonstrate Date and Window Objects.

<html>

<head>

<title>Built-in Objects in Javascript</title> </head>

<body>

<h2>Example on Built-in Objects in Javascript</h2> <hr width="450" color="red" align="left">

document.write("<h3><u>Using Date Object</u></h3>");

var d=new Date();

document.writeln("<br><b>The date is:</b>" + d + "<br>"); document.writeln("<b>getDate():</b>" + d.getDate() + "<br>"); document.writeln("<b>getDay():</b>" + d.getDay() + "<br>"); document.writeln("<b>getMonth():</b>" + d.getMonth() + "<br>"); document.writeln("<b>getFullYear():</b>" + d.getFullYear() + "<br>");

document.writeln("<b>getTime():</b>" + d.getTime() + "<br>"); document.writeln("<b>getHours():</b>" + d.getHours() + "<br>"); document.writeln("<b>getMinutes():</b>" + d.getMinutes() + "<br>"); document.writeln("<b>getSeconds():</b>" + d.getSeconds() + "<br>"); document.writeln("<b>getMilliseconds():</b>" + d.getMilliseconds());

</script>

<hr width=450 color=red align=left> <h3><u>Using Window Object</u></h3> <b><u>1. window.open() method</u></b>

<br>Click the button to open a Google in a new browser window<br> <button onclick=openGoogle()>Open</button>

window.open("http://www.google.com"); }

</script>

<b><u>2. setTimeout(),clearTimeout() and confirm() methods</u></b> <p>Click the first button to alert "Hello" after waiting 5 seconds.</p> <p>Click the second button to cancel alert before 5 seconds.</p>

<button onclick="myFunction()">Try it</button> <button onclick="myFunction1()">Stop alert</button>

(35)

var x;

function myFunction() {

x=setTimeout(function(){ alert("Hello");} ,5000); }

function myFunction1() {

var flag=confirm("Do you want to Cancel"); if(flag==true)

{

clearTimeout(x); }

} </script>

</body> </html>