IU2041230102 CS - Batch-1 Bhavin Patel
Lab File
Expiment 1.1: Explain Introduction to Web 3.0, website, web portal, domain name,
networking concepts.Introduction to internet, hosting of website, server configuration
and maintenance.
Solution : -
Web 3.0 is being referred to by experts as the semantic web; semantic meaning data driven.
The data will come from the user and the web will essentially adjust to meet the needs of the
user. For example, if you do a lot of searching for ‘design blogs’, you’ll receive more
advertisements related to design.
Also, when you search for other things, for example, ‘computers’, the web will keep in
mind that you often search for design and may pull up search queries that combine ‘design’
and ‘computers’.
Website :
A website is a collection of static files(webpages) such as HTML pages, images, graphics
etc.
A Web application is a web site with dynamic functionality on the server. Google,
Facebook, Twitter are examples of web applications.
Web Portal :
A portal is a web-based platform that collects information from different sources into a
single user interface and presents users with the most relevant information for their context.
Over time, simple web portals have evolved into portal platforms that support digital
customer experience initiatives.
Domain Name :
To find the location on the Internet easily, DNS was invented. DNS stands for Domain
Name Server. It implements a distributed database which translates IP address into a unique
alphanumeric address which is referred to as Domain Names.
Basically, a domain name is the sequence of letters and or numbers separated by one or
more period (“.”). It is just like a pointer to a unique IP address on the computer network. As
an analogy one can consider Domain name as address and DNS as address book of the
Internet.
Networking Concepts :
Computer networking has existed for many years, and as time has passed the technologies
have become faster and less expensive. Networks are made up of various devices—
computers, switches, routers—connected together by cables or wireless signals.
Understanding the basics of how networks are put together is an important step in building
a wireless network in a community or neighbourhood.
Internet :
The Internet is a global network of billions of computers and other electronic devices. With
the Internet, it's possible to access almost any information, communicate with anyone else in
1
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
the world, and do much more. You can do all of this by connecting a computer to the Internet,
which is also called going online. When someone says a computer is online, it's just another
way of saying it's connected to the Internet.
Website Hosting :
Web hosting is a service of providing online space for storage of web pages. These web
pages are made available via World Wide Web. The companies which offer website hosting
are known as Web hosts.
The servers on which web site is hosted remain switched on 24 x7. These servers are run by
web hosting companies. Each server has its own IP address.
Since IP addresses are difficult to remember therefore, webmaster points their domain
name to the IP address of the server their website is stored on. It is not possible to host your
website on your local computer, to do so you would have to leave your computer on 24 hours
a day.
This is not practical and cheaper as well. This is where web hosting companies comes in.
Server Configurations :
Server network configuration tasks include enabling protocols, modifying the port or pipe
used by a protocol, configuring encryption, configuring the SQL Server Browser service,
exposing or hiding the SQL Server Database Engine on the network, and registering the
Server Principal Name.
Most of the time, you do not have to change the server network configuration. Only
reconfigure the server network protocols if special network requirements.
Network configuration for SQL Server is done using SQL Server Configuration Manager.
For earlier versions of SQL Server, use the Server Network Utility that ships with those
products.
Server maintenance :
Server maintenance is process of keeping a server software updated and running so that a
computer network can operate smoothly and avoid downtime or loss of data. Regular
maintenance will keep the server running as expected and will help avoid a total or partial
network failure.
It includes tasks like reviewing the server’s performance, ensuring that automated system
monitoring utilities are properly installed and configured, identifying potential security risks
and backing up data at regular intervals.
Server Maintenance Generally Requires The Following:
• checking server log files
• assessing hard disk space
• examining folder permissions
• monitoring network temperature applications
• ensuring adequate redundancy of systems
• examining security features
• installing security software patches
• reading server logs for security alerts or evidence of computer hacking attempts
• updating antivirus software on all computers on the network
2
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
• updating critical service packs and software updates
Experiment 1.2: Create a website layout using table structure which consist of
space/locations for Logo, Search, News, Events, Content area, etc
3
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website-Grid IU2041230093</title>
</head>
<body style="background-color:#e4e4e4">
<table width="800" height="1000" align="center" border="1" cellspacing="0"
cellpadding="0" style="background-color:white">
<tr>
<td>
<table width="100%" height="100%" border="1" cellspacing="0"
cellpadding="0">
<tr height="150px">
<td>
<table width="100%" height="100%" border="1" cellspacing="0"
cellpadding="0">
<tr>
<td><svg id="logo-35" width="50" height="39" viewBox="0 0 50 39"
fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.4992
2H37.5808L22.0816
24.9729H1L16.4992 2Z" class="ccompli1" fill="#007AFF"></path> <path
d="M17.4224
27.102L11.4192 36H33.5008L49 13.0271H32.7024L23.2064 27.102H17.4224Z"
class="ccustom" fill="#312ECB"></path> </svg>
</td>
</tr>
<tr height="50px">
<td>
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Home</td>
<td>About Us</td>
<td>Contact us</td>
<td>Portfolio</td>
<td>Our Clients</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
4
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<tr>
<td>
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="200px">Services we provide</td>
<td>Contract Details</td>
</tr>
</table>
</td>
</tr>
<tr height="150px"> <td>Foooter</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Output:
Experiment 1.3: Make resume with the help of Basic HTML Tags.
Input:
<!DOCTYPE html>
5
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<html>
<head>
<title>Resume</title>
<style>
.right{
background-color: #C9D1D3;
float:right;
padding: 20px;
position: relative;
}
.left{
background-color: #469bbc;
float:left;
padding: 20px;
position: absolute;
height: 100%;
width: 61%;
}
img{ height: 20%;
width: 15%;
border-radius: 15px;
margin-left: 10px;
padding: 0 10px 0 0;
}
.objective{ p
osition: relative;
float:right;
padding-top:none;
}
</style>
</head>
<body>
<div class="right">
<br>
<h2>CONTACT</h2>
<p>Mo.: 9426135199</p>
<p>Mail : [email protected]</p>
<br>
<br>
<br>
<h2>STRENGTHS</h2>
<p>Hard working, confident and patient</p>
<p>Highly motivated, determined and eager to learn new things</p>
<p>Ability to work as an individual as well as in groups</p>
<p>Leadership quality</p>
</div>
6
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<div class="left">
<h1 style="text-align: center; padding-top: 10px; float: top; text-decoration:
underline;">BHAVIN PATEL</h1>
<img src="profile.jpg">
<div class="objective">
<p style="font-size:large; text-align:left;"><i>Computer Engineering
student</i></p>
<p style="font-size:large; text-align:left;"><i>Indus University</i></p>
<p style="font-size:large; text-align:left;"><i>Tech Geek</i></p>
<h2>CAREER OBJECTIVE</h2>
<p>Excel and progress in my field through hardwork, perseverence and
learning from
the organization</p>
<p>Achieve expertism in my work</p>
</div>
<br>
<br>
<h2>TECHNICAL SKILLS </h2>
<p>Languages known : C, C++, SQL, Java, HTML-CSS</p>
<p>Currently Learning : Javascript and PHP</p>
<p>Certification in Front End Web Development, Udemy</p>
<p>Ongoing courses : Javascript </p>
<p>Ongoing project - Blog Website</p>
<p>Workshop - SAAS Technology - 2022</p>
</div>
</body>
</html>
Output:
Experiment 1.4 Write HTML code to display student registration form.
Input:
<!DOCTYPE html>
<html>
7
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<head>
<meta http-equiv="Content-type" content="text/html charset=iso-8859-1"/>
<title>Registration Page</title>
</head>
<body bgcolor="lightblue">
<form action="register.php" method="GET" enctype=" ">
<table width="500" border="0" cellspacing="2" cellpadding="5" align="center">
<tr>
<td colspan="2" align="center"><img src="indus logo.jpeg" alt="Indus
University" width="150" height="100">
</td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="name" placeholder="Enter Your Name"/></td>
</tr>
<tr>
<td>User ID</td>
<td><input type="text" name="uid" placeholder="Enter Your User ID"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd" placeholder="Enter Your
Password"/></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" name="cpwd" placeholder="Re enter Your
Password"/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="email" placeholder="Enter Your Email"/></td>
</tr>
<tr>
<td>Contact</td>
<td><input type="number" name="contact" size="10" placeholder="Contact
Number"/></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gen" value="male"/>Male
<input type="radio" name="gen" value="Female"/>Female
<input type="radio" name="gen" value="Other"/>Other</td>
</tr>
8
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<tr>
<td>Date Of Birth</td>
<td><input type="date" name="dob" placeholder="Enter Your Birth
date"/></td>
</tr>
<tr>
<td>Address</td>
<td><textarea cols="50" rows="3s" input type="text" name = "address"
placeholder = "Enter Your Address"></textarea></td>
</tr>
<tr>
<td>
<label for="country">Country</label></td>
<td><select id="country" name="country" class="form-control">
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and
<option value="India">India</option>
<option value="Viet Nam">Viet Nam</option>
<option value="Virgin Islands, British">Virgin Islands, British</option>
<option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
9
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</td>
</select></td>
</tr>
<tr>
<td>
<label for="state">State</label></td>
<td><select id="country-state" name="country-state">
<option value="AN">Andaman and Nicobar Islands</option>
<option value="AP">Andhra Pradesh</option>
<option value="AR">Arunachal Pradesh</option>
<option value="AS">Assam</option>
<option value="BR">Bihar</option>
<option value="CH">Chandigarh</option>
<option value="CT">Chhattisgarh</option>
<option value="DN">Dadra and Nagar Haveli</option>
<option value="DD">Daman and Diu</option>
<option value="DL">Delhi</option>
<option value="GA">Goa</option>
<option value="GJ">Gujarat</option>
<option value="HR">Haryana</option>
<option value="HP">Himachal Pradesh</option>
<option value="JK">Jammu and Kashmir</option>
<option value="JH">Jharkhand</option>
<option value="KA">Karnataka</option>
<option value="KL">Kerala</option>
<option value="LA">Ladakh</option>
<option value="LD">Lakshadweep</option>
<option value="MP">Madhya Pradesh</option>
<option value="MH">Maharashtra</option>
<option value="MN">Manipur</option>
<option value="ML">Meghalaya</option>
<option value="MZ">Mizoram</option>
<option value="NL">Nagaland</option>
<option value="OR">Odisha</option>
<option value="PY">Puducherry</option>
<option value="PB">Punjab</option>
<option value="RJ">Rajasthan</option>
<option value="SK">Sikkim</option>
<option value="TN">Tamil Nadu</option> <option
value="TG">Telangana</option>
<option value="TR">Tripura</option>
10
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<option value="UP">Uttar Pradesh</option>
<option value="UT">Uttarakhand</option>
<option value="WB">West Bengal</option></td>
</select> </td>
</tr>
<tr>
<td>
<label for="city">City</label></td>
<td><select id="city" name="city">
<option value="">Select City</option>
<option value="Abrama">Abrama</option>
<option value="Adalaj">Adalaj</option>
<option value="Ahmedabad">Ahmedabad</option>
<option value="Ahwa">Ahwa</option>
<option value="Amod">Amod</option>
<option value="Amreli">Amreli</option>
<option value="Amroli">Amroli</option>
<option value="Anand">Anand</option>
<option value="Anjar">Anjar</option>
<option value="Ankleshwar">Ankleshwar</option>
<option value="Babra">Babra</option>
<option value="Bagasara">Bagasara</option>
<option value="Bagasra">Bagasra</option>
<option value="Banas Kantha">Banas Kantha</option>
<option value="Bantva">Bantva</option>
<option value="Bardoli">Bardoli</option>
<option value="Bedi">Bedi</option>
<option value="Bhachau">Bhachau</option>
<option value="Bhanvad">Bhanvad</option>
<option value="Bharuch">Bharuch</option>
<option value="Bhavnagar">Bhavnagar</option>
<option value="Bhayavadar">Bhayavadar</option>
<option value="Bhuj">Bhuj</option>
<option value="Bilimora">Bilimora</option>
<option value="Bilkha">Bilkha</option>
<option value="Borsad">Borsad</option>
<option value="Botad">Botad</option>
<option value="Chaklasi">Chaklasi</option>
<option value="Chalala">Chalala</option>
<option value="Chanasma">Chanasma</option>
<option value="Chhala">Chhala</option>
<option value="Chhota Udepur">Chhota Udepur</option>
<option value="Chikhli">Chikhli</option>
<option value="Chotila">Chotila</option>
<option value="Dabhoi">Dabhoi</option>
<option value="Dahegam">Dahegam</option>
11
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<option value="Dahod">Dahod</option>
<option value="Dakor">Dakor</option>
<option value="Damnagar">Damnagar</option>
<option value="Dangs (India)">Dangs (India)</option>
<option value="Dayapar">Dayapar</option>
<option value="Delvada">Delvada</option>
<option value="Delwada">Delwada</option>
<option value="Devbhumi Dwarka">Devbhumi Dwarka</option>
<option value="Devgadh Bariya">Devgadh Bariya</option>
<option value="Dhandhuka">Dhandhuka</option>
<option value="Dhanera">Dhanera</option>
<option value="Dharampur">Dharampur</option>
<option value="Dhari">Dhari</option>
<option value="Dhola">Dhola</option>
<option value="Dholka">Dholka</option>
<option value="Dhoraji">Dhoraji</option>
<option value="Dhrangadhra">Dhrangadhra</option>
<option value="Dhrol">Dhrol</option>
<option value="Dhuwaran">Dhuwaran</option>
<option value="Disa">Disa</option>
<option value="Dohad">Dohad</option>
<option value="Dungarpur">Dungarpur</option>
<option value="Dwarka">Dwarka</option>
<option value="Patan">Patan</option>
<option value="Pavi Jetpur">Pavi Jetpur</option>
<option value="Petlad">Petlad</option>
<option value="Porbandar">Porbandar</option>
<option value="Radhanpur">Radhanpur</option>
<option value="Rajkot">Rajkot</option>
<option value="Ranavav">Ranavav</option>
<option value="Rapar">Rapar</option>
<option value="Roha">Roha</option>
<option value="Sabar Kantha">Sabar Kantha</option>
<option value="Sachin">Sachin</option>
<option value="Salaya">Salaya</option>
<option value="Sanand">Sanand</option>
<option value="Sankheda">Sankheda</option>
<option value="Sarkhej">Sarkhej</option>
<option value="Savarkundla">Savarkundla</option>
<option value="Sayla">Sayla</option>
<option value="Shahpur">Shahpur</option>
<option value="Shivrajpur">Shivrajpur</option>
<option value="Siddhpur">Siddhpur</option>
<option value="Sihor">Sihor</option>
<option value="Sikka">Sikka</option>
<option value="Sinor">Sinor</option>
12
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<option value="Sojitra">Sojitra</option>
<option value="Songadh">Songadh</option>
<option value="Surat">Surat</option>
</td>
</select></td>
</tr>
<tr>
<td>Zip Code</td>
<td><input type="number" name="zip" placeholder="Zip Code"/></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Register"/></td>
<td><input type="reset" name="reset" value="Clear"/></td>
</tr>
</table>
</body>
</html>
Output:
Experiment 2.1: Use CSS in resume which was made using only HTML tags.
Input:
<!DOCTYPE html>
<html>
<head>
<title>Resume</title>
<style>
.right{
background-color: #C9D1D3;
13
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
float:right;
padding: 20px;
position: relative;
}
.left{
background-color: #469bbc;
float:left;
padding: 20px;
position: absolute;
height: 100%;
width: 61%;
}
img{ height: 20%;
width: 15%;
border-radius: 15px;
margin-left: 10px;
padding: 0 10px 0 0;
}
.objective{ p
osition: relative;
float:right;
padding-top:none;
}
</style>
</head>
<body>
<div class="right">
<br>
<h2>CONTACT</h2>
<p>Mo.: 9426135199</p>
<p>Mail : [email protected]</p>
<br>
<br>
<br>
<h2>STRENGTHS</h2>
<p>Hard working, confident and patient</p>
<p>Highly motivated, determined and eager to learn new things</p>
<p>Ability to work as an individual as well as in groups</p>
<p>Leadership quality</p>
</div>
<div class="left">
<h1 style="text-align: center; padding-top: 10px; float: top; text-decoration:
underline;">BHAVIN PATEL</h1>
<img src="profile.jpg">
<div class="objective">
14
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<p style="font-size:large; text-align:left;"><i>Computer Engineering
student</i></p>
<p style="font-size:large; text-align:left;"><i>Indus University</i></p>
<p style="font-size:large; text-align:left;"><i>Tech Geek</i></p>
<h2>CAREER OBJECTIVE</h2>
<p>Excel and progress in my field through hardwork, perseverence and
learning from
the organization</p>
<p>Achieve expertism in my work</p>
</div>
<br>
<br>
<h2>TECHNICAL SKILLS </h2>
<p>Languages known : C, C++, SQL, Java, HTML-CSS</p>
<p>Currently Learning : Javascript and PHP</p>
<p>Certification in Front End Web Development, Udemy</p>
<p>Ongoing courses : Javascript </p>
<p>Ongoing project - Blog Website</p>
<p>Workshop - SAAS Technology - 2022</p>
</div>
</body>
</html>
Output:
Experiment 2.2: Write the following styles in separate CSS file and also show how tolink
this CSS file in HTML file.
(a) The headings should have normal font style and
font size should be120%.
(b) Apply a background image “abcd.jpg”. Write a
paragraph about itand define a class arial for
paragraph which defines font family.
Source Code:
<!DOCTYPE HTML>
15
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<HTML lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raksha Bandhan</title>
<link rel="stylesheet" href="style.css">
<link href="href="https://fonts.googleapis.com/css?
family=Alex+Brush&family=Figtree:wght@500&family=Lat
o:ital@1&family=Noto+Sans:wght@300;900&family=Nunito&family=PT+Sans&family=U
buntu:wg ht@400;500&display=swap" rel="stylesheet">
</head>
<body>
<img src="https://tse3.mm.bing.net/th?
id=OIP.0hDn9HocAn1UdAVkygBa7QHaEK&pid=Api&P=0"
alt=""srcset="">
<div class="container">
<h1 class="header">Raksha Bandhan</h1>
<p id="para">
Raksha Bandhan (also Rakhi Purnima, Rakhi festival) is an ancient Indian festival.
It celebrates the bond of love and affection between a sister and a brother.
The festival is most common among the Hindus. However, it is also celebrated by
the Sikhs, Jains and other communities.
The sister ties a thread (known as Rakhi) on the wrist of his brother and marks a
tilak on his forehead. The brother promises to always protect his sister.
</p>
</div>
</body>
</HTML>
Style.css File:
body
{
font-family:'Ubantu',sans-serif;
background-repeat: no-repeat;
background-size: cover;
background-position: -10px 80px;
}
img
{
width:100%;
16
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
height:90vh;
opacity: 0.3;
}
.image{
width:30%;
border:2px solid black;
border-radius: 1em;
}
#para{
font-family: Arial, Helvetica, sans-serif;
width: 30em;
padding-left: 1.2em;
}
.container
{
display:flex;
position: absolute;
top:1.2em;
left: 10%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container>p
{
font-weight: bold;
letter-spacing: 0.1em;
}
.container>h1
{
letter-spacing: 0.2em;
}
17
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
Output:
Experiment-3.1:Write a Javascript code to build a calculator.
Source Code:
<html>
<head>
<title> Calculator using js </title>
<link rel="stylesheet" href="style.css">
<script>
function display(x)
{
calc.txt.value = calc.txt.value+x;
}
</script>
</head>
<body>
<form name="calc">
<table width="100px" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<th colspan="4" scope="col">
<input type ="text" name="txt" size="15px" style="text-align:right;" /></th>
</tr>
<tr>
18
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
<td><input type="button" value="1" name="b1" onclick="display(b1.value)" /></td>
<td><input type="button" value="2" name="b2" onclick="display(b2.value)" /></td>
<td><input type="button" value="3" name="b3" onclick="display(b3.value)" /></td>
</tr>
<tr>
<td><input type="button" value="4" name="b4" onclick="display(b4.value)" /></td>
<td><input type="button" value="5" name="b5" onclick="display(b5.value)" /></td>
<td><input type="button" value="6" name="b6" onclick="display(b6.value)" /></td>
</tr>
<tr>
<td><input type="button" value="7" name="b7" onclick="display(b7.value)" /></td>
<td><input type="button" value="8" name="b8" onclick="display(b8.value)" /></td>
<td><input type="button" value="9" name="b9" onclick="display(b9.value)" /></td>
</tr>
<tr>
<td><input type="button" value="0" name="0" onclick="display(b0.value)" /></td>
<td><input type="button" value="+" name="pls"onclick="display(pls.value)" /></td>
<td><input type="button" value="=" name="eq" onclick="txt.value=eval(calc.txt.value)" />
</tr>
<tr>
<td><input type="button" value="-" name="mins" onclick="display(mins.value)" /></td>
<td><input type="button" value="/" name="div"onclick="display(div.value)" /></td>
<td><input type="button" value="*" name="mul" onclick="display(mul.value)" /></td>
</tr>
<tr>
<td><input type="reset" value="clear" name="reset"</td>
</tr>
</form>
</body>
</html>
Style.css File:
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
19
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
border-radius: 5px;
width: 100%;
height: 65%;
}
#btn {
background-color: #fb0066;
}
input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
input:active[type=button] {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
Output:
20
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
Experiment-3.2: Write a Javascript program to calculate area of triangle and rectangle.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>const base = prompt('Enter the base of a triangle: ');
const height = prompt('Enter the height of a triangle: ');
const area = (base * height) / 2;
var rectangleLength = parseInt(prompt("Enter length of rectangle:"));
var rectangleWidth = parseInt(prompt("Enter width of rectangle:"));
var areaOfRectangle = rectangleLength * rectangleWidth ;
window.alert("Area of triangle is"+area);
window.alert("Area of Rectangle"+areaOfRectangle)
21
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
</script>
</body>
</html>
Output:
22
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
Experiment-3.3:Write a Javascript to take 2 digit number and then separate this two
digits then multiply first digit by itself for second digit times.(Exa: 23,Output:2 is
multiply 3 times answer is:8)
Source Code:
<!DOCTYPE html>
<head>
<title>p2</title>
</head>
<body>
<script>
var num =23;
var n1,n2,result;
n1 = Math.floor(num/10);
n2 = Math.floor(num%10);
result = 1;
for(i=1; i<=n2; i++)
{
result=result*n1;
}
document.write(result);
23
Web Technology
IU2041230102 CS - Batch-1 Bhavin Patel
</script>
</body>
</html>
Output:
24
Web Technology
