• Changing Font Name
• Changing Font Size
• Changing Font Color
• What are tables?

Before we get too deep into Tables, let's review a couple HTML commands we didn't cover in the first lesson. In addition to all the wonderful commands we learned about in the first lesson, here are a couple more you might find useful.

Changing Fonts

Changing fonts in HTML is luckily a very simple process. As you might imagine there is a command that is dedicated 100% to this task, and not surprisingly it is called the <FONT> tag. You can use the <FONT> to control three primary things: Font Typeface, Size, and Color. Here are some examples to get your started:

• Font Typeface: Arial, Helvetica, Times
• Font Size: 2, 3, 4, 5
• Font Color: Red, Green, Blue

Changing Font Name

Now that you've seen them in action, lets review the HTML commands needed to make it all happen. First lets review font typeface. This is a fancy way of saying font name, but it's important to know what the pros call it just in case someone uses that description in your line of work. Here is an example of the exact HTML used to create the above line:

Font Typeface: <font face="arial">Arial</font>, <font face="helvetica">Helvetica</font>, <font face="times">Times</font>

You'll notice that we've added a parameter "face" to the <FONT> tag to tell the computer which font typeface to use. The trick is you can use any font name you like, but there are two catches; you have to make sure you spell it correctly, and you have to make sure it's a font that EVERYONE else has. This is why almost all webpages only use Arial or Times, because those are the only fonts that webmasters can rely on when building websites.

Changing Font Size

Changing font size on the web is a little strange. For whatever reason the creators of HTML decided to use a numbering system to determine a font's size that doesn't corelate with the normal "font size" that most other applications use. Their reasoning has a little to do with the different computers that will be trying to determine what is a size 12 font? Regardless, we have to deal with what HTML gives us, and that is sizes 1, 2, 3, 4, 5, 6, 7, etc. The default font size is 3. This would be the default font size that you selected in your web browser's preferences. All other sizes have to be controlled by you the HTML coder. Here is the HTML used to create the above example:

Font Size: <font size="2">2</font>, <font size="3">3</font>, <font size="4">4</font>, <font size="5">5</font>

You'll notice that we've added a parameter "size" to the <FONT> command. This is the way we change the font size. Since this doesn't match the way you would normally control the font size in a word processor, you'll need to play with the sizes to know which sizes are best for what you're trying to do. Know that different platforms do different things. Windows platforms typically make fonts larger, and have little support for sizes under 2, while the Macintosh platform usually does a better job displaying fonts of any size and supports sizes from 1 and up while maintaining browser readability.

NOTE: There is another way to specify the size of a font, and that is to add or subtract from the current font size. This can be accomplished by using size notation such as "size="-1"" or "size="+1"" to indicate that you'd like to move down or up one font size from the current size. This will allow you to move HTML text around a document and guarantee yourself that the size differences will be smaller or larger depending on your code.

Changing Font Color

Controlling color is just about as easy as controlling font typefaces and sizes. Lets get right into it. Here is the code that we used to control the colors up above:

Font Color: <font color="red">Red</font>, <font color="green">Green</font>, <font color="blue">Blue</font>

You'll notice the new parameter "color" that we've used with the <FONT> tag. You have two options when controlling color, one easy, one not so easy. Web browsers understand two methods of determining a color, the first method is to simply type in the name of the color. This is tricky, because what would you say to get that "right" shade of peach? For this reason, there is an alternative way of specifying the color, and that is to use the (get ready for this) "hexidecimal" method of choosing a color. This method requires an application that understands HTML coloring techniques. It is too complex to cover in this lesson, so we're going to give you a trick to finding the right color. To get custom colors, take them from web pages that already exist. Simply find a web page that has the coloring that you like, and use the "View source" feature under your View menu in your web browser. Look through the code to find the HTML tag "color" and then capture the value and test it on your local web page. You'll know real quick if it's the color you're looking for. Also know this, the hexidecimal color for white is FFFFFF and the hexidecimal color for black is 000000. It's six digits. No more, no less. Every color rest between those two values. Each digit can be either 0-9, or A-F. We at STIMULUS strongly suggest you use BBEdit on the Macintosh platform as your HTML editor.

Tables. What are Tables?

Now, lets get straight into Tables. Just in case you don't know what a Table is, it looks something like:

As you can see this Table has two columns and two rows. Each column has a header and a row of data. Before you make a Table, you must decide how many Columns you want. Once you've decided this, you can add as many Rows as you like.

The commands to start and end a Table is <TABLE></TABLE>. Inside these tags you add the commands to create your Rows and Columns. Inside those commands you add the header and or data you wish to place inside the Table.

So lets take the above Table as an example. To review, it has two columns, and two rows. The Table looks like this:

This example introduces three new commands. <TR></TR>, <TH></TH>, <TD></TD>. The first command <TR> starts a Table Row. The second command <TH> starts a Table Header. And the third command <TD> starts Table Data. Each command terminates with its "/" counterpart.

Now hopefully the above code makes some structural sense. First we started the Table (<TABLE> adding a BORDER of 2 pixels, and setting the WIDTH to be 50% of the current window). We then started a TABLE ROW (<TR>), started a TABLE HEADER (<TH>), added the text "Header 1," stopped the TABLE HEADER (</TH>), started another TABLE HEADER (<TH>), added the text "Header 2," stopped the TABLE HEADER (</TH>), and the finally the TABLE ROW (</TR>).

Now at this point we could have stopped, but we wanted to add some TABLE DATA before we closed up the Table. So we started another TABLE ROW (<TR>), added a TABLE DATA (<TD>), added the data "Data 1", stopped the TABLE DATA (</TD>), started another TABLE DATA (<TD>), added the text "Data 2", stopped the TABLE DATA (</TD>), and finally stopped the TABLE ROW (</TR>).

At this point we have our Table headers and data completely added. The only remaining step is to stop the Table itself (</TABLE>).

Now notice how the number of TABLE HEADERS matched the number of TABLE DATAS. This keeps the table looking very unified from top to bottom. If at any time you add more columns to a particular Table Row than was previously added to the other columns, you will create a lopsided table like this:

Now its possible that this is something that you would like to do, so feel free if it suits your needs. There are no rules when creating Tables other than you terminate them with a </TABLE> command. Not terminating a Table can cause all kinds of interesting layout errors.

Note about HTML errors: Unlike regular programming languages where errors cause computers to crash or hang indefinitely, HTML errors result in funky layouts. Sometimes information will display in the wrong places, other times it might not display at all. So if something is not looking like you meant it to, check your HTML and make sure you've terminated all commands that need to be (only <BR>, <P>, <HR> can be used without terminators).

Now that you've learned how to layout a Table, I've got some good news to tell you. Remember all the commands we learned in our lesson on Basic HTML? Well you can use all of them inside Tables. That's right. Images, Links to other pages, all kinds of different Styles, Sizes and Colors. The Table object is smart enough to change its size to match your requests. Now I know some of you don't believe me, but here's proof!

Image	Link
	Go to STIMULUS!

See I told you so! So feel free to experiment to your heart's content. Remember to use WIDTH tags inside your TABLE declarations. It allows you to control the width of the Table perfectly. Also use % numbers instead of pixel measurements. This will allow the Table to stretch to the size of your HTML web browser window.

Recommended Books:

 

©Copyright 1996-06, TWIN MONOLITH. All Rights reserved.