A Beginner's Guide to Basic HTML Stuff

A Beginner's Guide to HTML

This is a really basic tutorial for writing very simple HTML (hypertext markup language) documents. This isn't going to tell you about how to make REALLY fancy webpages, but you can make some FAIRLY fancy webpages with what I'm giving you. Please understand that there are tons of sites and books about how to do this. So, this is really only going to scratch the surface of what's possible in terms of web page design. Personally, I found that once I got over the initial confusion about how this stuff all works, I was able to teach myself lots more just by looking around at the web-sites designed for teaching HTML. It's a great deal easier to do this than most people think.

Outline of Basic Webshop Goals & Additional Topics

SECTION ONE: The basics
Create a simple web (home) page that contains at least one example each of a:
SECTION TWO: Publishing the web page
Overview of the basic process:
SECTION THREE: Fancier Stuff
SECTION FOUR: Advanced (stuff not covered in the Webshop)
SECTION FIVE: Webshop Wrapup
- Questions & Answers
- Recommended sites

Section One: The Basics

Below is the simplest bare-bones HTML file one might create, which I've called "hello1.html" and saved for you already. (It is worth mentioning right away that some web-accounts are case-sensitive when it comes to filenames. For instance, for some computers it wouldn't make a difference if I'd named this file "HELLO1.HTML" or "Hello1.Html" etc. However, for some computers, it would make a BIG difference. So, be sure that you are VERY consistent in how you name and reference your web-files.)

The minimum information that is needed for a web page is as follows (only what you see in the bigger (yellow) box, the numbers are just for reference):

`1 2 3 4 5 6 7 8` 9	`<HTML> <HEAD> <TITLE>Appears as a header at the top of the web browser</TITLE> </HEAD> <BODY> <H1>Hello world...</H1> <P>A standard (boring) tutorial greeting page.</P> </BODY>` </HTML>
Click here to see what it looks like as a web page. Press the BACK button to return to this page when you're done.

OK, so what's the deal with all the letters and symbols?

MUST

As you can see, there seems like a lot of text needed for just a simple little page...

Line 1: The first line (element) tells your browser that the following text should be treated as HTML-coded data. Actually, the file containing the HTML code (usually) ends with a file extension .html which also indicates that the contents represents an HTML document. If your computer won't let you have a four-letter extension, you can get away without using the last letter (i.e., just use .htm).
Line 2: The second element gives you an opportunity to specify a variety of options concerning the look and polish of your web page (many of which are beyond the scope of this WebShop). Minimally, it's a good idea to title your web page (which brings us to line 3).
Line 3: The third element in this example tells the browser to take whatever text it finds between the TITLE markers and put it on top of the browser as a header. One nice thing about specifying a descriptive title is that the title is used to identify your page in search engine results. Be aware also that the title is what will show up on someone's bookmark list (should they decide to bookmark your page).
It is worth mentioning now that all tags (elements) in HTML represent commands to the browser telling it how to display (etc.) your text, pictures, effects, and so on. Although YOU might know what you want, browsers are stupid (but sloooowly getting smarter) and need to be told EXACTLY what text needs to be treated in what way. So, to do this, you must specifically tell the browser where to BEGIN doing something, and then where to STOP doing that something. Hence, you see each element repeated, except that the second occurrence begins with a slash to tell the browser to STOP doing that command HERE.
Line 4: This is an example of my telling the browser that I am finished specifying header information.
Line 5: (And line 8.) The BODY elements are usually the furthest apart because all the major contents of your web page go here between them.
Line 6: Here is some text that doesn't look all that special as it is typed. It is simply bracketed by some H1 tags. When you look at the actual web page, though, it suddenly appears bold and larger than the next line! (Also notice that the /H1 tag caused an automatic line-break.)
These H-tags are easy-to-use text formatting shortcuts that give you up to six text appearance options:
1. This is H1.
2. This is H2.
3. This is H3.
4. This is H4.
5. This is H5.
6. This is H6.
Some of the other basic character-formatting tags include:

<B>bold</B>

<U>underline</U>

<I>italics</I>

<BLINK>BLINK</BLINK>

<SUP>^super</SUP>script <SUB>_sub</SUB>script
Line 7: The regular text in your web page might look great in your text editor. That is, you've got nice paragraph spaces, you've lined up some text so that some words have wider spaces between them, etc. Well, HTML pretty much ignores your pretty spacings. In fact, notice that there's a big space between the words greeting and page but no such big space in the actual web page. HTML browsers ignore the line breaks in your text AND they ignore all but the first space encountered between words. In order for the browser to know when one line of text should be treated as a new paragraph or just more of the previous paragraph, you need to tell it where each new paragraph begins and ends. That's all that those P tags are doing.
Line 8: Here the browser is told that the main body of the web page is finished.
Line 9: Here the browser is told that the it is at the end of the HTML file.

OK, now that we've covered the bare-bones web page, how's about making it look more interesting?

Before I continue, though, I think that it might be worth it to mention a useful technique for tracking your changes while you create/edit your webpages. What you are doing in your text editor really doesn't make it easy to see what the end-product of your tooling will look like. (Although there are editors that make it very easy to see what you're doing, they tend to hide the HTML so you don't really know what's going on "underneath" it all.)

Rather than go through the trouble of uploading to the web every modification you make to your page to see how it will look, simply open your .HTML file in Netscape (or your browser of choice) and "refresh" that page whenever you save changes to that .HTML file. Once you like the way it looks, THEN upload the file to the web.

