HTML Basics

In this section of "Untangling the Web," we're going to cover HTML basics. Basically, I'm going to tell you how to use HTML.

You might wonder why you should bother to learn HTML at all. After all, there's all kinds of things that generate HTML. Well, even with all the things that can generate HTML, there's still lots of reasons to learn HTML. For one, it's going to help you understand how the Web really works. You'll have a lot of Web intuition. You probably know lots of people who have Web intuition, and what Web intuition really is, is understanding how the Web works. A lot of the searches that you're going to do refer to HTML tags. If you don't know what an HTML tag is or how they work, you're going to have trouble doing complicated searches. You also might discover that you have to code HTML anyway, even with all the automatic HTML creators. A lot of times, they create problems or they leave gaps or they can't do everything that you really want to do; and so you're going to have to go in and fix them up by using your HTML skills. You're also going to need it to code JavaScript, and you are going to code lots of JavaScript. And today, at least, there's not a lot of automatic generators of JavaScript.

Let's first take a look at what HTML does. The first thing it does is provide formatting. When you code in HTML, HTML is not a what-you-see-is-what-you-get kind of language. What you do is you use a whole bunch of tags to describe formatting and so HTML lets you describe the formatting. It also allows Windows to be re-sized. If what you coded wasn't independent of the window size, then you couldn't show Webs on different screens that had different size windows, and people couldn't move the windows around and make them a different size. When you re-size a window, HTML automatically allows for the text to flow. It re-flows the text for you. HTML also provides HyperText links. HyperText links, as I'm sure you know, are those little things that you click on that take you from place to place around the Web. HTML also supports in-line images. In-line images are the pictures that you see in the Web that are actually mixed in with the text. Earlier systems, though you might not remember they ever existed (like Gopher) separated the images from the text. You either had a page that had all images or a page that had all text. In the Web, these things are mixed together, and HTML tells the browser how to mix these things together. HTML also lets you include forms, sounds, animations, applets, plug-ins, and all the kind of stuff that you expect to see in the Web. And HTML is very extensible. There's new stuff being added every day.

All World Wide Web documents use HTML. You cannot code a World Wide Web document, you can't build anything on the World Wide Web without using at least some HTML. Now here's some things you need to know about HTML. HTML documents are in plain ASCII text. If you've used the text processor, you probably know there's all kinds of special characters mixed in with the text. That's not true with HTML. That means that you can use any standard editor, anything that can build ASCII text can be used to create HTML. You don't have to use anything special. But what you really ought to use is some HTML editor or Internet assistant or something that creates HTML for you. Again, you're going to run into cases where even with an HTML assistant or an HTML editor or something that generates HTML, you're going to need to come in and fix things up, so you're going to need some knowledge of HTML. Virtually every word processor, WordPerfect, PageMaker, Microsoft Word, all these things have HTML interfaces, so all of them allow you to some degree to create HTML. But remember, none of these can do everything that you need to do, so you're going to need the stuff that we're going to cover in just a few minutes about HTML. I'd like to talk about what I'm calling HTML+++.

There's many new versions of HTML, and we can't possibly keep up with all of them. So generally, we can say that coming soon is some new version of HTML, and that's going to be true all the time. So we're not going to learn all of HTML here. There's going to be new tags, new features, new rules, and who knows what else coming in future HTMLs. Netscape and Microsoft continue to add proprietary features. At the same time they add proprietary features, they keep talking about the HTML standard, whatever that is. Unfortunately, they both have different ideas about what the HTML standard is, so you're going to discover that the HTML that you code -- at least some HTML that you code that works perfectly well on one of the browsers, will unfortunately not work fine on the other. This is a real problem that needs to be addressed on the Web. Some of the new stuff that's being developed in HTML is hidden away in comments. There are comments in HTML, as we'll see, and what's been done is because we don't want browsers to get upset about stuff that's not supported by other browsers, again and again, people have decided to hide HTML commands in comments. That means that some of the browsers are actually peeking inside the comments, something they should not be doing, something that is really bad programming practice. But you'll see it all over the place in HTML. What we really need is a real standard, a real HTML standard, which we have -- but we want one that people actually pay some attention to.

