Instant HTML

This Document Covers:

Overview

    HTML stands for HyperText Markup Language. If you can run a word processor, you can write HTML code. It's so easy a child can do it. And they do it very well. HyperText allows the reader to jump around. Like turning pages to a bookmark on a different page. The web and HTML have carried this to the extreme. You can go to a bookmark in a different book anywhere in the world. The ability to jump around is the most powerful part of HTML. But the majority of coding is arranging things up so they look good. This is done by using tags.
    Tags are pieces of code you put in your page to make it the way you want it. A tag begins with a < and ends with a >. Most tags are like switches. You turn them ON and they are active. Later in the text you turn them OFF. The text between the ON and OFF are effected by the tag.
    For example, If you want to center a piece of text you would use this.
     <CENTER>This text would be centered</CENTER>
     The / in front of the tag name turns the tag OFF. Some tags don't need to be turned off. They are a single occurrance operation such as forcing a line break <BR>.
     Spaces (besides between words) and Carriage Returns don't show up in the displayed page. You have to control where you want things with tags.

     Just to confuse matters. The specification for HTML is continually being updated and added to. HTML is interpreted by the browser that is displaying the page. Browsers are all different. They don't recognize some HTML tags. To make your page so as many people can see it the way you want them to see it. You must view it on as many different browsers as possible. Provide alternative coding to support these browsers and their revisions. An alternative is to keep it simple. You can do so much with the basic HTML1.
    I question the wisdom of loading your code with HTML3+ code and doing work arounds so others can see it. If your page won't play on Netscape 1x You lost much of your audience. Be creative with how you use your code and keep it simple. Almost all code in this page can be viewed with Netscape 1x. There are very few work arounds.
     Programming with HTML is like programming with any other language. You have to do it. Play around with it. See what it dose well and what it doesn't do. Don't be afraid you can't hurt anything.
There are very few things that wont work in combination. An important one is not to overlap tags. Eg. <center>These <h2>tags </center>overlap</h2>. Tags should always surround each other nested.

Writing HTML

     I am not the fastest typist in the world and HTML is very verbose. So I use the cut and paste method for allot of it. I have two windows open. One has highly used tags and sequences of tags in it and the other is the HTML I am making. My left hand hovers over the Ctrl+X, Ctrl+C and Ctrl+V keys and my other hand is on the mouse highlighting text to copy. This is pretty fast and I don't make many typos. I admit I type allot of tags in.
     In another window is my browser. I have the file that I am making open (File-OpenFile). When I want to see how I am doing I save the file I am working on, then switch to the browser window and reload. This is instant gratification.
     Don't forget to use the View-Source on your browser. It's really handy. If you like the way something is done, look at the code. You can cut and paste from it also.

     All of the tags in this text are in CAPS. They are in CAPS to separate them from descriptive text. Programmers that write in CAPS is frowned upon by the programming community. IT'S LIKE SHOUTING. Options for tags are separated by a |. It's pretty straight forward. On some tags there is a '%' or 'pixels'. The % means a percentage of the display area. Pixels means the number of pixels.

The HTML, Head and Body Tags

    You need to have the HTML tag at the top of your document and at the bottom.
<HTML>Your entire page including the Head and Body tags</HTML>

     The head is where you put your title tag is what your page is called. It's displayed at the top of the page in the blue bar. It's also what is stored in your bookmarks.
<HEAD><TITLE>Your Page Name</TILTE>
     In the head tag you also can put information about your page. This information is used by search engins to so people can find your site.
<META name="description" content="Description of your site. Keep it short and sweet">
<META name="keywords" content="Key words that describe your site">
     In the head you also put any scripts or other special definations.
     Don't forget the ending head tag.
</HEAD>

     The body tag let's you describe the defaults for the overall page.
