Home      Articles      About Us      Site Map      


 
ClickEasyWebSites.com
 Enjoy the journey. Life gets easier.
 
Make it different, Make it count, Make it yours...

 

Web Wit

Helping non-techies & small business professionals win more sales, more leads & more subscribers on the web. Start using it today to put your site on the winner's list.

:
:
 


 

Additional Resources

Internet HTML Primer

Basic HTML to WOW Your Web Site Visitors!

----HTML Primer----

Basic HTML

Alphabetized Listing: A-B | C-D | E-F | G-H | I-J | K-L | M-N | O-P | Q-S | T-U | V-W | X-Z

WEBWIT: Want up-to-date news, articles, tips, special offers all designed to improve your Site to Success? Send any email to webwit@clickeasywebsites.com to receive our monthly newsletter and special reports. View a current issue here.


TABLE OF CONTENTS

1. Overview
2. Basic Structure Outline
3. Header Section
4. Body Section
5. Section Headlines
6. List Creation Tags
7. Typography and Appearance Tags
8. Hypertext Links
9. Image Tags
10. HTML Tag Glossary

1. OVERVIEW

HTML is Hypertext Markup Language. The language used to create and design Web sites. HTML is a standard text file with specific tags that a browser reads and interprets into a Web page.

There are two elements to an HTML document: the portion seen by the user, known as document content, and the portion used to create the document, comprised of tags. These latter are the codes that define the document, and it is these that this manual will address.

The basic syntax for an HTML tag is as follows:
<Tag Name Properties> Document Content </Tag Name>
Tags are always enclosed in brackets (<>), and most commonly come in pairs: an opening tag that 'turns on' the instruction, and a 'closing tag' that turns it off by means of a forward slash (/) as shown in the above illustration. Curiously enough, such tags are known as two-sided tags, while those requiring only an opening tag are called one-sided tags (go figure).

Tags are not case sensitive, but are conventionally capitalized, and multiple tags must be correctly nested to ensure proper interpretation by the widest possible range of browsers.

e.g. <TAG1><TAG2>Information</TAG2></TAG1>

2. BASIC STRUCTURE OUTLINE

An HTML document at its most basic level uses only four two-sided tags:
<HTML></HTML> <HEAD></HEAD> <TITLE></TITLE> <BODY></BODY>

These tags are explained below, and are followed by a sample page outline.

<HTML></HTML>
While not strictly necessary in most cases, the inclusion of starting and ending HTML tags is considered good form.

<HEAD> <TITLE></TITLE </HEAD>
The Head tags will encompass your document's title as it appears on the browser's title bar as well as the heading you choose to appear at the top of your document.

<BODY></BODY>
Whatever text or message you wish to be included in your document will appear between the Body tags.

So far, our document looks like this:

<HTML>
<HEAD>
<TITLE>Sample Web Document
</TITLE>
A Sample Web Document
</HEAD>
<BODY>
The text of our document will appear here.
</BODY>
</HTML

3. HEADER SECTION

At a minimum the <HEAD> section of your document should
include a document title enclosed in <TITLE></TITLE> tags.
This title is the one that appears at the top of the browser
window to identify your document, and it is also where web
search engines and indexing programs often obtain information
about your document.

You can enhance your <HEAD> section using <META> tags to
provide further information about your document to human
readers of your HTML and to mechanical indexing programs that
may encounter your document on the web. The <META> tag has no
end tag and no content other than attributes. Two typical and
useful attributes are keyword, used to provide a set of terms
describing the content of your document, and author, used to
indicate the name(s) of the author(s) of your document. For
example:

<META NAME="keywords" CONTENT="HTML, homepage, tags, SEL,
library">

<META NAME="author" CONTENT="Earma Brown">

Additonally, if you would rather not have your page
indexed by any web search engine service, place the following
robot exclusion tag in the <HEAD> section of your page:

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

Keep in mind that not all robots are not created equal and may
ignore your instructions, despite including the NOINDEX,
NOFOLLOW metatag.

You can also use the <META> tag to transfer automatically
from one document to another after a specified amount of time
(expressed in seconds). This can be useful if you want to
transfer someone from an outdated page to a new one, or if
you have a visually exciting "splash" page to get someone's
attention before moving on to the first content page. This is
called meta refresh and looks like this:

<META http-equiv="Refresh" CONTENT="15;
URL=http://www.arrowproduction.com/newpage.htm">


4. BODY SECTION

The <BODY> tag serves to indicate where the content of your
document begins. A closing </BODY> tag should immediately
follow the last line of content in your document.

The <BODY> tag can be used "as is" or you may include any of
several attributes which give you some control of the overall
appearance of your document. You may include more than one of
the following attributes in a single <BODY> tag as long as
they do not produce conflicting results in your document.

BGCOLOR=
The BGCOLOR attribute allows you to specify a background
color for your document. You can use most common color names
(e.g. red, blue, white, etc.) or you can express the color as
its hexadecimal code preceded by a # sign. Here is a list of
acceptable color names

