How to Publish a Web Page

Table of Contents:

• Web Directory
• Copy the Template File
• Edit the Template File
• Publish the Page
• Check for Errors

Step 1: Web Directory

Web files and presentation occur on the Linux (UNIX) system. If you are using Linux (including connecting to Linux from a Windows machine using XWin32 or the SSH Secure Shell terminal window), the procedure to publish the web page is much easier. If you are doing it from your Windows machine we give examples assuming you are using the SSH Secure Shell file transfer facility. If you are not familiar with SSH Secure Shell file transfer, you should review our writeup on that.

All web files are in a directory called public_html in your home directory. The Apache web server looks for a directory with this name whenever there is a request for your files in the form http://www.math.ucla.edu/~user.

The examples assume that you will first change to your web directory, like this:

Linux	Windows
cd $HOME/public_html	Your SSH Secure Shell file transfer window should start out showing your home directory on the Remote side of the window. Find public_html and double click on it.

If this is your first web page at Mathnet, then you probably don't have the public_html directory, so you need to create it first, and you need to give the webserver permission to hunt within it for files.

Linux

Windows

cd $HOME mkdir public_html chmod 755 public_html cd public_html

With your home directory showing in the SSH Secure Shell file transfer window (Remote side), right click in the background and select New Folder. Locate the new directory at the end of the list, and fill in its name with public_html. Right click on its icon, select Properties, and click the checkboxes for Read and Execute in all three categories, if not already turned on (and click OK). Now double click on the folder's icon to change focus into it.

Step 2: Copy the Template File

If you make a lot of web pages you have probably already set up a template page with your favorite styles, but with the content reduced to a minimum such as Page Content Goes Here. Mathnet has provided a few such templates; click on the titles to see previews:

Title	Filename	Description
template.shtml	/usr/www/htdocs/templates/template.shtml	Includes the official departmental logo and navigation menu. Staff should use this template, and it adds a nice touch of departmental cohesiveness if faculty and students use it too.
homepage.html	/usr/www/htdocs/templates/homepage.html	A simple home page for a professor or grad student. It has (commented out) a tag for an image: a photograph of the owner, or a result from current research, or a favorite scene.
(same)		The same homepage.html with all the features turned on.

Having chosen a template file, copy it like this. Substitute the filename of the selected template, and where it says mypage.shtml substitute the filename you want for the page.

Note 1: If the template ends with .shtml, the copy must also. This is how the webserver knows to look for instructions in the file to include the department logo and navigation material.

Note 2: Your home page must be named index.html or index.shtml. The webserver looks for this name specifically as the home page. Similarly in subdirectories, the leading file must be called index.html or index.shtml.

Note 3: On Linux you are copying the file to public_html and you will edit it there. On Windows, on the other hand, you want to copy the file to your desktop, edit it on the Windows machine, then copy the finished file to public_html.

Linux

Windows

cp -p /usr/www/htdocs/templates/template.shtml mypage.shtml -p means to keep the original permission allowing the web server to read the file. If you forget -p, you can give the permission like this: chmod 644 mypage.shtml

In the toolbar just above the Remote section is a dropdown listbox, showing the current directory's name, that you can type in. Fill in /usr/www/htdocs/templates (and press return). You will see a list of template files. Drag and drop the one you chose onto your desktop. Once the template arrives on your desktop, rename it to its proper name, to avoid confusion. You will need to change back to your own public_html directory. Type that directory name in the listbox and press return. (On more recent versions of SSH Secure Shell, it may be productive to click on the down-arrow on the listbox and choose public_html from the list.)

Step 3: Edit the Template File

On Linux you can use your favorite file editor, such as vi or gemacs, to edit the new page. On Windows you would be using Notepad.

Note 4: On Windows, if you double click on the icon the unedited contents will be displayed with your default browser, which is not too useful. If you right click and choose Edit, the file will be edited with Microsoft Word, which is fine if you're going to print it but is very bad for the web. Right click, choose Open With, and then select Notepad.

If you stick to the styling in the template, simple HTML can be very simple. Particularly if you are creating your home page from our template, you can just leave our HTML tags unmodified: just find and change your name, course web directory, etc. If you're being more creative, this link is to a summary of HTML syntax.

Alternatively you could use a specialized HTML editor. The nvu editor is installed on both Linux and Windows (by request on Windows), or other editors could be used such as Dreamweaver or Microsoft Front Page, if you have them. The user interface of nvu is very standard and easy to use. It's a matter of personal choice whether you learn to use the HTML editor, or you learn how to add the HTML tags with the regular file editor.

Microsoft Word has a feature to Save as Web Page. However, Word is a page editor, not a web editor, and it fails to solve web problems while imposing page layouts that work fine on paper but badly on the web. Do not use Microsoft Word to create or edit web pages.

Go through the file and replace template generic content. For example, Page Title should be changed to the actual page title (2 places), Your Name needs to be replaced, and of course the page needs some payload content. Our summary of HTML syntax includes guidelines so you can make good-looking pages that avoid being hostile to handicapped viewers.

Step 4: Publish the Page

On Linux the page is already finished, and you just need to make a link to it from other pages (the link is implicit for your home page). On Windows you need to drag and drop the edited page from your desktop to public_html (or a subdirectory) using the SSH Secure Shell file transfer window. When the page arrives, right click on its icon, select Properties, and mark the checkboxes for reading, in all three categories, if not already set. This gives the webserver permission to read and send out the page. Remember to send the desktop copy to the trash, once the copy in public_html has been checked for errors and fixed.

Step 5: Check for Errors

You haven't finished your job until you have actually seen the page in a web browser. Type in its URL or follow another page's link to your new page. The URL for a home page is http://www.math.ucla.edu/~user (substituting your UNIX loginID). If you find and fix an error, on Windows you will need to save the file and again copy the corrected file to your web directory. (On Linux you're editing it there; remember to save the file from the editor.) Then click the Reload button on your browser to see the fixes.

A very common error is to forget to set file permissions, whereupon the browser will show the webserver's complaint that you do not have permission to see this page. The page file and all containing directories must have permission for public reading, and also execution for directories. Review the steps above where permissions are set.

Similarly, images and other supporting files such as style sheets need to be publicly readable. If you have an image and it is replaced by a generic icon or by the ALT text, check its permissions.

Now that you can see the page, does it look reasonable? If you temporarily enlarge the default font-size, as a visually challenged user might do, does all the text get bigger? Is it still OK when you expand the web browser's window to full screen, or shrink it to 320x320 pixels (imitating the popular Palm Treo line of web-enabled PDAs)? A smaller font-size helps in the small screen test.

Web standards are not just mickey mouse formality; they are a meeting point where the provider (you) knows what HTML tags to use to get your message across, and the client (viewer) knows what you will be sending over that he is expected to show correctly on the screen. If you send nonstandard material the client's browser will do its best, but often will make a hash of your beautiful web page. The World Wide Web Consortium offers a validation (error checking) service for web pages. You may have noticed that the template pages have HTML and CSS compliance logos that are commented out. When editing, you should remove the comment marks, and now you should click on each logo (CSS first), and fix any errors found. If you have kept to simple tags and styles, it's very likely that your page could pass the first time.