Lab Manual_KIT451_2021_22_Even

GALGOTIAS COLLEGE OF ENGINEERING AND TECHNOLOGY
Department of Information Technology
LAB MANUAL
Program Name: B. Tech (IT)

Semester: 4th
Session: 2021-22 (Even Semester)
Subject Name: Web Designing Lab
Subject Code: KIT451
Faculty Name: Mrs. Vinotha D
1
.
INDEX
S. No. Contents Page No.

1 To create a simple html file to demonstrate the use of
different tags.
To create an html file to link to different html page which
2
contains images, tables, and also link within a page.
To create an html page with different types of frames such
3
as floating frame, navigation frame & mixed frame.
To create a registration form as mentioned below.
4 Procedure: Create an html page named as
“registration.html”
To create an html file by applying the different styles using
5
inline, external & internal style sheets.
To write a Javascript program to define a user defined
6
function for sorting the values in an array.
To create an html page to explain the use of various
7 predefined functions in a string and math object in java
script.
To create an html page to explain the use of various
8
predefined functions in a array & Date object in Javascript.
To create an html page to demonstrate exception handling in
9
javascript
To display the calendar using javascript code by getting the
10
year from the user.
To create a html registration form and to validate the form
11
using javascript code.
To create a html file. To open new window from the current
12
window using javascript.
To create an html page to change the background color for
13
every click of a button using javascript.
To create an html page with 2 combo box populated with
14 month & year, to display the calendar for the selected month
& year from combo box using javascript.
To create a html page to display a new image & text when
15
the mouse comes over the existing content in the page.
2
Date PROGRAM: 1
1.1 OBJECTIVE:
To create a simple html file to demonstrate the use of different tags.
1.2 CODE
1.3 OUTPUT
RESULT
A simple html file has been created with the use of different tags and the output was verified.
3
DATE PROGRAM: 2
2.1 OBJECTIVE:
To create an html file to link to different html page which contains images, tables, and also
link within a page.
2.2 CODE
4
2.2 OUTPUT
DATE PROGRAM: 3
5
3.1 OBJECTIVE:
To create an html page with different types of frames such as floating frame, navigation frame
& mixed frame.
3.2 PROCEDURE/ALGORITHM/CODE
<!DOCTYPE html>
<html>
<frameset rows="50%,50%">
<frame src="a.jpg">
<frameset cols="25%,75%">
<frame src="b.jpg">
<frame src="c.jpg">
</frameset>
</frameset>
</html>
3.3 OUTPUT
PROGRAM: 4
6
4.1 OBJECTIVE:
To create a registration form as mentioned below. Procedure: Create an html page named as
“registration.html”
7
4.3 OUTPUT
8
9
PROGRAM: 5
5.1 OBJECTIVE
To create an html file by applying the different styles using inline, external &
internal style sheets.
1. External CSS
HTML File
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS File
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
2. Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
10
</body>
</html>
3. Inline CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
5.3 OUTPUT
1. External CSS
2. Internal CSS
3. Inline CSS
11
PROGRAM: 6
6.1 OBJECTIVE
To write a Javascript program to define a user defined function for sorting the values in an
array.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort Reverse</h2>
<p>The reverse() method reverses the elements in an array.</p>

