Day 2: Understanding HTML Basics

Welcome Back! Let’s Dive into HTML

It’s great to see you back for Day 2! Yesterday, we explored the exciting world of web design and why it’s so important. Today, we’re getting hands-on with HTML, the language that forms the backbone of every website you’ve ever visited. Don’t worry if this is your first time coding—we’ll take it step by step!

What is HTML?

HTML stands for HyperText Markup Language. Think of HTML as the skeleton of your website. Just like how your body needs a skeleton to hold everything together, your website needs HTML to give it structure.

Here’s a simple analogy:

Imagine your website is a house. HTML is the framework that holds up the walls, floors, and roof. It doesn’t add the color or style (that’s what CSS does, which we’ll get to later), but it’s essential for putting everything in the right place.

The Building Blocks of HTML

HTML is made up of elements, and each element is like a building block of your website. These elements usually have an opening tag, some content, and a closing tag. Tags are like labels that tell your web browser what kind of content you’re adding to the page.

Let’s look at a basic example:

<h1>This is a Heading</h1>
<p>This is a paragraph of text on your website.</p>

In this example:

  • <h1> is the opening tag for a heading, which is like a title.
  • </h1> is the closing tag for the heading.
  • <p> is the opening tag for a paragraph of text.
  • </p> is the closing tag for the paragraph.

Everything between these tags is the content that will appear on your webpage.

Your First HTML Page

Ready to build your first webpage? Let’s do this! Open your text editor (like VS Code) and type the following code:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>This is my very first webpage. I'm learning HTML!</p>
</body>
</html>

Save this file with a .html extension, like index.html. Now, open the file in your web browser. What do you see? That’s your very first webpage in action!

Breaking Down the Code

Let’s go over what each part of this code does:

  • <!DOCTYPE html>: This tells the browser that you’re using the latest version of HTML, known as HTML5.
  • <html>: This tag wraps all the content on your webpage. It’s like the outer shell of your website.
  • <head>: This section contains important information about your webpage that isn’t visible to your visitors, like the title that appears in the browser tab.
  • <title>: The text inside this tag is what shows up in the tab of your browser.
  • <body>: Everything inside this tag is what will actually appear on your webpage for visitors to see.
  • <h1>: This is a heading, usually the biggest and most important text on the page. Think of it as the title of your webpage.
  • <p>: This is a paragraph of text, where you can add any content you like.

Why HTML Matters

Understanding HTML is like learning the alphabet of web design. Once you know how to use it, you can start building the structure of your websites. It’s the first step in turning your creative ideas into a functional website. And trust me, once you get the hang of HTML, you’ll feel empowered to create anything!

Practice Time

Your task for today is to create a few more HTML pages on your own. Experiment with different headings (<h2>, <h3>, etc.), add more paragraphs, and maybe even try adding an image using the <img> tag. The more you practice, the more comfortable you’ll become with HTML.

What’s Next?

Tomorrow, we’ll take your HTML skills to the next level by introducing CSS (Cascading Style Sheets). CSS is what makes your website look amazing, so get ready to add some style to your pages!if you have not learned Day 1: Start Your Web Design Journey – Understanding the Basics

Final Thoughts:

Congratulations on building your first webpage! You’ve just taken an important step in your web design journey. Keep practicing, experimenting, and learning. Remember, every great website started with these basic building blocks. You’re well on your way to creating something incredible!

Day 3: Building a Simple Web Page with HTML – Creating Your First Complete Web Page