Practice: Building Your First HTML Page

Practice Objective

Create a simple, well-structured HTML page that displays your name, a brief description, an image, and links. You’ll use basic HTML tags to organize content, ensuring correct document structure and semantic usage.

Practice Outline

1. Step-by-Step Guide for Page Setup

Start with the HTML Document Structure

Open your text editor and start a new file.

Add the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Your Name's Web Page</title>
</head>
<body>
 <!-- Content goes here -->
</body>
</html>

Add a Heading and Introduction
- Inside the <body> tag, add a main heading <h1> with your name.
- Write a short paragraph <p> describing yourself.
```
<h1>John Doe</h1>
<p>Hello! I am a web development student learning HTML, CSS, and JavaScript.</p>
```
Include an Image
- Use the <img> tag to add an image of yourself or an avatar.
- Ensure to set the alt attribute for accessibility.
```
<img src="profile.jpg" alt="John Doe Profile Picture" width="200">
```
Create a List of Hobbies or Interests
- Use an unordered list <ul> with list items <li> to display your hobbies or interests.
```
<h2>My Hobbies</h2>
<ul>
 <li>Reading</li>
 <li>Traveling</li>
 <li>Photography</li>
</ul>
```

Add Links to Your Social Profiles or Favorite Websites

Use the <a> tag to add links to your social media profiles or other websites you like.

<h2>Connect with Me</h2>
<p>
 <a href="https://twitter.com/johndoe">Twitter</a> |
 <a href="https://github.com/johndoe">GitHub</a>
</p>

Organize Content Using Semantic Tags
- Add <header>, <main>, and <footer> to structure your content.
```
<header>
 <h1>John Doe</h1>
 <p>Welcome to my personal web page!</p>
</header>
```
About Me

I am a student learning web development with a passion for design and technology.

My Hobbies
- Reading
- Traveling
- Photography
```
 <h2>Connect with Me</h2>
 <p>
     <a href="https://twitter.com/johndoe">Twitter</a> |
     <a href="https://github.com/johndoe">GitHub</a>
 </p>
```
© 2024 John Doe

```

2. Review and Testing

Save your file as index.html and open it in your browser.
Ensure that:
- All content is displayed correctly.
- Links are clickable and open the correct web pages.
- The image appears with proper sizing and alt text.

Additional Practice Ideas

Experiment by adding additional sections like "My Favorite Books" or "Travel Destinations" using <h3> for subheadings.
Use inline styling (e.g., <p style="color:blue;">) to add color to some text.

Self-Check Questions

Why is it important to use semantic HTML tags?
How does the alt attribute improve accessibility for images?
What happens if you omit the <!DOCTYPE html> declaration?

Summary and Reflection

You have successfully created a simple HTML page with structured content, using headings, lists, images, and links. By following this structure, your content is not only visually organized but also more accessible to search engines and screen readers.

Text 404-962-0908 with feedback and questions.

Reminder: After completing every two-week block, schedule a one-on-one meeting to review your work, ask questions, and receive personalized feedback.