![[HTML Color Chart]](htmcolor.gif)
HTML is programming for the Internet. It's not very hard, but there are rules that have to be followed.
Web pages are dumb, literally. You can put information on them, but you have to tell that information where to show on the page. Unlike a typewriter, you can't hit return to start a new line, you have to tell the web page "I want a new line here, please!".
I feel it is very important to learn basic HTML, because even though there are programs like Front Page or wizards on places like Geocities that do most of the work, if something goes wrong, you'll know how to fix it!
The following mini-lessons will get you through most of the basic
HTML commands. I'm using the HTML 2.0 commands, since this is what most browsers
can display. The fancier you get technology-wise, the less people can view your
page without adding a lot of plug-ins. Many people can't do that, or workplaces
won't upgrade frequently, so the less technology the better.
The instructions for web pages are called "tags". The majority of them need to be "nested". For example, 1-2-3 word 3-2-1, not 1-2-3 word 1-2-3. Tag three is nested within tag two which is nested within tag one.
Parameters within tags are separated by a space.
Here is a basic template for a web page:
<html>
<head>
<title></title>
</head>
<body>
(your data here)
</body>
</html>
These are essential and must appear on every page, in that order, for the commands to work.
Note that the start and close tags are different. The close tag has a "/" in front of the command word so the web page knows to stop that command! I told you it was dumb! :-)
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" alink="#ff0000" VLINK="#008200">
If you want to use an image for the background, use this command:
The "paragraph" command has several parameters you
can use:
The <font> ... </font> tag can be very versatile. You can change the size, color and design by adding the following parameters:
So, a font line might look like this: <font face="Berthold Script Regular, Boulevard, Park Avenue, Bellevue, ZapfChancery, Script MT, Slogan, Ariston, Kaufmann" size="+3" color="#008282">Example</font>
Most HTML editors have a color function, but usually only give you a basic range of a dozen or so colors, if you're lucky. Listed below is a terrific chart of some more shades. It does not show every color - they number in the millions! But play around with the numbers and letters to get exactly what you want! Kewl! :-)
Headers are usually used for the titles of sections. You are allowed
to use up to six header tags which look like this: <h1>
... </h1>, changing the number from 1 through 6. However, this
is a finicky tag. The size 1 tag is large, and decreases in descending order.
You must start with size 1 and cannot skip numbers, nor reuse them. You can
skip around, but you run the chance of it not showing correctly, then. So, it
is easier to just set up your titles using the font, center, and bold tags.
Here are examples of the header sizes:
Because HTML uses certain symbols to denote commands like the <
and > symbols, you need to use the escape characters when using these symbols
in your data, or the web page will try to execute them as an HTML command! For
instance, to show you the examples on this page, I needed to use the escape
characters for the <
and > symbols. Here's a few:
Everyone wants to see pictures - they're what make the web page come to life! Whether still or animated, real or cartoon, pictures are a vivid impression on your visitor.
So, the image tag might look like this (font size reduced to fit it all on one line):
<img src="clinks.gif" align=absmiddle hspace=30 alt="[Cool Links!]" width=50 height=50>![[Cool Links!]](clinks.gif)
It can be very convenient to use lists on a page as I've done here. There are two types: Ordered Lists, which are numbered, and Unordered Lists, which are bulleted.
You can alternately insert lists to get a big chain of indents, like you see on forums or newsgroups, to separate "threads", but this can be easily fouled up, so try and keep it simple!
This is the ordered list tag. Note that between the start and close tag is the "list item" tag, and any amount of these can be used.
<ol>
<li> (your data here)
<li> (your data here)
</ol>
And will look like this:
This is the unordered list tag. Note that between the start and close tag is the "list item" tag again, and any amount of these can be used.
<ul>
<li> (your data here)
<li> (your data here)
</ul>
And will look like this:
Finally! Bet you thought I forgot about links? I did!!! Just kidding, folks! :-p
Link to any page - <a href="http://www.oocities.org/valeriba/html4beginners.html">This Page</a>
Link to a spot in any page -
<a href="http://www.oocities.org/valeriba/html4beginners.html/#bottom">Bottom
of Page</a>
Link to a spot within the same page<a href="#top">Top of Page</a>
Linked spot within the same page - <a name="top"></a> - leave the data area blank, unless you really want to specify the obvious or need to specify the unobvious. And notice that there is no # symbol in this one.
The above 2 commands (Link to a spot in any page and Link to a spot within the same page) MUST have this second piece of coding for it to work.
The word that goes between the quotes after the # symbol can be anything you want it to be. I used "#top" and "#bottom" just as a reference example. Just remember to use the corresponding <a name="top"></a> (without the # symbol) with whatever word you have used.
E-Mail link - <a href="mailto:valeriba@yahoo.com">valeriba@yahoo.com</a> - Always restate your e-mail. Again this is for the low tech browsers that will only see your name unless you list your e-mail address!
Whew! Almost done, and I saved the toughest for last. I'm only going to list the basics here but you'll get a nice, neat table out of it. Anal retentives just love tables! Even non-anal retentives love 'em, too!
One word of warning: Older browsers, text-to-speech browsers, or text only browsers do not support tables and can't translate them into plain text properly. You should provide a text only version page for any page that contains tables.
Here is what the HTML commands (red) are for a 2 across, 2 down table with a header that spans both columns, and which gives you 4 cells to enter data (teal) into:
<center>
<table border=5 bordercolor="#0000ff" cellpadding=0 cellspacing=0 width=600
height=80>
<tr>
<th colspan=2 rowspan=1 valign=top align=center>Table of Data</th>
</tr>
<tr>
<td colspan=1 rowspan=1 valign=top align=left>data for row 1 : column 1</td>
<td colspan=1 rowspan=1 valign=top align=left>data for row 1 : column 2</td>
</tr>
<tr>
<td colspan=1 rowspan=1 valign=top align=left>data for row 2 : column 1</td>
<td colspan=1 rowspan=1 valign=top align=left>data for row 2 : column 2 </td>
</tr>
</table>
</center>
Looks like a bunch of gobbledy-gook, doesn't it? But this is how it turns out!
| Table of Data | |
|---|---|
| data for row 1 : column 1 | data for row 1 : column 2 |
| data for row 2 : column 1 | data for row 2 : column 2 |
Parameters you can change:
The font size and color may also be changed by adding in those parameters. The header function, though, automatically increases the size of the font and makes it look as though the <b> (bold) tag were used.
I have made a Samples page that has several varieties of sample pages you can use as templates. If you would like other samples, please send me an email at valeriba@yahoo.com letting me know what you need.
These are advanced features of HTML that I will not go into. Many people hate them, (I'm one of them), many browsers don't support them, and in some instances can even crash browsers! So if you wanna use 'em, you have to learn 'em on your own!
Sorry!