WEB TECHNOLOGY LAB FILE
Atharva Waghdhare
TYBCA
70
INDEX
[Link] Title Page no
Unit 1 Introduction to Web 3 - 10
Technology
Unit 2 Client-Side Scripting 11 - 37
Unit 3 Extensible Markup Language 38 - 42
Unit 4 Client-Side Web Framework 43 - 49
Unit 5 Server-Side Scripting 50 - 72
Unit 6 Server-Side Web Framework 73 - 76
Unit 7 Web Hosting and Security 77 - 91
Introduction to Web Technology
1. Introduction to Web Technology
1. WorldWideWeb
• The first web browser ever
• Launched in 1990
• It was later named “Nexus” to avoid any confusion
with the World Wide Web
• Had the very basic features and less interactive
in terms of graphical interface
• Did not have the feature of bookmark
2. Mosaic
• It was launched in 1993
• The second web browser which was launched
• Had a better graphical interface. Images, text and
graphics could all be integrated
• It was developed at the National Center for
Supercomputing Applications
• The team which was responsible for creating Mosaic
was lead by Marc Andreessen
• It was named “the world’s first popular browser”
3. Netscape Navigator
• It was released in 1994
• In the 1990s, it was the dominant browser in
terms of usage share
• More versions of this browser were launched
by Netscape
• It had an advanced licensing scheme and allowed
free usage for non-commercial purposes
4. Internet Explorer
• It was launched in 1995 by Microsoft
• By 2003, it has attained almost 95% of usage
share and had become the most popular
browsers of all
• Close to 10 versions of Internet Explorer were
released by Microsoft and were updated
gradually
• It was included in the Microsoft Windows
operating system
• In 2015, it was replaced with “Microsoft”, as it
became thedefault browser on Edge Windows 10
5. Firefox
• It was introduced in 2002 and was developed
by Mozilla Foundation
• Firefox overtook the usage share from Internet
Explorer and became the dominant browser
during 2003-04
• Location-aware browsing was made available
with Firefox
• This browser was also made available for mobile
phones, tablets, etc.
6. Google Chrome
• It was launched in 2008 by Google
• It is a cross-platform web browser
• Multiple features from old browsers were
amalgamated to form better and newer features
• To save computers from malware, Google
developed the ad-blocking feature to keep the
user data safe and secure
• Incognito mode is provided where private
searching is available where no cookies or history is
saved
• Till date, it has the best user interface
Unit 2
Client-Side Scripting
Client-side scripting simply means running scripts, such as JavaScript,
on the client device, usually within a browser. All kinds of scripts can
run on the client side if they are written in JavaScript, because
JavaScript is universally supported.
[Link]
<html>
<head>
<script>
let gcdd =function(a,b){
if(b==0){
return a;
}
return gcdd(b,a%b);
function gcd(){
let num1=parseInt(prompt("Enter number 1"));
let num2=parseInt(prompt("Enter number 2"));
let res=gcdd(num1,num2);
alert("the gcd of "+num1+" and "+num2+" numbers is: "+res);
</script>
<head>
<body>
<button onclick="gcd()">check</button>
</body>
</html>
OUTPUT
2. Linear Search
<html>
<head>
<title>Linear Search</title>
</head>
<script type="text/javascript">
function LinearSearch(){
var arr,size,target;
size=parseInt(prompt("Enter the size of the array:"));
arr=new Array(size);
var flag=0;
for(var i=0;i<[Link];i++){
arr[i]=prompt("Enter the elements:");
}
target=parseInt(prompt("Enter the element to be searched:"));
for(var i=0;i<[Link];i++){
if(target==arr[i])
{
flag=1
break;
}
}
if(flag==1){
alert(target+" found at position " +i);
}
else{
alert(target+"not found");
}
}
</script>
<body>
<h1>Linear Search</h1>
<p>Click the button to search for an element in the array and see if it is present</p>
<hr color="green">
<br>
<button onclick="LinearSearch()" id="LinearSearcher">Search</button>
</body>
</html>
OUTPUT
[Link] NUMBER
<html>
<head>
<script>
let n=parseInt(prompt("Enter the number"));
let flag=true;
for(let i=2;i<n;i++){
if(n%i==0){
flag=false;
}
if(flag==true){
alert("its prime number");
}
else{
alert("its not prime number");
}
</script>
<head>
<body>
</body>
</html>
OUTPUT
[Link] LARGEST NUMBER
<html>
<head>
<title>2nd Largest number in an array</title>
</head>
<script type="text/javascript">
function secLargeno()
{
var size=parseInt(prompt("Enter the no of elements in the array:"));
var arr=new Array(size);
for(var i=0;i<[Link];i++)
{
arr[i]=parseInt(prompt("Enter the elements of the array:"));
}
var biggest=arr[0];
var nextbiggest=arr[0];
for(var i=0;i<[Link];i++)
{
if(arr[i]>biggest)
nextbiggest=biggest;
biggest=arr[i];
}
else if(arr[i]>nextbiggest && arr[i]!=biggest)
{
nextbiggest=arr[i];
}
}
alert("The array is:"+arr+"\nThe second largest element in it is:"+nextbiggest);
}
</script>
<body>
<h1>2nd Largest Number in the array</h1>
<p>Click the below button to get the 2nd largest number in the array</p>
<center><button onclick="secLargeno()">Check 2nd Largest no</button></center>
</body>
</html>
OUTPUT
[Link] TAG
<html>
<head>
<script>
</script>
</head>
<body>
<h2>video</h2>
<video width="320" height="240" controls>
<source src="ocean.mp4" type="video/ogg">
<source src="ocean.mp4" type="video/mp4">
your file doesnot support
</video>
</body>
</html>
OUTPUT
[Link] TAG
<html>
<head>
</head>
<body>
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="turtle.mp3" type="video/mp3">
Your audio does not support
</audio>
</body>
</head>
OUTPUT
[Link] EVENT
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function setNewImg(){
[Link]("x").src="[Link]";
}
function setOldImg(){
[Link]("x").src="[Link]";
}
</script>
</head>
<body>
<img id="x" src="" height="300px" width="330px"
onmouseover="setNewImg()" onmouseout="setOldImg()">
</body>
</html>
OUTPUT
ONMOUSEOVER
ONMOUSEOUT
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Calculator</title>
<script>
function sub(){
var x=[Link]("num1").value;
var y=[Link]("num2").value;
var z=x-y;
[Link]("result").value=z;
}
function multi(){
var x=[Link]("num1").value;
var y=[Link]("num2").value;
var z=x*y;
[Link]("result").value=z;
}
function div(){
var x=[Link]("num1").value;
var y=[Link]("num2").value;
var z=x/y;
[Link]("result").value=z;
}
function add(){
var x=[Link]("num1").value;
var y=[Link]("num2").value;
var z=x+y;
[Link]("result").value=z;
}
</script>
</head>
<body>
<input type="text" id="num1" placeholder="Enter first
number">
<input type="text" id="num2" placeholder="Enter Second
number">
<button id="sub" onclick="sub()">-</button>
<button id="multi" onclick="multi()">*</button>
<button id="div" onclick="div()">/</button>
<button id="add" onclick="add()">+</button>
<input type="text" id="result">
</body>
</html>
OUTPUT
9.
<html>
<head>
<script type="text/javascript">
function styleChange()
{
var para=[Link]("pt");
for(var i=0;i<[Link];i++)
{
para[i].[Link]=24;
para[i].[Link]="bold";
para[i].[Link]="italic";
}
</script>
</head>
<body bgcolor="black">
<p class="a" style="color: tomato;">hiii</p>
<p class="pt" style="color: tomato;">hello</p>
<p class="a" style="color: tomato;">vegan</p>
<p class="pt" style="color: tomato;">vaishnavi</p>
<p class="pt" style="color: tomato;">good</p>
<button onclick="styleChange()"
name="submit">Submit</button>
</body>
</html>
OUTPUT
10.
<!DOCTYPE html>
<html>
<head>
<title>ID TAG</title>
<script type="text/javascript">
function buttonClick(){
[Link]("pt").innerHTML="HII VEGAN";
}
</script>
</head>
<body>
<button onclick="buttonClick()">on click</button>
<!-- <p id="a">hiii vaishnavi</p> -->
<h1 id="pt">hii</h1>
</body>
</html>
OUTPUT
11.
<html>
<head>
<script type="text/javascript">
function styleChange()
{
var para=[Link]("p");
for(var i=0;i<[Link];i++)
{
para[i].[Link]=24;
para[i].[Link]="bold";
para[i].[Link]="italic";
}
</script>
</head>
<body bgcolor="black">
<p style="color: tomato;">hiii</p>
<p style="color: tomato;">hello</p>
<p style="color: tomato;">vegan</p>
<p style="color: tomato;">vaishnavi</p>
<p style="color: tomato;">good</p>
<button onclick="styleChange()" name="submit">Submit</button>
</body>
</html>
OUTPUT
[Link] FORM VALIDATION
<html>
<head>
<style>
form{
height:100%;
width:100%;
background-color:skyblue;
text-align:center;
padding:1rem;
}
</style>
<script>
function validateform(){
var x=[Link];
if(x==null || x=="")
{
alert("First name must be filled out")
return false;
}
var y=[Link];
if(y==null || y=="")
{
alert("Last name must be filled out")
return false;
}
if( [Link] == "" ||
isNaN( [Link] ) ||
[Link] != 5 )
{
alert( "Please provide a zip in the format #####." );
[Link]() ;
return false;
}
var emailID = [Link];
atpos = [Link]("@");
dotpos = [Link](".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
[Link]() ;
return false;
}
}
</script>
</head>
<body>
<form onsubmit="return validateform()" name="myForm">
<h1>Registration Form</h1>
<div>
<label for="fname" >First Name</label>
<input type="text" id="fname">
</div>
<br>
<div>
<label for="lname" >Last Name</label>
<input type="text" id="lname" >
</div>
<br>
<div>
<label id="gender" name="gender" >Gender: </label>
Female
<input type="radio" name="gender">
Male
<input type="radio" name="gender">
Others
<input type="radio" name="gender">
</div>
<div>
<label for="zip" >Zip</label>
<input type="text" id="zip" name="number" >
</div>
<br>
<div>
<label for="email" >Email</label>
<input type="email" id="email" >
</div>
<br>
<div>
<label for="password" >Password</label>
<input type="password" id="password">
</div>
<br>
<div>
<button>Submit</button>
</div>
</form>
</body>
</html>
OUTPUT
[Link] FORMULA
<html>
<head>
<script>
function calculate(){
let x,y,z;
x=Number([Link]);
y=Number([Link]);
z=x+y;
[Link]=z;
}
</script>
<head>
<body>
<form name="form">
<input id="x" type="text" placeholder="enter x" name="txt1">
<br><br>
<input id="y"type="text" placeholder="enter y" name="txt2">
<br><br>
<input type="button" onClick="calculate()" value="calculate">
<br><br>
<input id="result"type="text" placeholder="result" name="txtz">
<br><br>
</form>
</body>
</html>
OUTPUT