Our HTML goal in this part of the seminar is to accomplish just a few things. We're not going to teach you everything there is to know about HTML. That would take days, weeks, maybe longer. HTML has hundreds and hundreds of features. This part of the seminar is only going to cover a dozen or two -- or maybe a few less than that. You're going to get enough so that you can get some sense as to how you might build your own homepage or do a form and read somebody else's HTML, which you might be surprised to discover you're going to do quite a bit of. You can learn the rest on your own once you get the basics, which hopefully you'll pick up right here.

How do you code HTML? Well, first, choose an editor or word processor that you like. Don't choose anything special. Take something that you're really comfortable with. When you do save the text, you're going to save it as ASCII text. If you use an editor, your editor is going to save things as ASCII text anyway. Take the thing that you chose to build your HTML and use it to code some HTML and save it somewhere on a local file. You might say, "Wait a second! The HTML I code I really want to be out on the Web!" Not a problem. Your browser can read and interpret HTML from a local file. When you first create HTML, you save it to a local file. This is going to make building your HTML much easier because you're going to be able to build it iteratively. You'll save it to a local file and then you'll open the Web browser. You'll take the Web browser, point it to the local file. The browser will interpret the HTML. You'll look at it. If you're happy with the results, build some more HTML. If not, go back, change the thing, and just iterate through this until you get exactly what you want. Once you get exactly what you want, then you can move it up to some server. Of course, you're going to keep changing it, even after that.

HTML uses tags. As I said before, it is not a what-you-see-is-what-you-get thing, so when you look at the HTML file that you're building, it's not going to look remotely like what's going to be displayed on the Web. Instead, HTML uses a bunch of tags and the tags say what the formatting is going to look like. The format of a tag is a "less-than" sign, then the name of the tag, and a "greater than" sign. (<name>) Most tags are paired, so, for example, if we have a tag called NAME, we'll have <name>. We'll have a bunch of stuff, and the end tag will be the same as the opening tag except, after the opening "less than" there'll be a slash. So it will be </name>. Now not all tags have ending tags, and that's going to make things confusing. And it would be nice if all tags had ending tags, but they don't, and you're just going to have to learn them, unfortunately, one at a time. Within tags, there might be some options, and options are coded right after the name of the tag. So, for example, we might have <name>option = x zip = y, or something like that. Notice that there's no commas or anything between the options. They're just coded separated by some spaces. Tags are not case sensitive, so you can code them any way you want. Do whatever's comfortable for you. You could code the name tag as all uppercase name, all lowercase name, mixed case, whatever you care to do. One warning about coding a tag -- although you can scatter spaces pretty much wherever you want, you can't have a space immediate after the opening "less than," so the tag name must be flush up against the opening "less than" in the tag or the browsers will simply not recognize the thing as a tag that they know anything about.

What do tags do? Tags are interpreted by the browser, and they are interpreted by all browsers. It doesn't matter which browser you have. The interpretation could be personalized by your browser. You probably know that on your browser you have all kinds of options, and so if you change the options, a lot of the options affect the way HTML is interpreted. One thing you should be especially careful of when you're coding HTML is, typos are handled differently than you might expect. You might expect that if you typed a typo that what would happen is the Web browser would complain. Not at all! If a Web browser does not understand a tag, the rule is to ignore it. So if you code something strange or something that's a typo, you'll never hear about it, except when you look at the Web document, you'll notice that the Web document seems a little bit strange. This gets even more critical when you code an end tag and you have a typo in it, because that means that the opening tag never gets closed out. So, for example, if you turn bolding on and you mis-type the closing bold tag, your entire document will be in bold. You'll get to see this from first-hand experience pretty quickly.

Let's take a look at the basic document structure. All HTML documents have the same basic document structure, and that makes coding HTML at least a little bit easier. The opening tag of every HTML document ought to be the HTML tag. The HTML tag is simply <HTML>. Look down at the bottom, and you'll see there's a closing </HTML> tag. So the entire document is bracketed in HTML tags. Some of you might discover that if you leave these tags out, the thing works just as well. Well, that may not always be true, so it's a good idea to put these tags in. Within the HTML document, the document is divided into two sections. It's divided into a head section and a body section. The head section, not surprisingly, is bracket by a head tag and an end head tag. You'll see the end head tag is </head>. The body tag opens with a body tag and closes with an end body tag. Inside the head tag, we specify a title. The title is specified by starting the title with the title tag and closing it with an end title tag, and within the title tags, we put the title of the document. Within the body, we put all the rest of the document.

