Web Page Lab

In this lab, you will learn how to save your Word files as HTML (HyperText Markup Language) files; that is, web pages. You will learn how to modify your pages using a browser editor and by editing the source file. Warning: Word makes verbose, bloated web files.

1. Your afs home directory

The class volume is stored on afs, so we will learn to navigate afs from the cluster PCs. If you are on a cluster computer, you should have a folder called Home on your desktop that has /afs/ written on it.

This folder is your home directory on afs. It corresponds to the path

/afs/andrew/usr/<youruserid>

You have access to this directory from any CMU computer. On the PCs, your afs directory is the Home folder. You can drag files to and from the folder to save them and retrieve them. On andrew workstations, this is your home directory when you login. You can transfer files to this directory using ftp from almost any computer with a network or dialup connection.

If you done working in the cluster and you don't have a disk to save your work, you can drag your files into your Home folder and then retrieve them the next time you log on. If the file is for your own use, you can simply drag it into the Home folder, which is by default private. Other users can see the names of your files, but they can't read the contents. If you want other people to be able to access one of your files, you need to put it in your public folder, which is in the Home folder. Open the Home folder and drag your files into the public folder.

2. Finding your class folder

To get to the class folder, open the afs home folder and select View -> Toolbar from the titlebar. Navigate up to the andrew.cmu.edu folder.

Then navigate down to the andrew/cit/ce/ folder and find the rapidproto folder. Right click on the folder and select Create Shortcut. (Your screens and menus may look a little different. I am doing this on the computer in my office, not a cluster computer, which are configured slightly differently.)

You should get a warning that you cannot create shortcut in the ce folder. Click Yes to create the shortcut on your desktop.

Now drag the shortcut to your afs home folder. Double click on the shortcut and the class folder will open. I have created a folder for each of you in the students folder. You should see a folder with your andrew id on it.

Hint: Typing a letter will take you to the first folder that starts with that letter. So if your andrew id starts with a z, type "z" to save yourself some scrolling and searching time.

