Visvesvaraya Technological University: "Web Technology and Its Applications"

VISVESVARAYA TECHNOLOGICAL UNIVERSITY
JNANA SANGAMA, BELAGAVI – 590018
KARNATAK LAW SOCIETY’S
VISHWANATHRAO DESHPANDE INSTITUTE OF TECHNOLOGY,
Haliyal-581329, Uttar Kannada
A Mini Project Report On
“Web Technology and its Applications”
Submitted by
Vivek A Sharma 2VD19CS060
Under the Guidance of
Dr .Venkatesh Shankar
Associate Professor
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

2021-22
KLS VISHWANATHRAO DESHPANDE
INSTITUTE OF TECHNOLOGY, HALIYAL - 581329
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
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.
Signature of the Guide Signature of the HOD Signature of the Principal

Dr .Venkatesh Shankar Prof. Poornima Raikar Dr. V. A Kulkarni
Web technology & its applications 2021-22
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.
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.
Web Technology can be classified into the following sections:

World Wide Web (WWW): The World Wide Web is based on several different
technologies : Web browsers, Hypertext Markup Language (HTML) and Hypertext
Transfer Protocol (HTTP).
Web Browser: The web browser is an application software to explore www (World Wide
Web). It provides an interface between the server and the client and requests to the server
for web documents and services.
Web Server: Web server is a program which processes the network requests of the users
and serves them with files that create web pages. This exchange takes place using
Hypertext Transfer Protocol (HTTP).
Web Pages: A webpage is a digital document that is linked to the World Wide Web and
viewable by anyone connected to the internet has a web browser.
Web Development: Web development refers to the building, creating, and maintaining of
websites. It includes aspects such as web design, web publishing, web programming, and
database management. It is the creation of an application that works over the internet i.e.
websites.
Dept. of CSE, KLS VDIT

Page 1
Haliyal.
HTML
What is HTML ?
HTML stands for HyperText Markup Language. It is used to design web pages
using the markup language. HTML is the combination of Hypertext and Markup
language. Hypertext defines the link between the web pages and markup language
defines the text document within the tag that define the structure of web pages.
What is HTML used for ?
HTML is used to create the structure of web pages that are displayed on the World
Wide Web (www). It contains Tags and Attributes that are used to design the web
pages. Also, we can link multiple pages using Hyperlinks.
HTML Basic Format Page Structure
 <DOCTYPE! html> – A doctype or document type declaration is an

instruction that tells the web browser about the markup language in which the

Page 2
Haliyal.
current page is written. It is not an element or tag. The doctype declaration is

not case-sensitive.
 <html> – This tag is used to define the root element of HTML document. This
tag tells the browser that it is an HTML document. It is the second outer container
element that contains all other elements within it.
 <head> – This tag is used to define the head portion of the HTML document
that contains information related to the document. Elements within the head tag are
not visible on the front-end of a webpage.
 <body> – The body tag is used to enclose all the visible content of a webpage.
In other words, the body content is what the browser will show on the front end.
Advantage of HTML
 HTML helps to build structure of a website and is a widely used Markup
language.
 It is easy to learn.
 Every browser supports HTML Language.
 HTML is light weighted and fast to load.
 Storage of big files are allowed because of the application cache feature.
 Do not get to purchase any extra software because it’s by default in every
window.
 Loose syntax (although, being too flexible won’t suit standards).
 HTML is simple to edit as being a plain text.
 It integrates easily with other languages such as JavaScript, CSS etc.
 HTML is that it is easy to code even for novice programmers.

Page 3
Haliyal.
PHP
The term PHP is an acronym for PHP: Hypertext Preprocessor. PHP is a server-
side scripting language designed specifically for web development. It is open-
source which means it is free to download and use. It is very simple to learn and
use. The files have the extension “.php”. Rasmus Lerdorf inspired the first version
of PHP and participated in the later versions. It is an interpreted language and it
does not require a compiler.
 It can be integrated with many databases such as Oracle, Microsoft SQL

Server, MySQL, PostgreSQL, Sybase, and Informix.
 It is powerful to hold a content management system like WordPress and can
be used to control user access.
 It supports main protocols like HTTP Basic, HTTP Digest, IMAP, FTP, and
others.
 One of the main reasons behind this is that PHP can be easily embedded in
HTML files and HTML codes can also be written in a PHP file.
 The thing that differentiates PHP from the client-side language like HTML is,
