Here are some images. Right-click and save to download them to your computer.

Use them to create a page that looks like this. Don’t look at the source until you’ve tried it yourself!

Hints:

• Here’s some HTML: <p><img id="kieran" src="kieran.jpg" alt="Kieran"></p>

• You can use # in CSS to select an item with a given id.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Download these three images:

Write a page that acts like this one. Don’t look at the source until you’ve tried it yourself! When the user clicks on the dog, one message appears. When the user clicks on another animal, a different message appears.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Download these images to your computer:

Write a page that shows the images. When the user clicks on an image, the page updates a total by the appropriate amount. You can run my solution to see how it works, but don’t look at the source code until you’re tried it yourself!

Hint: I used pseudocode like this:

When someone clicks on a bill:
Get the current total from the page.
Add the bill's value to the total.
Show the new total on the page.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Write three HTML pages that make an animal quiz. Each page shows four images, and asks the user to click on a particular animal.

You can download all of the images in a zip file. The images are sized, and ready to use. Start by downloading the images, and extracting them into a directory.

Here’s the first page, scaled down to fit in this space:

Figure 1. First page

The text says “Click on the dog.”

When the user hovers over an image, the cursor should be a hand:

Figure 2. Hover cursor

If the user clicks the wrong image, show this:

Figure 3. Wrong

The sad face is included in the image zip file.

If the user clicks the right image, show this:

Figure 4. Right

If the user gets it right, the “You got it wrong” message should vanish before the “You got it right” message appears.

The “You got it right” feedback includes a link to the second page. Here it is.

Figure 5. Second page

The text says “Click on the goose.” The page works the same as the first one.

Here’s the third and last page:

Figure 6. Third page

The message says “Click on the echinda.”

Here is the “right” feedback for the third page:

Figure 7. Third page feedback

Hints:

• Keep all the files together in one directory.

• Use an external style sheet, linked to all three HTML files.

• Use a <div> tag to group the tags in a feedback area. E.g.:

<div id="right">
   <img src="lego…
   You got it!<br>
   ...
</div>

• Add a click() event to each image.

You can try my solution, but do it yourself first!

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Make a slideshow of dog photos with captions. Your show should be at least four slides long.

• Find some dog images that you can legally use.

• Add funny captions to them with a graphics program.

• Make a slideshow page with forward and back arrows that work. Find images you can legally use.

• Show a text caption below each image, as well as the one on the image itself.

• Use seamless tiles for the page background.

• Add a header to the page. Use seamless tiles for the header area as well.

• Add borders around the header and photo.

Here is a page sample. Use different images and captions for your solution:

Figure 1. Sample

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)