design your own web page?register a trademark?buy a camera?buy a cell phone?buy a DVD player?

SOYOUWANNA LEARN THE BASICS OF HTML?

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.

1. LEARN WHAT HTML DOCUMENTS ARE MADE OF

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 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>.

2. LEARN A FEW FORMATTING TAGS AND THEIR FUNCTIONS

Headings

HTML has a special function for headings (not to be confused with the header), so that they'll always be the same size in relation to the main text, and relative to each other, regardless of how the viewer has his or her browser set up. You'll want to use a heading at the top of your page, and smaller ones to begin each new section of the page. Headings come in six sizes, with Heading 1 being the largest.

(Heading 1 is in a 24-point font, compared to normal text, which is in a 12-point font. Heading 4 is also in 12-point, and 5 and 6 are even smaller. In case you're interested.) The tag for Heading 1 is <H1>, with a closing tag of </H1>. For Heading 2, the opening and closing tags are <H2> and </H2>. We leave it to the reader's vivid imagination what the tags for the remaining heading sizes are. The SYW female staffers have insisted we tell you that they LOVE big headings, no matter what you may have heard to the contrary.

Creating lists in HTML

In order to recount your professional activities, educational achievements, or recent criminal record, you will want to create a list. Each list, ordered (numbered) or unordered (not numbered), begins with a tag that identifies the type of list: <OL> for an ordered list and <UL> for an unordered (disordered?) one. An unordered list tag will add bullets instead of numbers in front of each item.

The <LI> tag denotes the beginning of each new list item. List item tags are closed by the introduction of a new list item, or by a tag ending the list, either </OL> or </UL> depending on the type of list.

Lists may be nested within one another as well, by creating a second list inside the first list?s opening and closing tags. Remember that with nested lists, however, you must be sure to close every list that you open.

Here is an example of the code for an ordered list, with an unordered list nested inside it:

. . .
<OL>

<LI>This is the first item in an ordered list.
<LI>This is the next.
<LI>The third item is itself the head of a list:
<UL>
<LI>First item in the nested list
<LI>Note that this is an unordered list; be sure to end both lists!
</UL>

</OL> . . .

When adding nested lists to your code, it's a good idea to indent the items on the inside list (as we did in our example above), so the code will be easier to read later. The document will look like this in a browser (assuming you've included the other essential parts):

This is the first item in an ordered list.
This is the next.
The third item is itself the head of a list:

First item in the nested list
Note that this is an unordered list; be sure to end both lists!

Other useful formatting tags

The paragraph tag allows you to separate your document into paragraphs, with double spaces between them. This can be particularly useful when adding tables or graphics, since it tells the browser to move further down the page and begin a new section. It's a good idea to begin each new section of code with the tag, even if that section contains only a list, table or graphic. The tag does not require a closing tag, since the next will end your paragraph when it begins a new one. It won't hurt anything if you do add one, however.

This tag creates a line break, to enable you to control
where each line ends
rather than relying upon the wraparound feature of most browsers.
(Useful for formatting
your embarrassing efforts
at composing
contemporary poetry.)

Makes your text bold-faced.

Puts your text in italics.

<CENTER> </CENTER> Centers your text or image.

<HR> Creates a horizontal rule (a line) on the page. Since there are no actual "pages" in cyberspace, this can be a handy way to divide up information.

3. ADD IMAGES TO KEEP VISITORS AWAKE

In some ways, text is an ideal medium for the Web because it downloads quickly. But the odds are your visitors will want something to look at. "Eyeballs" are, after all, what the Web is all about. To add an image to your Web page, you'll have to provide the browser with the location of an image file. There are many types of image files on the Web, but two of the most common are GIF files, which end in .gif and are pronounced "giff" or "jiff" (depending on your pronunciation proclivities), and JPEG files, ending in .jpg and pronounced "jay-peg" (never "j'p'g," except in nations without vowels). Note: make sure that whenever you use text or images from the Web, you follow the guidelines for use posted by the Web site's creator.

The <IMG SRC=" . . . "> tag tells the browser what the image source is, letting it know what file to retrieve. When you're constructing a Web page, it's often easiest to keep the images in the same directory as your HTML document. For example, if you had an image file in your directory called "image.gif," then to insert it into your Web page you would include the line:

<IMG SRC="image.gif">

If the image you want to display is in another directory, the process is only slightly more complicated. You'll have to tell the browser exactly what directory the image is stored in. For example, assume "image.gif" is not in the directory containing your HTML document, but is instead in another directory, right next to it on the desktop, called "graphics." In order for the browser to find the file, you will have to add the name of the directory where "image.gif" is located:

<IMG SRC = "graphics/image.gif">

By using this format you can direct the browser to an image in almost any directory, even one that's located on another server. In general, however, your life will be much easier if you either 1) store your images in the same file as your HTML document. This may be best for small, simple sites; or 2) store all your graphics in a single directory, with a name like "graphics," that's easy to locate and add to the path name in the tag. This method is common with larger, more complex sites, and where a designer wants to reuse a graphic in multiple pages on a site.

4. ADD SOME HYPERLINKS

One of the most powerful features of HTML is the link, also called a hyperlink, which allows you to move with ease with from one document to another or to load movies, pictures, sounds, and programs. (Text and other content connected by hyperlinks is called "hypertext," and when we add tags to regular text, we're marking it up. "Hypertext Markup Language." Get it? No? Then it's more goat pudding for you until you figure it out.) A link provides the browser with the location of a file, as well as the method your computer needs to use to retrieve it. The link can be accessed by means of a symbol, either a section of text or a picture that a visitor can see and select on a Web page.

You can use the name of an HTML document, an image file, a sound file or a movie file -- such as a QuickTime or MPEG file -- as your linking destination. The visitor's browser will transfer the file to his/her computer and, if necessary, start up the helper application appropriate for using the file. The code to create a link has this format:

<A HREF =" . . .">[Text or image that will serve as the link on the page]</A>.

