Title:
HTML Videos and Images Worksheet
Updated:
September 11, 2023
Task/Activity:
  1. Images and Video Questions
  2. Task 2
  3. Task 3
  4. Task 4
  5. Task 5

Important Note!

When you copy this worksheet up to your live server, remember that you must also copy the image files that you added to the images folder. If you don't do this, then your images will not appear when you view the page on your live server.

A. Images and Video Questions
  1. Find an image and copy it to the 'images' folder that was included in your starter files for this course (the starter files were all put in a folder named 'web-programming'). Then add an IMG element below that displays the image. Make sure to set the width and alt attributes.
moon
  1. Why is it important to use small file sizes for images (image files that are small in kilobytes)?

Because small file sizes allow for easy download, and users hate images that take too long to load.

  1. What types of images should be saved as .jpg files, and what types of images should be saved as .png files?

You should save colorfully diverse images as .jpg whereas you should save files that are largely a solid color as .png.

  1. Most web browsers display images at what resolution (how many ppi)?

The book isn't too terribly clear about this, but the listed number is 72 ppi. If we go strictly by the words of the book, though, it says that the ppi is determined by the resolution of the screen itself.

  1. If you want an image to have a transparent background, what type of image should it be (what file extension would you use)?

Depends upon the type of transparency. If the image has hard edges and what is transparent is 100% transparent, then go with .gif. If, however, the edges are rounded or semi-opaque, then go with .png.

  1. What are responsive images?

Images that have the appropriate attributes to ensure that they are not warped by screens that are different than the expected dimensions.

E. Coding Problems
  1. Find another image and copy it to the 'images' folder. Then add an IMG element below that displays the image. Make sure to set the width and alt attributes. Turn the image into a link by nesting it within an A element. Clicking on the image should open up google.com in a new browser tab.
Nebula
  1. Find a video on YouTube that you like, and embed it into this page.