Save the Exercises

HTML files consist of HTML code. HTML code is written in very plain unformatted text using very simple text editors such as Windows' accessory program Notepad. This kind of plain text (called ASCII text) is used because it can be read by most computers.

As part of this course you will often be required to save the web pages that you open in your browser. You will save the html code from these pages as text files and manually rename them, adding a file extension to them. You will also save image files when requested.

Classroom students will simply save the files locally on their computer. My online students will save the files on their own computers and also send the html files to me as per instructions the in the Course Information section in the Syllabus and name them as per the instructions in the File Naming Rules document in the same section. There is no need for online students to send me image files; I can tell if you've done the code correctly without them.

Each exercise will have you view the html source code. Then you will need to save the exercise's code as a file and give it a specific name and file extension.

The file name you give it will always start with the exercise name's first three characters, followed by an underscore, and then ending with your last name. For example:

C09_smith.html

Note that the number above contains a ZERO, NOT the letter "o". As a rule, with web file names, always avoid using blank spaces in file or folder names; use_underscores_instead.

For the text files of the html source code we will use the file extension .html (FYI, .htm would work as well, however I want you to use .html to maintain consistency with the rest of the class). When this extension is used a Web browser will readily identify the file as an html file and open it. Without it, or with a different extension, things probably won't go so smoothly.

You will be asked to save the files in Windows' accessory text editing program Notepad, using Notepad's default format: text. However, you will need to manually add the file extension .html at the end of each file. You must always remember to manually add this extension. Otherwise Notepad will automatically add the .txt extension. If that does happen to you, simply rename the file, which you ought to know how to do.

You will also be asked to save images at times. Follow these instructions:

First, Create Two Folders

First we need to create two folders to contain the files you save: one for all the html files and one for all the image files. The images folder will go inside the html folder. Use the following steps (Mac users: use the Finder and New Folder in place of the options below):

