Building Business Websites

Lesson 2: Code, Graphics and Navigation...oh my!

More HTML for Your Consumption - Tables

Now that Silly Soap knows what their basic page layout will look like, we can help them build a sample page so they get an idea of how things will look online. Remember what I said in Lesson 1 about viewing files in your browser? I'll refresh your memory: since you are probably not running a Web server on your home computer, you'll need to open your file via the menu in the browser (File > Open).

Let's open the text editor we used in the last lesson and start there. We started with some basic sentences and those looked good, but now we're trying to place things on the page exactly as we want them. Before we do that, I want to review a few more browser basics.

You've probably noticed that you can change the resolution on your monitor to make viewing easier. For those people with poor vision, they might have set their resolution at 800x600 pixels. This means that the words and images are displayed a bit larger. Other people, like myself, who have lots of software open at one time might keep the resolution at 1024x728 pixels. And some people with laptops keep their resolution at 640x480 pixels.

What this means for people developing Web sites is that we need to plan for the lowest common denominator. In this case, 640x480 is the lowest resolution possible for today's computers. Thus, your Web pages should be no wider than 640 pixels. Yes, this does create a lot of blank space in the browser window of the people with higher resolutions, but we don't want the poor people at 640 to have to scroll horizontally to see our products.

Another interesting browser tidbit has to do with color. Did you know there are 216 "Web safe" colors out there? These are considered "Web safe" because for the most part they will display the same way on every computer, whether old or new. Older computers usually have 8-bit video cards that'll only display 256 colors. Where are the other 40 colors, you ask? Well, those are the 40 that get displayed differently between Macs and PCs, so to be safe we say 216. For newer computers with better video cards, this isn't such a problem. You can certainly pick colors outside this range, but there's no guarantee that everyone will see the color the same way.

For companies trying to maintain their corporate image, or those doing branding, color schemes are very important. If you have a company logo, you want it displayed with the correct color, yes? Sometimes you have to bite the bullet, so to speak, and just pick a color that most closely resembles your palette. To view the 216 safe colors, go here: http://www.lynda.com/hexh.html.

Did you notice that each color has a 6 digit number/letter on the first line? Those are commonly called hex values. If you're using a piece of software to edit your pages, it probably has the Web color palette built in. If not, you can type the hex value into the code of your page, and it will display that color. FYI: the "R, G, B" values shown are the amount of Red, Green, and Blue in each color. We'll stick with hex values only in these lessons.

The first page of your site should always be named either "index.html" or "default.html." That's because the browser automatically knows to go look for either of those 2 files. If there's no default or index file, the browser will most often come back with an error, or even worse your directory structure.

You should already have your previous file open, and just our luck we already named it "index.html"! Delete everything within your body tags, so your code now looks like this:

First thing we want to do is make sure our content gets placed on the page the way we want it. For this exercise, we'll be using the old, but tried and true, HTML table structure. Essentially we're going to create a table with rows and columns, and place our content into the table cells.

Let's create a sample table, and put words in the cells first to make sure we have it set up the way we want.

You start your table with….you guessed it, a table tag. You can also stipulate how wide the table should be, and how big the cell border should be. Right now, we're going to use a 1 pixel border so we can see what the table is actually doing. Here's how you'd set up a table with three rows and three columns.

"tr" indicates a table row, and "td" indicates a table cell. The columns are formed by the number of cells we put in the table. In this case, we put three cells in each of our rows. "Cellspacing" is the amount of extra width you can add to a table line in pixels. "Cellpadding" is the amount of space between the cell content and the edge of the border in pixels. I generally prefer "0" cellspacing because I already have a 1 pixel border, and 4-8 pixels of padding, depending on how I want my content displayed. You'll need to play with this feature to decide how much space you want.

Now, let's stick some words in our cells so we can see where they get placed on the page. Here's the code:

And here's the way the table looks when we open it in a browser:

OK, good start. Now, let's actually put our navigation in the correct place. We can span table cells with our content by putting in a "colspan" (for column span) or "rowspan" (for spanning a row). Take a look at the code below and see how it differs from what we did before.

As you can see, I placed both rowspans and colspans to get the layout just the way I wanted it. I went ahead and created a fake logo for our fake company, but you can insert your logo simply by replacing the file name "logo.gif" with the file name of your logo. If you don't have a logo in a "Web-friendly" format, we'll work on that soon. Our table now looks like this:

Now that you have your basic table set up for your index page, creating the secondary pages is a snap.

Next lesson we'll get into images, colors, links and all kinds of other pretty stuff. This stuff can be confusing the first time through, but gets easier with practice. I'd be happy to give more coding tips for those who want them. You can email me at kim@violetlizard.com.

  1  2  3