that PHP codes are executed on the server whereas HTML codes are directly
rendered on the browser. PHP codes are first executed on the server and then
the result is returned to the browser.
The only information that the client or browser knows is the result returned
after executing the PHP script on the server and not the actual PHP codes
present in the PHP file. Also, PHP files can support other client-side scripting
languages like CSS and JavaScript.

Page 4
Haliyal.
Why should we use PHP?

PHP can actually do anything related to server-side scripting or more
popularly known as the backend of a website. For example, PHP can
receive data from forms, generate dynamic page content, can work with
databases, create sessions, send and receive cookies, etc. There are also
many hash functions available in PHP to encrypt users’ data which
makes PHP secure and reliable to be used as a server-side scripting
language. So these are some of PHP’s abilities that make it suitable to
be used as a server-side scripting language. You will get to know more
of these abilities in further tutorials. Even if the above abilities do not
convince you of PHP, there are some more features of PHP. PHP can
run on all major operating systems like Windows, Linux, Unix, Mac
OS X, etc.

Page 5
Haliyal.
JavaScript
JavaScript is the world most popular lightweight, interpreted compiled programming

language. It is also known as scripting language for web pages. It is well-known for
the development of web pages, many non-browser environments also use it.
JavaScript can be used for Client-side developments as well as Server-
side developments.
JavaScript can be added to your HTML file in two ways:

 Internal JS: We can add JavaScript directly to our HTML file by writing the
code inside the <script> tag. The <script> tag can either be placed inside the
<head> or the <body> tag according to the requirement.
 External JS: We can write JavaScript code in other file having an extension
.js and then link this file inside the <head> tag of the HTML file in which we
want to add this code.
What is JavaScript used for?
 Web pages with interactive elements: User interaction with web pages is
enabled through JavaScript. On a web page, JavaScript has essentially no
bounds.
 Developing online and mobile applications: For web and mobile app
development, developers can employ a variety of JavaScript frameworks.
 Creating web servers and server applications: Aside from websites and
apps, developers may use JavaScript to create simple web servers and Node.js
to construct backend infrastructure.
 Game Development: Browser games can also be made using JavaScript.
Beginning developers can use these to hone their JavaScript skills.

Page 6
Haliyal.
1. Write a JavaScript to design a simple calculator to perform the following

operations: sum, product, difference and quotient.
program1.html
<!DOCTYPE HTML>
<html>
<head>
<style> table,
td, th
border: 1px solid black;

width:33%;
text-align:center;
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);
Page 7
Haliyal.
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";
function calc(clicked_id)
{ var val1 =

Page 8
Haliyal.
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";
value2.value="0"; answer.value="";
</script>
</head>
<body>
<table>
<tr><th colspan="4"> SIMPLE CALCULATOR </th></tr>
<tr><td>value1</td><td><input type="text" id="value1" value="0"/></td>

<td>value2</td><td><input type="text" id="value2" value="0"/> </td></tr>
<tr><td><input type="button" value="Addition" id = "add"
onclick="calc(this.id)"/></td>
<td><input type="button" value="Subtraction" id = "sub"
Page 9
Haliyal.
<td><input type="button" value="Multiplication" id = "mul"

<td><input type="button" value="Division" id ="div"
onclick="calc(this.id)"/></td></tr>
<tr><td>Answer:</td><td> <input type="text" id="answer" value=""
disabled/></td>
<td colspan="2"><input type="button" value="CLEAR ALL"
onclick="cls()"/></td>
</tr>
</table>
</body>
</html>

Page 10
Haliyal.
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
{
border: solid black;

width: 33%;
text-align: center;
border-collapse: collapse;
background-color:lightblue;
}

Page 11
Haliyal.
border: solid black;

width: 33%;
text-align: center;
border-collapse: collapse;
}
table{margin:auto
;}
</style>
<script>
document.write( "<table><tr><thcolspan='3'> NUMBERS FROM 0 TO 10
WITH THEIR SQUARES AND CUBES </th></tr>" );
document.write("<tr><td>Number</td><td>Square</td><td>Cube</td></tr>"
);
for(var n=0; n<=10; n++)
{
document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" +
n*n*n + "</td></tr>" ) ;
}
document.write( "</table>" ) ;
</script>
</head>
</html>

Page 12
Haliyal.
Output:
3. Write a JavaScript code that displays text “TEXT-GROWING” with