Understanding the basic HTML structure, we're ready to write our first HTML document. We open and close it with an HTML tag. We have a heading section; in the heading section, we have a title tag, and for the title tag, we have the text "My first HTML Document." In the body, we have a bunch of other tags. We open the body with an H1 tag. The H1 is a heading level 1. It says, "This is really important stuff, so make it big type." You might as, "What font? Should it be bold? What should this look like?" No, you don't have any control of that. This is decided by the browser and browser preferences. H1 simply says, "This is important stuff, so make it look important," and that's what it does. After the H1 tag, we say, "Intro to boats." We end the H1 with an ending H1 tag, and then we have a P tag. The P tag is a paragraph tag. Then we say, "A sailboat is propelled by the wind." You notice I've scattered some spaces around here. I've scattered these spaces around to remind you that spaces don't matter. I've also broken the lines in strange places, to remind you that they don't matter either. You can put spaces wherever you want, you can put one word per line. The browser fixes all this up for you, even if you don't want it fixed. We then have another P tag, and followed by that, it says, "A rowboat is propelled by oars," and we end the body with an end body tag. Let's take a look and see what this looks like.

You'll notice that the line spacing, the funny line spacing I had in the HTML example has disappeared. You'll notice that the extra spaces I had have also disappeared, and this is the kind of effect that you'll get.

A principle, a basic principle of HTML is that all the text is flowable. Multiple blanks almost always become one. This could be a real problem for you if you want extra blanks. I could tell you, although it's jumping ahead, that there is a way in HTML to force blanks to count, but we'll talk about that later. Line breaks are always ignored. HTML is considered to be just one stream of text. Blank lines, indentations, and other attempts that you might make at formatting without tags are going to be ignored.

If you want to see the HTML of a document, and I strongly recommend that you do this, one good way to learn HTML is to look at other people's HTML. In Netscape or in Internet Explorer, use the View menu. Go look at the source. The source refers to the HTML. If you do that, you'll see a formatted version of the HTML on your screen.

Now we're going to talk about a few more tags in some detail. First we're going to talk about the title tag. You saw the title tag just a moment ago, but now we're going to give you a lot more detail about the title tag. The title tag puts the title in the menu bar, which is fixed at the top of the screen. The format of it is the title tag, some text, and an end title tag. You might be surprised to learn that you can use many of these things. You would think you could only code one title, but in fact, you can code many of these. If you do code many of them, what happens is, the browser displays the first one it sees. When it sees another one, it displays that one. When it sees yet another, it keeps displaying them. And the basic effect of coding more than one of these is to have a title bar that moves around or flashes or basically annoys people, which is the real use of using multiple title bars. Don't do it! Title has got to be in the head section of the document.

Another tag we're going to talk about is the heading tag. This is a tag that's used very, very commonly, and the heading tag consists actually of six tags. There are six levels of headings, heading level 1 through heading level 6, and each level is a little bit less important. So if we code the H1 tag, it says, "This is very, very important." If we code the H2 tag, it's a little bit less important, and so forth.

There's also a paragraph tag, the P tag, which is <P>. It starts a new paragraph. What's that mean? Well, it means whatever the browser feels a new paragraph means. Typically, it skips a line and then starts a new text. Today, there is no end tag for the paragraph tag, so don't code a /P as an end tag. But in the future, there might be, so keep watching HTML. This stuff is going to change.

One thing that very few people do in HTML, and you should definitely do, is code comments in your HTML. The comments are by and large ignored by the browser, but they remind you what in the world you were doing when you coded this HTML. The way you code a comment is by using a special tag, and the tag is really quite special. It starts with a less-than, an exclamation point and two dashes (seems like a lot of stuff.) Then you can follow it by any text. It ends with two dashes and a greater than. The two dashes and a greater than that end the paragraph, that end the comment, can be anywhere, even several lines away. So the comments don't have to be all on the same line. Again, I strongly recommend that when you're writing HTML, that you write little messages to yourself to remind you what you were doing when you wrote the HTML. It may not be clear when you go back and read the HTML a little bit later.

Very quickly, covering a couple other tags, there's an HR tag, which has no end tag, and it makes a window-wide, three-dimensional, horizontal rule. You're going to use this all the time. The B tag turns text into bold. The I tag turns text into italics. And of course you can put B tags inside I tags or I tags inside B tags, as illustrated. There's also a TT tag, which is a typewriter text tag, which says that we want to switch to fixed pitch text. Sometimes you're going to want to do that.

