The Electronic Syllabus:

Word to Web

Dana Ward
Pitzer College

Click here to download a MSWord version of this paper

     Producing an electronic version of the traditional syllabus is as simple or as complex as you want to make it. Before deciding how elaborate you want your syllabus to be it is important to make sure you understand the rudimentary architecture of 1) your server, 2) the internet in general, and 3) the World Wide Web in particular.

Servers

     A server is simply a computer which allows other people to access files you have saved on that computer. One way to grasp the server's function is to imagine a restaurant: the server is the waiter, the files are the dishes, and you are the cook responsible for preparing the dishes on the menu.

      The basic file structure is the same for all servers. Individual files are saved in "directories" which are sometimes referred to as "folders". You can save as many files as you want in a directory and you can have many subdirectories inside your directory. Indeed you can have subdirectories within subdirectories ad infinitum.

      In most university settings the server is usually a Unix or Vax computer, but you can also turn your own personal computer into a server. What kind of computer functions as the server is not as important as knowing how to save files onto the server.

      When you are assigned a computer account, in essence you have been given a directory within which you can save files. Within that directory you can save files which you intend for public consumption and files which only you (and, of course, your system administrator) can access. For example, at Pitzer College, my directory can be found inside the "faculty" directory and is creatively named "dward". Inside the directory "dward" I have many directories and files which only I can access, for example my email files, and I have a much larger number of files which I have made available to the public in a directory named "public_html". By default, most servers are configured so that any file within a "public_html" directory is accessible to the public via the World Wide Web (WWW). If you want to serve up a syllabus, you have to get that syllabus inside your public_html directory which is inside your personal directory, which, in turn, is inside the faculty directory on the server at your academic institution.

      You don't want to keep every file in the top level of your public_html directory because eventually it will become unwieldy and excessively long to sort through. Give some thought to your directory organization as it will save you a lot of time and effort in the long run. An obvious subdirectory might be a "graphics" directory in which to put all graphics material, perhaps subdivided into various categories such as bars, clipart, or photos. A graphics directory is important because you will no doubt be using graphic material in a variety of files and it is a waste of memory (yours and the computer's) to have multiple copies of the same graphic scattered around a variety of directories. Another obvious subdirectory is a "classes" subdirectory within which you will nest another subdirectory for each class you want to put online.

      Don't go overboard creating subdirectories because you may end up with a web address (url, or uniform resource locator) that is excessively long. Each directory becomes part of the web address (url). For example, http://www.pitzer.edu/~dward/classes/Anarchy/anarnet.html is the address for my "Anarchy and the Internet" syllabus. This address indicates the file can be found on the WWW server at Pitzer, in the faculty directory (~ is the default for "faculty" or "student" directories, a practice which shortens urls), in dward's public_html directory, in the classes subdirectory, which contains the Anarchy subdirectory with the anarnet.html file in it.

      It is important to remember that any file anywhere in the public_html directory and in any subdirectory within the public_html is readable by anyone in the world with an internet connection even if you have not "linked" it to anything within your public_html directory. There is one important exception to this rule (involving creating a subdirectory with restricted access) but to avoid embarrassment, don't put anything inside your public_html directory that you wouldn't want your grandmother, or, more importantly, your grandmother's friends, to read.

      Saving files and creating directories will vary depending upon whether or not you created your file using a personal computer, or you created the file directly on the server. If you created the file on the server, then you probably don't need this tutorial. Consequently, we will proceed from the assumption that you created your file on your personal computer. To get the file to the server you will have to use one of the basic internet processes known by its initials: ftp, which stands for file transfer protocol. Once we create the online version of the political psychology syllabus we will ftp the file to your server. If you are a Mac user, you will no doubt want to use "Fetch" (click to download a copy), a fine piece of free software developed at Dartmouth. NonMac users have a variety of essentially similar software including CuteFTP (Click to downlad a copy), RapidFiler, and many others. Fetch, or any other ftp software, is used to move files from one computer to another computer via the internet, and also can be used to create directories, which is our cue to turn to a brief outline of the internet.

