Web Editing On Campus

a brief guide for busy students


Overview

Every student should have a web page, especially graduate students.   Employers are increasingly using the web to find out more about prospective candidates.  I need not say any more about it.  But there are few comprehensive resources to show a non-technical person how to get started.  What software do I use?  Why are my images not working right?  How do I get my pages onto the space my university provides for me?

This is not written for geeks.  There are many many resources out there to help you learn how to code a web page.  But who has time to learn to code, learn the arcana, and fiddle with it for days on end. Creating web pages is a procrastinators dream!  I know from first hand experience.  Luckily I get paid sometimes to do it. You have better things to learn and do like saving lives or the environment. Here is a very brief guide to give you concepts needed to get a page on line and to help troubleshoot common problems.

The following elements are needed to make a web "site"

  1. a place to host  your web pages: a server that you have an account on
  2. a handful of software tools
  3. resources to learn how to make html pages
  4. your collection of text files (HTML format), images, pdf's and other files,  uploaded to the server, following special naming conventions.

1.  your gracious web host

To create a web site you need a "server" that is running special software to "host" your site. Most universities provide this service to their faculty and students.  Outside of the ivory tower, typically people pay a service provider for this service (or it's thrown in). Common service providers for web space include Comcast, AOL, Apple's .MAC service, Yahoo hosting, and a zillion other hosting companies. I've used dreamhost.com (it's cheap and geeky).  MSU calls it the "AFS space".  See below for more details.  

2. Minimum software for the minimum cost

Many programs exist for free, written either on a shoestring or by volunteers.   These tools are free.  They are not flawless.  They are quirky but powerful.  Either open your wallet or open your mind.

Code editing

The bare minimum needed to create an HTML page is a program that creates unformatted text files, that you type HTML code in.   

Image editing

Websites need images, and you need a program to make the images from your camera web friendly.  

Page editing

who wants to write code?  Programs exist with word processors-like tools to create HTML format files.
free: NVu  http://www.nvu.com
commercial: Macromedia Dreamweaver, Adobe Go Live, Nvu, Microsoft Front Page.

Remote file management

You need a program to move your files to/from your web server/host (MSU AFS).  Typically this is ftp.  
Free: FileZilla!  (NVu has a publish function to help you with this.
Free: Windows XP and Internet Explorer have a feature called "web folders' that could be used for transfering files.  
Commerical: (commercial editors listed above have built in site managment)

Browsers

Multiple browsers to preview your site: your site will look different in different browsers.  You should preview in all of them to make sure that potential job doesn't get put off. 

Internet Explorer PC/Mac.  The most popular.  Download from 

Firefox: PC or Mac.  The most standards compliant and free.  

Safari: Comes with the Mac.  

The rest: Opera, Linux, etc.  You don't have time to worry about these.

 3. Resources

An MSU course from Danielle DeVoss: http://www.msu.edu/~devossda/210

There are many many tutorials on HTML on line: google search

4. The nuts and bolts of a web page, in 5 minutes. 

A website is a collection of files (pages, images, and other media)  that you create and 'upload' to the webserver

Someone's browser downloads your page file on the web server onto their computer and "renders" it. 

You need at least one file with the name either "index.htm" or "index.html" all lower case. This is your home page. Additional pages can be named what ever you like in any folder you like.

Web editing details for Michigan State University

About the MSU Server system for web hosting

MSU has a large server system with space available for every student, staff and faculty on campus. It's called the "AFS" space, named after the software that it runs (the "Andrew File System" from Carnegie Mellon). Currently each member gets 100MB, plenty for a web page (which needes to be small and fast).   In a nutshell, you upload, via ftp, to your AFS account in a folder called Web.  
What is FTP? File Transfer Protocol: a way to move files across the internet.  http://www.webopedia.com/TERM/F/FTP.html

Links to AFS instructions in the MSU Techbase:

Instructions on How to upload files to MSU AFS using FTP

Make your first web page, using Windows. 

1. Create a text file with HTMLcode  file using notepad or text edit  And save it as index.html
2. Open the browser to check to see if it looks ok
3. Use ftp to transfer it to the "web" folder in your AFS space (using FileZilla)
4. Browse to your website and check it out.

1. Create a simple text  file with HTML code.
Open My Documents and Create a folder to keep your web site files.. Perhaps ../my documents/my website
Open the windows text editor : Notepad
       Start |All Programs | Accessories | Notepad
 Type or copy the following into Notepad.  This is HTML code.
<html>
<head><title>My first web page</title></head>
<body>
<h1>My first web page</h1>
<hr>
<p>Hello, World!</p>
<hr>
<a href="http://www.msu.edu">Link to MSU home page</a>
</body>
</html>

In notepad, 

2. Preview your file.  

You can store and read web files that are on your hard disk as well as those on line.  This is a good technique to make sure things are working before you

Start your favorite browser and open your html file (web page)

Internet expensive: File | Open | Browse .. 
Firefox: File | Open File |

browse to  your new file "helloworld.html"   

screenshot of your new page

3. Upload

see the iInstructions on How to upload files to MSU AFS using FTP
upload the file helloworld.html

4. Browse

Open your browser.  
Got the address http://www.msu.edu/~yournetid/hellworld.html
(or  http://www.msu.edu/~billspat/hellworld.html)