Chapter 2 - Creating a Simple Web Page
What You Will Learn:
By the end of this chapter, you will be able to:
✅ Create a simple webpage using EduBlocks
✅ Add a title to your webpage
✅ Add a heading and a paragraph
✅ Add a picture to your webpage
✅ Save and view your webpage in a web browser
What is a Web Page?
A webpage is like one page of a book. It is part of a website and can have words, pictures, and buttons.
When you visit a website like PBS Kids, the home page is the first webpage you see. If you click on a game or a video, you go to a different webpage!
A webpage is made using HTML. HTML (HyperText Markup Language) is like the bones of a webpage—it holds everything together!
Web Page vs. Website
🔹 A website is a collection of many pages.
🔹 A webpage is just one page of a website.
For example:
- PBS Kids is a website with lots of different webpages for games and videos.
- The page for a single game is a webpage inside the PBS Kids website.
Today, you will make your own webpage using EduBlocks!
How to Make a Web Page Using EduBlocks
Instead of writing long lines of HTML code, we will use EduBlocks.
EduBlocks is a fun tool that lets you drag and drop blocks to build your webpage, like putting together a puzzle!
Step 1: Open EduBlocks
🔹 Go to EduBlocks in your web browser.
🔹 Click on HTML Mode to start building your webpage.
Now you’re ready to start designing your own webpage! 🚀
Step 2: Add a Title to Your Web Page
The title is what people see at the very top of the browser tab when they open your webpage.
How to Add a Title:
1️⃣ Find the Title Block in EduBlocks.
2️⃣ Drag it to your workspace.
3️⃣ Type a name for your webpage, like:
“My Awesome Web Page”
💡 Tip: Try to make your title fun and interesting so people will want to visit your page!
Step 3: Add a Heading and a Paragraph
A heading is a big title on your webpage.
A paragraph is a small block of text that tells people something about your page.
How to Add a Heading and a Paragraph:
1️⃣ Find the Heading Block and drag it into your workspace.
2️⃣ Type a heading, like:
“Welcome to My Web Page!”
3️⃣ Find the Paragraph Block and drag it below the heading.
4️⃣ Type a short sentence about yourself, like:
“I love drawing, playing soccer, and reading books!”
💡 Tip: Headings help organize your webpage. They tell visitors what each section is about.
Step 4: Add a Picture
Pictures make webpages more fun and exciting! Let’s add a picture to your page.
How to Add a Picture:
1️⃣ Find the Image Block and drag it below your paragraph.
2️⃣ Type the URL (web address) of a picture.
💡 What is a URL?
A URL is the address of something on the internet. It tells your webpage where to find a picture.
For example, if you want to add a picture of a cat, you can use a URL like this:
https://example.com/cat-picture.jpg
3️⃣ Click Save to see your picture appear on your webpage!
🔹 If the picture doesn’t show up, check to make sure you typed the URL correctly.
Step 5: View Your Web Page
Now that you’ve added text and a picture, let’s see how your webpage looks!
How to View Your Web Page:
1️⃣ Click the Run button in EduBlocks.
2️⃣ Your web page will appear in a browser window. 🎉
3️⃣ If something doesn’t look right, go back and fix it!
💡 What happens when you click “Run”?
EduBlocks takes the blocks you added and turns them into HTML code that the browser understands. This makes your webpage appear!
Fun Challenge: Make It Your Own!
Now that you’ve created a simple webpage, try these fun ideas:
🎨 Change the title and heading to something creative!
📷 Add more pictures to your page.
📚 Write a paragraph about your favorite book, movie, or game.
🔗 Try adding a link to your favorite website!
Review: What We Learned Today
✅ A webpage is one part of a website.
✅ Websites are made using HTML.
✅ EduBlocks helps us create webpages using blocks instead of code.
✅ We added a title, heading, paragraph, and picture to our webpage.
✅ We ran our webpage and viewed it in a web browser!
What’s Next?
Great job! 🎉 You made your first webpage!
In the next chapter, we will make your webpage look even better using CSS. CSS helps change colors, fonts, and backgrounds so your webpage looks amazing! 🚀
| Word | Definition | Example |
|---|---|---|
| Title | The name of a webpage that appears at the top of the browser tab. | ”My Awesome Web Page” |
| Heading | A big, bold text that introduces a section of a webpage. | ”Welcome to My Web Page!” |
| Paragraph | A block of text that gives information on a webpage. | ”I love playing soccer and reading books.” |
| Image URL | The web address of a picture used on a webpage. | https://example.com/cat.jpg |
| Run Button | A button in EduBlocks that turns blocks into a working webpage. | Click “Run” to see your webpage |
| Block | A draggable piece of code in EduBlocks used to build a webpage. | A heading block, paragraph block |
| Browser Window | The screen where your webpage appears when you run it. | Shows the website you made |
| Save | A button that keeps your changes so you don’t lose your work. | Click “Save” before closing EduBlocks |
| Preview | A way to see what your webpage looks like before publishing it. | Checking your webpage in a browser |