Images and Video Worksheet

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 alt attribute, and you may set the width attribute if you like.

A photo of a happy pup.
Problem 2

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

HTML has to load all of the data that gets used by the files. Thus, the smaller the data size of a referenced file, the faster it is able to load.
Problem 3

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

This is an instance where you'll want to use .png files.
Problem 4

What are responsive images?

Responsive images are given attributes that make them adjust to the shape and size of the screen.
Problem 5

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.

An old photo of mine of a sunrise in winter.
Problem 6

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