Using Tables for Seamless Alignment, Loading Images, and creating the Navigation Bar

HTML Guide - Chapter 18 - Chapter 19 - Chapter 20 - Chapter 21 - Chapter 22 - Chapter 23

Adding the Header Graphic & Aligning Images

We set up the basic framework for our first page in Chapter 18.
Click here if you'd like to see the completed page we're working on in this chapter.

Here's the code so far:

Now that we're ready to start our actual page, I'm going to save a new copy of the file as it is, and call it `index.html`. This name is the name used by most web servers for the main web page.
Now, after saving the page as `index.html`, I'm ready to start adding the contents of the page.
As mentioned before, I'm going to use a header graphic on every page. This graphic is going to be on all the pages we create for this site, and on the sub-pages it is going to need to link back to the main page. The graphic is 700 pixels wide, and 100 pixels high. To get rid of the colored link around the image, I'm going to add `border="0"` to the `<img>` tag. This is a very, very handy trick to remember.
Here's the HTML code for the header graphic and link. It's pretty simple:

Please note that I added an `alt` tag. This is really handy for people who are browsing without loading images.
Now, after the header graphic, my page is going to have a picture of me on the left, and the text "Welcome to the Internet Home of DAVE KRISTULA" on the right, beside the picture. If you've tried having text next to a picture, you know it doesn't always work right. To make it work right every time, you need a two-cell borderless table.
I'm going to want my picture and text in the center of the page, so I'm starting out with another `<div>` tag. I want this table to be a little bit snug, so I'm setting its total width to 75%. This 75% means 75% of the table -around- it, not the page, because we used a layout table of 730 pixels. In other words, it's only 75% of those 730 pixels.
Here's the outline for our table:

So what's `cellpadding` and `cellspacing`? Cellpadding is the buffer space around the contents of a cell. If you have a cellpadding of 0, everything is bumped right against the edge. Example:

cellpadding of 0

cellpadding of 3

Cellspacing, on the other hand, is how far apart each cell is from another cell. Here's two pictures, one with a `cellspacing` of 0, and one with a `cellspacing` of 5.

cellspacing of 0

cellspacing of 5

By now you should be able to recognize me on the street! Just kidding.

Aligning an Image with Text Beside it

Now that you know a bit more about tables, we can construct our own to align our graphic with the text next to it.
We're going to follow this format, inside the `<table>` we created a bit earlier:

We want both the picture and text to be horizontally centered, so we add `align="center"`. We could have used a `<div align="center"></div>` around the picture and around the text, but using `align="center"` inside the `<td>` takes up less code and accomplishes the same thing.
I've filled in the information for the image and text. Here's what our new table looks like:

I put a `<div>` around the entire table because I wanted the entire table to be centered on the page.
Caution: Always remember to set the `width`, `height`, and `alt` properties of an image.
Tip: You may ask why we use the title in text instead of just a graphic. The answer is: plain text is recognized by most search engines, while text -inside- a graphic is not.
Here's what our aligned graphic and text look like:

Welcome to
the Internet Home of

DAVE KRISTULA

You'll notice that there is a lot of space around the text in our headings. If you wish to make the space smaller, you must use CSS style sheets coding.
`<shamelessplug>` I highly recommend learning CSS from CSS: An Interactive Tutorial for Beginners after you finish this course. `</shamelessplug>`
Adding Content Links

Just three parts of our first page are left to create:

Content Links
Bottom Navigation
Contact Information and Copyright (if appropriate).

Before we make our links, we need to decide the names of the files for the rest of our pages. Here's what I picked:

About Me - aboutme.html
My Likes - likes.html
My Passions - passions.html
My Bookmarks - bookmarks.html

Here's the HTML code for the content links:

It's perfectly fine to link to a page before we create it--just remember to create the pages before you upload your site to the Internet--otherwise you'll get a 404 - File not Found error when you click on the link.
Why did I use a heading for the whole list? Without a style sheet (CSS), it's difficult to change font sizes. You -could- use the `<font>` tag, but current web design today recommends that you use CSS instead of a `<font>` tag, if possible.
Adding Bottom Navigation & Contact Information

It's good to have a text navigation at the bottom of the page, especially if your top navigation uses graphics. It's okay to shorten link titles here--just make sure each link topic is easy to understand.
Notice that the text "Home" has no link--that's because it's the page we're working on!
Last but not least--I added contact information. You could use a mailto link here, as covered in Chapter 4, but this increases your chances of getting spam. I chose to use a contemporary styling for the e-mail address. Here's the bottom navigation with the contact information included:

You may also include a copyright notice if appropriate. Please consult a lawyer if you have questions about copyrights.
Rule of thumb: Assume any page, whether or not it has a copyright notice, is copyrighted.
View the completed index.html file.