Webpage Authoring Guide

Ratt Salad's Webpage Authoring Guide
This Page Has Been Read Times Since June 30, 2000
This Page Was Last Updated On December 2, 1996

Tools INTRO Basic HTML More HTML JavaScript

Tools
There are alot of HTML editors floating around out there, I can't recommend any because I've never tried one. Personally, I use MicroSoft Windows' Notepad (which has such fine features as "Search" and... well, that's about it, okay I'm lying, I actually use Scribbler, my freeware Notepad replacement) to create/edit my files and Netscape Navigator 3.0.2 to preview them.
I also use MicroSoft Paint to create images (BTW, it does import GIF and JPG images) and MicroSoft's Photo Editor and GIF Animator to do interesting things with these images.
I do recommend a colour picker of some sort, otherwise you could spend hours wishing we saw the world in black and white instead of 256,000 colours (however, I use MS Paint for this too...).
By The Way, when I'm creating or editing a webpage, I leave all these applications open and simply drag and drop files to them from an open directory window, you can experiment with this but try not to get addicted.

Tools INTRO Basic HTML More HTML JavaScript

INTRO
How do I make an HTML document? Although Navigator doesn't require all the tags that I'm going to mention, it is best to include them for the sake of compatibility with other browsers. BTW, you can see all the tags used in this document (or any other for that matter) by clicking on it and then selecting View Frame Source (or, depending on how you got to this page, View Document Source) up there on the menu bar.
I have no intention of listing every single tag or all of their options, but just enuff to get you going with style.
Your basic HTML document looks like this:

<HTML> <HEAD> <TITLE>Joe Tool's Home Page</TITLE> </HEAD> <BODY> --- stuff on the page </BODY> </HTML>

It is important to note that HTML is not CaSE SenSITivE, it also ignores extra spaces and carriage returns, the same document could look like this:

<html><HEAD><TITLE> Joe Tool's Home Page</title></HEAD><BODY> --- stuff on the page </BoDy></HTML>

... as my code usually does, but it's less readable when you want to fix a problem or make changes... and you will want to.
Anyway, having said all of that, I won't bother to include all those tags (the stuff between the < and the > is a tag) in the following examples, just remember that everything goes between the <BODY> tags. BTW, the stuff between the <TITLE> tags is what appears on Netscape's Title Bar when someone is viewing your page.
If a browser doesn't recognize a tag, it should (in theory) ignore it.

Tools INTRO Basic HTML More HTML JavaScript

Basic HTML
Okay, lets get started. First you want to put some text on your page. This is easy, you simply type it in:

<BODY> This is some text. </BODY>

Boring? Yes It Is! You have to, and I insist on this, SPICE it up a bit.
Text formatting tags:
<B> <I> <U> <BIG> <SMALL> <SUP> <SUB> <S>
These tags allow you to present your text in Bold, Italic, UnderLined, Big, Small, ^SuperScript, _SubScript and ~~Strikeout~~
You can of course, mix them together:
<i><sup><u>Italic SuperScript Underlined <s>Strikeout</s></u><sup></i>
Looks like this: ^{Italic SuperScript Underlined Strikeout}
Notice how I close the tags in the reverse order that they are opened, they can actually be closed in any order, but most browsers will process the formatting faster if they are closed in this fashion.
<Hn>
Header formatted text comes in 6 sizes (6 being the smallest, which of course is not consistent with the font size tag explained below) and can be aligned left, centre or right.
Header tags must start on a new line, or it gets ignored.

<h3 align=center>Nice Paragraph Title Thingy</h3> <h2 align=left>Some Title</h2>

Nice Paragraph Title Thingy

Some Title