Internet Anatomy

      The internet can be envisioned as an organism composed of a rapidly increasing number of cells (yes, some cancerous) joined together through a set of interrelated and interacting systems much like our bodies are composed of cells joined together through skeletal, nerve, respiratory, circulatory, digestive, and other systems. The internet is a set of distinct systems, including email, ftp, telnet, usenet, gopher, and the young upstart, the World Wide Web. Given the high level of system integration brought about by the WWW, it is easy to forget that the internet is not a single system, but a set of systems, each of which operates in a particular way and performs a particular function. For a more complete introduction to the various internet systems see "A Content-Based Approach to Internet Literacy", and "Political Psychology and the Internet", papers I prepared for previous workshops. I have also created "modules", discussed below, which deal with each internet system and can be folded into a political psychology syllabus to help students utilize each system. Here I will focus on particular components of each system which can be integrated into a political psychology syllabus.

Email

      Email is the most used internet system, and the one internet system with which almost anyone associated with a university is familiar, if not proficient. For many people, emailing is limited to sending and receiving text messages. Email, however, can be used for much more than electronic memos. You can send entire formated texts to publishers, send and receive software, have your students turn their course papers in as email attachments which you can edit and comment upon (even audio comments), engage in scholarly group discussions, and explore the World Wide Web using only email!

      In constructing an electronic political psychology syllabus we will be using email 1) to create a class discussion list, 2) to join the political psychology discussion list, and 3) receive and return papers.

Telnet

      Telneting is used to access a remote computer from your personal computer or the networked computer in your office. Many libraries, for example, allow anonymous users to access their catalogs via telnet connections. If you are traveling, you may access your email account using telnet, or you may use telnet every day, as I do, to access your email account or the files in your directories on your server. When you telnet, your keyboard sends commands to the remote computer which, if it is in a good mood, carries out your orders.

      In our political psychology syllabus, we will use telnet to access libraries around the world in the initial stages of producing a research paper. In a relatively short period of time it is possible to develop an extensive bibliography for student research projects. These bibliographies can be archived, used, and updated by students in subsequent classes.

Gopher

      The gopher system, for all intents and purposes, has outlived its usefulness. A mere five years ago, the gopher system was a basic component of the internet, but it has been pushed into the background by the WWW. The gopher system is, in essence, a global collection of file directories and subdirectories accessible by the public. It is very much like the WWW except it is text only, hence its eclipse by the WWW. There are still some useful sites around, and if all you need is reference material in text form, the gopher system can be a superior alternative to the WWW. In our political psychology syllabus we will use the gopher system only to let students see the way the internet used to look, and to access some basic reference texts.

USENET

      USENET is where you find most the unsavory internet material, a lot of useless chitchat, as well as a few indispensable resources. The USENET system is a huge bulletin board where people can post and read messages about almost any conceivable subject. It is organized by subject categories and includes the news wire service feeds. USENET can get boring quickly, but if you have a specific question, USENET may be where you can find the answer. There are search engines that can find previously posted USENET material and you can post your questions directly to the current discussion in the hope there is someone monitoring the discussion who can answer your question. This is particularly useful for computer related questions. You need software designed to access USENET to read and post messages, but software such as NEWSREADER is free and widely available, or you probably can connect to USENET via your campus server. Of course, many web browsers can access USENET as well.

      For the political psychology syllabus we may want to alert students to one or two topic categories and make sure students understand how to search USENET archives.

FTP

      Early in the development of the internet, scientists needed a way to quickly and efficiently transfer large amounts of data, which led to the development of the File Transfer Protocol, or ftp system. It is now a relatively simple and straight forward process to transfer any type of data across the internet using ftp software. You can both send and receive files using ftp. You can also do a lot of the basic management of your file directories, including creating, re-naming, and deleting using ftp software.

      For the political psychology syllabus, we will be using ftp software primarily for transferring the syllabus itself to the server.

World Wide Web

      The WWW has transformed the internet by combining access to all the previous internet systems and extending the internet to include audio, video, and graphic material. The software, or browsers, used to access the WWW are so simple to use, even parents can figure it out without help from their children. If you can use a mouse to point and click, you can get anywhere you want on the internet. The WWW is composed of a rapidly expanding number of "sites" with collections of files that have been made available to the public. Each site generally has an entry referred to as a "homepage" where you can access all the other files at the site and each file is referred to as a "webpage". Our political psychology syllabus will be a webpage probably linked to your personal homepage or your academic institution's homepage.

      For the political psychology syllabus, we will use the WWW to deliver the syllabus to students and to access material assigned to the students to read. This will involve learning a few (very few) basic hypertext markup language (html) commands.

