LAB MANUAL
Course Code: CSI-506
Course Title: Web Design and
Development
Course Instructor:Muhammad Naeem Rafiq
Lab Instructor:Muhammad Naeem Rafiq
Department of Computer Sciences
Superior College Mian Channu
Course Description
This course provides a hands-on introduction to web design and development. Students will
explore HTML, CSS, JavaScript, and PHP, along with concepts such as responsive design,
accessibility, and database integration. The course culminates in a project that consolidates their
learning into a practical web application.
Course Objectives
• Learn foundational web technologies including HTML, CSS, and JavaScript.
• Build accessible and semantic web pages.
• Understand and implement responsive design principles.
• Integrate client-side and server-side scripting for dynamic web applications.
• Connect web applications to a MySQL database.
Learning Outcomes of Course
Upon successful completion, students will be able to:
1. Develop structured and accessible web pages using semantic HTML.
2. Style web pages effectively using CSS and responsive design techniques.
3. Write client-side scripts to manipulate the DOM and validate user inputs.
4. Build dynamic server-side functionality using PHP.
5. Design and connect a MySQL database with a PHP-based web application.
6. Deliver a comprehensive web project applying all learned concepts.
Books and Supporting Material
1. Nuckles, Craig, Web Applications: Concepts and Real World Design, Wiley 2006
2. Programming the World Wide Web (4th Edition) (Paperback), by Robert W.
Sebesta (Author), Paperback: 752 pages, Publisher: Addison Wesley; 4th edition
(August 17, 2007), ISBN-10: 0321489691
Tools and Lab Equipment
• Software and Tools:
o Text Editors: Visual Studio Code.
o Browsers: Google Chrome,
o Local Server: XAMPP or WAMP for running PHP and MySQL.
o Debugging Tools: Browser developer tools (Inspect Element).
• System Requirements:
o Operating System: Windows 10 or later, or macOS.
o Hardware: Minimum 4GB RAM, 10GB free disk space, and a modern web browser.
• Sample Data:
o Sample HTML/CSS templates for practice.
o Predefined MySQL database for form integration tasks.
Lab and Practical Details
Lab Title Practical Details
No.
1 Setting Up Your Install necessary tools (text editors, browsers), write basic
Development Environment, HTML templates, and understand HTML structure.
Implementation of HTML
2 Creating a Basic HTML Use <!DOCTYPE html>, <html>, <head>, and <body>. Add
Document headings, paragraphs, links, images, and lists. Use attributes
like href, src, and alt.
3 Lists, Tables, and Forms Implement ordered/unordered lists, create tables, and design
forms for user inputs.
4 Semantic HTML and Learn about semantic elements (<header>, <article>,
Accessibility <section>), and make web pages accessible for users with
disabilities.
5 Applying Basic CSS Style HTML elements with inline, internal, and external CSS.
6 Understanding the CSS Box Explore margins, borders, padding, and content properties in
Model web design.
7 Flexbox Layout Build layouts using CSS Flexbox for modern, responsive
designs.
8 Responsive Design with Use media queries to create web pages that adjust to different
Media Queries screen sizes.
9 JavaScript Basics and DOM Write basic JavaScript, access DOM elements, and create
Manipulation interactive web elements.
10 JavaScript Form Validation Validate forms and improve user experience with JavaScript.
and Enhancements
11 PHP Form Handling and Capture and validate form inputs using PHP scripts.
Validation
12 Connecting PHP to MySQL Establish connections between PHP and MySQL, and execute
Database basic CRUD operations.
13 Project Develop a web application project combining HTML, CSS,
JavaScript, and PHP.
14 Project Finalize the web application project and present it for
evaluation.
Lab Practicals
Lab 1: Setting Up Your Development Environment
Objective: Learn to install tools, configure the environment, and create a basic HTML page.
Practical 1: Installing Tools and Environment Setup
1. Install VS Code: Download and install Visual Studio Code from here.
2. Install Local Server: Install XAMPP or WAMP for PHP and MySQL support.
Download XAMPP from here.
3. Install Browser: Use a modern browser like Chrome or Firefox for web development.
Validation:
• Open VS Code, and ensure XAMPP's Apache server is running.
• Open Chrome and check localhost to confirm the local server is working.
Practical 2: Creating a Basic HTML Template
Steps:
1. Open VS Code and create a new file named [Link].
2. Write the following basic HTML structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Template</title>
</head>
<body>
<h1>Welcome to Web Design</h1>
<p>This is a basic HTML page.</p>
</body>
</html>
3. Save the file and open it in a browser.
Output: A simple webpage with a heading and paragraph.
Practical 3: Exploring Browser Developer Tools
Steps:
1. Open your HTML file in Chrome.
2. Right-click anywhere on the page and click Inspect or press F12.
3. In the Elements tab, you can view and edit the DOM tree dynamically.
4. Make a temporary change by editing the text of your <h1> element in the DOM.
Output: Observe the live changes made to the webpage directly through the browser.
Lab 2: Creating a Basic HTML Document
Objective: Use basic HTML tags such as headings, paragraphs, links, and lists.
Practical 1: Adding Headings and Paragraphs
Steps:
1. Extend the [Link] file:
html
<h1>HTML Basics</h1>
<h2>Learning Headings</h2>
<p>HTML stands for HyperText Markup Language. It is used to create webpages.</p>
<p>This is a paragraph explaining the basics of HTML.</p>
Output: Displays headings and descriptive paragraphs on the webpage.
Practical 2: Adding Links and Images
Steps:
1. Add a clickable link and an image:
html
<a href="[Link] target="_blank">Visit Example</a>
<br>
<img src="[Link] alt="Sample Image">
Explanation:
• target="_blank" ensures the link opens in a new tab.
• The alt attribute provides alternative text for images.
Output: A clickable link and an image displayed on the webpage.
Practical 3: Adding Ordered and Unordered Lists
Steps:
1. Create lists:
html
<h2>Ordered List</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Install Tools</li>
<li>Set Up Environment</li>
<li>Learn HTML Basics</li>
</ul>
Output: Ordered and unordered lists with items displayed.
Lab 3: Lists, Tables, and Forms
Objective: Create and structure lists, tables, and forms in HTML.
Practical 1: Advanced Lists
Steps:
1. Create nested lists:
html
<h2>Nested List</h2>
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>PHP</li>
<li>MySQL</li>
</ul>
</li>
</ul>
Output: A nested list categorizing frontend and backend technologies.
Practical 2: Adding Tables
Steps:
1. Create a student information table:
html
<h2>Student Table</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>20</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>22</td>
<td>B</td>
</tr>
</table>
Output: A table with rows and columns representing student data.
Practical 3: Designing Forms
Steps:
1. Add a form:
html
<h2>Student Registration</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<button type="submit">Register</button>
</form>
Output: A form with text and email input fields and a submit button.
Lab 4: Semantic HTML and Accessibility
Objective: Use semantic elements and ensure webpage accessibility.
Practical 1: Adding Semantic Elements
Steps:
1. Use <header>, <main>, <section>, and <footer> tags:
html
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<section>
<h2>About Us</h2>
<p>We provide web development tutorials.</p>
</section>
</main>
<footer>
<p>© 2024 Web Development</p>
</footer>
Output: A well-structured webpage with sections for header, main content, and footer.
Practical 2: Adding Accessibility Features
Steps:
1. Use the aria-label attribute and ensure alternative text for images:
html
<img src="[Link]" alt="Sample Image for Accessibility">
<a href="[Link]" aria-label="Navigate to the main page">Click Here</a>
Output: Enhanced accessibility for screen readers.
Practical 3: Accessible Form Design
Steps:
1. Add placeholders and labels for inputs:
html
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password"><br><br>
<button type="submit">Submit</button>
</form>
Output: An accessible form with labels and placeholders.
Lab 5: Applying Basic CSS
Objective: Use CSS to style web pages.
Practical 1: Inline Styling
Steps:
1. Add inline styles to HTML elements:
html
<p style="color: blue; font-size: 20px;">This is a styled paragraph.</p>
Output: The paragraph text appears in blue with a larger font.
Practical 2: Internal CSS
Steps:
1. Add a <style> section within <head>:
html
<style>
h1 {
color: green;
text-align: center;
}
p{
font-family: Arial, sans-serif;
}
</style>
Output: All <h1> elements are green and centered, and paragraphs use Arial font.
Practical 3: External CSS
Steps:
1. Create a file named [Link] with the following content:
css
body {
background-color: #f4f4f4;
font-size: 16px;
}
h1 {
color: red;
}
2. Link it in the HTML file:
html
<link rel="stylesheet" href="[Link]">
Output: Styles are applied to the entire webpage via an external file.
Lab 6: Understanding the CSS Box Model
Objective: Learn how margins, padding, borders, and content work together in the CSS box
model.
Practical 1: Visualizing the Box Model
Steps:
1. Add a styled <div> element to your HTML file:
html
<div style="width: 200px; height: 100px; background-color: lightblue; padding: 20px; border: 5px solid black;
margin: 10px;">
This is a box model example.
</div>
Explanation:
• The padding adds space inside the element, around the content.
• The border surrounds the padding.
• The margin adds space outside the element.
Output: Observe the spacing and structure around the <div>.
Practical 2: Adjusting Margins and Padding
Steps:
1. Add another <div> with different margin and padding values:
html
<div style="width: 300px; height: 150px; background-color: peachpuff; padding: 40px; margin: 30px;">
Another box with larger padding and margin.
</div>
Output: Compare the two boxes and observe the effects of different values.
Practical 3: Experimenting with Border Styles
Steps:
1. Apply various border styles to elements:
html
<div style="border: 3px dashed red; padding: 10px;">Dashed Border</div>
<div style="border: 5px dotted blue; padding: 15px;">Dotted Border</div>
<div style="border: 4px double green; padding: 20px;">Double Border</div>
Output: Different border styles are displayed around the boxes.
Lab 7: Flexbox Layout
Objective: Learn how to use CSS Flexbox to create responsive layouts.
Practical 1: Align Items Horizontally and Vertically
Steps:
1. Create a parent container with Flexbox:
html
<div style="display: flex; justify-content: center; align-items: center; height: 300px; background-color: lightgray;">
<div style="background-color: lightblue; padding: 20px;">Centered Box</div>
</div>
Explanation:
• justify-content: center centers the item horizontally.
• align-items: center centers the item vertically.
Output: A box is centered inside the container.
Practical 2: Create a Navigation Bar
Steps:
1. Design a navigation bar using Flexbox:
html
<nav style="display: flex; justify-content: space-around; background-color: lightblue; padding: 10px;">
<a href="#" style="text-decoration: none;">Home</a>
<a href="#" style="text-decoration: none;">About</a>
<a href="#" style="text-decoration: none;">Services</a>
<a href="#" style="text-decoration: none;">Contact</a>
</nav>
Output: A horizontal navigation bar with evenly spaced links.
Practical 3: Building a Flexbox Grid
Steps:
1. Create a grid layout:
html
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<div style="background-color: lightcoral; padding: 20px; flex: 1;">Box 1</div>
<div style="background-color: lightgreen; padding: 20px; flex: 1;">Box 2</div>
<div style="background-color: lightblue; padding: 20px; flex: 1;">Box 3</div>
</div>
Output: A flexible grid that adjusts the layout based on screen size.
Lab 8: Responsive Design with Media Queries
Objective: Use media queries to make webpages responsive.
Practical 1: Change Background Color Based on Screen Width
Steps:
1. Add a <style> section with a media query:
html
<style>
body {
background-color: lightblue;
}
@media (max-width: 600px) {
body {
background-color: lightgreen;
}
}
</style>
Explanation: The background color changes to green when the screen width is 600px or less.
Output: Test by resizing the browser window.
Practical 2: Responsive Navigation Bar
Steps:
1. Modify the navigation bar:
html
<style>
nav {
display: flex;
justify-content: space-around;
background-color: lightblue;
padding: 10px;
}
@media (max-width: 600px) {
nav {
flex-direction: column;
}
}
</style>
Output: The navigation links stack vertically on smaller screens.
Practical 3: Responsive Image Gallery
Steps:
1. Add an image gallery with responsive styling:
html
<style>
.gallery img {
width: 100%;
max-width: 300px;
}
</style>
<div class="gallery">
<img src="[Link] alt="Image 1">
<img src="[Link] alt="Image 2">
<img src="[Link] alt="Image 3">
</div>
Output: Images resize based on screen size.
Lab 9: JavaScript Basics and DOM Manipulation
Objective: Use JavaScript to interact with and manipulate DOM elements.
Practical 1: Writing Basic JavaScript
Steps:
1. Add a <script> tag to your HTML file:
html
<script>
alert("Welcome to JavaScript Basics!");
</script>
Output: A popup alert appears when the page loads.
Practical 2: Changing DOM Content Dynamically
Steps:
1. Create an element with an id and modify its content:
html
<p id="demo">This is the original text.</p>
<script>
[Link]("demo").innerText = "This text has been changed with JavaScript!";
</script>
Output: The paragraph text is updated dynamically.
Practical 3: Adding Event Listeners
Steps:
1. Create a button and add an event listener:
html
<button id="myButton">Click Me!</button>
<script>
[Link]("myButton").addEventListener("click", function() {
alert("Button was clicked!");
});
</script>
Output: An alert appears when the button is clicked.
Lab 10: JavaScript Form Validation and Enhancements
Objective: Validate form inputs and enhance user experience with JavaScript.
Practical 1: Validate Required Fields
Steps:
1. Add a form with validation logic:
html
<form id="myForm">
<input type="text" id="name" placeholder="Enter your name">
<button type="button" onclick="validateForm()">Submit</button>
</form>
<script>
function validateForm() {
const name = [Link]("name").value;
if (name === "") {
alert("Name is required!");
} else {
alert("Form submitted successfully!");
}
}
</script>
Output: Alerts the user if the name field is empty.
Practical 2: Validate Email Format
Steps:
1. Add email validation:
html
<form id="emailForm">
<input type="email" id="email" placeholder="Enter your email">
<button type="button" onclick="validateEmail()">Submit</button>
</form>
<script>
function validateEmail() {
const email = [Link]("email").value;
const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if () {
alert("Please enter a valid email address.");
} else {
alert("Email is valid!");
}
}
</script>
Output: Ensures the user enters a valid email address.
Practical 3: Dynamic Error Messages
Steps:
1. Show error messages below inputs:
html
<form>
<input type="text" id="username" placeholder="Enter username">
<span id="error" style="color: red;"></span><br>
<button type="button" onclick="checkUsername()">Submit</button>
</form>
<script>
function checkUsername() {
const username = [Link]("username").value;
const error = [Link]("error");
if (username === "") {
[Link] = "Username cannot be empty.";
} else {
[Link] = "";
alert("Username accepted!");
}
}
</script>
Output: Displays an error message below the input field if validation fails.
Lab 11: PHP Form Handling and Validation
Objective: Use PHP to handle form data and perform server-side validation.
Practical 1: Handling Form Data
Steps:
1. Create an HTML form:
html
<form action="handle_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<button type="submit">Submit</button>
</form>
2. Create a PHP file (handle_form.php) to process the form:
php
<?php
$name = $_POST['name'];
$email = $_POST['email'];
echo "Name: $name<br>Email: $email";
?>
Output: Displays the submitted name and email on a new page.
Practical 2: Validating Form Inputs in PHP
Steps:
1. Extend handle_form.php to validate inputs:
php
<?php
$name = $_POST['name'];
$email = $_POST['email'];
if (empty($name) || empty($email)) {
echo "All fields are required!";
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Invalid email format!";
} else {
echo "Name: $name<br>Email: $email";
}
?>
Output: Displays error messages for empty or invalid inputs.
Practical 3: Redirecting After Form Submission
Steps:
1. Add a redirect after successful submission:
php
<?php
$name = $_POST['name'];
$email = $_POST['email'];
if (!empty($name) && filter_var($email, FILTER_VALIDATE_EMAIL)) {
header("Location: [Link]");
exit;
} else {
echo "Please correct the errors!";
}
?>
2. Create a [Link] file to show a success message:
html
<h1>Form Submitted Successfully!</h1>
Output: Redirects to a success page upon valid form submission.
Lab 12: Connecting PHP to MySQL Database
Objective: Establish database connections using PHP and perform CRUD operations.
Practical 1: Connecting PHP to MySQL
Steps:
1. Create a PHP file to connect to MySQL:
php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "web_lab";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>
Output: Displays "Connected successfully" if the connection is established.
Practical 2: Inserting Data into a Database
Steps:
1. Create a database table in MySQL:
sql
CREATE TABLE students (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50),
email VARCHAR(50)
);
2. Insert data using PHP:
php
<?php
$name = "John Doe";
$email = "john@[Link]";
$sql = "INSERT INTO students (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
?>
Output: Adds a new record to the students table.
Practical 3: Retrieving Data from a Database
Steps:
1. Fetch and display records:
php
<?php
$sql = "SELECT id, name, email FROM students";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "ID: " . $row["id"]. " - Name: " . $row["name"]. " - Email: " . $row["email"]. "<br>";
}
} else {
echo "0 results";
}
?>
Output: Lists all records from the students table.