|
HTML stands for Hypertext
Markup Language. It consists of sets of codes that are inserted in a document
to control the way the document is displayed by a Web browser, such as
Netscape Navigator/Communicator or Microsoft Internet Explorer. Because
you are viewing this document, you are using a Web browser. Using the browser's
View Source feature, you can see what the HTML code looks like. In Netscape,
select View > Source. If you are familiar with the hidden codes used by
word processors, such as WordPerfect, you will see that HTML codes are
very similar. A document containing these codes is called an HTML document.
An HTML document must have
proper form for it to be recognized and interpreted properly by the browser
software. The basic form is:
<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<BODY>
The main part of the document goes here.
</BODY>
</HTML> |
You should notice two things
here. Opening codes are enclosed in brackets (<...>), and closing codes
include a slash (</...>).
For example, an HTML document
is opened by <HTML> and closed by </HTML>.
This is true of most, but
not all, codes. Asiaco.com Simple Editor will create the basic document
structure for you.
The best way to learn HTML
is to use it.
Colors, background images
and some other features are controlled by the <BODY> tag. Asiaco.com
Simple Editor allows you to choose from several background colors for your
home page, by selecting from the many choices listed in the pull-down menus.
You can control the color
of the background, text and links in your home page by using the <BODY>
tag. To control the various colors on your page, the <BODY> tag is written
like this :
<BODY BGCOLOR="#xxxxxx"
text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">
You may include any of the
items (bgcolor, text, link, vlink or alink), or leave any of them out.
To set the color of the background, text, link, visited link or active
link, substitute a color value for the xxxxxx in the sample above. Do not
make them all the same color, or you won't be able to see anything on your
page.
Here are a few colors that
you can use:
White
Yellow
Red
Gray
Blue
Green
Black
Purple
Lt. Blue |
#FFFFFF
#FFFF66
#FF0000
#CC9999
#0000FF
#00FF00
#000000
#CC33FF
#00CCFF |
These values represent the
hexidecimal value of the red/green/blue combination that makes up the color.
A full explanation of these values is beyond the scope of this page, but
can be found elsewhere on the Web. When you see a color you like on another
home page, you can use the view source feature of your browser to see the
code for that color.
If you're comfortable enough
already with setting your own colors, Simple Editor allows you to create
your own <BODY> tag by unchecking the box above the pull-down menus
and including the tag directly inside the Body Text section.
SUGGESTION: Start
out by adding the tag
as the first item in the
Body Text window. This will give you the color combination used on this
page (as long as you have unchecked the box above the pull-down menus).
Once you have that working, you can experiment with different colors by
changing this tag.
To add background images
instead of background colors, you need to use the attribute BACKGROUND
in the BODY tag instead of BGCOLOR. For example, if you wanted to use an
image named "bg.gif" for your background, the tag would look like this:
| <BODY BACKGROUND="bg.gif" text="#000000" link="#0066CC" vlink="#336600"> |
NOTE: In the example
above, the image must be located in your own directory. If it's located
somewhere else, you'll need to give the entire path. For more help with
loading images, please see the section on adding
graphics to your site.
|
Creating
Horizontal Lines |
You can insert a horizontal
line or rule in your document by inserting a <hr> tag. The default line
is a full width, thin and shaded, like this:
Enhancements to this tag,
which are recognized by most browsers, allow you more control of the line's
appearance. By adding SIZE=NUMBER, the thickness of the line can be controlled.
The alignment can be controlled by adding ALIGN=LEFT/RIGHT/CENTER. The
width of the line can be adjusted by adding WIDTH=PERCENT. A black line
can be created by adding NOSHADE.
Combining these enhancements,
| <hr size=15 align=left noshade width=80%> |
will produce a thick black
line at the left margin, half page width.
NOTE: The fancy
lines used on many webpages are not produced by the <hr> tag. They are
graphic
images.
You can create bullet lists
by using the <ul> (unordered list) tag. The format is:
<ul>
<li>item one
<li>item two
<li>item three
</ul> |
The list will look like
this:
-
item one
-
item two
-
item three
You can create numbered
lists by using the <ol> (ordered list) tag. The format is:
<ol>
<li>item one
<li>item two
<li>item three
</ol> |
The list will look like
this:
-
item one
-
item two
-
item three
|
Creating
Definition Lists |
The easiest way to explain
a definition list is to show one:
-
Rats
-
An animal with long tail, grey
in color and small in size. Rats are always described as the first enemy
of cats.
This is the same list, with
the tags visible:
<dl>
<dt> Rats
<dd> An animal with
long tail, grey in color and small in size. Rats are always described as
the first enemy of cats.
</dl> |
Web browsers recognize six
levels of headers.
<h1>Level one header </h1>
<h2>Level two header</h2>
<h3>Level three header</h3>
<h4>Level four header</h4>
<h5>Level five header</h5>
<h6>Level six header</h6> |
They will look like this:
Level one header
Level two header
Level three header
Level four header
Level five header
Level six header
You can center text by enclosing
it in <CENTER> tags.
This line:
| <center>This is a test</center> |
will appear like this:
This is a test
If more than one line of
text is enclosed in the tags, all enclosed lines will be centered.
You can cause text to be
bolded or italicized by enclosing it in tags for those attributes.
will appear as:
Bold text
will appear as:
Italic text
| <b><i>Bold and italic text</i></b> |
will appear as:
Bold and italic text
NOTE: It is important
that you close the tags in the same order that you opened them. In other
words, in the last example it is important that the "Italics" tag be closed
before the "Bold" tag (put the </i> before the </b>).
|
Paragraph
and Line Breaks |
Web browsers do not respect
the way you have formatted your text. They ignore carriage returns and
line feeds. Unless given specific instruction, your text will be fitted
to the line length of the browser.
Inserting a <br> tag
will end the current line and start a new one. Inserting a <p> tag will
end the current line, insert a blank line and start a new line.
There are times when it
is nice to have your text appear just the way you have typed it. You can
do this by placing a <PRE> tag at the beginning of the passage, and
a </PRE> tag at the end. Your text will appear in a fixed-pitch (typewriter)
font and retain any tabs, line feeds, multiple spaces, etc. that you may
have included. For example:
My cat is special
and she loves to eat pie.
She loves to jump up and down
and I love her very much.
|
Creating
Anchor Links Within Your Page |
It is easy to create anchor
links, or hot links, within your document that can be clicked by the reader
to jump to another part of the document. Two steps are involved.
INSERT A TARGET at the point
to which you want the link to jump. A target looks like this:
| <a name="target_name_here"> |
INSERT A LINK to be clicked
to cause the jump. The link looks like this:
| <a href="#target_name_here">hotlink_text</a> |
The hotlink_text will appear
underlined and in the link color. When the user clicks the hotlink, the
browser will jump to the target_text. back to top is
a good example of a hot link. Use the View > Source feature of your browser
to see the HTML tags surrounding the hot link and the target text at the
top of the index.
|
Linking
to a File in Your Directory |
If the file is in the same
directory as the calling file, it is only necessary to specify the file
name:
If the calling file is in
a directory called "myfile" and the called file is named "mycat.gif" and
is in "myfile/graphics", give the relative path and file name. The tag
would be written:
| <a href="/graphics/mycat.gif"> |
Be sure to put a leading
slash before the subdirectory name to properly set up the link.
It is easy to create a hot
link that will cause the browser to open another file on the same server
as the file from which it is being called. The tag format for this kind
of link is:
| <a href="relative_path_and_filename">hotlink_text </a> |
|
Linking
to a File on the Internet |
Creating a link to a file
that resides anywhere on the Internet is similar to creating a link to
a file on your own site. Instead of using the relative path and file name
of the called file, the absolute path, or URL (uniform resource locator,
or internet address) is used. The link:
| <a href="http://members.Asiaco.com">Go to Asiaco.com</a> |
will take you to the Asiaco.com
page located at http://members.Asiaco.com. Use the back button on your
browser to return here. Try it!
Go
to Asiaco.com
|
Adding
Graphics to Your Page |
You can place graphic images
on your pages if the image exists as a separate file in your directory
or another directory on the Internet. The image format must be either GIF
or JPG, since these are what browsers recognize. In its simplest form,
the tag to place a graphic on the page looks like this:
This tag will cause a graphic
file named "mypic.gif" to be displayed in the position that it would appear
if it were text.
You can also control the
position of the image. The most basic way to do this is to treat it as
text. For example, surrounding the image tag with <center> and </center>
tags gives you a centered image.
You can also combine the
image tag with other elements of your document (i.e. hyperlinks, anchors,
etc.).
Graphics are a key element
of great webpages. Keep in mind they can also detract from your page by
causing it to load slowly, so a few graphics on a page may be sufficient
to convey your ideas.
|
Additional
HTML Information |
As you become more experienced
with HTML, you may want to use an editor on your own computer and transfer
files to Asiaco.com. The advantage of a local editor over the Asiaco.com
Simple Editor is that a good editor will automatically insert many common
tags.
|
