Friday, April 2, 2010
Horizontal Rules
Posted by devlevis | Friday, April 2, 2010 | Category:
free html course,
how to use horizontal rules using html code,
html code for horizontal rules,
html tricks,
learn html
|
Horizontal rules are used to visually break up sections of a document.
The <hr> tag creates a line from the current position in the document to the right margin and
breaks the line accordingly.
For example, if you were reproducing text from a book, you might want to use rules
to show a break between chapters, as shown in the following excerpt from Anna
Sewell’s Black Beauty:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Excerpt of Black Beauty</title>
</head>
<body>
<p>One day he was at this game, and did not know that the
master was in the next field; but he was there, watching what
was going on; over the hedge he jumped in a snap, and
catching Dick by the arm, he gave him such a box on the ear
as made him roar with the pain and surprise. As soon as we
saw the master we trotted up nearer to see what went on.</p>
<p>"Bad boy!" he said, "bad boy! to chase the colts. This is
not the first time, nor the second, but it shall be the last.
There -- take your money and go home; I shall not want you on
my farm again."</p>
<p>So we never saw Dick any more. Old Daniel, the man who
looked after the horses, was just as gentle as our master, so
we were well off.</p><hr>
<p>Chapter 02 The Hunt</p>
<p>Before I was two years old a circumstance happened
which I have never forgotten. It was early in the spring;
there had been a little frost in the night, and a light mist
still hung over the woods and meadows. I and the other colts
were feeding at the lower part of the field when we heard,
quite ... </p>
</body>
</html>
The output of this code is shown in Figure.
As with most tags, you can customize the look of the <hr> tag by using styles.
For example, consider the following style:
<style type-"text/css">
hr { color: red; height: 5px; width: 50%; }
</style>
If this style were added to our last example, the results would be similar to the
output shown in Figure .
Subscribe to:
Post Comments (Atom)
Currently have 0 comments: