|
|
jim's HTML Spoken Here© helps you
Create a Personal Web Page Web Page Style
|
HTML Style Guide
You can use any style that suits you to code HTML pages. The key to writing clean code that's easy to reuse and update is to follow a style guide and keep your code consistent - especially if you're working on a team, where someone else will be editing or adding to your code.
Any web site can benefit from a style guide. You'll save time by establishing consistent presentation and style, as well as anticipating any basic questions about how your code works.
Most importantly, you need to know what you have done in creating your web page. You can learn from the experience of countless others what has proven to be true in most programming efforts and also applies to HTML page creation. Always use a consistent style and comment any special things you do (especially tables).
General Style Guidelines
This section offers some general guidelines for coding web pages:
Set standards for your site
- Establish a style guide for your site and stick to it.
- Do not overlap tag sets:
Wrong: <H1><A HREF="photos.htm">My photo gallery</H1></A>
Right: <H1><A HREF="photos.htm">My photo gallery</A></H1>
- Create a development checklist. Every time you upload a page, run through a basic production pass:
- run the spell checker,
- validate the HTML,
- check your links.
Naturally the more complex the application, the more checking you'll need to do.
- Include a way for users to offer feedback and report broken links or script errors. This can be as simple as a mailto: link.
- Always include descriptive page titles. Remember that text in the <TITLE> tag appears in users' bookmarks or favorites lists when they bookmark your page. It also appears in the list of titles returned by Internet search engines.
Indent your code
- Use white space and indent your code to set off logical code chunks.
This is particularly useful to show the organization of nested tags that contain many attributes or additional tags. This can also help when you're using tables to format your page.
Keep capitalization consistent
In HTML it doesn't matter how you capitalize tags, attributes, and values. But it does help to choose one style and be consistent. It is important to note that all file names are case sensitive. Whether an image or HTML file, make sure that the file names are spelled letter for letter (name AND extension) with the same capitalization used where it is stored (on the server) and in your <A HREF= or <IMG SRC= tags.
- One standard to use is: use uppercase for tag and attribute names, and mixed-case or lowercase for attribute values.
<FONT FACE="Arial Black " SIZE="+2" COLOR="#FFFFFF">My Title</FONT>
- It's a good idea to keep your web applications case-consistent. You may want to run it on another platform later. Use lowercase for file names. Keep in mind that all file names used on servers are case-sensitive.
- Force file names to be lower case for all <A ... > and <IMG ... > tags, like:
<A HREF="directions.htm">How to Find Us</A>
Add comments to your code
Whether it is for your own benefit or for others who are modifying your pages, it is hard to remember exactly why or how you added some construct to your HTML. Comments help by allowing you to embed descriptive statements that are present when you edit your page but are not displayed with the page.
- Add comments to show how your code works or where they need to insert content. Comments also help to remind yourself how/why you did something. This makes updates and working in a team much easier.
- Make sure the comments explain what you are trying to do, rather than stating what the code does.
Don't write:
<!--This is a 600 pixel wide table with a 150 pixel column and a 450 pixel wide column-->
Instead, write:
<!--This table is used to format the page as two columns-->
- Comments can be brief or span many lines.
- Remember to update your comments as you rewrite or add code.
- Use HTML comments (<!-- comment -->) to enclose all comment text.
- Keep in mind that in HTML files, comments are visible to end users who view the source of your documents.
Keep your page up to date
Remember to periodically check your page for mistakes. Sometimes they don't show up right away (it's the "but I know I did it right" syndrome). After a few days or so, go back to your page and read it. Check for spelling errors (words that can be spelled more than one way -- like to and too or numbers, that can't be spell checked) -- are most likely to be overlooked. Also check the links to make sure that some of your favorites haven't disappeared or changed. There are some web services that will check your pages for free. One of these is NetMechanic. It is a relatively new, free service to verify links for your site as well as provide extensive HTML syntax checking.
Use special characters carefully
- Be careful with special characters in web content. The web uses only a portion of available character sets and some special characters might not be available. (Martin Ramsch has a complete iso8859-1 table that has all special characters listed.)
Avoid unexpected substitutions or mistakes by using character entities for special characters. For example, M&M should be written M&M. Otherwise a string of characters beginning with an & could be interpreted by some browsers as something other than what you meant.
Selected Special Character
| Special characters |
HTML character string |
| Greater-than/angle bracket > |
> |
|
Less-than/angle bracket < |
< |
| Ampersand & |
& |
| Quotation mark " |
" |
| Hyphen |
­ |
| Non-breaking space |
|
| Copyright symbol © |
© |
| Trademark symbol ™ |
™ |
| Registration symbol ® |
® |
|
NOTE: If you click one of the "CLICK for" icons in the tutorial, a new browser window will be opened for viewing these pages. To return, you can just select this browser (from the task bar in Windows 95 or click your mouse somewhere on this window). You can also close (or File, Exit) from the new window when done, leaving only this window.
|