I said before that the browser takes HTML and flows the text all the time, so it tends to ignore your formatting, but there a times -- for example, if you're going to show a segment of a program -- where you don't want the text flowed, or you're producing some kind of table and you don't want the text flowed. What you can use is use the PRE, or the preserve tag in the beginning and the end of the section that you don't want the browser to reformat. You'll really want to use this very sparingly. This is not a good way to format text.

The best way to format text is to use the tags to format text. When you do use the PRE tag, it switches to the fixed pitch font, just like the TT tag does.

There are many options to many of the tags, and so, up until this point, the tags seem pretty simple. And perhaps HTML is even starting to seem simple to you. Don't believe it! There are lots and lots of options that make HTML a lot more complicated. For example, we saw a very simple tag, the HR tag (which is just a horizontal rule.) It draws a horizontal rule from one edge of the window to the other. But there is a size option. You can say size = some number, where the number is the thickness in pixels of the line, so we can make a very thin line or a very thick line. The default is only one pixel, so the default is a very, very skinny line. There's also a width option. We can say how wide the thing should be, and we could put the width in pixels, so we could say <hr width=7>, which would be a line that was only seven pixels wide. That would be a very narrow line. Or we could say, seven followed by a percent sign. So we could specify the width as a percent or in pixels. The HR tag also has a no shade option. The no shade option turns off the three-D effect. Normally, the horizontal rule is three-D. Maybe that's what you want. Maybe not. There's also align options, so we can align the line to the left or to the right or to the center.

By the time we're done, this very simple HR tag winds up looking like this. We code something that says <hr size=100 width =20% align=center noshade>. That means, we have a hundred-pixel thick, plain, non-three-D rule centered in a window 20% of the window's width. Wow! For a little simple tag like HR, this is a lot of complexity, and when we get to more complex tags, the complexity gets even more unbelievable.

Now we're going to talk about the most serious tag, if there is a most serious tag in HTML. This is the HyperText Reference Link Tag. This is the tag that we use to make it possible to use HyperText links. This tag is called the anchor tag. The anchor tag is coded with the symbol A, so the anchor tag in its simplest form is just <A>. Now, we never see the anchor tag look like that. Normally, inside the anchor tag is the option HREF, for HyperText reference, and next to HyperText reference is some filename. That ends the beginning of the anchor tag. The opening anchor tag is followed by some text, followed by a close anchor tag, which is just the tag /A. The text in between the opening anchor tag and the end anchor tag is the text that's going to be underlined on your screen. When we click on that text, that text is going to go off, take whatever is referenced after HREF -- that is, whatever we specified in the HREF option. It's going to take that, load that onto your browser, and your browser is going to interpret that.

When you click on a HyperText link, the server looks at the HREF portion of the anchor tag and delivers the document pointed to to your browser. The browser then interprets the document based on what it's told to expect. For example, it might be told to expect an HTML document, or a picture, or movie, or etc. This is the basic process of using HyperText links on the Web.

Here's an example of a HyperText link using a local reference. We have the text that says "I bought" followed by a HyperText link that points to the document sailboat.html, followed by the words, "a unique sailboat," followed by the ending anchor tag. And then the text continues. This results in the text that you see at the bottom of the screen. "I bought a unique sailboat from the..." where "a unique sailboat" is underlined. The part that's underlined is the HyperText link, and if we click on it, what we're going to do is we're going to go off and fetch the file referenced in the HyperText link.

Here's another example. Wow! followed by a HyperText link someplace in Glacier National Park followed by the words "Glacier National Park," followed by the end A tag, was more beautiful than, etc. We can see the result in text at the bottom, and we can see the text that's underlined.

One word of warning about all of this is you can see that we're coding paths in HTML, and you might notice that the paths seem to follow the UNIX conventions for paths. And they do, and that's true no matter what kind of system you're using, whether you're using a MAC or a PC or whatever. The Web uses UNIX path conventions, so make sure you adhere to them.

Now we're going to talk about in-line images. For example, some of the things you see on the screen -- we're going to say, "He's got the whole," and then we have an image (world) "in his hand," and other things like that. We're going to combine images with text on one screen.

In-line images use the image tag. The image tag is usually followed by the source option. And the source tag specifies the name of the file that we're going to reference. So, for example, we might say <IMG SRC = image file reference>, where image file reference is the file that we're going to reference.

Here's a simple example. If we say, <IMG SRC = school bus.gif off to school we go>, we're going to get the picture down at the bottom.

We could add a parameter to this, and align the text, the "off to school we go" text to the top. That's simply done by adding the align = top to the image tag.

We could also add a border to the thing by adding yet another option, the border option. In this case, we've set the border option to 2, creating a two-pixel border around the picture.

Some other things you should know about in-line images are that the align = left and align = right wrap text around the object. That's a very useful thing to use. There's also an Alt option. The Alt option is used for browsers that either can't or don't want to display your image; for example, if you want to load things very quickly, you don't want to display all the images, so you might have image loading turned off. What you do with the Alt option, is you put the text that you'd like displayed instead of the image. For example, if you were going to display a picture of a school bus, you might say Alt = schoolbus, and what will happen is if somebody either can't or won't or doesn't want to look at your images, instead they'll see the text "schoolbus." You can obtain images from clipart libraries, from scanned images, or images from other Web pages, or anywhere you want. But watch out for copyrights! You wouldn't want to use stuff that was copyrighted by somebody else. The file that's referenced by an image tag can also be a URL.

A URL is a Uniform Resource Locator. Resource Locators are used to link to files on other servers. The format of a URL is protocol://host.domain, optionally a colon followed by a port number followed by a slash followed by the path, followed by the filename. Now, this might seem a little bit complicated at first, but after you've used a few of these things, this is going to be quite normal. You can see an example on the screen. In the example, the file is my.HTML in directory galaxy on host www in domain iis.org.

Looking again at the general format for URL, let's take a closer look at what the protocol can be. The protocol might be FILE, which is to say it's a local file or a file on an FTP server. The protocol might be HTTP. That means a file on a web server. Truthfully, it means it's a file that's going to use HyperText Transport Protocol. the protocol might be HTTPS. That's just like HTTP, except that it's going to use a secure protocol.

There's some more things that a protocol can be. For example, it might be Gopher if the file's on a Gopher server. It might be WAIS, it might be News, it might be Telnet. And there's lots of other things that it might be.

Here's an example: "I'm", followed by something you've seen already, an anchor tag with an HREF. In this case, the HREF, instead of pointing to a file, points to a URL.

Here's another example. In this example, URL refers to the Gopher server of host ATA in domain Princeton.edu at default port 70. We didn't specify the port, and for Gopher, the default port is 70; and for Web servers, the default port is 80.

Now we want to take a look at taking an image and using an image as a HyperText link. This is not much different than using text as a HyperText link. The big difference is that, before, between the opening anchor tag and the closing anchor tag, we just put some text. We put some text there, the text was underlined in blue, and if we clicked on the text, we went off and got the HyperText link. In this case, instead of putting text there, what we do is we put an image tag, the image tag that you just saw before. So in this case, what we've done is we've taken the picture gears.gif, coded an image tag for it, and put it between the opening anchor tag and the close anchor tag. In this case, the image gears.gif will be bordered in blue and it will be a HyperText link. If we click on it, we're going to go off somewhere to the URL specified in the anchor tag.

Another option that we code in anchor tags is the MailTo options. The MailTo options enables us to click on what looks like a HyperText link -- in this case, my name, Howard Strauss -- and instead of going off to some place, the HREFs specifies that we should open a window and, in the window, we should set up something that enables me to send Email to whoever we've specified in the MailTo. The MailTo could specify either the address of a person or a list of people.

If you know URL already and you want to see what it points to, you can use the Open in Netscape to get there, or you can refer to the URL in your own HTML document. That is, you can build an HTML document and point to the URL.

Now we're going to talk about some special effects with HTML. First we're going to talk about some colors on the Web. You might have noticed, when you look at the Web, that there's lots of background colors and text is colored, and things like that. The way you specify colors on the Web can be pretty ugly or pretty simple. One way is you can specify a color with a hexadecimal string; that is, with six hexadecimal digits, where the first two digits are how much red you want in the color, the next two digits are how much green you want, and the last two are how much blue you want. This gives you over 16 million choices. Another choice is to specify the color as a color, such as red, green, blue, cornsilk, or whatever.

