Webmonkey's HTML basics resource Page Now The <div> tag makes life easier for HTML jockeys Neato private video screen/glasses. The model costs extra. Cool Savings If you like coupons and free stuff, you'll like this place Webmonkey adds to the list of no free lunch, Arizona, Painted Forest, or Sedona, by explaining that there are hardly any web safe colors	Outbox Web Marketing Newsletter, Volume 1, #4 , April 2, 2001 Copyright 2001, Paul Stokstad. All rights reserved.
	WEEK FOUR, DUDE! This week's topic is: HTML 101 The Drama Club Meets The Chess Club That's really what this seems like to me. Back in the primordial ooze known as high school, somewhere along the way you made a choice. Chess, Drama, or athletics? I know some of us did all three, but in terms of real directions, one of those made you the proudest... And that's what you have evolved into now, I'll bet, i.e.- the evolutionary descendent of one of those creatures. That's right, if you were in the chess club, you evolved into a geek of some kind. If you were in the drama club, you went into marketing or teaching, and if you were an athlete, you are in all likelihood selling insurance or siding right now on the phone instead of reading this. I know there were other clubs, but I'm just going to focus on these three, since it will be the most fun, and since no one is paying me to do this, having fun becomes more important right away. I assume that you've heard of the revenge of the nerds. All I have to do in order to present and rest my case at the same time is the two words, Bill Gates. Now there's a guy who had no social life that we know of in high school, and in addition (probably) to running the 16 millimeter film projectors, had a strange attraction to small computers. Oddly, that attraction has paid off more than everyone else's fixation on the cheerleaders. So now, all the athletes in his school are (if they are lucky), seventh-level sales reps for some Microsoft subsidiary, and don't get invited to the Gates house parties. But the Drama Majors have a little more chance to meet Bill again, or even to get invited to the house, if not to the party. If you get to visit Bill's house, though, in the black brother basketball player's sense of "This is MY house," i.e.-his arena of total domination, you are not there to party, but to learn. And the learning comes in the form of HTML. Back in the ooze days, when you decided to go the Drama Club route, and eventually went on to college and studied Proust, Faust, Nietzsche, Kierkegaard, Thoreau, Sartre, Whitman, Blake, and Billy Shakespeare, the chess players grew up eating their way through COBOL, BASIC, PERL, and JAVA programs. Along the way one of them came up with the hypertext protocols that allowed linked text to empower linked information on a web of computers that evolved into what we call the Internet. This was cool for the chess geeks, and they were pumped about it, in a low-key, informative way. They sent e-mails. They traded and aggregated data. Research information was exchanged and footnotes were duly noted. Then one day the visual web was born via Mosaic, and soon marketers became interested in selling things online, and THEN, suddenly, the drama club got drafted into the game. Now, the drama club kids had been out writing, or designing, or marketing stuff. They were the ad agency people, or the entrepreneurs, or the graphic artists, doing the sales thing on paper/TV or radio. So when the web came along, they had to adjust, and get involved. Getting involved, in the beginning, simply meant designing a website, which for an ad guy, in the early days, was not a complicated task. Your client has a brochure already. They already had (you hoped) some kind of logo. All you had to do was transfer what they had been saying about themselves on paper onto a web page, hook it all together, and you were off to the bank. The only new element was the HTML. A language written of the geeks, by the geeks, and for the geeks. Hence the current meeting, years later, of the drama club and the chess club. In this meeting, the drama club is still trying to get on stage and show off it's skills. But to do so, they have to understand what amounts to PK4, "pawn-king-4," or, for the stage crew, "I'm moving my pawn to the fourth space in front of the king." That translates, in year 2001, to having to know what an opening and a closing tag are, and how to mark up ordinary English text so that a computer can read it and interpret it as web pages. So, after all this, we drama types have to learn what those computers nerds have been up to. As it turns out, its not quite as alien an activity as may have been imagined. Most of it is simple editing and logic. It can get hairy, of course, once you get into PERL and JAVASCRIPT, but there does seem to be some sense to it all. And for anyone who has worked with words, HTML turns out to be fairly straightforward. Maybe that's because HTML is to programming as checkers is to chess. A simpler world. But it's still played on the same game board, and now and then the skill sets must interact. Writing HTML, it turns out, is basically a low level editing function. Anyone who is geriatric enough to remember a word processing program called WordStar, will feel oddly at home with HTML, since WordStar required that you "mark" text that you wanted, for example, in a larger typeface, with special codes. Nowadays, everyone who uses a word-processing program is generating such code, but you never see it. That's because we have such "what-you-see-is-what-you-get" (WYSIWYG) programs as Microsoft Word, which allow you to enlarge text using selection boxes and menus rather than putting special codes on things. You never see the codes that you are writing, but you ARE writing them. That's fine when you are dealing with print, where things tend to come out just the way you like, and you aren't trying to do much. Other than writing the Great American Novel. On the web, you are doing a lot. You are communicating to millions of people, almost every one of them with a different computer/monitor/software/browser/font inventory/preferences setup/system palette to deal with. So, even though we now have WYSIWYG web design tools, they're really WYSIWYGBNEWEESOG tools, or, "what you see is what you get, but not exactly what everyone else sees or gets." In addition to all of that complexity, you are probably dealing with some kind of database integration. Maybe you are trying to create a form to ask for someone's e-mail. Maybe you are trying to add the code to import someone's logo so that you can use their free service (see my movie survey or my hit counter). Maybe you'd like to pop in some meta-tags to make the search engines work right. In all likelihood you are going to "borrow" someone's code to do that. I'm fine with that. On the web, there is little concern for using other people's HTML code. It happens all the time, and it's not considered a problem. One reason for this is that HTML code that WORKS is like gold. You know that it at least is working for someone. The other reason is that HTML is written based on standards, which means that the user that you are borrowing from is only using an existing standard that he/she copied anyway. If you are adept, you may be able to find the standards documents. If not, you can just copy the copiers. That may get you in trouble in some cases, but for low level functions, such as writing a hypertext link, importing a graphic, or creating a headline, you are probably fairly safe. The point here is that you may have a WYSIWYG website editing tool such as Microsoft Front Page 2000, or Dreamweaver, but if you don't have a rudimentary sense of how to function in the pristine world of pure HTML, you are really crippled, in some cases, since there are so many simple tasks and web tools that open to you if you can just play doctor with HTML. Playing doctor means seeing the web pages with their clothes off. What you see then is that HTML doesn't need a doctor, it needs an editor. So, after all this, I'm actually going to give you a basic introduction to what you need to know to get started in pure HTML code. I'm not going to give you a full tutorial, but I will, right now, save you what could become hundreds of dollars by telling you not to buy that HTML book. That's right, don't buy any HTML books for now, because it's all described for free on the web. If you really want to learn HTML, just go to Web Monkey and check out their tutorial. It's free, and it's all there, including reviews of WYSIWYG HTML tools, lists of tags, special characters, plus a wealth of material on web graphics and all the Javascript and CGI Scripting information you ever wanted (and WAAAAY more). What I'm going to tell you is enough to get you started, so that you at least will have the overview and a sense of the simple logic of this new language that you are looking at, so that as you learn more you at least have a framework on which to hang it. So, after the longest introduction in the history of any language, is what you came here for: HTML, as we said, the special geek-speak of hypertext markup language, does exactly what its name says that it does: It puts "markings" on strings of text, so that the text can be used by computers to do things such as create links between one group of text statements and another. The "hypertext link" is simply a link from one set of text to another. That is the primordial cool thing about the web, the fact that you can be reading one thing, and click on something, and another, possibly related thing shows up. So, you are going to need to know how to do that. We're getting there. In order for a computer to know that you are telling it to read an HTML page, you have to speak to it very simply. First of all, you open up a program, called a web browser, which, among other things, has the capability of reading an HTML page. Then you present, to the browser, in a document, a string of letters alerting it to the fact that you are giving it a web page. You say the following: <html> That tells the computer that an html page is coming. After that, the computer keeps reading everything that you say as if it is a web page, until you tell it to stop by saying: </html> That's the basic principle of most of the world of HTML. It doesn't tell you how to make a hypertext link. It doesn't cover the exceptions (there are a few). But it does show you how 95% of this "markup" language works. HTML encloses text in tags. The text has an opening tag before the text and a closing tag after the text. Magically, anything in the brackets "<" and ">" is considered as if it was some kind of stage direction, and it never is directly "spoken" on the stage of the web page (note drama major analogy). Oh, it gets more complicated quickly, but if you just get this one point, the whole mystique of HTML is quickly reduced to basic editing, and you will soon be writing your own raw code, and tweaking or even trouble-shooting your own pages. Here's a bit more detail, now that we have simplified the topic to the barest bone. Other tags do things like create headlines, like the "H" tag. It's not enough, however, to simply say <h> Make it Big</h> You have to specify which size of headline you want. So, you say <h1> Make it Big</h1> which looks like this on an HTML page: Make it Big The nice thing about the "H" tag, in all of it's sizes, is that it was never intended to just indicate size, it was also supposed to indicate structural importance, as in an outline of a document, where the largest text would be the largest categories, the next largest the sub-categories, and so on down the list of sizes. That makes total sense in a World Wide Web (the www in your web page address) which evolved from a text-based medium into a graphically enhanced world. People were hoping that web pages could be organized, archived and searched based on outline-like headings. In other words, I was supposed to be able to check out what your site was about on a search engine, and if I liked what I saw, view all of the headlines tagged with <h1>'s and then view both the <h1>'s and <h2>'s if I wanted more information, and maybe even look at the the whole site if I got really interested. Well, it must be obvious that there are only a tiny percentage of sites that are coded that way anymore. But there are some. And sites for the blind do best if they have almost exactly that sort of coding. Moving on, you will need <p> tags to start and </p> tags to end each paragraph. Those tags put in an automatic line break between lines, just as you saw between this sentence and the last. But what if you don't want line breaks to leave a white space? What if your WYSIWYG web tool (e.g. - Claris Home Page, the retro HTML tool I am writing this with) is infamous for adding line breaks to everything, and your haiku: She left forever. The thought of her perfect lips however, didn't. becomes the spaced out: She left forever. The thought of her perfect lips however, didn't. In that case, you need the trusty little workhorse, the "BR" tag, or <br> This is an exception to the HTML tag tendency to "enclose" something with a beginning and ending tag. There's really nothing to enclose. There's no text to mark, so the exceptional tag says: Make a single line break, like a single carriage return on a typewriter. You may not think this is of much significance, but knowing this trick enables you to tweak the extra lines out of many a web page that is acting weird, adding extra spaces where you really don't want them. There are many other tags, of course, and special characters to show unusual text characters such as ampersands and scientific symbols. There are even tags so that I can show tags to you. For example, if I show you the following code, which if imported into a document of it's own and fed to a web browser will display the simplest possible web page: <html> <head> <title> simple page </title> <body> Simple Page! <body> <html> I am actually using this code (below) to create the SAMPLE code so that you can see it here on the page (above) and your web browser doesn't get all confused. <P>&lt;html&gt; <br>&lt;head&gt; <br>&lt;title&gt; <br>simple page <br>&lt;/title&gt; <br>&lt;body&gt; <br>Simple Page! <br>&lt;body&gt; <br>&lt;html&gt;</P> As you can see above, in addition to my <br> tags, there are special characters in HTML to display IN THE BROWSER items like the left and right brackets of HTML tags. To show you a left bracket, I really have to use the tag: &lt; and to show you a right bracket, I have to use: &gt; If you want to have some real HTML fun, which may sound oxymoronic, (but it does happen) you simply go up to your web browser and look around for the menu item which allows you to view the source code for whatever web page you are viewing at any given time. You will note, somewhere on the page, most of the tags that I have mentioned. There will always be a beginning and ending <html> tag. There will probably be <h1> tags and <p> tags galore, and, here and there, the occasional <br> tag. You will see a lot of things that you don't recognize. It may all be a mystery at first, but if you keep learning, you will eventually start to see patterns, and the basic understanding that you have gained here will take you a long way. Just long enough to know that at some point you are no longer dabbling in HTML, you are learning computer programming. At that point, do the sensible thing and hire a programmer. Just because you are meeting the chess club again after all these years, doesn't mean you have to be a pawn in their game. Your comments? (in English, please.. No HTML necessary) Paul Johan Stokstad April 2, 2001 Next Week: Site Promotion, Abstract and Concrete