(Module 10)

Creating a website

  1. A Few Things Before You Begin

    When you make a web site, you are making a set of web pages. These files will live on a public web server. (Probably hhh.gavilan.edu.) Other than that, they consist of files and folders just like the ones in your "My Documents" folder on your computer.

    You probably aren't going to put everything on a single page; rather, you will have a few (or many) pages, with your information organized amongst them.

    A common way for instructors to arrange their web site is to have a folder for each class that they teach. This way, both the instructor and the students can quickly tell which class they are looking at. Having separate folders also helps to keep things organized as the web site grows.

    Pay attention to how you organize your files: make a folder for each class or topic.

  2. Navigation

    Another thing you'll have to keep in mind is that the students need to have a way of moving around the different web pages in your web site. This is commonly called navigation, and on the web, we use links that people can click on to move from one page to another.

    Connect your web pages with links.

  3. Example

    I am making my first web page on my faculty web site. The address (or URL) of this web page will be:


    I will call this my home page, and I will use it as the most general introduction to myself. This is the page where students (or anyone else) can reach the other parts of my web site.

    Essentials for a home page

  4. Making links and navigation
    1. How does a link work?

      1. Anatomy of a link (url.gif)

          Protocol: This will either be http (for a normal web connection) or https (for a secure web connection).

          Host: This is the name of the computer that you are accessing. On the internet, most computers have a name, such as www.whitehouse.gov, or www.gavilan.edu. At our school, the name of the faculty web server is hhh.gavilan.edu.

          Path: This is the file on the computer that you are requesting. The path can have one or more folders in it (just like the folders and files on your own computer) and ends with a filename. So for example:


          specifies the Gavilan web server (www.gavilan.edu) and a folder named 'disted', which contains a file named 'help.html'.

          Another example might be:


          which refers to the faculty web server (hhh.gavilan.edu) and a folder named 'phowell', which contains another folder named 'csis045', which finally contains a file named 'syllabus.html'.

      2. What part of the site is 'yours'?

          On the last example above, notice the first folder in the path. It is called 'phowell', which is my first initial and last name.

          There is a similar folder for all faculty who use the faculty web server. For example, the address to Marilyn Abad's web site is:


          And similarly, the path to Vic Robinson's web site is:


          From that folder with your initial and last name, you have permission to put anything you want. You can create as many folders and files as you like, and nest folders as deeply as you need to.

          1. Every web page lives on a remote computer (or server), which has a name.
          2. Web servers contain folders and files, just like your own computer.
          3. When you own a web site, you are given permission to edit some folder on it, and everything that folder contains.


  5. Thinking about your first web page

        What do you need on your web site? It's up to you, really. You can have as much or as little information as you'd like to share, and have time to write up.

        Many people find that they begin with a few sparse pages, and gradually add to them over the months and years. (The faculty web server, hhh.gavilan.edu, has been up and running for over 10 years now, and many pages have been around for that long.)

        This also brings up the idea of maintenance and upkeep. Hint: write your pages in such a way that there's only a few limited places that you'll have to make changes every semester.

        Things that change with every semester:

        • Your office hours,
        • the particular classes you're teaching
        • Room numbers? Office location?


        Things that change less often: your handouts, syllabi, etc.

        People have found that the fewer time-specific details they add to their various pages, the less updateding they have to do every semester. For example, your syllabus may or may not need the current semester written on it. If it does, it is one more thing that needs regular updating.

  6. Storyboarding

      It helps to draw a picture of your web site while you are first planning or creating it. Start with a box for your home page. For technical reasons, it is usually called "index.html" and the file lives in your folder on the faculty web server. For example,


      is my home page.

      A diagram of a web site will often look like a tree's branches, with links coming from the home page to other files and folders

  7. Common templates

      Here are a few web pages that you can use as inspiration or to simply copy and change to suit your needs.

      1. Home page
      2. Class home page
      3. Lecture page
      4. Syllabus page
      5. Assignment / Schedule page

If you haven't already started your web site, now is a great time to get started with Contribute, the web page editing software.