In the body tag, which you've seen already, you can set the background. The background can be set a couple ways. One way you can set it is by saying background equals and then point to an image. In this case, we pointed to square.gif. If this picture is too small, and it always is, it gets tiled across the screen, so it gets repeated and repeated until it fills the entire screen, however big it happens to be. Another thing you can do is you can code a background color, instead of coding an image. In this case, he used the bgcolor option, and you can code bgcolor to be one of those colors with all of those funny hexadecimal characters, or you can say bgcolor equals a color, like aquamarine or red or blue. On the bottom of the screen is a reference that points to at least some of the names of the colors, so you can use the color names instead of using those strange hexadecimal characters.

You can also, in the body tag, you can override the text and link colors. For example, if you say text equals something, either a color or those RRGGBB things, what you can do is you can override the color of all normal text in the document. You can use the link parameter to override all the unvisited links. That's the places you haven't gone. Normally on your screen, those will by default be in blue. You can also override all the visited links. Those links are normally in purple on your screen, or all the active links, which are normally in red on your screen. And those are the links that, as soon as you press them, you might notice they turn red. You can change the color there, too.

Now we're going to talk about unordered lists, using the UL tag. An unordered list uses bullets in front of each element, so it's just a list of items that have bullets to their left. We start with the UL tag and end with the end UL tag. Within the UL tag, we use the li tag for each item. The li tag has no end tag, though I've seen some browsers that will accept it. But at least for now, you don't really have to use it. Each li tag is a list-item; that's what li stands for. You can see from the example that, if we code a bunch of list items like sailboats, powerboats and barges, and canoes, you'll notice in the powerboats and barges list item, we put a br tag, which is a break tag, which is something that forces things onto the next line. You can see the results of the formatting. Sailboats is on a line by itself with a bullet to the left of it. Powerboats and is on one like, the break forces barges onto the new line. You'll notice the new line is indented, and the last line has canoes with a bullet in front of it.

We can also have ordered lists. Ordered lists work exactly the same way as unordered lists except that they're numbered. Here, we've reproduced exactly the same list, except we've used the OL tag instead of the UL tag.

We can also have nested lists. We can take lists inside of lists, and we can mix the kinds of lists that we have. We can put ordered lists inside of unordered lists, and so forth.

Some other things about nested lists that you'll be interested in knowing are that you can nest the lists as deep as you want. There's really no limit to how deeply you can nest them, but you ought to think about your users before you nest them too deeply. Also, when you nest lists, the bullet changes shape. It changes shape from a disc to a circle to a square, but you can force whatever shape you want, coding TYPE= whatever you want in the UL tag. You can also pick your starting number for ordered lists; so, for example, if you start an ordered list and code the first few numbers, interrupt it and you want to pick up the numbering, that's when you would use something where you picked a starting point other than one.

In HTML, it's generally difficult to provide special characters because special characters have special meanings. For example, if you really wanted something like <tag> to appear on the screen, it wouldn't; and it wouldn't because the HTML interpreter would look at that and decide it was a tag. You could say," Well, it doesn't understand that tag," in which case it would ignore it and not display it at all. So if you want to display a less-than or greater-than or any number of other tags on the screen, you need some special way to do that.

Here's the special way to do that, and there's lots more of these. For example, if you do want to code a less-than, use <, or greater-than, >, and so forth. The most important one in this list is  . That's a non-breaking space. I told you earlier that if you really wanted to code spaces, that you could, and that's the way you code them. If you do code it,  , it will definitely be paid attention to. It will not be ignored. And in fact, this is the only way to get the HTML interpreter to pay attention to spaces.

Here's an example of how special characters are used. Here we have a paragraph tag followed by the words "always use the" -- and you'll notice it says <HTML>. You notice all these things are smooshed all together, and you might wonder how the browser knows where one ends and one starts. Well, it does. This is exactly how you would code it. If you code space between the < and HTML, there will be a space in the result, and that would be illegal, as you know.

There's also sup and sub tags to do super and subscripts. And you can see on the screen how that can be done.

Normally in HTML, you don't specify the font. The HTML interpreter in your browser does. But, you can specify to some degree the size of the font. Now, if you're expecting to be able to specify the size of the font in points or picas or something like that, you're going to be a little bit surprised. What you can do is you can say the size is going to be 1,2,3,4,5,6 or 7. And how big is 1,2,3,4,5,6, or 7? However big the HTML interpreter feels they ought to be. At least you know that seven is bigger than one. You can also, instead of just coding a number after size, you can code a sign number, so you can say +1, which says "Make this bigger than the font was before, a little bit bigger, anyway." Or -1, which would say, "Make this a little bit smaller." You could, if you wanted to, make every letter a different size. We hope you won't do that. There's also a SMALL tag, which says "Give me little, small letters," and a BIG tag, which says, "Give me big letters." There's also a color option in the font tag. You can say color=green, or you can say color equals one of those funny hexadecimal strings to specify the color.

