HTML Basics:
Icon: FrontPage 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
    Icon: FrontPage FrontPage Arrow - Subtopic open OR FPXTo subtopics
    icon-footprintInsert Image
    icon-footprintMore Images
    icon-footprintInline Images
    icon-footprintReplace Image
    icon-footprintImage Link
        Align & Space
    icon-footprintAlign Images
        Image Issues
    icon-footprintSave Page
    icon-footprintEdit/Convert Image
    icon-footprintPictures Bar
    icon-footprintPublish Web
    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, 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 TravelIn Normal view, put your cursor at the beginning of the paragraph under Travel.
  3. Text: image of boat insertedInsert the image travel.gif that is in the hector web on your Class disk.

    The bottom of the image lines up with the baseline of the text. This does not look very nice but it is a start.

Align and Space Image

You will align the image to the left margin and add some white space around it.

  1. Dialog: Picture Properties - Appearance - Alignment = left, hspace=5Right click on the new image and from the popup menu select  Picture Properties.
  2. If necessary, click on the Appearance tab.
  3. Under Wrapping style, 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!  

  6. With the image still selected, switch to HTML view and inspect the image tag to see the added attribute. The whole IMG tag should be highlighted.

    HTML Code: IMG tag for travel.gif

  7. Switch back to Normal view.

Stop Text Wrapping

The illustrations for the next steps were captured in a 800 x 600 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 FrontPage window, if necessary, to be approximately 800 x 600.
  2. At the left of the paragraph that follows the heading Fishing, insert the image fish.gif that is in your hector web.
  3. Text: boat and fish images inserted, aligned, spacedSet the same Alignment and Spacing settings as before: Left and hspace= 5 pixels.

    If your window is about 800 x 600 or wider, 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
    Tip: Keyboard Click in the word Soccer first and then press the Home key.

  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.

    TipIf you insert a Normal line break, you may get what looks like the same result, depending on your window size. A Normal line break just drops down one line. That does not guarantee that your text will be at the left margin.

  7. Text: Soccer paragraph begins below fish.gifIf necessary, click on the Button: Show marks Show All marks button. Now you can see where the breaks are and where the image anchors are. The symbol Icon: Line break shows where you inserted the break.
  8. Turn off the marks.
    When marks are showing, the Normal view is a lot less WYSIWYG. Spacing changes a lot to make room for all the marks. You will want to leave the marks off except when you really need to see them.

Line Wrapping in Large Windows

Viewing your HTML pages in different window sizes can often reveal unhappy surprises. Enlarging the window may make images wrap in very unhappy ways. 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 windowEnlarge the FrontPage window until the Fishing heading wraps beside the image travel.gif .
    The larger the window, the more obvious the problem.

    Dragging the edge of the Folder List(You can drag the right edge of the Folder List to the left to give even more horizontal space or even close it for now.)
  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.

    Text: extra paragraph above fish imageThere is an extra line above the heading Fishing. Can we get rid of it?

  4. With the cursor just above Fishing, press the Backspace key. Whoops! That deletes the line break! Let's try a different position for the break.

  5. Extra line removed above the fishPut your cursor at the left of the word Fishing and insert a Clear left break. Aha! Now we have the spacing we wanted.

More Images

  1. Show the marks.
  2. All travel images inserted.Insert the image ball.gif from your web folder to the left of I never played soccer as a child.
  3. Set the image properties the same as you did for fish.gif.
  4. Insert a break of the type Clear Left Margin at the left of the heading Soccer to make sure it will not slide up beside the fish at a large window size.
  5. Insert the same kind of break for Cooking.
  6. 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.
  7. Insert a break to Clear Left Margin in front of the heading Comments and Suggestions to make sure it stays at the left margin, too.
  8. 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

When you choose Center from the Alignment list, the ALIGN attribute is not added to the IMG tag.  It is added to the paragraph or heading tag that contains the IMG tag. 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. If your window is still large, this may not be very obvious.

    Resize the window smaller to see the effect.

  3. Switch to the HTML view. 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]