Lesson 9
Horizontal Rule:
<hr> width
<hr> Align
<hr> Size & Color:
Color
chart: Click here to chose color for your background.
Practice HTML Use
this feature or your Notepad.
Horizontal Rule:
It uses <hr>
tag. This tag is used to make
partition in the page or separate the particular section
of the page. So you can divide the page with the help of
this tag instead of puttin images (dividers) in the page.
Ok copy and paste or type the basic Html tags. Now we'll
add the <hr> tag in it. This tag does not need the
closing tag.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>Hi
welcome to my page.</p>
<hr>
<p> Contents:</p>
</body>
</html>
|
Now your Horizontal Rule will look like
this.
You can also change the size, length,
and color of the Horizontal Rule. Ok let's see how.
<hr>
Width:
You can controll the width of the Horizontal
Rule with the help of width attribute.
<hr width="75%">
<hr width="50%">
Ok let's see how the Horizontal Rule
looks with different width.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>Hi
welcome to my page.</p>
The length of Horizontal rule is
75% of the page.
<hr width="75%">
<br>
Now the length is 50% of
the page. <br>
<hr width="50%">
<p> Contents:</p>
</body>
</html>
|
Now your HR will look like this with
two different width.
<hr>
Align:
This tag will allow you to Align the
<hr> tag according to your need. You
can align it to the right, left or the center of the page.
<hr width="50%" align="left">
<hr width="50%" align="right">
<hr width="50%" align="center">
Here we've added align
attribute with the previous tag.
Ok copy and paste the previous tags in your Notepad or Practice
HTML feature. Now add align attribute
and see how it looks. Here is
the code.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>Hi
welcome to my page.</p>
The length of Horizontal rule is
75% of the page and it is aligned left.
<hr width="75%"
align="left">
<br>
Now the length is 50% of
the page and it is aligned right.<br>
<hr width="50%"
align="right">
</body>
</html>
|
Your HR should look like this.
Please note one <hr> is aligned
on the left side of the page while other is aligned to the
right side of the page. The same way you can align it to
the center too.
<hr> Size &
color:
Now You can controll the size and color
of HR also.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>Hi
welcome to my page.</p>
The length of Horizontal rule is
75% and size is 2
<hr width="75%"
align="left" size="1"><br>
<hr width="75%" align="left"
size="5"><br>
<hr width="75%" align="left"
size="10">
</body>
</html>
|
Ok now it will look like this with 3
different size.
Alright let's add shade in it.
Copy the above tag in your Notepad or Practice HTML feature.
add noshade
with it and you are done.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>Hi
welcome to my page.</p>
The length of Horizontal rule is
75%
<hr width="75%"
align="left" size="1" noshade><br>
<hr width="75%" align="left"
size="5" noshade><br>
<hr width="75%" align="left"
size="10" noshade>
</body>
</html>
|
Now your HR will be shaded