As I said, normally you can't specify the fonts in HTML. The HTML interpreter does that for you, but there is a FACE option in the font tag which lets you specify a bunch of font faces. What you do is you specify any number of font faces you want. Then, what happens is that, when the document is interpreted, the HTML interpreter goes off and looks at the fonts in sequence to see if any of them are on the machine; and it uses the first one that's available, if any of them are available. If none of them are available, it pretends you never coded this at all.

Now we're going to talk about something that you'll see all the time on the Web. It's actually quite a complicated kind of thing, and that's tables. Tables enable you to format text in columns and rows. There's a couple table tags that have some interest. The most interesting and important one, of course, is the tag that defines a table. Every table starts with a table tag and ends with an end table tag. Within a table, there's going to be bunch of rows, and every row in a table starts with a tr, or table row tag, and ends with an end table row tag. Within a row, there's going to be a bunch of table data elements, or td tags, which are going to be used to define them. If you want the table data elements to be more important, like table headers, just use the th tag in place of the td tag.

Here's an example of a simple table. You'll notice that in the first row of the table, we have the word "cat" in the first cell and "dog" in the next cell. The third cell is blank. The next row has the word "cow" in the first cell, "hen" in the middle cell, and "owl" in the last cell. How could we code this? You can see the HTML on the screen. Let me go over it this time. When we get to more complicated examples, you'll be able to know how to do this from the simple example. We start with a table tag, and we have an end table tag down at the bottom. The table tag includes the border = 1 option. This says to put a border around the table. If we left out the border option, there would be no border around the table, and if we set the border to a larger number, there would be a thicker border around the table. The border option specifies the thickness of the border in pixels. Then we define the first table row. The first table row, as you can see, is going to have the words "cat" and "dog" in it, and that's all we do. We say table data cat, then we end table data. We have another table data element, dog, and we end it. And then we end the row. So we only have two things defined for the first row. Then, we have another tr tag, or table row tag, and we have three td tags -- one for cow, one for hen, one for owl. You notice that the second row has more elements than the first. The HTML interpreter takes care of all the problems, taking into account that we have fewer elements in the first row, more in the second row, and it builds a table that looks the way you see it, right here.

Here's an example of a more complex table.

In this example, the opening and closing table tags are the same. After that, we're going to try to define the first row using a tr tag. You'll notice that there's a big unfilled-in box there that's two rows and two columns wide. To define that, we use the row span option and we use the column span option. In this case, we're spanning two rows and two columns, so we say th, which is a heading on the first row, and we say it spans two rows by coding row span = two and two columns by coding col span = two, and that's the end of that box. Next to that, what we have is we have the word "widgets," but the word widgets also spans two columns; so we code col span = two and the word widgets. On the next row, we just have the words "number" and "color," and those are just coded using the th tag. We use the th tag because we want to make the thing a heading, and you can see that it's in bolder type. After that, on the next row, what we're going to do is we're going to span two rows to put the words "size" in place next to the words "large" and "small," and after that, it's just a matter of coding the last two rows.

When the browser tabs through form elements, it tabs through them from top to bottom, left to right. You might want to use nested tables containing form elements to put tables side by side, with a tab order that goes through one table and then the other. You also might want to use borderless nested tables to do multicolumn text and other kinds of fancy aligning.

Another interesting thing that you can do on the Web is you can build forms. Forms allow users to enter information onto a Web screen. That information can either be sent off to the server, where it's processed and returned in some format, or we can do some local processing. Forms on the Web support text boxes, which are scrolling, non-scrolling, password boxes, check boxes, radio buttons, drop-down menus, and also a couple buttons, primarily the submit and reset buttons.

Here's an example of a basic form. It has almost every form element that HTML supports in it.

