CCC-Web Worksheet

Uni of Portsmouth Logo

Images

In this worksheet you will explore how to use images in web pages. You will look at different image formats, and some of the techniques for making images responsive.

As with all worksheets, record what you do, what you learn, and any problems you encounter in your discovery log.

Task 0: Preparation

  1. To get the lecture examples from GitHub either:
    • download this zipped image repository and unzip it, or…
    • preferably, if you have git installed you can do this by opening a terminal, navigating to the folder where you want to store the files, and running the command: 
      git clone https://github.com/portsoc/img101
  2. Open the repository's index.html file in a browser.

Task 1: Read, Discover, Experiment, Learn

  1. Work through each source file in the example repository. Experiment with it, change attributes, copy elements, and see how you can alter the examples. It may be useful to refer to the Images documentation on MDN.
  2. Record what you try in your learning in your discovery log.

Task 2: Retrofit

  1. Investigate how you can use and change the examples to add media to the pages you made in weeks one and two.
  2. Record this too in your discovery log.