increasing font size in the interval of 100ms in RED COLOR, when the font
size reaches 50pt it displays “TEXT-SHRINKING” in BLUE color. Then the
font size decreases to 5pt.
<!DOCTYPE HTML>
<html>
<head>
<style>
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Page 13
Haliyal.
</style>
</head>
<body>
<p id="demo"></p>
<script>
var var1 = setInterval(inTimer, 1000);
var fs = 5;
var ids=document.getElementById("demo");
function inTimer() {
ids.innerHTML = 'TEXT GROWING';
ids.setAttribute('style', "font-size: " + fs + "px; color: red");
fs += 5;
if(fs >= 50 ){
clearInterval(var1);
var2 = setInterval(deTimer, 1000);
}
}
Function deTimer() {
fs -= 5;
ids.innerHTML = 'TEXT SHRINKING';
ids.setAttribute('style', "font-size: " + fs + "px; color: blue");
if(fs === 5 ){
clearInterval(var2);
}}
</script>
</body>
</html>

Page 14
Haliyal.
Output:
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>
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);

Page 15
Haliyal.
rev = rev * 10 + remainder;

}
alert("Reverse of "+str+" is "+rev);
}
else {
str = str.toUpperCase();
for(var i = 0; i < str.length; i++) {
var chr = str.charAt(i);
if(chr == 'A' || chr == 'E' || chr == 'I' || chr == 'O' || chr == 'U')break;
if( i < str.length )

alert("The position of the left most vowel is "+(i+1));
else
alert("No vowel found in the entered string");
}
</script>
</body>
</html>

Page 16
Haliyal.
Output :

Page 17
Haliyal.
5. Design an XML document to store information about a student in

anengineering college affiliated to VTU. The information must include
USN, Name, and Name of the College, Branch, Year of Joining, and email
id. Make up sample data for 3 students. Create a CSS style sheet and use it
to display the document.
<?xml-stylesheet type="text/css" href="5.css" ?>

<!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>
</head>
<students>
<student>
<USN>USN : 4DM16CS001</USN>
<name>NAME : ABHIJNA</name>
<college>COLLEGE : YIT</college>
<branch>BRANCH : Computer Science and Engineering</branch>
<year>YEAR : 2016</year>
<e-mail>E-Mail : abhijna@gmail.com</e-mail>
</student>
<student>
<USN>USN : 4DM16CS035</USN>
<name>NAME : SAIPRAKASH</name>
<college>COLLEGE : YIT</college>
<branch>BRANCH : Computer Science and Engineering</branch>

<year>YEAR : 2016</year>
<e-mail>E-Mail : saiprakash@gmail.com</e-mail>

Page 18
Haliyal.
</student>
<html>
program5.css
student{
display:block; margin-top:10px;
color:Navy;
}
USN{
display:block; margin-left:10px;font-size:14pt;
color:Red;
}
name{
color:Blue;
}
college{
color:Maroon;
}
branch{
color:Purple;
}
year{

Page 19
Haliyal.
color:Green;
}
e-mail{ display:block; margin-left:20px;font-size:12pt;
color:Blue;
}
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

Page 20
Haliyal.
7. a PHP program to display a digital clock which displays the current time of
the server.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh" content="1"/>
<style> p {
color:white;
font-size:90px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body{background-
color:black;}
</style>
<p> <?php echo date(" h: i : s A");?> </p>
</head>
Output:

Page 21
Haliyal.
8. write the PHP programs to do the following:

a) Implement simple calculator operations.
b) Find the transpose of a matrix.
c) Multiplication of two matrices.
d) Addition of two matrices.
<html>
<head>
<style> table,
td, th
{ border: 1px solid black;
width: 35%;
text-align: center;
background-color: DarkGray;
}
table{ margin: auto; }
input,p{ text-
align:right; }
</style>
</head>
<body>
<form method="post">
<table>
<caption><h2> SIMPLE CALCULATOR </h2></caption>>
<tr><td>First Number:</td><td><input type="text"
name="num1" /></td>
<td rowspan="2"><input type="submit" name="submit"
value="calculate"></td></tr>

Page 22
Haliyal.
<tr><td>Second Number:</td><td><input type="text"

name="num2"/></td></tr>
</form>
<?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>

Page 23
Haliyal.
Output:
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]);
echo "the first matrix :"."<br/>";

for ($row = 0; $row < $m;
$row++) { for ($col = 0; $col <
$n; $col++)
echo " ".$a[$row][$col];
echo "<br/>";
}
echo "the second matrix

:"."<br/>";

