HTML Media

:dart: Learning Objectives

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

• Add images to your web pages using blocks
• Create clickable links with the anchor tag
• Embed videos and other content using iframes
• Understand how media makes websites more interactive
• Convert media blocks into real HTML code

:clipboard: Before You Start

Make sure you have:

• EduBlocks Web Development open in your browser
• Some sample images ready to use (or know where to find them online)
• A YouTube video URL to practice embedding
• Your previous HTML project ready

:information_source: Info What is HTML Media? HTML Media means adding pictures, videos, sounds, and other fun content to your web pages! Just like how you add photos to a school project, you can add media to make your websites more interesting and interactive.

Media elements include:

• Images (<img>) - Pictures and graphics
• Links (<a>) - Clickable connections to other pages
• Iframes (<iframe>) - Windows to show other websites
• Videos (<video>) - Movie clips
• Audio (<audio>) - Sound and music

tip Why Use Media? Think about your favorite websites. They probably have:

• Pictures that show products or explain ideas
• Links that take you to different pages
• Videos that teach or entertain
• Maps that show locations

Without media, websites would just be plain text - pretty boring! :emoji:

:link: HTML Anchor Tag

:information_source: Info What is an Anchor Tag? The anchor tag (<a>) creates clickable links on your web page. It's like a magic portal that takes you from one page to another! When you click on a link, you jump to a new location - it could be another page on your site, a different website, or even a specific spot on the same page.

How It Works

The anchor tag needs a special attribute called "href" (which stands for "hypertext reference"). This tells the browser where to go when someone clicks the link.

:memo: Key Points

• The href attribute holds the destination address
• You can link to websites, files, or email addresses
• The text between the tags becomes clickable
• Always use descriptive text for your links (not just "click here")

:emoji: Building with Blocks

Block

Output

tip Try This! Create links to:

• Your favorite educational website
• Another page in your project
• An email address (hint: use mailto:)

:emoji:️ HTML Image Tag

:information_source: Info What is an Image Tag? The image tag (<img>) displays pictures on your web page. Unlike most HTML tags, the image tag doesn't have a closing tag - it's self-closing! This tag turns your web page from plain text into a visual experience.

How Images Work

The <img> tag needs two important attributes:

• src (source) - Where to find the image
• alt (alternative text) - Description of the image

:memo: Why Alt Text Matters Alt text helps:

• People using screen readers understand your images
• Show text if the image doesn't load
• Search engines understand your content
• Everyone know what the image shows

:emoji: Real Example: Music Selection Page

Let's see how to create a music selection page using image tags!

Block

Output

tip Image Tips

• Use clear, descriptive file names
• Keep image files small for faster loading
• Always include alt text
• Check that your image links work before publishing

🪟 HTML Iframe Tag

:information_source: Info What is an Iframe? An iframe (inline frame) is like a window on your web page that shows content from another website. Imagine cutting a hole in your paper and placing another paper behind it - that's what an iframe does digitally! You can show YouTube videos, maps, or even other websites inside your own page.

Setting Up Your Iframe

The <iframe> tag uses these attributes:

• src - The web address of the content to show
• width - How wide the window should be
• height - How tall the window should be

:memo: Size Options You can set sizes in two ways:

• Pixels (exact size): width="500" height="300"
• Percentages (flexible size): width="100%" height="50%"

Percentages make your iframe responsive - it adjusts to different screen sizes!

:emoji: Building with Blocks

Block

Output

tip Common Iframe Uses

• Embedding YouTube videos
• Adding Google Maps to show locations
• Displaying calendars or forms
• Showing content from educational sites

:dart: Summary

In this lesson, you learned three powerful media tags:

1. Anchor Tag (<a>) - Creates clickable links to connect pages
2. Image Tag (<img>) - Displays pictures and graphics
3. Iframe Tag (<iframe>) - Shows content from other websites

Each tag helps make your website more interactive and engaging. Remember:

• Links help users navigate
• Images make content visual
• Iframes bring outside content in

:hammer_and_wrench: Troubleshooting Tips

Common Problems and Solutions

Problem: My image won't show up!

• Check the file path or URL is correct
• Make sure the image file exists
• Verify the file extension (.jpg, .png, etc.)

Problem: My link doesn't work!

• Check you included "http://" or "https://" for external links
• Make sure there are no typos in the href
• Test the destination URL separately

Problem: My iframe is blank!

• Some websites block being shown in iframes
• Check the URL is correct
• Make sure you have internet connection

:emoji: Video Tutorial

Ready to see everything in action? Watch this video to review what you've learned:

:video_game: Practice Time!

Now it's your turn! Try these challenges:

1. Link Challenge: Create a navigation menu with 5 links using anchor tags
2. Image Gallery: Build a photo gallery with at least 4 images
3. Video Page: Embed 3 different YouTube videos using iframes
4. Combination Project: Create a "My Favorites" page that includes:
   • Links to your favorite websites
   • Images of your hobbies
   • An embedded video you enjoy

:memo: Remember The best way to learn is by doing! Don't worry if your first attempts aren't perfect. Every web developer started exactly where you are now. Keep practicing with your blocks, and soon you'll be creating amazing media-rich websites! :star2: