Publishing Web documents

Due 11:59pm on July 20. You are strongly encouraged to finish this exercise. No class time will be given on Monday, Q & A only.

• This exercise combines the new information with the hands-on activities.
• You should
  • read through the discussion and steps for each activity
  • then carry out the steps.
• In general
  • Items with bullets are information to be read
  • Items with numbers are steps to be carried out

BACKGROUND

About Servers

• As long your HTML document is on your local computer (or your Z drive or a removable disk), no one else can see it.
• You must publish your document file so that you or other users can browse to it it over the Web.
• To publish it, you copy it to a computer that has a Web server software that lets it respond to requests.
• You need to be allocated space on the server's system.
• You usually need to sign on with a username and password before you can store files.
• If the server is a separate computer, you must use a file transfer program to copy it.

For this class

• You have been given an account (username, password, and storage space) on the computer wyrd.hood.edu.
• Wyrd is a PC running the Linux operating system and the Apache web server program.
• The file transfer program we use in class is the SSH Secure Shell program.
• It is installed on all the computers in the lab.

Note on file names

• The name in a URL must be typed exactly the same as the file name, including case
  • On most web servers, file names are case sensitive
  • wyrd.hood.edu file names are case-sensitive
• Do not use spaces in web file names.
  • The space is supposed to mark the end of a URL.
  • Some browsers will guess what is intended and fix spaces up, but some will not.
  • If you put spaces in file names, some users will not be able to view your documents.
  • If you want to distinguish parts of a file name, use an underscore.

ACTIVITY 1: GET SET UP

A. Get connected

Your tasks

1. Start the SSH Secure File Transfer client. (Look under the Start Menu Programs listing.)
2. Click the "Quick Connect" button.
3. Type in "wyrd.hood.edu" and YOUR username
4. Enter your password.

What you should see

• You should see a split window.
• The left side shows your local files. The
• right side shows your space on wyrd.hood.edu. It is a view of your file listing on the other computer.

What might go wrong:

• If the program says it can't find the host, retype wyrd.hood.edu correctly
• If the program keeps asking for your password, be sure both your username and your password are typed correctly. Both of them are case-sensitive.
• If the split window doesn't look approximatly like the illustration,
  • first be sure it says "SSH Secure File Transfer" at the top.
  • If it does, you just need to adjust the size of the openings - drag down the ridge below the toolbars.
  • But i it says "SSH Secure Shell", choose "New File Transfer" from the Window menu.

B. Make a place for your Web Files

Notes:

• The Web server on wyrd.hood.edu is only allowed to show files that you store in a special directory (folder)
• the directory name must be public_html.
• if a file is not within that directory, it cannot be seen on the Web.

Your tasks :

