My checklist
Web Adventures · Week 5

Picture Power

Aim: Add images and describe them with helpful alt text.

New coding words

  1. image
  2. source
  3. alt text
  4. attribute
  5. file

What the coding words mean

  1. image: A picture displayed on a webpage.
  2. source: The location or web address of an image.
  3. alt text: A short description explaining what an image shows.
  4. attribute: Extra information written inside an opening HTML tag.
  5. file: A saved item, such as an HTML page or picture.
Code along

Picture Power

This code creates a robot webpage with an online picture, useful alt text, a fixed image width, a heading and a paragraph.

Coding space

Edit index.html for your webpage’s content. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

Tab indents. Esc then Tab leaves the editor. Ctrl/⌘ + Enter runs your code.

PreviewYour webpage
What will you create?

Select Run my code to see your webpage here.

Mini project

Space Picture Page

This code creates a space webpage with two online pictures, useful alt text, headings and short descriptions.

Coding space

Edit index.html for your webpage’s content. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

Tab indents. Esc then Tab leaves the editor. Ctrl/⌘ + Enter runs your code.

PreviewYour webpage
What will you create?

Select Run my code to see your webpage here.

Your mini-project to-do list

0 of 4 completed

Complete these activities in the mini-project editor above. After each change, select Run my code to check your webpage.

Save your finished mini project

Select Download my work and save the file as week_5_space_pictures.html. You can open this .html file in a browser to view your webpage.

Debugging detective

Chi Opara, your course guide

Knowledge check

Question 1

Which attribute tells the browser where an image is stored?

Question 2

Why should every important image have useful alt text?

Your answers are checked in this browser and are not submitted.

How are you getting on so far?

My checklist

Finished Web Adventures Week 5?

Your completion and mood are saved only in this browser.