HTML and and WWW primer

THIS IS QUITE DATED... Like for HTML1.0.. HTML is up to version 5 now! --jm Feb 2014.

Getting Started

Use the View Source item in the View menu in Netscape, or equivalent, to study HTML source, which can be simple or complicated. If you don't understand something, ignore it. Look at something else.

This source of this document should be viewed as above to see how it works. That is, compare the page source with the page you see in your browser.

Keep in mind that it is a page about HTML. In some places I just use HTML and expect that you'll look at the source. In other places, I wanted the HTML to not be interpreted so the source would show through to the usual browser frame. This is not the usual case with HTML - you'll want it all interpreted, so you won't use the XMP tag unless writing about HTML.

You can create your own html with a simple text editor. I don't use an html editor, e.g PageMill, I use jove or equivalent text editor. I generate some of my HTML via perl reading a text file (exported database).

HTML is just ascii text.

You can view your web page attempts locally with your browser by opening the file (Open File) instead of opening a URL. You can then work with the HTML till you like what you see, then upload to the web server. You should keep a local copy of all your pages so they can link to each other, and just for backup purposes.

Syntactically, the structure of a page is supposedly the HEAD followed by the BODY:

<HEAD> heading stuff here </HEAD> <BODY> body stuff here> </BODY> but you really don't need to include these "high level" dealy bobbers unless you want to set a font color or background color.

Here are some of the most common HTML "tags":

THIS IS A LEVEL ONE HEADING

Here is some text in this section...

This is also a level 1 heading

You can have levels 1-6 at least. There are no nesting rules, other than that H1 matches /H1 not /H2 of course. A heading is just line breaks on either side and automatic font size. H tages do not do anything magic.


<br>	a line break
<p>	a paragraph break.  I use only at the beginning of a paragraph.
<hr>	a horizontal rule (line).

Note that line breaks in your text are ignored. Text is formatted to fill the browser lines with whatever fontsize the user has selected. This text will be stronger than surrounding. Ditto This text will be emphasized, probably via italics. Read all about it in Scientific American.

To start an unnumbered list with bullets for each list item:

Bang!
You're Dead
This is a list item that goes on and on and may take up several lines on the page. blah blah blah...

To have an auto-numbered (ordered) list:

put on socks
put on shoes
Tie shoeslaces
Put on pants
Put on underwear.
Run for the bus!
zip up pants

Lists may be nested. I.e., list items in an ordered list can each be unnumbered lists, et cetera. You'll get the indentation, numbering, and different kinds of bullets all automatically.

To create a definition list - where you present a definition term (dt) followed by a sentence or paragraph - the definition data (dd):

Sandwich: Two slices of bread with some meat in it.
Toast: A slice of bread that has been subjected to 500 calories of heat, evenly distributed over both surfaces, usually buttered.

Hypertext references: John Miller's Home Page

John Miller's Home Page will appear as a hotlink. When the user clicks on it, they'll go to the associated URL. The (a) markup tag stands for 'anchor'.

You can surround anything with the

<a...> </a> tags. For example, definition terms in a definition list. (Sandwich in the above), if you want to associate a URL with each term. The (xmp /xmp) markup tags override other markup tags.

The best way to get started is just to export some text form a WP document into text with line breaks, and start dinking with it... poke in the p's and start converting key lines into headings, etc. It's real fun the first time or two... :^)

Background colors and font colors, etc are easy, but also easy to overdo. I recommend changing the background color, but not any of the font colors.

TABLES

apples	oranges
women	men

You can also define a table row of table headers (th) before any table data rows. You can do all kinds of stuff with tables. There is a table sampler on the web at netscape I think. See my New World Model for example of a table and some of these other formatting commands, links, etc.

OTHER STUFF

Hey! This will appear in teletype font in the middle of whatever text you have.

This preformatted text will be in mono-space font with all the line
breaks preserved as you have them in the source HTML.
I think it also puts a blank line before and after it.
Good way to include raw text, code-snippets, etc.

X₁ creates a subscript, I think.
E=mc² superscript.
This creates an annoying string of text! Don't use it.

ENTITIES

Since ">", "<", and other things are used in HTML and other things aren't in 7-bit ascii, here's how you code them:


&amp;	ampersand	Lewis &amp; Clark College
&copy;	copyright sym	&copy; 1996, John Miller
&gt;	greater-than
&lt	less-than
&quot;	quotemark can use &quot; in most places. Best to use newer q markup tag!
&nbsp;	non-breaking space
	There are many others.

You can find a table of entities on the web. (Sorry no link here.)

Mailto URL

You can have the browser put of a mailgram in response to the Pannet Corporation below:

Created By: Pannet Corp.
Updated: 8-Oct-96
Expires: 31-Dec-99

The address tags put the whole thing in italics.

Don't worry that some things seem redundant - e.g. cite and em have the same rendition on UNIX Netscape, but they may be different on Mac Netscape, or Mosaic, etc.

Debugging and Miscellaneous

You'll learn quickly - If you start a head with H1 and forget the / on the /H1 or use /H2 instead, the whole rest of the document or chunk of it will all be in H1 (VERY LARGE LETTERS), or if you specify the first quote in:


	Yank It

but leave out the second one (after .html), you may not see some major portion of your document or get unpredictable results. But it's fun and easy to debug because you've got the graphic clues. I've had to put both quotes in above - otherwise the document is broken under Netscape 3.0. Other browsers may not care. Dunno.

Web servers have a "user" space and a "server" space. The server space is all files under one particular directory on the system, like /home/www or somthing, owned by a single user, like www. User space is the combined set of public_html subdirectories in all user's home directories. (At L&C that is the "cwis" subdirecory). You may have have things in subdirectories so that your URL path will be longer. If you specify an href as:

	href=jojo.html

then the base reference for the current document will be provided. If it is file:///home/pannet/web/docs/jimmmy.html, then the reference is to another file in the same directory. If the current document was access via http, then the browser will fill that URL stuff in before going to get it.

If you want to have an electronic form, be patient. You'll need your service provider's help on that, probably unless they have their server opened up for user-cgi (common gateway interface) scripts. Imagemaps should work the same for you regardless, but on the above page, the webform results into mail use a script that we wrote here. Your provider probably has a similar script that you can use as the "ACTION" URL when posting the form.

BLOCKQUOTE /BLOCKQUOTE does what you'd think.

Default Document

A server's default document is site dependent. The two most common are home.html and index.html. Servers can be configured to check for both, but one must take precedence over the other.

If the default doc is not found, and the URL is the name of a directory, the server returns a document consisting 'ls'-like info with on-the-fly links to each thing in the directory indicated (if directory listing is enabled on the web server, not so much any more these days..)

If the file corresponding to the URL does not exist, the server returns a 404 error or a fancy error page.

Similarly, each site has a unspoken subdirectory of each user's account, typically "public_html" where the user must place his/her files. Files must be world-readable cuz the server runs as "nobody".

Your ISP will likely run a s/ftp server, you can just ftp the files up to said directory and they should be immediately on the web.