1. click on the "new folder" button on the right side of the toolbar.
2. Give the newly created folder the name public_html.
3. Be sure to use all caps - the name is case sensitive
4. You should see the public_html folder on the right hand side of the split window
5. double-click on it to see the contents. (There won't be any at first).

C. Look at your Web Site

Your tasks

1. Do not close the SSH window, keep it open.
2. Open your web browser (Firefox)
3. Enter the URL http://wyrd.hood.edu/~your_user_name
   1. The tilde (~) is on the upper left of the keyboard.
   2. Replace "your_user_name" with your own assigned username.
4. Keep the browser window open, do not close it

The result

• The first time, you should see a listing headed "Index of..."
• There won't be any files listed yet.
• Later the view will change.

ACTIVITY 2: PUBLISH A DOCUMENT ON YOUR SITE

A. Upload your lab 06 HTML file

Copying a file to the server is called uploading.

1. Switch back to the SSH window
2. Browse through the folders in the left window until you find where you saved the HTML document that you created in lab 06 (the one with the lists)
3. Then drag and drop the file from the left window to the right window.
4. Be sure you copy it into the public_html directory.
5. Keep the SSH window open, do not close it

B. Look at your web site

1. Switch back to the browser window
2. Refresh the browser (Click the swirling arrows on the navigation toolbar.) - you should see your file listed.
3. If you do not see your file, you probably did not copy it into the public_html directory.
   1. Try again.
   2. Be sure you copy it into the public_html directory.
4. Click on your file's name to view the page.
5. Look in the location box on the navigation toolbar. The URL of your web document should be
   
   http://wyrd.hood.edu/~your_user_name/your_document_name
   
   
6. Click the browser's back button to go back to the directory index

C. Upload related files

Observation

• Your published HTML page does not look the same as the local one.
• the page uses an external style sheet
• the web server cannot see your local copy of the style sheet file
• the stylesheet has to be on the server too

Your tasks

1. upload the stylesheet file the same way you did the HTML document (switch back to SSH)
2. refresh the browser - you should now see botht he HTML file and the CSS file in the listing
3. Click on your file's name to view the page - it should now be using the styles

What can go wrong

• If you do not see the CSS file in the listing along with the HTML file
  1. be sure you refreshed the browser
  2. be sure you copied the file into the public_html directory
• If your page isn't using the styles
  1. refresh the browser
  2. check that you copied the CSS file into the public_html directory

ACTIVITY 3: HIDE THE DIRECTORY LISTING

The index.html file name

• Most of the time you do not want the world do see the listing of your public_html directory contents
• you usually want a "home" page to be displayed right away.
• The system is configured to show a default page from your public_html directory
• the file for the default page must named index.html (all lowercase)
• if your public_html contains a file name index.html, the Apache web server will serve that file instead of making a directory index listing.
• So to hide the directory listing from public view, put an index.html in your public_html.

Your tasks

1. Be sure your site directory listing is showing in the browser window.
2. Create a short HTML document (Start with this basic blank page, and you won't have much to type.).
   • It should, of course, have a title and heading.
   • It should link the same stylesheet as the lab 06 that you uploaded.
   • It should have one paragraph that says: "This is my site index page. It doesn't say much at this point."
3. Save it with the name "index.html"
4. Upload it into your public_html directory
5. Refresh the browser that shows your site

What you should see

• you should see your index.html page displayed in the browser window
• you should not still see the directory listing.

What can go wrong

• If you still see a directory listing:
  1. Be sure you refreshed the browser
  2. be sure you uploaded the index.html file into the public_html directory
  3. be sure it was named index.html (all lowercase)

ACTIVITY 4: CREATE A MULTI-PAGE SITE

Background

• The index.html file hides the directory listing.
• no one can see that your first published page, the lab 06, is there
• they can view it if they type in its complete URL
• How do you let viewers know the other file is there.
• You must include a link to it on the index page.

Your tasks :

1. Edit your index.html file.
2. Add a paragraph that says "See my other page."
3. Make the line of text into a link to the your lab 06 page--use a relative URL with the href value just the file name.
4. Upload the revised index file.
5. Refresh the browser and test to be sure the link works.
6. If you make additional changes to your index page, be sure to upload the file again. Your changes are only saved locally, not on the server.

ACTIVITY 5: ADD AN IMAGE TO YOUR INDEX PAGE

1. Here is an image of the first computer mouse (1968), in the hand of its invertor, Doug Englebart.
2. SAVE a copy of the image (right click and choose "Save Image as".)
3. UPLOAD a copy of the image to you public_html directory on wyrd.
4. ADD an image tag to your index page so the mouse picture is displayed.
   1. Use a relative url (just the file name);
   2. do not use the full URL to my copy of the image.
   3. Use an inline style rule to specify the dimensions.

ACTIVITY 6: DISCONNECT SSH

1. When you're finished, always disconnect from the server.
2. Choose Disconnect from the File menu.
3. If you haven't finished the other activities, come back later to complete them.

ACTIVITY 7: SUBMIT YOUR PAGE

When your exercise page is complete,

Submit the complete URL of your index page through the Blackboard.

Guidelines

• Be sure your published web documents are stored inside your public_html directory.
• Prevent revealing directory listings from showing by putting a file named index.html in new directories inside your public_html.
• Make sure files names in links are exactly the same as the ones saved - including case.
• Do NOT use spaces in web file or folder names. Use an underscore (_) to break up parts of a name.
• Use relative URLs for pages and images that are within the same site as the page that uses them.
• If you change a file, upload it again.
• Be sure to upload any images you use. And check to be sure the URLs are correct. I can't see your Z drive!
• Be sure to disconnect and log off when you are finished.