1. On your desktop, right click on My Computer.
2. From the shortcut menu, select Open.
3. Right click on the icon of the drive you want to save your files in (probably you'll want to use your C drive.
4. From the shortcut menu, select Open.
5. In the window that opens, right click in an empty, white area.
6. From the shortcut menu select New, then Folder
7. The new folder will have its name highlighted. Just type to name it: exercises
8. Right click on the icon of this new exercises folder.
9. From the shortcut menu, select Open.
10. In the window that opens, right click in an empty, white area.
11. From the shortcut menu select New, then Folder
12. The new folder will have its name highlighted. Just type to name it: images

You ought to now have a folder called exercises and within it a folder called images. As we do the exercises, save all of your html files in the exercises folder and all of your image files in the images folder. If you don't save your image files in the images folder, the exercises won't work properly.

Classroom Students Only:

Save your files on the hard drive, but also back up on a floppy disk, zip disk, or USB flash card if I instruct you to do so. Any files that are left on a school hard drive are subject to deletion. It doesn't happen often, but is has happened. Therefore, don't rely on leaving your files there. Take them with you in removable storage.

Saving Files for This Course

If you are using a Mac here are instructions should be all you need. Let me know if you have any problems.

Following are instructions for how to save your html and image files when you are viewing them in Internet Explorer (IE). This is the technique to use for this course because it allows you to view the html code and save it without it being manipulated from its original form. You will be able to edit the code immediately.

When viewing code using IE, it actually opens the code up in Notepad, a text editor. You will be saving that code using Notepad's File => Save As option by following the specific instructions below. For this course, do NOT save your web pages using Internet Explorer's File menu because it often adds tags, sometimes leaves out closing tags, and makes the code harder to read, among other things. Follow the instructions below.

If you are using Internet Explorer 7 (IE7), you will need to make the menu bar visible. To do this, click on the Tools button on the right side near the top (it has a gear icon). From that menu, enable Menu Bar. If you are not sure what version of Internet Explorer you are using, go the the Help menu and select About Internet Explorer.

Important Note: First be sure that your file will open in Notepad and not in WordPad or FrontPage. They are sometimes set as Internet Explorer's default editor. To check to be sure that Notepad is your default editor, in Internet Explorer take the following menu path: Tools -> Internet Options -> Programs tab -> HTML Editor -> Notepad should be selected. If not, select it from the drop down menu, then: -> Apply -> OK. Go to your File menu, you should see the option Edit with Notepad.

To save html files:

1. Open the web page in Internet Explorer.
2. From the IE's View menu, select Source.
   Or, right click in any text or blank area of the browser window and select: View Source from the shortcut (contextual) menu that appears.
3. The source code will open in Microsoft's text editor Notepad.
4. In Notepad, from the File menu, select Save As (using just "Save" won’t work - you must select Save As).
5. At the top of the Save As dialog box that opens, select the "exercises" folder that you created.
6. At the bottom of the dialog box, for "Save as type", accept the default setting: "Text Documents".
7. Now name the file as specified in the exercise, and...
8. Be sure to manually type in the file extension .html

To get the image files that you need for your exercises:

This is for getting only the image files that are needed for the exercises that you will be submitting to me. I don't need the images when you send your html files to me.

1. Click here to download a zip file that contains all the images that you will need for your exercises.
2. Your objective now is to get the image files that are in the zip file into the images folder you just created in the exercises folder that you also just made.
• Depending on what zip utility you have, this can be done different ways.
• I need your help to make sure that the image files contained in the images.zip file get into the images folder that you just created.
• Continue reading...
3. If you can, save the zip file or the images in it, to the images folder that you just created.
• If you can't save it to the images folder, then save it wherever you can find it again and then use Windows Explorer or My Computer to move it to the images folder.
4. Then double click on the zip file.
5. Depending on the zip utility you have different things can happen. It may open up in a dialog box that lists the contents of the zip file in which case you need to select all of the files inside of it and extract them into you images folder. The extraction process is somewhat different with different zip utilities, but it usually goes something like this (not necessarily exactly like this):
   1. Select all the files in the zip file by click-dragging over all of them or selecting from a menu Select all or something like that.
   2. Then you will usually need to click on an Extract button.
   3. At that point it will allow you to select where you want the files to go. Select the images folder that you made.
6. On a Mac the files may appear inside an images folder that was part of the zip file. In that case, replace your existing images folder with the new one.
7. One way or another, please get the image files that are inside the zip file into your images folder. I am sorry that I cannot be more specific than this, but there are so many variable methods and I can't list them all nor do I want to require you to buy or download a particular zip utility if you have one already installed, etc.

Thank you for your cooperation!

Test: Save This Page's HTML Code

As practice, try saving this page that you're reading right now. (Note that you do NOT need to send me this page when you are done.)

View the html code in IE, then save the html in Notepad using Save as... (do not save it using IE!). Save it inside your exercises folder. Use the file name A04_yourlastname.html (and be sure to substitute YOUR last name and be certain to manually type in .html as shown).

After saving the file, use your browser's File menu to open the html file. Simply select File -> Open and then navigate to your new file in the file browser. Check to see that it looks similar to this page.

There are additional ways to save web files and image files. A reference for several other options for saving web pages follows. But please stick to the method detailed here. The other systems don't work the same way and can change the names of folders and files without you knowing it!

Note that if you are submitting your exercises to me online, you don't need to send me the image files.

Seeing File Extensions

I want you to be able to see file extensions in your file browsers. File browsers are the dialog boxes where you select the files that you want to open when you use File -> Open for example.

You may very well not be able see the file extensions. Windows is typically set up to NOT show you file extensions. Here's how you can set it to show them:

1. Right click on Window's Start button.
2. Select Explore.
3. Windows Explorer will open (not to be confused with Internet Explorer!).
4. Go to the Tools menu.
5. Select Folder Options
6. Select the View tab
7. In the area at the bottom UNcheck Hide File Extensions for Known File Types. (It's a silly option because it assumes that there are some file extensions that no one knows about!)
8. Quit out of Windows Explorer and from now on you should see file extensions.

Note that there is no need to send this exercise to me.

© 2008 Dan Vaughan