<BLOCKQUOTE>
All text between the <blockquote></blockquote> tags are double indented (left and right), just like this particular piece of text.
<PRE>
As I mentioned in the INTRO section, HTML ignores extra spaces and carriage returns... unless you use the <pre></pre> tags. All text between these tags is formatted exactly as typed in a mono-spaced font. You may encounter difficulty with this tag, so I suggest (it works for me) that you put the opening and closing tag all by itself on it's own line. Don't worry, it won't get lonely.
<CENTER>
This centers all text and images on the page that exist between the tags. If I have to explain it any further, may I suggest a Sesame Street book.
<BLINK>
This annoying tag speaks for itself.
<HR>
Horizontal Rule does not require a closing tag, it simply draws a line across the page. Pretty dull, let's play with it.
<hr align=right size=6 width="75%" noshade>

ALIGNMENT can be left, right or center; SIZE and WIDTH are measured in pixels, alternatively WIDTH can be expressed as a percentage of the width of the browser window.
<FONT>
This tag is used to change the font, colour and size of text. You should note that if you select a font that the user doesn't have installed... well... they aren't going to see that font, are they? Likewise, not everyone is in 1024 x 768 16-bit colour (although they really should try it)

<font face="arial">Some Stuff In Arial</font>

<font face="freakyratt, verdana, freakymandy, arial">Some sort of text</font> Like I mentioned, not everyone has the same fonts as you. You can add alternative fonts, they will see the first one in the list that they have.

<font color="#dd2216">This Where That Colour Picker Comes In</font>

<font size="3">Seven Sizes To <font size="+3">Choose From</font> (1 to 7)</font>

