LAB MANUAL
Web Development & Graphics Laboratory
List of Experiments
1. Web Development
A. Building a Wikipedia Clone Website
1.1 Understanding the structure and layout of Wikipedia
1.2 Implementing navigation, content sections, and formatting
B. Design and Implement Student Course Registration HTML Form
2. Building an E-commerce Site
2.1 Wireframing and Prototyping
2.2 Responsive Design
2.3 Adopting CSS Frameworks
3. Graphics
3.1 Installation of Image Editing Software (GIMP/Photoshop)
3.2 Basic Image Editing Techniques (Cropping, Resizing, Color Adjustments)
Experiment 1.A: Building a Wikipedia Clone Website
Aim
To design and implement a Wikipedia-style clone using HTML and CSS.
Requirements
• Software: VS Code/Sublime, Browser
• Knowledge of HTML and CSS
Procedure
1. Study the layout of Wikipedia (Header, Sidebar, Main content, Footer).
2. Create an HTML page with <header>, <nav>, <section>, <aside>, <footer>.
3. Add navigation links in the sidebar.
4. Format headings, paragraphs, lists, and images similar to Wikipedia style.
5. Apply CSS for layout, font styles, and background.
6. Test in a browser for correctness.
Sample Code
<!DOCTYPE html>
<html>
<head>
<title>Wikipedia Clone</title>
<style>
body { font-family: Arial; margin: 0; padding: 0; }
header { background: #f8f9fa; padding: 10px; text-align: center; }
nav { width: 200px; float: left; background: #eee; padding: 10px; }
section { margin-left: 220px; padding: 10px; }
footer { background: #f8f9fa; text-align: center; padding: 10px; margin-top: 20px; }
</style>
</head>
<body>
<header><h1>Wikipedia Clone</h1></header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Science</a></li>
<li><a href="#">Technology</a></li>
</ul>
</nav>
<section>
<h2>Article Title</h2>
<p>This is a sample Wikipedia-like article content.</p>
</section>
<footer>Wikipedia Clone © 2025</footer>
</body>
</html>
Experiment 1.B: Student Course Registration Form
Aim
To design and implement an HTML form for student course registration.
Requirements
• HTML, CSS
• Browser
Procedure
7. Create a form using <form> tag.
8. Add fields: Name, Roll Number, Department, Email, Mobile, Course selection.
9. Include Submit and Reset buttons.
10. Apply CSS styling for proper alignment.
11. Validate fields using HTML5 attributes.
Sample Code
<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
</head>
<body>
<h2>Course Registration Form</h2>
<form>
Name: <input type="text" name="name" required><br><br>
Roll No: <input type="text" name="roll" required><br><br>
Department: <input type="text" name="dept"><br><br>
Email: <input type="email" name="email"><br><br>
Mobile: <input type="tel" name="mobile"><br><br>
Select Course:
<select name="course">
<option>Web Development</option>
<option>Graphics</option>
<option>E-commerce</option>
</select><br><br>
<input type="submit" value="Register">
<input type="reset" value="Reset">
</form>
</body>
</html>
Experiment 2: Building an E-commerce Site
Aim
To design and implement a basic E-commerce site with responsive design and CSS
frameworks.
Requirements
• HTML, CSS, JavaScript
• Bootstrap/Tailwind CSS framework
• Browser
Procedure
12. Create a wireframe for homepage, product page, and cart using Figma/Canva or
sketches.
13. Design HTML structure for header, navigation, product section, and footer.
14. Apply responsive design using CSS media queries or Bootstrap grid system.
15. Adopt a CSS framework like Bootstrap/Tailwind to style navigation, product cards, and
layout.
16. Add interactivity with JavaScript (optional for cart, product filtering).
17. Test site on desktop, tablet, and mobile.
Sample Code
<!DOCTYPE html>
<html>
<head>
<title>E-commerce Site</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyShop</a>
</nav>
<div class="container mt-4">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="product.jpg" class="card-img-top" alt="Product">
<div class="card-body">
<h5 class="card-title">Product Name</h5>
<p class="card-text">$100</p>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Experiment 3: Graphics
Aim
To install image editing software and perform basic editing operations.
Requirements
• Software: GIMP / Photoshop
Procedure
18. Download and install GIMP (free) or Photoshop (licensed).
19. Open the application and import an image.
20. Use Crop tool to cut unwanted areas.
21. Resize the image using Image → Scale option.
22. Adjust brightness, contrast, or color balance.
23. Save the edited image in multiple formats (JPG, PNG).
Execution Steps
1. Open GIMP/Photoshop.
2. Load an image (File → Open).
3. Apply Crop tool by selecting the area and pressing Enter.
4. Resize image from Image menu.
5. Adjust colors using Colors → Brightness/Contrast.
6. Save the file using File → Export As.
Output
An edited image with cropping, resizing, and color adjustments.
Viva Questions (Experiment 2)
1. What is the difference between a wireframe and a prototype?
2. How does responsive design work in web development?
3. What are the advantages of using CSS frameworks like Bootstrap or Tailwind?
4. Explain the concept of a grid system in Bootstrap.
5. How can you ensure cross-device compatibility in web design?
Viva Questions (Experiment 3)
1. What is the difference between raster and vector images?
2. Explain the role of layers in image editing.
3. What is the difference between lossless and lossy image formats?
4. How does cropping affect the resolution of an image?
5. Compare GIMP and Photoshop in terms of usability and features.
