A horizontal line, or horizontal rule as it is named in HTML, is one of the easiest tags to use. You can insert the <hr /> tag anywhere in your document to insert a horizontal line that extends across the space available. Take a look at the following sample HTML. It shows three <hr> tags: two used as a section break between text and the other used inside a table cell. Figure 2.8 shows how they appear in the browser.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Horizontal Lines</title>
<style type=”text/css”>
td {text-align=center}
</style>
</head>
<body>
<p>This is a horizontal line.</p>
<hr />
<p>This is another horizontal line.</p>
<hr />
<table width=”50%” rules=cols>
<tr>
<td>This is also a<hr />horizontal line.</td>
<td>There is <br />no line on this<br />side
of the table.</td>
</tr>
</table>
</body>
</html>
The <hr /> tag inserts a horizontal line that stretches
across the available horizontal space.
Margin Styles
Style sheets give you another important advantage: You can specify the margins of almost any HTML element. The margins can be defined in pt, in, cm, or px sizes.
body {margin-left: 100px;
margin-right: 100px;
margin-top: 50px}
You can set the margin-left, margin-right, and margin-top properties individually or combine them into one property called margin that applies the sizes to the top, right, and left margins.
body {margin: 100px 100px 50px}
Summary
This chapter discussed the basics of web page layout using Hypertext Markup Language, including the structure of HTML documents, examples of HTML page elements, and page styling using both element attributes and cascading style sheets.


Posted in
Tags: 





