Internet Marketing Tools Part Six HTML Basics
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 "Coffee Cup." This powerful editor is great for newbies and experienced webmasters alike. You can download a fully functional shareware version here: http://www.coffeecup.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> - Bold Text
<B>Example</B>
<I> - Italic
<I>Example</I>
<U> - Underline
<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 - #00C000
Blue - #0000FF
Yellow - #FFFF00
Example:
<font color="#FF0000">Example</FONT>
You can find a 216 safe color chart here:
http://www.web-source.net/216_color_chart.htm
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</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 Coffee Cup 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:
Shelley Lowery is the author of several successful ebooks including Web Design Mastery - An in-depth guide to professional web design. Ebook Starter - A Complete Ebook Design Kit, and eZines: A Complete Guide to Publishing for Profit. Subscribe to Etips and receive a free copy of her highly acclaimed ebook, "Killer Internet Marketing Strategies." http://www.web-source.net
You have permission to publish this article electronically, in print, in your ebook or on your web site, free of charge, as long as the author bylines are included.
Part Five
Part Seven
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
More Website Marketing Articles
More By Developer Shed  developerWorks - FREE Tools!
|
David Barnes, Lead Evangelist for IBM Emerging Internet Technologies will discuss aspects of Web 2.0 that bring value to corporations, academia, and government. He'll also discuss IBM's vision around Web 2.0, including the importance of remixability and consumability. The discussion will culminate with examples of various IBM Software Group solutions you can use to get ahead of the Web 2.0 adoption curve.
FREE! Go There Now!
| | | |
This whitepaper presents the benefits of successfully introducing static analysis into your organization using IBM Rational Software Analyzer. Additionally, it identifies some common pitfalls that can hinder the effective use of static analysis tooling as well as presents 10 simple strategies designed to help you quickly realize the value of static analysis using Rational Software Analyzer.
FREE! Go There Now!
| | | |
Learn how you can extend modern application lifecycle management to IBM System z through the IBM Rational Software Delivery Platform (SDP). The Did you say mainframe? e-kit includes podcasts, webcasts, tutorials, white and red papers, demos, and articles designed to help ease the challenges of modernizing your enterprise. This complimentary kit for mainframe developers is a practical, how-to guide for making the most of an existing development environment, including the skills and infrastructure already in place at an established enterprise.
FREE! Go There Now!
| | | |
Visit IBM developerWorks to download a free trial version of Lotus Quickr 8.0, which enables collaboration by transforming the way everyday business content such as documents, rich media, photos, and video can be shared. Lotus Quickr makes it faster and easier to share content of all types (not just documents) within virtual teams. It is designed to make it easier to collaborate across organizational boundaries, while continuing to work within the context of familiar desktop applications.
FREE! Go There Now!
| | | |
Download a free trial version of IBM DB2 9.5 for Linux, UNIX, and Windows. DB2 9 is the result of a five-year development project that transformed traditional (static) database technology into an interactive data server that merges the high performance and ease of use of DB2 with the self-describing benefits of XML.
FREE! Go There Now!
| | | |
This tutorial shows new users of IBM WebSphere Business Monitor Version 6.0.2 how to perform the "Hello World" equivalent for monitoring business process applications. It is intended to help you get familiar with the capabilities of the product.
FREE! Go There Now!
| | | |
Listen to this webcast to get an overview of Info 2.0 and a technical demo of how to quickly build an enterprise mashup. IBM's Info 2.0 technology leverages emerging Web 2.0 technologies such as mashups, feeds, AJAX, and JSON in order to simplify assembly of information using feeds and services. Come learn about the technical elements of Info 2.0 including the Feed Generation framework, Mashup Engine, and mashup assembly components. Learn how to pull information from databases, departmental information, and the Web to create mashups critical to your company’s success. We will also discuss best practices to help you get started.
FREE! Go There Now!
| | | |
This Fall, IBM Rational talks to you directly through a special teleconference series giving you access to the best minds in IBM Rational - product experts and market thought leaders who will answer your questions during these pre-scheduled telephone conference calls. Register today!
FREE! Go There Now!
| | | |
Discover how Rational tools and best practices for testing can make your job easier. The new Rational Testing eKits provide you with valuable resources – including demos, webcasts, tutorials, and articles – that help you address your specific testing needs across the software lifecycle. Five new eKits are available covering the topics of Requirements and Test Management, Functional Testing, Performance Testing, Code Quality and Embedded Systems, and SOA and Web Services Testing.
FREE! Go There Now!
| | | |
The Eclipse community is constantly working to extend Eclipse's functionality. In this webcast, learn about some of the most important and feature-rich projects under development. From multi-language support to plug-in development, tune in to see what Eclipse is capable of now.
FREE! Go There Now!
| | | |
All FREE IBM® developerWorks Tools!
| |
