VISVESVARAYA TECHNOLOGICAL UNIVERSITY

JNANASANGAMA, BELAGAVI–590018, KARNATAKA, INDIA

ACTIVITY ON

“web Technology”

Submitted in partial fulfillment of the requirements for the 5th semester activity
IN
“ WEB TECHNOLOGY LAB “

Submitted By

STUDENT NAME USN

LUBNA kOUSAR 1KN22CS045

Under The Guidance of

Prof. PADMINI

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

KNS INSTITUTE OF TECHNOLOGY
Affiliated to Visvesvaraya Technological University, Belagavi and Approved by AICTE, New Delhi
HegdeNagar- KogiluRoad, Thirumenahalli, Yelahanka, Bengaluru-560045
 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.

Frontend Development Languages

The front-end portion is built by using some languages which are discussed below:

 HTML: HTML stands for Hypertext Markup Language. It is used to design the
front-end portion of web pages using a markup language. HTML is the
combination of Hypertext and Markup language. Hypertext defines the link
between the web pages. The markup language is used to define the text
documentation within the tag which defines the structure of web pages.
 CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed
language intended to simplify the process of making web pages presentable. CSS
allows you to apply styles to web pages. More importantly, CSS enables you to do
this independent of the HTML that makes up each web page.
 JavaScript: JavaScript is a famous scripting language used to create magic on the
sites to make the site interactive for the user. It is used to enhancing the
functionality of a website to running cool games and web-based software.
2
  AJAX: Ajax is an acronym for Asynchronous Javascript and XML. It is used to
communicate with the server without refreshing the web page and thus increasing
the user experience and better performance.

Backend Development Languages

The back end portion is built by using some languages which are discussed below:

 PHP: PHP is a server-side scripting language designed specifically for web

development. Since PHP code executed on the server-side, so it is called a server-
side scripting language.

 Node.js: Node.js is an open-source and cross-platform runtime environment for

executing JavaScript code outside a browser. You need to remember that NodeJS is
not a framework, and it’s not a programming language. Most people are confused
and understand it’s a framework or a programming language. We often use Node.js
for building back-end services like APIs like Web App or Mobile App. It’s used in
production by large companies such as Paypal, Uber, Netflix, Wallmart, and so on.

 Python: Python is a programming language that lets you work quickly and
integrate systems more efficiently.

 JavaScript: JavaScript can be used as both (front end and back end) programming.

 Golang: Golang is a procedural and statically typed programming language having

the syntax similar to C programming language. Sometimes it is termed as Go
Programming Language.

 C#: C# is a general-purpose, modern and object-oriented programming language

pronounced as “C sharp”.

 DBMS: The software which is used to manage database is called Database

Management System (DBMS).

3
 Assignment Questions

1. Construct a Website (multiple Webpages) containing Resume and Bio-data by

using relevant HTML elements and appropriate styling for presentation with
CSS/jQuery/JavaScript . Host the Website on a cloud platform.

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
header {
background:
#333; color:
white; padding:
1em 0; text-align:
center;
}
nav a {
color: white;
margin: 0 15px;
text-decoration:
none; font-weight:
bold;
}
.container
{ width: 80%;
margin: 20px auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px
rgba(0,0,0,0.1); border-radius: 5px;
}
section {
margin-bottom: 2em;
4
}

5
 h2 {
color: #555;
}
.bio, .resume
{ display: none;
}
footer {
text-align: center;
margin: 20px 0;
}
</style>
</head>
<body>
<header>
<h1>My Personal Website</h1>
<nav>
<a href="#" id="showResume">Resume </a>
<a href="#" id="showBio">Bio-Data</a>
</nav>
</header>

<div class="container">
<section class="resume">
<h2>Resume</h2>
<p><strong>Name:</strong> LUBNA KOUSAR</p>
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Contact No:</strong>9036469262 </p>
<p><strong>Addresse:</strong> Shirkulli Ankola uttraKannada Karanataka
581314</p>

<hr>

<h3>Education</h3>
<ul>
<li>B.E. in Computer Science - KNS Institute of Technology</li>
</ul>
<hr>

<h3>Skills</h3>
<ul>
<li>HTML, CSS, JavaScript, jQuery</li>
<li>Python, Java</li>
<li>Cloud Deployment</li>
</ul>

<hr>

6
 </section>

<section class="bio">
<h2>Bio-Data</h2>
<p><strong>Full Name:</strong> lubna</p>
<p><strong>Date of Birth:</strong> Julay 26, 2004</p>
<p><strong>Nationality:</strong> India</p>
<p><strong>Marital Status:</strong> Single</p>
</section>
</div>

<footer>
<p>&copy; 2024 feba. All rights reserved.</p>
</footer>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#showResume').click(function() {
$('.resume').show();

});
$('#showBio').click(function() {
$('.bio').show();

});
});
</script>

</body>
</html>

7
 OUTPUT

2. Build a Web application with HTML , CSS, JavaScript , jQuery and PHP for online
application/registration form . Form should accept the information and print/display on
a browser with formatting/styling up on submission (Button click) on success . Host the
application on a cloud platform.

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

8
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
header {
background:
#333; color:
white; padding:
1em 0; text-align:
center;
}
.container
{ width: 80%;
margin: 20px auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px
rgba(0,0,0,0.1); border-radius: 5px;
}
form label
{ display:
block;
margin: 10px 0 5px;
}
form input, form textarea
{ width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid
#ccc; border-radius:
4px;
}
form button
{ background: #333;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.output
{ display:
9
none;
margin-top: 20px;
padding: 15px;
background: #e9ffe9;

1
 border-left: 5px solid #5cb85c;
}
</style>
</head>
<body>
<header>
<h1>Online Registration Form</h1>
</header>

<div class="container">
<form id="registrationForm">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>

<label for="email">Email</label>
<input type="email" id="email" name="email" required>

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>

<button type="submit">Submit</button>
</form>

<div class="output" id="output"></div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#registrationForm').submit(function(event) {
event.preventDefault();
const name = $('#name').val();
const email = $('#email').val();
const message = $('#message').val();

const outputHtml = `
<h2>Registration Successful</h2>
<p><strong>Name:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Message:</strong> ${message}</p>
`;

$('#output').html(outputHtml).fadeIn();
});
});
</script>
1
</body>
</html>

OUTPUT

10