Scribd
Upload
7 views10 pages

Practicle_2

Uploaded by

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

Practicle_2

Uploaded by

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

Practicle :2

Implement a web page index.htm for any client website (e.g., a restaurant website project) using
following: a. HTML syntax: heading tags, basic tags and attributes, frames, tables, images, lists, links for
text and images, forms etc. b. Use of Internal CSS, Inline CSS, External CSS

Title : "Designing a Client Website for a Restaurant Using HTML and CSS"

Objective:

The main objective of this practical is to implement a simple web page (index.htm) for a client website
(restaurant in this case) by using fundamental HTML and CSS techniques. The goal is to use various
HTML tags such as headings, tables, images, lists, forms, and links, as well as applying different CSS
methods (internal, inline, and external) to create a well-structured and visually appealing website.

Theory:

HTML (HyperText Markup Language) is the standard language used to create and structure
content on the web. It defines the structure of a webpage using a series of tags such as headings,
paragraphs, lists, tables, links, and forms.

CSS (Cascading Style Sheets) is used to control the layout and style of the HTML elements. It
allows web designers to apply various styles like colors, fonts, and spacing to improve the visual
appeal of the web page. CSS can be applied in three different ways:

1. Inline CSS: Applied directly within the HTML element using the style attribute.
2. Internal CSS: Defined within the <style> tags in the head section of the HTML
document.
3. External CSS: Defined in a separate .css file and linked to the HTML file.

Algorithm:

1. Start the HTML document.


2. Define the structure of the web page using HTML tags (like headings, paragraphs, tables,
forms, etc.).
3. Add images, text, and links related to the restaurant, such as menu, location, and contact.
4. Use Internal CSS within the <style> tags for styling the web page.
5. Use Inline CSS for specific element styling.
6. Link External CSS (if applicable) for consistent styling across multiple pages.
7. Use frames (if needed) to display different sections of the website in separate panels.
8. Create forms for user interaction, such as booking a table or sending feedback.
9. End the HTML document.

Flowchart:
+-----------------------+

| Start Website |

+-----------------------+

+-----------------------+

| Create HTML Structure |

| (headings, tables, |

| images, lists, links)|

+-----------------------+

+-----------------------+

| Add Content (text, |

| images, menus, etc.) |

+-----------------------+

+-----------------------+

| Add Internal CSS for |

| styling elements |

+-----------------------+

|
v

+-----------------------+

| Add Inline CSS where |

| necessary |

+-----------------------+

+-----------------------+

| Link External CSS (if |

| applicable) |

+-----------------------+

+-----------------------+

| Add Forms (for user |

| input, bookings, etc.)|

+-----------------------+

+-----------------------+

| End Webpage |

+-----------------------+
Conclusion:

This practical demonstrates the fundamental skills required to create a simple restaurant website
using HTML and CSS. By using various tags and CSS techniques, we can design a functional
and visually appealing website. This project introduces web design concepts such as layout,
styling, and user interaction through forms, all of which are essential for creating real-world
websites.

Code :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Restaurant Website</title>

<style>

/* Internal CSS */

body {

font-family: Arial, sans-serif;

background-color: #f8f8f8;

margin: 0;

padding: 0;

header {

background-color: #333;

color: white;
padding: 15px;

text-align: center;

nav {

background-color: #444;

overflow: hidden;

nav a {

float: left;

display: block;

color: white;

padding: 14px 20px;

text-align: center;

text-decoration: none;

nav a:hover {

background-color: #ddd;

color: black;

section {

padding: 20px;

footer {
text-align: center;

padding: 10px;

background-color: #333;

color: white;

.menu-table {

width: 100%;

border-collapse: collapse;

.menu-table, th, td {

border: 1px solid #ddd;

th, td {

padding: 12px;

text-align: center;

.menu-table th {

background-color: #333;

color: white;

.form-container {

background-color: #fff;

padding: 20px;
border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

</style>

</head>

<body>

<header>

<h1>Welcome to Our Restaurant</h1>

</header>

<nav>

<a href="#home">Home</a>

<a href="#menu">Menu</a>

<a href="#contact">Contact</a>

</nav>

<section id="home">

<h2>About Us</h2>

<p>Welcome to our restaurant! We serve the finest dishes, made with fresh ingredients.</p>

<img src="restaurant.jpg" alt="Restaurant Image" style="width:100%; max-width:600px;">

</section>
<section id="menu">

<h2>Our Menu</h2>

<table class="menu-table">

<tr>

<th>Dish</th>

<th>Price</th>

</tr>

<tr>

<td>Pizza</td>

<td>$12</td>

</tr>

<tr>

<td>Pasta</td>

<td>$10</td>

</tr>

<tr>

<td>Salad</td>

<td>$8</td>

</tr>

</table>

</section>

<section id="contact">
<h2>Contact Us</h2>

<div class="form-container">

<form action="submit_form.php" method="post">

<label for="name">Name:</label><br>

<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label><br>

<input type="email" id="email" name="email"><br><br>

<label for="message">Message:</label><br>

<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

<input type="submit" value="Submit">

</form>

</div>

</section>

<footer>

<p>&copy; 2024 Restaurant Website. All rights reserved.</p>

</footer>

</body>

</html>

You might also like