Scribd
Upload
66 views

Web Lab Ex 1-10

Uploaded by

Satishkumar Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
66 views

Web Lab Ex 1-10

Uploaded by

Satishkumar Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 26

WEB PROGRAMMING PRACTICAL

EX NO 1 DESIGNING A PAGE OF PROFILE

AIM

To design a HTML page describing your profile in one paragraph. Design in such a way
hat it has a heading, a horizontal rule, three links and your photo. Also, write three HTML
documents for the links. Include facilities for forward, backward and HOME

PROCEDURE

1. Open Notepad
2. Use< head> tag to define heading of webpage
3. Use <hr> for horizontal rule.
4. Use <a> for link
5. Use <img> for displaying image
6. Save as ex1.html
7. Open another 3 notepads and type corresponding codes for 3 different web pages
and save it as a.html, b.html,c.html for moving backward & forward.
8. Run the program

PROGRAM

Ex1.html

<html>

<head>

<p align="center"> <b> FIRST EXAMPLE </b> </p>

</head>

<hr>

<body>

<a href="a.html"> FIRST </a><br> <br>

<a href="b.html"> SECOND </a><br> <br>


<a href="c.html"> THIRD </a><br> <br>

<p align=center"><img src="D:\web programming exercises\ex1\baby1.jpeg" width="100"


height="100"></img> </p><br>

<p>

<pre>

NAME xxxxx

FATHER'S NAME xxxxx

ADDRESS xxxxx

PHONE NUMBER xxxxx

NATIONALITY xxxxx

DATE OF BIRTH xxxxx

</pre>

<P>

</html>

a.html

<html>

<head> FIRST LINK </head>

<body>

<br><br><a href="ex1.html"> HOME </a> <br><br>

<a href="b.html"> FORWARD </a>

</body>

</html>
b.html

<html>

<head> SECOND LINK </head>

<body>

<br><br>

<a href="ex1.html"> HOME </a> <br><br>

<a href="c.html"> FORWARD </a> <br><br>

<a href="a.html"> BACKWARD </a>

</body>

</html>

c html

<html>

<head> THIRD LINK </head>

<body>

<br>

<a href="ex1.html"> HOME </a> <br><br>

<a href="b.html"> BACKWARD </a>

</body>

</html>
F i ie D:/we b%20p rag ramm ing9â 20exerc lses/ex1/ EX1.htm I o @ ”

THIRD

S BE

:: O 'n zg

F i ie D:/we b%20p rag ramm ing9â 20exerc lses/ex1/a. h Inn I


o @

:: O 'n zg
Result:

Thus the program was successfully executed.


Ex no 2: WEBPAGE OF COMPUTER LANGUAGES

Aim:

To design a HTML page about computer languages. List the language. Each Language’s
name is a link. Prepare separate HTML documents for each language and call them in the
appropriate link.

Procedure:

1. Open Notepad
2. Use< head> tag to define heading of webpage
3. Use <a> for linking other web pages.
4. Save as ex2.html
5. Open another 3 notepads and type corresponding codes for 3 different web pages
and save it as c.html, java.html,c#.html
6. Run the program

PROGRAM

Ex2.html

<html>
<head> COMPUTER LANGUAGES </head>
<body>
<a href="c.html"> C </a> <br><br>
<a href="java.html"> JAVA </a> <br><br>
<a href="C#.html"> C#.NET </a>
</body>
</html>

tml

<html>
<body>
<b>C is a general-purpose, procedural computer programming language </b>
</body>
</html>
Java.html

<html>
<body>
<b>Java is a class-based, object-oriented programming language </b>
</body>
</html>

C#.html

<html>
<body>
<b> C#is a simple, modern, object-oriented, and type-safe programming language. </b>
</body>
</html>
Result:

Thus the program was successfully executed.


Ex no 3: WEBPAGE FOR POLYTECHNIC

Aim:

To design a single page website for your polytechnic containing a description of the
courses offered. It should also contain some general information about the college such as its
history, the campus, its unique features and so on. The site should be colored and each section
should have a different color.

Procedure:

1. Open Notepad
2. Use< head> tag to define heading of webpage
3. Use < style > tag to give style detail.
4. Give font details for h1 , h2 & body within a style sheet.
5. Use <ul> & <li> tags for listing courses of polytechnic college.
6. Use <p> tag to give the details about history of the college.
7. Save as ex3.html
8. Run the program

Ex3.html

