Images and Video Worksheet

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.

Problem 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.

Red Car
Problem 2

Why is it important to use small file sizes for images (image files that are small in kilobytes)?

It is important to use small file size to help with load time

Problem 3

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

Images that have many different colors

Problem 4

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

72 ppi

Problem 5

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

Transparent GIF or PNG

Problem 6

What are responsive images?

Responsive Images is sizes to the screen automatically

Problem 7

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.

Bristol Motor Speedway
Problem 8

Find a video on YouTube that you like, and embed it into this page.