<BODY BGCOLOR="#RRGGBB" BACKGROUND="background.gif" TEXT"#RRGGBB" LINK="#RRGGBB" VLINK="#ff0000" ALINK="#ff0000"> Your whole page </BODY>
     BGCOLOR="#RRGGBB" -- This is the background color that everything will be displayed on. The #RRGGBB is the color of the background. It is the mix or Red Green and Blue that make the color. For more Information see Color. TEXT is the color of the text. LINK and ALINK are the color of the links not yet visited. VLINK is the color of visited links.

Special Characters

Because the <, > and " are used to distinguish tags from the text. We can't use them in text. We have to use a sequence of characters that will be interpreted and displayed as them.


&amp;  = &
&lt;   = < 
&gt;   = >
&quot; = "
&nbsp; = Non Breaking Space

Text

These tags allow you to control how text is displayed.
<P ALIGN="LEFT"> Text Paragraph </P> -- A line break to start with. LEFT | RIGHT | CENTER | JUSTIFY
<BR> -- Force a line break
<NOBR>No line breaks here <NOBR> -- No line breaks.
<BR CLEAR=LEFT> LEFT | RIGHT -- Break to next clear line.
 -- Comment won't show up on the display.
<FONT SIZE=N> Text </FONT> -- Change the font size.
<FONT SIZE= +1> </FONT> -- Increase or decrease font size'+' or '-' by N.
<BASEFONT SIZE=N> -- Change the default font size.
<CENTER>Centered Text </CENTER> -- Center your text.

Types of Text

<PRE>Preformatted</PRE> -- Preformatted text spaces and carriage returns count. Displayed fixed-width.
<BLOCKQUOTE>Quoted Text</BLOCKQUOTE> -- Displayed indented.
<ADDRESS>Address</ADDRESS> -- Displayed italic.
<B>Bold <B> -- Bold text
<I>Italic <I>-- Italic text
<TT>Typewriter<TT> -- Typewriter text, fixed-width.

Headings

A text heading. The number determines the size 1 biggest 6 smallest. You can also put alignment in the heading.
<H2 ALIGN="LEFT"> Heading </H2> LEFT | RIGHT | CENTER | JUSTIFY

Images

Images are what makes a page with some splash. They also take a long time to load. Please see The Image Zone when you have some time.

<IMG SRC="image.gif" ALIGN="RIGHT" HSPACE=20 WIDTH=100 HEIGHT=100>
LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | BASELINE | BOTTOM | ABSBOTTOM

HSPACE="pixels" -- Add horizontal space. Keeps text away.
VSPACE="pixels" -- Add vertical space.

WIDTH="pixels" -- The width of your image.
HEIGHT="pixels" -- The height of your image.
The whole page can load if the size is known ahead of time. It's easy to include the WIDTH and HEIGHT when you make an image and put it in your page. This is absolutely required on long pages.

BORDER="pixels" -- Puts a border around your image.

Horizontal Rulers

A line across the screen to break up the page.
<HR SIZE="pixels" WIDTH= % | pixels >
SIZE means the thickness of the line.
<HR ALIGN=LEFT|RIGHT|CENTER>
<HR NOSHADE> = No shading

Lists

There is more than one kind of list.

Unordered Lists

There are no numbers
<UL>Your List</UL> -- The tags for a list
<LI> -- Each list element has one -- </LI>

Ordered Lists

There are numbers before items in the list.
<OL>Your List</OL> -- The tags for an ordered list
<LI> -- Each list element has one -- </LI>

Tables

Tables are very useful. You can control the exact position of things on your page. This is one of the only ways of doing that. The Tree of Knowledge is a background tree with a table over it.
<TABLE WIDTH="% | pixels" HEIGHT="% | pixels" BORDER="pixels"
CELLSPACING="pixels" CELLPADDING="pixels"> Your Table </TABLE>
Your Table needs these things.
<CAPTION>Caption text</CAPTION> -- Table caption
<TR> -- New Row
<TD ROWSPAN=N COLSPAN=N ALIGN="center" IMG | text> -- Cell entry
</TD></TR></TABLE> -- Need to close them
ROWSPAN makes the cell span more than one row.
COLSPAN makes the cell span more than one column.

