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
    • Placing an Image on a Web Page
    • Labeling an Image
    • Images That Are Links
    • Horizontal Image Alignment
    • Vertical Image Alignment
    • Summary
    • Q&A
    • Workshop
  • Hour 11. Custom Backgrounds and Colors
  • Hour 12. Creating Animated Graphics
  • IV. Web Page Design
  • Hour 13. Page Design and Layout
  • 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

Horizontal Image Alignment

As discussed in Hour 5, "Text Alignment and Lists," you can use <div align="center">, <div align="right"> , and <div align="left"> to align part of a page to the center, right margin, or left margin. These tags affect both text and images.

For example, the last <img /> tag in Figure 10.1 occurs between the <div align= "center"> tag and the closing </div> tag. You can see in Figure 10.2 that this causes the image (as well as the text below it) to be centered on the page. Like text, images are normally lined up with the left margin unless a <div align="center"> or <div align="right"> tag indicates that they should be centered or right-justified.

As the first three images in Figures 10.4 and 10.5 demonstrate, you can also use <div align="center"> to center more than one image at a time. Since there are no <br /> or <p> tags between them, the three images all appear on one line and the entire line is centered horizontally in the browser window.

Figure 10.4 This page contains examples of both horizontal and vertical image alignment, as well as automatic wrapping of text around images.

Figure 10.5 The HTML page listed in Figure 10.4, as it appears in a Web browser.

You can also make text wrap around images, as the paragraph around the pictures of Mars and Venus in the lower-middle part of Figure 10.5 does. You do this by including an align attribute within the <img /> tag itself, as shown in the fifth and sixth <img /> tags in Figure 10.4.

<img align="left" /> aligns the image to the left and causes text to wrap around the right side of it. As you'd expect, <img align="right" /> aligns the image to the right and causes text to wrap around the left side of it.

You can't use <img align="center" /> because text won't wrap around a centered image. You must use <div align="center"> if you want an image to be centered on the page, as I did with the top image in Figures 10.4 and 10.5.

Share This