<font face="courier new" size="+2" color="#90125f"> You can also combine attributes</font>
Netscape has over 120 colour names that can be used instead of the hexadecimal notation, ie: "black" (#000000), "white" (#ffffff), "aqua" (#00ffff), "crimson" (dc143c), "lightblue" (#add8e6), "pink" (#ffc0cb), "papayawhip" (ffefd5) and a hell of alot more, I'm not going to type 'em all out, didn't you read? There's over 120!

<BODY>
Hey! Wait a minute, I've seen this tag before!
Yeah, well, I didn't explain it. If you go changing the colour of the text... you might want to change the background colour too, right? Of course I'm right!
<BODY BGCOLOR="#111111"> --- stuff on the page </BODY>
You can also change the default colours of the text and links and/or have a background image:
<body background="nakedbabe.jpg" text="red" link="blue" alink="white" vlink="purple"> --- stuff on the page </body>

As I mentioned before (go check if you don't believe me), the browser will ignore extra spaces and line feeds (unless you use the <PRE> tag).

<b><u>Example</u></b> This is a demonstration. A pretty quick one too.

Would look like this:
ExampleThis is a demonstration.A pretty quick one too.
To properly format it, you need the <P> (paragraph) and <BR> (line break) tags. For extra spaces you can use a space character and then   alternately like this:

<b><u>Example</u></b> <p> This is       a demonstration.<br> A pretty quick one too.<br>

Which looks like this:
Example
This is a demonstration.
A pretty quick one too.
Other special characters are < (<) which is used extensively in this document, > (>), " ("), ® (®), © (©).
If that's not enough for you, you can get a more complete list somewhere else.
Alright, now that you have all that snazzy text all over the place, you're gonna need some to go with it.
Most browsers support GIF and JPG image formats. Although JPEGs often compress to a smaller size (this saves space and transmits faster), GIFs can be animated (this is merely cool), Can you see an Animated GIF on this page? I bet you can.
Who let Mr. Rogers in here?
Anyway, to slap an image onto your webpage, just do this:

<IMG SRC="IMAGES/MY_STUPID.GIF" WIDTH=120 HEIGHT=55>

Note that <IMG> has no closing tag.
The browser can process the page faster when you specify the size (in pixels) of the image using the WIDTH and HEIGHT attributes. Netscape will size the image to whatever you specify. A quick way to find the size of an image is to drag it onto the browser, the title bar will then display it's dimensions.
You can align an image on the page by adding the ALIGN attribute (no shit?). ALIGN can = left, right, top, bottom, middle, texttop, absbottom, absmiddle or baseline. I won't bother to explain all these, just try 'em out. On my Poptarts Page, the text wraps around the Poptarts image (align=left), the animated GIF above (on this page) is align=absmiddle... wait a minute, I said I Wasn't Going To Explain Them!
Anyway, extra space (sometimes called "runaround space"... reminds me of a girl I used to know) can be created around an image with the HSPACE and VSPACE attributes. These, like the WIDTH and HEIGHT attributes, are in pixels.
If an image is used as a HYPERLINK, a border size (in pixels) can be specified, the border colour is determined by the colours set for LINK, VLINK and ALINK.
BORDER=0 means (funny enuff) no border.
There you go. That's absolutely all that you need to know. Really. I swear.
The rest of the stuff is simply how to make your pages better.

Tools INTRO Basic HTML More HTML JavaScript

More HTML
Hyperlinks & ImageMaps
Right now you want to go somewhere: Goes to the section on the BODY tag

<a href="#thebody">Goes to the section on the BODY tag</a>

How? Simple, that section has an anchor like this:

<a name="thebody"></a>

Want to go somewhere else? Another Page Of Mine

<a href="stuff/dragon.html">Another Page Of Mine</a>

Want to go to someone else's page? My Former Neighbour

<a href="http://www.geocities.com/sunsetstrip/alley/4467">My Former Neighbour</a>

Of course you can make an image a hyperlink:

<a href="stuff/dragon.html"> <img src="happy1.gif" width=22 height=22 align=absmiddle border=6> </a>

Note, you can use both text and image if you really want to.
If you use FRAMES and create a link to someone else's page, you should TARGET the hyperlink, like this:

<a href="stuff/dragon.html" target="_top">Another Page Of Mine</a>

Or you could use TARGET="_blank" to open in a new window.
Right, if you notice instead of using a whole bunch of images and anchor tags for my hyperlinks to different pages, I use ONE image. This means less files in the directory and faster page loading and less space taken and...
Shut Up And Tell Me How It's Done?
Okay, first you make the image (no shit).
Next, you stick it on the page like this:

<img src="im/poptarts_im.gif" usemap="#poptarts image map" width=419, height=68 border=0>

Then you make a map of that image like this:

<map name="poptarts image map"> <area shape=circle coords="28,33,32" href="vermin.html"> <area shape=circle coords="91,33,32" href="poptarts.html"> </map>

Pretty simple huh? You can actually put the image anywhere on the page, as many times as you wish, but you only define the map once.
The SHAPE can be RECT (or RECTANGLE), CIRC (or CIRCLE) and POLY (or POLYGON).
For SHAPE=CIRCLE, the coordinates are horizontal, vertical and radius
For SHAPE=POLYGON, the coordinates are multiple pairs indicating each vertex
What else? Uhm... e-mail links! Mail To Ratt

<a href="mailto:user@domain" title="Mail About...">Mail To Ratt</a>

You don't have to specify a title, and you can use an image if you want to

Lists & Tables
To make a list of things:

<ul> <li>First Item <li>Second Item <li>Third Item</ul>

presents you with this:

First Item
Second Item
Third Item

Optionally you can specify the type of bullets with <UL TYPE=SQUARE> (or DISC or CIRCLE). You can also specify TYPE in the line item tag <LI TYPE=SQUARE> (all subsequent items will follow that type).
Or, you can get silly:

<ol><li>Words beginning with "A" <ul> <li type=disc> Apple <li type=square> Asynchronous <li> Active </ul> <li type=a>Words beginning with "B" <ul><li> But</ul> <li type=i value=6>Words beginning with "C"<ul> <li> Child<li type=square>Chewy </ul></ol>

looks like this:
Words beginning with "A"
Apple
Asynchronous
Active
Words beginning with "B"
But

Words beginning with "C"
Child
Chewy
Notice that I have nested the UNORDERED LISTS inside an ORDERED LIST (this is not important, I just wanted you to note that). TYPE specifiers can be used in an ORDERED LIST too, <LI TYPE=A> (or a, I, i, 1), also a starting value can be specified <OL START="4"> or <LI VALUE="3">
You can also build definition lists, like this:

<dl> <dt>First Definition Term <dd>Some Stuff Or Other<dd>More Stuff <dt>Another Definition Term <dd>Even More Stuff</dl>

First Definition Term
Some Stuff Or Other
More Stuff
Another Definition Term
Even More Stuff

A very simple table

<table width="500" bgcolor="#000000" border="3"> <tr> <td>First Row, First Cell</td> <td>Second Cell</td></tr> <tr> <td>Second Row, First Cell</td> <td bgcolor="#111155" align=center>More Stuff</td> </tr></table>

First Row, First Cell Second Cell
Second Row, First Cell More Stuff

The <TABLE> tag can specify the WIDTH of the table in two ways WIDTH="300" (pixels) or WIDTH="75%" (percentage of window width). Also the BORDER size (in pixels), CELLSPACING & CELLPADDING can be specified. The <TABLE> tag can also specify BGCOLOR and BACKGROUND just like the <BODY> tag does.
Table Header tags <TH></TH> work like regular Header tags <Hn></Hn>.
The ALIGN (left, right, center), VALIGN (top, middle, bottom), WIDTH and BGCOLOR attributes can all be used within the <TR> <TD> <TH> tags.
There is actually alot more that can be done with tables, but it's alot of detail and I'm too damn lazy... (although there are ways to cheat, I'm not going to teach you... but I do it myself... that's a hint)

Frames & Forms
Okay, FRAMES are created with the <FRAMESET></FRAMESET> tags. In a FRAMES document, these REPLACE the <BODY></BODY> tags. Attributes that can be used within <FRAMESET> are BORDER (in pixels), BORDERCOLOR, COLS and ROWS. The Lair uses the following FRAME document (or at least it used to, I may have altered it slightly... I do that):

<HTML><HEAD> <TITLE>Ratt Salad's Lair</TITLE> </HEAD> <frameset rows="50,*" border="2"> <frame src="rsl2.html" marginwidth="0" scrolling="no" noresize> <frame src="vermin.html" name="Vermin"> </frameset> </HTML>

The ROWS attribute specifies how many pixels high the frames are, <FRAMESET ROWS="60,80,*"> would create 3 frames, 60 pixels, 80 pixels and how many are left (the asterisk is a good idea 'coz you have no idea what size window anybody has).
Note: If you use an asterisk, it doesn't have to go last, it could go in any frame.
All of the above applies to the COLS attribute too. SRC simply specifies the filename for an image or document to put in the frame.
The browser automatically determines the margins within a frame (by some arcane method), MARGINWIDTH and MARGINHEIGHT can be used to override the browser.
SCROLLING determines if that particular frame has scrollbars (YES), no scrollbars (NO), or the browser should figure it out (AUTO).
By default, all frames are resizable, but some people have no business resizing things. Guess what the NORESIZE flag does.
If you choose to NAME a FRAME, you can always target that frame from a hyperlink by specifying TARGET="thenameigaveit" within the anchor tag.
What else? Well... apart from the fact that you can make frames within frames (careful, it can get messy), that's about it.
I left the <FORM> tag until last. Not because FORMS are difficult, in fact they're very easy, I just can't seem to explain them without writing a screenplay, so, ladies... Click Here and take a look at a page that demonstrates all you really need to know about FORMS. I also used simple TABLES and LISTS on this page.
Guys, do not click there, Click Here instead.
Girls, feel free to fill out the application and submit it.
What? You need to know more?
The Compendium of HTML Elements
is an excellent place to start

Tools INTRO Basic HTML More HTML JavaScript

First Row, First Cell	Second Cell
Second Row, First Cell	More Stuff