EGR 199: Fundamentals of Engineering	Creating Your Own Web Site
	10/15/99	Prabhaker Mateti

Table of Contents

• Executive Summary
• Educational Objectives
• Suggested Preparation
• Pre Lab
• Background Information
  • What is in a Web Page?
    • HTML - The Hyper Text Markup Language
    • Dynamic HTML
    • Java
    • JavaScript
    • VBScript
    • ActiveX
    • Animated GIFs
  • Creating your own Web Site
    • A Few Steps
    • Learn HTML -- Not?
  • Publishing
• Procedures
• Concluding Activities
• Achievement Test
• Appendix A: Acronyms
• Appendix B: Further Reading Links
• Appendix C: HTML Syntax Quick Reference
• Appendix D: Publishing Your Web Site at WSU
• Web Design Project 2
• Notes to TAs

Executive Summary

This document explains the internals of Web page creation and publication to a Web server. It presents examples of HTML, Java applets, and JavaScript methods.

The document serves as support material for a term project (Web Design Project), and also as a description of a 2-hour computer lab.

Educational Objectives

After studying the lecture materials, and performing this experiment, students should be able to:

1. Develop simple web pages using WYSIWIG HTML editors.
2. Publish their web pages using an FTP client.
3. Understand the contribution that Java applets and JavaScriptlets make in making the web pages visually interesting and more functional.

Suggested Preparation

Prior to performing the experiments of this Lab, you must read this document in its entirety. If you have a home computer, please try at home the exercises of Procedures section.

Background Information

Strictly speaking, the Internet and the Web are not one and the same. The Web refers to a body of information - an abstract space of knowledge in the form of linked pages, while the Internet refers to the physical side of the global network, a giant mass of cables and millions of computers.

What is in a Web Page?

A web page is an ordinary text file containing an HTML header and body.  A web can be of just one page, or many pages linked in a complex way. A `` web page'' often prints as several printed pages. Its look and feel is governed by tags in HTML, and little programs written in the programming languages Java, and JavaScript, or in ActiveX, etc.  A web site is a collection of pages appropriately linked with one well-defined entrance to the collection.

HTML - The Hyper Text Markup Language

The Web uses HTML for creating and recognizing hypermedia documents. HTML documents are nothing more than standard 7-bit ASCII files with formatting codes that contain information about layout (text styles, document titles, paragraphs, lists, formatted tables, graphics, ...) and hyperlinks. HTML allows document writers to separate information from document presentation - that is, documents containing the same information can be presented in a number of different ways. Users have the option of controlling visual elements such as fonts, and paragraph spacing without changing the original information.

The current standard is HTML 4.0.   See Appendix C for a quick reference card. Appendix B has a link to an HTML 4.0 Reference Manual (as a zip file).

Animated GIFs

Here are three examples. An animated GIF file contains several picture frames compressed together into one file. These frames are displayed in rapid succession as in photographic film based movie theatres. Animated GIFs consume CPU cycles heavily. When they are together, as in the example below, and your CPU is slow (say below 300 MHz) you can see the animation as being jerky. So, use animated GIFs sparingly. Both Netscape and IE can disable (temporarily or permanently) animation of GIFs; press the ESC key.

by  Paul Joachim

by Michael R.Wooster

by Fiely A.Matias

Interactive Pages

Dynamic HTML, Java, JavaScript and ActiveX are technologies that let programmers create animated and interactive Web pages--the kinds that move, flash, and play games. HTML , in contrast to Dynamic HTML, can't do much to make a page interactive; Java, JavaScript and ActiveX fill that void.  Java, JavaScript, VBScript and ActiveX are not mutually exclusive--they can work together.

Dynamic HTML

Dynamic HTML is an emerging technology that lets programmers create animated and interactive Web pages--the kinds that move, flash, and play games, just like Java, JavaScript and ActiveX do.

Java

Java is a programming language similar to the popular C++ language used to make applications like word processors or spreadsheets. Java programs -- known on the Web as applets -- have the unique ability to run on any operating system, from Windows to Mac to Unix. A Java applet is compiled into a byte-code file, which is downloaded into your machine as needed.

While lots of  ready-made applets are available and can be plugged into Web pages, programming in Java from scratch is not a Saturday afternoon activity.
 

JavaScript

Scroll the Marquee Change Background Color New Marquee Old Marquee

JavaScript is a scripting language, a special kind of programming language that makes it easy for the programmer to manipulate (e.g., pop up, close, flash colors) windows, fill in and submit forms, and compute strings. You can view the JavaScript source code of a Web page.  JavaScript can tie other components together or programmed to accept user input. While the names are confusingly similar and both Java and JavaScript are languages designed to make Web pages more interactive, Java and JavaScript are two different things.  Here is an example of JavaScript in action. Move the mouse over the elements of the table at left and see what happens!