Accessing Internet Systems

      While it is possible to access all internet systems using a single piece of software such as Netscape Navigator or Internet Explorer (IE), I recommend that you get the best (usually free) software for each system and become comfortable within each system. While Netscape and IE are great browsers and can do just about everything, they are the best software only for browsing the web. Other dedicated software generally performs either better or provides more options within a specific system. The trend is definitely toward fully integrated software, but it comes with costs. If you use dedicated software for each system, you can perform operations in the background while still browsing the web, or reading email, or telneting, all simultaneously. The major cost to the single application approach, however, is you become dependent upon a single company which may provide the best overall performance across systems, but may not provide the best performance within each system.

      There are many good pieces of software available for each system. The following list contains my personal preferences for each system.

Download Software by Clicking the Link
SystemMacNonMac
EmailEudora or PegasusEudora or Pegasus
TelnetNCSA TelnetTrumptel
FTPFetchCuteFTP
GopherTurboGopherHGopher
USENETNewsWatcherFreeAgent
WWWNetscape or IENetscape or IE



Building an Online Syllabus

      While it is possible to create an online syllabus without any knowledge of hypertext markup language (html) you will have very limited control and flexibility. The WYSIWYG (What You See Is What You Get, pronounced whizzywig) editors do a fine job, but the amount of energy you spend mastering WYSIWYG software is only a little less than the energy needed to learn basic html. Furthermore, many WYSIWYG editors actually produce bad html (both the Microsoft and the Netscape editors included) so I recommend learning html, something you can do in a matter of a few hours or days. In the workshop, we will learn the basic commands for controlling text appearance, how to place images and graphics, and how to create links to your own internal webpages and to external sites.

      There are three general ways to prepare a syllabus for the web. First, you can put a syllabus online which is simply a mirror of your traditional printed syllabus. It will be exactly the same as the paper version except it will not have any of the special font style such as bold, italics, underlining, and so forth. There will be no links or additional graphic material. Second, you can create the same syllabus, but with most of the font styles and layout retained, but still without links or additional graphics. Finally, you can create a full-fledged web version of your syllabus with all the font styles, links, graphics, bells and whistles you want.

HTML Template

      Regardless of which option you use you will need to have a basic html template at the beginning and the end of the file. The template elements tell the server what kind of file it is, when it starts and when it ends. These are the basics:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">
<HTML>
<HEAD>

<TITLE></TITLE>

</HEAD>
<BODY>

</BODY>
</HTML>

