CS101 - Winter 2000

The basic unit of coding in HTML is the tag. A tag is a piece of special text enclosed in a < and >. The text that goes inside the <> is the actual syntax of HTML. For example, to make a word appear bold on the page, you put the "bold tag" before it (the bold tag happens to be ). If we think about this example, we find another tag is needed. Say you wanted to say "I really like chocolate" but you wanted the word "really" to be bold. Then, you would write "I really like chocolate". The problem with this is that we don't know when the bolding stops. If you were to load an HTML page with the above codeit would appear like this:
I really like chocolate.
Thus, for the bold tag (and almost all others), we have a corresponding ending tag. It indicates when to stop doing the thing we started. All end tags are also enclosed in <> and are structures with a slash / and the tag code. So, the ending bold tag is . Thus, to get the appearance you want, your code would be "I really like chocolate." It would then appear as we wish: I really like chocolate. The first half of the quarter we will be dedicating our time to learning most of the tags in HTML. We will also mention here that tags are not case sensitive. You can have all caps, all lowercase, or any variant thereof.
The bold tag which we discussed above is pretty plain. It has one function- things get bold and stop being bold. Many tags, in additon to the tag name (such as "b" in the bold tag), have attributes. That allows you to start an appearance with specific trait. For example, there is a font tag which allows you to change the appearance of a font. The tag name is "font" so it begins <font, however, just enclosing a piece of text in: HI wouldn't do very much. You then would suppliment the font tag with an attribute. For example HI would make HI appear in red: HI. Note that when we end the font tag, we don't have any attributes in the . The end tag NEVER has attributes, and you should never put them there. It breaks things. The end tag is always just a slash and the font name.While the font tag must have attributes to do anything, most tags don't need attributes. We will discuss the possible attributes with each tag we learn. An interesting point to mention here is that the O'Reilly HTML book has a very cool tear out list of all the tags and attributes in the back. That will be very useful to you as the quarter wears on.
With that knowledge, we can now start learning the basic tags we need. The very first tags necessary to make an HTML document. The first thing that must appear in any html document is the <HTML> tag. It has no attributes that we will use. The corresponding end tag is </HTML> and should be the very last tag in the document. After the HTML tag, we usually see the <HEAD> tag. Enclosed in the head tags are other tags. The do not affect the appearance of the document but encode information about it. The one we are must used to seeing is the TITLE tag. This indicates what should appear at the top of the browser. To encode the title, you start the title tag, type the title, and end the title tag: <TITLE>This is Jen's Web Page</TITLE>. There are no attributes to the title tag or the head tag. Thus, we can now construct the whole of a document with nothing really appearing:
<HTML> <HEAD> <TITLE>This is Jen's Web Page</TITLE> </HEAD>
To actually have something show up on our page, we need to follow the <HEAD> tag with the <BODY> tag. Any attributes of the body tag specify the general appearance of your document. The body tag can be started with no attributes. By default, yout background will be grey, text black, links blue, and visited links purple.To specify your own appearance, you can set attributes for each thing to a color or image. This is a good point to stop and discuss colors. Generally, colors are specified by a hexadecimal system. It is a 6-digit number which consists of 3 pairs. The first two indicate the level of red, the second pair indicated green, and the third pair indicate blue. If all levels are at 0 (ie 000000) the color is black. The highest level, contrary to what you might think, it not 999999. It is ffffff. The hexadecimal system follow like this: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. All f's indicate white. To indicate pure blue, you would want to set all the red and green levels to 0, and all the blue levels to maximum (FF). Thus, the indication for blue is 0000ff. As you can probably tell, there are many variations of these colors, and you can find a lot of web pages which show you a color and give you a corresponding hex-code for it. To make your life easier, the evil empire (ie Microsoft) came up with real words to indicate some colors. All of the colors you know (red, blue, gree, balck, white, etc) can be used in place of the hex codes. There are a lot more than just basic colors available. If you search the web, you can also find pages that show you a color and give you the word-code for it. Generally, complicated word codes (ie smoke, brickred, etc) are not so reliable. They occasionally show up strangely, but are an easy way to encode basic colors.
With that side note, we get back to the body tag. We can specify background color, text color, link and visited link color, etc. Here is an example.
<BODY bgcolor=white text=black link=red vlink=pink>
There is a full list of background attributes available in the HTML book. The only other one of interest is background. This is not set equal to a color value, but to an image. Recall that only gif's and jpg's can be used on the web. Setting the backround image equal to something repeats the image over and over in the background. The web has a variety of pages available with background images you can download. Also, note that you can have a background color and image. The image will be visible over the color, but the color will appear while the image loads and in case the image is broken.

Document Structure
There are many tags to format your document. Here are some.
To create headers (bold and big text), there is a header tag <H#> where the # is replaces by a number. Replacing it with 1 makes the
biggest header
while 6 makes it
really small
. be sure to use the end tag with the right number.
Standard word processing formatting is also available. the bold tag is . Underline is U, /U and italics is I, /I.
HTML ignores multiple spaces, so to get them, you can use the pre tag.
It allows you to format text by just typing it whereever you want. It uses a m o n o s p a c e d f o n t.
There is a corresponding end tag.
However, there are some special characters you CAN'T type, namely an < or > because they browser will think they are part of a tag. instead, you type < and >. To make what i just typed show up, you use the special character for an &: &&;. I leave it as an exercise to make &&; show up. There is one other interesting special character, the non-breaking space  . This lest you add a plain white space, or it can be used between tags to get more vertical white space.
To change font attributes, you use the tag. There are many attributes. Those of note are color=xxxxxx where you can indicate the font color, size=+x or -x where you can change the size of your font, and face which lets you change the type face. This isn't widely accessible because it relies on fonts on the user's machine. you can specify face="arial" for example, and then your font will show up in that font (if the user has it).