Internet Marketing Tools -
HTML Basics
Part six of ten
By Shelley Lowery
If you're doing business on the Internet, learning some basic web
design skills is an absolute must. Not only will you have the ability
to create your own web pages, but you'll also save yourself a great
deal of money. Selecting an HTML Editor
Although there are many HTML editors available on the Internet,
the best editor I've found is "1st Page 2000." This powerful
editor is great for newbies and experienced webmasters alike, as
it can be used in four different modes -- Easy, Expert, Hardcore
and Normal. You can select which mode you'd like to use depending
on your level of experience. Best of all, it's completely free.
http://www.evrsoft.com/
Web pages are created with special codes known as HTML (Hypertext
Markup Language). These codes, also referred to as tags, are enclosed
by the lesser than (<) and greater than (>) brackets and may
be written in capital or lower case letters.
The opening bracket is followed by an element, which is a browser
command, and ends with the closing bracket.
Example:
<font>
An element may also be followed by attributes, which are words describing
the properties of the element, and further instruct the browser.
Example:
<font size="2">
Attributes are only contained in the opening tags to the right of
the element and are separated by a space and followed by an equal
(=) sign. The value follows the equal sign and is enclosed in quotes.
Basic Document Structure
Below, is a very basic HTML document structure. It contains the
opening HTML tag, the TITLE tag enclosed between the opening and
closing HEAD tags, the opening and closing BODY tags and the closing
HTML tag. All of your text, graphics and any additional HTML codes
will be placed between the <BODY>
and </BODY> tags.
<HTML>
<HEAD>
<TITLE>Your Web Page Title</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Each HTML tag above contains an opening tag and a closing tag. The
opening tag is written with the command enclosed with brackets.
Example:
<HTML>
The closing tag contains a forward slash followed by the command
enclosed with brackets.
Example:
</HTML>
The opening tag is telling the browser to begin the specified action
and the closing tag is telling the browser to end the action.
The proper way to write HTML is to place your closing tags in sequence
with your opening tags.
Example:
<B><I>Example
of the proper sequence of writing HTML</I></B>
Notice that the closing tags are in sequence with the opening tags.
When you have several opening tags, the closing tags will begin
with the last opening tag and end with the first. Are you totally
confused now? Here's some more examples.
This is an example of a properly written code:
<B><I>Example</I></B>
This is an example of an improperly written code:
<B><I>Example</B></I>
Creating a Basic Document
Begin writing your HTML by creating your document's basic layout
-- beginning with <HTML>
and ending with </HTML>:
<HTML>
<HEAD>
<META NAME="Description" CONTENT="Description
of your web page">
<META NAME="KEYWORDS" CONTENT="Keywords
that best describe your web page separated with a comma.">
<TITLE>Your Page Title</TITLE>
</HEAD>
<BODY>
This area will contain everything that will be visible through a
web browser such as text and graphics.
</BODY>
</HTML>
<HTML> - Begins your HTML
document
<HEAD> - Contains information
about the page such as, the TITLE, META tags for proper Search Engine
indexing, STYLE tags, which determine the page layout and JavaScript
coding for special effects.
<TITLE> - The TITLE of
your page. This will be visible in the title bar of your visitors'
browser.
Note: Make sure you include your most relevant keyword phrase within
your "title" for Search Engine indexing. A keyword phrase
is two or more words that best describe your website. For example,
if your website focuses on "grooming dogs" then your best
keyword phrase will be "dog grooming."
</TITLE> -
Closes the <TITLE> tag.
</HEAD> - Closes the <HEAD>
tag.
<BODY> - This is where you will
begin writing your document.
</BODY> - Closes the <BODY>
tag.
</HTML> - Closes the <HTML>
tag.
Basic Text Elements
<B> tags create Bold Text
<B>Example</B>
<I> tags create Italic
text
<I>Example</I>
<U> tags create Underlined
text
<U>Example</U>
Color Codes
If you would like to specify a certain text or background color,
you can do so by using color codes.
RGB
color codes are represented as hexadecimal values. The RGB color
codes contain three sets of numbers representing the amount of Red,
Green and Blue
contained in a color. These codes must be used within your HTML
to specify your selected colors.
Now, to put the above statement in English...if you'd like to display
your text in a certain color, you must include the hexadecimal color
code within your font tag. Each color has its own color code.
Here are a few of the basic color codes:
| Black |
#000000 |
| White |
#FFFFFF |
| Red |
#FF0000 |
| Green |
#00CC00 |
| Blue |
#0000FF |
| Yellow |
#FFFF00 |
Example:
<font color="#FF0000">Example</FONT>
<font color="#00CC00">Example</FONT>
<font color="#0000FF">Example</FONT>
You can find a magical 216 safe color chart here (click on link
below):
WebSite101 Color Chooser
Creating Links
In order to navigate a web page, you must create links. Links
are created with an anchor, an href attribute and a URL (Uniform
Resource Locator). URL's provide the browser with the location
of the link, the name of the file and the method in which to access
the file.
Example:
<A HREF="http://www.domain.com/">Link
Text </A>
When you begin writing your HTML code, all of your codes
will be placed between your <BODY>
and </BODY> tags, as
this is the only part of your web page that will be viewed
through a web browser.
You can find an HTML code chart here:
http://www.web-source.net/html_codes_chart.htm
This chart will provide you with all of the basic HTML
codes, descriptions and examples to assist you in creating
your web page.
Although this article provides you with a very basic
overview of HTML, with the help of 1st Page 2000 and
the HTML code chart mentioned above, you can easily begin
learning how to create your own web pages.
Copyright © Shelley Lowery 2002.
About the Author:
This article was adapted from the highly acclaimed ebook series,
Web Design Mastery. Web Design expert and author Shelley Lowery's
latest ebook is an in-depth guide to professional web design that
is rapidly becoming known as the "Bible" for professional
web design. http://www.webdesignmastery.com
If HTML is Too Much for you - Consider Cheap Web Templates!
Return to Beginning HTML Tutorial Index
|
WEBSITE101 TUTORIALS
HTML Tutorial
| CGI
tutorial | Email
Tutorial | Spam
Tutorial | Cookies
Tutorial | Privacy
Tutorial | Windows
Tutorial | DreamWeaver
Tutorial | Domain
Name Tutorial | Business
Plan Tutorial | Search
Position Tutorial | Online
Advertising Tutorial | Ecommerce
Essentials Tutorial
|
