American Whitewater

HTML 101 for StreamKeepers
Click here to return to the StreamKeepers' Instructions

This is intended to be a quickie tutorial on HTML, to answer the questions that some StreamKeepers have and to enable them to do some kewl stuff with their river pages. There are more extensive HTML tutorials all over the Net. Some of those references will be given at the end of this article.

Two points to keep in mind: it's easy to make small typo errors in HTML. Those errors can cause unintended, sometimes incomprehensible, results. For this reason, when you've typed some HTML into your “Gauge Description” or “Reach Description” fields, and clicked on “Update River Reach,” you should immediately check out the results by looking at the River Page that you've just edited. If you don't check the results, you might not know, for a loooong time, about the unintended consequences that you've created.
Similarly, it's easy to type a whole lot of text into your Reach Description field, and not to see it when you look at the River Page. What happened?
Unfortunately, when you edit a Reach Description, it won't be saved unless you click “Text” or “HTML” in the “Reach Description Format” area above. The default is “no changes.” It can be really frustrating to do all that typing, click on Up-date River Reach, and then realize that all of your typing got squirted out of the universe like a watermelon seed, never to be seen again. So, to make sure that your effort isn't wasted, remember to click “Text” or “HTML.” (The same considerations apply to the Gauge Description field.)

Now, let's get to your questions.

1. What is HTML?
HTML stands for HyperText Markup Language. It's the language of the Net. It's a very simple set of formatting instructions that allow all sorts of browsers (Netscape, Internet Explorer, AOL…) and various platforms (Windows, Mac, Linux…) to read the same code. It's simple for the browsers, and it's simple for you.

2. How does it work?
It works by “tags.”

3. Tags?
Yes. Tags are coded instructions set in arrow brackets <> . Whenever your browser sees <> (with something between the brackets), it says “formatting begins here. When it sees the same thing with a slash inside </>, it says “formatting ends here.”

4. Huh?
Well, for instance, if you want to make bold text, you put a B in there: Shuttle Directions: . That'll show up in the browser as Shuttle Directions:. Note: if you don't include the tag in there, then everything after shows up as bold. Usually, that's not what you want!

5. Cool. What else is there?
Two of the others are Watch out for strainers in Logdown Falls! (Watch out for strainers in Logdown Falls!) and , which denotes a line break.

6. Line break?
Yeah. It tells the browser that it's reached the end of a line. For instance, I could type:

There once was a girl from UMass,
Who had a magnificent ass.
Not rounded and pink,
As you probably think,
It was grey, had long ears, and ate grass.

If I typed it that way, browsers would read:
There once was a girl from UMass,Who had a magnificent ass.Not rounded and pink,As you probably think,It was grey, had long ears, and ate grass.

Which wouldn't be as funny, right?

7. Um, right. So how do I fix that?
I don't think you can fix the lame pun in there; that stems from a character flaw within your tutor's psyche. However, at least you can fix the formatting. Just type:

There once was a girl from UMass, 
Who had a magnificent ass. 
Not rounded and pink, 
As you probably think, 
It was grey, had long ears, and ate grass.

…and the browsers will format it as you intended it to be read.

8. Cool. So it's kind of like the “enter” key on my keyboard.
Yeah, except the “enter” key inserts a paragraph break, not a line break. The paragraph break is ; the difference between it and is kind of subtle. Don't worry about it for now. Usually, you're probably better off using .

9. Okay. Whatever. How do I link to another website?
Ah. We're getting to the good stuff. Hyperlinks.
Okay, here's one. If I want to send the reader to Tom O'Keefe's Chelan Gorge site, I might type:

Also check out the <a href=“http://rapids.americanwhitewater.org/rivers/id/3144/”>Chelan Gorge</a>.

10. What the…?
I'm glad you asked that. You do know how to ask the right questions.
The tags for a hyperlink are <a href=””> and </a>. Between the quotation marks go the URL (the “address” of the Chelan Gorge site, which must include the http: stuff, or the browsers won't read it), and between the hyperlink tags go the text that you want to show up, for the reader to click on. The above code will look like:
Also check out the Chelan Gorge.
There you go! That's a clickable link! 11. What else is out there?
There's plenty. I guess you might occasionally want to use the code for sending an email:
<a href=“mailto:RivieraRatt@aol.com”>Email me!</a> . That is, you type the email address after “mailto:.” Don't forget the quotation marks. The result reads:
Email me! 12. Anything else?
Oh, yeah. There are tables, font colors and sizes, images, lists, special characters, clickable images and clickable maps. There are frames, animated gifs, Java Script…lotsa stuff that's beyond the scope of this simple tutorial. I guess, for those, you oughta goto some of the HTML Tutorials that are out there on the Net. There must be thousands of'em! Here are a few: Basic HTML by Example
Martin's HTML Tutorial in Plain English
LearnThat.com's Introduction to HTML
HTML for Beginners \\Writing HTML
HTML 5 tutorial
John C. Gilson's HTML Tutorials You can probably find more of the same by firing up your favorite search engine and searching on html & tutorial & web & tags or something like that. Note that the above sites spend a lot of time talking about <body> </body>, <html> </html>, meta tags, titles, and other stuff that you don't need to worry about. That kind of “overhead” is already in the StreamKeeper pages, but you don't see it when you fill out the “edit reach” form. That's about it for this tutorial, campers! Have fun with this! Go wild! And if you have any other questions…you know where to find me!