If you know how to surf the web and send e-mail, you can probably set up your own web site. To make the task easier, we have included a set of template pages that can be downloaded from this site and customized to your needs in just a few minutes. This page gives you the basics of HTML (short for Hypertext Markup Language), which converts text files to web pages. We recommend that you print out this page and download the files listed on the Instructor's Resource page. With the simplified instructions included on this page and the template pages, you can have a functional course web site with a single afternoon's work.
With the instructions on this page, you need no special software or programming skills. You will be creating text files with embedded HTML commands. They can be created and edited with the Notepad editor in Windows or any word processor. Just be sure to save the files as text files (i.e., without embedded word processing formating information). The HTML commands are used by web browsers such as Netscape or Internet Explorer to determine how to display the material in the file. If you want to get fancier, there are a number of web page creation programs on the market. Many of the newest word processing programs also have the options for creating your own web pages. For example, most of the programs in Microsoft Office 97 have the options of saving files as HTML files.
To set up a web site, you need a computer account on a computer that is connected to the internet. If you have an account on such a computer, you can set up your site on your account. The first thing you need to do is to create a subdirectory called public_html, which is where you should store all of your web pages. In UNIX, the command mkdir public_html will accomplish this task. If you are not sure how to do this step on the system you work on, a 5-minute call to your computer help desk should give you the information you need. When you make that call, you will want to ask about two other things. You will want to know the web address for your account and how to make the directories and files accessable to, but not changeable by, your students.
The full address for the home page for the Graziano and Raulin text is http://www.buffalo.edu/~raulin/resmeth.html. The prefix http:// is a part of every web address and can be dropped with some web browsers. The www.buffalo.edu indicates the system on which the web pages reside--in this case, the world wide web connnection at SUNY Buffalo. The ~raulin indicates the account where the web site resides. The file that is the home page for the text is called resmeth.html. The file resmeth.html is in the subdirectory public_html. All web page files will end with the suffix .html or .htm (use htm if you are only allowed three characters on your system). If you use the abbreviated address of http://www.buffalo.edu/~raulin (with no specific filename specified), the web browser will look for the default file index.html. If you are planning on having just a single site, name the home page index.htm and your students will be able to use the shortened address.
Any files on your account (including web pages) will, by default, be readable by you alone. In order for your files to be available to your students, you must make the files and the directories that they are on public with specific permissions. The command for doing that on a UNIX system is chmod 755 filename. For example, the command chmod 755 course.htm will make the file course.html accessible to your students, and the command chmod 755 *.* will make all of the files in the directory or subdirectory accessible. This command makes the specific file named readable by everyone on the web, but modifiable ONLY by you. Ask your computer consultant what command will accomplish the same thing on your system. You not only have to make the files public, but you also have to make all the directories in the path public. On most system, everything in the path will already be designated as public except for your home directory and the public_html directory.
Although you can easily create or modify your files directly on your computer account, it is often easier to create and modify your web pages on your personal computer and then upload them to your account once they are ready. Again, if this is a process that you are not familiar with, you should be able to get the help that you need from your computer center. Most university computer centers will even provide the necessary software free of charge. If you are lucky, you will have an ethernet or similar direct connection in your office, which makes uploading (from your PC to the mainframe) and downloading (from the mainframe to your PC) no more difficult to accomplish than moving files from one directory to another on your PC. Of course, on a PC your files will end with the .htm extension because DOS and Windows only support a three-character extension. In fact, increasingly the .htm extension is used universally on all machines.
Most web sites break the material posted into separate, linked pages. In general, you want the pages to be rather short (no more than three printed pages in length) to facilitate the quick downloading of the page by your potential reader. The organizational structure of these linked documents will vary from site to site depending on the material. For example, in the template pages for the course web site, the first page (known as the home page) is essentially an index of, and a link to, each of the other documents at the site (e.g., syllabus, handouts, exam results). It is also provides links to other sites useful for the students (e.g., the web site for the textbook). It is almost as easy to provide a link to a site half way around the world as it is to provide a link to another page on your public_html directory
HTML tags tell the browser how to format the material for the reader. HTML tags were initially a subset of the tags that publishers have used to format books for production, although recently many specialized HTML tags have been added to take advantage of the increasing capabilities of web browsers. HTML tags are bracketted by a less than (<) and a greater than (>) sign. Note that we have written all of the tags in caps. The tags can be either upper and lower case, BUT by making all the tags upper case, it is easier to find tags in a cluttered text document during creation and editing phases. Finally, note that excess white space (more than one space, character returns, etc.) are ignored when processing an HTML document. Therefore, you can spread a document out with blank lines during the creation phase without affecting how the document will appear, which makes it much easier for you to find things in the text document.
HTML tags are inserted into a document to indicate how it is to be formatted by the browser program. Some tags are required in every document because they provide critical information. Most tags are optional. A small subset of tags can provide powerful formatting capabilities. Note that, unlike your word processor, HTML documents provide relative, rather than absolute, formatting information. For example, a browser program may have to break a long title into two lines on a small computer screen, but may fit the title on a single line with a larger screen. You will want to keep that in mind when formatting a document because many of the formatting tricks that you use with your word processor do not work well with HTML documents.
Most HTML tags are designed to surround text. For example, the tags <I></I> would surround anything that you want displayed in italics. Listed below are such paired tags.
Finally, there are three additional unpaired tags that are very handy in basic HTML documents.
With the template pages that can be downloaded from the instructor's resource page, you should be able to set up a functional course web site in just a few hours. Once you have done this, you will never want to go back to the old way of doing things. By having a copy of the syllabus and all other course handouts on the web, you never have to worry about carrying a constant supply for those students who have misplaced theirs. Once you get used to it, grades are easily posted and can be checked by students from almost anywhere at anytime. After a couple of semesters of using a web site, you will find that you provide more extensive resources for students because it takes very little effort to do so.
Every web page will have the same basic structure plus specific content for that page. The most basic structure is listed below. I used indentation to show the structure more readily. Remember that the amount of white space (spaces, carriage returns, etc.) does not matter, so you can use such an indentation pattern if you like. The entire document is surrounded by <HTML> and </HTML>, and two subsections are marked off in a similar manner (the HEAD and the BODY). Within the HEAD goes the Title of the page, which is surrounded by <TITLE> and </TITLE>. This title will appear on the title bar of the web browser when the page is being viewed. We have shown three elements within the BODY: the headings, the place where the content goes, and the signature. Two headings are shown (a level 1 and a level 2), and both headings are centered (surrounded by <CENTER> and </CENTER>). We will skip over the content for now and focus on the signature.
It is always a good idea to provide a signature to each web page, although it need not be as complete as in this example. The signature is usually separated from the rest of the document by a horizontal rule. Use the <ADDRESS></ADDRESS> tags to surround the address. Your name, phone number, and mailing address each use a <BR> at the end of the line to break to a new line. Remember that carriage returns are ignored in formatting, so if you want to skip to the next line, you must request it explicitly with the <BR> tag. The next line gives your e-mail address, but uses the <A> to surround the address. This format makes the e-mail address a hyperlink to your e-mail address. In most browsers, a click on your address will open an e-mail utility with your address already inserted as the destination. Finally, there is a copyright notice, a last revision date, and the address of the page set up as a hyperlink. It is traditional to also include the address of the homepage set up as a hyperlink.
<HTML>
<HEAD>
<TITLE>TITLE OF THE PAGE</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>LEVEL 1 HEAD</H1>
<H2>LEVEL 2 HEAD</H2>
</CENTER>
INSERT CONTENT HERE
<HR>
<ADDRESS>
YOUR NAME<BR>
YOUR PHONE NUMBER<BR>
Psychology Department<BR>
YOUR UNIVERSITY<BR>
YOUR CITY, STATE, & ZIP<BR>
<A HREF="mailto:YOUR E-MAIL ADDRESS">YOUR E-MAIL ADDRESS</A>
</ADDRESS>
<P>Copyright © 2000, YOUR NAME<BR>
Revised: REVISION DATE<BR>
URL: <A HREF="class-hp.html">class-hp.html</A>
</BODY>
</HTML>
There is an easy way to edit HTML documents and see immediately how they appear when viewed by a browser. Open the file with Notepad and open your web browser (Netscape or Internet Explorer). You can open a file located on your computer by going to the file menu in your browser and selecting the open file command. Now you have the same document being viewed as a text file in Notepad and a web page in your browser. You can easily switch between the two by holding down the alt key and pressing tab. When you have made a change in the file in Notepad, save the change, switch to the browser, and then hit the reload button on the browser to bring up the most recent edition of the file. Do not forget that you have to save the file in Notepad AND hit the reload key to see the effects of any changes that you have made. Note also that most word processing programs can edit the text file, BUT you must normally close the file you are editing before it can be read by your browser--a definite hassle.
Also included in the package of template pages is the syllabus from a recent course (101syll.htm) and a handout from the same course (labreq.htm). These basic handouts were saved as text files and then formatted for posting on my web site in about 15 minutes each. Since many handouts change very little from year to year, this is often a one-time-only task or may require just a few minutes to update the handout each semester. If you are posting several handouts, you might want to start by setting up a basic template for any handout page, which includes a place for the title, the basic HTML elements, a link to the homepage, and the address section. A sample of such a page was given in the previous section. You can then quickly set up handouts by (1) opening the text material for the handout in Notepad, highlighting the entire document, and using the copy command on the edit menu, (2) opening the template page in Notepad, going to the point of insertation, and then using the paste command on the edit menu to insert the handout text, (3) make the necessary formatting changes, add a title, and modify the document as necessary, and finally (4) save the document under another name. If you have a number of documents on your computer, use your wordprocessor to save them as text-only documents, and you will be ready for the process just described.
Good Luck!