Scribd
Upload
15 views8 pages

WebTechnologyLabManualpdf 2025 01 15 13 58 02

The document is a lab manual for the Web Technology course (09CE2404) offered by the Computer Engineering Department, detailing objectives, outcomes, syllabus, and instructional methods. It covers topics such as HTML, CSS, JavaScript, PHP, and MySQL, along with practical exercises and assignments for students to develop web applications. The manual emphasizes hands-on learning and includes guidelines for students to follow during lab sessions.

Uploaded by

bhagyavarsh10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views8 pages

WebTechnologyLabManualpdf 2025 01 15 13 58 02

The document is a lab manual for the Web Technology course (09CE2404) offered by the Computer Engineering Department, detailing objectives, outcomes, syllabus, and instructional methods. It covers topics such as HTML, CSS, JavaScript, PHP, and MySQL, along with practical exercises and assignments for students to develop web applications. The manual emphasizes hands-on learning and includes guidelines for students to follow during lab sessions.

Uploaded by

bhagyavarsh10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

FACULTY OF DIPLOMA STUDIES

Department of CE- DIPLOMA


09CE2404 – WEB TECHNOLOGY

Web Technology Lab Manual


Subject Code: 09CE2404
Department: Computer Engineering
Semester: IV
Total Marks: 100
Credits Earned: 3

Lab Objectives
This course is designed to:
1. Teach the fundamentals of publishing content on the World Wide Web, including HTML,
CSS, and JavaScript.
2. Provide an introduction to creating dynamic web pages using JavaScript/jQuery.
3. Enable students to design responsive websites using Bootstrap.
4. Introduce backend scripting with PHP and database connectivity using MySQL.
5. Develop a complete website by integrating front-end and back-end technologies.

Course Outcomes
By the end of this course, students will:
• Understand the basics of web hosting, domain names, and website structures.
• Create and style web pages using HTML and CSS.
• Develop interactivity on web pages with JavaScript and jQuery.
• Implement dynamic server-side scripting using PHP.
• Connect websites to databases for data management.
• Create responsive websites using Bootstrap 4.0.

Syllabus
Unit 1: Introduction and Web Design
• Basics of Internet, WWW, and Web 2.0
• Web protocols and servers
• Principles of web design and website structures
Contact Hours: 4
FACULTY OF DIPLOMA STUDIES
Department of CE- DIPLOMA
09CE2404 – WEB TECHNOLOGY

Unit 2: HTML and CSS


• HTML basics, tags, attributes, and character entities
• CSS basics, gradients, shadow effects, transformations, animations, and positioning
Contact Hours: 16

Unit 3: JavaScript and jQuery


• JavaScript basics: variables, functions, conditions, loops
• JavaScript events, DOM manipulation, and form validation
• jQuery: syntax, selectors, events, and effects
Contact Hours: 20

Unit 4: PHP Basics


• PHP variables, constants, operators, and loops
• Flow control statements and arrays
• Basic PHP scripts for client IP, form submissions, and sessions
Contact Hours: 26

Unit 5: Functions and Data Inputs


• Defining and calling functions
• Using date/time, math, and string functions
• Handling user inputs through forms
Contact Hours: 12

Unit 6: PHP & Database Connectivity


• Basics of MySQL
• Connecting PHP to MySQL for data insertion, retrieval, updating, and deletion
Contact Hours: 6

Guidelines to Students

1. Always bring a class-book and lab notebook to document experiments and results.
2. Maintain decorum and handle lab equipment responsibly.
3. Keep quite while lab attendance being taken by faculty.
4. Submit lab records on time.
5. If there are any queries feel free to ask the faculties.
FACULTY OF DIPLOMA STUDIES
Department of CE- DIPLOMA
09CE2404 – WEB TECHNOLOGY

Lab Exercises with Examples

1. HTML Basics:
Exercise : Create your resume using HTML.

<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
</head>
<body>
<h1>John Doe</h1>
<p>Address: 123 Street Name, City, Country</p>
<h2>Education</h2>
<ul>
<li>Bachelor of Technology</li>
<li>Diploma in Computer Engineering</li>
</ul>
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>

Exercise : Design a menu system.

<!DOCTYPE html>
<html>
<head>
<title>Menu System</title>
<style>
ul {
list-style-type: none;
}
li {
display: inline;
margin: 10px;
}
</style>
FACULTY OF DIPLOMA STUDIES
Department of CE- DIPLOMA
09CE2404 – WEB TECHNOLOGY
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>

2. CSS Styling:
Exercise : Create multiple pages in HTML and link them with the menu system.

