Day 3: Building a Simple Web Page with HTML

Welcome Back! Let’s Build Something Together

Hey there! It’s Day 3 of your web design journey, and today we’re going to do something exciting—create your first complete web page using HTML. You’ve already learned the basics, so now it’s time to put it all together and see what you can create. Don’t worry, I’ll guide you through every step, and by the end of this, you’ll have a simple yet functional web page to show off!

What You’ll Be Creating

Today, we’re going to build a simple web page that includes a heading, some text, an image, and a list. It’s going to be a basic page, but it will give you a solid foundation for understanding how different HTML elements work together.

Starting with the Basic Structure

Let’s start by setting up the basic structure of your web page. Open your text editor (like VS Code) and type the following:

<!DOCTYPE html>
<html>
<head>
    <title>My Simple Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a simple web page that I created while learning HTML.</p>
</body>
</html>

This code sets up the skeleton of your web page. Let’s break it down:

  • <!DOCTYPE html>: Tells the browser you’re using HTML5.
  • <html>: The root element that contains all your HTML code.
  • <head>: This section contains meta information about your page, like the title.
  • <title>: Sets the title of the page, which appears in the browser tab.
  • <body>: Contains the content of your page that will be visible to users.
  • <h1>: A heading element, perfect for titles.
  • <p>: A paragraph element, great for adding text.

Adding More Content

Now that we’ve got the basic structure, let’s add some more content to make it interesting. Let’s say you want to introduce yourself, add an image, and include a list of your favorite hobbies.

Here’s how you can do it:

<!DOCTYPE html>
<html>
<head>
    <title>About Me</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>Hi there! My name is Krishna, and I'm learning web design. Below are a few things about me.</p>
    
    <h2>My Favorite Hobbies</h2>
    <ul>
        <li>Reading</li>
        <li>Coding</li>
        <li>Traveling</li>
    </ul>
    
    <h2>Here’s a Picture of Me</h2>
    <img src="https://example.com/myphoto.jpg" alt="A picture of me">
    
    <p>I'm excited to learn more and build amazing websites!</p>
</body>
</html>

Let’s talk about what we’ve added:

  • <h2>: A second-level heading, used to introduce new sections of your page.
  • <ul>: An unordered list, which is great for listing items. Each item in the list is wrapped in an <li> (list item) tag.
  • <img>: The image tag, used to add pictures to your webpage. The src attribute tells the browser where to find the image, and the alt attribute provides a description of the image in case it doesn’t load.

Making It Yours

This is your chance to get creative! Change the text, add your own image, or include additional information about yourself. You could add more headings, lists, or even try adding links with the <a> tag. For example, if you want to link to your favorite website, you could write:

<p>Check out my favorite website: <a href="https://ramsetu.info">Ram Setu Info</a></p>

Saving and Viewing Your Web Page

Once you’ve added all your content, save your file with a .html extension, like aboutme.html. Open this file in your web browser, and you should see your complete web page!

What’s Next?

Now that you’ve created your first complete web page, it’s time to think about how you can improve it. Tomorrow, we’ll dive into CSS (Cascading Style Sheets), which is what makes your web pages look beautiful and professional. You’ll learn how to add colors, change fonts, and layout your page in creative ways. If you have not learned previous topics here it is  Day 1: Start Your Web Design Journey – Understanding the Basics

Final Thoughts:

Congratulations on building your first web page! You’ve taken another big step forward in your web design journey. Keep experimenting with HTML—try adding new elements, changing things around, and most importantly, have fun with it. The more you practice, the more confident you’ll become. You’re doing great, and I’m excited to see what you’ll create next!