Looking at the input tag, the input tag defines a place to type some text in. We've said type= text. That says it's a very simple box where we're going to type some text in. We've given it the name NAME, and we've given it the value LAST NAME HERE. When we give it a value, the value appears in the box. Normally, we wouldn't code that. We've also given it a size. We said size = 20, saying how wide the box should be. Next to it, we've coded a password field. The only difference between the password field and the text field is that we've coded type= password. We've also given that a size of 20. The password field, when people type information in, it won't appear. So it will keep the password secret.

Looking now at the text area box, you could see that's the kind of rectangular box below the words "Describe your idea." We code that with a text area tag. The text area tag has a start tag and an end tag. We've given the text area the name SUGG for suggestion, suggesting that we might put suggestions in it. We've specified its size in both rows and columns, because it's a two-dimensional box, unlike a type=text box, which is only a one-dimensional box.

After that, we've coded a bunch of radio buttons. Radio buttons are those little circles over there, and they have the interesting attribute that if you press on one, if there's any other one selected, it becomes unselected, just like the buttons on your radio. The basic form of a radio button is, again using the input tag, we say type=radio. And then we give it a name, and that's really all we've done here. We obviously don't give it a size, because radio buttons don't have a size. Looking at all the radio buttons, you'll notice that all the names are the same. Why have we done that? Well, the HTML interpreter needs to know that when you press a radio button, which radio buttons to unset, so we group radio buttons together by giving them all the same name.

When we code the checkboxes below that, we give the checkboxes all different names, because in HTML, everything really has to have a different name except for a group of radio buttons that we want to select and unselect automatically. You'll notice in the first checkbox, which is coded type checkbox, we've included the option "checked." The option "checked" says that that box will be checked when the thing displays by default.

At the bottom of the form, right before we have the form end tag, we've defined two buttons. The first button we define with an input tag and type=reset and value=clear is a button that clears all the information from inside all the form elements in the form. That's all the form elements from the end form tag back up to the start form tag. We could call the button anything we want by putting whatever value we want in the thing. It's always type=reset, but in the value parameter, we could put whatever we wanted. There's also a button which is the SUBMIT button. When we press the Submit button, what it does is it sends all the information off to whatever we've coded in the action parameter in the opening form tag.

Just a couple words about CGI scripts for tables: you remember that a reference to the CGI script was coded in the action parameter of the opening form tag. The data is passed to whatever is referenced on the action tag in the opening form tag. The CGI script might be written in Perl, C or C++, AppleScript, Visual Basic, or whatever -- Java, FORTRAN, etc. What happens is, once we go up and execute the CGI Script, the CGI Script picks up all the information for the form; that is, it picks up the name of all the fields and any values, either you set or that a user types in. Once the CGI Script executes, what it does, it returns an HTML document which is then displayed on your screen. For many forms, you don't need any action parameter, and the reason you don't is that using JavaScript, for example, you can build calculators that are totally local. They do all the processing right on your browser, so we never go up to the server to do anything at all.

Another element that you're going to put on your form are menus. There's lots of different kinds of menus. There's drop-down menus, scrolling menus where you can pick one element, or scrolling menus where you can pick many.

Taking a look at the HTML for the first drop-down menu that you see, you can see we use the select tag and end select tag. Within the select tag, what we have is a bunch of options; and the option tags, which have no end tags, are the items on the list, in this case, freshman, sophomore, junior, senior, grad student, and so forth.

In the next case, where we have a scrolling drop-down menu where you pick one, you can see that this is coded almost identically. We still use the select tag. The options are exactly the same. The only thing different is we've said "Size equals 3." So we've coded a parameter that says what we want to do is see three elements on the thing, and that immediately turns it into a scrolling drop-down menu where you can pick one.

The last thing you see, which is a scrolling menu where you can pick many, is coded identically to the previous example, except you code the option multiple.

As you can see here, and as you'll see in many, many places on the Web, you can use tables and forms together. Here's an example of one of them. You'll probably be relieved to know that we're not going to go through the detailed HTML to explain to you how this form could be built, but actually, you know enough right now to do something, even this complicated.

There's lots more HTML that we haven't covered. This is only a tiny fraction of all the tags and options and other things that are in HTML. If you want more information, there are dozens and dozens of HTML books and many resources on the Web. Now that you know how to search the Web, you can go off and look at them. Another thing you should do is you should look at the HTML source of interesting Web sites. With the tools you've just picked up here, you ought to be ready to go off and code your own HTML, or at least fix your own HTML. And if not that, certainly you can talk intelligently about HTML.

About CREN

© CREN, 1999

Contact Us