Guide to HTML Programming
(HyperText Markup Language)

INTERESTED IN HAVING YOUR OWN WEB PAGE? HAVE ME DO IT! SEE BELOW FOR E-MAIL ADDRESS
Getting Started
Colors
Lines & Line Breaks
Text, Text Size & Form
Links & Pictures
Tables
Buttons
Counters

GETTING STARTED

In order to sucessfully put together your own web page you must learn to be fluent in HTML programming. HTML stands for "Hypertext Markup Language" which is the programming language that Netscape and other web browsers use to read and create web pages. All HTML pages are programmed in some kind of text reader/writer (like SimpleText by Apple or BBEdit Lite). All you need to do is create a new text document, type in the commands and when you're done send it to your server (I use Anarchy to do this).
A FEW THINGS TO START WITH:

  • All HTML documents begin with the first command "<HTML>" which tells the browser that you don't just want the text to be displayed and that you want all the features of a HTML document (aka. a web page).

  • The next thing you want to do is create your title to the page... like the title to this one is "HTML PROGRAMMING." You can see it at the top of the window in the browser; This is done with the "<TITLE>" command. after "<TITLE>" you type the desired title and then end it with "</TITLE>" to let the browser know that the rest of the document isn't included in the title. You may also use various symbols in your title.

  • The next command is the "<BODY>" command. Within the body command you may choose to change the color of the background, links, used links, text, or even add a background image. Here's an example:

    <BODY BGCOLOR="red" TEXT="0000FF" LINK="800080" VLINK="800080">
    see "ABOUT THE COLORS" below.

    "BGCOLOR" is the background color, "TEXT" is the text, "LINK" is a link, "VLINK" is a visited link. The following part is VERY confusing so pay close attention... you may want to read it over and over until you understand it.

  • You always end each command with the appropriate ending... in this case it would be "</BODY>" but save this one and "</HTML>" until the very end of the document where "</BODY>" would come first and then "</HTML>" since "</BODY>" is included within the "</HTML>" command. Your document and other programming (ie. commands) you will do will also go before the end commands "</BODY></HTML>."

    ABOUT THE COLORS:
    Notice that the background color (above) is "red." You may use names of colors like this or you may use the six "digit" (sometimes they are letters also "0" being the darkest "F" being the brightest ie. 0,1,2,3,4,5,6,7,8,9,A,B,C...) code for the color which is more reliable and more customizable. You can create your own colors by experimenting with the code. The first two "digits" make up the amount of red in the color, the second two - the amount of green, the third - the amount of blue. If your browser supports colored text like this:

    000000

    --- AFTER ALL OF THIS IS UNDERSTOOD YOU MAY THEN PROCEED TO CREATE YOUR DOCUMENT ---


    COLORS (also see above)

    <BODY BGCOLOR="440044"> is purple
    <BODY BGCOLOR="000088"> is blue
    <BODY BGCOLOR="440000"> is maroon
    <BODY BGCOLOR="008800"> is green
    <BODY BGCOLOR="080808"> is black
    <BODY BGCOLOR="C8C8C8"> is really light gray
    <BODY BGCOLOR="989898"> is light gray
    <BODY BGCOLOR="787878"> is light medium gray
    <BODY BGCOLOR="505050"> is medium gray

    LINES AND LINE BREAKS


    <BR> is a Line Break (like return in a word processor)

    

    <HR> is a line:

    
<HR size=#> changes the width of the line:
    1 is a black line:
    <HR width=#> makes the line shorter or longer:
    

    <HR width=#%> makes the line shorter or longer
    (occording to how large the window of your browser is):
    

    When you make smaller than screen size lines you can also align them:
    <HR width=50% Align=LEFT>
     

    You can also make the line thicker by using a non-shaded line:
    <HR noshade size=2>
    Note: All the ones used in this document are size "3"


    

    TEXT, TEXT SIZE, AND FORM:

    

    <B>TEXT</B> is Bold
    

    <BLINK>TEXT</BLINK> makes the text blink (this is VERY annoying if used too much)
    

    <I>TEXT</I> is italic

    

    <H#>TEXT</H#>
    Header Size
     (number could be any up to 6--> the bigger the smaller)
    <FONT Size=#>TEXT</FONT> is the font Size
    

    <DD>TEXT</DD>
    Tabbed text

    

    <DD>TEXT</DL>
    Tabbed text that will go on forever... the LT;/DL> stands for "don't loop" and I'm still typing to prove a point.

    

    <P></P> creates a grouped paragraph

    SYMBOLS: (don't need an ending command)
    <LI>
  • (A Bullet)
    • 

    &amp;
    & (An "And" Symbol)
    

    &LT;
    < (The other one, ">", just needs to be typed
    This is because the programming language uses "<" to recognize a command...

     
    "&LT;" is how you get around confusing text with programming.)
    

    &nbsp; is a space (good for tables)


    


    

    LINKS & PICTURES:

    
Mail To Someone:
    <A HREF="mailto:put@address.here">Name of Company or person</A>
    
Turns into: Name of Company or person

    
A link to another page:
    
<A HREF="http://www.linknet.com/~directory/file.html">Link</A>
    Turns into: Link


    
A link to somewhere within the page:
    
1) Name the spot that you want the link to take you to:
    

    <A NAME="Test">Place to go</A>
    
