Академический Документы
Профессиональный Документы
Культура Документы
-87175101
PRACTICAL FILE OF
WEB ENGINEERING
(CSE-312N)
INDEX:-
S.NO PRACTICAL DATE SIGN
1. Create your own page with your favourite hobbies using html,
Javascript and CSS.
2. Create a frameset in HTML that is divided into three sections.
The frameset should have three zones.
a. The topmost section of the frameset should take up about
just 15% of the browser window. Name this frame title.
b. The middle section should be 75% of the browser window.
Name this frame title.
c. The lower section should be 10% of the browser window.
Name this frame menu.
3. Use Cascading Style sheets (CSS) to modify the following:
(A)Change background.
(B)Change font type, face and color.
(C)Align Text.
(D)Remove underlines from hyperlinks.
4. Create pages for each section. For the lowermost section, create
page that loads the content into the middle section. The topmost
section should contain a page describing the web page itself.
5. Write a Python function/program that accepts the lengths of
three sides of a triangle as inputs. The program output should
indicate whether or not the triangle is an equilateral triangle.
6. Write a program in python to perform sorting and binary
search on the list.
7. Write program in Python using Lists and dictionaries, Control
statements and Strings and text files.
8. Write the program for using JavaScript by using for – loops
(through a block of code a number of times), for/in - loops
(through the properties of an object), while - loops (through a
block of code while a specified condition is true), do/while -
loops (through a block of code while a specified condition is
true).
PRACTICAL NO. 1
AIM :- Create your own page with your favorite hobbies using HTML
<html>
<head>
<H1><FONT COLOR="BLUE">
<MARQUEE>MY HOBBIES</MARQUEE></FONT>
<title>
HOBBIES
</title>
</head>
<body bgcolor="pink">
<h2>
1. DRAWING <br>
2. READING NOVELS <br>
3. LISTENING MUSIC <br>
4. ACTING<br><br>
<font color="red"><center> DRAWING </center></font>
<h3><p> I feel most at ease when drawing. It is often used for therapy and stress
relief.Creating something from nothing also makes us feel productive, and that helps us feel
good about ourselves. Being present in the moment and focused during drawing session can
be a feeling akin to meditation.</p></h3>
OUTPUT: -
ROLL NO.-87175101
PRACTICAL NO.- 2
AIM :- Create a frameset in HTML that is divided into three sections. The
frameset should have three zones.
a.The Topmost section of the frameset should take up about just 15% of the
browser window. Name this frame title.
b.The middle section should be 75% of the browser window. Name this frame
title.
c.The lower section should be 10% of the browser window. Name this frame
menu.
<html>
<head>
<title>
ROW FRAMING
</title>
</head>
<frameset rows ="15%,75%,10%">
<frame src ="abc.html" name ="title">
<frame src ="hello.html" name ="hello">
<frame src ="tss.html" name ="tss"></frameset>
</html>
ROLL NO.-87175101
OUTPUT :-
ROLL NO.-87175101
PRACTICAL NO.- 3
AIM :- Use Cascading Style sheets (CSS) to modify the following:
a. Change background.
b. Change font type, face and color.
c. Align Text.
d. Remove underlines from hyperlinks.
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
This text has Font size 20px , font family Courier,text is align center and background color is red.
<pre>
<a href="prac1.html">
click here to open </a>
<br>
As we see the underline of Hyperlink remove
</pre>
</body>
</html>
External css
body
{
background-color : pink;
font-family : courier;
font-size : 20px;
text-align :center;
color : blue;
}
a
{
text-decoration : none;
}
ROLL NO.-87175101
OUTPUT:-
ROLL NO.-87175101
PRACTICAL NO.- 4
AIM :- Create pages for each section. For the lowermost section, create page
that loads the content into the middle section. The topmost section should
contain a page describing the web page itself.
<html>
<head>
<frameset rows="20%,40%,40%">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="" name="bottom">
</frameset>
</head>
</html>
Frame1.html
<html>
<head>
</head>
<body bgcolor='blue'>
This page describes the webpage.<br>
This page show that the frame2 loads the content of frame3 and frame1 describes the
webpage itself.
</body>
</html>
Frame2.html
<html>
<head>
</head>
<body bgcolor='pink'>
<a href="frame3.html" target="bottom"> click here to open frame3 </a>
</body>
</html>
Frame3.html
<html>
<body bgcolor='green'>
This is the frame3 which is loaded by the frame2.
</body>
</html>
ROLL NO.-87175101
OUTPUT :-
ROLL NO.-87175101
PRACTICAL:-5
AIM:- Write a Python function/program that accepts the lengths of three sides
of a triangle as inputs. The program output should indicate whether or not the
triangle is an equilateral triangle.
OUTPUT:-
ROLL NO.-87175101
OUTPUT:-
ROLL NO.-87175101
PRACTICAL:-6
AIM:-Write a python function to perform sorting and binary search on the
list.
L = [20,30,40,50,60,10]
for j in range(len(L)):
swapped = False
i=0
while i<len(L)-1:
if L[i]>L[i+1]:
L[i],L[i+1]=L[i+1],L[i]
swapped = True
i=i+1
if swapped == False:
break
print(L)
def Binary_Search(L,key):
low=0
high=len(L)-1
while low<=high:
mid=(low+high)//2
if L[mid]==key:
return mid
elif key>L[mid]:
low=mid+1
else:
high=mid-1
return -1
OUTPUT:-
ROLL NO.-87175101
PRACTICAL:-7
AIM:-Write program in Python using Lists and dictionaries, Control
statements and Strings and text files .
file=open("practical7.txt")
counts=dict()
words=line.split()
counts[word]=counts.get(word,0)+1
print("counts",counts)
TEXT FILE:-
The Indian Army is the land-based branch and the largest component of Indian Armed
Forces. The President of India is the Supreme Commander of the Indian Army, and it is
commanded by the Chief of Army Staff (COAS), who is a four-star general. Two officers
have been conferred with the rank of field marshal,a five-star rank, which is a ceremonial
position of great honour. The Indian Army originated from the armies of the East India
Company, which eventually became the British Indian Army, and the armies of the princely
states, which finally became the national army after independence.
ROLL NO.-87175101
OUTPUT:-
FOR LOOP:-
WHILE LOOP:-
ROLL NO.-87175101
PRACTICAL:-8
AIM:- Write the program for using JavaScript by using for – loops
(through a block of code a number of times), for/in - loops (through the
properties of an object), while - loops (through a block of code while a
specified condition is true), do/while - loops (through a block of code while
a specified condition is true).
<html>
<head><title>javascripts loops</title>
<script type="text/javascript">
for(i=1;i<=3;i++){
i=1;
while(i<=3){
i++;
i=1;
do {
i++;
while(i<=3);
ROLL NO.-87175101
DO WHILE LOOP:-
MAIN PAGE:-
ROLL NO.-87175101
</script>
</head>
</body>
</html>
ROLL NO.-87175101
OUTPUT:-
ROLL NO.-87175101
PRACTICAL:-9
AIM:- Write a program in Java Script for the following:
a).Copying, passing, and comparing by value
b).Copying, passing, and comparing by reference
c).References themselves are passed by value
<html>
<head><title>javascripts passing</title>
<script type="text/javascript">
function Clobber(param)
{
param=new Object();
param.message="this will not work";
}
function Update(param)
{
param.message="I was changed";
}
var obj=new Object();
obj.message="this is original";
Clobber(obj);
window.alert(obj.message) ; //still displays "this is original"
Update(obj);
window.alert(obj.message); //displays "i was changed"
</script>
</head>
<body style="background-color:powderblue;font-family:Corier;text-align:centre">
<h1>copying , passing and computing in javascript</h1>
<div style="fint-size:20px;color:blue;font-family:Courier">
<h2>By Value vs. by reference</h2>
ROLL NO.-87175101
ROLL NO.-87175101
numbers and boolean values (true & false) are occupied, passed and compared by value.
When you copy or pass by value you allocate a space in a computer and copy the value of the
original into it. Of you then change the original. Copy is not affected because the two are
separate entities.
objects, array and functions are copied, passed and compared by reference. When you copy
or pass by reference, you essentially create a pointer as if it were a copy. If you change the
original, you change both the original and the coy it's just another reference to the data.
When comparing by reference the two variables must refer to exactly the same entity for the
comparision to succeed. for example, two distinct array objects been always compare as
unequal, even if they contain the same elements. One of the variables must be a reference to
the other one for the comparision to succeed. To check if two arrays hold the same elements,
compare the results of the tostring() method.
last, strings are copied and passed by reference, but are compared by value. note that if you
two string objects(created with new sting("something"))
They are compared by reference, but if one or both of the values is a string value, they are
compared by value.
<h2>passing parameters to functions</h2>
When you pass a parameter to a function by value, you are making a seperate copy of that
parameter, a copy that exist only inside the function. Even though objects and arrays are
passed by reference, if you directly overwrite them with a new value in the function, the
value is not reflected outside the function. Only change to properties of objects, or elements
of arrays, are visible outside the function.
</div>
</body>
</html>
ROLL NO.-87175101
OUTPUT:-
ON ENTERING NO VALUE:-
ROLL NO.-87175101
PRACTICAL:-10
AIM:- Incorporate a quest book into the Diary Food Webpage and use
Java Script to build validations into the form.
<html>
<head>
<title>
validator
</title>
<body>
<form action="" method="post">
<input type="text"name="name" placeholder="Enter your name">
<textarea cols="20" rows="3" placeholder="message" id="message"></textarea>
<input type="submit" name="submit" value="send" onclick="fun();">
</form>
</body>
<script type="text/javascript">
function fun()
{
var mess=document.getElementById("message").value;
if(mess=="")
{
alert("dont leave empty");
}
}
</script>
</html>
ROLL NO.-87175101