Body Tags And Attributes

This section will give you some of the formatting tags used in the body section of your web page. I will by no means be able to give you every tag and attribute, but I will give you enough to make a decent start on a web page. By all means play with these tags to get a feel of how they work and of how you can use them to change the way your page looks and feels. Go on line to the resources listed on the HTML/JavaScript resource page to find more tags and further your understanding of how they work. Look at web pages using the view source command and see how they use their tags and attributes. Look at these pages that I have done as I hand code all my pages. You will find familiar tags and attributes and be able to see how they effect my text. I don't use fancy style sheets.....yet. This is a basic guide, after all, so look.

Here is the first installment of formatting tags. I will be making the tags in red and the attributes in blue:

Note that all the above tags are in pairs, an opening tag and an ending tag. The ending tag must be used to tell the browser to stop doing what the opening tag has started. You can also combine one or more of these tags in a row to get multiple effects:

At this point I would like to mention that in your tags you can use capital letters if you prefer. Some may find it easier to see the tags that way. Also you may be wondering how I got the "<" and ">" symbols to show up on the page since the browser doesn't show the tags? Well, there are entity names for these special characters as well as character references. I use the entity name on my pages although more of the special characters are covered by character references than by names. Here are three that I use the most:

The above characters and letters in red are the entity name. They are used without any spaces between the letters and characters. I had to use spaces to keep the browser from displaying the character instead of the entity name. The non-breaking space entity name is used to make extra spaces or to indent a line or paragraph. Each time you type the entity name it will add one space. Try typing some words on your practice HTML document and try to put more than one space in between the words. The browser only shows one space no matter how many you put. Do the same thing but this time use your space bar for one space and then the "non-breaking space" entity name to add two or three more. I used the non-breaking space entity name to indent my paragraphs five spaces.

Using Headers To Section Off Your Pages

Headers come in six different sizes. "<h1>" being the largest and "<h6>" being the smallest. What do they look like??

Headers help people browsing your page to locate main sections and sub sections. You may have a section heading that says dogs and is shown in header size "h2". Then you may have several breeds that you may wish to talk about and in that case you may use sub headers in size "h3". To go even farther you may wish to break down each breed into several catagories so you might use header size "h4". You get the picture. Remember that part of your job as webmaster is to organize your site in a logical, easy to follow format. Using different header sizes can help you achieve that goal.

A Few More Tags And Some Attributes

<h4 align=center>Header goes here.</h4>

I used the align=center attribute to place the example in the center of the page. The attribute goes inside the start tags < and > brackets. The ending tag remains the same. This attribute is used quit often and can be used with many different tags. There are many more attributes and we will start to cover them as the need arises.

The horozontal rule is a good way to seperate sections of your page or text. The standard line is kind of plain, thin, and almost appears to be etched into your computer screen. Not very eye catching, but effective. We are here to create, though, and the powers to be decided that they would allow us to be creative with our horizontal line by ading a few attributes to it.

We can also combine more than one attribute into our <hr> tag. Let's try an example. Say we wanted a line that occupied 50% of the screen, was 5 pixels thick, wanted it centered, and in a blue color. We would tag our page as follows:
<hr width=50% size=5 align=center color=#0080ff>

As you can see the <hr> tag draws a plain horizontal line except for the lite sprucing up we can do using the "hr" attributes. Some web pages you visit have really fancy lines on their pages using designs, textures and colors. These lines are actually "images". We will cover images in the near future, but for right now we will stick with the standard horizontal lines.