Making the background a certain color.
Making the background a certain texture.
How to mess around with font colors
Remember what I said about colors above (for backgrounds)? Well, nothing's changed with regard to text colors. Use the color-picker program, or find a website somewhere (there's tons) that specifies what the colors and codes are, and select what you want.
You have two options as to how to add color to your text:
First, you can make it a sweeping change for ALL text in your webpage by adding the following TEXT command tidbit to the BODY tag so that it looks like (notice that I've also kept the skull background):
<BODY TEXT="#33CC99" BACKGROUND="skull03.gif">
Second, you can use a tag designed to section off specific text within your webpage. This FONT tag can be used to modify text in a lot of different ways (e.g., size, color, font, etc.). So, let's say I wanted to make the word boring a vivid blue to set it apart from the rest of the red text. I'd go to line 7 and insert the FONT tags just before and immediately after that word as so:
<P>A standard (<FONT COLOR="#3300FF">boring</FONT>) tutorial greeting page.</P>
Which gives us this page!
Putting pictures on my web page
This is pretty east to do. You simply provide the command and filename in the text where you want the picture to appear. I have a photo of a strange two-headed cow. So let's use that one for this example. I'll put the picture between the two lines of text (i.e., I will add a new line (line 6b) between lines 6 and 7. Check it out!
<P><IMG SRC="2cows.jpg"></P>
A Couple more things.
- Try to keep the picture files as small as possible because large files take longer to download for people with meager internet connections. As you probably already know, it can be really frustrating to wait forever for somebody's webpage to appear because the computer is so busy downloading stupid picture files.
- You can do some interesting warping to pictures by specifying how the browser should size the picture to your screen. It defaults to whatever size the picture is, but, you can make it appear larger, smaller, or stretched by using the WIDTH and HEIGHT tags within the IMG SRC command. Check out some examples (with text showing how each was achieved)!
- You can determine the actual size of a picture (in pixels) by right-clicking the mouse when it is over the picture, then selecting the VIEW IMAGE option. Once the image is displayed by itself, you will see the dimensions reported at the very top of the Netscape browser.
Adding links to other pages
This document is pretty big. At the top is an outline containing assorted topics covered in this page. If you put the mouse over a colored topic header, you can see a change in the cursor indicating that the text is "hot" (meaning that if you left-click the mouse while over that text, something should happen). These particular "hot spots" are links to different locations in this very same document. I could have written each topic in a unique web page and then had those hot spots direct you to different pages. Instead, I figured that people might rather print this whole thing out for notes, comments and later reference. It's easier to print as one document.
On the other hand, SOME stuff (like the "hello world" pages) aren't included in this document. Instead, the hotspots (links) directing you to them are designed to take you OUT of this page and onto another.
It is likely that you would have three reasons to use such links:
1. You have so much different stuff to tell the world that it would be awkward all jammed on a single loooong page. So, you give a sort of "table of contents" with each entry representing a link to a relevent (and relatively shorter) page - like a doorway to other stuff on your website.
2. You've been surfing the web and have found so many other cool web sites that you want people who visit you to know about them. So you provide a handy link (doorway) by which they can see how cool those other sites are too.
3. You have one kickass-long page (like this very one) and you don't want people to have to read every line looking for a specific topic, so you help them out by providing a sort of internal pointer to stuff you think is relevent. This turns out to be much like how an index in the back of a textbook works. You look for relevant keywords, find the page number and go to it. Here, just like in an index, the visitor to your site is forced to abide by the publisher's judgment as to what is worth referencing. Sometimes the keywords are there, sometimes not.
For the most part, the format for creating these links is the same for all three.
You need three things:
1. The command containing the target address of interest. Or simply:
  <A HREF="http://Address of interesting webpage">
  By the way, the quotes are necessary. As for the address, you can usually just cut-and-paste that from the browser's location window.
2. Some relevant text to serve as the "hot spot" for people to click, which is added to the above command and sectioned off with the A (anchor) tag:
  <A HREF="http://Address of interesting webpage">Hey, click this text!</A>
  In the above case, all that visitors will see is the Hey, click this text! portion.
3. The target itself. If you create a link to someone's page and they take it away (delete or rename it), you get some version of that irritating and famous error message: Error 404: Not found.
For Robert Morris account holders, web related pages will most likely be located at an address that looks something like this:
http://academics.rmu.edu/~smith/
Where smith would be replaced with whatever your email username happens to be. There would also be some .HTML file at the end of that address to specify which file should be displayed. For example:
http://academics.rmu.edu/~smith/hobbies.html
That pretty much takes care of 1 & 2 above, but, what about those internal links?
Actually, a neat thing about those is that they really DON'T have to reside in the same web document as their address specifies. In other words, I could reference a specific location in this web page, or in another of my web pages. This can be handy-dandy!
The basic approach for creating the "hot spot" link is much the same as what I just showed you, only now you need to ADD a little bit of additional information to the address (i.e., where IN that web document you'd like to jump to).
In order to do this, the target document must contain a little location anchor (hidden to the visitor) at just the spot you want them to jump to.
OK, so first, the format for creating the "hot spot" link is (as I said) something like the above link-format only with the addition of the name of your location anchor in the target page. It might look something like this:
<A HREF="http://academics.rmu.edu/~smith/hobbies.html#dolls">My dolls!</A>
Second, in the document hobbies.html just before the list of dolls begins, there should be the location tag (in quotes) specified in the hot-spot link above:
<A NAME="dolls">
Now, the browser knows which file to check, and which location within that file to jump to (so you can have lots of these jump-spots, each with its own UNIQUE name).

Using lists to format your text

It can help a page to look nicer (and read more easily) if you make use of the list commands. Consider the two examples below, one uses one of the numbered-list commands, the other is just me typing in the number:

Grocery List	Things NOT to buy
Pasta (make sure it's the kind that cooks fast but doesn't get too squishy) Milk (let's splurge and get the whole milk, ok?) Low-fat cheese (Ah hell, just get whatever's on sale)	1. Chocolate cake (I really WANT some, so don't buy it or I'll eat it) 2. Potato chips (ok, well, if you HAVE to, make sure you get the big bag!) 3. M&Ms (do I really need to say why?)

Notice how the one on the left is nicely formatted whereas the one on the right has text that wraps underneath the number and is harder to see where one number (line) leaves off and the next begins... Yuch.

Using list commands, you can nicely organize information quickly. On the other hand, they can be limiting at times (you'll see, someday). In which case (when that day comes), you'll better appreciate the potential of tables.

Although there are additional variants to what I'm going to tell you, really, you can get by with using just the two basic list-types: Unnumbered Lists and Numbered Lists.

Unnumbered Lists

To make an unnumbered (bullet) list:

Begin by opening a list <UL> (for unnumbered list) tag.
For each item in your list, start with a <LI> (list item) tag followed by the item (no closing </LI> tag is needed because the browser knows to start a new line once it reads another <LI> tag).
End the list with a closing unnumbered list </UL> tag.

Here's an example (code in left box, output in right box):

<B>People I'd Like To Meet</B><P><UL> <LI>Bruce Dern <LI>Richard Feynman <LI>Clapper Inventor</UL>

People I'd Like To Meet

Bruce Dern
Richard Feynman
Clapper Inventor

There's not much flexibility in unnumbered lists, although you do get three different types of bullets. They are (in default order of depth):

Specify This:	To get this:
`<UL TYPE=DISC> <LI>The disc</UL> <UL TYPE=CIRCLE> <LI>The circle</UL> <UL TYPE=SQUARE> <LI>The square</UL>`	The disc The circle The square
Notice that each list line is indented...

Specify This:

To get this:

<UL TYPE=DISC> <LI>The disc</UL> <UL TYPE=CIRCLE> <LI>The circle</UL> <UL TYPE=SQUARE> <LI>The square</UL>

The disc

The circle

The square

Notice that each list line is indented...

Ordered (Numbered) Lists

To make an ordered list (very much like doing unnumbered lists):

Begin by opening a list <OL> (for ordered list) tag.
For each item in your list, start with a <LI> (list item) tag followed by the item (as before, no closing </LI> tag is needed because the browser knows to start a new line once it reads another <LI> tag).
End the list with a closing ordered list </OL> tag.

Here's an example (code in left box, output in right box):

<B>People I'd Like To Meet In Order Of Preference</B><OL> <LI>Richard Feynman <LI>Bruce Dern <LI>Clapper Inventor</OL>

People I'd Like To Meet In Order Of Preference

Richard Feynman
Bruce Dern
Clapper Inventor

There's a bit more flexibility in ordered lists, because you can specify what type of ordered symbol-set to use (i.e., the five you'd expect to find in an outline). For example:

Otherwise the format's the same as unnumbered lists. I hope you get the idea.
Specify:	`<OL TYPE=1>`	`<OL TYPE=A>`	`<OL TYPE=a>`	`<OL TYPE=I>`	`<OL TYPE=i>`
To Get:	First Second Third	Thought I saw The bird	One Two Three	Now I gotta Pee	Turn So you Can't see
You can specify where to begin your ordered sequence; E.g., `<OL TYPE=1 START=4>` which will use 4 (or D or d or IV or iv) to begin the next encountered `<LI>` command.

End of Section One
Go to top of page

Section Two: Publishing Your WEB Page

Once you have something that you are happy with, and would like to put it on the WEB for all to see, you'll need two things:

A computer account that serves you (i.e., that has internet access). In this case, I am assuming that you have a current, working Robert Morris email account. That's all we need to get you going. Other similar (vendor) accounts should work; as long as that account is set up for internet service (the vendor does that, not you), the chances are good that you could generalize this (the example to follow) to that server. My approach here, though, will be to use the standard Robert Morris account as my only example.
A means to transfer the files you've created from your computer to the Robert Morris server. I've given you a nice little program (WS_FTP) to do this with.

Setting up the File-Transfer-Protocol program (WS_FTP)
When you first run the WS_FTP program, you will see this basic startup screen (without the red square - that's my doing):

I've highlighted the important part of this screen you need to worry about first. So, let's just look at that a little closer: Notice the five places I've circled in blue. I'll work through them from top to bottom (left to right).
1. First, there's a circled window that has Ipswitch in it, and also notice that the NEW button is blue-highlighted. You want to create a new profile, so press that NEW button.
  Let me warn you that, ideally, you should install (copy) the WS_FTP folder to your computer's hard drive. That way, this program can SAVE your profile and you won't have to go through this every time. It's just that if you run the program directly from the CD you can't save (you cannot write to the CD).
  As soon as you press the NEW button, things change (almost all the windows blank-out).
  Now, type in something to identify the profile (I simply use RMU). If nothing happens when you type, you may need to click on that top empty window first.
2. Next, use the mouse to click on the window to the right of Host Name/Address: and then type in the following EXACTLY: academics.rmu.edu
3. Third, click on the empty window to the right of User ID: and then type in your user name (the one you'd use if you were logging on to check email).
4. Fourth, type your email-account password into the appropriate window.
5. The fifth and final step is actually optional. If you have saved the program to your hard drive, then it might be handy to click on the little box that says Save PWD. This will speed your use of the program, however, it does so at the possible security risk of making it easy for others to access areas of your account. Obviously the choice is yours. If security is a concern at all, DO NOT CLICK on that box.
  Now the window should look something like this one (of course YOUR email name would be used instead of SMITH, etc.)
Now all you have to do is hit the OK button and you should (after a moment or so) be logged into your web-account directory.
Transferring files between your computer and the server
The program will show you two windows. The one on the left should show you what is on your computer (local system). You can navigate around here to find the subdirectory and files that you would like to transfer to the Robert Morris server. The window on the right should show you what is in your Robert Morris web account (remote site). The first time there you shouldn't find any files.
In the left window, click once on the file you would like to transfer to the right window (i.e., the file you want to upload to the server). If it is an HTML file, make sure that the button labeled ASCII is filled, otherwise, make sure that the BINARY button is filled in.
Once you've selected the file(s) you want to transfer, press the right-arrow button that is centered between the local and remote windows. (The process is virtually identical going the other way.) After some churning and what-not, the program will update the window to show you what files have been added (or subtracted, should you use the delete button).
Note: To select multiple files, hold the control key down and select (click once upon) each file you want to tranfer. If you click once on a file, then hold the shift key and click on a new file either two or more locations above/below the first file, all files between the two will be automatically selected.
Some security issues
- As I noted earlier, if you set up the FTP program to automatically remember your password, that will make it possible for someone else to access the files on your account (assuming that they have somehow gained access to your computer).
- A second issue has to do with the default web page that browsers search for when they access a site. If you literally type a web address into the navigation window of any web-browser, it will take you to the html page you specified. However, what if you typed in the whole address EXCEPT for the file name? For example:
  http://academics.rmu.edu/~smith/
  The web browser will go to that location, and then first search for any file called INDEX.HTML or INDEX.HTM (there are other varients, such as DEFAULT.HTML, but these are likely to be determined by your hosting service and they would tell you). If it finds one of those files, then that file is what will be displayed. In other words, the above address would be the same as if you had typed this address:
  http://academics.rmu.edu/~smith/index.html
  If the browser CAN'T find an INDEX file, it will display a directory list of the contents of your on-line web folder. This gives people a great view of what files you have available. So obviously, if you upload sensitive files, others will have easy access to them if you do not have a main "face" page called INDEX.HTML (or INDEX.HTM).

End of Section Two
Go to top of page

Section Three: Some fancier (more advanced) stuff

If you are like most people and become addicted to making web-pages, you'll soon enough find yourself wanting to do more and more cooler things to tweak your pages. I'm not planning to tell you all that stuff here, but, I can tell you some of the basic tools you'll need to get that initial "tweak-satisfaction."

I'll provide a few links at the end of this document (that won't go bad too soon, I hope). These will send you off to relatively fertile tweaking grounds beyond what I plan to cover. My basic goals in this section, though, are to show you how irritating, yet useful, tables are when it comes to helping you manage web-content. Then, some basic web-features people quickly turn to once they've got the basic skills needed for making simple web-pages.

By the way, I should mention that when I use the term "simple web-pages" I certainly don't mean that you will be limited to creating boring pages. Rather, I mean that with these relatively simple tools, you can make just about ANY kind of web page. What I consider to be "complex web-pages" are those that use java (etc.) and so would likely require a more detailed and deeper understanding of many things (not to mention real programming skills).

Creating Tables

HTML is not very "format friendly." What you type in your text-file may end up looking NOTHING like what you thought it should look like once it appears as a web page. The care you took in counting spaces and aligning text is shot to hell once the web-browser gets its paws on it. Then, even if you do figure out how to align stuff, no doubt the screen dimensions you are using will be different from 80 percent of everyone else's, so what YOU see as nicely organized content, to them looks sort of messy (you can get a feel for this phenomenon by going to any web page and clicking on the maximize/restore button to shrink it from full page to a half-or-so page).

Without tables, web-authors are pretty much limited to using <PRE> tags, and counting spaces. (<PRE> tags tell the browser to display text exactly as it is formatted in the text file. But it isn't fun or easy to do when you have a lot of text and data to format.)

Tables are excellent tools for presenting tabular information but are VERY useful for controlling the precise layout of your webpage. For example: I try to provide students with a version of my lecture notes on-line. I thought it would be cute to use a yellow-lined "paper" background for these notes. Well, it would not be easy to try and space and align things so that the text appeared to take into account the verticle red line. Here's an example of my just ignoring the problem.

A relatively quick and easy fix is to turn the page into a two cell (column) table and hide the borders of the table. The first cell is just enough spaces to move the next cell across the red line. The second cell simply holds the text and that's it. Here's my solution to the problem. I think it looks nicer.

The basic HTML format for a table requires that it have a table tag where you can specify various parameters (e.g., borders, backgrounds, column sizes, etc.); Line tags to signal a new row and perhaps to include relevant parameters; and Cell tags that surround the contents to be placed in each cell of the table. Below (on the right half) is the barest minimum required for a table:

1) 2) 3) 4) 5)

