File Skills Intro

Can you send a file as an e-mail attachment? Save a file to a network or portable drive, and find it on another computer? Can you open an HTML file in a text editor, modify it, and view the result in a web browser? Do you know why Microsoft Word's "Save as HTML" sucks? This exercise is designed to help you learn the basics you'll need for the upcoming HTML coding activities.

In pairs (or threes)

1. Send each other a word processor file as an attachment.
2. Copy and paste the contents of the same word processor file into the body of an e-mail and send it.
3. Compare the file sizes of the two messages after they arrive. (Which is more efficient? When is one more appropriate than the other?)
   
4. Send yourself a message with your partner's name in the CC field, and a different message with your partner's name in the BCC field.  How do those messages differ when they arrive?
5. Open http://jerz.setonhill.edu/EL236/2008/test.html in a web browser.
6. View the HTML source code (right click, View Page Source). Note the structure. (This is plain vanilla HTML, without any fancy formatting.)
7. Close the "View Source Code" window and return to the regular browser view.  Save this file so you can edit it yourself.  Select "File, Save As, and choose "Web Page".  Put it in your I drive so you can find it again.
8. Create a new document in MS word, and try to duplicate the formatting of the "test.html" document.  Save this file as a regular word processor document, and call it "MS-doc"
9. Now choose "File -> Save As," choose the format "Web Page," and save a copy under the name "MS Web".
10. Now save another copy as "Web Page Filtered," and save it under the name "MS Web Filtered".
11. Close your word processor. Click on My Computer, and find your way to your I drive.  Compare the size of the 3 different files you just created.  
12. Log off your computer and log onto your partner's computer. Find where you put all your files, and open the folder.
13. Familiarize yourself with Note Pad (Start -> All Programs -> Accessories -> NotePad).
14. Observe that this is a very simple text editor, with no formatting features.  We can use this simple editor to create files that we can tell the computer are HTML pages.  Notepad is a simple tool for manipulating text files, without all the bells and whistles (such as spell-checkers or autoformatting) that tend to screw up the precise layouts and formatting you'll need when you create web pages from scratch.  Type a few lines to create a sample text file (the content does not matter) and save the file in the same folder in your I drive.  Then close NotePad.
15. Look at the different icons in the folder on your I drive.  You should see five file (three diffent web pages, a MS Word file, and the text file you just saved.  Double click each of your files to see what happens.
16. Now mouse over the file name, right click, and see the option "Open With." Open each of your five files in  NotePad. (Don't save any changes -- just look at the files.)
17. How does the "Web Page" version of the file you created in MS word differ from the "Web Page Filtered" version you created?  
18. How do they both differ from the "test.html" page you downloaded directly from the internet?  
19. What can you conclude about the value of using MS Word to create files that you will later manipulate directly?
20. Try opening "test.html" in NotePad.    Make some changes to the content, then save it.  Now try opening it in your favorite web browser.  (Do you see your changes?)
21. Create a new page in NotePad.  Type the following: "This is some <b>bold</b> text." (without the quotation marks).  Save this file as "bold.htm"
22. View this page in your web browser.  (What's wrong? Why don't you see the bold text?)
23. Note that when you saved the file "bold," the icon is different.  Your computer thinks the file you saved is a plain text file.  We need to change the file so that the computer will open a web browser, which will interpret the contents as a (very simple) web page.  From within your file browser window, select Tools -> Folder Options-> View.  Scroll down to find a checked box that says "Hide extensions for known file types."  Uncheck that box.
24. You should see the names of all your files change slightly.  "bold" should now be "bold.txt," which means "text file."  Likewise, "test" should now be "test.html".  That file extension is one way the computer knows which program to start up when you double-click the icon.  Let's tell the computer that we want "bold.txt" to be treated as an HTML document.  Right-click the filename "bold.txt" and rename it to "bold.htm".  (You'll get a warning message - yes, you do want to change the file extension.)
25. The icon for "bold.htm" should now be a web browser. Double-click the icon to see that file in your browser.  (You should actually see bold text, not the <b></b> symbols anymore.)
26. Now let's edit that file.  Right-click the icon for bold.htm, and select Open With -> Notepad.  Add some more text, including <i>italic</i> text.  Now save this file as "bold2"
27. If you ended up with something named "bold2.htm.txt", the computer will think that file is a text file, and won't open it in a web browser.
28. Return to test.html.  Open it in NotePad, edit it, and save it.  (Test it to make sure it works.)
29. Now go to your blog.  You are going to create a new entry and upload your midified "test.html" page, so that everyone can see your first HTML page.  Create a new blog entry, and briefly summarize what you learned in this exercise.  Now look for the "Insert File" icon (to the left of the blue "A" - looks like a page with a green arrow pointing upo.)  Click it, and upload your file test.html.
30. Publish your blog entry, and click the "test.html" link. You have already been publishing web pages because each blog entry you write is a web page... but now you have uploaded a page that you coded from scratch!  (We won't always upload pages this way - it's just easier to show you how to upload with MT since you already know the system... I'll show you another system later.)