Page 24
Haliyal.
for ($row = 0; $row < $p;

$row++) {
for ($col = 0; $col < $q; $col++)
echo " ".$b[$row][$col];
echo "<br/>";
}
echo "the transpose for the first matrix
is:"."<br/>";
for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $n; $col++)
echo " ".$a[$col][$row];
echo "<br/>";
}
if(($m===$p) and ($n===$q)) {
echo "the addition of matrices is:"."<br/>";
for ($row = 0; $row < 3; $row++) {
for($col=0;$col<3;$col++)
echo " ".$a[$row][$col]+$b[$row][$col]." ";
echo "<br/>";
}
}
if($n===$p){
echo " The multiplication of matrices:
<br/>";
$result=array();
for ($i=0; $i < $m; $i++) {
for($j=0; $j < $q; $j++){
$result[$i][$j] = 0;

Page 25
Haliyal.
for($k=0; $k < $n; $k++)

$result[$i][$j] += $a[$i][$k] * $b[$k][$j];
}
}
for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $q; $col++)
echo " ".$result[$row][$col];
echo "<br/>";
}
}
?>
Output:
the first matrix:

123
456
789
the second matrix:

789
456
123
the transpose of the first matrix:

147
258

Page 26
Haliyal.
369
the addition of matrices is:

8 10 12
8 10 12
8 10 12
the multiplication of matrices:

18 24 30
54 69 84
90 114 138
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.

Page 27
Haliyal.
<?php
$states = "Mississippi Alabama Texas Massachusetts Kansas";
$statesArray = [];
$states1 = explode(' ',$states);
echo "Original Array :<br>";
foreach ( $states1 as $i => $value )
print("STATES[$i]=$value<br>");
foreach($states1 as $state) {
if(preg_match( '/xas$/', ($state)))
$statesArray[0] = ($state);
}
if(preg_match('/^k.*s$/i', ($state)))
}
if(preg_match('/^M.*s$/', ($state)))
}
foreach($states1 as $state){
if(preg_match('/a$/', ($state)))
}
echo "<br><br>Resultant Array :<br>";

Page 28
Haliyal.
foreach ( $statesArray as $array => $value )

print("STATES[$array]=$value<br>");
?>

Page 29
Haliyal.
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;
Page 30
Haliyal.
}
table { margin: auto; }
</style>

Page 31
Haliyal.
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "weblab";
$a=[];
// Create connection
// Opens a new connection to the MySQL server
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection and return an error description from the last
connection error, if any
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
$sql = "SELECT * FROM student"
// performs a query against the database
$result = $conn->query($sql);
echo "<br>";
echo "<center> BEFORE SORTING </center>";
echo "<table border='2'>";
echo "<tr>";
echo "<th>USN</th><th>NAME</th><th>Address</th></tr>";
if ($result->num_rows> 0)
{
// output data of each row and fetches a result row as an
associative array
while($row = $result->fetch_assoc()){

Page 32
Haliyal.
echo "<tr>";
echo "<td>". $row["usn"]."</td>";
echo "<td>". $row["name"]."</td>";
echo "<td>". $row["addr"]."</td></tr>";
array_push($a,$row["usn"]);
}
else
}
echo "Table is Empty";

Page 33
Haliyal.
echo "</table>";
$n=count($a);
$b=$a;
for ( $i = 0 ; $i< ($n - 1) ; $i++ )
{
$pos= $i;
for ( $j = $i + 1 ; $j < $n ; $j++ ) {
if ( $a[$pos] > $a[$j] )
$pos= $j;
}
if ( $pos!= $i ) {
$temp=$a[$i];
$a[$i] = $a[$pos];
$a[$pos] = $temp;
}
}
$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"];

Page 34
Haliyal.
$d[$i]=$row["addr"];
}
}
}
}
echo "<br>";
echo "<center> AFTER SORTING <center>";
echo "<table border='2'>";
echo "<tr>";
echo "<th>USN</th><th>NAME</th><th>Address</th></tr>";

Page 35
Haliyal.
for($i=0;$i<$n;$i++) {
echo "<tr>";
echo "<td>". $a[$i]."</td>";
echo "<td>". $c[$i]."</td>";
echo "<td>". $d[$i]."</td></tr>";
}
?>
echo "</table>";;
$conn->close();
</body>
</html>
Output:

Page 36
Haliyal.
MINI PROJECT REPORT ON RESORT BOOKING WEBPAGE
DESCRIPTION-It is a website where we are going to book hotels or resorts.By online

banking methods.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./css/cssres.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="content">
<div class="logo">
<img src="images/logo_200x200.png" alt="">
</div>
<div class="navlinks">
Dept. of CSE, KLS VDIT Haliyal Page 37

