Building Structure with HTML

Read Aloud with Speechify Practice with Kahoot Open Journal Play Online Game

What is HTML?

HTML stands for HyperText Markup Language. It is the building block of all websites. Every website you visit is made using HTML!

Why Do We Use HTML?

HTML is like building blocks for a website. It helps organize text, images, and buttons on the page. Without HTML, a website would just be a blank screen!

Think of HTML Like a Book

Imagine a website is like a book:
📖 A website is the whole book.
📄 A webpage is a single page in the book.
🔤 HTML tags are like chapter titles, paragraphs, and page numbers that organize the book.

HTML does not make a website look colorful or animated (CSS and JavaScript do that). HTML is only used to organize and structure the content on a webpage.

How Does HTML Work?

HTML uses tags to tell the computer what to display.

Here’s an example of a simple webpage in HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage!</h1>
    <p>This is my first time learning HTML.</p>
</body>
</html>

Breaking it Down:

<!DOCTYPE html> → Tells the computer this is an HTML document.
<html> → The start of the webpage.
<head> → Contains the title of the page (not seen on the main webpage).
<title> → The name of the webpage (seen in the browser tab).
<body> → The main content of the webpage.
<h1> → A big heading (like a title).
<p> → A paragraph of text.

Using EduBlocks to Write HTML

EduBlocks makes it fun and easy to write HTML by using blocks instead of typing everything.

Step 1: Open EduBlocks

1️⃣ Go to EduBlocks on your computer or tablet.
2️⃣ Click on Web to start a new project.
3️⃣ You will see a blank page where we can add blocks to build our webpage.

Creating Your First Webpage

Let’s make a simple webpage with a title, a heading, and a paragraph!

Step 1: Add a Title

Drag the HTML block onto the screen.
Inside the HTML block, drag a Head block.
Inside the Head block, add a Title block and type: My First Webpage.

Step 2: Add a Heading and Paragraph

Drag a Body block under the Head block.
Inside the Body block, add:
- A Heading block (<h1>) that says: Welcome to My Webpage!
- A Paragraph block (<p>) that says: This is my first webpage!

Step 3: Run Your Code

Click Run to see your webpage.
You should see your heading and paragraph appear! 🎉

Adding Images to a Webpage

We can add pictures to our webpage using the <img> tag.

Example HTML Code for an Image:

<img src="https://example.com/image.jpg" width="300">

<img> → Adds a picture to the webpage.
src="URL" → The website address where the image is stored.
width="300" → Changes the image size to 300 pixels.

Activity: Add an Image to Your Webpage

1️⃣ Find a picture online (like a cat or your favorite cartoon).
2️⃣ Copy the image link.
3️⃣ Drag an Image block (<img>) into EduBlocks.
4️⃣ Paste the image link in the src field.
5️⃣ Set the width to 300.
6️⃣ Click Run and see your image on the page! 🎨

Adding Links to a Webpage

A link helps users go to another website. We use the <a> tag to create links.

Example HTML Code for a Link:

<a href="https://www.google.com">Click here to visit Google</a>

<a> → Starts a link.
href="URL" → The website address where the link will take you.
The words inside the <a> tag are clickable.

Activity: Add a Link to Your Webpage

1️⃣ Drag a Link block (<a>) into EduBlocks.
2️⃣ Type the name of your favorite website in the href box.
3️⃣ In the text box, type: Visit My Favorite Website.
4️⃣ Click Run and test your link!

Project: Build Your Own Webpage

Now, let’s put everything together and make our own fun webpage!

✅ Title: Name your webpage.
✅ Heading: Add a big heading with your name or a fun message.
✅ Paragraph: Write a short introduction about yourself.
✅ Image: Add a picture of something you like.
✅ Link: Add a link to your favorite website.

👩‍💻 Test your webpage and share it with a friend!

Review Questions

1️⃣ What is HTML used for?
2️⃣ What tag do we use for:

Headings?
Paragraphs?
Images?
Links?
3️⃣ How do you add an image to a webpage?
4️⃣ What is the href attribute used for in links?
5️⃣ Why do we use EduBlocks instead of typing HTML code?

Summary

🔹 HTML is the building block of all webpages.
🔹 Websites use tags to organize words, images, and links.
🔹 EduBlocks makes learning HTML easy with drag-and-drop blocks.
🔹 Headings (<h1>), paragraphs (<p>), images (<img>), and links (<a>) are important parts of a webpage.
🔹 In the next chapter, we will learn how to make our webpage colorful and stylish using CSS! 🎨

Vocabulary Review

Term	Definition
HTML	A special code that helps build websites by organizing words, pictures, and links.
Tag	A piece of HTML code that tells the computer what to do, like making text big or adding a picture.
Element	A part of a webpage, like a heading, paragraph, or image, created using HTML tags.
Heading (`<h1>`)	A big title on a webpage that tells people what the page is about.
Paragraph (`<p>`)	A block of text on a webpage, like a sentence in a story.
Image (`<img>`)	A picture on a webpage. HTML tells the website where to find the picture.
Link (`<a>`)	A word or picture you can click to go to another webpage.
Body (`<body>`)	The main part of a webpage where all the words, pictures, and links go.
Title (`<title>`)	The name of the webpage that shows at the top of the web browser.
EduBlocks	A tool that helps students create websites using blocks instead of typing HTML code.
Run Button	A button in EduBlocks that lets you see your webpage after adding HTML blocks.
Webpage	A single page on a website that has words, pictures, and links.
Website	A collection of webpages that people can visit on the internet.