Images in JavaScript

A picture on a page is an img element. It has nothing between tags, so it has no closing tag: everything about it goes inside its one tag, as attributes.

<img src="images/plant.svg" alt="A small plant in a white pot" width="120" height="120">

src is the address of the image file. alt is the image in words: what a screen reader says to a visitor who cannot see it, and what the browser shows when the file is missing. width and height are its size in pixels, written without px, so the browser can keep that space free before the file arrives.

An image without alt leaves those visitors with nothing, so the check prints it as image with no alt text. A long tag can be spread over several lines: the browser only cares where <img starts and where > ends it.

The check prints each image by its alt text, then the files and sizes:

> open the page
  screen:
    ...
    heading 2: Our products
    text: Eight things for home and office, from a $2 pen to a $50 gift card, and every price includes tax.
    image: A white mug with a blue handle
    image: A green desk lamp
    heading 2: Opening hours
    ...
> the files and sizes of the images
  images/mug.svg: the file is there, 160 x 160 px
  images/lamp.svg: the file is there, 160 x 160 px

Your task: under the products paragraph, add an img for the mug, spread over several lines: src images/mug.svg, alt A white mug with a blue handle, 160 by 160. Under it, add the lamp in one line: images/lamp.svg, alt A green desk lamp, 160 by 160.

Assignment
Follow the Coding Tutorial to add the mug and the lamp to the shop's home page, each with its file, its words and its size.

Hint
Do not write </img>: all four attributes go inside the one <img …> tag, each as name="value".