Development of the Internet reached a point at which a wide variety of information could be provided to people by 1990. Soon thereafter a much more general-purpose access mechanism called the World Wide Web was invented. Easy to use "browser" software made it possible for people to travel through information collections around the world, without requiring a detailed knowledge of how to interact with all those computers. At the same time, Internet access started becoming much easier, with a large number of firms now providing these services at prices affordable in many private homes.

     The combination of these factors led to an explosive period of growth for the Web, with sites (homepages) providing information on companies, government agencies, and private individuals. This activity explores creating Web pages for personal interest, or for use by community groups or even businesses.

     Easy, frequent access to a computer that has a Web browser. If the use of graphics or sound, or more advanced features such as embedded Java programs is desired, the computer must have a windowing operating system (e.g., Microsoft Windows, Mac-OS), and a suitably advanced Web browser must be used. Your Internet service provider company may provide you with a Web browser, or you may obtain one from companies such as Microsoft (http://www.microsoft.com/) or Netscape (http://www.netscape.com/), possibly without charge.

     A simple text editor (something as simple as Microsoft's Notepad or BBEdit for Macintosh will suffice). Such editors are generally built in to any operating system, so there is no additional expense. The instructions in this activity description assume the use of one of these simple editors. Or, many companies now produce software to assist in creating Web pages by giving you a more graphical display with which to interact. These tools may be available in limited-use trial versions without charge. Additionally, major word processing programs (e.g., Microsoft Word, WordPerfect) have the ability to automatically save documents in Web formats, although generally they are rather inefficient at it and produce unnecessary clutter that could confuse a user.

     If the use of personal graphics in the Web page is desired (e.g., a photograph of the owner, or the owner's cat), either a digital camera must be used to produce a suitable graphics file, or a scanner must be used to scan an existing photograph and produce a graphics output file. It may be possible to borrow the use of these devices and simply move the file to the home computer via floppy disk or e-mail. Note that the most widely supported graphics formats are "GIF" (Graphics Interchange Format) and "JPEG" (Joint Photographic Experts Group). Although there are a great many image formats, if you decide to use other formats, some people will not be able to view your images.

     If the use of personalized audio is desired, at least temporary use of recording hardware and software (e.g., SoundBlaster cards and similar devices by other firms) must be obtained.

     Access to a Web server is desirable, but optional. Web pages may be loaded directly off your own disk drive, although other people will be unable to load your Web page.

     Access to the Internet is desirable, but optional. A variety of reference material, images, and sample files are available via the Internet. Without access to the Internet, links from your Web page to those of other people cannot be followed by the Web browser.

     A reference book on "HTML" would be very helpful. These became widely available in about 1994, so there may be some in your local library. Bookstores that deal in computer books will certainly have some. Or, perfectly usable HTML training materials are available on the Web itself. (Note that XML, SGML, Java, JavaScript, and other advanced topics are beyond the scope of this activity.)

     Web pages are usually combinations of text, instructions about loading certain images, and instructions about how to arrange and display these on the computer screen. Authors give instructions to the Web browser software via a "markup language" that indicates which parts of the document are treated as logically one group (e.g., a paragraph). Many of these instructions are very obvious, such as the commands to display <i> this stuff </i> in italics and <b> this stuff </b> as bold. The most widely used markup language on the Web today, and the original, is "HTML" (Hyper-Text Markup language). (Hyper-Text refers to the ability to link to other documents from any place you wish within your document.)

Other commands are not so obvious visually. The sentence:

Last summer we visited the <A HREF= "http://www.whitehouse.gov/" > White House </A> in Washington, D.C.

instructs the Web browser that, when the user does a mouse-click on the displayed words "White House", the browser is to use the connection rules called "HTTP" (Hyper-Text Transport Protocol) to load the Web page from the computer "www.whitehouse.gov". (That site is, obviously, the White House homepage.) One of the main features of the Web that made it so popular is that the person reading the document doesn't have to know anything about "protocols" or Internet machine addresses, or physical locations-they just click on what they want to have loaded for them. Web browsers usually display the active spots in which mouse-clicks are allowed somewhat differently, such as using blue lettering and underlining.

At this point, you need a place to start. Here's one:

<HTML>
<HEAD>
<TITLE>Put the title you want for your page here.</TITLE>
</HEAD>
<BODY>
Put whatever you want on your Web page here. It can get pretty long!
</BODY>
</HTML>

     First, create a file using your editor that contains this material. Save that file to your disk with a name such as "homepage.html", then look at it with your Web browser using it's provisions to open a local (that is non-Internet) file. If you see a page that says only, "Put whatever you want on your Web page here. It can get pretty long!", and the title bar at the top of the browser window says, "Put the title you want for your page here", then you've done it all right. Otherwise, look for mistakes such as typing errors.

     Notice how the HTML "tags" here indicate both the beginning and the ending of the region they control. Without a correct ending, the Web browser keeps reading ahead, forever, and may produce worthless results. Try deliberately making this mistake, by removing the ">" on the end of the "<BODY>" tag above, saving the file, and reloading that page into your Web browser. Remember to put the ">" back after you're done experimenting!

     Now, modify the text in the file to personalize it. For example, change "Put the title you want for your page here" to "The official Jimmy-Bob Fan Club Web page", or "Lynn's Homepage", or anything else you'd like. Change the content of the BODY too, putting in something of your own writing.

     Now, let's explore linking to other Web pages. Make another Web page using the starting text above, but modify this text and title to be something about "my dog Spot" (or any other pet you have, or wish you had). Save that second file under a name like "spot.html". To link to the Spot page from within your own homepage, the "tag" looks like:

I have a 9-year old Labrador retriever named <A HREF= "spot.html">Spot</A> that you can also read about.

     Notice that this link doesn't look much like the White House link. There's no "http" part, or machine name ("www.whitehouse.gov"). If these are not given, the Web browser simply assumes to "do the same as was done to retrieve the current page". Because we'll be starting from your own homepage, in some directory (folder) on your disk, the Web browser will go looking, on your machine, in that same place, for a file called "spot.html", and will then load Spot's homepage.

Here's some more tags for experiments:

Show this <b>Bolded</b>.
Show this <u>Underlined</u>.
Show this <i>In Italics</i>

<p>This is a paragraph.</p>

<p>And, keep it seperate from the paragraph that follows it.</p>

<h1>Headline for Today's News</h1>

<h4>By roving reporter, me.<h4>

When you use the tags below,
<p> Here's a list of my pets. I have <UL>
<li> a dog, <A HREF= "spot.html">Spot</a> who has his own homepage,
<li> a cat, Socks, and
<li> 4 goldfish that don't have names.
</ul> I also have a sister, but Mom said not to list her with the pets so I didn't. </p>

the following list will appear on your page:
Here's a list of my pets. I have

• a dog, Spot who has his own homepage,
• a cat, Socks, and
• 4 goldfish that don't have names.

I also have a sister, but Mom said not to list her with the pets so I didn't.

     Repeat the above, replacing <UL> with <OL> and </UL> with </OL> and see what happens.

     To link in images, use the IMG tag. Like the A tag in the example about Spot, the IMG tag can be used to tell the Web browser to get a file from the same place as before, or from somewhere else. If you have a file with a picture of Spot that you've stored in the same folder as Spot's homepage, you can put that photo directly into Spot's homepage with an IMG tag like this:

<P> Hi. I'm Spot, a Labrador retriever. <IMG SRC= "spot.gif"> I can't really type, so my owner made me this homepage. This is what I look like. </P>

     At this point you can create a pretty reasonable homepage for yourself or for someone else. If you have access to a Web "server", you can now transfer all your files to that machine and can give the location specification "URL" to your friends. (Your Internet service provider will have to provide the information on exactly how to do this transfer, where to put the files, and what the resulting URL will be.)

     If you need an example of these tags at work in a real page, take a look at the sample page. Once you open this page, right click on your mouse. Then select "view source" from the menu. This will allow you to look at the HTML code for this page, or any other page for that matter. Learning from other people's HTML code is a great way to become comfortable with the basics of HTML and figure out how to create new looks for your pages.

     Another way that many people like to edit webpages is with a graphical program such as Netscape's composer or Microsoft's FrontPage. These programs are helpful in that they allow you to type and design your webpage directly, like a word processor. Creating webpages in this way is helpful, as just a small amount of HTML code knowledge will allow you to make great looking pages. If you are using Netscape to browse the web, simply click the "File" menu at the top, and select "Open in Composer" to give it a try. Unfortunately, Internet Explorer users will have to use Netscape if you want to try graphical web page editing, as Microsoft's FrontPage is a seperate product that must be purchased.

     Images can become a problem. They contain lots of data-much more than the same layout space of typewritten text on page. If you, or the people you want to have read your homepage are using a "modem" to connect your computer to the Internet via telephone, it may take a very long time to receive the picture file. Sometimes Web authors use very small copies of their images ("thumbnails") to point to the larger files. This lets readers get an idea of what the picture is about without a long wait. If they decide they really do want the large picture, they can click on the small picture and they'll get it. For example:

<P> Hi. I'm Spot, a Labrador retriever. I can't really type, so my owner made me this homepage. Here's a life-sized photo of what I look like <A HREF= "lifesized.gif"> <IMG SRC= "thumbnail.gif"> </A>. </P>

     Images are also a problem to people with visual impairments. To lessen both problems, there's an optional "attribute" that can go inside an IMG tag to specify an alternative description. For example:

<P> Hi. I'm Spot, a Labrador retriever. I can't really type, so my owner made me this homepage. Here's a life-sized photo of what I look like <A HREF= "lifesized.gif"> <IMG SRC= "thumbnail.gif" ALT= "Black male Labrador retriever, age 9, sitting by water dish"> </A>.</P>

     Experiment with this by changing the preferences on your Web browser so that it does not automatically load images. Most browsers will give some display of the text from the ALT, but you may have to position your mouse pointer over the affected region.

     Use your browser's provisions to view the document source to see how other Web pages you like were constructed. In this way you'll be able to see fantastic quantities of examples as you browse around the Web. Also, check the HTML references to find out about other tags and optional attributes not discussed here. Many of these substantially change the overall appearance of your page, including the use of colors and background images. Regions within images also can be clicked on as a means of user selection of the next topic to be displayed.

     Discuss principles of layout and visual composition with people in art or advertising. Compare your Web pages with what you learn, and make modifications to make your Web appearance more effective. Discuss why this would be important for businesses or groups trying to deliver lots of information over the Web.

     Look at your Web pages with many different browsers or different versions of the same browser. Note things that aren't done consistently between browsers. What HTML tags cause the biggest mismatches? Discuss what you should do about these inconsistencies so that your Web pages present as consistent an appearance as possible to your readers.

     Segmenting all you want to say into a group of separate Web pages involves many considerations. If you have a lot of material all in one page, it will take a long time to load that page using a modem. If you break it up into many smaller pages, you'll need to write something like a table of contents, and your readers will need to be frequently clicking on links to load new small pages. Also, it won't be possible to rapidly read, or to do an electronic search through the whole document at once. Consider this situation applied to: yourself, a small store near you, and a big company with offices or stores all over. How could you keep track of all that gets written by all those employees? How could you make sure the Web pages stay easily readable for new readers? Do too many links eventually just get tiring to your readers?

     Look into using active content (parts that move and interact with the reader) in your Web pages, including such technologies as XML, Java, JavaScript, and ActiveX. This could easily turn into a computer programming project, if you're so inclined.

     Look into using more complex HTML such as TABLEs and FRAMEs to control the layout and appearance of your pages. (Some types of pages need this assistance more than others.)

      Investigate creating programs that run on a Web server to process inquiries from Web page users. Such applications include looking someone up in a phone book, taking an opinion poll, and keeping track of grades for students in a class. This is definitely a programming project.

     Discuss implications of the copyright laws on your freedom to use images and other parts of other people's Web pages within your own Web page, or within a new Web page you're making for a friend's company.

     Learn to use a program that helps you lay out Web pages easily and pictorially. Evaluate whether the time spent learning this tool is "worth it" in terms of time it could eventually save.

Several sources on Web page development can be found at:

Adapted from material developed by Illinois 4-H. Used by permission.

For IFAS-related questions or information, please contact IFAS External Relations.
Copyright © 1994-2000 | University of Florida | Institute of Food and Agricultural Sciences | Gainesville, FL 32611
For Web site problems or suggestions, contact the site Web Master.