Notice first of all that all the text above is contained within brackets "< >". Commands and comments are contained within each bracket. The brackets and anything in between are not rendered by web browsers (i.e., you don't see them on the webpage). The first bracket contains a string of text which begins with an exclamation point (!). An exclamation point is used to designate a "comment" which is part of the source code, but does not show up in the web browser. In this case the comment identifies the file as an html file conforming to HTML 3.0 standards. You do not really need this first line, or any comment, but comments can help identify the document, help you keep track of how you formatted the document, or identify yourself as the author of the page without that information actually showing up in the browser.

      The rest of the commands are necessary. The first command, <html>, designates the start of an html document and the last command, </html> designates the end of the html document. The only difference is that the last command contains a slash (/) at the beginning of the command. This is basic to writing html. Virtually all html commands use the same structure. The first command starts a process, then the same command with a slash in front ends the process. Anything between the commands will be processed accordingly. So, if you type <blink>Don't ever use the blink command</blink>, when the browser encounters the blink command, it will start blinking all the following text until it encounters the </blink> command. In this example, the words "Don't ever use the blink command"  will be blinking.

      The <head></head> commands identify the "header" of the document. In this template, the only information that can be placed in the header is the title of the document, which is placed between the <title></title> commands (it is possible and desireable to add other things to the header, but let's keep it simple for now). What you type between the title commands is what will appear in the bar at the top of the browser window, not the title that you may have typed at the head of your syllabus. So, if we type <title>Political Psychology Syllabus</title>, the words "Political Psychology Syllabus" will be at the top of the browser window as the browser reads the file. If you put nothing between the title commands, it will simply say "untitled".

      The final command in the template is the all important <body></body> command. Everything you want to show up on your web page goes between the <body></body> commands. So that's almost all the html you need to know to get something online, so let's start publishing!

Syllabus 1: Text, no font style, graphics or links

      The simplest and quickest way to get a syllabus on line is to open the syllabus with your word processor software and save a copy as "text only" or "text only with line breaks". Both MS Word and WordPerfect should have this option in the "Save As" dialogue box. (You can use any text editor to create the file, and if you are going to be doing a lot of html, you should get a dedicated html editor such as BBedit for Mac users or HotMetal for nonMac users.) When you save a file that is destined for the WWW, be sure it has an extension, the three to four letter long tag at the end of the file name beginning with a period that defines what type of file it is. In this case, save the syllabus file with an .html extension (or .htm if you are not using a Mac) on the end of the file name, use only lower case letters to name the file and do not put any spaces in the file name. So, for example, you might save the syllabus as: polpsysyllabus97.html Following the lower case standard with no spaces and the .html extension will allow you to transfer the file onto your server with no changes. If you forget the .html extension, chances are your web browser won't be able to access the file. You can use capital letters, but if you always use lowercase, you never have to remember which parts of the url are capitalized.

      Next, you will have to apply the template to the file. If you want to use the text only version of your syllabus, simply divide the template between the <body> </body> commands and place the top half of the template at the head of your syllabus file, and the bottom half of the template at the end of your syllabus file. Next, immediately after the <body> command, type the preformated command: <pre> and immediately before the </body> command, type the </pre> command. The preformated command tells the browser to render the material exactly as it appears in the file. Now save the file again as "Text Only" or "Text Only with line breaks" and you are ready to move the file to your server using ftp software.

      Alternatively, create a new file that contains the template. Type in the preformatted commands between the body commands, i.e., <body><pre></pre></body>, and then copy and paste the entire original syllabus between the <pre></pre> commands, save the file as "text only" with the .html extension and you are ready to move the syllabus to the web by using ftp software to place the file somewhere in your public_html directory.

      To use the ftp software, all you need to do is boot it up and in the dialogue box which appears, type in the IP address of the server where you want to save the file, your user id and password. The IP address is either a name or a number (actually, both) that is assigned to your campus server. For example, at pitzer the WWW server is named calvin (we also have a hobbes). If you do not have a public_html directory in your directory when it opens, you will need to create one which you can do by going to the menu bar and finding the directory commands to create a directory. Make sure you use lower case letters and you join the "public" and the "html" with an underscore, not a hyphen. Next, open the public_html directory you created, create any other directory you need and then place the syllabus in the desired subdirectory by "putting" the file. "Get" means that you want to move a file from the server to your personal computer, while "Put" means you want to transfer a file that is on your personal computer to the server.

Syllabus 2: Text with font style, but no graphics or links

      The second approach will turn a regular syllabus created with a word processor into an html document that retains the font style. This requires either using the most recent versions of MSWord or WordPerfect, or it requires using a separate piece of free software. If you have the most recent versions of the popular word processors, you will probably have the option of saving the document as html. Go to the "File" menu at the top of the processor window, go to "Save As", and in the dialogue box see if there is an html option. If so, select it, and the document will be automatically formatted as html. If you do not have that option, you will need software that converts rich text formated documents into html documents. Strangely enough, the name of the software is "rtftohtml" for Mac users and nonMac users can use the more parsimoniously named "rtftohtm". Rich Text Format is one of the "save as" options in both WordPerfect and MSWord. Save your syllabus in rich text format and attach a .rtf extension to the file name, e.g., polpsysyllabus97.rtf. Next open the software rtftohtml and with it, "open" your polpsysyllabus97.rtf file. Automatically, the software will create an html version and deposit it in the same place you have your .rtf file. Sometimes the software encounters formating or characters it cannot recognize, and it will create an error file if this is the case. You can inspect that file to see what it did not process. You will now have a file named polpsysyllabus97.html in the same place as your .rtf file and all you need to do is move the .html file to the server using ftp software. If this is confusing, and you have a browser which can handle Shockwave files, my very first "Director" "movie" demonstrates this process and can be found at the following url: http://www.pitzer.edu/~dward/wwmovie.html

Syllabus 3: The Works

      The two methods above will get a syllabus on line, but it will not have any of the characteristics that make an online syllabus so useful: links. You can follow one of the above methods to get the syllabus on line, then gradually add to that syllabus once you master the techniques described below. We will go over 1) text appearance, 2) color and graphics, 3) external links to other sites, 4) internal links to your own files.

      There are a number of very helpful online tutorials that will take you through the basics of writing html. These can be found in the WWW module I created for the Internet Literacy Skills (ILS) modules. Here I will cover the simplest commands we will be using as we build the syllabus and integrate the ILS modules into the syllabus.

