!
Task Overview
In this task, you will create a simple website consisting of two HTML pages about lions. You will use HTML to structure the content and an external CSS file to style the pages. You will also link the pages together using navigation links.
Part 1: Design Wireframes
Before you begin coding, you need to create wireframes for your website. These will show the basic layout of the two pages you will build:
-
Home Page:
- A header with the website title (e.g., "All About Lions").
- A navigation bar with links to both the Home and Facts pages.
- A section introducing lions.
- A footer with your name and the current year.
-
Facts Page:
- A header with the page title (e.g., "Lion Facts").
- A section with facts lions (e.g., where they live, what they eat).
- A navigation bar with links back to the Home page.
- A footer with your name and the current year.
Part 2: Create the HTML Files
Now that your wireframes are ready, itโs time to code the two pages. Create two HTML files: index.html and facts.html.
Example Code for index.html (Home Page)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All About Lions</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>All About Lions</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="facts.html">Lion Facts</a>
</nav>
<section>
<p>Welcome to my website about lions! Here, you'll learn about their habitat, behavior, and more.</p>
</section>
<footer>
<p>ยฉ 2024 Your Name</p>
</footer>
</body>
</html>
Example Code for facts.html (Facts Page)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lion Facts</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Lion Facts</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="facts.html">Lion Facts</a>
</nav>
<section>
<p>Lions live in the grasslands of Africa. They are known as the "king of the jungle."</p>
<ul>
<li>Lions can weigh up to 190kg.</li>
<li>They live in groups called prides.</li>
<li>Lions are carnivores and hunt animals such as zebras and antelopes.</li>
</ul>
</section>
<footer>
<p>ยฉ 2024 Your Name</p>
</footer>
</body>
</html>
Part 3: Create the External CSS File
Create a styles.css file and add styles for both pages. Hereโs an example of how your CSS might look:
CSS
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
header {
background-color: #FF5733;
padding: 10px;
text-align: center;
color: white;
}
nav {
text-align: center;
margin: 20px;
}
nav a {
text-decoration: none;
margin: 0 10px;
color: #FF5733;
}
nav a:hover {
color: #333;
}
section {
text-align: center;
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
Part 4: Link the Pages
Make sure the navigation links work. Clicking "Home" should take you to index.html, and clicking "Lion Facts" should take you to facts.html.
Part 5: Submit
Submit the following:
- Your wireframes for both pages.
- The HTML and CSS files.