CLICK HERE FOR THE ADVANCED HTML CODE PAGE

ABCs of HTML

Open Notepad or your favorite text editor and get ready to make a template. Here are
some basic codes to help you create a your first web page.

The top of your HTML codes:

<HTML>

<HEAD>

<TITLE> ABCs of HTML CODES </TITLE>

</HEAD>

That will give you: White background until your background (jpg or gif) is loaded, with
Black text. Your link will be blue , your viewed link will be
dark red and your active link with be Fuchsia.
You can change this to colors you like.

For the name or title of your page if you type this:

<center> <h1> Name of Page</h1></center>

You will get this:

Name of Page

<h1>This is h1</h1>

<h2>This is h2</h2>

<h3>This is h3</h3>

<h4>This is h4</h4>

<h5>This is h5</h5>

<h6>This is h6</h6>

Here are some samples of base size text. These are the sizes you will use in writing
your HTML page. Most use 3 or 4:

If you want something bold you type: <B> this is
bold print </b>.

If you want to underline you type: <U>this is to underline</U>

If you want to use italics you type: <I>this is italics</I>

You can also do a combo of all:

<B><U><I>Bold, italics and underlined </B<</U></I>.

Instead of using the italics <i>ITALICS</i> you may want to use the
<em>emphasis</em>

you get the same effect.

Although, I must say I cannot tell any difference in the two, the books say that <em>emphasis</em>
renders a bolder text.

One code I've never found a use for but someone probably has is the strike code.

It is:

<strike>This is the Strike Code</strike>

~~and here are the results.~~

I do not know which browsers do and do not support this code.

C O L O R S You can change the color of your text and your pages. If you have
a dark background, you should use a light color text. Or if you have a pale background you
can pick a darker color. Here are some examples and coding of different colors.

For a more complete listing of color codes please visit The Web Color Index
or, for those who can handle javascript, try Gypsy-J's color page.

<FONT COLOR="#000000">Black

<FONT COLOR="#800000">Maroon

<FONT COLOR="#008000">Green

<FONT COLOR="#808000">Olive

<FONT COLOR="#000080">Navy

<FONT COLOR="#800080">Purple

<FONT COLOR="#008080">Teal

<FONT COLOR="#808080">Gray

<FONT COLOR="#FF0000">Red

<FONT COLOR="#00FF00">Lime

<FONT COLOR="#FFFF00">Yellow

<FONT COLOR="#0000FF">Blue

<FONT COLOR="#FF00FF">Fuchsia

<FONT COLOR="#00FFFF">Aqua

<FONT COLOR="#FFFFFF">White would not show up but
the code is #ffffff

Here are the SAME colors, only using the <b><b> (bold) coding:

<B>

</B>

Here are the same colors using the <strong> code:

Remember each browser is different, some do not recognize the <strong> code and
others do not recognized the <bold>code.

Alignment Tags:

These can get complicated, but the most common is the

<center> center </center>

Since this is supposed to be the very simplest of html codes I am not going into other
aligment tags.

Horizontal Lines:

Plain lines are done using a <HR> tag. When you type in <HR> the default
will be the full width of your screen. If you want to change the default follow the
examples below:

<hr size=10 align=left noshade width=25%> will give you:

<hr size=5 align=left noshade width=25%> will give you:

<hr align=center noshade width=25%>will give you:

<hr align=center width=25%> will give you:

Making Lists:

To create an Ordered List you need to use <ol></ol>tags.

<ol>

<li>number one

<li>number two

<li>number three

</ol>

Your list will look like this:

number one
number two
number three

Create an Unordered or Bulleted list: using the <ul></ul> tags

<ul>

<li>red

<li>blue

<li>green

</ul>

Your list will look like this:

Red
Blue
Green

Definition Lists or

Headings with indents:

Topic: Learning HTML coding
Simple Steps: Simple steps are the best

To create the above topics, follow these steps:

Topic: Learning HTML coding
Simple Steps: Simple steps are the best

This tag is now obsolete, but some people find it useful.

Breaks and Paragraphs:

For a cause a break in the line you type <BR>

And the next line will print.

If you want to create a new paragraph you type <P>

And it will skip a line (leaving it blank) and start a new line.

To Make Things Blink:

Blinking does not work with all browsers so it will not blink for every
one. I believe that it is an annoying Netscape trick.

You type <blink>word to blink </blink>.

To Make Things Scroll:

The Marquee Code is only compatible with the MSIE browser. A Marquee is scrolling text
across a page. It is eyecatching, but once again, not supported by all browsers.

<marquee>This is the code for Marquee.</marquee>

Users of MSIE will see scrolling text across the page. Netscape users
will just see the text. It will not scroll, but if you center
it,<center></center> it should look fine with either browser.

This is a MARQUEE

Create a link:

To create a link to another page or to another person's page you type:

<a href="http://www.avsia.com/">Click Here</a> for Avsia's home
page.

Click here for Avsia's home page

Putting graphics on your page:

The first thing to do is upload them to your ISP. Please do not link to the graphic

Always upload it to your site.

There are several reasons for this but the two important ones are:

doing it steals their bandwidth and
if they remove or rename the graphic, yours will show up broken.

The html code or tag to add a graphic is:

<img src="name.gif" height=60 width=60 alt="what graphic
represents">

The height and width tags help it to load faster. You can determine the size of your
graphic by viewing it in a graphics editor.

If you want your gif to be in the center of your page, you type:

<CENTER> <img src="namegif" alt="cool">

</CENTER>

Always use the alt tags for graphics and explain what the graphic represents, since
this makes the page more accessible for people who are the vision impaired. Remember, too,
that some folks surf with their graphics turned off or else use browsers that don't
support graphics.

Create a mailto:

Drop a note to John Doe

Remember before you end your page you must close the body and html tags that you opened
when you started your page.

</BODY>

</HTML>

These are just a few of the basics of html coding. If you need more help please e-mail ME and I will try to help.

Many thanks to Gypsy-J,
who thought out this page and graciously offered it to us to tailor to fit our needs!

[How Do I?] [More How
Do I] [Users' Pages] [ABCs of HTML] [Area Links] [Avsia]

CLICK HERE FOR THE ADVANCED HTML PAGE
TOP

Hit Counter