In this lesson, we learn the fundamentals of embedding visual and audio content on a web page.

• Web Design Syllabus

Teacher Activities

• Check Learning Journals
• Pre-teach vocab (jpeg / png / caption)

Student Activities

• Read Images in HTML and take Outline Notes
• Open your Summer Story in VS Code
  1. Download three images that are appropriate for your narrative
  2. Use what you learned to embed these images in your HTML page
  3. Each image must have alternative text
  4. At least one image must have a title (tool tip)
  5. At lease one image must have a caption (See <figcaption> for more info)
  6. Show me your web page!*
• Read Video and audio content and take Outline Notes
• Read From object to iframe — other embedding technologies and take Outline Notes.
• Open your Summer Story in VS Code
  1. Embed a video or audio source in your HTML page
  2. Show me your web page!*

Extend

Explore techniques to embed other technologies in your web page including Google Docs, Sheets, Slides, and/or Maps.

Use graphic design software to develop a custom banner for the summer story narrative.