Looks Like: Place to go (like nothing right?)
2) Then make the link to the spot:
    

    <A HREF="#Test">The link to the spot</A>
    
Looks Like: The link to the spot. (go ahead... try it)


    
A Picture:
    <IMG SRC="picture.gif">
    Turns into: 

    

A Picture With a Link (in this case a link to another page):
    <A HREF="mailto:put@address.here"><IMG SRC="picture.gif"></A>
    Turns into: 

    

Picture With Defined Size:
    (this is good for scaling pictures to a definate size or just for page format).
    <IMG WIDTH=72 HEIGHT=58 SRC="picture.gif">
    Turns into: 
    

    A Picture With Defined Size and a link (in this case a mail link):
    <A HREF="mailto:meyer@primenet.com"><IMG WIDTH=72 HEIGHT=58 SRC="picture.gif"></A>
    Turns into: 

    
A Picture With Defined Size, a link, and no border:
    
<A HREF="mailto:meyer@primenet.com"><IMG WIDTH=72 HEIGHT=58 BORDER=0 SRC="picture.gif"></A>
    Turns into: 


    



    

    TABLES:

    This is how to make a SIMPLE table:
    1) First choose a width for the table:

    <TABLE width=450...
    
2) Then choose the size of the border of the table:

    <TABLE width=450 border=5...
    
3) And find out the width the total number of cells will take up so the line looks like this:

    <TABLE width=450 border=5 colspan=3>
    
4) then put in your link so the line looks like (you may align properly in this stage):

    <td colspan=1 width=150><CENTER>First link/text</CENTER>
    
5) After the maximum number of cells and width are filled up... end the table line with "<tr>"
    If this is the last thing in your table don't use "<tr>"
    instead end it with "</TABLE>

    
Ex:
    <TABLE colspan=3 width=450>
    <td colspan=1 width=150><CENTER>First link/text</CENTER>
    <td colspan=1 width=150><CENTER>Second link/text</CENTER>
    <td colspan=1 width=150><CENTER>Third link/text</CENTER>
    </TABLE>

    Here it is:
    

    First link/text
    

    Second link/text
    

    Third link/text
    


    


    
HERE IS ANOTHER EXAMPLE TABLE:

    

    First link/text
    

    Second link/text
    

    Third link/text
    
 
    

    One

    Two

    Three
    



    HERE IS WHAT THE PROGRAMMING FOR THIS TABLE LOOKS LIKE:

    
<table border=5 cellspacing=0 cellpadding=2 width=450>
<td colspan=1 width=150><CENTER>First link/text</CENTER>
<td colspan=1 width=150><CENTER>Second link/text</CENTER>
<td colspan=1 width=150><CENTER>Third link/text</CENTER><tr>
<td colspan=3 width=600>&nbsp;<tr>
<td colspan=1 width=150><CENTER>One
<td colspan=1 width=150><CENTER>Two
<td colspan=1 width=150><CENTER>Three<tr>
</table>

    
"cellspacing" is the width of the seperator lines inside of the table
    
"cellpadding" is the deepness of each cell in the table
    
"border" is the thickness of the border of the table

    


    BUTTONS:

    
Buttons are created in the following manner:

  • Button For a Link:
    
<FORM METHOD="post" ACTION="LinkGoesHere"><INPUT TYPE="Submit" VALUE="Name of Button"></FORM>

  • Button For Mail:
    <FORM METHOD="mail" ACTION="mailto:person@mailhost.com"><INPUT TYPE="Submit" VALUE="Name of Button"></FORM>

    Here are some buttons to links within the page:
    


    

    

    

    

    

    

    

    

    



    COUNTERS:

    
Counters on the other hand depend on your server... for Primenet There is a really thorough explanation of counters here. For other servers you might want to check their main homepage for information on HTML programming to see if they explain how to do it. See the counter for this page here.



    
This page was programmed by me, Josh Meyer (meyer@primenet.com)
    
E-Mail me if you have any questions
    or are interested in having me make you a web page.
    
Visit My Homepage!
    

    For more information on creating homepages click here.