1.
Web Page for a Bike Showroom
Objective: Create a webpage for a bike showroom with a clean, interactive design. The page should have
three sections using a layout mechanism:
Top Row: Showroom name.
Left Column: Navigation with bike brands as hyperlinks.
Right Column: Dynamic area displaying selected bike brand models and specifications.
Implementation:
Frames-based Layout (deprecated but illustrative):
<frameset rows="20%, 80%">
<frame name="header" src="header.html">
<frameset cols="20%, 80%">
<frame name="navigation" src="navigation.html">
<frame name="content" src="welcome.html">
</frameset>
</frameset>
Modern Approach (CSS Flexbox/Grid): Replace frames with <div> elements.
<div id="header">Showroom Name</div>
<div id="main">
<div id="nav">
<a href="#brand1" onclick="loadContent('brand1')">Brand 1</a><br>
<a href="#brand2" onclick="loadContent('brand2')">Brand 2</a>
</div>
<div id="content">Welcome! Select a brand to view details.</div>
</div>
CSS for Styling:
#header { background: #0044cc; color: white; text-align: center; padding: 10px; }
#main { display: flex; height: calc(100vh - 50px); }
#nav { width: 20%; background: #ddd; padding: 10px; }
#content { flex: 1; padding: 20px; }
Dynamic JavaScript for Content Loading:
function loadContent(brand) {
document.getElementById('content').innerHTML = `Details for ${brand}`;
2. Job Application Form
Objective: Design a user-friendly and visually appealing form for job applications. The form should
capture:
Personal Information: Name, qualification, and gender.
Buttons: Submit and Cancel.
HTML Structure:
<form action="submit_application.php" method="post">
<fieldset>
<legend>Job Application</legend>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="degree">Highest Qualification:</label>
<select id="degree" name="degree">
<option value="bachelor">Bachelor's</option>
<option value="master">Master's</option>
<option value="phd">PhD</option>
</select><br><br>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<button type="submit">Submit</button>
<button type="reset">Cancel</button>
</fieldset>
</form>
CSS for Styling:
form {
width: 50%;
margin: auto;
font-family: Arial, sans-serif;
fieldset {
border: 2px solid #0044cc;
padding: 10px;
border-radius: 5px;
label {
display: block;
margin-bottom: 5px;
input, select, button {
margin: 10px 0;
padding: 5px;
}
button {
background-color: #0044cc;
color: white;
border: none;
cursor: pointer;
button:hover {
background-color: #003399;
3. Development Environment: LAMP/WAMP Stack
Objective: Set up a development environment using either the LAMP (Linux, Apache, MySQL, PHP) or
WAMP (Windows, Apache, MySQL, PHP) stack.
LAMP Installation on Linux:
Install Apache: sudo apt install apache2.
Install MySQL: sudo apt install mysql-server.
Install PHP: sudo apt install php libapache2-mod-php.
Test Setup: Create a phpinfo() file in /var/www/html.
WAMP Installation on Windows:
Download WAMP server.
Install and launch. Use the www directory for PHP scripts.
Apache Role:
Handles HTTP requests and serves static (HTML) and dynamic (PHP) content.
Works with PHP to process scripts and MySQL to query data.
4. Multi-Page Website for a Small Business
Objective: Create a cohesive website with three pages: Homepage, About Page, and Contact Page.
Homepage: Introduce the business with a welcome message and banner.
About Page: Describe the business's vision and services.
Contact Page: Collect customer inquiries.
HTML and CSS Examples:
<!-- Homepage -->
<div>
<h1>Welcome to [Business Name]</h1>
<p>Your go-to solution for [services/products].</p>
</div>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
h1 {
color: #0044cc;
p{
font-size: 18px;
line-height: 1.5;
5. Blog Page Design and HTTP Sequence
Objective: Create a blog page with optimal readability and describe the HTTP request/response flow.
HTML Structure:
<article>
<h1>Blog Title</h1>
<p>Welcome to our latest post.</p>
<img src="blog-image.jpg" alt="Blog visual">
<table>
<tr><th>Feature</th><th>Description</th></tr>
<tr><td>Speed</td><td>Fast and reliable</td></tr>
</table>
</article>
HTTP Request/Response Process:
Browser Sends GET Request: Requests the HTML page.
Server Sends Response: Returns the HTML content.
Browser Sends Additional Requests:
CSS for styling.
JavaScript for interactivity.
Images and other assets.
Server Responds: Provides each requested resource.
Browser Renders Page: Combines all resources to display the content
