The address for this web page is: http://fishcaro.crosswinds.net/day_7_style_tips.htm
On to the next lesson! Back to the COURSE SYLLABUS

7. TIPS ON GOOD HTML STYLE

You'll want to develop good habits in writing your HTML code. This brings us to:

INDEX CARD #7:

"GOOD" HTML CODE (7a)

What is "good" HTML code? "Good" code is: supported by a wide variety of browsers; easily handled by applications expecting correct HTML; and easily extended to emerging technologies built on current HTML specifications.
What are the current HTML specifications? HTML and other web-related standards are developed by the World Wide Web Consortium (W3C). Go to http://www.w3.org/ for loads of current information.
Is there any way to check that my files meet the current HTML specifications? There are HTML validators that check your code for you. In the exercises below, you'll be using the HTML validator located at:

http://validator.w3.org/
What does "debugging" mean? To "debug" a program means to locate and correct mistakes. You can make your HTML files easier to debug by following the tips indicated below.

TIPS ON GOOD HTML STYLE (7b)

By following the conventions listed here, your document will be easier to debug, and easier to read when viewed in a simple text editor.
Capitalize tags and attributes: Tags and their attributes are not case-sensitive. Capitalizing them consistently makes them stand out. (However, XHTML (eXtensible HTML) documents MUST use all lowercase letters for HTML elements and attribute names...)
Use line breaks and tabs for legibility: Since browsers ignore line breaks and tabs, you can use them to improve readability. For example, insert an extra line between the head and the body. Adding extra whitespace will increase the size of your HTML file slightly, so if you're extremely concerned about download times, keep your HTML compact. For small files, the size increase caused by extra whitespace is negligible. The increase in readability caused by the extra whitespace is significant. You decide.
Keep line lengths to under 80 characters: This makes the document easier to view on a wide variety of platforms. You can insert a hard return (press ENTER) when you reach 80 characters. (Again, this increases file size slightly.)
Name your files correctly: Use the suffix ".htm" or ".html" when naming your files. Avoid spaces and special characters in file names; try to use only letters, numbers, hyphens, and underscores (in place of spaces).

Printable version of Index Card 7a

Printable version of Index Card 7b

WORKSHEET #7:
This exercise will: give a brief introduction to tables; illustrate how "sloppy" HTML code is handled differently in different browsers; and expose you to the use of an HTML validator.

(W7.1) Create a file, called test.htm , that creates a small table, as indicated below.
We'll study tables more later on: for now, note that "TR" stands for "Table Row"; "TD" stands for "Table Data"; "cellpadding" puts some extra space (padding) around each element in the table.
Don't worry too much right now about the first "DOCTYPE" (DOCument TYPE) line; just type it exactly as it appears here. It gives information about what version of HTML you're using.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>
<TITLE> Testing an HTML Validator </TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</HEAD>

<BODY>
Type in this sentence before your table.
<TABLE cellpadding=10>
<TR>
<TD> row 1 col 1 </TD>
<TD> row 1 col 2 </TD>
</TR>
<TR>
<TD> row 2 col 1 </TD>
<TD> row 2 col 2 </TD>
</TR>
</TABLE>
Type in this sentence at the end of your table.
</BODY>

</HTML>

(W7.2) View test.htm . Change the "cellpadding=10" to "cellpadding=30" and then "cellpadding=5"; note the results. Remove the cellpadding attribute completely and note the results.
(W7.3) Now remove the </TABLE> instruction. View your file using both Internet Explorer and Netscape Navigator. What happens?
(W7.4) While the </TABLE> tag is still missing, validate your file by going to http://validator.w3.org/ and clicking the "upload files" option to locate your test.htm file. You'll see that there are errors relating to the missing </TABLE> tag.
(W7.5) Put the missing </TABLE> tag back in, and validate the code again. It should now be perfect!

ASSIGNMENT #7:

(A7.1) Make stylistic changes in your homepage file, using the suggestions in index card 7b as a guideline.
(A7.2) Read pages 74–75 (up to "Specifying Color in HTML") in the Weasel book.