<TABLE>
<TR>
<TD>Hello cruel world...</TD>
</TR>
</TABLE>

Which produces this for a table:

Hello cruel world...

NOW isn't that impressive?!

Actually, it seems like a lot when I could have gotten the same result had I just used a simpler line of HTML like:
<CENTER>Hello cruel world...</CENTER>

I guess one coolish thing I could do would be to show the border of the table. So, to do that, I just add a little bit to the TABLE tag in line 1:
<TABLE BORDER=8>

This produces:

Hello cruel world...

I can make the border look less "heavy" by specifying a smaller number (using zero removes the border) like 1:

Hello cruel world...

What if I wanted to add more cells? OK, I can place each word into a separate cell by using the TD tags around each word. So, this would mean changing line 3 to look like:
<TD>Hello</TD><TD>cruel</TD><TD>world...</TD>

Hello

cruel

world...

Actually, using the TD tags has nothing to do with whether the cells line up side-by-side or one atop the other. That orientation is determined by the TR tags. These table row tags indicate where rows (side-by-side) begin and end. So, had I wanted the words to stack on top of each other, I'd need to add TR tags between each word as well as the TD tags, as so:
<TD>Hello</TD></TR><TR><TD>cruel</TD></TR><TR><TD>world...</TD>

Hello

cruel

