(^122) Chapter 4 Visual Elements and Graphics
4.1Configuring Lines and Borders
Web designers often use visual elements such as lines and borders to separate or define
areas on Web pages. In this section you’ll explore two coding techniques to configure a
line on a Web page: the XHTML horizontal rule element and the CSS borderand
paddingproperties.The Horizontal Rule Element
A horizontal rule or line visually separates areas of a page. The <hr />element config-
ures a horizontal line across a Web page. Since the horizontal rule element does not
contain any text, it is coded as a stand-alone tag, and not in a pair of opening and clos-
ing tags.Horizontal rules are centered within their container element (in this case the Web page
body) by default. A number of attributes exist for the <hr /> tag but they are depre-
cated or not officially supported by the W3C. Appendix A contains a list of these
attributes and descriptions.
While a horizontal rule can be easily created using XHTML, a more modern technique
is to use CSS to configure a border for a Web page element.The borderand paddingProperties
As you may have noticed when you configured background colors for heading elements
in Chapter 3, block-level XHTML elements form the shape of a rectangular box on a
Web page. This is known as the CSS box model, which you will explore in detail inFigure 4.1
The
element configures a
horizontal line
HANDS-ON PRACTICE 4.1
Open the Web page found at chapter4/starter1.html in the student files in a text editor.
This file should be familiar to you; it is similar to the Web page you worked with in
Chapter 3 (see Figure 3.12). Add an <hr />tag above the paragraph that contains the
page footer (id="footer").
Save your file as hr.html and test it in a browser. The lower portion of your Web page
should look similar to the partial screenshot shown in Figure 4.1. Compare your work
with the solution in the student files (Chapter4/hr.html).