HTML is the computer language at the heart of the World Wide Web. Anything you wanna put up on the web, from your doctoral thesis on quantum electrodynamics to a shrine devoted to your aluminum foil fetish, will be constructed using HTML instructions. So if you ever want to make your own web page (or hack into someone else's . . . not that we're advocating that . . .), you must first learn how to "speak" in HTML. Let us warn you though, that this SYW is a little heavy in techno-speak. So read slow-ly and care-f-u-l-l-y, as if you were reading it aloud to Strom Thurmond.

An HTML document is a file that contains two things: 1) instructions written in HTML, and 2) the content you want to be displayed in a visitor's browser. The instructions are read by a web browser (such as Netscape Navigator or Internet Explorer) and let the browser know how to display your content. The content is what you want to display or incorporate into your Web page, including text, graphics, and other types of media. By the way, HTML stands for "goat pudding." No. Actually, it stands for "hypertext markup language." (Aren't you glad we cleared that up? We'll come back to this definition later.)

If you don't believe us that an HTML document provides the underlying infrastructure for every one of your favorite web pages (like this one, for instance) you can see for yourself. Check this out:

If you are using Netscape Navigator:

Select Document Source in the View menu to display the underlying HTML code (also called source code) of the web page in your browser.

If you are using Microsoft Internet Explorer:

Select Source in the View menu to display the underlying HTML code.

The lines of code you'll see may not mean much to you now, but by the time you finish reading this SYW, you should have a general idea of how an HTML document is constructed. So read on to become the respectable geek.


HTML tags

The basic element of HTML is the "tag." An HTML tag is simply a formatting instruction or label surrounded by two angle brackets: <TAG>. Most tags come in pairs, with only a few exceptions. This means that once you use a tag to tell a browser to format your content in a particular way, you'll have to use an end tag to let the browser know when you're done using that format. An end or closing tag looks like this: </TAG>. Notice the slash before the instruction term--this tells the browser, "Stop doing whatever we just told you to do." Remember: you must use HTML tags to format your text. Web browsers only understand formatting instructions when they're written in HTML. For instance, they will only make text bold if you use the <B> </B> tags. Any formatting that you do to your content directly (like putting text in boldface) will not show up in a Web browser. Your instructions will be ignored even if you scream at your computer and threaten to throw it out the window when your desired formatting does not appear.

HTML tags are not case sensitive, which means it doesn't matter whether you use lower or upper case letters within each tag. It's often a good idea to use all caps, however, to make the tags stand out from the content of the page when you're reading over the code, at least when you're getting started. We'll be using this convention in our examples. We'll also be using quotation marks around all file names in our code. A file name is the name of something that you already have saved on your computer, like a picture you want to use. Using quotation marks around file names is not always necessary in the latest versions of HTML, but it is still the convention for setting file names apart from other text and code.

The structure of an HTML document

The first thing an HTML document has to do is tell your browser that it's an HTML document. You enable it to do this by adding a tag containing (surprisingly enough) the initials "HTML": <HTML>. At the end of your document you must, of course, add the closing tag, </HTML>, to let the browser return to whatever it was doing before you started bothering it.

You'll probably want to add a header to your code. A header is the top portion of an HTML document. Items that are placed in the header will appear when someone examines your HTML source code, but will not show up in a browser. The header is therefore where you?ll put information about when you wrote the code, and anything special someone trying to decipher the code might want to know. The header begins with the tag <HEAD> and ends with </HEAD>. It is not necessary to include any information in the header at all, but it's a good idea to at least include a title for your document in the header. The title begins with the tag <TITLE> and ends with </TITLE>. The title function will put your title in the bar at the top of a visitor's browser, as well as providing a file name (s)he can store in his/her browser's Bookmark listings. The title of this particular web page reads "SoYouWanna learn the basics of HTML?" -- see it at the top of your browser? Once you've set up your header, you'll be ready to incorporate your text, images, and other items into the document. These will be placed within the body of the document, which will begin with the tag <BODY> and end with </BODY>.