Basic HTML to WOW Your Website

----HTML PRIMER----

Basic HTML and Glossary

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

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

6. LIST CREATION TAGS

While HTML offers a variety of list capabilities, the three most commonly used are:
1. Ordered Lists (<OL>) where list items are numbered or lettered
2. Unordered Lists (<UL>)where list items are bulleted, and
3. Definition Lists (<DL>)which provide an indentation for definition or elaboration of the list subject.
Note that all three list tags (<OL>, <UL>, & <DL>) are two-sided, and while most browsers accept single-sided item tags, Netscape Navigator 4.5 apparently insists these also be two-sided. I have, therefore, included two-sided tags in all syntax in keeping with the lowest common denominator dictum.

Ordered Lists
An Ordered List is produced using the <OL> tag, with listed items defined by the <LI> tag. The numbers 1, 2, 3, etc. are the default for ordered lists, but numbering can be changed to letters or roman numerals by inserting Type=a, Type=A, or Type=i inside the <OL> tag.

<OL>
<LI>Red </LI>
<LI>Yellow </LI>
<LI>Blue </LI>
<LI>Green </LI>
</OL>

Browser output for the above coding will then be:
1. Red
2. Yellow
3. Blue
4. Green

Unordered Lists
Substitute <UL> for <OL> in the above syntax, and you will produce an Unordered List. Default bulleting is disk, but bulleting can be changed to a square or circle by inserting Type=square or Type=circle inside the <OL> tag.

<UL>
<LI>Red </LI>
<LI>Yellow </LI>
<LI>Blue </LI>
<LI>Green </LI>
</UL>

Browser output for the above coding will then be:
• Red
• Yellow
• Blue
• Green

Definition Lists
Definition Lists are a little more involved, though certainly no more difficult than their companions, the Ordered and Unordered Lists. The Definition List is first defined as such with the <DL> tag. The <DT> tag then lists the term to be defined or elaborated on. This will be left justified.The <DD> tag then provides the definition, suitably indented for emphasis. Syntax is as follows:

<DL>
<DT>Red </DT>
<DD>One of the three primary colors </DD>
<DT>Yellow </DT>
<DD>Another of the three primary colors </DD>
<DT>Blue </DT>
<DD>The last of the three primary colors </DD>
</DL>
Browser output for the above will appear like this:
Red
One of the three primary colors
Yellow
Another of the three primary colors
Blue
The last of the three primary colors

7. CHARACTER TAGS

Character tags, so-called because they affect individual characters fall into two categories: logical and physical. Loosely speaking, logical tags should be chosen over physical ones that have the same or similar characteristics to ensure varying browsers read your document as you intended. Both logical and physical character tags are two-sided.

Typography and Appearance Character Tags
Logical character tags indicate how you want to use text, but not necessarily how you want it displayed. Commonly used logical character tags include the following:

<EM>
This tag indicates that characters should be emphasized in some way, most commonly with italics.
Browser Output: This line is emphasized.

<STRONG>
This tag provides stronger character emphasis than <EM>, and is usually displayed in a bold font.
Browser Output: This line uses the <STRONG> tag.

<CODE>
Used when displaying a sample of code. Usually presents in a Courier or similar fixed-width font.
Browser Output: This entire sentence illustrates the <CODE> tag.

<KBD>
Gives the appearance of text produced on a typewriter. Text displays in a fixed-width font.
Browser Output: This entire sentence illustrates the <KBD> tag.

<VAR>
Used for text that represents a variable. Usually displayed in italics.
Browser Output: This sentence illustrates the <VAR> tag.

<CITE>
Used to indicate short quotes or citations. Commonly presents in italics.
Browser Output: This sentence illustrates the <CITE> tag.

Physical Character Tags
Physical character tags indicate exactly how characters will appear. Commonly used physical character tags include the following:

<B>
Indicates that the text will present bold.
Browser Output: This sentence is printed using the <B> tag.

<I>
Indicates that the text will be italicized.
Browser Output: This sentence is printed using the <I> tag.

<TT>
Indicates that the text should present in a fixed-width font like Courier.
Browser Output: This sentence is printed using the <TT> tag.

<BIG>
Indicates that the text should appear in a large font. Requires HTML 3.0 or higher.
Browser Output: This sentence utilizes the <BIG> tag.

<SMALL>
Indicates that the text should appear in a small font. Requires HTML 3.0 or higher.
Browser Output: This sentence utilizes the <SMALL> tag.

<SUB>
Text is to appear as subscript, if possible, in a smaller font. Requires HTML 3.0 or higher.
Browser Output: The chemical formula for water is H20.

<SUP>
Text is to appear as superscript, if possible, in a smaller font. Requires HTML 3.0 or higher.
Browser Output: Normal room temperature is around 70oF. or 20oC.

8. HYPERTEXT LINKS

We create hypertext links to ease movement through our Web documents, to draw attention to special features, and to link to other Web sites. Links may employ text or graphics, and frequently require an anchor, so we'll start with anchors. Note that the file names used to create anchors and links are case sensitive, and must appear exactly as already established.
One of the biggest strengths of HTML is its ability to allow
links between a document and other related documents, as well
as within a document itself. This is accomplished using
anchors and hypertext references. A link to another file
(text, image, sound, digital video, or whatever) located on
the same machine as your own document looks like this:

<A HREF="filename">Some Text</A>

In the above example "filename" can contain a path to a
different directory, if the linked file is not in the same
directory as your document. The text between the tags will
appear in a different color in your document to indicate that
it is a hypertext link that can be clicked on to go to the
specified document file. This color is typically blue unless
you have specified some other color using the LINK= attribute
of the <BODY> tag. You should exercise care when specifying
atypical link colors, as users are accustomed to blue links
and may not readily recognize other colors as hypertext
links. Beware also of link colors which are the same as the
background color of your document, in which case the
hypertext links will be "invisible" on the page! A hypertext
link may be regular text, line breaks, images, or headings.

You may also link to a document or file located on a
completely different machine. In this case, you must specify
a complete file type, domain name, and pathname (i.e., the
full URL) to the linked document:

<A HREF="http://domain/path/filename">Some Identifying
Text</A>

