... HTML & Webpages ...

... Recommend this series to a friend.

MAKING A LINE ACROSS THE PAGE

By now you must have noticed the short line I have near the bottom of these pages (beneath the text and above the links). That's done with an <HR> tag. Just like <BR> and <P> … <HR> is a single tag; no closing tag necessary. Now if you put this tag into your editor, you'll get a line that looks like this:


And papa bear said, "Who made this line? And it's much to long."


And mamma bear said, "Who made this line? And it's much to short."


And baby bear said, "Who made this line? And it's just right."

So how is this done ... no need to get mathematical but it's done with percentages like this <HR WIDTH="number%"> ... <HR> doesn't need a percent; it gives a full page line. Mama bear's line is <HR WIDTH="10%"> (it's much too short) and Baby Bear's line is <HR WIDTH="50%"> ... for some reason (don't ask me why) I have the half page lines all over this site. Maybe because it is "just right".

Two more points about lines you should note. Chances are you will want some space both above and below the line. In that case, the line tag will need a <P> after it; like <HR WIDTH="50%"> <P> … that should do it. And the other point is that the height of the line can be determined by adding within the tag a "SIZE=" element.

It's always confusing to me in that "width" in this tag tells the browser how much across the page the line should go, and "size" tells the browser what most people ordinarily think of as "width". Another word for width (in common parlance) would be thickness. Here's the full tag: <HR SIZE="4" WIDTH="50%"> … "size" can be any number you want; I use "4" throughout this site (maybe because that's what I first saw when peeking into a "view source" of some page at one time).

Last point on lines … the "size" attribute seems to work only on pages of color; I don't see it working properly where graphic backgrounds are used. You can try it for yourself; maybe I'm wrong.

A WORD ABOUT SPACING

To put the graphics (or text) further apart from each other you add this: &nbsp; ... that's an ampersand "&" in front of the nbsp following by a semicolon, all with no spaces, all between the two tags, for example:

<IMG SRC="whatever.jpg/gif"> &nbsp; <IMG SRC="whatever.jpg/gif">

Keep in mind that <P> makes a vertical space (like skipping a line), and the &nbsp; (including the ampersand and the semicolon) is a horizontal spacer (making only a one pixel space. They can be used together by enclosing the horizontal spacer between the <P> </P> tags. That will make your text skip down (vertical) several lines.

FYI (for your information) had I spelled out completely the "&nbsp;" you would never have seen it ... it would just make a space. I had to use some another trick, ASCII characters, to do that (another interesting subject).


And we'll continue on the … Next Page … numbered & bulleted lists.

Return to ... Navigator ... that's it.

1