Exercises: Web pages with links

You should do the two recommended exercises. Do the optional exercises if you want more practice.

Exercises in the Explore section are more challenging. You may need to use HTML and CSS that isn’t covered in CoreDogs. Get ready to Google!

Recommended

Exercise: Fictional dogs

This is one long exercise that covers all the concepts in this lesson.

You are hired to create a site about fictional dogs.

I don’t know why. Maybe an eccentric millionaire. Maybe as part of a media promotion. Just go with it, OK?

The site will have the following structure:

  • Home page
  • Dogs on screen
    • Dogs in film
    • Dogs on TV
  • Dogs in print
    • Dogs in literature
    • Dogs in comics
  • Dogs on radio
  • Contact page
  • Credits, permissions, terms of use page
  • Site map

Create the directory structure

Here is how the files will be laid out. Create a directory structure to match.

Directories

The library directory contains files that are shared by pages in several parts of the site. fictional-dogs.css will be used by every page.

Create a CSS file

Create a CSS file. Put it in the library.

Choose fonts for the site. Choose font sizes. Set the colors of the heading tags. Set a background color, if you want.

Experiment. Have fun. Be puppy-like.

Create a vertical nav bar

Create a vertical nav bar with rollover effects. Include buttons for the home page, screen, print, and radio. The nav bar should show on the left edge of every page.

The nav bar can be plain text, or you can use images. Here are some images, if you want to use them. You can make your own if you prefer.

Home Home over

Screen Screen over

Print Print over

Radio Radio over

Create a horizontal nav bar for the footer

The footer for each page should look something like this:

Nav bar in footer

It has links to the contact page, the credits, permissions, and terms of use page, and the site map.

Create the home page

It should have the usual stuff. Mine looks like this (shrunk, of course):

Home page

Create the credits, permissions, and terms of use page

This page has three parts to it. Add a table of contents at the top. Mine looks something like this:

Table of contents

Create a site map

Mine looks something like this:

Site map

Upload your solution to your server. Enter the URL of the home page below.

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

Exercise: Insecting

Create a set of three Web pages about insects.

The first one should look like this:

Beetle page

There’s a 36 pixel heading at the top. Then there’s a horizontal nav bar with three images. Clicking on the first one opens the beetles page. Clicking on the second one shows the butterfly page. Clicking on the third one shows the DIY (do-it-yourself) page.

The buttons in the nav bar have image rollovers:

Beetle rollover

Butterflies rollover

DIY rollover

The butterflies page looks like this:

Butterflies page

The DIY page looks like this when it loads:

DIY page

The first text field has the focus.

The user enters the number of beetles and butterflies s/he wants to make, and the page shows the number of insect parts the user should order. For example:

DIY output

A beetle requires a head, a body, four wings, and six legs. A butterfly requires a head, a body, two wings, and six legs.

Here are some images you can use.

Beetle Beetle

Beetle Beetle

Butterfly

Butterfly

Butterfly

Beetle button Beetle button

Butterfly button Butterfly button

DIY button DIY button

Upload your solution to your server and put the URL below.

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

Exercise: Image quiz

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:

First page

Figure 1. First page

The text says “Click on the dog.”

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

Hover cursor

Figure 2. Hover cursor

If the user clicks the wrong image, show this:

Wrong

Figure 3. Wrong

The sad face is included in the image zip file.

If the user clicks the right image, show this:

Right

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 Camtasia Studio video content presented here requires a more recent version of the Adobe Flash Player. If you are you using a browser with JavaScript disabled please enable it now. Otherwise, please update your version of the free Flash Player by downloading here.

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

Second page

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:

Third page

Figure 6. Third page

The message says “Click on the echinda.”

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

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.

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

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

Exercise: Dog teams

Graopugh is a game played by two teams of two dogs each. Each team has a Captain and a Wisher.

Create a site with five pages on it. index.html should look like this:

Home page

Each image links to a page about that dog. Here’s a sample:

Buddy's page

Make a page for each dog.

Use the following images.

Buddy thumbnail

Buddy

Ella thumbnail

Ella

Honeyface thumbnail

Honeyface

Louieeeeee thumbnail

Louieeeeee

Home button

Follow these specifications:

  • Use an external stylesheet.
  • Use a table.
  • Separate the table cells by about 30 pixels.
  • Center the dog names in their cells on the home page.
  • Put a black border around each dog image.
  • The home button image should have no border.
  • Make sure each image has an alt.
  • Use a sans serif font for everything.
  • Make the normal text about 14 pixels high. Make the headings larger.
  • Make the main headings dark green. Make the dog names on the dog pages dark red.
  • Color the team names appropriately.
  • Make the background of every page light yellow.
  • Make the position names on the home page bold.
  • Give every page a title. The home page should have the title “Graopugh Dog Teams.” The dog pages should have titles like “Graopugh Dog Teams: Buddy.”
  • Use only relative links.
  • Use any directory structure you like.

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

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

Optional

Exercise: Zombie recognition test

Write a zombie recognition test. It has three pages. The first page is like this:

First page

Figure 1. First page

The background color is #FFFFDD. The header color is #600000. The font is a generic sans serif. The base font size is 14 pixels. Use these styles on all pages.

Click on the link, and see:

The first question

Figure 2. The first question

The screen shot has been scaled down a little to fit on this display.

The user can click on each of the images. Click on a dog, and see:

Wrong

Figure 3. Wrong

Click on the zombie, and see:

Right

Figure 4. Right

Note! If the user clicks on a dog and then the zombie, the screen should look like Figure 4. The “wrong” message should not appear.

Click on the “Next” link, and see:

Done

Figure 5. Done

Other requirements:

  • Make one external CSS style sheet. Use it on all three pages.
  • The mouse cursor should be a hand when it is over an image.
  • There is a horizontal gap between the images.

Here are the images:

Dog

Zombie

Dog

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

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

Explore

These challenging exercises may use HTML not covered in CoreDogs. Get ready to Google!

Exercise: Comparison

Create a page call dog.html, that looks like this:

Dog screen

Here’s the picture:

Renata

Now make a page call cazador.html, that looks like this:

Cazador screen

Here’s the picture:

Cazador

Now make a third page that looks like this:

Screen

Use the <iframe> tag, to insert dog.html and cazador.html inside the third page. You’ll have to Google the tag. You’ll need two of them.

Upload your solution to your server, and enter the URL below.

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

Exercise: Many windows

Create four pages. Here’s how they work together:


Hint: Check out JavaScript’s window.open() function.

Upload your solution to your server, and enter the URL below.

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


How to...

Lessons

User login

Log in problems? Try here


Dogs