Creating a course web site

This documentation assumes that you have a basic understanding of our Unix system (i.e. you know how to log in and navigate through the system), have already created a personal web directory (WWW) to host the class web site, and have a very basic grasp of simple HTML syntax. If you need help with any of this, please consult the additional documentation on this part of the site.

We have created a pseudo course site that you can copy and use as a starting template for your course web site. It is called "Stat 101" and you can see what it looks like at http://www.stat.osu.edu/stat101/

The structure should be self-explanatory. Visitors start at the 'Announcements' page, which also serves as the class "Home" page. Other sections include 'Syllabus', 'Lecture Notes', 'Homework Assignments', 'Practice Exams & Solutions', and 'Other Information'. These are merely predefined based on the most common content of current course pages. You can add/delete/change any of these sections to make them whatever you want.

Directions:

NOTE: In the following directions, replace stat999 with the correct course number (i.e. stat135).

These instructions will step you through creating a class web site in your personal directory. If your class has its own group or directory defined you will need to modify some of the steps accordingly.

The site will be located at: (replacing username and 999 as appropriate)
http://www.stat.osu.edu/~username/stat999/

1. Log into your Unix account and cd WWW, if you don't have a WWW directory, www_setup.

2. Copy the example site with cp -rp /home/web/htdocs/stat101 stat999
   NOTE: The destination directory (whatever you type in place of stat999) should not already exist!

3. To edit on UNIX: You will need to know some HTML (the language of web pages), which basic commands are documented on the Support web site, and the template files have many examples.

   1. Use your favorite text editor (emacs, vi, pico) to edit the .html files (see below) and add your own content.

   2. If necessary, use FTP, SFTP, or Samba to upload PDF files into the appropriate directories (see below).

   If you keep the page that you're working on open in your web browser you can check your work by clicking "Refresh" every time you save a change.

   To edit on Windows: If you choose to edit on Windows, you can use Microsoft Word to edit the HTML (the language of web pages) without knowing HTML.

   1. Bring up your home directory with Samba: Go to Start -> Run. In the run box type: \\samba\your_username, and click Ok. You should now see an Explorer window with your UNIX files in it. (You can also use SFTP to transfer the files instead of Samba.)

   2. Go into the WWW directory, and then the class directory you want to work in.

   3. Pick the .html file (see below) that you want to edit. Right click on it, and a context menu will pop up. Pick edit. This should start Word or FrontPage and you can edit the page. It should save it as HTML when you click save.

   4. You can add links to PDF files within Word, but be careful to get the path to the file correct. You may have to edit by hand or experiment for this to work right.

   5. If necessary, use FTP, SFTP, or Samba to upload PDF files into the appropriate directories (see below).

   If you keep the page that you're working on open in your web browser you can check your work by clicking "Refresh" every time you save a change.

   To edit on Macintosh: If you choose to edit on Macintosh, you can use Microsoft Word to edit the HTML (the language of web pages) without knowing HTML.

   1. Connect to ftp.stat.ohio-state.edu with Fetch (tunneled via SSH if outside the building). Find the .html file (see below) that you want to edit and download it.

   2. Find the icon for the file you just downloaded, and either drag-and-drop it into Word, or Open it from within Word. Edit the file and Save when done.

   3. Drag-and-drop the newly edited file's icon on your computer back into the same location in Fetch to replace the original. You can then Refresh the page in your web browser to see the changes.

   4. You can add links to PDF files within Word, but be careful to get the path to the file correct. You may have to edit by hand or experiment for this to work right.

   5. If necessary, drag-and-drop PDF files into the appropriate directories (see below) in Fetch.

   File structure of the course templates:

   _sidebar.html
   Contains the sidebar at the side of the page. If you want to change the names or remove some of the categories, edit this file. It is included in all the other pages, so editing it once will change it on every page. This is called an "include" file, and is denoted by the underscore that precedes the filename.

   _submenu.html
   Contains the submenu at the top of the page. If you want to change the names or remove some of the categories, edit this file. It is included in all the other pages, so editing it once will change it on every page.

   exams/
   This directory holds the practice exams and solutions that are referenced in the exams.html file. Upload your files (preferably in PDF format) to this directory and then create links to each one in exams.html.

   exams.html
   This is the page your students see when they click 'Practice Exams & Solutions'.

   homework/
   This directory holds the homework assignments and solutions that are referenced in the homework.html file. Upload your files (preferably in PDF format) to this directory and then create links to each one in homework.html.

   homework.html
   This is the page your students see when they click 'Homework Assignments'.

   index.html
   This is the class Home page and the page your students go back to when they click 'Announcements'.

   notes/
   This directory holds the lecture notes that are referenced in the notes.html file. Upload your files (preferably in PDF format) to this directory and then create links to each one in notes.html.

   notes.html
   This is the page your students see when they click 'Lecture Notes'.

   other.html
   This is the page your students see when they click 'Other Information'.

   syllabus.html
   This is the page your students see when they click 'Syllabus'. Ideally, your syllabus should occupy this page in plain simple HTML. You can additionally/instead upload your syllabus in PDF format and link to it from this page.

4. There is a program on the system called HTML-Tidy that will check and fix your HTML syntax, check your page for compliance with accessibility standards, provide warnings and suggestions for fixing violations, and format your HTML code for better human readability. Always check your work with this program by invoking it with htmltidy filename whenever changes are made (Example: htmltidy index.html). WARNING: Your file will be overwritten! HTML-Tidy is usually very intelligent, but can have unpredictable results with especially poorly written HTML. Therefore, when in doubt, keep backup copies.

   Also, remember that you should run www_setup to make sure that all permissions are set correctly.

5. Finally, send mail to webmaster with the location (URL) of your class web site in order to have it listed on the Courses page.