Lab 5: Using In-Line Graphics

Step 1: Setup

1.1 Launch a text editor and Web browser. Tile your windows.

1.2 Using an FTP client, connect to crow.ubalt.edu and download the folder called Lab5 from the introShare folder. Place this folder on the desktop of your local system. In your browser, navigate to the page called index.htm within the Lab5 folder.

1.3 Five pages are linked from the index page. Examine each one. Look closely at the fifth (wallet.htm).

Step 2: Link the Pages

2.1 Open the page called bookscapes.htm in your text editor. At some appropriate point on this page, insert an anchor container leading from this page to the page index.htm within the Lab5 folder. The cue for this link should be "PREVIOUS."

2.2 Add a second link to bookscapes.htm. Make its destination the page dish.htm and its cue "NEXT."

2.3 Repeat this process with each of the five content pages that are contained within the Lab5 folder. Give each page a "PREVIOUS" link to its predecessor in the sequence and a "NEXT" link to its sucessor. The order of pages is:

1. Bookscapes
2. Dish
3. eSenior
4. Fugue
5. Wallet

The "next" link for Wallet should go to the index page.

Step 3: Add Feature Images

3.1 In your browser, open the page imgIndex.htm within the Lab5 folder. You should see five images, one of which belongs to each of the content pages. Write down the dimensions of these images, given as length x width. Also notice the solid-color strip that occurs on the left or right side of each image (four of these are white; the fifth is dark gray). You'll want to remember whether the strip is on the right, (for an image in left orientation) or on the left (for one in right orientation).

3.2 In your text editor, return to the markup for the page bookscapes.htm. At some appropriate point, insert an IMG tag to include the bookscapes image. Note that all image files are stored in the images subdirectory, one level below the page you are editing. Remember that every IMG tag must have a properly constructed SRC attribute, WIDTH, HEIGHT, and ALT settings -- and since these graphics have built-in gutters, you should also include an ALIGN attribute of "right" or "left."

3.3 Test your work on the Bookscapes page. When you're happy with it, proceed to add feature images to each of the four other content pages.

Step 4: Susbtitute Graphics for Text Links

Open each of your content pages and where you have the text cues "PREVIOUS" and "NEXT," substitute IMG tags that call the graphics prev.jpg and next.jpg respectively. These files are in the images subdirectory within Lab5. Each graphic is 90x24 pixels.

Step 5: Fix the Text Problem on the Wallet Page

There's something obviously wrong with the text on the page wallet.htm. Can you find a solution?