Most people get confused when it comes to web programming. I even get confused some times. So, I put some of the basic HTML comands on this page. I hope they are helpful.

HTML --- CSS
Page Jumps PRE XMP --- --- Begin Links Properties Scrollbar Class

Page Jumps

Page Jumps are quite simple. Here is how it is done:

<a href="#jump1">Jump</a> <--This is where you click. <a name="jump1"></a> <--This is where you jump to.

PRE

Here's what they do and how:
When you type text likes this: 

     Text                         Text

and it shows up like this:
Text Text To fix that just add the text in between <pre> and </pre> like this: <pre>Text Text</pre> or <pre> text text </pre>

XMP

XMP is used when you have to show HTML code on a webpage. Just add your code in between:

<xmp>
<a href="page.html">Page</a>
</xmp>

Begin

When you use CSS, you want to put it in between <style> and </style>. Then continue...

Links With CSS

Four codes to manipuate the link:

a:link { color: #000000; text-decoration: none }
a:active { color: #000000; text-decoration: none }
a:visited { color: #000000; text-decoration: none }
a:hover { color: #330099; text-decoration: underline }

You might be confused, so I am going to break it down. The a:link is just a link, the a:active is when the link is being clicked. The a:visited is what color the link is when it is linked to a site that has been visited to already. The a:hover is what the link is it is hovered over by the mouse.

Of course, you pry want to know what all that mumbo jumbo is behind all that crap. Well the color is basically explainitory (it is what the link color is.) The text decoration is what the text of the link is, like underline, overline, etc.

Properties

Text-Decoration Properties

  1. none
  2. overline
  3. underline
  4. line-through
  5. underline overline
  6. blink -- Netscape and Mozilla only:(

You can add a background color by putting a colon after you text-decoration and put background: blue, Example:

a:link { color: #000000; text-decoration: none; background: blue }
a:active { color: #000000; text-decoration: none; background: blue }
a:visited { color: #000000; text-decoration: none; background: blue }
a:hover { color: #330099; text-decoration: underline; background: black }

You can use borders for your links too. Instead of typing text-decoration: none, type border: thin dotted black (you can change the width, style, and color). Always type in the border with the width first, then the style, and then the color.
example:
{ border: thin dotted black }
never
{ border: dotted thin black }

Widths:

  1. Thin
  2. Medium
  3. Thick
  4. 1pt, 2pt, 3pt, etc.

Here are the styles you can have:

  1. solid

  2. inset

  3. outset

  4. dotted

  5. dashed

  6. groove

  7. double

  8. none

You can add these properties to text too, just go to Class

Scrollbar

You can customize your scrollbar by giving it some color. Just add the text below in between the <style> and </style>, and if you have link properties, then add the scrollbar properties BELOW the link properties.

BODY

{
scrollbar-base-color: blue;
scrollbar-arrow-color: black;
scrollbar-darkshadow-color: blue;
}

The BODY tells the browser that this is part of body style and should be included. The scrollbar-base-color: blue; is the main color in the scrollbar. The scrollbar-arrow-color: black; is just saying what color the arrow is on the scroll down button, and the scrollbar-darkshadow-color: blue; is the shadow under and on the right side of the scrollbar.

You can also have the track color of the scrollbar be a different color. To do this just add scrollbar-track-color: black; to the code. Of course, you can change the colors to whatever you want to.

Class

You can use classes to give certain properties to text, forms, tables, etc. Here is what a class script looks like:

.yourclassname { color: black; border: thin dotted black; font type: Times New Roman }

You can put as much stuff in there as you want or you can just have one.
When you use classes, you need to put them in between <style> and </style> in the head tag.
Example:

<html> <head> <title></title> <style> .yourclassname { color: black; border: thin dotted black; font type: Times New Roman } </style> </head> </html> Just add <span class="yourclassname"> before the text or the code you want and </span> after, to have those properties. Example:
<span class="yourclassname">TextTextText</span>

You can have links with different properties by using classes. Just add .yourclassname in between A and :link, :active, :visited, :hover. Example:

a.yourclassname:link { color: blue; text-decoration: none }
a.yourclassname:active { color: blue; text-decoration: none }
a.yourclassname:visited { color: blue; text-decoration: none }
a.yourclassname:hover { color: black; text-decoration: underline overline }

of course you need two of those if you want the links to be different. So here's an example:

a.yourclassname:link { color: blue; text-decoration: none }
a.yourclassname:active { color: blue; text-decoration: none }
a.yourclassname:visited { color: blue; text-decoration: none }
a.yourclassname:hover { color: black; text-decoration: underline overline }

a.yourclassname1:link { color: black; text-decoration: none }
a.yourclassname1:active { color: black; text-decoration: none }
a.yourclassname1:visited { color: black; text-decoration: none }
a.yourclassname1:hover { color: blue; text-decoration: underline overline }

In you link you would put class="yourclassname" Example:

<a href="page.html" class="yourclassname">Link</a> <a href="page.html" class="yourclassname1">Link</a> it would show up like this:

Link Link

For a better HTML and CSS guide go to www.htmlgoodies.com or www.lissaexplains.com