<html>
<head> <p align="center"> GOVERNMENT POLYTECHNIC COLLEGE </p> </head>

<style type="text/css">
h1{font-family:Times New Roman;font-size:16;color:red}
h2{font-family:arial;font-size:14;color:yellow}
body{font-family:Arial;font-size:14;color:green}
</style>

<body bgcolor="pink">
<h1> COURSES OFFERED
<ul type="disc">
<li> COMPUTER
<li> ELECTRICAL
<li> MECH
<li> ELECTRONICS
</ul>
</h1>
<h2> HISTORY OF COLLEGE
<p>The College started functioning from June 1963 at the premises at Seshasyee Institute
of Technology, Trichy. Within a short period of three years, it was moved to the present
campus in June 1966. This College is situated at Thuvakudimalai, 16 km from Trichy, on
the Trichy - Thanjavur National Highway.</p>
</body>
</html>

Result:

Thus the program was successfully executed.


Ex no 4: TIME TABLE CREATION

Aim:
To develop a web page using CSS to create a time table for the class using different
border style.

Procedure:

1. Open Notepad
2. Use< head> tag to define heading of webpage
3. Use < style > tag to give style detail.
4. Give different border style within a style sheet.
5. Use <table> tag to create a table.
6. Use <tr> & <td> for table row & data creation
7. Save as ex4.html
8. Run the program

PROGRAM
<html>
<style type="text/css">
h1{font-family:Times New Roman;font-size:16;color:red}
body{font-family:Arial;font-size:14;color:green}
table{border-color:green;border-style:dotted}
</style>
<body>
<table border="5">
<tr>
<td><h1>HOURS/DAYS</h1></td>
<td><h1>MONDAY </h1></td>
<td><h1>TUESDAY </h1></td>
<td><h1>WEDNESDAY </h1></td>
<td><h1>THURSDAY </h1></td>
<td><h1>FRIDAY</h1></td>
</tr>
<tr>
<td>I</td>
<td>Tamil</td>
<td>English</td>
<td>Maths</td>
<td>Science</td>
<td>Social</td>
</tr>
<tr>
<td>II</td>
<td>Social</td>
<td>English</td>
<td>Maths</td>
<td>Science</td>
<td>Tamil</td>
</tr>
<tr>
<td>III</td>
<td>English</td>
<td>Tamil</td>
<td>Maths</td>
<td>Social</td>
<td>Science</td>
</tr>
<tr>
<td>IV</td>
<td>Tamil</td>
<td>English</td>
<td>Science</td>
<td>Maths</td>
<td>Social</td>
</tr>
<tr>
<td>V</td>
<td>Tamil</td>
<td>English</td>
<td>Maths</td>
<td>Science</td>
<td>Social</td>
</tr>
</table>
</body>
</html>
Result:

Thus the program was successfully executed.


Ex no 5: CONVERT TEXT TO UPPER CASE

Aim:

To write a Java script code that converts the entered text to uppercase

Procedure

1. Open Notepad
2. Use <script > tag to define javascript code.
3. With in a script
declare variable s as string & define a string.
Use predefined function toUppercase() to convert it to upper case.
Print converted text.
4. Save as ex5a.html
5. Run the program

PROGRAM

<html>

<body>
<script language="javascript">
var s="hi hello welocome";
var s1=s.toUpperCase();
document.write(" Uppercase is "+s1);
</script>
</body>
</html>
Result:

Thus the program was successfully executed.


Ex no 6: PAGE VALIDATION

Aim:

To write a Java script code to validate the username and password. The username and
password are stored in variables.

Procedure:

1. Open Notepad
2. Use <script > tag to define javascript code.
3. With in a script
declare variable user & pass as string & use prompt() to get user data
Use if condition to check user data validation
If validated successful, use alert() to print “login success”
Else print “login failed”
4. Save as ex5b.html
5. Run the program

PROGRAM
<html>
<body>
<script language="javascript">
var user=prompt("ENTER USER NAME");
var pass=prompt("ENTER PASSWORD");
if(user=="admin"&&pass=="123")
alert("LOGIN SUCCESS");
else
alert("LOGIN FAILED");
</script>
</body>
</html>
Result:

Thus the program was successfully executed.


Ex no 7: FRAMES & EVENTS

Aim:
To write a Java Script code using frames and Events ( When a cursor moves over an object
it should display the specification of the object in another frame )

Procedure:

