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.

Problem 2

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

Replace this sentence with your answer to the above question/problem.

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 are detailed and complex, like photographs, should be saved as a .jpg file. While images that that contain text, graphics with hard lines, and images that need a transparent background should be saved as a .png file.

Problem 4

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

According to research images should be at a resolution of 72 PPI, which is often referred to as "screen resolution".

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)?

An image should be saved as a .jpg file, in order for it to support a transparent background.

Problem 6

What are responsive images?

A responsive image, is an image that adapts to the size of the web browser. In the code it will be represented as a percentage in the width portion of the img attribute.

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.

Problem 8

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