world...

(Note that the leading and ending TR tags are found on lines 2 and 4, respectively.)

The downside to tables is that you need to specify EVERYTHING so much that the code can VERY QUICKLY become very messy-looking. Try to organize as best you can; E.g., I'd probably have written the above HTML line so that each word occurred on a separate line (as below).

<TABLE BORDER=1> <TR><TD>Hello</TD></TR> <TR><TD>cruel</TD></TR> <TR><TD>world...</TD></TR> </TABLE>

OK, so let's combine the two ideas... That is, let's make a table that has three rows and three columns! On the left is the code, on the right is the resulting table.

<TABLE BORDER=1> <TR> <TD>Hello</TD><TD>cruel</TD><TD>world...</TD> </TR> <TR> <TD>cruel</TD><TD>world...</TD><TD>Hello</TD> </TR> <TR> <TD>world...</TD><TD>Hello</TD><TD>cruel</TD> </TR> </TABLE>

Hello	cruel	world...
cruel	world...	Hello
world...	Hello	cruel

OK, so that's the basics for tables. Next I'll give you a list of some variations you can try for making your tables look more complex.

Table Backgrounds
Same as with webpage backgrounds. You'd use the same formatting commands only they would go in a table tag. If you put such commands in the actual TABLE tag, then the entire table is affected. If you put it in a TR tag, then just that row is affected, and if you put the command in a TD tag, then only that cell will be affected. Below is what happens when I use our 3x3 table but add the BGCOLOR command to the 2nd TR tag with a number code for a brownish-gold background:

