You learned in the previous lesson how to align or float an image to get text to wrap around it and how to include white space around the image. You haven't actually done that yet! Also, how do you turn off wrapping? There's an old way and a new way, of course!
Viewing your HTML pages in different window sizes can often reveal unhappy surprises. For example, at 640 x 480 or smaller, a paragraph might neatly start on the left margin below an image. But at 800 x 600 or larger, the heading is wrapping to the right of the image! You can (and should!) find and fix the problem, even if your own monitor cannot hold a window large enough to show the problem.
This paragraph is wrapping around the balloons that float at the left. The next paragraph has a STYLE attribute that stops text wrapping. The text jumps down below anything that floats at the left. In this case that is the balloons and the ad at the left. Cool feature!
You have three choices, depending on which margin your image is on or whether you have images or other floating objects on both sides.
Old HTML way: Add a CLEAR attribute to the BR (break) tag.
New CSS way: Add a STYLE with a CLEAR property to the first tag that you do not want to wrap around the image.
The attribute clear="all"or style="clear:both" pushes the text down below anything aligned/floating on either margin.
Step-by-Step: Align & Space Images
|What you will learn:||to add image to page
to float and space image
to stop text wrapping
to center image
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.
Be sure to include the dimensions and appropriate ALT text. (You should know how to do this now!)
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.
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.
Switch back to your HTML code editor.
<img src="HTML/travel.gif" style="float:left" width="100" height="94" alt="Icon: Travel">
The text now wraps around the image, but is bumping up against the text.
<img src="HTML/travel.gif" style="float:left;margin-right:4px" width="100" height="94" alt="Icon: Travel">
The image is pushed away from the text just a bit. Success!
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.
Switch back to your HTML editor.
In the DT tag before the word Fishing, add style="clear:both"
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.
Next you will add images for each of the other items in Hector's list: Fishing, Soccer, and Cooking.
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
margin-right of 4 pixels
Make the text stop wrapping after Hector's paragraph on Travel:
Add style="clear:both" to the DT tag that follows (Soccer).
Make the text stop wrapping so that each image is beside only its
Your HTML code may be laid out differently, depending on what editor you are using and the window size.
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.
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!
Edit the P tag to add style="text-align:center"
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.