Forms

Forms let your guests input information. The information can be used in a variety of ways.

There are two items that are inside the form tag, method and action.
The method tells how the action is to occur. Mostly the method is POST, while the action may be several things. Action may be a mailto:---- or it may activate a CGI script that processes the input data.

For example:
<form method=post action="process.pl">
This tells the browser that the following is a form to be posted and starts a perl program that processes the input data. Based on the guest input data a database can be searched and the search results can be included in the HTML code that will be displayed. Or the input data can mailed to an e-mail address. Or anything that a computer can do with input data.

CGI scripts are programs that are executed on the server side. Servers are protected from programs running amuck and ravishing a system. This is done by a capability vector that limits a program from operating outside set bounds. But nothing is perfect. Even if a program stays inside it's bounds, It may run away and eat processor time. So, many providers are hesitent to let people execute programs on their server. You probably need permission.

An alternate method is to have the form sent to your e-mail. You can then process the input and append it to your database. Then you can do anything with it. This isn't real time so your form can't return relults to your guest immediately. Such as checking the form for accuracy. But things like an order form, guest book etc. can be easily made.

Ways of Inputting Data

Some definations:
varname = The name of the variable that is being input.
default = The default value of the variable.

Imput Boxes

This is a Text Box.
The code for making it is:
<input type=text name="varname" value="default" size="20">

Radio Buttons

You can only select one of the buttons. It's like a car radio. Try it.

The code for making these buttons is:
First<input type=radio NAME="varname" value="First">
Second<input type=radio NAME="varname" value="Second">
Third<input type=radio NAME="varname" value="Third">

On radio buttons the variable name "varname" is the same for all of the buttons in a group of buttons.

Check Boxes

You can select any or all of the boxes. Try it.

The code for making these checkboxes is:
First<input type=checkbox NAME="varname1" value="First">
Second<input type=checkbox NAME="varname2" value="Second">
Third<input type=checkbox NAME="varname3" value="Third">

On check boxes I set the variable name "varname?" different for all of the checkboxes. This is how databases store data in a field. I set the value to "T" or "F". This is a logical variable, true or false.

Selection Pop-Ups

Selection bars work similar to radio buttons. Only one option can be selected. The size is the number of options that are initially seen.

The code for the selection pop-up is:
<SELECT NAME="varname" SIZE="1">
<OPTION>Option 1
<OPTION SELECTED>Option 2
<OPTION>Option 3
</SELECT>

Text Areas

The code for making this text area is:
<TEXTAREA Name="varname" rows="2" cols="40"></textarea>

The text area can be scrolled. The rows and cols specify the area size.

Miscelaneous

There is a hidden type of input. Your guest dosn't fill it out. It's just information included in the data that is submitted. for example:
<input type=hidden name="address" value="bob@netopoly.net>

Submit and Reset Buttons

These buttons are pretty simple. The value is the text on the button.

The code to make them is:
<input type=submit value="Submit">
<input type=reset value="Reset">

Sorry these don't work.

Links

Links let you jump from place to place.
<A HREF="path/filename.htm#link">Text to describe palce</A> If #link is omitted you start at the top of the page. If the file is in the same directory, the path can be ommited. If the jump to point is in the same file, only the #link needs to be included. It's faster to. The page dosn't have to be reloaded. If the destination is not on your computer then you must specify a URL (Uniform Resource Locator) It looks like http://www.liberty.com/home/bobc/know-j.htm#links. The http means HyperText Transport Protocol. The www means the World Wide Web. This is followed by the location on the web (liberty). The .com means it's a commercial site. The rest is the path to the HTML file you want. If you type this into your location and hit return. You will end up here.
Don't put tags inside the link reference. Eg.
<A HREF="test.htm"><H2>Jump Here</H2></A>
Put them outside. Eg.
<H2><A HREF="test.htm">Jump Here</A></H2>

<A NAME="link"Optional Text></A> link is destination in a page.

This page is very short. It skips allot of information. There is enough here to get you started.