Hello cruel world...

cruel world... Hello

world... Hello cruel

NOW, I'm going to KEEP that line in there, but add the BACKGROUND command to the TABLE tag and add my yellow-lined notepaper picture to the back of the table:

Hello cruel world...

cruel world... Hello

world... Hello cruel

Notice that the background in the middle row is gone? Although I've specifed a background for the table, I've overridden this command with a specific background request. So the bottom line here is that if you want each cell to be different, you'll have to add a lot more HTML code to your table (a specific background command for each TD tag, or, each TR tag).

Overlapping cells

What if I wanted to add a single cell above my 3x3 that just has a title? Well, this means adding a row to the top using another TR tag, only instead of following with three TD tags we use one that "spans" all three columns. In other words, within the TD tag, we add the command COLSPAN=3, hence:

<TABLE BORDER=1> <TR> <TD COLSPAN=3>First Words</TD> </TR> <TR> <TD>Hello</TD><TD>cruel</TD><TD>world...</TD> </TR> <TR> <TD>cruel</TD><TD>world...</TD><TD>Hello</TD> </TR> <TR> <TD>world...</TD><TD>Hello</TD><TD>cruel</TD> </TR> </TABLE>

First Words
Hello	cruel	world...
cruel	world...	Hello
world...	Hello	cruel

I can use the CENTER tags to center that, and, I can add bold-tags to make it stand out a bit more, OR, I can make use of a special table-command that specifies that this cell contains a heading. To do this, I merely change the TD tag to a TH tag:

<TABLE BORDER=1> <TR> <TH COLSPAN=3>First Words</TH> </TR> <TR> <TD>Hello</TD><TD>cruel</TD><TD>world...</TD> </TR> <TR> <TD>cruel</TD><TD>world...</TD><TD>Hello</TD> </TR> <TR> <TD>world...</TD><TD>Hello</TD><TD>cruel</TD> </TR> </TABLE>

First Words
Hello	cruel	world...
cruel	world...	Hello
world...	Hello	cruel

The process works the other way too. If I wanted to have a cell that "spanned" rows instead of columns, I could add a new column to the FIRST table-row (TR) tag that represents where I'd like to start my spanning. This would mean putting in a TD tag that contains my "ROWSPAN" command. So, for example, let's say I wanted a big cell containing my skull picture to appear just to the left of my 3x3 table. Then I'd want to modify the HTML table code to add the following (I've made it bold-italic to show you what I changed):

<TABLE BORDER=1> <TR> <TH COLSPAN=3>First Words</TH> </TR> <TR> <TD ROWSPAN=3><IMG SRC="skull01.gif"></TD> <TD>Hello</TD><TD>cruel</TD><TD>world...</TD> </TR> <TR> <TD>cruel</TD><TD>world...</TD><TD>Hello</TD> </TR> <TR> <TD>world...</TD><TD>Hello</TD><TD>cruel</TD> </TR> </TABLE>

Which produces the following new table:


Hello	cruel	world...
cruel	world...	Hello
world...	Hello	cruel

