Jan's Working with the Web

Step-by-Step: Align & Space Images

 Start with:  ,  hector11-Lastname-Firstname.htm, resource files

The bottom part of Hector's page looks bare. You will insert some images to make it more interesting and then set the alignment and spacing for a more attractive look.

The screenshots of HTML code are going to be from EditPad Pro 7. I ran HTML Tidy earlier to get neat indentions. The color coding and indentions should make the HTML code easier to read and edit. Keep in mind that the wrapping depends on the window's size. If you are using Notepad or another editor, you won't see the same colors or indentions.

Insert Image

1. Save the page with the name hector12-Lastname-Firstname.htm in the web project2 folder of your Class disk.
   
2. Put your cursor at the right of the DD tag under Travel.
   
3. Type an IMG tag for the image travel.gif that is in the web/HTML folder on your Class disk.
   <dl>
      <dt>Travel</dt>
   <dd><img src="HTML/travel.gif" width="100" height="94" alt="Icon: Travel">I have traveled to 14 countries on three continents. I have traveled by plane, helicopter, train, ship, car, bus, and canoe. I plan to add submarine and hot air balloon to the list. I have not seen <a href="http://touregypt.net/"><img src="HTML/pyramids2.gif" width="37" height="17" alt="Icon: Pyramids of Egypt" title="Link: TourEgypt.net"></a> <a href="http://touregypt.net/">the pyramids in Egypt</a> or <a href="HTML/china.jpg"><img src="HTML/china2.jpg" width="31" height="20" alt="Icon:The Great Wall of China" title="Photo: Great Wall of China"></a> <a href="HTML/china.jpg">the Great Wall of China</a>, so I am not done with traveling yet.</dd>

   Be sure to include the dimensions and appropriate ALT text. (You should know how to do this now!)

4. Save.
   [hector12-Lastname-Firstname.htm]

5. Switch to your browser and change the Address bar to show the edited page, hector12-Lastname-Firstname.htm.

   The bottom of the image lines up with the baseline of the text. This does not look very nice.

Float and Space Image

Now that you have an image in place, it is time to use some of what you learned in the last lesson about aligning images.

1. Switch back to your HTML code editor.

2. Edit the IMG tag for travel.gif to add an inline style:

   <img src="HTML/travel.gif" style="float:left" width="100" height="94" alt="Icon: Travel">

3. Save.
   [hector12-Lastname-Firstname.htm]

4. Switch back to your browser and Refresh.

   The text now wraps around the image, but is bumping up against the text.

5. Switch back to your editor.
   
6. Add to the STYLE tag to add spacing at the right of the image:

   <img src="HTML/travel.gif" style="float:left;margin-right:4px" width="100" height="94" alt="Icon: Travel">

7. Save.
   [hector12-Lastname-Firstname.htm]
8. Switch back to your browser and Refresh.

The image is pushed away from the text just a bit. Success!

Stop Text Wrapping

In the illustration above the section for Fishing starts beside the image travel.gif. Whoops. We need that section to start below that image. You must put in a style that stops the text wrapping.

1. Switch back to your HTML editor.

2. In the DT tag before the word Fishing, add style="clear:both"

3. Save.
   [hector12-Lastname-Firstname.htm]

4. Switch back to your browser and Refresh.

   The word Fishing and its paragraph is back where it belongs at the left below the Travel paragraph and image.

Add More Images

Next you will add images for each of the other items in Hector's list: Fishing, Soccer, and Cooking.

1. At the left of the paragraph that follows the heading Fishing, add an IMG tag for:

   •  fish.gif that is in your web/HTML folder.

   • the exact dimensions

   • appropriate ALT text

   • float left

   • margin-right of 4 pixels

2. Make the text stop wrapping after Hector's paragraph on Travel:
   Add style="clear:both"  to the DT tag that follows (Soccer).

   

3. Continue, adding ball.gif beside the Soccer paragraph and grill.gif beside the Cooking paragraph.

4. Make the text stop wrapping so that each image is beside only its own paragraph.
   Your HTML code may be laid out differently, depending on what editor you are using and the window size.

   

   HTML code to float the images at left and to stop text wrapping (EditPad Pro 7)

5. Save.
   [hector12-Lastname-Firstname.htm]

6. Switch to your browser and Refresh.

   All of the new images should be floating at the left. The text about each hobby should wrap around the matching image only.

   Problem: Images and/or text continue to wrap
   Solution: Add style="clear:both" to the first tag that should not wrap.

Center Images

The FLOAT attribute does not have a choice that centers an image on the page. To center an image on the page you must center the whole paragraph that contains the image. Awkward!

1. Switch back to your HTML editor.
   
2. Move your cursor to the left of the IMG tag for the image of Hector and Carla.
3. Delete the non-breaking spaces you put in earlier.
   
4. Add a paragraph tag that surrounds the three IMG tags.
   

5. Edit the P tag to add  style="text-align:center"
   

   

6. Save.
   [hector12-Lastname-Firstname.htm]

7. Switch to your browser and Refresh.

   The whole paragraph is centered horizontally, so all three images are centered as a group. If the window is too narrow for all three, the last one moves down below, but it is still centered.