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 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)
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 "
Printable version of Index Card 7a
Printable version of Index Card 7b
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.
test.htm, that creates a small table, as indicated below.
<!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>
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.
</TABLE>instruction. View your file using both Internet Explorer and Netscape Navigator. What happens?
</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.htmfile. You'll see that there are errors relating to the missing
</TABLE>tag back in, and validate the code again. It should now be perfect!