Creating Your Own Web Pages

by Meg Ropp for TE 402

There are several different tools you can use to create your portfolio web pages from the Technology Exploration Center or from home. All of these tools have different features which are more or less useful depending upon your needs. You will probably use several different methods over the course of our class.

HomePage Maker

As members of this class, you have access to a wonderful tool for building homepages named "HomePage Maker" which is available at the following URL:

http://letsnet.msu.edu/hpm.fcgi

HomePage Maker uses web-based "forms" which is how you have been participating in discussions in Eweb. Using HomePage Maker will help you get a homepage created quickly without knowing any HTML (HyperText Markup Language) which is the language required for the World Wide Web. You will logon using the same username and password you use for Eweb. Then fill in the various fields and save your pages. This process will create your files on our class server and you will be able to view them by typing in your new URL or by linking from the Class Member list on our course homepage.

Using SimpleText

You can also create html documents on any Macintosh by using a text editor called SimpleText which comes with the operating system. You can essentially create your pages from scratch using the basic codes I outlined and described in the HTML introduction page.

You can find the SimpleText application by selecting "Find" from the File menu of the "Finder" (the icon farthest to the right that looks like a little Macintosh computer) and typing in SimpleText. You will see several icons and you want to click once to highlight the SimpleText application in the top window and then look at the bottom window to locate the folder in which it can be found. Once you open the SimpleText application, you will see a blank document and you can then type in your text and your html tags. Save the document with a name followed by the ".html" extension. An example of such a file name would be MyPage.html. Then you will want to save it to your disk so you may have to search for your disk in the Save dialogue window. See the following example:

Using an HTML Editor

Another way to create web pages in HTML is to use an "HTML editor" which is a software application with menus of commonly used tags and features so that you don't have to type them in by hand each time as you would in SimpleText. There are many good editors available and they keep getting better and easier to use. You can download many of them using ftp and they may be "freeware" applications which are really and truly free! Some might be labeled "shareware" which means that if you choose to use the application, you should send the developers some money and they'll tell you where - this is the honor system. Other editors are typical software application which you must pay for before using.

My personal favorite editor is World Wide Web Weaver which has many features and is easy to use in my opinion. For Macintosh web tools, I always go to the Com Vista Homepage:
http://www.comvista.com/net/www/WWWDirectory.html

Using an HTML Translator

Built-In Translators

Many of the newer versions of word processing programs have built in "translators" which will take a file created as a word processing document and then put the tags in for you. One sure way for you to create your portfolio pages is to use ClarisWorks in the lab or your favorite word processor (at home or in a lab) and then save as RTF or text format. Even if you use a PC you can still save as text. Bring those files with you on a disk to our next class or when you have a some free time (quit laughing) and translate the files to HTML. If you open the text documents using ClarisWorks 4.0 which we have in most of the MSU Macintosh labs, you will then choose the "Save As" option under the "File" menu and select WWW (HTML). The result will be a file which you can then upload to your web space. Make sure you include the ".html" extension when you name your file and save it.

Translators from RTF or Text

HomePage Maker also has a feature which allows you to bring in file which has been created in almost any word processing program and saved as RTF (rich text format) or just plain text. Instead of filling out the prepared forms, just click on the button near the bottom of the HomePageMaker page which allows you to send your own text files to be translated and saved in your folder.
Other Translator Utilities You can also find several freeware and shareware translators which will take various kinds of input and then return html. Once again, I visit Com Vista for information and downloading. I have used RTFtoHTML before and it worked well.

Uploading Your Pages to Your AFS Web Space

HomePage Maker

One of the nice things about using HomePage Maker is that you can create, edit and upload your files to our class server all in one trip. However, in our last session, I showed you how to access your own web space on the AFS server here on campus. You can still use HomePage Maker to develop and store your files but you can also save copies of those files to your AFS space. Here's how you do it. Once you have created a web page or edited it, preview or view your page in Netscape. Select "Document Source" from the pull down menu under the "View" menu. SimpleText should open up automatically and you will see your document with all the HTML tags in it. Next choose "Save As" from the "File" menu in SimpleText and name your document something that makes sense and add the ".html" extension to the end of your file name. Make sure you are saving to your disk.
***Important Note***Remember what the name of your document is in case you need to reference it in the other pages you are creating or if you have referenced it previously. All of the document names included in "anchors" or links must be identical in spelling and capitalization. The same goes for images, movies or other objects as well. You will want to have your main home page in your AFS Web Folder named index.html. This will be the default home page file and it will be the page which a web browser will show when going to your folder. If you have an index page, you can store all of the files you are developing in your folder and create links only to those which are ready to publish - the other files are hidden unless you know their names. ALWAYS KEEP BACKUP COPIES OF YOUR FILES ON A DISK in addition to your folder!

Using "Fetch" to upload HTML files to AFS

Once you have your web page files saved as HTML, you are ready to upload them from your disk to your AFS space. Follow the " Using Fetch 3.0 to upload HTML Files" directions from the handout you received last week on moving your pilot account to the AFS server or you. Remember, when you choose "Put File," the default setting is for text and you always want to select the "Raw data" setting from the pop down menu. Make sure that if you use anchors which reference other files with only the local file names (e.g. "daywithkids.html" instead of the full http address), that you put them all of these cross-referencing files in the same folder with each other.

Replacing Files in your folder

Editing and replacing your web pages will be a continuous process during this class and afterwards as well. I always keep copies of my files on my computer or on a disk and edit those copies. When I have completed those changes, I use Fetch to access my web folder and then I select "Delete directory or file" from the "Remote" menu to delete the old version. Then I click on "Put File" and search my disk for the new version and then I open it. Fetch will then put the new file in my folder.