Leland Initiative Web Tutorial Series: Overview of Last Lesson In the previous lesson we covered how to create tables in HTML. In addition, I explained how you can use tables to effectively present information in a web page and how tables can be used to improve the overall layout of your pages. Advanced HTML: An Overview Over the past seven lessons, I have shown you the basics of HTML. You should now understand that HTML consists of tags and tag pairs that can perform the following functions:
Using the past lessons, you should now be able to create simple web page. But you should be aware that HTML is constantly changing and expanding. The features we have covered thus far make up just a small part of the HTML language. You can do much, much more with the web! Unfortunately, explaining all these features in detail is well beyond the scope of the Leland Initiative Tutorial Series. This week’s lesson is not really a lesson at all then. Rather, I will touch on some of the more important advanced features, giving you a brief explanation of each and directing you to web sites where you can learn more if you wish. The features we will cover are frames and forms. I’ll just briefly mention JavaScript, since you may have already heard about this and wondered what all the fuss is about. Frames The first thing to know about frames is that the web development community (as well as web users) is split over how useful they really are. Some webmasters love frames and build their sites around them, while others would be perfectly happy if they didn’t exist. So what are frames? Well, you may have already seen them. If you have, then you’ll recognize a frame as a "separate" area (usually about 20 percent the width of the page) of a web page, usually on the left side of the page, that has its own scroll bar (the little slider that you can drag with your mouse to move up and down a web page). When you click on a hyperlink that is inside the "frame" on the left, a new page will open up in the main body of the browser, but the text in the frame will remain the same. You can then view the new page to the right of the frame as normal and even click on hyperlinks within that area to open up new pages (or even new sites). All the while, the content within the frame remains the same. What’s the big deal? Well, frames can be extremely useful as a tool to provide navigation for a web site. When I say "navigation", I’m referring to a way to quickly identify and move to areas or pages within a web site. Unless your web site consists of fewer than a dozen or so pages, providing an effective way to navigate a site is EXTREMELY important to web design. Here’s why: Imagine you have created a web site for your organization. The web site contains general information on the purpose of the organization, a list of staffers and their contact information; an online library of documents you have made available to the public; and a list of web links to other related organizations and affiliates. You COULD simply put all this information on a single web page, but chances are you will provide a separate page for each section. That is, you’ll have a page that introduces the visitor to your organization (often this is the "home page"), another page that lists available documents (if you have a lot of documents, you may even break this list into several pages); another page that lists your staffers; and yet another that holds a list of links for related web sites. If you have used the web much, you probably realize how easy it is to get lost deep within a web site. Trying to find what you are looking for, you keep on clicking on link after link and next thing you know you’re a dozen "clicks" away from where you started. If you reach a dead end and decide that you want to go back to the site’s home page, you don’t want to have to click on your browser’s "Back" button a dozen times to get back to where you started. It would be much easier to click on a single button that would immediately take you back home. Better yet, it would be nice to jump immediately to any section of the web site—regardless of where you are in the site. In the case our example of your organization’s web site, it would be wise for you as webmaster to provide a way for users to, for example, go directly from your "Staffers List" page to your "Related Web Sites" page. Trust me, users of your site would appreciate this. Nothing will make a user hastily exit a web site more than getting easily lost in a jumble of unconnected pages—it would be like trying to use a library that doesn’t have a card catalog! Here’s where frames can come to the rescue. Using frames in your web pages, you can create a menu of hyperlinks to the main pages of your site within the left-hand frame. Since these hyperlinks will remain the same regardless of what appears in the main window, users will always be able to jump quickly to where the want to go on the site. Personally, as a webmaster I think frames are a good feature. As a web user, I appreciate their value in helping me to navigate large sites. On the other hand, I don’t really use them too much. I have found that I can more easily create menus with some of the built-in features of Front Page 98, which is the HTML design tool I use (and which I’ll tell you more about in a future lesson). For the most part, the decision of whether to use frames mostly depends on your personal preferences. Check out the links below and decide for yourself. Related Sites--Frames
Forms Forms are without a doubt one of the most powerful features of HTML since they allow you to obtain and present information INTERACTIVELY. By this, I mean that forms allow you to GET information from users in addition to simply presenting information. The web is already a great way to present information to users, but the use of forms makes the web a "two way street" where people can give back information to your web site. This capability alone is responsible for much of the Internet’s dramatic growth, simply because it makes possible online commerce. For example, using the tutorials you have read so far, you could design a web site to present products that you wish to sell to the public. You could furnish images of the products, furnishing detailed information on the products and their prices, and so forth. But if you want to make a sale online, you would of course need to obtain some information from the buyer in return. You would need to find out exactly what product they wish to purchase, their name and address, and possibly a credit card number. Getting this information—or any other information you might want from a user--is made possible by forms. Be aware that forms are not useful for only online commerce. In fact, one of the first and most common uses of forms has been to get feedback from visitors. You may have already seen such forms. Generally, they ask questions like "What did you think of our web site?" "Please offer any suggestions for improving our site", and so forth. HTML forms are (you guessed it) created using tags. A form is started with the <form> tag and ended with the </form> tag. HTML coding allows for several different form "elements". These elements include single line text fields, scrolling text boxes, check boxes, combo boxes, and command buttons. You can easily identify a web form since they are areas on a web page in which you can actually enter information. For example, a text box is an area—actually a blank box just as the name implies--in which you can type whatever you wish. A check box is a very small square which, when clicked, contains a small check or "X". A combo box is a rectangular box with a small arrow on the right side that, when clicked, presents a drop-down list of choices from which you can select (just like a menu in most of the software programs you use). A command button is a button (usually a small gray square or rectangle with text on it) that perform some sort of "action" when you click on it. The most familiar command button is the "submit" button that, when clicked, returns to the web site the information you entered in the form—it’s the equivalent of the "send" button you use in e-mail programs. HTML forms themselves are fairly easy to create. As I hinted at above, you simply use tags to start the form and to denote what types of fields (whether text boxes, command buttons, check boxes, or whatever) you want the form to contain. All these HTML tags are coded into the web page just like you would do with an HTML table, a hyperlink, or an image. What makes forms more difficult to use, however, is the fact that you must supply other information in order to actually have your web site DO something with the information a user enters in the form. In most cases, forms send information to a database located on the web server. Like any database, a database connected to a web form organizes the information sent via the form. Using the online commerce site example, each form that is "sent" would constitute an order. The job of the database is to keep the orders separate so that a particular product, address, and other information are linked with the correct user’s name. The missing link that connects an HTML form to the database is called "script." You may have already heard of JavaScript. You can use JavaScript to link the form to the database—many webmasters do just that. You could also use CGI (Common Gateway Interface) script to do the job, or VB Script (Visual Basic script). Some software programs will take care of writing the script for you. For example, I used Microsoft Access 97 to publish a database on the web, and it had built-in features that made it unnecessary for me to learn script in order to publish the database. In general, however, relying on software to do it all has its limitations. If you need to do any heavy-duty forms/database work on the web, you’ll probably need to learn how to write script. Check out the sites below for more information on forms and scripting. Related Sites--Forms
Next Session In the next session, we’ll go over some of the basics of pulling it all together. You'll learn about things you can do to make your web site more appealing to users. Lesson 7 | Table of Contents | Lesson 9 This series was developed for USAID’s Leland Initiative by the Research and Reference Services Project (operated by the Academy for Educational Development). |