My Vacation Story: HTML Media Activity

What you'll learn

In this activity, you'll practice using HTML media elements to create an interactive vacation story webpage. You'll work with images, videos, and audio to bring your story to life!

Preview

Before You Start

• Watch the tutorial video above
• Log in to EduBlocks
• Think about a vacation story you want to tell
• Have 3-4 images ready (or know where to find them)

Activity Instructions

:art: Design Phase (5 minutes)

Plan your vacation story webpage by thinking about:

• Where did you go (real or imaginary)?
• What did you see and do?
• What images will help tell your story?

:computer: Coding Phase (25 minutes)

Remix this project to start!

Follow these steps to create your vacation story:

1. Create a webpage title

   • Add a title block for your browser tab
   • Make it descriptive (e.g., "My Beach Adventure")

2. Add your main heading

   • Use an H1 block for your story title
   • Example: "My Amazing Trip to the Beach"

3. Write your vacation story

   • Use paragraph (p) blocks for your story
   • Write at least 3 paragraphs about your vacation
   • Be creative - it can be real or imaginary!

:bulb: Tip Break your story into clear sections:

• Where you went
• What you did
• Your favorite moment

4. Add at least 3 images
   • Find images that match your story
   • To copy an image link:
     • Right-click on the image
     • Select "Copy image address"
     • Paste into your img block

:warning: Warning Make sure your images are:

• Related to your story
• Appropriate for school
• Working links (test them!)

5. Include video and audio (optional but recommended)
   • For videos: Use empty text blocks with embed code
   • To get video embed code:
     • Go to YouTube
     • Click "Share" -> "Embed"
     • Copy the entire iframe code

Sample audio embed code:

<iframe style={{'borderRadius':'12px'}} src="https://open.spotify.com/embed/track/5LwXBVJK7dds1GwxvIAMod?utm_source=generator" width="100%" height="300" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

:emoji:️ Review Phase (5 minutes)

Check your webpage:

• Does it have a clear title?
• Is your story easy to read?
• Do all images load properly?
• Does the audio/video work?

Troubleshooting

Images not showing?

• Check if you copied the image address (not the page URL)
• Make sure the link ends with .jpg, .png, or .gif
• Try a different image

Video not playing?

• Use the embed code, not the regular YouTube link
• Make sure you're using an empty text block
• Check that you copied the entire iframe code

Audio not working?

• Copy the complete iframe code provided
• Place it in an empty text block
• Make sure there are no extra spaces

Project Submission

:information_source: Ready to submit? Make sure you've:

• Created an original vacation story
• Added at least 3 images
• Tested all media elements
• Checked for any errors

Submit Your Vacation Story Here

Great job creating your multimedia vacation story! :tada: