Hot Tips Logo

Basic HTML Rules

Before you begin building your page, you'll need to decide on a basic page layout. To do this, just sit down with some old-fashioned paper and a pencil and start sketching, blocking out the page's elements. You need to create a basic storyboard, and/or a flow chart. You may be itching to get coding, but by drawing your site out first you can rearrange designs to your heart's content without having to code and recode. To learn more about planning your site, click here.

Once you've settled on the organization of your site, it's time to begin creating your pages with HTML tags — the instructions that surround material such as text, images, and links to other pages and tell the viewer's Web browser how to display them. If you want an image to show up on the left side of the page, a certain word to appear bold, or another word to link to an outside resource, you'll use HTML tags to do it.

There are five important rules for coding with HTML tags.

  1. Tags are always surrounded by angle brackets (less-than/greater-than characters), as in <HEAD>.

  2. Most tags come in pairs and surround the material they affect. They work like a light switch: the first tag turns the action on, and the second turns it off. (There are some exceptions. For instance, the <BR> tag creates a blank line and doesn't have an "off switch."

  3. The second tag--the "off switch"--always starts with a forward slash. For example, you turn on bold with <B>, shout your piece, and then go back to regular text with </B>.

  4. First tag on, last tag off. Tags are embedded, so when you start a tag within another tag, you have to close that inner tag before closing the outer tag. For instance, the page will not display properly with the tags in this order:

    <HEAD><TITLE>Your text</HEAD></TITLE>.

    The correct order is:

    <HEAD><TITLE>Your text</TITLE></HEAD>.

  5. Many tags have optional attributes that use values to modify the tag's behavior. The <P> (paragraph) tag's ALIGN attribute, for instance, lets you change the default (left) paragraph alignment. For example, <P ALIGN=CENTER> centers the next paragraph on the page.

Remember, too, that HTML is always evolving, and older browsers often don't support the newest tags. When a browser encounters an HTML tag it doesn't understand, it will usually ignore both the tag and the material the tag affects. This way, the newest elements will appear to viewers with newer browsers without causing problems for viewers using older browsers, who will only see material their browsers recognize. On the downside, browsers treat coding errors like unfamiliar code. If you've made a mistake while building your page, you won't necessarily see an error message; you might just see nothing at all. You should always closely check all of your pages in a browser to make sure that everything that's supposed to be there appears properly. It's always highly recommended looking at your pages in more than one version of Navigator and Internet Explorer (on both PC and Mac platforms, if possible) to make sure everything looks the way you intended, because not every browser type or version behaves the same way. If you don't personally have access to all the browsers and platforms ask a friend to check it in their browser. When requesting help this way also ask the browser they are using and their version.

If it's all starting to sound complicated, relax. We've kept this article simple so you can get your feet wet without being overwhelmed. A great way to learn about more complicated HTML is to look over the shoulders of other Web page creators. If you see a Web site you like, just view the page's source to see how it was done. You should never just copy another builder's design, but most developers do borrow inspiration from other sites. Methods for viewing source vary by browser, but it's usually as simple as selecting Page Source or Source from the View menu. Stick with viewing source code on fairly simple sites until you're more familiar with Web building. When viewing source code, you'll sometimes see organizational comments from the page's author near the top of (or scattered throughout) the file. These comments are inserted with the <COMMENT> or <!--> tag and often contain useful information for those who view them. For a simple exercise in reading source code, try printing a well-commented Web page from your browser and then printing the source code of that page. Compare the two documents side by side, using the author's comments to match sections of code with the visual elements they represent. You'll soon be able to zero in on specific lines of code to understand how to achieve individual effects. For those familiar with DOS coding the comment tag is much like the REM tag in DOS.

Establish Your Mission
—Why are you here?
—What do you want to accomplish with this site?
—What do you want your users to accomplish with this site?
—What will keep a user on your site?
—What will encourage a user to return?
Each question should spark a dozen more specific inquiries. Write all of the questions and answers on a white board in your workspace.

—Identify Your User (aka Who is your Targeted Audience?)
You want a big site with a broad audience, right? Not necessarily. A too-general focus can alienate rather than attract users. Narrowing your target audience creates a sense of confidence and trust with users, improving their overall experience. Example, if you are creating a web site cops, you know they are typically good-old-boy mentality, manly (male or female), outwardly conservative, etc. Your site needs to reflect this... even if it seems boring to you this is your target audience!

To reiterate

Establish Your Mission
—Brainstorm a mission statement to drive your team and focus your site.
—Identify Your User Find out how to determine your target audience and use personas to plan for the best usability. —Create Mock-ups Bring your ideas together to plan a hierarchy, layout, and HTML mock-up.
—Respond to Feedback Learn how to respond to focus group feedback and revise your mock-ups.

If you have more specific questions send me an email

Back to Index
Source Code and images proprietary©1999-2009 Bobbye, All Rights Reserved.
For questions or further information, contact
This site is optimized in 800 x 600 resolution