Developing a Sample Web Page

by Donald W. Hyatt

How simple can it get?

Although there are programs that will convert text to HTML for you, it is fairly easy to make a web page without that help. It is much easier to use a simple editor like wordpad or notepad in a Microsoft environment, or vi or emacs in a UNIX environment rather than a word processor. Word processors insert their own formatting characters and commands in the text that can confuse the web browser.

For step-by-step instructions for making a very simple web-page for our computer systems in the CS Lab, take a look at this brief Web Page Tutorial.

To make a simple web page, just type in the text as well as the HTML tags needed for formatting. Save the file with the a name that ends in either ".htm" or ".html", and you have created a web page. On the systems at Jefferson, you need to put these files in a directory called "web-docs" so that our web server can see the file. If you are a teacher and have a LAN Account with space on the P-Drive, the file can be placed there also. After that, as long as our web server is working, anyone who has access to the Internet from any place in te world can read your files. With so many documents out there, though, the probablility of someone finding your stuff is rather remote unless you tell people about your files.

Lets look at an example: first.html

       <HTML>
       <BODY>
       <H1> Computers are Great  </H1>
       Welcome to the Internet.
       Learn HTML and make a Web Page!
       </BODY>
       </HTML>

See the results
Notice that even though the two sentences were on different lines, the web browser put all the text together as one big blob. That may seem irritating at first, but it can be an advantage in many ways. First, it won't make any difference how unorganized the text is, the browser will try to make it fit the size of the window. If someone makes the window a different size, the text will adjust. In fact, in order to make a paragraph, one must actually insert a paragraph marker as shown in first example of the next section.

Adding new features

Try these simple modifications. As you look at the examples shown below, also click on "View" followed by " Page Source" on the Netscape browser to see the actual HTML code that made the web page.

To make the two sentences appear on separate lines, put a <BR>, or a "break:, or else a <P>, or "paragraph marker", after the word "Internet." The text should now appear on two lines.
See the results
To add a graphic, just insert an "image tag", or "<IMG>, including the name of some available picture. In this example, we added the line:
<IMG SRC = "spheres1.jpg" > on a new line below the title.
See the results
To center the Title and the Graphic, we have to use the "center tag". This tag has a counterpart, so we know when to stop centering text or graphics. In this example, type the tag <CENTER> on a line between <BODY> and <H1>, and also add the tag </CENTER> on the line following the <IMG SRC = "..."> tag.
See the results
To link the words "Learn HTML" to a web page on this computer about HTML, type < A HREF = "basic.html" > prior to the word "Learn" and put </A> after the word "HTML".
See the results
To make the two sentences part of an ordered list, type <OL> on a line before the list, and </OL> after the list. Put <LI> at the start of each sentence.
See the results
To change the background to DEEP BLUE and the text to WHITE, change the first <BODY> tag to:
< BODY BGCOLOR = "#000044" TEXT = "#FFFFFF" >
See the results

Any web pages that you make can be viewed on your computer using a browser like Netscape. To make those files available to other people on the Internet, you must place them on a "server" that is running some other special programs and its location, or "domain name", is know to others on the Internet. Because web servers run other complex programs and should maintain a high speed connection to the Internet 24 hours a day, most people will use commercial providers to host their web pages.

I hope this simple introduction will get you started making some web pages. For additional information, there are excellent resources on the Internet, and you can also buy a good reference book. One of my favorite resource texts is Web Design in a Nutshell published O'Reilly & Associates, Inc. You can also learn a lot by looking at the "source" of other people's web pages. When you see a page you admire, click on the "View" option, and then Click on "Source". The browser will open a new window and will show you the HTML code that created that page.

There are also new features being added to the web design all the time. Unless you are under 17, however, it is almost impossible to keep up. Just do what you can do, and have fun creating some quality content for the web. You may decide to get your own domain, and maybe even start a business! Good Luck!