Building Structure with HTML
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!
- A Heading block (
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. |