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