Text Appearance

      You cannot really control the type of font used in an html document because the end user can set the font style in their own browser, but you can still control quite a bit of the text appearance. You can control the relative size of the font (not the absolute size, as that is also determined by browser settings), the color of the text, and things like italics and boldface font. Here are some basic commands (commands are case insensitive, i.e., can be either upper or lower case or mixed):

Bold command: <b></b>
Italics command: <i></i>
Big font command: <big></big>
Small font command: <small></small>
Font color command: <font color=blue></font>
Font size command: <font size=3></font>

      All text that falls between any<command> and </endcommand> will be rendered accordingly. So, <b>everything between these commands will be bold</b>; <i>everything between these commands will be italicized</i>; <font color=red>everything between these commands will be red</font>; and so forth. The big and small commands make the text one size smaller or larger than the base font. The font sizes can be set to any size between 1 and 6, with six the biggest. The text color can be set to any one of 256 colors using "hexadecimal" or rgb code (see the color and graphics section), or to any one of sixteen standard color names like, red, yellow, green, blue, etc.

      Another set of useful commands are the heading commands. Most syllabi will be divided into different sections which can be set off by using heading commands. Everything between heading commands will automatically be in bold and there will be an automatic return at the end of the command so text following the end of a heading command will start two lines down. Headings come in six sizes, with one the largest:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
If you want the heading centered the command would be:

<h1 align=center></h1>, or, if you want to center anything that is not a heading, use the center command: <center></center>.

      The most useful command of all is the <p> command, which creates a paragraph break. The <p> command is one of the exceptions to the basic structure of html in that it will work without the </p> command. But good html style should start each paragraph with the <p> command and end each paragraph with the </p> command. That practice will certainly make editing documents easier. The <p> command enters an automatic line break between paragraphs, but it does not indent the text. No matter how many spaces you may type at the start of a paragraph, browsers push the text to the left margin. If you want a paragraph to start with spaces, you need to type in a "special character". Special characters are used for all letters that have tildes, umlauts, grave, acute accents and so forth. All special characters start with an ampersand and end with a semicolon. The special character for a single space is &nbsp; which you can remember as a nonbreaking space, i.e., nbsp. If you want the paragraph to start with five spaces you will need to type &nbsp; five times.

      Finally, there are two more important commands that do not conform to the <command></endcommand> structure. Since screen widths vary dramatically depending upon size of the monitor and the font settings, browsers wrap text on the screen until commanded to stop wrapping. That command acts like a carriage return and forces the browser to start the next text on the left margin and is called a "break": <br>. If you want extra lines between text, simply type as many break commands as you want. So, for example, text separated by three lines will require four breaks (one to "return" the carriage, and three to create the three line space): <br><br><br><br>.

      The other command that is an exception to the </endcommand> rule are horizontal rules, or lines that run across all or some portion of the screen. These lines come in six thicknesses. If you only want a single line all across the screen, the command is: <hr> which stands for horizontal rule. If you want the line to appear thicker the command is <hr size=1> or any number up to six, with six the thickest. If you want to limit how far across the screen the line extends, you can define its width in percentage of the screen terms with the following command: <hr size=4 width=50%> That will create a medium thick bar half way across the screen. Incidently, without the width command, the bar will extend beyond the screen on the right. If you want a "clean" termination of the line, but want it to extend the full width of the screen, set the width to 100%.

      There are many other commands, most notably those that create various types of lists, tables, and forms, but these are most of the commands we will need to handle the syllabus's text appearance.