(URL = http://www.lib.virginia.edu/science/guides/html/color.htm)
and you can obtain hexadecimal color codes from many sites on
the web. Many of the color names listed at the above site are
Netscape specific and may not be recognized by other web
browsers. Note, too, that older monitors may not be able to
display all colors and may produce undesirable results when
attempting to display a particular shade or variant,
irrespective of how it may appear on your own monitor. With
improvements to monitor technology this is not the issue it
once was. However, if you would like to be sure that the
color(s) you choose are "browser safe" and will appear okay
regardless of the monitor displaying your document, refer to
this browser safe color chart

(URL = http://hotwired.lycos.com/webmonkey/reference/color_codes/).
The downside to browser safe colors is that you are limited
to a maximum of 216 colors, but these are optimized for cross-
platform use. You can also learn more about browser safe
colors at Lynda Weinman's Coloring Web Graphics (URL =
http://www.lynda.com/hex.html) web page.

BACKGROUND=
The BACKGROUND attribute allows you to specify an image file
to use as the background for your document. Typically, this
is used to give a document a textured look or some other
special effect. Generally, a small image is tiled over and
over to produce the background. You must specify the full
pathname, enclosed in quotes, to the location of the image
file you want to use.

LINK=
The LINK attribute allows you to specify a color for the
hypertext links that appear in your document. The same names
or codes used for BGCOLOR are used here.

VLINK=
The VLINK attribute allows to you specify a color for any
hypertext link which has been visited (i.e. used) by someone
reading your document. The same names or codes used for
BGCOLOR are used here.

TEXT=
The TEXT attribute allows you to specify a color for the
text of your document. The same names or codes used for
BGCOLOR are used here.

A number of other <BODY> tag attributes exist, but their use
is outside the scope of this class. When using the various
color attributes of a document, keep in mind that the
background and text should contrast well to insure easy
readability. Also, keep in mind that users of your document
may choose to set their browser's preferences for colors of
their own liking, over-riding your own specified colors. They
may also turn off the loading of image files, thus defeating
your attempt to specify a background image. Here is an
example of a body tag with multiple attributes:

<BODY BGCOLOR=WHITE TEXT=BLACK LINK=RED VLINK=BROWN>

5. SECTION HEADERS

Headlines
Possibly the easiest way to add punch to a document is with headerlines. Headers are bold in appearance, and HTML provides for six different sizes. An H1 Header is the largest, H6 the smallest. Syntax follows the HTML standard for two-sided tags:
<H1>Heading</H1> <H2>Heading</H2> <H3>Heading</H3> <H4>Heading</H4>...etc.
The actual headings appear as follows:
This is an H1 Heading
This is an H2 Heading
This is an H3 Heading
This is an H4 Heading
This is an H5 Heading
This is an H6 Heading

Alignment
Text can be aligned right, left or center with the ALIGN command. (This command also works with graphics, but one step at a time...). Note that the ALIGN tag is one-sided. It must also be defined with another tag such as a HEADER <H#> in order to work. (See example below.
<ALIGN=LEFT/RIGHT/CENTER>
Combine the ALIGN tag with a HEADER tag like this:
<H2 ALIGN=CENTER></H2>
The above command will look like this in your document:
This is a centered H2 Heading

Paragraph & Break Tags
The paragraph <P> and break <BR> tags perform very similar functions in that they both create line breaks, though in slightly different ways.

The following line carries no tags:
I think that I shall never see a poem lovely as a tree.
The same line with the <P> tag inserted after 'see':
I think that I shall never see
a poem lovely as a tree.
The same line with the <BR> tag inserted after 'see':
I think that I shall never see
a poem lovely as a tree.
As you can see, the <P> tag not only broke the line, it added an additional space, and for that reason is more commonly used to define where a paragraph starts and stops. Both of these tags may be used one-sided, though convention dictates closing the <P> with a </P> tag to ensure support by all browsers.

Block Quotes
Block quotes provide a refinement on the paragraph in that they allow you to set off text with margins on both sides. This is an ideal feature for showcasing a special quote, and is easily achieved by inserting the two-sided <BLOCKQUOTE> tag before and after the text you wished indented. Block quote tags may be nested inside each other for two or more indentations, as illustrated below:
On finally having survived the transition from living to undead, the protagonist of Anne Rice's novel The Vampire Lestat observes:

"And there I saw myself as a man might expect, except that my skin was very white, as the old fiend's had been white, and my eyes had been transformed from their usual blue to a mingling of violet and cobalt that was softly iridescent. My hair had a high luminous sheen, and when I ran my fingers back through it I felt a new and strange vitality there."

Here we see the beginning of the sensuality rampant in so many vampire stories, wherein the victim cedes complete control of his/her life to the demon lover. Yadda yadda...
Note that use of the <BLOCKQUOTE> tag not only indents, but also adds a line feed.

Horizontal Rule
To insert horizontal lines all or partway across a page, you use the <HR> tag. Within the <HR> tag, you insert alignment instructions, a thickness designation based on pixels, and a width parameter based on percentage of page width. The <HR>tag is one-sided.

To create a line 6 pixels thick across 25% of the page, aligned with the left margin:

<HR ALIGN=LEFT SIZE=WIDTH=25%>, et voila -

Note that a pixel is 1/72nd of an inch. Twelve of them will make a line 1/6th of an inch thick which is probably as thick as is likely to be needed for any normal formatting application. The lines delineating topics on this page are 3 pixels thick.

Preformatting
The Preformatting tag <PRE> is used when you wish the text on a page to appear exactly as laid out in the HTML file, including extra spaces and blank lines. The downside of this attribute is that text so enclosed will appear in a monospace font like Courier. The upside is that the <PRE> provides a quick and easy way to present table text. Note that the <PRE> tag is two-sided.

<PRE>

Team Wins Losses

Romans 4 6
Barbarians 6 4
Christians 0 10
Lions 10 0
</PRE>

HTML PRIMER CONT.

Want up-to-date news, articles, tips, special offers all designed to improve your
Site to Success? Send any email to webwit@clickeasywebsites.com to receive
our monthly newsletter and special reports. View a current issue here.


Thank you for visiting our site. Please come again. We update often.
 

Additional Resources
  

  Copyright 2007  - ClickEasyWebSites.com  -  All rights reserved. Creating Easy Web Sites