The Fun Stuff: Colors, Pictures, Etc.


Ooooh, pretty colors!


So you can put some text on a screen, change the font size of paragraphs, even add a few links. Now we get to play with background colors and font styles and add pictures and see about doing some crazy things that can look either really neat or really tacky.

Look at the source code for this page. See how the <BODY> tag is no longer just a <BODY> tag? The extra stuff in there are attributes--in this case specifying the colors of the background (BGCOLOR), text (TEXT), etc. So now what are we looking at? The pound symbol and then letters and numbers, all in double quotes. Hmm. In HTML, colors are done in RGB-hex style. That is, Red, Green, and Blue each get two hex digits, ranging from 0-f. In hex (which is short for hexidecimal, which means 16), the numbers are:

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
  1. Play around with the BGCOLOR attribute. Make the background pure red.
  2. Now make TEXT white.
  3. How would you make it black?

So the number [DEC]12 is [HEX]0c and [DEC]52 is [HEX]34. (The "sixteens-digit" is how many 16's are in the number in [DEC] and the "ones-digit" is what is left over. For example, [DEC]52 = 3(16) + 4, or [HEX]34.)

   4.  What is [DEC]33 in hexidecimal?

If each color has two digits, that means they can range from 0 to 16 x 16 - 1 = 255 (or 00 to ff) in value, 00 being empty. So 00 for each of red, green, and blue gives the color number of #000000 or black. If all three are full of color, you have #ffffff or white. To get pure red, use ##ff0000, pure green #00ff00, and so forth. You can, as I have, use any of the 16 characters in your number and come up with some pretty distrubing, 1970s style color schemes. Here is a pretty color chart that shows some basic combinations.

You'll see on the chart, and on most other charts online, only these colors and not the ones in between. The colors shown are those where the numbers are multibles of 33 (that is, 00, 33, 66, 99, cc, and ff). This is because, before the Millons of Colors Era in which we now so happily live, the display of other colors would vary greatly from terminal to terminal.

Now what about all the attributes found in that complicated <BODY> tag? BGCOLOR refers to the background. TEXT is, of course, the text, LINK is the unvisited links, VLINK is the visited links, and ALINK is for "activated links". That is, when you click on the links found on this page, they should temporarily turn #ff0000: red. Granted, many many web programmers don't care what color their links are, and stuff like the ALINK is just fun.

  1. Change all five of the color attributes on this page. See how ugly you can make it with everything still legible.
  2. Try some colors that are not multiples of 33 and see if they appear as they logically should with the browser you're using. Which ones came out differently from the "multiples-of-33" colors? Please mention the name and version number of the browser you are using (ask for help if you can't find the version number).

Fun Formatting

Suppose you don't want everything to just start meekly at the left edge of the screen.
You can very easily change the alignment of things. Place the ALIGN attribute in things such as a paragraph <P> tag, or set the whole page by placing it in the <BODY> tag. Just remember that if you opened it with a <P> tag, for instance, when you close said paragraph, the alignment will return to what it was. This is when the ALIGN attribute is said to lose scope. The default is ALIGN=LEFT.

  1. Change some alignments on the page. Make the paragraph directly above this LEFT.
  2. Make the first one on this page RIGHT,
  3. ...and make the "It's confusing at first" one CENTER.

But what about all the fun fonts? This paragraph has a few examples. You can use the font tag to change the color and the size. In the code, check out how if you want to add an additional fomatting attribute, you have to close the original <FONT> tag, reopen it with the original stuff, and then add the extra ones. Fortunately, it doesn't show up at all to the user. The attribute changes from TEXT in the <BODY> tag to COLOR in the <FONT>tag. And if you are viewing this in Mozilla (some tags only work with IE, some only with Netscape, some only with Mozilla) NEVER use the evil <BLINK> tag!

Here are a things to keep in mind in regards to the <FONT> tag.:

  1. First, some people are trying to deprecate it, meaning make it not work anymore. They would replace it with "cascading style sheets" and the <STYLE> tag, which few people currently know how to use. Most people just stick with <FONT>.
  2. The SIZE attribute goes from -7 can you read this? to 7. WOO big!
  3. There is another attribute, FACE which gives different fonts. This is a quick guide to the most common ones. If they don't show up properly, your browser doesn't support them. In the Unix labs, using Netscape 4.72, for example, none of them show up.
  4. There are many, many fun things you can do with fonts if you look around online for HTML font goodies. Have fun!

Try changing the following things with this page:

  1. The font size was set at the beginning of the page. Make it huge.
  2. Make something subscripted and something superscripted. Try correctly formatting "the quantity of log(base2) of 5 all to the third power"
  3. Change the font color within a paragraph twice, only returning to the original color for the last word.
  4. Use a different font (using FACE) for each of three paragraphs.
  5. Write a sentence about your favorite animal. Make some words a different color, and some words a different style, but make it overlap, like this:

    My [red, plain -->]favorite [red, bold -->]animal is [plain, bold -->]the racc[plain, plain -->]oon.

  6. Use the SIZE attribute to make your name very big at the top of your page.

G O O D W O R K !

Previous lab <----:----> Next lab
Page by Michelle Phillips and Jeff Ondich