No products in the cart.
Introduction
In this tutorial, we will create an About page for our website using HTML. The About page will:
- Reuse the structure from the `index.html` page.
- Add an image and a descriptive paragraph.
- Duplicate the paragraph four times.
- Add a final paragraph with a link to the Contact page.
Step 1: Copy the Structure from `index.html`
To maintain consistency across all pages, we will start by copying the entire code from `index.html` and pasting it into a new file called `about.html`.
Step 2: Add About Page Content
Right below the navigation menu, add a section that includes an image and a short description.
Updated `about.html` Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
</head>
<body>
<h1>About</h1>
<div>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="portfolio.html">Portfolio</a> |
<a href="contact.html">Contact</a>
</div>
<hr>
<div>
<img width="200" src="assets/images/man.webp">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellendus aliquam quia perferendis nulla ea hic doloribus rem repellat beatae quam minima porro, modi, quos harum rerum impedit velit laudantium?</p>
</div>
<hr>
<div>
<img width="200" src="assets/images/man.webp">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellendus aliquam quia perferendis nulla ea hic doloribus rem repellat beatae quam minima porro, modi, quos harum rerum impedit velit laudantium?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellendus aliquam quia perferendis nulla ea hic doloribus rem repellat beatae quam minima porro, modi, quos harum rerum impedit velit laudantium?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellendus aliquam quia perferendis nulla ea hic doloribus rem repellat beatae quam minima porro, modi, quos harum rerum impedit velit laudantium?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellendus aliquam quia perferendis nulla ea hic doloribus rem repellat beatae quam minima porro, modi, quos harum rerum impedit velit laudantium?</p>
</div>
<hr>
<div>
<img width="200" src="assets/images/man.webp">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellendus aliquam quia perferendis nulla ea hic doloribus rem repellat beatae quam minima porro, modi, quos harum rerum impedit velit laudantium?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellendus aliquam quia perferendis nulla ea hic doloribus rem repellat beatae quam minima porro, modi, quos harum rerum impedit velit laudantium?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellendus aliquam quia perferendis nulla ea hic doloribus rem repellat beatae quam minima porro, modi, quos harum rerum impedit velit laudantium?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellendus aliquam quia perferendis nulla ea hic doloribus rem repellat beatae quam minima porro, modi, quos harum rerum impedit velit laudantium?</p>
<p><a href="contact.html">Contact Me</a></p>
</div>
</body>
</html>
Step 3: Understanding the New Elements
- Image (`<img>`): Displays an image of the person the page is about.
- Paragraphs (`<p>`): Contains text describing the person or business.
- Repeated paragraphs: Provide additional information or extend details.
- Link (`<a>` to `contact.html`): Allows visitors to navigate to the Contact page.
Great job! You’ve successfully built an About page using HTML. The next lesson will be to build a Contact Form.