Binary Central: HTML

Body Tags

After text, images, and links, there are another two types of major tags: body and header/meta tags. In this lesson, we'll start off on the remainder of the Body tags (that I can remember) and end up on lists.

Body Tags

Remember in Lesson 1 when I showed you the example of a BODY tag and told you that we were going to learn it? Now is that time.

The BODY tag isn't too hard to learn, just like most of the things in HTML, but there are quite a few attributes, so watch closely.

Behold! You now have the awesome body tag right before your eyes! The body tag has five attributes:

bgColor (use this or either the Background attribute) This is to specify a background color for your page. The number can either be in hex (i.e. #FFFFFF) or it can be a word (i.e. white).

Background - This specifies a background image instead of a background color to use for the background of your page.

Link - This tells the browser what color to make a regular link.

vLink - This specifies what color an already visited link will appear.

aLink - This one isn't really a big deal, it's the color the link will turn when you click on it, but I always put all three anyway.

For now, these things will be good to make the colors of links change. In a later planned CSS (Cascading Style Sheets) article, I plan to show you how to use stylesheets to make everything on multiple pages have the same colors.

Whoops! I forgot an attribute that I've seen before: bgProperties. BgProperties has only one value that I've ever seen, bgProperties="fixed". You only use bgProperties when you want to keep the background image from scrolling. It makes an awesome effect when you use it.

Note: On colors, it is usually better to use a Hex Code instead of a word. Because of this, I have provided a Hex Code Chart for you to look up Hex Codes in the HTML section of the site.

Other Body Tags

There are other body tags besides the BODY tag. One good tag is a tag to create horizontal lines to separate your page. That tag is the <HR> tag.

Horizontal Rule (HR)

Size - The height of the line in pixels.
Width - The width of the line in pixels or percent.
Color - The color of the line in Hex or Words.
noshade (optional) - Whether or not the line has a shade to it or not.

The next set of tags you use can do one of two things depending on browser. The <MARQUEE> tag will cause text in IE to scroll left or right. The <BLINK> tag will cause text to blink visible and invisible in Netscape. I'm not a personal fan of Netscape, but when I use MARQUEE, I always put in a BLINK tag to make it do something for either browser.

The BLINK tag doesn't really have any attributes, but the MARQUEE tag does.

Marquee

Align - This tells whether the text is to start on the left, middle, or right side of a page.
Behavior - This tells what the text is going to do, alternate, slide, or scroll.
Direction - This tells what direction the text is going to go.
Scrollamount - This tells how fast the text scrolls.
Scrolldelay - This tells how long the text delays before it starts scrolling.

There is one very important body tag used to create whitespace (blank lines) on your page. That tag is the <BR> tag. It has no real attributes that I can think of at this time.

Lists

Lists are one of those things are necessary to be a good web designer in HTML. There are two types of common lists, an unordered list and an ordered list. The main difference between the two types of lists is that while one uses numbers or letters that go up as you add more items, the other does not. There are two tags that can be used for these lists: the <OL> and <UL> tags. In lists though, there is another tag that specifies list items, the <LI> tag.

<OL type="I">
<LI>Banana Pudding</LI>
<LI>OWOW</LI>
</OL>

Ordered List

compact - This tells whether you want the list to be as compact as possible.
start - In the <OL> tag, if you want the listing to start at a different number, you can add this attribute and make it start on that number.
format - This attribute tells the browser what type of list you want to have. There are five values for the format attribute: I (capital roman-numerals), i (lower-case roman numerals), A (capital letters), a (lower-case letters), 1 (regular numbers).

<UL type="square">
<LI>Banana Pudding</LI>
<LI>OWOW</LI>
</UL>

Unordered List

compact - This makes the list as compact as possible.
type - Like the ordered list's format attribute, this tells what the list will display, be it one of the three values: square, circle, and bullet (the default value).

Well, that's enough knowledge for you to take on in one lesson, so here's an activity to test your knowledge of all that crap you learned.

Activity: Make a page with a black background, blue text, and the aLink, vLink, and link color the same, white. Then I want you to make a marquee/blink combo for the title of your page, and put a separator bar below that. Below the separator bar, put in two to three blank lines (<BR>), and make one unordered list and one ordered list.

<-Previous Lesson Next Lesson ->

Binary Central by Anman: "http://www15.brinkster.com/anman/"