You are here --> [Ground Zero - Where Do I Begin?] --> Jump To Article


HTML Made Simple
Author: Mike Ware
Website: [warebiz] :: "The Programmer's Domain" - http://warebiz.tripod.com/
Email: warebiz@yahoo.com
Copyright © 2002 Michael Shawn Ware, All Rights Reserved.



TABLE OF CONTENTS
***************************************************************************************
    --> Getting Started with HTML - First Things First
    --> [Ground Zero - Where Do I Begin?]
    --> HTML Tags - It's All About Tags
    --> Character Formatting - How to Spice Up Text
    --> HTML Lists - Looking Sharp and Organized
    --> Hyperlinks - Getting Out and Around
    --> HTML Tables - Far From Picnic Tables
    --> Displaying Images - Adding Life to Your Pages
    --> HTML Forms - Forming What?
    --> Image Mapping and Editing - Importance of Being Unique
    --> Frames - Structuring Static Document Layout

***************************************************************************************


Ground Zero - Where Do I Begin?

Every HTML document should contain the basic document structure tags, which include <html></html>, <head></head>, and <body></body>. The heading contains the title, which is displayed in the title bar of a browser, and the body contains the elements that are made up of text, images, paragraphs, tables, lists, and any other legal HTML element. Not every browser supports all HTML tags; however, if the tag is not supported, the browser simply ignores it. HTML is also not case sensitive, which means <bODy> is the same as <BODY> or <body>, but it is highly recommended to use a consistent tag writing style. The standard writing convention is for all tags to be written in lowercase. The following depicts the document structure elements that every web document should contain:

<html>
<head><title></title>
</head>
<body>

</body>
</html>

Open a simple text editor program such as Notepad on a windows machine, copy and paste the above code into the editor, save the file with a .html or .htm extension, and open the file using a web browser. Congratulations, you have now created your very first web page.

Upon opening of the above HTML code example in a web browser, a blank white or gray screen should appear in the content area of the browser. Why? Well, no elements have yet been provided in the document other than the basic document structure tags. By default, most web browsers display text in black, hyperlinks in blue, and the background in white or gray with top and bottom margins set at 15 (pixels) and right and left margins set at 10 (pixels). To override these default values, simply alter the values of the corresponding standard tag attributes. The following attributes may be manipulated in the <body> tag of a document.

Standard Attributes
    background="imageURL" --> background image; "tiled" by default
    bgcolor="#hexColor" --> background color
    text="#hexColor" --> text color
    link="#hexColor" --> link color
    vlink="#hexColor" --> visited link color
    alink="#hexColor" --> active link color

Non-Standard Attributes
    bgproperties="fixed" --> non-tiled background image; "static" image
    topmargin="#" --> pixel size of top margin
    bottommargin="#" --> pixel size of bottom margin
    leftmargin="#" --> pixel size of left margin
    rightmargin="#" --> pixel size of right margin

Non-Standard JavaScript Supported Attributes
    onload
    onunload
    onfocus
    onblur
    onerror
    onmove
    onresize
    ondragdrop

Example: For a black background, orange text, white hyperlinks, and all margins set at 0, use the following:

<body bgcolor="#000000" text="#FF2400" link="#FFFFFF" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

Important Note: The six digit number and letter hexColor combinations represent the amount of RGB (red, green, blue) color as hexadecimal values from 00 to FF. 000000 is black, and FFFFFF is white. Finding a specific color using random number and letter combinations can be unintuitive. A free online resource to track the combinations that make specific colors is available at www.cooltext.com. Most high level paint programs such as Paint Shop Pro 5 have the capability of calculating the hexadecimal values of thousands of colors. Not only does a good paint program come in handy when finding hexadecimal values, but it is also a great tool for creating custom images for web pages, as you will learn in later articles.

The following displays some of the more basic colors and their corresponding hexadecimal values:

Examples of Hexadecimal Colors
Black - #000000
Gray - #C0C0C0
Light Gray - #E8E8E8
White - #FFFFFF
Light Blue - #87CEFF
Blue - #0000FF
Dark Blue - #00008B
Light Red - #FF6A6A
Red - #FF0000
Dark Red - #8B0000
Light Green - #90EE90
Green - #00FF00
Dark Green - #008B00
Light Yellow - #FFFFE0
Yellow - #FF0000
Gold - #FFD700
Light Orange - #FFA500
Orange - #FF8C00
Dark Orange - #FF2400
Light Magenta - #EE82EE
Magenta - #FF00FF
Dark Magenta - #8B008B


When manipulating attributes, if an attribute is not specified, the default value for the browser will be used. You can provide a background image that will be displayed in the background of your document instead of a solid color by using the background="imageURL" attribute. "imageURL" is the URL address of the image to be included as the background. For example, if an image named stone.gif is saved on a computer in the same directory as other HTML files or uploaded on a web server, a web developer could use the following code:

<body background="stone.gif">

This will "tile" the image stone.gif across the background of the web page, provided the image is in the current web directory. Since the image is displayed in a "tiled" format, the creation of relatively small-sized background images are commonly used to minimize web page loading and downloading time while creating repetitive designs.

To create a web page document, follow these 6 simple steps:

    1 - Open a text editor such as Notepad on a windows based machine.
    2 - Copy and paste the following code depicting the document structure tags:

        <html>
        <head><title></title>
        </head>
        <body>

        </body>
        </html>

    3 - Alter the attributes to create a custom visual appearance for the web page.
    4 - Add all other necessary HTML elements to provide content. (see later articles)
    5 - Save the text file with a .html or .htm extension in the same directory as all other related web page files.
    6 - Open the HTML file in a web browser.

For a web page example, follow the above steps and insert the following HTML code in place of the document structure tags (Step 2 above). NOTE: See later articles for tags not covered in this article:

        <html>
        <head><title>My First Web Page - HTML is simple!</title>
        </head>
        <body bgcolor="#FFFFFF" text="#FF0000">

        <h2>Hello, world. HTML is easy!</h2>

        </body>
        </html>

By now, you should have already created your first web page document. The next section introduces several "tags" designed to give web pages a professional, clean look. Read on for more about tags...

Move on to next topic: HTML Tags - It's All About Tags

Back to Top