Introduction to HTML

:dart: Learning Objectives

By the end of this lesson, you will be able to:

• Understand what HTML is and why websites need it
• Identify the basic structure of an HTML document
• Create HTML elements using EduBlocks
• Recognize HTML tags and attributes
• Build headings and paragraphs with blocks

:clipboard: Before You Start

Make sure you have:

• EduBlocks opened in your browser
• Completed Concept 01 (Introduction to Web Development)
• A notebook ready for taking notes
• Your creativity hat on! :art:

:information_source: Info What is HTML? HTML (HyperText Markup Language) is the language that tells web browsers how to display content. Think of it as the skeleton of a website - it gives structure to everything you see on web pages!

:emoji: Understanding HTML

When you open a website, your browser reads HTML code and displays it as a beautiful webpage. It's like magic! :sparkles:

:bulb: Tip: EduBlocks Connection In EduBlocks, each HTML block you drag represents real HTML code. When you snap blocks together, you're building a website just like professional developers do!

The Basic Structure :emoji:️

Every HTML document needs these four essential parts:

A Bit of History :books:

Did you know? Tim Berners-Lee created HTML in 1991. He wanted to make it easy for people to share information on the internet. Today, we use HTML5 - the newest and coolest version!

:memo: Fun Fact HTML has grown from a simple language to a powerful tool that powers billions of websites around the world!

:emoji: HTML Elements

:information_source: Info What is an HTML Element? An HTML element is like a container that holds your content. It has three parts:

1. Start tag - Opens the container
2. Content - What goes inside
3. End tag - Closes the container

Think of HTML elements like sandwich making:

• The start tag is like the bottom bread :emoji:
• The content is your favorite filling :emoji:
• The end tag is like the top bread :emoji:

Here's how it looks:

:bulb: Tip: EduBlocks Tip In EduBlocks, when you drag an element block, it automatically creates both the start and end tags for you. No need to worry about forgetting to close your tags!

:emoji:️ HTML Tags

HTML tags are special instructions wrapped in angle brackets < >. They tell the browser what to do with your content.

The Two Main Sections :page_facing_up:

Every HTML document has two important sections:

1. The Head Section :emoji:

   • Contains information about your webpage
   • Includes the title that appears in browser tabs
   • Links to styling files (CSS)
   • Not visible on the actual webpage

2. The Body Section :emoji:️

   • Contains everything visitors see
   • Holds your headings, paragraphs, images, and more
   • This is where the fun happens!

:memo: Block Connection In EduBlocks, you'll find separate blocks for the head and body sections. Always put display content in the body blocks!

:emoji:️ HTML Attributes

Think of attributes as special settings for your HTML elements. They give extra information or special powers to your tags!

:information_source: Info What are Attributes? Attributes are like adding toppings to your pizza - they make your HTML elements more interesting and functional! They always go inside the opening tag and follow this pattern: attribute="value"

For example, when creating a link, you need to tell it WHERE to go:

:bulb: Tip: EduBlocks Hint In EduBlocks, attributes appear as input fields on your blocks. Just type in the values you want - no need to worry about quotes or syntax!

:memo: Headings and Paragraphs

These are the building blocks of every webpage! Let's learn how to use them.

Headings (h1 to h6) :emoji:

HTML gives you six different heading sizes:

• h1 - The biggest! Use for main titles
• h2 - For important sections
• h3 - For subsections
• h4, h5, h6 - For smaller and smaller headings

Paragraphs (<p> tag) :page_facing_up:

The <p> tag creates paragraphs - perfect for your main text content!

Here's how it looks with EduBlocks:

:memo: Pro Tip Always use headings in order! Don't jump from h1 straight to h4. It's like reading a book - you need chapter titles before section titles!

:emoji: Quick Summary

Before watching the video, here's what we've learned:

• HTML is the language that creates website structure
• Elements have start tags, content, and end tags
• The head section contains information about the page
• The body section contains what people see
• Attributes add special features to elements
• Headings and paragraphs are essential building blocks

:movie_camera: Video Tutorial

Watch this video to see HTML in action with EduBlocks:

:hammer_and_wrench: Troubleshooting Tips

Having trouble? Here are common issues and solutions:

:bulb: Tip: Common Issues

1. My webpage is blank!
   • Check that your content is in the body section, not the head
   • Make sure all tags are properly closed
2. My heading looks weird
   • Verify you're using the right heading number (h1-h6)
   • Check that you haven't nested headings inside paragraphs
3. EduBlocks won't connect
   • Ensure blocks are compatible (body content goes in body section)
   • Try refreshing the page and rebuilding

:rocket: Practice Time!

Now it's your turn! Try these challenges:

1. Easy: Create a webpage with one h1 heading and one paragraph
2. Medium: Build a webpage with three different heading sizes and multiple paragraphs
3. Challenge: Create a mini "About Me" page using everything you learned

:memo: Remember Every professional web developer started exactly where you are now. Keep practicing with EduBlocks, and soon you'll be building amazing websites!