Scribd
Upload
10 views15 pages

WT Practical

Uploaded by

Kathan Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views15 pages

WT Practical

Uploaded by

Kathan Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Laboratory

Cotents
Experiment1 : Write codes to create a web page using the
following tags :
a) Text b) Marquee c) Character formatting tags such as
B, I, U. .........-2
Experiment2 : Write codes to create a web page using font ex-2
color. font face, font size
and background color. .L -3
Experiment 3 : Write codes to create a web page using paragraph
tags such as P tag
and BR tag. .L -3
Experiment4 : Write codes to create a web page using nesting of lists. ....L - 4
Experiment 5 : Write codes to create a web page using table tags
a) Create atable of 3. rows and columns.
b) Having border, border size, border-color
c) Insert an image in aparticular cell. ... L-5
Experiment 6 : Write codes to create a web page using the form tag.
Example:- Admissionform. ... L-6
Experiment 7 : Create a JavaScript code to display any message.. ...L - 8
Experiment 8 : Create a JavaScript code using control statements. .L -9
Experiment 9 : Create a JavaScript code using an arithmetic operator, assignment operator,
comparison operator, logical operator and string operator..... .L- 10
Experiment 10: Create a JavaScript code to display 5 *1 =55 *2 = 10.. 5 *10 =50 using
for loop'. .L - 11
Experiment 11 : Create a JavaScript code using the user defined function, which will calculate
the area of a circle ... L - 12
Experiment 12: Write a JavaScript code to change the Web Page's background color. L - 13
Experiment 13: Write a JavaScript code to display the factorial of thegiven number....L- 14

(L- 1)
L-2
Fundamentals of Web Technology
Laboratory
Free Download Softcopy of All Lab
Programns using this QR Code

Tollowing tags : a) Tovt


Experiment 1: Write codes to create a web page using the
tags such as B, I, U.
b) Marquee c) Character formatting
Solution:
<IDOCTYPE- html>
<head>
<title> Experiment Number 1</title>
</head>
<body>
and text formatting tags(such as B.I and
<h4> This webpage demonstrates the text tag, marquee
U)</h4>
<p> This line is displayed using text tag</p>
marquee tag</marquee>
<marquee direction="left" loop=""> This text is displayed using
<b>This text is displayed in bold</b>
<i>This text is displayed in Italics </i>
<u>This text is displayed as underlined</u>
</body>
</html>
Output

Experiment Number 1 + X
X

A
OFile E:/Manuscript/Auton..
All Bookmarks

This webpage demonstrates the text tag, marquee and text formatting
tags(such as B,I and U)

This line is displayed using text tag


This test is displayed using marquee tag
This text is displayed in bold This text is displayed in Italics This text is
displayed as underlined

TECHNICAL PUBLICATIONS- an up-thrust for knowiedge


Fundamentals of Web Technology
L-3
Experiment 2: Write codes to create a web Laboratory
font size and background color
page using font ex-2 color, font face,
Solution:
<IDOCTYPE html>
<html>
<body>
<pstyle="color:red'> This text is in red color.</p>
<pstyle="font-family:verdana"">This text is
<pstyle="font-size:30px" >This text is biggerdisplayed
in 'verdana'
in size. </p> font.</p>
<h3 style="background-color:
lightblue;">This text is with alight blue
<(body> background.</h3
</btml>
Output
Exp2.htmi
X

OFile E:/Manuscript/Auton.. A

All Bookmarks

This text is in red color.

This text is displayed in 'verdana' font.

This text is bigger in size.


This text is with a light blue background.

Experiment 3 : Write codes to create a web page using paragraph tags such as P
tag and BR tag.
Solution:
<!DOCTYPE html>
<html>
<head>
<title> Experiment No. 3 </title>
<body>
TECHNICAL PUBLICATIONs- an up-thrust for knowledge
Fundamentals of Web Technology L-4
Laboratory
<b>Dr. A.P.J. Abdul Kalam </b>
<br/>
<p>
th
Dr. APJ Abdul Kalanm, a space scientist was born on 15" October 1931 in Rameswaram,
th
Tamil Nadu. From selling newspaper at a young age to becoming 1 President of India,
Dr. Kalam's life has been truly inspirational. His association with ndia's space and missile
development program earned him the name "Missile Man".
Dr. Kalam was sworn in as 1I"th President of India on 25 July 2002. He was called the
"People's President" because of his simplicity and his popularity cut across all age groups.
</p>
</body>
</html>
Output

Experiment No. 3 X + X

File E:/Manuscript/Autono..
AlI Bookmarks

Dr. A.P.J. Abdul Kalam

Dr.APJAbdul Kalam, a space scientist was born on 15 October 1931 in Rameswaram.


Tamil Nadu. From selling Newspaper at ayoung age to becoming llth President of
India. Dr. Kalam's life has been truly inspirational. His association with India's space and
missile development program earned bim the name "Missile Man" Dr. Kalamn was sworn
in as llth President of Indiaon 25th July 2002. He was called the "People's President"
because of his simplicity, and his popularity cut across all age groups.

Experiment 4 : Write codes to create a web page using nesting of lists.


Solution :
<IDOCTYPE html>
<html>
<head>
<title> Experiment No.4 </title>
</head>
<body>
<h4> Ordered List within Unordered List</h4>
<ul type="disc">

TECHNICAL-PUBLICATIONS -an up-thrust for knowledge


Fundamentalsof Web Technology L-5
ci>Operating Systems
Laboratory
<ol type="A"
<li>Windows </i>
<li>Linux</li>
</ol>
</li>
Ci> Computer Science
Subjects
<ol type="I>
<i>Operating system</i>
<li>Web Programming</i>
</ol>
</i>
</ul>
</body>
<html>
Output

Experiment No.4 + X
|
File
E:/Manuscript/Auton... (A

o All Bookmarks

Ordered List within Unordered List

Operating Systems
A. Windows
B. Linux
" Computer Science Subjects
I. Operating system
II Web Programming

> Experiment 5 : Write codes to create a web page using table tags
a) Createa table of 3 rows and columns.
b) Having border, border size, border-color.
c) Insert an image in a particular cell.
Solution :
<DOCTYPE html>
<html>
<head>