The JavaScript code that exchanged the two WSU logos was

<a href="javascript:return true"
onmouseover="var t = wsulogo0.src; wsulogo0.src = wsulogo1.src; wsulogo1.src = t">
<img src="../../images/wsu-logo-xsm.gif" border="0"  name="wsulogo0" ></a>
<a href="javascript:return true"
onmouseover="var t = wsulogo0.src; wsulogo0.src = wsulogo1.src; wsulogo1.src = t;">
<img src="../../images/wsu_seal_green_xsm.gif" border="0" name="wsulogo1"></a>

VBScript

VBScript is a scripting language based on Visual Basic. Its capabilities are similar to JavaScript. Not all browsers support VBScriptlets.

ActiveX

An ActiveX control is roughly equivalent in concept and implementation to the Java applet.  Whereas a Java applet can run on different systems, ActiveX runs only on MS Windows. An ActiveX control is typically written in C++ and compiled into a machine-code file for Intel x86 architecture, which is loaded into your machine as needed. Whereas Java and JavaScript are multi-platform programming languages, ActiveX controls are not cross-platform, work only with Internet Explorer, not Netscape's browsers (without a plug-in).

Creating your own Web Site

First, check out a few simple design examples by visiting http://www.cats.wright.edu/catsweb/images/default.html.  You can save these pages and start editing them as you like.  Make sure that all image files are also saved in IE4 and Netscape 4.5x or earlier.  You can save each image by right-clicking and choosing to save.

A Few Steps

Here is a list of steps from whatis.com in creating a web site.

• Aim, set objectives, define your audience.
• Plan the content.  Involve your audience. Build the site structure. Plan navigation and page consistency. Define a creative direction. Work with a graphic designer, if you know one. Select a page creation tool or editor.
• Create the HTML pages. Use tables. Create forms. Add visual elements. Scan images. Consider clip art. Create or find animated GIFs. Make images with transparent background color.
• Keep content dynamic. Add interactivity.  Add sound, video.
• Test your site thoroughly, especially for broken links.
• Put your site on a server.
• Manage your site.

Learn HTML -- Not?

It is possible to create a Web page without learning HTML using recent versions of word processing packages such as MS Word and Corel WordPerfect, or by using a Wysiwyg HTML page creator, such as Microsoft's FrontPage, or Netscape's Composer.  We recommend Netscape Composer (in the room 141 RC). Or, you may prefer to use MS Word. In MS Word, edit your files as usual, but at the moment of saving, choose to Save As "Web pages" or as type "HTML".   The full scale web creation tools like MS Front Page 2000, or Macromedia DreamWeaver have many more features and built-in tools tuned for the web.

For greater control over your web page, learn HTML, and use a good text editor such as Emacs that understands HTML tags.  However, learning HTML, even from a good tutorial, is an arduous task.  Appendix B has a link to an HTML 4.0 Reference Manual (as a zip file), another to a tutorial.

Occasionally, you should see the actual source code of an interesting page. Both Netscape and IE have a "View Source" item in their menus. Most commercial web sites make heavy use of tables, and this makes the source look very complex, and learning from such examples is difficult.

Publishing

After you've built and tested your Web site on your own computer, you put the files on a computer that has a Web server so that your site will be accessible to the world. This is known as publishing. And, once your site is part of the Web, you'll want to update files on some periodic basis. The final step is to send files. You'll need ftp or web-publishing software to do this. In 141 RC, use the tool called WS_FTP. Read the Appendix D for details on publishing at WSU.

One of your html files - the first page - has to be named either default.htm or index.htm for your site to work properly. Server software enforces a rule that once a connection is made to a directory it will automatically load and display one of these two pages. Your ISP can tell you which one works for his setup. (Some servers still enforce the use of a ".html" instead of ".htm" at the end of your files.) Organize your files into logical subdirectories. In a small site put all your gifs and jpegs in a folder/directory called something like "images". Make sure your html reference code then says "images/picture.jpg". Larger sites require additional category folders (sounds, archive, databases, etc.).

Procedures

Your goal is to develop and publish your own home page. To do a good job can easily take several days. For now, reduce your goal to compose a web page using as many of the elements listed below as possible, within the 110 minutes allotted to this lab.

The work you do today can be the starting point for the Project 2 of the term.  So, do your best!

Note also that this lab is scheduled as "Instrumentation Lab," but you will be doing the web work in the Computer Lab (141 RC).