"HREF" stands for hypertext reference. (We'll get to what the "A" stands for in a minute.) It basically tells your browser, "Check this out." For example, say you add to your document the line:

<A HREF ="https://soyouwanna.net">Click here.</A>.

The Web address or URL "https://soyouwanna.net" is the target or destination of the link. (URL stands for "uniform resource locator," and refers to a document's location or address on the Web). The target is what we're telling the browser to go check out. The text between the tags "<A HREF="https://soyouwanna.net"> and "</A>" is the link text. In this case the link text is the phrase, "Click here." It's what a visitor will click on to access another document through the hyperlink you've set up. The visitor will only see the link text.

For example, when your document appears in the visitor's browser, the link text, "Click here." will appear on the page (underlined and in light blue). When the visitor does so, the browser will transfer him/her to the target location described by the hypertext reference, in this case our favorite Web site for the latest in entertaining how-to articles.

You can also link to an image. When a visitor clicks on your link, the browser will go looking for the target image. When it finds it, the image will appear in the browser window by itself. For example, assume that we still have our image file called "image.gif" stored in our current directory. Say you want to link to this image from your Web page, so that it will be displayed in the browser window by itself rather than on your page. You will type the following into your HTML document:

<A HREF="image.gif">Click here to check out my image.</A>.

When your page is viewed through a browser, the line will appear like this:

Click here to check out my image.

When the visitor clicks on the link text, the browser will transfer him/her from your Web page to the image file that is stored in your directory. Note: if the image is stored in a different directory from your HTML document, you will have to tell the browser the location of the other directory, just as in the last (IMG SRC=" . . . ") example:

<A HREF="graphics/image.gif"> . . .

You'll notice that in our link to "https://soyouwanna.net" we've put an entire URL inside the "<A HREF . . .>" tag. This is called an absolute link. The browser will go out looking for this link target on the Internet.

On the other hand, if we wanted to link from our first document to a second one in the same directory, we would not have to send the browser out looking for another Web server, but instead we could just send it directly to the neighboring document. This is called a relative link, because it sends the browser looking for the document only in relation to the document it's linking from:

<A HREF="document-two.html">Check out my second document.</A>

You won't need to understand the difference between absolute and relative links right now, but it will become important when you're uploading multiple pages linked together. (You may have noticed that the links we've made to images above are also relative links. You're such a smarty-pants.)

Links don't have to be textual. You can use an image for a link, too, by placing an image tag, instead of text, in between the matched tags for hyperlinking:

<A HREF = "https://soyouwanna.net"> <IMG SRC= "image.gif"> </A>

The image will appear normal in the browser window, but when the user clicks on it, it will take him or her to the link target.

Links to other parts of the current page: anchors

You can also add links to different parts of the current document, such as separate sections, a table of contents, or the top of the page. To do this, you need to set up special destination points within the document, which are called anchors. This is done using the <A NAME> and </A> tags. (The "A" stands for "anchor.") What we are doing with these tags is creating and naming an anchor. Once you've set up some anchors, you'll be able to add links to them by using the "#" character. As an example, we'll set up an anchor point called "sample" on our Web page, using the following line of code:

This is the <A NAME = "sample">practice anchor.</A>

The anchor itself will not appear in the browser:

This is the practice anchor.

However, the browser will recognize that an anchor called "sample" has been located at the phrase practice anchor. This anchor will serve as our link target. We can now set up a link that will take us to the anchor that we have named "sample." In this case, this link will take us to the words practice anchor, since this is where we've established the anchor, by locating it between the <A NAME> and </A> symbols. Here's the line that will link to our anchor:

Now a <A HREF = "#sample">link</A> to that anchor.

This line will appear in the browser as:

Now a link to that anchor.

You may notice that a link to an anchor, when viewed through a browser, looks just like a regular link. But within the code of our HTML document we use the "#" symbol as a sort of "go-to" instruction. When a user clicks on our link, in this case the word link, the browser will transfer them to the link target, the point on the page where we established our "sample" anchor.

It's also possible to create an anchor on one page, and then link to it from another one. To link to an anchor in another document, you simply add the "go-to" instruction and anchor name to the end of the filename. For example, if we wanted to link from our current page to an anchor called "sample" on a second Web page, called "document-two.html," it would look something like this:

This <A HREF="document-two.html#sample">link</A> goes to another page.

In the browser, the line will appear like this:

This link goes to another page.

When a visitor clicks on the link, it will take him or her from the current document to the link target, the spot on "document-two.html," and to precisely the spot where the anchor called "sample" has been established.

Contact Information

You can create a hyperlink to your email address, so people who are accessing your home page can contact you directly to tell you how much they hate it (and/or you). The tag for an email link looks like this:

<A HREF="mailto:[email protected]">Your Name Here</A>

In the browser, it will look like a regular link: Your Name Here. When a user clicks on this link, his/her browser will activate his/her default email application, and open a new, blank message. The message will already be addressed to you, and the user will only have to fill in his/her message and hit the "send" icon or command.

5. CHANGE THE COLOR OF YOUR TEXT AND BACKGROUND

It's relatively simple to change the colors of your text, backgrounds and links. It's not so easy, however, to ensure that your visitors are not faced with a page that provokes, at best, incomprehension, or, at worst, grand mal seizures.

We've included as examples the codes for the default color of each of these page features -- background, text, etc. The tag to change the color of your page background has the following format: <BODY BGCOLOR="#FFFFFF">. The default background is white. The tag to change the color of your text is formatted as: <TEXT="#000000">. The default text color is black. This will all make sense when you look at the color chart below.

The tag to change the color of your links is <LINK="#0000FF">. Since the default color for a link is light blue, you will have to change the color of your links if you switch to a light blue background. The tag to change the color of an active link (i.e., a link at the moment a visitor runs the cursor over it) is <ALINK="#FF0000">. The default color for an active link is bright red. Finally, the tag to change the color of your visited links is <VLINK="#800080">. The default color for a visited link is purple.

Color Codes

HTML recognizes colors as a set of combined values, with each value represented by a number or letter in a six-digit series. The first two digits are used to establish the strength of the red values in the color combination, the second two are for green and the final two are for blue. (The numbering system for each value is called hexadecimal, which means that each digit represents a number ranging from 0 to 15; the numbers 10 through 15 are represented by the letters A through F.) This system allows for combinations resulting in millions of possible colors and an infinite degree of confusion -- so play around with them and see what you like. You'll probably find it easier to just stick with some of the more common color combinations while you're starting out:

Key Color Combinations:

#00FFFF - aqua
#000000 - black
#0000FF - blue
#FF00FF - fuchsia
#808080 - gray
#008000 - green
#00FF00 - lime
#800000 - maroon #000080 - navy
#808000 - olive
#800080 - purple
#FF0000 - red
#C0C0C0 - silver
#008080 - teal
#FFFF00 - yellow
#FFFFFF - white

Now that you've learned some of the basics of HTML, you should try out your chops on creating a sample document. Say, for instance, the one we guide you through in "SoYouWanna design your own web page?" Or, if you're just too bored and distracted right now for any more larnin', get out on the web and check out what some other designers have done. If you want to go back to that site with the farm animals, that's fine with us. Consider it research.

1 2 3 4 5 printer-friendly