TECHNICAL PUBLICATIONS®- an up-thrust for knowiedge


Fundamentals of Web Technology L-6

<title> Experiment No. 5 </title>


Laboratory
</head>
<body>
<table border="2" bordercolor='red">
<tr
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td> D </td>
<td><img src="bird.png'/></td>
<td> E </td>
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
</body>
<{html>
Output

Experiment No. 5 X X

A
OFile E/Manuscript/...
AlI Bookmarks

AB

H
|FG

Experiment 6 :Write codes to create a web page using the form tag.
Example:- Admission form.

TECHNICAL PUBLICATIONS- an up-thrust for knowledge


Fundametalsof Web Technology
L-7
Solution
: Laboratory
<IDOCTYPEhtml>
<html>

<head>
>Experiment:
<title> No. 6</title>
</head>
cbodybgcolor="khaki'
<center><h3> Admission Form </h3><
</center>
<form>

cstrong>Name: </strong>
=text name =name><br/
<input type=

cstrong>Age: </strong>
<inputtype=text name=Age txt><br/>

cstrong>Phone No:</strong>
sinput type=text name=ph txt> <br/>

<strong> Email: </strong>


dinput type=text name=Email txt><br/><hr/

<strong> Sex: </strong>


cinput type="radio" name'group1" value="Male'>Male
enut tpe="radio" name="group1"
value="Female'>Female <br/><br/><br/>
<strong>Documents Submitted: </strong>
<br/>
innut type='checkbox" name ="option1" value="10th
Marks-sheet>10th Marks-sheet<br/>
innut tvpe="checkbox' name ='option1" value="12th
Marks-sheet'>12th Marks-sheet<br/>
cinput type="checkbox" name ="option1" value="CET Score Card'>CET SCore
Card<br/>
cinput type='checkbox name ='option1" value="Identity Proof>Identity Proof<br/>
<input type="checkbox" name ="option1" value="Address Proof'> Address Proof<br/>

<br/> <br/>
<strong>Select Course:</strong>
<select name="My Menu">
<option value='Comnputer Engineering'>Computer Engineering </option>
<option value="Mechanical Engineering'> Mechanical Engineering</option>
<option value ='Electrical Engineering'> Electrical Engineering</option>
</select>
<center>
<br/>
<input type=submit value=Submit></br>
</center>
</body>
</html>

TECHNICAL PUBLICATIONS-an up-thrust for knowledge


L-8
Fundamentals of Web Technology
Output Laboratory
X
S Experiment No. 6

E:/Manuscript/Autonomous_GTU. * A
O File
All Bookmarks

Admission Form

Name:
Age:
Phone No:
Email:

Sex: O Male O Female

Documents Submitted:
O10th Marks-sheet
D12th Marks-sheet
OCET Score Card
OIdentity Proof
OAddress Proof

Select Course:Computer Engineering


Submit

Experiment 7: Create a JavaScript code to display any message.


Solution:
<IDOCTYPE html>
<html>
<head>
<title>Experiment no. 7</title>
</head>
<body>
<script>
alert('Good Morning!");
</script>
</body>
</html>

TECHNICAL PUBLICATIONS- an up-thrust for knowledge


Aundamentalsof Web Technology L -9
Loboratory
Output
Experiment no. 7 X

OFle E/Manuscript/Autonomous_GTU. A

This page says | AllBookmark:

Good Morning!

OK

Experiment 8: Create a JavaScript code using control statements.


Solution:
IFstatement:
<IDOCTYPE html>
<html>
<head>
ctitle>If else Demo </title>
</head>
<body>
<script type='text/javascript'>
var a,b,c;
a=10;b=20;c=30;
ifla>b)

i(a>c)
document.write("<h3>a is largest number </h3>"):
else
document.write('<h3>cis largest number</h3>"):
}
else

if(b>c)
document. write("<h3>b is largest number</h3>");
else
document.write("<h3>c is largest number</h3>");
}
</script>

TECHNICAL PUBLICATIONS- an up-thrust for knowledge