<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>

Wish to experience the true beauty of nature? Apart from comfortable

cottages, Pergola Tree Tops also offers the chanceA 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="btn1">
<button>check now</button>
</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
pharmacy, a tobacco shop, a hair dresser and many more within a walking distance.</p>
<div class="btn2">
</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
pharmacy, a tobacco shop, a hair dresser and many more within a walking distance.</p>
<div class="btn3">
</div>
</div>
</div>
</div>
<div class="container3">
<div class="div_1 links">

<h3>links</h3>
<li><a href="a">adventure</a></li>
<li><a href="a">activities</a></li>
<li><a href="a">entertainment</a></li>
<li><a href="a">special services</a></li>
<li><a href="a">water activities</a></li>
</div>
<div class="div_1 email">
<h3>email</h3>
<a
href="viveksharma072001@gmail.com">viveksharma072001@gmail.com</a>

</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;
background: transparent;
color: snow;
font-size: 20px;
border: 1px solid crimson;
transition: 0.5s;
}
.btn button:hover{
background: crimson;
}
.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');

.btn1 button{
width: 140px;
height: 38px;
color: snow;
font-size: 18px;
border: 1px solid coral;
transition: 0.5s;
margin-top: 20px;
}
.btn1 button:hover{
background: coral;
}
.b2{
background-image: url('../images/packages.jpg');

.btn2 button{
width: 140px;
height: 38px;
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);
}
.b3{
background-image: url('../images/services.jpg');

.btn3 button{
width: 140px;
height: 38px;
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);
}
.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);

}
.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:


Visvesvaraya Technological University: "Web Technology and Its Applications"

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Visvesvaraya Technological University: "Web Technology and Its Applications"

Uploaded by

Copyright:

Available Formats

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

JNANA SANGAMA, BELAGAVI – 590018

KARNATAK LAW SOCIETY’S

VISHWANATHRAO DESHPANDE INSTITUTE OF TECHNOLOGY,

Haliyal-581329, Uttar Kannada

A Mini Project Report On

“Web Technology and its Applications”

Under the Guidance of

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Signature of the Guide Signature of the HOD Signature of the Principal

Introduction To Web Technology

Web Technology can be classified into the following sections:

Dept. of CSE, KLS VDIT

 <DOCTYPE! html> – A doctype or document type declaration is an

Dept. of CSE, KLS VDIT

current page is written. It is not an element or tag. The doctype declaration is

Dept. of CSE, KLS VDIT

 It can be integrated with many databases such as Oracle, Microsoft SQL

Dept. of CSE, KLS VDIT

Why should we use PHP?

Dept. of CSE, KLS VDIT

JavaScript is the world most popular lightweight, interpreted compiled programming

JavaScript can be added to your HTML file in two ways:

Dept. of CSE, KLS VDIT

1. Write a JavaScript to design a simple calculator to perform the following

border: 1px solid black;

Dept. of CSE, KLS VDIT

<tr><th colspan="4"> SIMPLE CALCULATOR </th></tr>

<tr><td>value1</td><td><input type="text" id="value1" value="0"/></td>

<td><input type="button" value="Multiplication" id = "mul"

Dept. of CSE, KLS VDIT

border: solid black;

Dept. of CSE, KLS VDIT

border: solid black;

Dept. of CSE, KLS VDIT

3. Write a JavaScript code that displays text “TEXT-GROWING” with

Dept. of CSE, KLS VDIT

Dept. of CSE, KLS VDIT

Dept. of CSE, KLS VDIT

rev = rev * 10 + remainder;

for(var i = 0; i < str.length; i++) {

var chr = str.charAt(i);

if( i < str.length )

Dept. of CSE, KLS VDIT

Dept. of CSE, KLS VDIT

5. Design an XML document to store information about a student in

<?xml-stylesheet type="text/css" href="5.css" ?>

<branch>BRANCH : Computer Science and Engineering</branch>

Dept. of CSE, KLS VDIT

Dept. of CSE, KLS VDIT

Dept. of CSE, KLS VDIT

Dept. of CSE, KLS VDIT

8. write the PHP programs to do the following:

Dept. of CSE, KLS VDIT

<tr><td>Second Number:</td><td><input type="text"

Dept. of CSE, KLS VDIT

echo "the first matrix :"."<br/>";

echo "the second matrix

Dept. of CSE, KLS VDIT

for ($row = 0; $row < $p;

Dept. of CSE, KLS VDIT

for($k=0; $k < $n; $k++)