|
Suppose you want to
separate two paragraphs by a horizontal line, but you don’t
want to add an image (and therefore more load time), and adding
a text line of dashes or underscore characters doesn’t look
good. What do you do?
Fortunately enough,
HTML was designed with a tag for just this purpose: the Horizontal
Rule ( <HR> ) tag.
Adding an <HR>
to a page’s code will automatically draw a separator line.
The <HR> tag
also has a couple of parameters that can modify its appearance:
WIDTH: Width
of the line. Values are numbers (pixels) or percentages (percentage
of the total width of the page). The advantage of using percentages
is that resizing the page causes the separator to automatically
resize itself along with the page.
SIZE: Values
are numbers; they represent the vertical height of the separator
line. Actual height will be twice this value in pixels.
ALIGN: Can be
set to RIGHT, LEFT, or CENTER to determine how the separator is
aligned on the page.
EXAMPLE:
<HR
WIDTH=30% SIZE=5 ALIGN=CENTER>
will generate a line
that looks like this:
Let's try adding one
of these to our developing web page to split things up. Modify
your code so it looks like this:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
This is some text!
<pre>This is preformatted text</pre>
This web page is ©2001 by Me.
This should be a few spaces over
to the right.
<H1>This is going to be big text on its own line.</H1>
<font face="Arial" size=5>This will be almost
as big, and in Arial font!</font>
<br>
<div align="right">This should be on the next
line and on the right side of the screen.</div>
<br>
<center>This should be centered text.</center>
<br>
<br>
<hr width=75% size=6 align="left">
<br>
<br>
<br>
<div align="center">So should this, but several
more lines down the page.</div>
</body>
</html>
Take a look at the
result. It should look something like this:
Notice the separator
line is aligned with the left side of the screen and takes up
75% of the width of the screen. Try resizing your browser window.
You'll find the separator line resizes with it to maintain a 75%
width.
|