1. Create a new file called webDesign.txt to journal your composition of the home page, and to include your thoughts. Include at the top your full name and SSN.
2. Check out a few simple design examples by visiting http://www.cats.wright.edu/catsweb/images/default.html. You can save these pages and start editing them as you like.
3. You may use any HTML editor that you are comfortable with. (See the section on Learning HTML.)  Your page should, minimally, have the following web page elements:
   • five links, to internal bookmarks or to external URLs
   • one bulleted list
   • three clip art images
   • one table
   • a mailto URL to yourself
4. Let your home page contain whatever you wish but it must be "professional.". Some suggestions are: your resume, your interests, etc.
5. Publish the home page you developed in two places: our WSU's recommended site (~/www/) for student homepages, and also at the free site you discovered in a previous lab. To publish your pages on the WSU web site, use the WS_FTP tool.
6. Include your contribution to fill in items 5 and 3 of the Top Ten Signs You're Not Spending Enough Time On The Internet in the file webDesign.txt.
7. Include the URLs for your homepages, and any feedback you wish to give us in the file webDesign.txt.

Concluding Activities

Achievement Test

Send the file webDesign.txt to your lab TA via email, with EGR199-webDesign as the subject.  Your TA will verify that the web pages whose URLs are included in the file sent are looking fine.

Appendix A: Acronyms

Appendix B: Further Reading Links

• http://www.cats.wright.edu/catsweb/cs/docroom/unix/personal.htm Guide to Creating Web Pages
• http://www.wright.edu/cwis/templates/ Instructions for Using WSU Personal Web Page Templates
• http://www.freewebspace.net/ Reviews of free personal web space providers.

For the 2-hour lab, there is no need to visit any of the following. But for the Web Design Project, visit the following sites at least once to familiarize yourself with what is available.

• http://info.med.yale.edu/caim/manual/ Yale's Web Style Guide
• http://www.cwru.edu/help/introHTML/ A Tutorial on HTML
• http://www.htmlhelp.com/distribution/ The entire HTML 4.0 Reference Manual as a zip file
• http://www.agag.com Collection of animated GIF files, including the Humming bird above.
• http://www.gamelan.com/ Collections of Java applets. Freely downloadable.
• http://www.infohiway.com/javascript/indexf.htm Cut and Paste JavaScript code samples.
• http://wsabstract.com/  JavaScript code samples and tutorials
• http://www.randomhouse.com/features/davebarry/ Dave Barry's Emoticons

Appendix C: HTML Syntax Quick Reference

The following is a mildly edited "Quick Reference Card" from the webmonkey / reference site.
 

	for HTML tags, etc.

Appendix D: Publishing Your Web Site at WSU

1. Every WSU student has an e-mail address and a URL.   For example, if your e-mail address is  smith.199@wright.edu, then your URL is  http://www.wright.edu/~smith.199     Note that the address is case sensitive, so ~Smith.199 will not work.  Remember that all persons using WSU resources to store or serve web files must adhere to the WSU Web Policy.
2. Your web pages can be created using any one of HTML editors on any computer system (Unix, Windows 9x/NT, or Mac).  The procedures of this section assume that you have placed all your web files in a directory called www
3. To set up your web site on WSU, ftp the web file(s) to your UNIX www directory as follows.
   1. Invoke our FTP client WS_FTP.
   2. Click Connect/New and fill in the HostName as either paladin.wright.edu or discover.wright.edu
   3. WS_FTP will ask for your Unix user name and password. (Caution: Do not let WS_FTP save your password.)
   4. Change directory (button labeled ChgDir) to the parent of the local folder www  containing your web files. Make sure that you named the main page within www as index.htm.
   5. Upload the entire www directory (put) of your web files  (HTML, GIF, ...) from your PC to the remote directory by selecting  www in the left pane of the WS_FTP window, and  then clicking on the button labeled with a right arrow (-->). If the directory www was not already there on the remote Unix system, WS_FTP will request Unix on your behalf to create it first before uploading the files in it.  Once you have placed the main page file in your Unix www directory, your web site will be accessible to anyone using the WWW, and a hyperlink will appear in the University's online directory.
4. To update your web site on WSU, revise the files, and ftp the web file(s), as above, to your UNIX www directory.
5. Occasionally, you will find that a browser continues display an old version of a web page even after you had uploaded a new page to the web server.  This is due to disk cache.  Both Netscape and IE can clear the disk cache.  In IE, go to Tools/Internet Options/Temporary Internet Files/Delete Files.  In Netscape, go to Edit/Preferences/Advanced/Cache/Clear Disk Cache.