1. Open Notepad
2. Use <frameset > tag to define frames .Split page into 2 frames and save it as a
“1.html”.
3. Place a button and add an event attribute “onmousemove” on it and save it as a
“2.html”.
4. Place a textbox to display value when event occurs and save it as a “3.html”.
5. Run the program

PROGRAM
1.html

<html>
<frameset cols="50%,50%">
<frame src="2.html" name="leftframe">
<frame src="3.html" name="rightframe">
</frameset>
</html>

2.html

<html>
<body>
<form>

<input type="button" value="Elvin"


onMouseMove="parent.rightframe.document.form1.text1.value='Elvin'">
</form>
</body>
</html>

3.html

<html>
<body>
<form name="form1">
<input type="text" name="text1" size="25" value="">
</form>
</body>
</html>
Result:

Thus the program was successfully executed.


Ex no 8: BANNER ADVERTISEMENT

Aim:
To Create a site containing banner advertisement at the top of the page. The ads are changed every
10 or 15 seconds.

Procedure:

1. Open Notepad
2. In <head>, define script to display images
3. Declare variable “images” as array
4. Define function Nextimage() to retrieve next images
5. Define function banner() to set interval for function Nextimage() calling.
6. In <body> use onload event attribute for function calling.
7. Save this file as “ex7.html”
8. Run the program

PROGRAM

Ex7.html
<html>
<head>
<script language="javascript">
var image=[4],x=-1;
image[0]="1.jpg";
image[1]="2.jpg";
image[2]="3.jpg";
image[3]="4.jpg";
function Nextimage()
{
x=(x==image.length-1)?0:x+1;
document.getElementById("img").src=image[x];
}
function banner()
{
setInterval(Nextimage,1000);
}
</script>
</head>
<body Onload="banner()">
<img id="img"src="C:\Users\ELVIN\Downloads\5.jpg" width="1000" height="700">
</body>
</html>
OUTPUT:
Result:

Thus the program was successfully executed.

Ex no 9:

COUNT THE NUMBER OF MILLISECONDS BETWEEN TWO CLICK

Aim:
To write Jquery Program for Count the number of milliseconds between the two click events on a
paragraph

Procedure:

1. Open Notepad
2. In <head>, define script to embed jquery file
3. Define script to calculate & display number of milliseconds between clicks.
4. In document.ready() ,
4.1 declare variable tdiff & last;
4.2 In click event of p, calculate tdifference using event.timestamp property.
4.3 Display tdifference using alert() function.
5. In <body>, define <p> element
6. Save file as “ex8.html”.
7. Run the program
PROGRAM

Ex8.html

<html>
<head>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function()
{
var tdiff,lastt;
$("p").click(function(event)
{
if(lastt)
{
tdiff=event.timeStamp-lastt;
alert(""+tdiff);
}
lastt=event.timeStamp;
});
});
</script>
</head>
<body>
<p>click</p>
</body>
</html>

OUTPUT:

Result:

Thus the program was successfully executed.


Ex no 10: JQUERY PROGRAM FOR DISABLE/ENABLE SUBMIT BUTTON &
BLINK THE NEXT.
Aim:
To Write jquery Program for Disable/enable the form submit button & Blink the text.

Procedure:

1. Open Notepad
2. In <head>, define script to embed jquery file to define script for disable/enable submit
button & blink the next.
3. In script,define fade() function for fadein & fadeout of p element.
4. Use setinterval() to call fade function.
5. In document.ready() ,
4.1 Set disabled property for button “b1” as true
4.2 define keypress function for t1
4.2.1 Set disabled property for button “b1” as false
4.2 define blur function for t1
4.2.1 Set disabled property for button “b1” as true
5. In <body>, use onload attribute to call “fade()” function
6. Design text & button in form.
6. Save file as “ex10.html”.
7. Run the program

PROGRAM

Ex10.html

<html>
<head>
<scriptsrc="jquery-3.4.1.min.js"></script>
<script>
function fade()
{
$("p").fadeOut(200);
$("p").fadeIn(200);
}
setInterval(fade,200);
$(document).ready(function()
{
$("#b1").prop("disable",true);
$("#t1").keypress(function()
{
$("#b1").prop("disabled",false);
$("#t1").blur(function()
{
$("#b1").prop("disabled",true);
});
});
});
</script>
</head>
<body Onload="fade()">
<p>elvin</p>
<form>
<input type="text" id="t1">
<input type="submit" id="b1">
</form>
</body>
</html>

OUTPUT:
Result:

Thus the program was successfully executed.

You might also like