Fundamentals of Web Technology
L-10
Laboratory
</body>
</html>
Do while Statement
<!DOCTYPE html>
<html>
<head>
<title> Do-while Demo </title>
</head>
<body>
<script type="text/javascript">
counter=1;
do

"+counter);
document.write("This statement number:
document. write("<br>");
Counter++;
}while(counter< =5):
</script>
</body>
</html>
arithmetic operator, assignment
Experiment 9: Create a JavaScript code using an
operator and string operator.
operator, comparisonoperator, logical
Solution :
<!DOCTYPE html>
<html>
<head>
<title>Experiment no. 9 </title>
</head>
<body>
and String Operator </h3>
<h3> Demonstration of Arithmetic, Assigment,logical,
<script>
I|Arithmetic Operator: Addition
let a = 10;
let b = 20;
let sum =a + b:
another variable
/Assignment Operator: Assigning the value of sum to
let result = sum;
100
I/Comparison Operator: Checking if result is greater than
let c = result > 100;
I/ Logical Operator: Logical AND
let logicalCheck =c && (b> 0);
I/ String Operator: Concatenation
let str1 = "Hello":
let str2 = "Friend';

TECHNICAL PUBLICATIONS®- an up-thrust for knowledge


sof
Fundamentals Web Technology L-11
Laboratony
str2 + "y"
str1 +"
str3
let

document.
.write('sum: "+sum);
document.
"<br>");
write("
.
document..wwrite("Result:""+result);:
document. write("<brs").

document.
writel('Is Greater Than Hundred:"-+c);
document.write("<br>").
document.write("Logical Check:"+logicalCheck):
document. write("<br>"):
document.write(("String Operation:"+str3);
</script>
<body>
</html>
Output

S Experiment no. 9

G O File E:/Manuscript/Auto... t A

All Bookmarks

Demonstration of Arithmetic, Assigment,logical, and String Operator


sum: 30
Result:30
Is Greater Than Hundred:false
Logical Check:false
String Operation:Hello. Friend!

} Experiment 10: Create a JavaScript code to display 5* 1=55*2=10... 5* 10 =50


using for loop:.
Solution :
<!DOCTYPE html>
<html>
<head>
<title> Experiment No.10</title>
</head>
<body>

TECHNICAL PUBLICATIONS -an up-thrust for knowledge


L-12
Fundamentals of Web Technology

<script>
for (i=1; i<=10; it+)
Laborator
document,write("5 *"+i+"= "+(5*i)+"<br/>";

</script>
</table>
</body>
</html>
Output

Experiment No.10 X +
X

O File E:/Manuscript/Auton.. t A

All Bookmarks

5 * =5
5*2= 10
5*3= 15
5 * 4=20
5*5= 25
5*6=30
5*7=35
5 * 8= 40
5 *9=45
5 * 10= 50

Experiment 11 : Create a JavaScript code using the user defined function, which
will calculate the area of a circle.
Solution:
<!DOCTYPE html>
<html>
<head>
<script>
function myfunction(radius)

const area = Math.PI * Math.pow(radius, 2):


return area;

TECHNICAL PUBLICATIONS- an up-thrust for knowledge


c of
Fndametals Web Technology L- 13
Laboratory
</script>

<Mead>
<body>
<Script
constr10:
ocument. write("The area of
circle of radius 10 is
</script>
="+myfunction(r)):
<pody>
</html>
Output
Exp11.htnl

File E/Manuscript/Auton... * A

All Bookmarks

The area of circle of radius 10 is - 314.1592653589793

Experiment 12 : Write a JavaScript code to change the Web Page's background


color.
Solution :
<!DOCTYPE html>
<html>
<head>
<title> Experiment 12</title>
<script language="javascript">
function displayred()

document.body.style.background Color ='red';

TECHNICAL PUBLICATIONS- an up-thrust for knowledge


L- 14
Fundamentals of Web Technology
function displaygreen() Laboratory
document.body.style.backgroundColor ="green";

</script>
</head>
<body>
<h3> Click the buttons to change the background </h3>
<form>
onclick="displayred()"7>
<nput type="button" value="Change to RED'
<br/><br/>
onclick='displaygreen()"/>
<nput type="button" value="change to GREEN"
</form>
</body>
</html>
Output

X + X
Experiment 12
A
O File E/Manuscript/Auton...

AlI Bookmarks

Click the buttons to change the background


Change to RED

change to GREEN

Experiment 13 : Write a JavaScript code to display the factorial of the given


number.
Solution:
<!DOCTYPE html>
<html>
<head>
<title>Experiment No.13</title>
<script>
function factorial(n) {

TECHNICAL PUBLICATIONs- an up-thrust for knowledge


Fundamentals of Web Technology L- 15
Laboratory
{
if(n=== 0)
return 1:

}
else
return n * factorial( n - 1 ):

</script>
</head>
<body>
en>Factorial of number 5 is... </p>
<Script>
let n 5;
document. write(factorial(n));
</script>
</body>
</btml>
Output

Experiment 13

O File E/Manuscript/Auton. A

All Bookmarks

Factorial of number 5 is...

120

TECHNICÁL PUBLICATIONS- an up-thrust for knowiedge

You might also like