<!DOCTYPE html>
<html>
<head>
<title>CSS Animations</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s infinite;
}

@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
FACULTY OF DIPLOMA STUDIES
Department of CE- DIPLOMA
09CE2404 – WEB TECHNOLOGY

3. JavaScript Exercises:
Exercise : Add two numbers using JavaScript.

<!DOCTYPE html>
<html>
<head>
<title>Add Numbers</title>
</head>
<body>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<button onclick="addNumbers()">Add</button>
<p id="result"></p>

<script>
function addNumbers() {
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
document.getElementById('result').textContent = `Result: ${num1 + num2}`;
}
</script>
</body>
</html>

4. PHP Basics:
Exercise : Write PHP scripts to process forms using GET and POST.

<!DOCTYPE html>
<html>
<head>
<title>Form Handling</title>
</head>
<body>
<form method="POST">
Name: <input type="text" name="name">
<button type="submit">Submit</button>
</form>

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
FACULTY OF DIPLOMA STUDIES
Department of CE- DIPLOMA
09CE2404 – WEB TECHNOLOGY
echo "Hello, " . htmlspecialchars($_POST['name']);
}
?>
</body>
</html>

5. Database Connectivity:
Exercise : Connect a PHP script to MySQL.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "test";

$conn = new mysqli($servername, $username, $password, $database);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM users";


$result = $conn->query($sql);

if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "Name: " . $row['name'] . "<br>";
}
} else {
echo "No results found";
}

$conn->close();
?>

6. Mini Project:
Develop a responsive website integrating HTML, CSS, JavaScript, PHP, and MySQL.
Steps:
1. Create a homepage using HTML and CSS.
2. Add interactivity using JavaScript.
3. Create a backend for form submission using PHP.
4. Connect to a MySQL database to store and retrieve data.
Example code snippets for the project can be developed by combining the exercises above.
FACULTY OF DIPLOMA STUDIES
Department of CE- DIPLOMA
09CE2404 – WEB TECHNOLOGY

Instructional Methods
1. Combination of theoretical and practical sessions.
2. Hands-on experiments using HTML, CSS, JavaScript, PHP, and MySQL.
3. Use of supplementary resources such as W3Schools , NPTEL and Alison.

References
1. Bruce Lawson & Remy Sharp, "Introducing HTML5," Pearson Education.
2. Steven Holzner, "PHP: The Complete Reference," McGraw-Hill Osborne.
3. Julie C. Meloni, "Teach Yourself PHP, MySQL, and Apache All-in-One," Pearson Education.
4. Ralph Moseley & M. T. Savaliya, "Developing Web Applications," Wiley India

Assignment:
1. Introduction to Web Development
• Research and write a short report on the history of the internet, the evolution of the World Wide
Web, and the key differences between Web 2.0 and Web 3.0. Include a discussion on the
implications of these advancements for the future of the web.
2. HTML & CSS Fundamentals
• Create a simple one-page website for a local business (e.g., a restaurant, a bookstore, or a small
shop). The website should include:
o A header with the business logo and navigation links.
o A main content section with information about the business, products or services, and
contact details.
o A footer with copyright information and social media links.
o Use CSS to style the layout, colors, fonts, and overall appearance of the website.
o Ensure the website is responsive and looks good on different screen sizes.
3. JavaScript Fundamentals
• Create a simple interactive quiz using plain JavaScript. The quiz should have at least 5 multiple-
choice questions. Use JavaScript to:
o Display the questions and answer choices.
o Validate user input and provide feedback on correct/incorrect answers.
o Calculate and display the user's final score.
o Consider adding features like a timer or a progress bar.
4. jQuery
• Enhance the quiz from the previous assignment using jQuery. Use jQuery to:
o Create a more visually appealing interface for the quiz.
o Add animations or effects to the quiz elements.
o Make the quiz more interactive by using jQuery event handlers.
5. PHP Fundamentals
• Create a simple PHP script that:
o Prompts the user to enter their name and age.
o Validates the input to ensure the age is a number and within a reasonable range.
FACULTY OF DIPLOMA STUDIES
Department of CE- DIPLOMA
09CE2404 – WEB TECHNOLOGY
o Displays a personalized message based on the user's age (e.g., "Welcome, you are an adult!"
or "Hello, you are a minor.").
6. PHP & Databases (MySQL)
• Create a simple PHP application that allows users to:
o Add new books to a database (title, author, ISBN).
o Search for books by title or author.
o Display a list of all books in the database.
o (Optional) Allow users to update or delete existing book records.

You might also like