Adding horizontal rules - Wiley Publishing For Dummies HTML for Dummies, pdf

The horizontal rule element (<hr>) helps you include solid straight lines (rules) on your page - and put them anywhere you'd rather not use a graphic. If you want to break your page into logical sections (or just separate your headers and footers from the rest of the page), a horizontal rule is a good option. Users don't have to wait for a graphic to download because the browser creates the rule based on the <hr> element, not an image reference.

When you include an <hr> element in your page, as in the following HTML, the browser replaces it with a line, as shown in Figure 4-12.

Figure 4-12: Use the <hr> element to add horizontal lines to your page.

Tip A horizontal rule must always sit on a line by itself; you can't add an <hr> element in the middle of a paragraph (or other block element) and expect the rule to just appear in the middle of the block.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

HTML 4 for Dummies, 4th Edition

Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- by-step book will put you on the right track.

Table of Contents

HTML 4 For Dummies, 4th Edition Introduction

Part I - Meeting HTML in Its Natural Environment

Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web

Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML

Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images

Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level

Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms

Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS

Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic

Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site

Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens

Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts

Part VII - Appendixes Appendix A - HTML 4 Tags

Appendix B - HTML Character Codes Appendix C - Glossary

Index

Cheat Sheet- HTML 4 For Dummies, 4th Edition List of Figures List of Tables List of Listings List of Sidebars <title>Horizontal Rules</title> </head> <body>

This is a paragraph followed by a horizontal rule. <hr>

This is a paragraph preceded by a horizontal rule. </body>

</html>

Four different attributes help you control the display of each horizontal rule:

width: Specifies line width in pixels or by percentage. For example, your rule can be 50 pixels wide or take up 75 percent of the page.

size: Specifies the height of the line in pixels. The default is 1 pixel.

align: Specifies the horizontal alignment of the rule as left (the default), center, or right. If you don't define a width for your rule, it takes up the entire width of the page, preventing any alignment you set from showing up in the display.

noshade: Specifies a rule with no shading. By default, most browsers display hard rules with a shade. If you include the noshade attribute in your <hr> element, the line will appear as a solid line.

This bit of HTML creates a horizontal rule that takes up 45 percent of the page, is 4 pixels high, aligned to the center, and has shading turned off:

This is a paragraph followed by a horizontal rule. <hr width="45%" size="4" align="center" noshade>

This is a paragraph preceded by a horizontal rule.

Figure 4-13 shows how the addition of these attributes can greatly alter the way a browser displays the rule.

Figure 4-13: Use the <hr> attributes to better control how a browser displays the rule.

For a look at how you can use horizontal rules in the real world to highlight important content, take a gander at

Figure 4-14. The LANWrights, Inc. site uses colored hard rules to surround a key statement on the site's home page that tells visitors exactly what the company does. The rules make the statement stand out from the rest of the page.