Hmmm, so what happened to the "First Words" header? Why did it shift over to the left? Well, it really didn't. Because I added a new column AFTER that header row, it still thinks there are only 3 columns (that's all it's trying to span). So it spans the NEW column, plus the next two it finds. That puts it one too few. What can I do?

Depends on your sense of aesthetics. You COULD just change the COLSPAN command to span four columns, as so:


Hello	cruel	world...
cruel	world...	Hello
world...	Hello	cruel

To me, though, that still doesn't look quite right. Another approach would be to add an empty cell before the "First Words" cell (thus adding up to four in that row). To do this, we'd just change the <TH COLSPAN=3>First Words</TH> line by adding some TD tags in front of it, like so:
<TD></TD><TH COLSPAN=3>First Words</TH>

First Words
Hello	cruel	world...
cruel	world...	Hello
world...	Hello	cruel

If you want that flat patch to look like an empty cell, you'd need to put something blank in it (like a space). This can only be done by adding the CODE for a space which is  . Giving you:

First Words
Hello	cruel	world...
cruel	world...	Hello
world...	Hello	cruel

One final solution I can think of is to have the skull picture span all four rows, rather than starting with the second row. So, shifting the original command up to be inside the first TR tag, and changing the ROWSPAN=3 to ROWSPAN=4 gives us:

First Words
Hello	cruel	world...
cruel	world...	Hello
world...	Hello	cruel

Other odds and ends for tables

Below is a table that lists a few more handy tricks for formatting tables. Play around with different things, and be patient, as the codes begin to pile up in a table, it gets really easy to make a mistake (e.g., like leaving out a closing TD tag, etc.). There are other table-related commands out there (such as specifying how wide the table should be; how much of that space each column should take up, etc.), but this will have to satisfy you for now.

NOTE: Attributes defined within TH or TD tags can override an alignment command set in a TR tag. I've used the TD tag to demonstrate each of the examples below, but they should work for TR tags as well.

Example Outcome

<TD ALIGN=LEFT> Horizontal alignment
To Left.

<TD ALIGN=CENTER> Horizontal alignment
To Center.

<TD ALIGN=RIGHT> Horizontal alignment
To Right.

<TD VALIGN=TOP>
Vertical alignment to TOP.

<TD VALIGN=MIDDLE>
Vertical alignment to MIDDLE.

<TD VALIGN=BOTTOM>
Vertical alignment to BOTTOM.