The type of document may be hypertext (http://), a gopher
file (gopher://), a newsgroup (news:), or a Telnet connection
to another machine (telnet://) or an E-mail option (mailto:).

You may also specify a link to a different location within
the same document you are displaying by using a named anchor.
In the example below, the first line tells where you want to
go. The second line is the anchor you would place at that
point in your document:

<A HREF="#GMT">Some Identifying Text</A>

Intervening document text....

<A NAME="GMT"></A>

You may use exactly the same technique to jump to a specific
place in another document by preceding the # in the above
example with the filename and/or pathname of the second
document. You normally needn't include any text between the
NAME= anchor and its closing tag if you do not wish to,
though some browsers do require it. You may jump both
backwards and forwards in the same document; when searching
for a named anchor, the browser always begins looking for the
anchor from the top of the document irrespective of the
"apparent" direction of the jump to the viewer. The document
which you are now reading makes extensive use of named
anchors for internal navigation.

While text commonly is used for hypertext links, images can
also be used as links as discussed below.

Creating Anchors
Note that the anchor is your destination. You connect TO an anchor.

Anchors are necessary for linking within a document, or when linking to a specific area of another document in the same folder or computer. Otherwise, when linking to another document, you will simply link to the top of the page.

To create your anchor:
• Pick an anchor name (e.g. if you are anchoring to a Table of Contents, you might select TOC as your anchor name, though there is nothing but extra keystrokes to stop you from using the whole title as anchor should you so choose).
• Place the tag <A NAME="Anchor Name"> before the text you wish to anchor.
• After the text, place the closing </A> tag.
• If you have chosen to use a graphic or photo as your anchor, your tag should then read:
<A NAME="PHOTO"><IMG SRC="Image Name.jpg></A>
.
• Anchor tags should always be placed inside other tag elements, and no tag elements other than inline graphics instructions should be placed inside an anchor tag.
• Note that creating an anchor does not change the appearance of your document in any way.
The headings at the top of each segment of this Manual have been designated as anchors.

Creating a Link on the Same Page as Your Anchor
Note that the link is your source. You connect FROM a link TO an anchor.
• Place the tag <A HREF="#Anchor name"> before the text that will be your link. 'Anchor name' is whatever you chose to call your anchor.
• After the text, place the closing </A> tag.
• If you have chosen to use a graphic or photo as your link, your tag should then read:
<A HREF="#PHOTO"><IMG SRC="Image Name.jpg></A>
.
• Creating a link will cause the link text to be underlined, and to change color to whatever you have specified as the link color, or in lieu of other instructions, to the default color. When the cursor passes over your link it will change to a hand. To illustrate this phenomenon, see the 'Return to Table of Contents' and 'Previous Topic' links at the beginning and end of each segment of this document.

Creating a Link to Another Document in the Same Folder or Computer
Note that it is not necessary to create an anchor before creating a link to another document unless you wish to link to a specific location in the other document. However, the link remains your SOURCE
• Place the tag <A HREF="Filename.htm"> before the text that will be your link. 'Filename' is the name of the document to which you wish to link.
• Place the closing </A> tag after the link.
• Linking in this fashion will take you to the top of the first page of the destination file.
• Link text will change color as noted above, cursor becomes a hand, etc.
The Table of Contents segment of this manual is housed in a separate file from the data. Links to and from the Table of Contents therefore illustrate this principle.

Creating a Link to a Specific Section of Another Document in the Same Folder or Computer
Once again, remember that the link is your SOURCE
• Create your anchor around the destination text or graphic as outlined above.
• Place the tag <A HREF="Filename.htm"#Anchor name"> before the text that will be your link. Again, 'Filename' is the name of the document to which you wish to link, while 'Anchor name' is whatever you chose to name your anchor.
• Place the closing </A> tag after the link.
• Linking in this fashion will take you whatever point in the destination file you have chosen as your anchor.
• Link text will change color, cursor becomes a hand, etc.
The link from the Table of Contents file to the 'Images' section which follows this one on linking serves to illustrate this principle.

Creating a Link to a Document on the Internet
• Locate the text or graphic you wish to designate as link.
• Before the text or graphic, place the tag <A HREF="URL"> where 'URL' is the URL of the Web page to which you wish to link. For example: <A HREF="www.talltech.com"> would link to Jim Hamlin's Internet site.
• After the text or graphic, close with the </A> tag.
• As with all links, text will be underlined, will change color, and the cursor will become a hand when passing over it.

9. IMAGE TAGS
We add images to our Web pages primarily for visual impact or to further a theme, though they may also illustrate a point or even constitute links to other pages and/or topics. One of the easiest images to add to a Web page is a background, yet what an impact it can have! The syntax used to add the background used on the margins and headers of this page is as follows:
<BODY BACKGROUND="004-22.gif">

As can be seen from the above, background image tags are inserted inside the <BODY> tag.

IMAGE TAGS

In-Line Graphics - A Quick Overview
In-line Web graphics come in two flavors: GIF (Grapics Interchange Format) and JPEG (Joint Photographic Experts Group).

GIF images carry the .gif extension, and should be used when you're looking to create:
• animated graphics
• transparencies
• interlaced retrieval
• logos or other art with not more than 256 colors.

JPEG images commonly carry a .jpg extension, and should be used when you're looking to:
• display photographs
• use images containing more than 256 colors
• reduce the size of images through file compression.

Adding In-Line Graphics to Your Web Page
Now that we know a little bit about images in general, we're ready to add pictures to our Web page. The syntax for inserting an inline graphic is as follows:
<IMG SRC="image">

Aligning Your In-Line Graphics with Text and Margins
The image tag supports a number of alignment properties that deal with text flow around the image. The syntax for including these values is:
<IMG SRC="image" ALIGN=alignment>

Alignment values supported by all versions of HTML are TOP, MIDDLE, and BOTTOM which align surrounding text with the top, middle, or bottom of the image respectively. HTML 3.0 or higher, and both Netscape and Internet Explorer browsers also support LEFT and RIGHT values for the ALIGN property, which will align the image with either the left or right margin, and wrap the text accordingly.

Adding Borders to Your Images
If your image does not come with a border and you feel a border is exactly what the doctor ordered, you can add one with the following syntax:
<IMG SRC="image" BORDER=value>

The value specified is the border width in pixels. So, here we add a 5 pixel border to our rose graphic:

The Alt Property
The final consideration for inclusion in the image tag is the ALT property which provides an alternative for those whose browsers do not support graphics, or for those wishing to bypass graphics in favor of speed. The ALT property can also act as a placeholder for the specified graphic while a page is loading, a particularly useful feature for anyone laboring with a slow dial-up connection. Use of the ALT property permits you to substitute text for an image thus:
<IMG SRC="image" ALT="alternate text">

To illustrate this using the Pink Rose image, our syntax would be:
<IMG SRC="image" ALT="A vase of Pink Roses">

10. HTML GLOSSARY

List of Common HTML Tags and Their Attributes
All HTML tags are enclosed in angle brackets like <THIS>

Most, but not all, HTML tags have both a beginning tag like
<THIS> and a corresponding closing tag in which the tag value
is preceded by a forward slash like </THIS>; any enclosed
text is affected by the tag pair; the use of some closing
tags is optional but is strongly encouraged

HTML PRIMER CONT.

Next

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

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