|
Lesson 7a. Horizontal Rules.
Horizontal Rules!
Make a simple line across your page. 
To make a line across your page simply type, <HR> between your two body tags.
(HR= Horizontal Rule)
<BODY>
<HR>
</BODY>
Will look like this on your page:
Just an ordinary, simple line stretching across the length of your page.
Change your HR's size.
The above line is kind of boring, isn't it? Lets go ahead and change it's size.
|
<hr size="?">
"?" is the number of pixels high you want your <HR> to be.
|
<hr size="5">
<hr size="8">
<hr size="10">
<hr size="15">
<hr size="25">
|
|
Make your HR's darker.
I don't like the 'cutout' effect of the above HR's, so let's shade them in.
<hr size="?" noshade>
NOSHADE will give you a 'dark' or 'filled-in' rule.
|
<hr size="5" noshade>
<hr size="8" noshade>
<hr size="10" noshade>
<hr size="15" noshade>
<hr size="25" noshade>
|
|
*Can you tell me why on earth the command to shade in the lines is called, 'noshade'?
Change your HR's width.
HR WIDTH will alter how long your rule stretches across your page.
To specify your HR WIDTH you can use a numerical value or a percentage.
<hr width="50">
<hr width="100">
<hr width="150">
<hr width="200">
<hr size="250">
<hr size="355">
<hr size="420">
<hr width=100%>
<hr width=80%>
<hr width=60%>
<hr width=45%>
<hr width=20%>
<hr width=10%>
Note:
- The <HR> TAG does not have an 'end' tag. You don't need </HR>
- <hr width=10%> will make a line spanning across 10% of your page.
- <hr width="10"> will make a line that always spans only 10 pixels wide across your page, no matter what size the page is.
- Most computer screens will be able to see a page that is 600 pixels wide in its entirety, so I usually don't make my HR width wider than 600 pixels.
|
|
Change the HR's position on your page.
If you don't specify where you want your horizontal line on your page, it will automatically be centered.
However, I'm feeling kind of aggressive today, so I'm going tell my HR's where to go!!!
<hr align="left"> Puts your line to the left of your page.
<hr align="center"> Puts your line 'smack bang' in the center.
<hr align="right"> Puts your line to the right of your page.
Check this out!
Using align="left"
|
Click here to see the code for the above HR pattern.
|
|
Using align="right"
|
Click here to see the code for the above HR pattern.
|
|
Using align="center"
|
Click here to see the code for the above HR pattern.
|
|
Change your line's color.
Users of Internet Explorer 4 and above will be able to set the color of their horizontal lines
by putting a color command in the HR TAG as follows.
<hr color="One of the 12 color names"> or <hr color="color hex code">
|
<hr size="5" color="#ff0000" width=60%> |
|
<hr size="5" color="#0000ff" width=70%> |
|
<hr size="5" color="#00ff00" width=80%> |
|
<hr size="5" color="#ff9900" width=90%> |
|
<hr size="5" color="magenta" width=80%> |
|
<hr size="5" color="cyan" width=70%> |
|
<hr size="5" color="green" width=60%> |
|
PLEASE NOTE:
- In the above examples you will see no colors if you are not using Internet Explorer 4 or above.
- Netscape Navigator users will also see nothing. (SORRY!)
- If you change your HR color using the color command and can't see it on your browser, don't worry.
I'll show you a way around this in the next lesson or two.
To the top
Go back to lesson 6.
Learn to align your text!
 Back to index page.
Thank you for visiting this page
Click to peruse our SpinNet Homepage.
Page created by Kimberly Rigby. / For any comments or questions, click here!
| 