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:
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 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):
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.
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.
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:
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.
Thank you for your cooperation!
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.
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:
© 2008 Dan Vaughan