Sunday, February 10, 2008

How to add horizontal line to webpage

To add horizontal line on webpage use the html code for horizontal line. These examples will show you the basic html code. CSS coding for these same effects are slightly different. You can also add attributes such as color and size.

www.rogersmarket.com

Html code for simple horizontal line <HR>
This simple code will yield this result







To add attributes such as color you would add the color attribute to your code. <HR color="red"> This example will give you a horizontal line like this






To get a horizontal line with height of 3 and width of 45 and color red you could use code like this <HR size="3" width="45" color="red">

This will result in a horizontal line like this








Your size and width of 3 and 45 are displayed in pixels.


Want a candy stripe look horizontal line? Just use the horizontal line code 3 times. In our example we will have a red, yellow, and green line. Height for each will be 8, and width will be 70. Your line(s) will look like this












To get the lines above we used this code <HR size="8" width= "70" color="red"><HR size="8" width= "70" color="yellow"><HR size="8" width= "70" color="green">


Some times depending on your html editor or browser you may have to substitute the actual color wording RED with the HTML 5 digit equivalent so your code for color would be color="FF0000".


A good html color code chart can be found at HTML color codes website HERE.

www.rogersmarket.com
This is only a simple help post on how to display a horizontal line on your webpage. Horizontal lines are easy to add and with some practice using the code and expirementing with adding other code attributes you can achieve the results you are looking for.

5 Comments:

At 12:45 PM, Anonymous Anonymous said...

Thank you very much. This is like 10 times better than that stupid ehow site. Your rock roger

 
At 7:20 PM, Anonymous Anonymous said...

Thank you for posting this! The instruction were very clear and it saved me a lot of time.

 
At 2:43 PM, Anonymous Anonymous said...

Very helpful, thank you! :)

 
At 3:16 PM, Anonymous Heather Mcmichaels said...

Shop here
www.rogersmarket.com
I have and great online store

 
At 10:19 AM, Anonymous stimepy said...

a quick note, this is for html 4 and xhtml. html5 required use of to make these things happen.

example hr style="border-top:1px solid black

(I don't have the brackets but if you don't think you need those, you should stop writing html.)

 

Post a Comment

Links to this post:

Create a Link

<< ROGERS PLACE BLOG HOME

Google rogers place blog 

blogging weblog journal