Color and Graphics

      Aside from text color, a webpage can contain a wide variety of color graphics, background colors, and link colors. The general document color commands cover 1) the "background" color, 2) the "text" color, 3) the "link" color, 4) the "active link" color, and 5) the "view link" color. The background color is the color that appears in the background of the page and can be thought of as the color of the "stationary" upon which you write your syllabus. Text color is obvious. The link color is the color any previously unvisited links will exhibit. When you click on a link, it flashes a different color for a half second. This is the "active" color. After you have viewed a link, the next time you encounter it, the link will be a different color indicating that you have already viewed that link, hence it is called the "view link" color. All these color characteristics are controlled from within the basic body command. The early browsers could read sixteen colors defined by name, but that number is rapidly increasing. Two hundred and fifty-six (technically it is acutally a few less) colors can be used with either hexadecimal codes or red-green-blue codes. There are online charts you can use to find the code for various colors (the following url is a good place to start for an explanation of rgb and hexadecimal codes along with links to color charts: http://www.connect.hawaii.com/hc/webmasters/Netscape.colors.html), or you can use a nifty piece of free software called WebColor that will allow you to select all the colors and write the html for all the attributes controlled from within the body tag. The color codes are six digit figures which can combine letters and numbers for all the various combinations of red, green and blue that make up the 256 colors browsers can distinguish (there are in fact millions of such combinations, but browsers read only a subset). So, for example, <body bgcolor="#ffffff" link="#3C628A" vlink="#ffffhh" alink="#0000ff" text="#000000"> defines all the general color characteristics of the document, in this case a white background with black text and various link colors. If you only use the <body> command, there will be no background color and all the link colors and text will be the default colors, i.e, grey background, black text, blue links, red active links, and purple viewlinks. You can change any one of these, all the colors, or any combination by simply adding the color definitions within the body command. The key to coloring your syllabus is to be sure the various link colors, background color, and text color do not clash and do not "bleed" into each other. In short, be sure you can clearly distinguish between the various colors on the screen and that the colors are easy on the eyes.

Text Color

      As discussed in the text appearance commands, you can define the color of particular sections or individual letters within the body of your document by using the font color command: <font color="#XXXXXX"></font>. Anything between the start and stop command will be whatever color you place between the quotation marks after the equal sign.

Embedded Graphics

      Embedding graphic materials in your syllabus can add a great deal to its attractiveness and educational value. A picture of Piaget along side the assignment to read one of his books connects the student to the author in a much more direct manner. Bars and buttons help visually organize the material and set off the different sections of the syllabus. There are many online resources for bars, buttons, clipart and the like. Of course, you can create your own graphics and you can scan in any photographic material you want. Once you have a digitized graphic, it is a very simple process to place that graphic in your web document. The tag to place a graphic begins by identifying the command as an image placement command. The command contains the "address" where the graphic is stored, and has an alternative name that will show up if the document is accessed by a nongraphic browser (such as lynx) or if the graphic does not load for some reason when the user accesses the file. For my picture on my homepage, the command that gets my mug on your screen is: <IMG SRC="dan.gif" ALT="Dan's picture" ALIGN=LEFT>. The "img src" defines this command as an image source. Inside the quotation marks is the "address" for the graphic image format (gif) photo named dan.gif which is in the same directory as the homepage file, the text description goes in the quotation marks after the alternative description tag (ALT) and the align command tells the browser to place the picture on the left hand side of the screen. In short, to put a graphic on a webpage, all you need to do is tell the browser where the graphic is stored. To be polite, you will want to add the alternative description, but that is not necessary, and you don't even have to use the align command. If you don't, the browser will just put the graphic in the document where it encounters the command.

      Had I known what I know now when I created my homepage, I would have had my picture in a graphics directory. In that case, I would have had to tell the browser how to find the picture. Since my homepage file is in the top level of my public_html directory all I have to do is point the browser to the graphics directory and name the file to retrieve from that directory. The command, therefore, would be <IMG SRC="graphics/dan.gif" ALT="Dan's picture" ALIGN=LEFT>. If I had created a photo subdirectory within the graphics directory the command would be: <IMG SRC="graphics/photos/dan.gif" ALT="Dan's picture" ALIGN=LEFT>. The browser would find the graphics directory, then the photos subdirectory and retrieve my picture to place on the homepage.

      There is more you can do with the image source command, including controlling the actual size of the graphic, but this is all you need to know to get a graphic online. The trick is to understand how the address structure works, which is to say, knowing how urls are structured, which, in turn, is what you need to know to make internal or external links.

External Links

      External links are actually easier to master than internal links. To link your document to an item on another server, all you need to do is use the anchor, or link, command and incorporate the url, or web address, of the item to which you want to link. The basic anchor command is <A HREF=""></a>. Between the quotation marks is where you place the url, and between the command and endcommand tag you place the text which identifies the link and will be highlighted as a link on your webpage. To link to the Library of Congress, therefore, the tag would be: <A HREF="http://www.loc.gov">The Library of Congress</a>. That's all there is to making an external link.

Internal Links

      Internal links are a bit more complicated, but follow the same principle. When I placed my picture on my homepage, in essence, I made an internal link. That is, I linked a graphic to a page within my own public_html directory structure. In addition to graphics, you can link other documents within your directories. You might have a link to a manual of style, or paper writing instructions, or to readings you have scanned into your directory. To link either graphics or other files to the syllabus you have to be able to move up and down in your directory structure in order to tell the browser where to find the material you want linked. The browser always starts from the directory it is already in, so if you want to point the browser to a subdirectory farther down your directory structure you just name the directories in sequence, ending with the file you want.

      For example, assume we are working on a file named 97.html residing in the following directory structure: public_html/classes/polpsy/syllabi/97.html. If I want to make an internal link between my homepage which is in the public_html directory and the 97.html file I type this command on my homepage where I want the link to appear: <A HREF="classes/polpsy/syllabi/97.html">1997 Political Psychology Syllabus</a>. Thus, if the file to which you want to make a link is deeper in the directory, you simply start the address with the next subdirectory. But if you are already deep in your directory, and want to link to an item higher up, there is another convention that comes in handy. For example, at the top of the syllabus file 97.html, I have my name, office, phone number and so forth and I want to link my name to my homepage. To make that link, I have to back the browser up through two directories (polpsy and classes--we are already in syllabi). When a browser encounters two periods and a slash in a link command, it understands that it must back up a directory. So to make the link from the syllabus 97.html back to my homepage, I type the following command: <A HREF="../../homepage.html">Dana Ward</a>. The browser will back up two directories and find the file named homepage.html.

      It is also possible to make links within a single file. Internal links that remain within a file are created in a slightly different manner. For example, if I title my document "Political Psychology Syllabus and Readings", I might want to make a link between the "Readings" in the title and the Readings section in the last half of the document. The command for such an internal link would look like this: "Political Psychology Syllabus and <A HREF="#reading">Readings</a>". When the browser encounters an anchor command with an address that begins with the pound sign (#), it knows the desired link is to an item within the file it is reading. It then looks for the "name" anchor within the document. In this case, I named the "name" anchor "reading" and at the section heading where the readings start, I type the following command: <A NAME="reading">Readings</A>. When the reader clicks the link at the top of the document, the browser will jump down the document to the beginning of the Readings section and place that text at the top of the screen. You can name internal links anything you want and make as many internal links as you want. (This, incidently, is how to make hypertext footnote links within a document.)

Sample Syllabus

      That's everything you need to know to make a basic syllabus. Let's look now at the sample syllabus I created which incorporates the Internet Literacy Skills modules designed to help students learn about the internet as they learn about the course content. The Sample Syllabus is best viewed online and can be found at: http://www.pitzer.edu/~dward/classes/polpsy/polpsysyl97.html.

      To study the source code for the syllabus and see how I made everything appear the way it does, you need to "view source" in your browser. For example, in Netscape, when you are viewing the syllabus, on the top menu bar under "View", go to "Document Source". If you have checked "Use Netscape" in your options, then Netscape will put up a new window with the source code. If you do not have "Use Netscape" checked for your view source, a file will be downloaded containing the source code in whatever application you have chosen for "view source".

      By looking at the sample syllabus and going either to the appropriate module of the Internet Literacy Skills directory, or to the text above, you should be able to figure out how the syllabus was created. In the workshop, we will go over as much of the sample as time permits. Aside from the commands discussed above, I used a set of simple table commands for the top of the syllabus, a descriptive list command for the day to day readings, and an ordered list command for the internet components of the course. See if you can decipher how the commands work. To help interpret the commands, here are the commands defined:

<table> starts the table and must be ended with </table>
<tr> identifies the beginning of a table row, terminated with </tr>
<td> is used for the data in each table cell, hence, table data and must also be terminated with </td>

A descriptive list is a list using text. Descriptive lists begin with the <dl> tag and end with the </dl> tag. Each item in the list begins with the descriptive text tag <dt> and the descriptive data <dd> tag acts as a carriage return which indents all following text five spaces from the left margin until encountering the end descriptive text tag </dt>. The ordered list works roughly the same way except each item in the list is numbered consecutively. The command to start the ordered list is <ol>, each list item is defined by <li> and the list is terminated with </ol>.

      With a little bit of study and an understanding of the commands discussed thus far, you should be able to make sense of the sample syllabus and to adapt it to your own needs. Once you have the syllabus created, save it to your server using ftp software as described in the Syllabus 1 section. Good luck and feel free to contact me if you have any problems at dward@pitzer.edu.