From cheshire@2600.com Sun May 11 15:30:09 1997 Date: Sun, 11 May 1997 15:29:36 -0400 (GMT) <= Note the date From: The Cheshire Catalyst To: Vicky Winslow Subject: H T M L Tutorial = NOTE: When written in 1997, it was "good form" to put HTML Tags in UPPER CASE. It is now considered "good practise" (in fact, part of the Specification) to put tags in lower case. = END NOTE Hi Vick, This letter refers to http://CheshireCatalyst.Com/tutorial You can print this page, then read it and look at the page listed above at the same time. Here's a quick, bare-bones tutorial on H T M L, the Hyper Text Mark-up Language. (this was written for a blind friend of mine, so some things may be spelled "funny" so that a Speech synthesizer will pronounce them the way I want them spoken.) You open a page by declaring that the page IS "h t m l", then the header information, and the Title of the page. Believe it or not, the Title is very important. Many older browsers only offer the title as the name of a Bookmark. Also, many web search engines will give more weight to the words in the title, than what's in the document. Then you close out the header, and go on to the body. One of the ONLY things I do to make things easier for the "graphics" people, is that I make the background color White (the default grey looks really funky). It looks like this: New Users HTML Tutorial Now that you're in the Body of the document, you need a Headline - not necessarily the title you've put at the top! A Page Title needs to be informative, but short since it may become the Bookmark. You can put the web browser in a Headline mode by using the

through

tags. H 1 is the largest headline Font available, H 6 is the smallest. Here's our example of the headline:

New Users
Hyper Text Mark-up
Language Tutorial

Hyper-text Clues for Newbies

Notice that I used the initials of H T M L in the Title, but used the full words in the Headline. This is to give Newbies a Clue as to what the initials might mean. No, I DON'T expect them to know coming into this tutorial. Remember, someone may have just clicked onto your website because they DIDN'T know about your subject, and wanted more info. Why do YOU click on hyperlinks? H T M L "Tags" are those things within the angle-brackets. The Center tag means that the text will be placed in the center of the page, and not start at the left edge, as most text does. You've probably noticed by now that you end a hyperlinked area by typing the tag again, but with a "/" character after the Less Than sign, and before the word. Things between the starting tag, and the closing tag will be affected by the hyper-tag. One exception to this rule is the
tag, which provides a "line BReak". It puts a carriage return where YOU want it, and breaks up long lines of centered text into more visually pleasing lines (did I say that?). Of course, your speech synthesizer may not care. Closing Headline tags perform the function of not only ending a type of Hypertext activity, but also provide an "end of line" indication. In other words, you can't have two headline sizes on the same line. Any other time you want to have something start on another line, you must inform the browser by ending a line with the
(break) tag, or the

(paragraph) tag. After the headlines, I like to have something that tells the user who's page it is, and have it hyperlink to an e-mail tag. Tradition (there are no rules to Web Mastering, but there ARE traditions) state that there will be an "address block" at the end of a page with all the snail-mail and e-mail info. I just like to let people get to this stuff early. Example:

Your Tutor: Richard Cheshire


cheshire@2600.com
Well, I'm centering again. The H 3 headlining informs you who your tutor is, and then we open our first Hyperlink. The "<" character is called "Less Than", for the mathematical symbol it is used as. The letter "A" is an "Anchor" (hey, I just report 'em. I wasn't at the Standards Meetings where this stuff got thrashed out, but I'll bet it was a hum-dinger of a floor fight). It is the tag openning that "anchors" the hyper-link we are about to establish. "HREF" is the Tag that give the browser the next place to look if this hyper link is clicked. It gives the World Wide Web address of the location of the page you'd want to go to if this is clicked. The address itself is a "quoted string", as we programmers say. After all, it's a "string of characters" within quote marks, and programmers don't like to be too creative. Following the closing quote is the "Greater Than" symbol ">" which means, "We've ended the Hyper Reference, and now we begin the highlighted text of the Hyperlink". Next, I've put in My Name (as the Tutor) so that users will be able to get to my personal Home Page. Following my name is the closing tag , which is the "End Anchor" sequence. Next is the "Mail To" tag of my e-mail address. Now here's an interesting bit of Hypertext Trivia. Do you include your e-mail address as part of your "Signature Block" when you e-mail friends? Put the following string of characters in front of your e-mail address (without the quote marks): "mailto:" "mailto:" is part of a complete URL (Universal Resource Locator). Many e-mail packages will identify URL headers in e-mail, and highlight them for e-mail users to just "click & go". People I've e-mailed who could never find the "Reply" button (yes, I know some EXTREMELY clueless people), have been able to e-mail me back by clicking on "mailto:cheshire@2600.com" in my Signature Block. So here in our Tutorial Document, I put in a hyperlink to my e-mail address, and then type in the e-mail address to show up in the text of the page. It may look funny in editing, but looks fine in practise. I'm putting a reference to this letter here, in case someone comes to the Tutorial Web Page instead of this letter. The and tags are for Italic text and are used for EMPHESIS. Next, I want to put in a list of Web Pages with useful information. I got this list by bringing up the Lynx non-graphic web browser, and hitting the "H" help command. To place it in our document, we start with the