HTML Basic Structure 🌐🛠️

Welcome to our HTML tutorial! In this lesson, we'll dive into the fundamental structure of HTML (Hyper Text Markup Language). By the end of this tutorial, you'll be able to create your first webpage 🎉. Let's get started! 🎯

What is HTML? 💡

HTML is the backbone of the web, responsible for structuring content on a webpage. It's like the skeleton of a webpage, giving it shape and organization.

The Building Blocks of HTML 📝

HTML consists of two main building blocks:

Elements: These are the basic building blocks of HTML. Each element has a name, an opening tag, a closing tag, and content in between.
Attributes: These are additional pieces of information added within the opening tag. They provide additional details about the element.

Basic HTML Structure 📝

A simple HTML document has the following structure:

html

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

Let's break this down:

<!DOCTYPE html>: This line declares the document type and version of HTML used.
<html>: This is the root element of an HTML document.
<head>: This element contains meta-information about the HTML document, such as the title and other scripts.
<title>: This element defines the title of the HTML document. It is displayed in the browser's title bar or tab.
<body>: This element contains the content that is visible to the user.
<h1>: This is a heading element. It defines a large heading.
<p>: This is a paragraph element. It defines a block of text that explains something.

Your First HTML Page 🎯

Now, let's create your first HTML page. Replace the content inside the <title> and <body> tags with your own.

html

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My First Webpage!</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Save this code in a file with a .html extension, then open it in a web browser to see your first webpage! 🎉

Practical Example 💡

Let's create a webpage for a fictional bakery.

html

<!DOCTYPE html>
<html>
<head>
    <title>Sweet Dreams Bakery</title>
</head>
<body>
    <h1>Welcome to Sweet Dreams Bakery!</h1>
    <img src="bread.jpg" alt="A loaf of bread">
    <p>At Sweet Dreams Bakery, we bake the finest pastries and breads in town. Come visit us today!</p>
</body>
</html>

In this example, we've added an <img> tag to display an image. The src attribute specifies the source of the image, and the alt attribute provides alternative text for screen readers and search engines.

Quiz Time 📝

Keep exploring, and happy coding! 🚀🌟