Commands & Attributes

So now we know some more facts about web pages:

  • You can add new HTML code and check it easily by using two windows: Notepad and a Browser ("Save-Reload-Check")
  • You can add attributes to HTML commands for more interesting changes

Now you are ready to add a lot more interesting commands to make your web page look better!

For each of these commands and attributes, please try adding them to your test web page, then doing a Save-Reload-Check.

Global vs. Local

The two words, Global and Local, describe whether a thing applies to a whole system, or just a specific part. For example, the United Nations is global, but your local city hall is local.

In HTML, "global" refers to any attribute in the BODY command, because it will affect the entire web page. In comparison, attributes for other commands (such as FONT or TABLE) will only affect the specific parts of the web page in which they are placed.

This can be important because you might set the global text color in the BODY command, or the local text color in the FONT command; each uses a different attribute. Also, you might have a background color (BGCOLOR) that affects the whole page in the BODY command, or you might have a background color just for a table or one cell in a table.

Color Attributes

As I noted above, different commands may have different attributes for global or local settings. For example, to set the global text color in the BODY command, you must use the TEXT="xxxx" attribute; however, in the FONT command, you would use the COLOR="xxxx" attribute to make specific text into a certain color.

Browsers know a lot of colors by using their English names. Here is a list of those colors.

Note that all the color names must be one word, no spaces--so "dark blue" must be spelled "darkblue". Don't mind the number codes below the names; they are for advanced users.

Also, please read the Extra Lesson on "Colors" in order to see a more specific (but complex) way of assigning colors to attributes.

ATTRIBUTES

The BODY Command

The BODY command has many useful attributes:

BGCOLOR="colorname"

This will change the background color of the web page to whatever color you like. Go ahead, try a lot of different colors for your background!

BACKGROUND="image.jpg"

This will put an image as the background for the page. The image will be "tiled," which means that it will repeat until it fills up the window.

Be careful choosing a background image; it should be light enough and clear enough so people can read the words on the web page easily.

More information about images is on the next page.

TEXT="colorname"

This will change the default color of the text on the web page. Usually text is black. The FONT-COLOR command will still allow you to change specific text to other colors.

LINK="colorname"

This will change the color of links on your web page. Usually links are blue. We will learn about links below.

VLINK="colorname"

This will change the color of links a person has already visited. The color of visited links is usually purple.

Here is a sample of a BODY command which uses most of the above attributes:

<body bgcolor="papayawhip" text="navy" link="darkred" vlink="orangered">

To see what that looks like, click this link.

You cannot use both BGCOLOR and BACKGROUND together and see both.

The FONT Command

We have already used the FONT command, but here is a bit more information:

COLOR="colorname"

This will change the color of the specific text you choose.

SIZE="+1"

This will change the size of the text. You can use from +1 to +7, or -1 to -7 to change the font size.

Note that the size change is relative to the text size for any one person's browser. Each browser may have a different "normal" size. Some people set the text size on their browser to be bigger or smaller than normal. The FONT-SIZE change will start at that size and make it bigger or smaller. Remember, not everyone will see your page the same way!

FACE="fontname"

Usually, browsers use Times New Roman or other normal fonts. This attribute will choose a different font. HOWEVER, be careful: the font must be on everyone's computer! If you choose a strange font that most people don't have, then they will not see it! So you should stay with fonts that most people have, which include Garamond, Arial, Verdana, Impact, and a few others.. BUT it is probably best not to change the Font Face at all, just to be safe.

So here is an example of a FONT command with all the attributes:

<font size="+3" color="green" face="Impact">Here is some text.</font>

And it Should look like this:

Here is some text.

The MARQUEE Command

Here's a fun command a lot of people like to use:

<marquee>This text will run across the page!!!</marquee>

On a web page, it looks like this:

This text will run across the page!!!

To add more features, use these attributes:

BEHAVIOR="scroll"
BEHAVIOR="slide"
BEHAVIOR="alternate"

The usual behavior is for the text to "scroll" from one side to the other and repeat; that uses the BEHAVIOR="scroll" attribute. But you can also set the bahavior to "slide" (the words will roll in but then stop at the end) or "alternate" (the words will roll from one side to the other, then reverse and go back).

DIRECTION="right"

Usually the text will scroll to the left, from the right side of the screen. If you set the direction to "right", then the text will start at the left and move toward the right.

SCROLLDELAY="1000"

This will set the speed that the text moves, in milliseconds. If you set it to 1000, then the text will move one pixel every 1 second, and will take a LONG time to get across the screen! If you set the Scroll Delay to "1" then the text will move very quickly.

SCROLLAMOUNT="10"

This will set the amount (in pixels) that the text moves every time it moves. Usually it moves just one pixel at a time. The higher this number is, the faster the text will seem to move!

Note: You can change the MARQUEE text with the FONT command to make it different colors and sizes. You can also add a link if you like, but it will be hard for people to click the link if the text is moving too fast!!! Also, you can put the MARQUEE command inside a TABLE (we'll learn about that later).

There are more attributes for this command, but for right now, this is more than enough for you to know.

Now You Know

Now you know some more commands, to help make your page look better. But you should of course know about images, adding pictures and links to your web page! Adding pictures is a bit more difficult, so we'll look at that on the next page.