Open your folder. You have read access to all the class folders -- and you should have read/write access to your personal folder. (I don't have any way to test this ahead of time, so we will just have to see when you try it.) To be sure that you have write access, open your folder and create a new folder called Project1. (No spaces in the name please!)

If you want, you can also create a shortcut to your personal folder. Follow the same procedure to create a shortcut to your personal folder in the class folder.

3. Creating HTML files using Word

In this lab, we will use Word to create web pages because it is an application that you are all familiar with. Word itself has many browser-like features built into it now. Many other applications are available to help you make Web pages. For example, FrontPage should be on the clusters now. You can use any web editor you want (including editing raw HTML in emacs).

Start by making the beginning of a Project1 page for yourself. I have made an outline in the file project1.html that is stored in the labs folder. Copy this file to your desktop and open it in Word. Replace all the generic items with your own information. Don't worry about adding links to other pages yet.

3.1 Creating Graphics

For your web page, you need to include sketches of your concepts. I don't know of any good, easy to use sketching packages, so the best way to get your drawings onto the computer is to scan them in. Several of the public clusters have scanners and I have one in my office that you can use if you have to. Once you have scanned your sketches in, you will need to transfer them to your Project1 folder. You can do this by opening your afs folder, clicking the shortcut to the class folder and then dragging the files into your Project1 directory.

Note: Scanned files can be VERY large. Before you put your sketches on the class web page, open them in Photoshop (or any graphical editing program you may have). Crop the picture to the smallest area that possible (Image -> Crop). If the sketch does not have any color in it, change the mode to grayscale (Image -> Mode -> Grayscale). Use Image -> Image size to set the size to at most 6 inches wide and set the bits per inch to 72. (This is the resolution of most screens, and the width of most web pages. If you were going to publish your sketches you might want a higher resolution -- but with 70 students in the class, and limited storage space, the files need to be as small as possible.)

3.2 Clipart

Minimize Word and look in the class folder. You should see a folder called images that has a subfolder called clipart, which has bullets, horizontal lines, arrows, etc. in it. Open one of the folders and drag an image file to your desktop. Open your Word document. Select Insert -> Picture -> From File. In the dialog box, navigate to the desktop. You should see the name of the image file you selected. When you highlight the file name, you see a preview of the picture.

Note: You are not actually inserting a picture in your HTML document. After you press Insert the picture will appear in your document window, but the file itself has just contains instructions on where the picture is stored. You will see this more clearly in a minute.

3.3 Viewing the Source

From the Word menu, select View -> HTML source. Another window MS developers window should open and you can see what you have created so far. (If this doesn't work, you can also go to Start -> Programs and find the Notepad. From the Notepad menu bar, select File -> Open and navigate to your desktop. Change the Files of type to All Files. Select project1.html. In your Notepad window, you will see what has been saved as project1.html.)

Notice that your HTML file does not contain any pictures. HTML is a markup language; that is, it puts formatting instructions for all the text. <B> means start making the text bold. </B> means end making the text bold. <A HREF="http://www.cmu.edu"> means here is a hyperlink reference. When this text is selected, start up the hypertext transfer protocol and find this file on the world wide web using the URL (uniform resource locator). </A> marks the end of the text that is linked to the specified URL.

When you have a preliminary version of your web page, select File -> Save as Web Page. Don't worry if your page isn't done. We will edit it later in the lab, and you will be able to edit it even after it is published.

If you look on your desktop, you will see that you have at least a new file: Project1.html and folder that has the name of your page with something about pictures. If you open this folder you will see two image files. You will have two new image file for each graphic that you inserted in your page.

Select File -> Web Page Preview. Either Netscape or Explorer should start up and display your page. If you look at the top of your window, you will see that the first line of your file is now in the blue bar. This will be the title of your page on the web. To change the title, go back to word and select File -> Properties. In the dialog box, you can enter a new, or more complete, title for your page in the Title box. Save the file and reload it in the browser. The words in the title bar should change.

Note: What you see in the browser is approximately what your file will look like to someone else. However, you should not become obsessive about getting the exact formatting or color shade. Your page will not look the same on every computer for every browser. My pages even look different between Netscape running on the Sun workstation in my office and Netscape running on a Sun workstation in the cluster. The URL for your Project1 folder is

http://www.cs.cmu.edu/~rapidproto/students//Project1

If you make a file called index.html in your Project1 folder, it will open automatically from this URL.

3.4 Inserting Links

Go back to you file in Word. Highlight the text Carnegie Mellon University. Select Insert -> Hyperlink. You will get the following dialog box.

In the box for the link, type: http://www.cs.cmu.edu (Even though some browsers do not require that you enter "http://" you should always enter a complete address so that your page will work no matter what browser someone is using.) Click OK. You now have a link. Click on the link. The default browser will start with the CMU homepage displayed.

To see what your page looks like, go to back to the browser window that has your page. Press the Reload button so the browser has the most recent copy of your file. You should see Carnegie Mellon University underlined in blue. Normally, you won't go back and forth between Word and browser. Usually, you do most of the preliminary editing in Word and then look at the file in a browser to be sure it looks OK.

You can put each of your concepts in a separate page and then put links to them from your main page. To make a link to a file, use the Browse for File button in the Insert Links dialog box.

4. Publishing Your Web Pages (Optional)

You should have a www folder in your afs home directory. If you do not, simply create a new folder in your afs home directory and name it www. You need to set the access permissions on this file to permit other people to read its contents. Right click on the www file. Select AFS -> Access Control List. You will get a dialog box that lets you change the permission. In the name box, enter system:anyuser (This means any user with access to the CMU web pages). Check the boxes next to Read and Lookup. This means that anyuser can read the contents of the files in your www folder (and any folders inside the www folder) and can also look at the names of the folders and files.

I will go to a cluster and make a screen dump of this window -- I don't have this option on the computer in my office

Now your www folder is readable by anyone with a web browser.

Once you have made your home page, name it index.html. This file will open automatically when your folder is accessed. Drag your file and the associated pictures to your www directory. You can preview what your files will look like by using File -> Open Page in Netscape (or your prefered browser). You should preview your page before you publish it so you are sure you have transfered all the image files and that the page looks the way you want it to.

For you page to be available through the andrew web server, you need to publish your page. Go to the publish web page. If you are reading a hard copy of the lab, that URL is:

http://www.andrew.cmu.edu/server/publish.html

The day after you publish your page, open the following URL in your browser.

http://www.andrew.cmu.edu/~yourandrewid

This is your URL. Your can make more pages in your www directory and put links to them from your home page. Warning: As you are putting together your web page, remember that not only can your friends look at your web page, so can your professors, prospective employers, and random people surfing the web. You want your web page to reflect your personality, but not to reveal too much personal information. You would like your web page to be OK if the person you admire most in the world looked at it, as well as be OK if the slimiest person in the world looked at it.