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); }

#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