|
|
Coding Style
- As you begin coding documents for your company or for yourself, it
will benefit you greatly if you define your own standards and style
that you apply without question to every page you build.
- This will help immensely when you 1) rewrite all your pages and can
use a script to replace one set of standard text with another set of
standard text instead of doing all the changes by hand and 2) when
someone else tries to modify or add to your collection of web pages.
- Style is a personal thing, but there are a few standards that have
become...well...standard.
- Use capital letters for tags, arguments and values.
- Use a space before and after equal signs within tags.
- Use quotes around tag attribute values whether or not they include
white space.
- Use embedded spacing in your HTML code so that the code itself
looks similar to how it will be formatted by a browser. In other
words, use indentation and paragraph markings in the code when you
specify paragraphs in the code.
- Keep your line width to 80 characters so that UNIX editors will be
able to read your code. If a tag goes beyond 80 characters, indent
continuing attributes.
- Follow HTML standards even if browsers will let you slide. This
means, use closing tags like </HTML>
- Include no extra spaces in anchors and only anchor meaningful words
Coding Style by Example
- Here is an example of "bad" code.
<HTML ><head><Title>Hello World</TITLE></Head><Body bgcolor=white text=black>
This is a very simple web page. Notice that the browser does not pay attention to spaces that we add to our document unless you specify what type of spacing you want<p>Like when you use a paragraph tag or a <br> break line tag. <A HREF =
"next.html"> click here to go on to the next page </A></BODY>
- Here is an example of good code:
<HTML>
<HEAD>
<TITLE>Hello World</TITLE>
</HEAD>
<BODY BGCOLOR = "FFFFFF" TEXT = "000000"
VLINK = "AAAAAA" ALINK = "564345">
<!-- BEGINNING OF PAGE BODY -->
This is a very simple web page. Notice that the
browser does not pay attention to spaces that we
add to our document unless you specify what
type of spacing you want
<P>
Like when you use a paragraph tag or a
<BR>break line tag.
<P>
Click <A HREF = "next.html">here</A> to go to the next page.
<!-- ENDING OF PAGE BODY -->
</BODY>
</HTML>
- Notice how the example of "good" code is VERY easy to read. Putting
white space above the <P> made the new paragraph look like a new paragraph.
- As your code gets more and more complex, good coding standards will
become more and more important.
- Finally, take some time to get familiar with an
HTML
Validation Program that you can use to check your code against
the various HTML standards.
- Clicking on the black and white WebTechs button at the
bottom of the page will illustrate a validator at work.
Additional Resources:
Basic HTML Body Tags
Introduction to Web Design | Table of Contents
Exercise One
|
|
