Introduction to Webpages + EduBlocks

:dart: Learning Objectives

By the end of this lesson, you will:

• Understand what web pages are and how they work
• Learn about the three main technologies used to build websites (HTML, CSS, JavaScript)
• Explore EduBlocks and how it helps you create web pages using visual blocks
• Connect visual blocks to real web code

:clipboard: Before You Start

Make sure you have:

• A computer with internet connection
• A web browser (Chrome, Firefox, Safari, or Edge)
• Created your free EduBlocks account at edublocks.org
• A notebook to write down important concepts

:emoji: What is a Web Page?

:information_source: Info A web page is a single document on the internet that you can view in your web browser. When you visit websites like YouTube, Google, or your favorite game site, you're looking at web pages!

Web pages are created to:

• Share information and ideas
• Entertain people with games and videos
• Sell products and services
• Connect people around the world

:hammer_and_wrench: The Three Building Blocks of Web Pages

Web pages are built using three main technologies. Think of them like building a house:

:bulb: Tip Remember these three technologies as H-C-J: HTML, CSS, JavaScript!

1. HTML (HyperText Markup Language) :emoji:️

   • Creates the structure (like the walls and rooms of a house)
   • Tells the browser what content to display

2. CSS (Cascading Style Sheets) :art:

   • Controls how things look (like paint, decorations, and furniture)
   • Makes your web page beautiful and colorful

3. JavaScript :video_game:

   • Adds interactivity (like light switches and doorbell)
   • Makes buttons work and things move

:memo: Note Web pages live on special computers called servers. When you type a website address, your browser asks the server to send you the web page files!

:emoji: Real Website Example

Let's look at a real website to see HTML, CSS, and JavaScript in action:

Visit Telebort Website

:books: A Brief History of Web Pages

Did you know the internet wasn't always full of colorful websites and videos? Let's travel back in time!

The First Web Page Ever! :emoji:

:information_source: Fun Fact: The first web page was created on August 6, 1991, by Tim Berners-Lee. It was just plain text with no pictures or colors!

How Web Pages Evolved :chart_with_upwards_trend:

1. 1991-1995: Web pages were just text (boring, but revolutionary!)
2. 1996-2000: Pictures and colors were added
3. 2000-2010: Websites became interactive with games and videos
4. 2010-Today: Websites work on phones, tablets, and computers!

Today, there are over 1.7 billion websites on the internet. That's more websites than there are people in China!

:emoji: What is EduBlocks?

:information_source: Info EduBlocks is a visual programming tool that lets you create web pages by dragging and dropping colorful blocks instead of typing code. It's like building with LEGO blocks, but for websites!

How EduBlocks Works :wrench:

Instead of writing code like this:

<h1>Hello World</h1>

You drag colorful blocks that represent the code! This helps you:

• See how web pages are built step by step
• Learn programming concepts without syntax errors
• Create real websites that work in browsers

:bulb: Tip Think of EduBlocks as training wheels for web development. You'll learn the concepts first, then transition to real code later!

What You Can Do with EduBlocks :rocket:

With EduBlocks, you can:

• Add headings, paragraphs, and images to your web pages
• Change colors, sizes, and positions of elements
• Create links between pages
• Make interactive buttons and forms
• See your HTML code as you build with blocks!

The EduBlocks Interface :emoji:️

Why Use EduBlocks? :star2:

:link: Connecting Blocks to Real Code

EduBlocks uses HTML blocks that represent real HTML code. Here's how it works:

:memo: Note The Bridge Between Blocks and Code:

• Each block represents a piece of HTML code
• When you connect blocks, you're building a web page structure
• You can switch between block view and code view anytime!

:hammer_and_wrench: Troubleshooting Tips

Having problems? Try these solutions:

:bulb: Tip Common Issues and Fixes:

1. Blocks won't connect? Make sure you're dragging to the right spot
2. Can't see your preview? Click the "Run" or "Preview" button
3. Lost your work? EduBlocks auto-saves every few seconds
4. Browser running slow? Close other tabs to free up memory

:memo: Lesson Summary

In this lesson, you learned:

• :white_check_mark: Web pages are documents on the internet made with HTML, CSS, and JavaScript
• :white_check_mark: HTML creates structure, CSS adds style, and JavaScript adds interactivity
• :white_check_mark: EduBlocks lets you build web pages using visual blocks instead of typing code
• :white_check_mark: Each block in EduBlocks represents real HTML code
• :white_check_mark: The first web page was created in 1991 by Tim Berners-Lee

:emoji: Video Tutorial

Ready to see EduBlocks in action? Watch this video to get started:

:rocket: Practice Time!

Now it's your turn to explore:

1. Quick Challenge: Visit three of your favorite websites and identify:

   • One thing that's HTML (structure)
   • One thing that's CSS (style)
   • One thing that's JavaScript (interaction)

2. EduBlocks Exploration:

   • Log into your EduBlocks account
   • Click on "New Project"
   • Try dragging a few blocks to see what happens
   • Can you create a simple "Hello World" message?

3. Think About It:

   • Why do you think visual blocks might be easier than typing code?
   • What kind of website would you like to create?

:memo: Note Remember: Every expert web developer started as a beginner. Take your time and have fun exploring!