HTML Basics:
Icon: FrontPage Express Align & Space Images

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

You learned in the previous lesson how to align an image to get text to wrap around the image and how to include white space around the image. How do you turn off wrapping?

Stop Text Wrapping

Sometimes you want the text to stop wrapping around the image and just move down below the image entirely. You can add an attribute to a break tag <br>  to do this. You have three choices, depending on which margin your image is on or whether you have images on both sides.

  • <br clear="left">
  • <br clear="right">
  • <br clear="all">

Adding the CLEAR attribute makes the text jump down below anything on the margin that you picked as the value. The value "all" jumps the text down below anything on either margin.

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    FrontPage/ FPXTo subtopics
    Images in HTML Arrow - Subtopic open
    FrontPageTo subtopics OR Icon: FPXFPX Arrow - Subtopic open
            icon-footprintInsert Image
            icon-footprintMore Images
            icon-footprintInline Images
            icon-footprintReplace Image
            icon-footprintImage Link
                Align & Space
            icon-footprintAlign Images
                Image Issues
            icon-footprintSave to New Location
            icon-footprintSave Non-Web Image
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


Icon Step-by-Step

Step-by-Step: Align & Space Images

 Icon Step-by-Step

What you will learn: to align image to left
to add space around  image
to stop text wrapping
to center image 

 Start withClass disk, Icon: FPX hector11.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.

Insert Image

  1. Class disk Save the page with the name hector12.htm in the web folder of your Class disk.
  2. Text: cursor in TravelPut your cursor at the beginning of the paragraph under Travel.
  3. Text: image of boat insertedInsert the image travel.gif that is in the web folder on your Class disk. (You should know how to do this now!)

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

Align and Space Image

  1. Dialog: Image Properties - Layout - Alignment = leftRight click on the new image and from the popup menu select  Image Properties .
  2. Click on the Appearance tab.
  3. In the drop list Alignment select left. This will add align="left" to the image tag so that the text will wrap around the image.
  4. Dialog: Image Properties | Appearnace - horizontal spacing = 5Set Horizontal spacing to 5, which means 5 pixels.
  5. Click on OK.

    Text: boat image aligned  left and spaced
    The text now wraps around the image, but is moved a short distance away. Success!

Stop Text Wrapping

The illustrations for the next steps were captured at 640 x 480 with a maximized window. At different resolutions and window sizes, the text wrapping can be quite different. You will use the <br> tag with the clear attribute to make sure the wrapping is right for all window sizes.

  1. Resize the FPX window, if necessary, to be approximately 640 x 480.
  2. At the left of the paragraph that follows the heading Fishing, insert the image fish.gif that is in your web folder.
  3. Text: boat and fish images inserted, aligned, spacedSet the same Alignment and Spacing settings as before: Left and 5 pixels.

    If your window is about 640 x 480, the next heading, Soccer, is now sitting beside the fish image instead of being at the left margin. Not at all appropriate!

  4. Move your cursor to the left of the heading Soccer.

  5. Menu: Insert | Break...From the menu select  Insert  |  Break...  The dialog Break Properties opens
  6. Dialog: Break PropertiesSelect Clear Left Margin and click on OK.

    The text moves down until it clears the image entirely.

    Text: Soccer paragraph begins below fish.gifThe symbol Icon: Line break shows where you inserted the break. For some reason FPX will display this mark but will not display a normal paragraph mark.

Line Wrapping in Large Windows

Viewing your HTML pages in different window sizes can often reveal unhappy surprises. For example, at 640 x 480 or smaller, the heading Fishing appears on the left margin. But at 800 x 600 or larger, the heading Fishing is to the right of the images! You can (and should!) fix the problem even if your own monitor cannot hold a window large enough to show the problem.

  1. Text: fish image at right of boat image in a large windowIf it is possible on your monitor, enlarge FPX window until the Fishing heading wraps beside the image travel.gif (larger than 640 x 480). The larger the window, the more obvious the problem.
  2. Place your cursor at the end of the sentence ...I am not done with traveling yet.
  3. Insert a break to clear to the left margin.

  4. Text: extra paragraph above fish imageResize the window slightly to make the screen redraw to show the break correctly, if necessary.
  5. If there is an extra paragraph break above the heading Fishing (as shown in the 800 x 600 view below), remove it by putting the cursor to the left of Fishing and backspacing once.

More Images

  1. FPX window: extra line break below fishing.gifInsert the image ball.gif from your web folder to the left of I never played soccer as a child.
  2. Set the image properties the same as you did for fish.gif.
  3. Insert a break of the type Clear Left Margin to move the heading Cooking below the image.
  4. Remove the extra blank paragraph.
  5. Insert the image grill.gif at the left of the paragraph Dad taught me early that... and set the image properties the same as you did for fish.gif.
  6. Insert a break to Clear Left Margin to make sure the heading Comments and Suggestions is on the left margin.
  7. Class disk Save your page.  [hector12.htm]

Other Alignments

  1. Open the Image properties for the mailbox image at the bottom of the page.
  2. Experiment by applying each of the alignment choices in turn to this image. Which ones are noticeably different?
  3. Experiment by applying different horizontal and vertical spacing.
  4. Text: mailbox image aligned leftApply the same settings for this image as you used earlier:
        Alignment Left
        5 pixels horizontal spacing
        0 vertical spacing.
  5. Class disk Save your page. [hector12.htm]

Center Images

In the Alignment list there is no 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. Photos centeredMove your cursor to the left of the image of Hector and Carla.
  2. Click on Button: Center the Center button on the toolbar.

    The whole paragraph is centered horizontally, so all three images move to the center.

  3. View the HTML code. ( View  |  HTML... ) To the left of the image tag for carla.jpg the paragraph tag has changed from changed from <p> to <p align="center">
  4. Close HTML View.
  5. Class disk Save your page. [hector12.htm]