Adding an email link to your page
A nice little touch on a webpage is to configure a "hot spot" that will pop open an email window with your (or someone else's?) email address already filled in for them. Basically, to do this you are making a mailto link. The format is simply:
<A HREF="mailto:smith@rmu.edu">Email me!</A>
Which gives: Email me!
Obviously, though, you'd replace "SMITH" with your own email name/address at Robert Morris (or your hotmail or AOL, etc. address).
Everyone wants counters!
Some schools provide their own simple counter-support (in which case, you'd contact the people at the help desk). Many schools who host webpages for students and staff are very security conscious, so don't allow for much flexibility when it comes to counters (among other things). I honestly don't know if Robert Morris provides web-counter support, however, it doesn't really matter because there are other people out there who WILL set you up!
My recommendation is Free Webware. Just sign up, tell them the address of the page you want the counter for, then they'll give you the appropriate lines of HTML to put in your file so that it will access the remote counter and display an updated count on your webpage. You'll need to pick out the number graphics you like, etc.
Wish I could be more helpful here, but that's it.
Creating Animated GIFS
Here's some advice. SKIP THIS SECTION!
This can be TOO much fun; TOO much of a time-vortex! You'll sit down to make a simple little animation, then, before you know it, you're doing little stick-figure cartoons... you'll take a glance at the clock and 15 hours will have ZIPPED by... gone forever! PLEASE, for the love of GOD! Stay away...

(If the above image isn't "doing" anything, then RELOAD this page.)

NOTE: Attributes defined within TH or TD tags can override an alignment command set in a TR tag. I've used the TD tag to demonstrate each of the examples below, but they should work for TR tags as well.
Example	Outcome
`<TD ALIGN=LEFT>`	Horizontal alignment To Left.
`<TD ALIGN=CENTER>`	Horizontal alignment To Center.
`<TD ALIGN=RIGHT>`	Horizontal alignment To Right.
`<TD VALIGN=TOP>`	Vertical alignment to TOP.
`<TD VALIGN=MIDDLE>`	Vertical alignment to MIDDLE.
`<TD VALIGN=BOTTOM>`	Vertical alignment to BOTTOM.

Miscellaneous Tidbits

Here are just a few "tweaks" that are worth knowing about.

Forced line breaks:
When you use the P tags to signal the end of a paragraph, you get something that looks like a double-space. This is nice for keeping paragraphs visually distinct. HOWEVER, there are times when you DON'T want to have that extra space! In which case, you can use the <BR> tag which forces a line break but doesn't add the extra (blank) space between paragraphs. For example, compare the P (left) with the BR versions of a hypothetical address:

Dr. Zachary Smith
621 West Coast Highway
San Diego, Ohio 32221-0001
Dr. Zachary Smith
621 West Coast Highway
San Diego, Ohio 32221-0001
You get the idea...
Horizontal Rules:
You've probably noticed that there are horizontal lines between my sections in this webpage. How'd I do that? Verrrrry easy. I simply used a <HR> tag. This tells the browser to draw a horizontal line the width of the browser window (default).
If you want to have the horizontal line, but don't want it to slice the WHOLE page in half, you can vary both its size (thickness) and width (percent of the page containing the line). For example: <HR SIZE=8 WIDTH="80%"> produces:

Two things, first, resize this page window, you'll see that the length of the line changes accordingly. Second, doesn't it seem off-center a bit? Well, it IS. This is because the line is sensitive to any margin changes resulting from your use of the OL or UL list tags. Each tag pushes the left margin in a bit. The "beginning point" of your horizontal rule is defined by where text would begin to be printed. So, if you have indented the text via a list command, your line will shift to the right accordingly.

Escape Sequences (character entities):

There are at least two reasons why this is important:

When you want to show a reserved character on a web page.
When you want to display a character that is not available in the plain ASCII character set on your keyboard.

Some characters that are used in HTML code are "special" in that they mean something to the web-browser. That is, they have special meaning other than what they would mean to us. So, if you ever want a person (rather than just the browser program) to see these characters, you need to tell the browser-program (e.g., Netscape) in such a way as to "trick" it into not realizing the character is special. To do this, we use what are called escape sequences.

These "secret" (and strange-looking) codes, when entered into your text document (web page) may look odd to you, but the web-browser program interprets them in such a way as to print the special character to the screen. So the final product as a web-page looks fine, but the text that makes up that document looks odd in spots (wherever those special characters are involved).

Note that it is important to enter the codes in EXACTLY as shown below. The web-browser programs are very picky about this. In fact, even using wrong-case letters will "ruin" the code (the codes are case-sensitive).

The Code:	The Result:
`<`	<
`>`	>
`&`	&

`ö or Ö`	ö or Ö
`ñ or Ñ`	ñ or Ñ
`è or È`	è or È
Use whatever letters you like to achieve each of the above three effects.
Also, you can find complete sets of codes on the web (e.g., like here).

Relative Pathnames Versus Absolute Pathnames
We've already covered how to create links in your web-pages, but, I think you deserve to know the whole truth about those pathnames to the target documents. If you have pages that are located in nearby (i.e., in YOUR account) directories, you can specify a shorter pathname (called a relative path) from your document to the linked document. So, for example, if you wanted to link to a file called "hobbies.html" that was located in the same directory as the file you are linking from, you could use:
<A HREF="hobbies.html">My hobbies</A>
Notice that this is a great deal shorter than what I'd mentioned above. We can add a bit of complexity to this... Maybe you created a sub-directory in your web-account called "personal" and you had your "hobbies.html" file located there. This would mean you could link to it using almost the same relative path as above, except that you add the directory name, as so:
<A HREF="personal/hobbies.html">My hobbies</A>
These paths or links are referred to as relative links because they represent a path for the computer to search for your file beginning with the location of the current file (i.e., where the computer looks for the path is relative to where the start-document happens to be).
Of course, you can stick with the complete path names (called absolute pathnames or links). However, relative links are more efficient. They also have the advantage of making your documents more "portable." For example, let's say you start by creating all of your web pages and dumping them right into your web-account. After about a year, you'll have a bazillion files in that one spot. You may decide to re-organize by creating subdirectories in your account (which is VERY easy to do with that ws-ftp program, by the way). Naturally, you'll be moving files around to these new locations. If you used complete pathnames everywhere, you're going to be doing a lot of modifications to all those affected files. PLUS, if you are like me, I like to "test out" my web pages on my computer first. If I've specified complete links, then every time I tried to click on a link to see if it worked right or not, my browser is going to go looking on the web for it. Using relative links to hyperlink one page to another makes it easy as pie to upload entire folders to your web server account. The pages on the server will then link to other pages on the server, and the copies on your hard drive will still point correctly to the pages stored there.
What if you were in the lower "personal" subdirectory, but wanted to use a relative path name that was in the main (or higher) directory? If you use ".." (two dots), that tells the browser to back-up one directory-level. So, from "hobbies.html" to "index.html" would look something like this:
<A HREF="../index.html">Main Page</A>
The bottom-line advice here is that it is worth your while to use relative links whenever possible because:
1. It makes life easier being able to move a group of documents to/from locations (because the relative path names will still be valid).
2. It is a more efficient means of connecting to the server (faster).
3. Less TYPING means less chance of making typos and other mistakes!
Adding Text "Behind" Images As A Backup
This is a good topic for a bunch of reasons. First of all, you should be made aware that there are people out there who cannot see, yet still surf the web. What if you get fancy on your web page and use pictures in your links to indicate what a visitor is to do. For example, in my "ENTER" picture above (for making animated GIFs), if a person couldn't see that picture, they might not know what it is for. Also, some older web browsers are designed to only display text! Heck, some people even turn off the option to load images altogether (usually if their modem or connection is particularly slow). You can easily add a few letters to your HTML code that displays images so that it will display a word/phrase instead (should the need ever arise). This requires using the ALT attribute in your image display tag. For example (note that there is NO such picture on this CD so that you can see how it will look on a web-browser that has images turned off):

<IMG SRC="smiley.gif" ALT="Smiley Face">

End of Section Three
Go to top of page

Section Four: More advanced stuff not really covered in the WEBShop

HTML Editors
I've been treating this webshop from the point of view that you are as much a control freak (or micro-manager) as am I. Some people might not want to mess with the HTML coding and so may prefer a program that lets them create a web page as it would appear on a website without ever being bothered with trying to remember special codes, link structures, etc. There are such things out there (although none have been perfect enough for me to use on a regular basis). Basically, they are referred to as "What You See Is What You Get" editors (i.e., they go by the name of WYSIWYG editors - pronounced like Whizzy-wig). You might like to try one out. They can be found as shareware versions (one of which I've included on this CD), to quite fancy and expensive commercial programs (i.e., Microsoft's Frontpage, Claris Home Page, Adobe PageMill, etc.) In fact, some word processors (like Microsoft Word) allows you to design an HTML document as you would create any page for printing. Simply use the "save as" option and specify HTML. Frankly, though, I believe you are better off knowing at least some basic HTML code so you can tweak the pages. You certainly won't appreciate such a program until you know the HTML basics (plus, your editor might not allow you to do everything you want to do, so you may end up having to tweak the file with your own code anyway).
The obvious benefits are felt by novice webpage designers. They can create a page in moments (in fact, they may already have something like a resume that they can upload to MSWord and save-as HTML for immediate use as a webpage). I would like you to take a moment, though, and compare the following two webpages. They are simple and should be familiar. They are both versions of the first webpage I showed you ("Hello world").

Webpage One Webpage Two

Don't they look identical? Well, one I hand-created (it's the simple few lines of code I put together as our first webpage example), the other I used Microsoft Word and simply "saved-as" to create an HTML document. Take a look at, and compare, the files:

Webpage One Webpage Two

Hmmm, doesn't one seem a bit more confusing and complicated than the other?
Forms (responses are emailed to you)
Forms are, without doubt, well beyond the scope of this webshop. But, here's your first opportunity to look at the webpage and HTML code to figure stuff out on your own!
Web forms let a visitor provide you with UNSECURED information. For example, suppose you wanted to collect the names and email addresses of people who might like more information about a product you are selling.
The HTML forms aren't too hard to figure out, they're similar to the HTML tags we've covered. The tough part is not messing up.
Basically, when a person completes a form, it is submitted to you as an email that you'd then have to decode into something sensible. To be fair, I should add that there are ways that you can automate this process, but, that's even beyond me.
Below is a webpage I created that contains all possible types of form questions one could use. Check out the source code ("gradechange.html"), compare it with the way it works via Netscape (or whatever browser you prefer). Don't try to submit it, though, because the "mailto" link is a dummy email account.

Universal Grade Change Form
The Dreaded (and usually loathed) Frames
Some people love 'em, some people hate 'em. Basically, with frames you are splitting one webpage into MANY webpages that send information (or not) back and forth. Can look and work very nicely on your 800x600 setup, then become CRAP on someone's 640x480 setup. If you're careful, you can make these work, however, some older browsers can't read them. (But hey, who cares about those folks nowadays, right? It's like those people who still haven't made the switch from rotary to pushbutton telephones, geesh, get with the 21st century already!)
The basic idea for this is to have a webpage file (that is never seen by anyone) to direct the browser to the correct pages to display side-by-side, one-atop-the-other, or BOTH.
The link below will take you to the simplest frames page I'm about to make. It has a left and a right side, but you can do top/bottom, or whatever. Each half has its own HTML file, but neither is the address the link sends to... the third "hidden" file tells the browser how you want to put together your framed files.

A Frames WebPage Example
Adding Java Applets to your Webpage
Gotta be honest here. I really have almost NO idea how to write Java. (I have enough of a programming background that I can usually figure out how to slightly tweak applets that are already written... but that's it!)
My only advice to you here is to check out some of the web sites at the end of this tutorial. In theory it should be easy enough to simply follow their instructions about how to insert their java into your file... in theory.
Below is an example of a java insert I've used. It allows for an interesting color modification to text you might want to put into a web page. If you check out the java source (in the file "hello6.html"), you can see all the stuff that needed to be added.

A Java Applet added to the Hello example

End of Section Four
Go to top of page

Section Five: WebShop Wrapup

Questions & Answers
This section will be devoted to questions that come up during (or following) each webshop that I do. Because none have been done yet, this section is relatively empty. Future versions of this webpage will include whatever questions I think would be helpful to you.
Recommended Sites
Below are some websites (representing probably less than 1 percent of those that are out there on the web to be found) that you may find useful. Keep in mind that not all websites last for very long (some simply move to other host sites), so many of these links will no doubt be out of date someday. Use 'em while you got 'em.
- HTML Guides:
  - HTML For Beginners
  - Composing Good HTML
  - HTML Style Guide
  - Official HTML specification
  - SGML (Standard Generalized Markup Language)
  - Sizzling HTML Stuff
  - Interactive HTML Tutorial
  - A Detailed HTML Overview
- Cascading Style Sheets (CSS):
  - An introduction to this very useful style of coding
- Editors:
  - Some HTML editors
- Color:
- Forms:
  - Interactive Forms tutorial
- Java:

End of Section Five & Tutorial
Go to top of page

`<B>`bold`</B>`
`<U>`underline`</U>`
`<I>`italics`</I>`
`<BLINK>`BLINK`</BLINK>`
`<SUP>`^super`</SUP>`script	`<SUB>`_sub`</SUB>`script

Dr. Zachary Smith 621 West Coast Highway San Diego, Ohio 32221-0001	Dr. Zachary Smith 621 West Coast Highway San Diego, Ohio 32221-0001
You get the idea...

A Beginner's Guide to HTML

Outline of Basic Webshop Goals & Additional Topics

Section One: The Basics

OK, so what's the deal with all the letters and symbols?

This is H1.

This is H2.

This is H3.

This is H4.

This is H5.

This is H6.

Section Two: Publishing Your WEB Page

Section Three: Some fancier (more advanced) stuff

Section Four: More advanced stuff not really covered in the WEBShop

Section Five: WebShop Wrapup