Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • Tell Us What You Think!
  • Put Your HTML Page Online Today
  • I. Your First Web Page
  • Hour 1. Understanding HTML and XML
  • Hour 2. Create a Web Page Right Now
  • Hour 3. Linking to Other Web Pages
  • Hour 4. Publishing Your HTML Pages
  • II. Web Page Text
  • Hour 5. Text Alignment and Lists
  • Hour 6. Text Formatting and Font Control
  • Hour 7. Email Links and Links Within a Page
  • Hour 8. Creating HTML Forms
  • III. Web Page Graphics
  • Hour 9. Creating Your Own Web Page Graphics
  • Hour 10. Putting Graphics on a Web Page
  • Hour 11. Custom Backgrounds and Colors
  • Hour 12. Creating Animated Graphics
  • IV. Web Page Design
  • Hour 13. Page Design and Layout
    • Web Page Design
    • Image Spacing and Borders
    • The Old Background Banner Trick
    • Specifying Image Width and Height
    • Summary
    • Q&A
    • Workshop
  • Hour 14. Graphical Links and Imagemaps
  • Hour 15. Advanced Layout with Tables
  • Hour 16. Using Style Sheets
  • V. Dynamic Web Pages
  • Hour 17. Embedding Multimedia in Web Pages
  • Hour 18. Interactive Pages with Applets and ActiveX
  • Hour 19. Web Page Scripting for Non-Programmers
  • Hour 20. Setting Pages in Motion with Dynamic HTML
  • VI. Building a Web Site
  • Hour 21. Multipage Layout with Frames
  • Hour 22. Organizing and Managing a Web Site
  • Hour 23. Helping People Find Your Web Pages
  • Hour 24. Planning for the Future of HTML
  • VII. Appendixes
  • A. Readers' Most Frequently Asked Questions
  • B. HTML Learning Resources on the Internet
  • C. Complete HTML 4 Quick Reference
  • D. HTML Character Entities

Image Spacing and Borders

Figures 13.1 through 13.3 show the HTML text, images, and final appearance of a well-designed Web page. It meets all the criteria outlined in Table 13.1.

Note

When you look at Figure 13.2, remember that Paint Shop Pro uses cross-hatching to indicate that a window is bigger than the image it contains, and a checkerboard pattern to indicate which regions of an image are transparent. For example, spacer.gif is actually a very small, entirely transparent square.

Figure 13.2 Here are five of the nine image files referred to in Figure 13.1.

Notice the generous amount of space between images and paragraphs in Figure 13.3. Web browsers tend to crowd everything together, but you can easily add space three different ways:

Figure 13.3 Thanks to generous spacing and a carefully premeditated layout, the HTML in Figure 13.1 looks great as a Web page.

• Use small, totally transparent images to leave room between other things. The spacer.gif file (shown in Figure 13.2 and referred to in Figure 13.1) creates 20 pixels of blank space between each of the main parts of this page.
  

  Figure 13.1 This page uses several techniques for adding blank space between images and text.

• When you wrap text around an image by using <img align="right" /> or <img align="left" />, you can skip past the bottom of that image at any time with <br clear="right" /> or <br clear="left" />. If you have images on both the right and left, you can type <br clear="all" /> to go past both of them.
• You can add extra space on the left and right sides of any image with hspace. To add space on the top and bottom sides, use vspace. For example, each image in Figure 13.3 has 20 pixels of blank space to the left and right of it, and 5 pixels above and below it. This is because each <img /> tag in Figure 13.1 includes the attributes hspace="20" vspace="5".

You'll read about the width and height attributes of the <img /> tag later in this hour, in the "Specifying Image Width and Height" section.

The <img /> tags in Figure 13.1 also include a border="3" attribute, which enlarges the rectangular border around the images. The border is normally one pixel thick for any image inside an <a> link, but border="3" makes it three pixels thick.

The most popular use of the border attribute is making the image border disappear completely by typing border="0". This is especially handy with transparent images, which often look funny with a rectangle around them.

The color of the border will be the same as the color of any text links. In this page, images that link to pages someone hasn't visited yet will have maroon borders. Images that link to a recently visited page will have green borders.

Share This