The ELT Two Cents Cafe
pennies
So ya wanna build a homepage, but you're thinking you need a degree in HTML and years of computer programming experience to do it? Relax! It's as easy as slapping Post-It notes on your refrigerator door!

Everybody you know has a homepage. Now you have some document which you want the whole world to see, complete with nifty pictures, cool fonts, and lots of other creative widgets and dingbats... you want to see it posted on the World Wide Web, and you want it there now so ya gotta learn HTML in a hurry..

No problem. Let's say your document is about the exchange rate between the U.S. and Taiwan. You have it all typed out on a piece of paper, something like this:

The exchange rate between Taiwan and America has been quite unkind recently to those who wish to convert NT dollars into U.S. dollars. In fact, the same is true throughout Asia these days... SO you can expect to make about $400 NT per hour (before taxes) in a cram school, which if you use a 33/1 ratio is about $12.12 U.S. per hour...
[further brilliant insights snipped]...

You look at your paper, and you look at other people's webpages. How do you change what you have (plain document) into what they have (visual extravaganza)? You wish you could just stuff the page you've written into a slot in your computer labeled "FEED ME" and a webpage would magically pop out. Well, it's not quite that easy. The computer doesn't know how you want the page to look. Do you want the word "unkind" to be underlined? Maybe you want the words "$400 NT per hour" to be BOLD. The computer doesn't know these things, so you have to find a way to send it a message -- a note -- to tell it exactly what you have in mind. Post-It notes are kinda big to paste all over one page -- hey -- how about putting little tags on the page whenever you have something to tell the computer?

Have you ever seen a stockboy running around the supermarket with a tag gun, putting little price stickers on every single can of tuna and package of crackers? Using HTML is a lot like that (but much more interesting). The tags that HTML uses send messages to your computer are inside slanted brackets. To let your computer know you want something printed in bold, you'd have to put one tag at the place where the bold type should begin (an opening tag), and another at the place where it should end (a closing tag). It might look something like this:

...you can expect to make about bracketed tag like this <b> tells the browser to bold the following $400 NT per hourclosing tag </b> means stop using bold type, please (before taxes) in a...
That doesn't look too hard, does it? The only problem now is making those tags just a little smaller... HTML has a set of pre-defined tags for you to use. The one that means bold is simply a "B" or a "b" (upper case or lower case; doesn't matter) inside slanted brackets. Another way that HTML makes the tags shorter and more consistent is the use of a slash, like this "/" to mean that this particular tag is a closing tag. Using our new notation, your Taiwan exchange rate document would have something like this on it:...you can expect to make about &lt;B&gt;$400 NT per hour&lt;/b&gt; (before taxes) in a... This is the basic process of writing HTML code... and you've already seen it being done thousands of times in your life by supermarket stockboys!

OK, let's use what we have to move on. What tags do you need to know? There are many tags, and the tags can have many different kinds of extra info called "attributes" on them.. but you can do 80% of the work necessary for making a webpage by using only 20% of the total number of tags and attributes that are possible in HTML. And you thought you were gonna have to memorize all of 'em! Well, in time you may very well do that, but let's begin at the beginning. Every HTML document should include these tags at the VERY LEAST:

&lt;HTML&gt; &lt;HEAD&gt; ...here you put some info which can't be seen, but helps people find your page &lt;/head&gt; &lt;BODY&gt; ...here you put the document you want everyone to see &lt;/body&gt; &lt;/html&gt;
As you have guessed, the tags that say "HTML" and "/HTML" tell your computer (or more specifically, your browser, such as Netscape Navigator or Microsoft Internet Explorer) that the document it is looking at is one that will contain HTML tags. there are two basic sections to the HTML document. the first is the HEAD section, which includes info about who wrote the document (you, of course!), what kind of info is on the document, what topics the document discusses, etc. This info isn't visible to people looking at your page, but very certainly is visible to the search engines (like Yahoo! or HotBot or Infoseek) which people use to help them find pages by a certain author or (much more commonly) about a certain topic. We'll talk more about the HEAD section in a later tutorial... The section that is splashed upon your webpage for all the world to see is the BODY section. That's where your Taiwan/ U.S. exchange rate document will go.

That's the most basic idea of HTML. We'll learn several tags as we go through these tutorials together -- but hey, let's jump right to one of the sexiest ones.. the one that lets you put pictures on your page...


Copyright (c) 2004 Timothy M. Nall. All rights reserved.
OOO