Web development by PHP-Web-Host.com   Website Hosting by PHP-Web-Host.com
Web Hosting by PHP-Web-Host.com

HTML Tutor!

HTML Tutor, learn to author your own website

Tel (Lon, UK): 020 8133 3460

 

 

Resources

SoftSmart.co.za | Linux Web Hosting

 

 

Please sign up for our Free News Letter
Please help us by taking this 1 minute survey!

Another little widget that you will find yourself using a lot is the Horizontal Rule.

<body>
<hr>
</body>


We have a few options available to us...

<body>
<hr width="20%">
<hr width="50%">
<hr width="100%">
<hr width="20">
<hr width="50">
<hr width="100">
</body>






Be careful with large absolute widths, such as width="1000". If your visitor is running a screen resolution of 1024x768 or greater, a <hr> width of 1000 is no problem. But if he's running at a lesser resolution (such as 800x600... which many folks do) your horizontal rule will run off the right side of the screen. If you wish to alter the default length of a horizontal rule, best use a percentage value.


This attribute is pretty self-explanatory.

<body>
<hr width="60%" align="left">
<hr width="60%" align="right">
<hr width="60%" align="center">
</body>




We can control the thickness of the line...

<body>
<hr width="60%" size="1">
<hr width="60%" size="3">
<hr width="60%" size="8">
<hr width="60%" size="15">
</body>





And we can make it a solid line.

<body>
<hr width="60%" size="1" noshade>
<hr width="60%" size="3" noshade>
<hr width="60%" size="8" noshade>
<hr width="60%" size="15" noshade>
</body>





You can also color horizontal rules. (Although not included in any official HTML specification, the color attribute in a <hr> is supported by most common browsers.)

<body>
<hr width="60%" size="1" noshade color="#ff9900">
<hr width="60%" size="3" noshade color="#99ff00">
<hr width="60%" size="8" noshade color="#9900ff">
<hr width="60%" size="15" noshade color="#ff0099">
</body>




You'll notice the result is a solid color... as if a colored noshade. This is fairly consistent across the the browsers that support it. If you're going to use the color attribute, you might want to leave the noshade in there. That way the occasional browser that doesn't support color will just default to the grayish color.

So, you want to make a Web Page!
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Index & Quick Reference      Table of Contents      ColorPicker      BareBones HTML Guide
Color Charts      Simple Font Widget      Practice Exercises      Where are my images?
Print version of this tutorial available - Get the PageTutor Book & CD

 

 

SoftSmart.co.za | Linux Web Hosting

 

 

Please sign up for our Free News Letter
Please help us by taking this 1 minute survey!

 

 

We accept PayPal

 

Web Hosting by PHP-Web-Host.com Website Hosting by PHP-Web-Host.com

[ Home ] | [ Software ] | [ Web Development ] | [ Resources ] | [ Contact ] | [ Privacy Policy ] | [ Acceptable Use Policy ] | [ Terms of Service ] | [ Sitemap ] | [ Clients ] | [ Affiliates ]

[ PHP Web Hosting ] | [ Linux Web Hosting ] | [ 500mb PHP Web Hosting ] | [ 1Gb PHP Web Hosting ] | [ 3Gb PHP Web Hosting ] | [ 6Gb PHP Web Hosting ] | [ 10Gb PHP Web Hosting ]

[ HTML Tutor ] | [ CSS Tutorial ] |