How to insert a Horizontal Rule in HTML

What this tutorial will do is teach you a very basic HTML text insert that can be added to a web page to create a horizontal rule.

To insert a horizontal line:

1.       You must determine if your page calls for a line break/horizontal rule, since a horizontal line won’t solve every problem.

2.       Within the HTML coding, locate the body tags in the code; determine where the line break(s) should be placed in between the opening and closing body tags.

3.       Enter in the following text:  <hr> 

        The letters “hr” stands for Horizontal Rule.

  

4.       View results to make sure the line(s) has been placed in the right spot.

        Current example shows two horizontal rules.

To see a working example, go here.



After going through the tutorial, following the steps, and practicing with the working example, you will be ready to place Horizontal Rules in your own web pages.

                                                                                                                               -by Greg Hunsaker

Websites I like

The two websites I really liked for a reason or another were


1. http://www.indofolio.com/

2. http://waterlife.nfb.ca/


     The Second Site listed is really interesting on how the page has incorporated the user; an animation takes place when your mouse hovers over something or you click which makes it a really intriguing site.

     Navigation is very simple but effective, there is a drop down menu from the left side when the mouse hovers over the list, the remaining parts of the page are darken as to focus your attention onto the list. As I scroll down the list enlarges just like on a Mac when you hover over an Icon along the bottom of your screen. Then there is a second display of the menu along the bottom of the page. The menu works the same as a Mac Icon that enlarges but, instead of Icons, it has portrayed little blue parallel bars to simulate a water wave travelling across the page as your curser hovers over it. The navigation system lets you know where you are currently by listing the selection above the menu on the side, however it does not list where you have been or have clicked on.

     The main theme of this site is water information, its uses and the problems if neglected problems persist. So the colors blue and black and the transitions between pages portraying a wave are appropriate for the theme presented. The display of the text had very little hierarchy; it was very simple with not much variance in size. I really liked the presentation of how the information was displayed. It was very repetitive to establish familiarity with all the different information being displayed.

     The purpose of this site is to provide an informative view of water uses and the problems that exist unknown commonly to the public. The words displayed along with the visuals are complimentary to each other; neither detracts from the other in portraying the message. The uniqueness of this website would definitely impact its viewers. This accomplishes its goal to make the public more aware of the problems by having the information displayed in such a manner, with visuals and dialogue as well as audio clips.

     Those that would view this as pertaining to them are people who may want to do a better job in decreasing how much their “footprints” effect the environment.

     This has given me an idea I would like to incorporate into my future website design when I use flash. I would like to try and incorporate a different transition between my pages instead of having the traditional page to page slide show effect, clicking from one to another.