<p>By combining sort() and reverse() you can sort an array in descending order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
// Create and display an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
// First sort the array
fruits.sort();
// Then reverse it:
fruits.reverse();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
6.3 OUTPUT
12
PROGRAM: 7
7.1 OBJECTIVE:
To create an html page to explain the use of various predefined functions in a string and math
object in java script.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.round()</h2>
<p>Math.round(x) returns the value of x rounded to its nearest integer:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.round(4.4);
</script>
</body>
</html>
7.3 OUTPUT
13
PROGRAM: 8
8.1 OBJECTIVE:
To create an html page to explain the use of various predefined functions in a array &
Date object in Javascript.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = ["SWIFT", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
8.3 OUTPUT
14
PROGRAM: 9
9.1 OBJECTIVE:
To create an html page to demonstrate exception handling in javascript.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Error Handling</h2>
<p>This example demonstrates how to use <b>catch</b> to diplay an error.</p>
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
</body>
</html>
9.3 OUTPUT
15
PROGRAM: 10
10.1 OBJECTIVE:
To display the calendar using javascript code by getting the year from the user.
<html>
<head>
<title>JavaScript calendar</title>
<script>
function displayCalendar(){
var htmlContent ="";

var FebNumberOfDays ="";
var counter = 1;
var dateNow = new Date();

var month = dateNow.getMonth();
var nextMonth = month+1; //+1; //Used to match up the current month with the correct start date.
var prevMonth = month -1;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
//Determing if February (28,or 29)

if (month == 1){
if ( (year%100!=0) && (year%4==0) || (year%400==0)){
FebNumberOfDays = 29;
}else{
FebNumberOfDays = 28;
}
}
// names of months and week days.

var monthNames = ["January","February","March","April","May","June","July","August","Septem
ber","October","November", "December"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30",
"31"]
// days in previous month and next one , and day of week.

var nextDate = new Date(nextMonth +' 1 ,'+year);
var weekdays= nextDate.getDay();
var weekdays2 = weekdays
var numOfDays = dayPerMonth[month];
// this leave a white space for days of pervious month.

while (weekdays>0){
htmlContent += "<td class='monthPre'></td>";
16
// used in next loop.
weekdays--;
}
// loop to build the calander body.

while (counter <= numOfDays){
// When to start new line.

if (weekdays2 > 6){
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
// if counter is current day.

// highlight current day using the CSS defined in header.
if (counter == day){
htmlContent +="<td class='dayNow' onMouseOver='this.style.background=\"#FF0000\"; this.s
tyle.color=\"#FFFFFF\"' "+
"onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#00FF00\"'>"+counter+"
</td>";
}else{
htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
" onMouseOut='this.style.background=\"#FFFFFF\"'>"+counter+"</td>";
weekdays2++;
counter++;
}
// building the calendar html body.

var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>"
+monthNames[month]+" "+ year +"</th></tr>";
calendarBody +="<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>"+
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML=calendarBody;
}
</script>
</head>
<body onload="displayCalendar()">
<div id="calendar"></div>
</body>
<style>
.monthPre{
color: gray;
text-align: center;
}
.monthNow{
color: blue;
text-align: center;
17
}
.dayNow{
border: 2px solid black;
color: #FF0000;
text-align: center;
}
.calendar td{
htmlContent: 2px;
width: 40px;
}
.monthNow th{
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
.dayNames{
background: #0FF000;
color: #FFFFFF;
text-align: center;
}
</style>
</html>
10.3 OUTPUT
18
PROGRAM: 11
11.1 OBJECTIVE:
To create a html registration form and to validate the form using javascript code.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
11.3 OUTPUT
19
PROGRAM: 12
12.1 OBJECTIVE:
To create a html file. To open new window from the current window using javascript.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open a new window called "MsgWindow" with some text.</p>
<script>
var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px
tall!</p>");
}
</script>
</body>
</html>
12.3 OUTPUT
20
PROGRAM: 13
13.1 OBJECTIVE:
To create an html page to change the background color for every click of a button using
javascript
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 300px;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<p>Click the "Try it" button to set the backgroundColor property of the DIV element to
"lightblue":</p>
<div id="myDIV">
<h1>Hello</h1>
</div>
<script>
document.getElementById("myDIV").style.backgroundColor = "lightblue";
}
</script>
</body>
</html>
21
13.3 OUTPUT
22
PROGRAM: 14
14.1 OBJECTIVE:
To create an html page with 2 combo box populated with month & year, to display the
calendar for the selected month & year from combo box using javascript.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the date after changing the month and day.</p>
<p id="demo"></p>
<script>
var d = new Date();
d.setMonth(4, 20);
document.getElementById("demo").innerHTML = d;
}
</script>
</body>
</html>
14.3 OUTPUT
23
PROGRAM: 15
15.1 OBJECTIVE:
To create a html page to display a new image & text when the mouse comes over the
existing content in the page.
<!DOCTYPE html>
<html>
<body>
<p id="demo" ondblclick="myFunction()">Double-click me to change my text color.</p>
<p>A function is triggered when the p element is double-clicked. The function sets the color of
the p element to red.</p>
<script>
document.getElementById("demo").style.color = "red";
}
</script>
</body>
</html>
15.3 OUTPUT
24

Lab Manual_KIT451_2021_22_Even

Uploaded by

Copyright:

Available Formats

Lab Manual_KIT451_2021_22_Even

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab Manual_KIT451_2021_22_Even

Uploaded by

Copyright:

Available Formats

GALGOTIAS COLLEGE OF ENGINEERING AND TECHNOLOGY

Department of Information Technology

Program Name: B. Tech (IT)

S. No. Contents Page No.

To create a simple html file to demonstrate the use of different tags.

<h2>JavaScript Array Sort Reverse</h2>

<p>The reverse() method reverses the elements in an array.</p>

To create an html page to demonstrate exception handling in javascript.

var htmlContent ="";

var dateNow = new Date();

//Determing if February (28,or 29)

// names of months and week days.

// days in previous month and next one , and day of week.

// this leave a white space for days of pervious month.

// loop to build the calander body.

// When to start new line.

// if counter is current day.

// building the calendar html body.

You might also like