Professional Documents
Culture Documents
Ashwini Project
Ashwini Project
Submitted by
Vivek A Sharma 2VD19CS060
Dr .Venkatesh Shankar
Associate Professor
Certificate
Certified that the Mini Project work entitled “Web Technology and its applications” carried
out by Vivek A Sharma (2VD19CS060) during the year 2021-2022. It is certified that all the
corrections/suggestions indicated for internal assessment have been incorporated in the report.
The Mini project report has been approved as it satisfies the academic requirements in respect
of project work prescribed for the Bachelor of Engineering degree.
ACKNOWLEDGEMENT
“Task successful” makes everyone happy. But the happiness will be gold without
glitter if we didn’t state the persons who have supported us to make it success.
Success will be crowned to people who made it reality but the people whose constant
guidance and encouragement made it possible will be crowned first on the eve of
success.
We wish to express our sincere gratitude towards our guide Dr.Venkatesh Shankar for
his constant motivation and valuable help through the project.
We take this opportunity to thank Prof. Prof. Poornima Raikar HOD of Computer
Science and Engineering Department for providing the inspiration for taking the
project to its completion.
We are also grateful to our beloved principal Dr. V. A. Kulkarni for having provided
us the academic environment, which nurtured our practical skills, contributing to the
success of our project. We would like to thank all the teaching and non-teaching for
their ideas and encouragement which helped us through the completion of the
project.
We extend our sincere gratitude towards our parents who have encouraged us with
their blessings to do this project successfully.
2
2
Web technology & its applications 2021-22
20
Introduction To Web Technology
Web Technology refers to the various tools and techniques that are utilized in the process
of communication between different types of devices over the internet. A web browser is
used to access web pages. Web browsers can be defined as programs that display text,
data, pictures, animation, and video on the Internet. Hyperlinked resources on the World
Wide Web can be accessed using software interfaces provided by Web browsers.
<!DOCTYPE HTML>
<html>
<head>
<style> table,
td, th
background-color: DarkGray;
border-collapse:collapse;
}
table{margin:auto;}
input{text-
align:right; }
</style>
<script type="text/javascript">
function calc(clicked_id)
{ var val1 =
parseFloat(document.getElementById("value1").value);
Dept. of CSE, KLS VDIT Page 7
Haliyal.
2
Web technology & its applications 2021-22
20
var val2 =
parseFloat(document.getElementById("value2").value);
if(isNaN(val1)||isNaN(val2)) alert("ENTER VALID
NUMBER");
else if(clicked_id=="add")
document.getElementById("answer").value=val1+val2;
else if(clicked_id=="sub")
document.getElementById("answer").value=val1-val2;
else if(clicked_id=="mul")
document.getElementById("answer").value=val1*val2;
else if(clicked_id=="div")
document.getElementById("answer").value=val1/val2;
} function
cls() {
value1.value="0";
<script type="text/javascript">
function calc(clicked_id)
{ var val1 =
else if(clicked_id=="add")
document.getElementById("answer").value=val1+val2;
else if(clicked_id=="sub")
document.getElementById("answer").value=val1-val2;
else if(clicked_id=="div")
document.getElementById("answer").value=val1/val2;
} function
cls() {
value1.value="0";
value2.value="0"; answer.value="";
</script>
</head>
<body>
<table>
Output:
2. Write a JavaScript that calculates the squares and cubes of the numbers
from 0 to 10 and outputs HTML text that displays the resulting values in an
HTML table format.
<!DOCTYPE HTML>
<html>
<head>
<style>
table,tr,td
{
TEXT SHRINKING
4. Develop and demonstrate a HTML5 file that includes JavaScript script that
uses functions for the following problems:
a) Parameter: A string
b) Output: The position in the string of the left-most vowel
c) Parameter: A number
d) Output: The number with its digits in the reverse order
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
var str = prompt("Enter the
Input",""); if(!(isNaN(str)))
{
var num,rev=0,remainder;
num = parseInt(str);
while(num!=0) {
remainder = num%10;
num = parseInt(num/10);
else {
str = str.toUpperCase();
if(chr == 'A' || chr == 'E' || chr == 'I' || chr == 'O' || chr == 'U')break;
}
</script>
</body>
</html>
<USN>USN : 4DM16CS035</USN>
<name>NAME : SAIPRAKASH</name>
<college>COLLEGE : YIT</college>
</student>
<html>
program5.css
student{
display:block; margin-top:10px;
color:Navy;
}
USN{
display:block; margin-left:10px;font-size:14pt;
color:Red;
}
name{
display:block; margin-left:20px;font-size:14pt;
color:Blue;
}
college{
display:block; margin-left:20px;font-size:12pt;
color:Maroon;
}
branch{
display:block; margin-left:20px;font-size:12pt;
color:Purple;
}
year{
6. write a PHP program to keep track of the number of visitors visiting the
web page and to display this count of visitors, with proper headings.
<?php print "<h3> REFRESH PAGE
</h3>";
$name="counter.txt";
$file =
fopen($name,"r");
$hits=
fscanf($file,"%d");
fclose($file);
$hits[0]++;
$file = fopen($name,"w");
fprintf($file,"%d",$hits[0]);
fclose($file);
print "Total number of views: ".$hits[0];
?>
Output:
REFRESH PAGE
Total number of views: 10
<?php if(isset($_POST['submit']))
{
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
if(is_numeric($num1)andis_numeric($num1) )
{
echo "<tr><td> Addition :</td><td><p>".($num1+$num2)."</p></td>";
echo "<tr><td> Subtraction :</td><td><p> ".($num1-$num2)."</p></td>";
echo "<tr><td> Multiplication :</td><td><p>".($num1*$num2)."</p></td>";
echo "<tr><td>Division :</td><td><p> ".($num1/$num2)."</p></td>";
echo "</table>";
}
else
{
echo"<script type='text/javascript' >
alert(' ENTER VALID NUMBER');</script>";
}
}
?>
</body>
</html>
Program8b.php
<?php
$a = array(array(1,2,3),array(4,5,6),array(7,8,9));
$b = array(array(7,8,9),array(4,5,6),array(1,2,3));
$m=count($a);
$n=count($a[2]);
$p=count($b);
$q=count($b[2]);
Output:
9. Write a PHP program named states.py that declares a variable states with
value "Mississippi Alabama Texas Massachusetts Kansas". write a PHP
program that does the following:
a) Search for a word in variable states that ends in xas. Store this word
in element 0 of a list named statesList.
b) Search for a word in states that begins with k and ends in s. Perform
a case-insensitive comparison. [Note: Passing re.Ias a second
parameter to method compile performs a case-insensitive
comparison.] Store this word in element1 of statesList.
c) Search for a word in states that begins with M and ends in s. Store
this word in element 2 of the list.
d) Search for a word in states that ends in a. Store this word in element
3 of the list.
foreach($states1 as $state){
if(preg_match('/a$/', ($state)))
$statesArray[3] = ($state);
}
echo "<br><br>Resultant Array :<br>";
?>
Output:
10. Write a PHP program to sort the student records which are
stored in the database using selection sort. Goto Mysql and then type
create database weblab; use weblab; create table
student(usnvarchar(10),name varchar(20),address varchar(20));
<!DOCTYPE html>
<html>
<body>
<style>
table, td, th
{
border: 1px solid black;
width: 33%;
text-align: center;
border-collapse:collapse;
background-color:lightblue;
Dept. of CSE, KLS VDIT Page 30
Haliyal.
2
Web technology & its applications 2021-22
20
}
table { margin: auto; }
</style>
$c=[];
$d=[];
$result = $conn->query($sql);
if ($result->num_rows> 0)// output data of each row
{
while($row = $result->fetch_assoc()) {
for($i=0;$i<$n;$i++) {
if($row["usn"]== $a[$i]) {
$c[$i]=$row["name"];
echo "</table>";;
$conn->close();
</body>
</html>
Output:
</head>
<body>
<header>
<div class="content">
<div class="logo">
<img src="images/logo_200x200.png" alt="">
</div>
<div class="navlinks">
<ul id="menulists">
<li><a href="#home">Home</a> </li>
<li><a href="#resorts">resorts</a> </li>
<li><a href="#activites">activities</a> </li>
<li><a href="#location">location</a> </li>
<li><a href="#contact">Contact</a> </li>
</ul>
</div>
</div>
</header>
<div class="banner1">
<div class="banner">
<h1><span>welcome to dandeli</span></h1>
<h2>Our resort is best in dandeli</h2>
</div>
<div class="btn">
<button>Book now</button>
</div>
</div>
<div class="container">
<div class="b b1">
<h1>our services</h1>
<p>
</div>
</div>
<div class="b b2">
<h1>special packages</h1>
<p>Banana County Resort is having its own Package Tour, especially for
group arrival with a minimum of 5 individuals.A various choice of restaurants and cafés
are available at the shopping mall. The hotel's family-friendly and home-like
accommodation concept also provide many advantages such as a supermarket, a
pharmacy, a tobacco shop, a hair dresser and many more within a walking distance.</p>
<div class="btn2">
<button>check now</button>
</div>
</div>
<div class="b b3">
<h1> visiting places</h1>
<p>Om Beach,Gokarna Temple, Murudeshwara, Yana Rocks, Dandeli Forest,
Karwara, Banavasi, Guduvi Bird Sanctuary, JainKal A various choice of restaurants and
cafés are available at the shopping mall. The hotel's family-friendly and home-like
accommodation concept also provide many advantages such as a supermarket, a
pharmacy, a tobacco shop, a hair dresser and many more within a walking distance.</p>
<div class="btn3">
<button>check now</button>
</div>
</div>
</div>
</div>
<div class="container3">
</div>
<div class="div_1 phone">
<h3>helpline number</h3>
<a href="+91 9606655674">+91 9606655674</a>
</div>
<div class="div_1 social">
<h3>follow us at</h3>
<img src="images/insta.jpg" alt="">
<img src="images/facebook.jpg" alt="">
<img src="images/whatsapp.jpg" alt="">
</div>
</div><./body></html>
CSS CODE:
*{
margin: 0;
padding:0;
}
.logo{
position: absolute;
margin-top: 0px;
margin-left: 0px;
width: 25%;
display: flex;
align-items: center;
.navlinks ul{
list-style: none;
background:white;
text-align: right;
width: 100%;
}
.navlinks li{
display:inline-block;
padding:5px 10px;
}
.navlinks a{
color:black;
text-decoration: none;
font-size: 20px;
width: 100px;
font-weight: bold;
font-family: arial;
display: block;
padding: 25px 20px;
text-align: center;
transition: 0.5s;
}
.navlinks a:hover{
background: crimson;
border-radius: 25px;
transform: scale(1.1);
}
.banner1{
background-image: url('../images/hornbill.jpg');
height: 120vh;
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.7);
background-blend-mode: darken;
}
.banner{
top:40%;
left:20%;
position: absolute;
color: snow;
line-height: 1.5;
letter-spacing: 2px;
}
.banner h1{
font-size: 66px;
}
.banner h2{
font-size: 48px;
}
.btn {
top:76%;
left:20%;
position:absolute;
line-height: 1.8;
}
.btn button{
width: 280px;
height: 40px;
border-radius: 25px;
background: transparent;
color: snow;
font-size: 20px;
border: 1px solid crimson;
transition: 0.5s;
}
.btn button:hover{
background: crimson;
transform: scale(1.1);
}
.container{
display: flex;
margin: 108px;
justify-content: space-around;
}
.container h1{
color: darkgray;
}
.b{
margin:20px;
height: 500px;
text-align: justify;
padding: 40px;
color:snow;
line-height: 1.6;
width: 340px;
box-shadow: 0 5px 10px black;
}
.b1{
background-image: url('../images/services.jpg');
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.7);
background-blend-mode: darken;
.btn1 button{
width: 140px;
height: 38px;
border-radius: 25px;
background: transparent;
color: snow;
font-size: 18px;
border: 1px solid coral;
transition: 0.5s;
margin-top: 20px;
}
.btn1 button:hover{
background: coral;
transform: scale(1.1);
}
.b2{
background-image: url('../images/packages.jpg');
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.7);
background-blend-mode: darken;
.btn2 button{
width: 140px;
height: 38px;
border-radius: 25px;
background: transparent;
color: snow;
font-size: 18px;
border: 1px solid rgb(53, 17, 98);
transition: 0.5s;
margin-top: 20px;
}
.btn2 button:hover{
background: rgb(70, 25, 167);
transform: scale(1.1);
}
.b3{
background-image: url('../images/services.jpg');
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.7);
background-blend-mode: darken;
.btn3 button{
width: 140px;
height: 38px;
border-radius: 25px;
background: transparent;
color: snow;
font-size: 18px;
border: 1px solid rgb(37, 173, 159);
transition: 0.5s;
margin-top: 20px;
}
.btn3 button:hover{
background: rgb(11, 49, 44);
transform: scale(1.1);
}
.container3{
display: flex;
margin-top: 108px;
margin-bottom: 108px;
justify-content: space-around;
border:2px solid;
width: 100%;
height: 88vh;
background-image:url(../images/footer.jpg);
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.8);
background-blend-mode: darken;
}
.div_1 {
font-size: 18px;
color:aliceblue;
margin-top: 150px;
line-height: 1;
}
.div_1 h3{
font-size: 25px;
color: deepskyblue;
}
.div_1 li a{
color: snow;
text-decoration: none;
list-style: none;
transition: 0.5s;
}
.div_1 li a:hover{
color: coral;
}
.div_1 social{
width: 10px;
display: block;
padding: 10px;
cursor: pointer;
}
OUTPUT: