Project Overview:For this project, we will create a simple website for a fictional coffee shop. The website will have a homepage, a menu page, and a contact page. We will use HTML to structure the content of our pages and CSS to style them.
Step 1: Setting Up the Project:
The first step is to create a new directory for our project (coffee shop). Inside this directory, create three HTML files: index.html, menu.html, and contact.html.
coffee-shop/
├── index.html
├── menu.html
└── contact.html
Open index.html in your text editor and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Coffee Shop</title>
</head>
<body>
<h1>Welcome to Coffee Shop</h1>
</body>
</html>
This code defines the basic structure of our HTML page. The <head> element contains metadata about the page, including the page title, which will be displayed in the browser's title bar. The <body> element contains the visible content of the page, including a heading (<h1>) that welcomes the user to our coffee shop.
Save the file and open it in your web browser to see the result. You should see the text "Welcome to Coffee Shop" displayed in your browser window.
Step 2: Creating the Menu Page
Now, let's create the menu page. Open menu.html in your text editor and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Coffee Shop - Menu</title>
</head>
<body>
<h1>Our Menu</h1>
<ul>
<li>Espresso</li>
<li>Cappuccino</li>
<li>Latte</li>
</ul>
</body>
</html>
This code is similar to the code for index.html, but with a different title and content. The <h1> element displays the heading "Our Menu", and the <ul> element creates an unordered list of coffee drinks.
Save the file and open it in your web browser to see the result. You should see a list of coffee drinks displayed on the page.
Step 3: Creating the Contact Page
Finally, let's create the contact page. Open contact.html in your text editor and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Coffee Shop - Contact</title>
</head>
<body>
<h1>Contact Us</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Send">
</form>
</body>
</html>
This code defines a form that allows users to send us a message. The <label> elements provide labels for the form fields, and the <input> and <textarea> elements define the actual fields. The <input> element with the type="submit" attribute creates a submit button that users can click to send their message.
Save the file and open it in your web browser to see the result. You should see a form with fields for name, email, and message, as well as a submit button.
Step 4: Adding Navigation
Now that we have all of our pages created, let's add navigation to allow users to move between them. Open index.html in your text editor and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Coffee Shop</title>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<h1>Welcome to Coffee Shop</h1>
</body>
</html>
This code adds a navigation bar to the top of the page, with links to each of our pages. The <nav> element contains the navigation bar, and the <ul> and <li> elements create an unordered list of links. The <a> elements define the actual links, with the href attribute specifying the URL of each page.
Repeat this step for menu.html and contact.html to add navigation to all of our pages.
Step 5: Styling the Pages
Finally, let's add some style to our pages to make them look more visually appealing. Create a new file called style.css in the same directory as our HTML files, and add the following code:
body {
font-family: Arial, sans-serif;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
nav li {
display: inline-block;
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-top: 50px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 10px 0;
}
This code adds some basic styling to our pages. The body selector sets the font family for the entire page to Arial, sans-serif. The nav selector sets the background color, text color, and padding for our navigation bar. The h1 selector centers the heading on the page and adds some margin to the top. The ul and li selectors remove the default margin and padding from our lists and add some margin between list items.
To apply this style to our pages, add the following line to the <head> section of each HTML file:
This code links our CSS file to our HTML file, so that the styles defined in our CSS file are applied to our HTML elements.
<link rel="stylesheet" href="style.css">
Save all of the files and open index.html in your web browser to see the final result. You should see a navigation bar at the top of the page, with links to our menu and contact pages, and a heading that welcomes the user to our coffee shop. Clicking on the links should take you to the appropriate pages, and the styling should make the pages look more visually appealing.
Comments
Post a Comment