|
Resources
|
|
WebDan Online
 |
Resources > Lessons |
 |
Lessons
File Creation Guidelines
One of the first steps, in learning how to create web pages, is to learn some
simple structural guidelines. Following a few simple style and structure guides
makes your site both consistent and legible. There is no single "right" style
or structure to use (as long as you are using the tags correctly of course!).
What is most important isn't that you follow our recommendations -- it is that
you are consistent in your own files, that way:
- When you're building a new page and troubleshooting a problem, a clean
style makes it easy to both see what you've done and make changes.
- When you come in to edit a page three months after you created it, you
can quickly see what you did and how you did it, without having to recreate
your thought pattern or walk through the file character by character.
- If someone else needs to modify it they can understand your code and
make the necessary changes.
Tip #1: To Each Its Own Line
In general, keep each tag on a separate line. This makes it easy to see what
is going on. Codes don't become lost in a morass of type.
The exceptions to this are: in-body tags, such as making a word bold, and
the line break command (<br>). The logical place for both
of these are with the text they define.
Ask yourself: in which of these code examples is it easier to find the
errors (and there are several errors!)?
In this one?
<h3>Getting Your Own</h3><p>Widgets offers <b>many,
many</b>the great things
including:<ul><l>wigglers<li>jumpers<li>creepy-crawlies</ul>.<q>To
place an
order call our 1-800 number.
Or in this one?
<h3>Getting Your Own</h3>
<p>
Widgets offers <b>many, many</b>the great things including:
<ul>
<l>wigglers
<li>jumpers
<li>creepy-crawlies
</ul>
<q>
To place an order call our 1-800 number.
Here are the errors -- did you see them all?
-
The mistyped list tag (<l> instead of <li>)
- The mistyped paragraph tag (<q> instead of <p>)
- There is an extra "the" in the phrase "Widgets offers many, many (the) great things"
Tip #2: Use Comments
You can add comments to your file. The comments will be ignored by HTML but
they can help you add information about your file or what a piece of code is doing.
The code tag looks like this:
<!-- HERE IS THE COMMENT YOU ARE MAKING-->
Everything between the opening <!-- and the closing --> is invisible
to the web browser.
Tip #3: Lists Should Be Legible
Lists, especially nested lists, are hotbeds for accidental
errors. Keeping lists legible makes using them much easier.
- Indent nested lists. Use the tab key to make a quick and easy indent.
Remember, HTML ignores multiple spaces, so indenting in your file won't
affect the way the page displays.
- Keep tags on separate lines.
- Consider adding an extra return to "pull-out" lists visually.
Both of those examples will display exactly the same on
a web browser -- but which do you find
easier to read and
edit?
This one?
<p>Halloween gifts:
<ul>
<li>wigglers
<ul>
<li>corpse white
<li>choked blue
</ul>
<li>jumpers
<li>creepy-crawlies
</ul>
<p>Easter gifts:
<ul>
<li>fuzzies
<ul>
<li>chickie yellow
<li>bunny beige
</ul>
<li>floppies
<li>cottontails
</ul>
Or this one?
<p>
Halloween gifts:
<ul>
<li>wigglers
<ul>
<li>corpse white
<li>choked blue
</ul>
<li>jumpers
<li>creepy-crawlies
</ul>
<p>
Easter gifts:
<ul>
<li>fuzzies
<ul>
<li>chickie yellow
<li>bunny beige
</ul>
<li>floppies
<li>cottontails
</ul>
This section covers:
Introduction
File Creation Guidelines
Directory Structure Guidelines
|
|
