This and That HTML

This and That HTML
by mm and Tik Tok

These pages attempt to give the "how to's" for many elements you might wish to use on your web pages such as horizontal rules (sometimes called "bars" - used instead of images of bars as separators), how to make lists, how to put midi or wave files on your page, how to successfully use bordered backgrounds, other stuff we thought you might be interested in, and how to align text and images with tags other than just the center tag or blockquotes (both the center tag and blockquote tag are now deprecated by the w3 but still very useable).

The who?? It's what??

The w3 are the folks who set the standards for html. When a tag or tags become obsolete they say: "It's depreciated." (I wonder if you can hear thunder booming in the background when they say this?) If you really want to read all about this, go to their site: w3.org This link is to the html 4 page, feel free to browse, take a large bag of popcorn and a canteen of your favorite drink.

In fact, most of the tags we now use, even on these pages, have been depreciated. The new code is all written for Style Sheets. However, almost all the browsers still recognize html 3 and 4, so don't worry, what we're showing you here is still very usable and a whole lot easier :0)

Let's do the easy one first. Right above this text is a Horizontal Rule. I've used it to indicate a change in subject as it were. It's an easy tag, so easy in fact you need to Not over use it. Also, you can center it or you can right or left align it. We'll do "align" on the next page, don't worry about it yet.

Here is the html code for the bar I centered above:

Let's break it up and describe the parts (My comments are in red):

<hr (Opens the tag. Yep, hr stands for horizontal rule)

width="90%" (Indicates the width of the rule in comparison to the page width. Here I have it set to 90 percent of the width of my page. You Must use the percent sign! You can do this using pixels as well, as I'll show later)

size="2" (The height of the rule in pixels. 2 or 3 is pretty standard, if you want a really fat bar, increase this size, but it won't look as good IMHO)

align="center"> (Here is the can of worms :0) We could have used center tags before and after the horizontal rule, and skipped this align tag. But this is the Proper way. Like using the proper fork when dining in public. Also, later we'll be changing where we want the rule on the page so, learn the align tag now. Also we've closed the tag)

Note: You could just drop in <hr> all over your page, and get the default rule, 2 pixels high, all left aligned. Or if you want to be fancy, and have the space, go out and find a nice "bar" and insert it as an image:

Do try to make the bar fit the design of the page/site.

Okay, you want to make all your horizontal rules hug the left margin of your web page:

Here's the code:

We see three differences from our top rule:

<hr (Opens the tag)

width="300" (Here we have the width of the rule in pixels, I randomly chose 300 of them)

size="3" (The height of the rule, I chose 3 pixels)

align="left"> (I wanted this rule to be left justified, so I changed the align tag to "left, then closed the tag)

And finally, if you ever have the mad desire to right justify the rule (all kidding aside, it's done a lot in tables of information) here's the code:

<hr width="500" size="2" align="right"> Which gives you:

A horizontal rule, 500 pixels in width and 2 pixels high and right justified.

Want colored bars?? Just toss in the hex code for the color, here it's a shade of blue:

And presto! But it only works using Internet Explorer. We Netscape and Opera users are stuck with gray! Yep, I just checked this page with IE and the above bar Is Blue!

End of Page One....click here for Page Two

Page: 1 2 3 4 5 6 7

Back to Site Help

This helpful information compiled by Tik Tok