Building Web Sites All-in-One For Dummies® (27 page)

•
Pages are difficult to reuse when it's time to redesign.
With rigid table structures in place, it becomes impossible to implement new layouts. Your “new” design will amount to just changing out a few graphics — as long as the new graphics are the same size and shape as the originals.

When you're creating HTML documents, think about how the structure of the code will affect the site's visitors and maintenance of the site. Spending a little time considering the code saves a lot of time when you or your team needs to update or add to your site. Figure 2-4 shows an example of code that has been built with nested tables. Note how the sea of

and

tags (table rows and table data) makes the code difficult to decipher.

Figure 2-5 shows the same information but built with CSS. Using CSS allows a designer to create the layout with much less code. The content of the page is easier to identify, and edits are easier because you need to apply only a few HTML tags as opposed to trying to figure out a complex table and inserting or deleting content from it.

Tables can also be difficult for smaller devices to handle. They don't have as much screen space, so it can be difficult to display content that is in nested tables — especially those that have specific widths included in the code. Try to picture an 800–pixel-wide table trying to be displayed on a handheld device. When you examine the code, it becomes easy to see which page would be easier to maintain or expand.

A table (properly coded, of course) is sometimes appropriate and necessary. Make sure you keep your table structure as simple as possible. Don't put tables inside the cells of another table unless you must.

The code to create a basic table with three rows and two columns is

The first row of cells has a

tag. This represents
table heading.
The other tags in this table are

for
table row
and

for
table data.
You might also notice that the

row has
colspan
and
scope
attributes. Those two pieces of information, respectively, tell the browser that the first row is two columns wide (as in “column span”) and that the table heading is for the columns instead of the rows. If the headings were in the first column, the
scope
attribute would be
“row”
.

Coding a whole Web page

The following block of code (Listing 2-1) is the code for a whole HTML document that is ready to work with the CSS document in Book III, Chapter 3. This listing shows just the basic structure of an HTML document. The content has been minimized to make it easier to see the code we want to focus on. If you type this code directly into your HTML editor, you will see a very plain document. By adding CSS, the page will become a well-designed and well-coded page. Add this code to the code in the “The head tag and what goes in it” section for the head elements, and you have a whole page.

Note:
The
begin header area
in this code (in the second line) refers to the top/banner portion of the visible page — not the head information discussed earlier in this chapter.

Listing 2-1: Basic Structure of an HTML Document

The page that is generated by the preceding code is not very pretty to look at. (See Figure 2-6.) Still, it's all ready to work with a CSS file to be a well-designed Web page. Note the line of code in the head tag portion that links this HTML document to the CSS file:

Controlling layouts with CSS

The old style of building Web sites used a series of tables and nested tables to create rigid grids that held all the pieces of a page together. Remember that the original purpose of the Web wasn't to support great design but rather to convey information quickly.

The method of using tables to control layout was a misuse of the code to produce a visual effect. It used to be the best solution, but that was before CSS was developed. Another issue that slowed progress in the implementation of better techniques was browser support. In the early days of CSS-driven designs, the browsers didn't support them properly. Pages would sometimes have serious issues. Those times are gone now. CSS has been developed beyond a few font-formatting tricks, and the major browsers now have good support for CSS 1, CSS 2, and even CSS 3. When using more recent versions of CSS, be diligent about checking the site in many browsers and even on multiple devices.

The W3C Web site (
www.w3.org
) is a good place to go for information about CSS. CSS guru, Eric Meyer, has a Web site (
http://meyerweb.com/eric/css
/) that's also a good reference. If you're curious to see what others are doing with CSS, check out the CSS Zen Garden at
www.csszengarden.com
. All the designs are created using identical HTML with only the CSS and graphics files changing. The variety of layouts and design possibilities are amazing.

Book III, Chapter 3 shows you how to create a CSS document and make it work with your HTML document.

Helpful Development Practices

Here are some techniques that can help you while you work on your Web site projects:

•
Use comments in your code.
Comments
are notes to yourself and other people who might have to work with your files. Whether you're working alone or in a group, commenting your code is an important habit to develop. Common things to include in comments are when the code was added to the document, what the piece of code does, who added it, and so on. Make sure your comments are clear and concise to avoid confusion and frustration. Remember, though, that some comments will be visible via View Source, so don't type things you don't want the general public to read.