IT581: Practicum in Web Development, Summer 2015 (Hybrid)

• 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.

Your Account 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.

Your web page URL

• Your web site will be found at
  http://wyrd.hood.edu/~abc321/ with your own login username instead of abc123
• (Note: the ~ is on the key above the Tab key)
• Type it into the browser and see what happens.

File Transfer(FTP) Program for this class

• The file transfer program we will use in class is the FireFTP add-on for the Firefox browser.
• If you do not have FireFTP installed on Firefox, go ahead and install it now.

Notes 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.

A. Get connected

B. Make a place for your Web Files

C. Look at your Web Site

Your tasks

1. Do not close the FireFTP tab, keep it open.
2. Open a new copy of Firefox (or open Chrome if you prefer)
3. Enter the URL http://wyrd.hood.edu/~abc123
   1. Replace "abc123" with your own assigned username.
   2. The tilde (~) is on the upper left of the keyboard.
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.

A. Get some files:

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/lab06.html
   
   with your own username after the ~.
6. Click the browser's back button to go back to the directory index

Upload related files

Background: The index.html file name

• Most of the time you do not want the world to 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 a file named index.html in your public_html.

Your tasks

1. Be sure your site directory listing is showing in the browser window.
2. Modify a short HTML document - Start with this basic page.
   • The title and heading should be your name. Replace the "[your name]" with your own name.
   • 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 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)

Background

• The index.html file hides the directory listing.
• No one can see that your first published page, the FTP_practice.html one, 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" and Make the line of text into a link to the FTP_practice.html page--use a relative URL with the href value just the file name.

   <p><a href="FTP_practice.html">>See my other page.</a></p>

3. Upload the revised index file.
4. Refresh the browser and test to be sure the link works.
5. If you make additional changes to your index page, be sure to upload the file again. Your editing changes are only saved locally, not on the server.

1. Here is an image of the first computer mouse (1968), in the hand of its inventor, Doug Englebart.
2. SAVE a copy of the image (right click and choose "Save Image as")
3. ADD an image tag to your index page so the mouse picture is displayed. Use a relative url (just the file name);
   

   <img src="mouse.jpg" alt="first 
   mouse">

4. Upload the page and refresh the browser. Do you see the image?
5. If you did only these steps, you will not see the image. It needs to be on the server with the document file.
6. UPLOAD a copy of the image to your public_html directory on wyrd. refresh the browser. You should see the image in the page.

1. When you are through working, always disconnect from the server.
2. Click "Disconnect" beside the connection name.
   
3. If you haven't completed the other activities, come back later to finish them.

1. Validate your page — submit the URL to the validator and correct any errors that are reported.
2. Complete the lab submission on Blackboard.
3. In the response box, provide the URL of your page. (You can copy and paste it from the browser.) BE SURE IT IS CORRECT.
4. Make the URL into a hyperlink — select the URL text and click the chainlink.
5. You do not need to attach any files.

Guidelines for published assignments

• 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.

Evaluation Checklist

• public_html directory created
• Extra files uploaded
• index.html uploaded; correct name & contents
• image uploaded and shown in page
• correct URL provided as hyperlink