Day Three - Text and a Brief (But Thorough!) Overview of Color

      Today: Two HTML tags for breaking up text, and an attribute for the <body> tag.

      Open up index.html in Notepad. Place your cursor right between the <body> tag and the end carrot. Place a space, and then type text="#000000".

      This attribute tells the browser that you are specifying a color for the text. All text (unless otherwise specified, but we’ll get to this much later) will be colored black. How on earth, you ask, do numbers spell out ‘black’? Enter the hexidecimal number system.

      If you wish to skip the explaination of hex code, just skip this box...

      Hexidecimal, or hex for short, is a way of counting, just the same as the decimal system, which is much more familiar to us. We use 10 integers, 0-9, to count. Hexidecimal uses 16: 0-9, then a, b, c, d, e, f. At this point, they start doubling up, the same way we place '1' in front of '0' for '10', then '1' in front of '1' for '11', etc. Hex goes 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f, 10, 11... 19, 1a, 1b, 1c, 1d, 1e, 1f, 20.... 29, 2a, 2b, etc. In this way, hex can count up to our 255 before requiring a third place value. Which is convenient, because binary, the counting system computers think in, goes to 256. When you add in the 0 value in hex, there are 256 two-digit values between 0 and 255.

      Now why is ^that^ important? Color values. All computers capable of color display this color in combinations of red, green, and blue. (This is similar to the conventional red, yellow, and blue color wheels we are all taught in seventh grade, but slightly different. For more information, research ‘Additive versus Subtractive Color Properties’.) The color yellow is actually a combination of red and green. Purple is red plus blue. Internet browsers are taught to take all of the red, green, and blue into account when creating a color. This is called ‘RGB’.

      Now, each R value can range from 0 to 255; same for each G and B value. But each of these decimal values has an equvalent in hex. Let’s take a bright red, the brightest the computer screen will produce. The R value is 255, G is 0, and B is 0. In RGB terms, this is 255-0-0. In hex terms, this is FF-00-00. Browsers, however, can read this without the dashes in: FF0000. So, the color red is understood by browsers to be FF0000.

      Four paragraphs up, I said to place the ‘text="#000000"’ in the body tag. All those zeros in the argument mean that there is no red, no green, and no blue value for the text -- in otherwords, black. Conversely, ‘ffffff’ means 255-255-255, or, white. The # sign just means to the browser, ‘I’m about to read a hex color code.’

      FAQ: ‘You wrote the code for white once in all caps, and once in all lowercase. Does it matter?’
      Answer: No. Hex code is case-insensitive. Some people like it large, some people like it small. Some people like it nine days old. (Okay, bad joke.) It’s up to you.
      Side note: While much of HTML is case-insensitive, many other programming languages, such as Perl, are not. Don’t get too used to seeing things one way or another. On the other hand, unless you are (or will become) a hard-core programmer who demands to handle every piece of code yourself, it’s unlikely you’ll deal with Perl or most any other such language anytime in the next five or eight years.

      Now that I’ve spieled all this off about hex, store it aside in your brain; we’ll come back to it later. If most of it went over your head, that’s okay, too. You’ll have plenty of chances to pick it up again later. Just believe me when I say that '000000' is black and 'ffffff' is white.

      Concerning the <P> and <br> tags:
Look at all of this that I have written. It’s broken up into paragraphs. HTML, as a ‘markup language’, means that any white space in your source file is generally ignored. The browser relies on the tags to tell it what to do with the text. If I had a paragraph of text excerpted from, say, the Odessey, and I just plunked it down on the page between the <body> and the </body>, the browser would display all of the text. But if I started trying to break it up in my Notepad into paragraphs using only my enter key, the browser would ignore the carriage returns, and run it all together.

      To denote a paragraph, enclose the text you want in a single paragraph between the <p> and </p> tag. For the next paragraph, simply repeat. Seeing a pattern? (For ease in reading their code, code writers often break up different paragraphs with white space.) For practice, type anything you want right now. Open with a <p> tag, type a few sentences, and then end with a </p>. Hit enter a couple of times, type another <p>, another few sentences, and then a </p>. Save your Notepad file, and then open 'index.html' in your favorite browser. You should see your two paragraphs (or more, if you wrote more) on the page in black text. Congrats!!

      But what if you just want a single carriage return, not two of them? Here comes the <br> tag, simply standing for break. This is a one time use tag, needing no </br>, but with the upcoming advent of XML (Extendible Markup Language), this may change in the near or not-so-near future. For now, browsers will recognize a simple <br>.

      (Also, if you want white space on your page, don’t use multiple <p> tags; rather, use <br> tags. Browsers will often not correctly display multiple blank <p> tags, but multiple <br> tags will be correctly interpretated.)

      So, today we have covered a body attribute of black text, and the <p> and <br> tags.
Day Four: Links, images, and Linking Images.

This HTML Tutorial was created by Sanna for the edification of new HTML programmers. Please do not steal the text from this page and call it yours. Reproduction rights granted for educational purposes only! Be nice, y'all; you know right from wrong. August 10, 2002.
HTML 3-A-Day
Main Index
Hosted by