This guide was created and maintained by Dr. Chao-Hsien Chu at the School of Information Sciences and Technology, The Pennsylvania State University, USA. Sent your comments and suggestion to Dr. Chu at chu@ist.psu.edu.

Purpose of this page is to provide students with a " quick and dirty" way of developing your own WWW page at Penn. State using the Microsoft Word and the Netscape or Microsoft Internet Explorer browser in a PC running under the Windows environment. Sorry for the Mac users, I hope that you may still find this page useful).

Getting Started.
Some Technical Terms You Need to Know.
SMOMN - Single Minutes of Mastering Netscape.
SMOMI - Single Minutes of Mastering Internet Explorer.
Procedure to Initiate the WWW Page.
Structure of the HTML file.
Common Keywords (commands).
How to Make Hyperlinks.
How to Include Images in Your Page.
How to Build Direct Mail Link.
Principles for a Good Web Design.
Where to Download Free Internet Software?

Back to EC Resources Page

Getting Started

To start with development process, you must have the following items ready:

• Have you own Access Account.
• Access to a PC with Microsoft Word and Netscape or Internet Explorer.
• A copy of Microsoft Office 97 (Word for 97).

Back to Top of the Page

Some Technical Terms You Need to Know

Here is a list of the basic technical terms you need to know:

WWW	Stands for Word Wide Web, WWW is an universal way of organizing and presenting resources and information over the Internet.
HTML	Stands for "HyperText Markup Language", HTML is the official language of the Web page.
Web Browser	A special computer program that reads and interprets HTML documents. There are many Web browses available, with Netscape and Internet Explorer as two of the most popular ones.
Web Server	A computer with suitable software installed to respond requests from client browsers. A Web server is needed to make your own Web pages accessible to others.
URL	Stands for Uniform Resource Locators, URL is an address where you can browse information.
Hyperlinks	An approach to which texts, icons, and pictures are linked to other texts, icons, and pictures as well as to video clips, files, sound, and other resources.
FTP	Stands for File Transfer Protocols, FTP is a special computer transfer facility which allows you to quickly transfer files between computers.

Back to Top of the Page

SMOMN - Single Minutes of Mastering Netscape

Netscape is a comprehensive tool for browsing Internet. It contains quite a lot of technical details on viewing world wide web page. Therefore, understanding every piece of details would be very time consuming. However, by focusing on the following items, one may become a master of using Netscape in less than 10 minutes:

• Open (Link to) a Page. Use the mouse to click on the File Menu and then the Open Location option. Enter the URL of the page.
• Change the Page Setup for Printing. Use the mouse to click on the File menu and then Page Setup option. Turn on/off the option you want or dislike.
• Preview the Printing. Use the mouse to click on the File menu and then Print Preview option.
• Print Out the Page. Use the mouse to click on the File menu and then Print option.
• Save the HTML File to Your Own Computer. Use the mouse to click on the File menu and then Save As option and file name to save.
• View the Source Code of HTML File. Use the mouse to click on the View menu and then Document Source option.
• Copy Image File from other Sources. Use the right-side button of the mouse to click over on the image, select the Save this image as menu to save the image file in your computer.
• Add as a Bookmark for Use Later. Use the mouse to click on the Bookmarks menu and then Add Bookmark option.

Please locate a PC with a Netscape browser and learn how to use the browser. For instance, learn how to log into this user guide at: "http://its.ist.psu.edu/chu/course/guide.htm", view the source code, save the guide in your floppy disk, save an image (for instance, the blue dot), mark it as a bookmark, etc.

SMOMI - Single Minutes of Mastering Internet Explorer

Internet Explorer (IE) is another comprehensive tool for browsing Internet. It contains quite a lot of technical details on viewing world wide web page. Therefore, understanding every piece of details would be very time consuming. However, by focusing on the following items, one may become a master of using IE in less than 10 minutes:

• Open (Link to) a Page. Use the mouse to click on the File Menu and then the Open option. Enter the URL of the page.
• Change the Page Setup for Printing. Use the mouse to click on the File menu and then Page Setup option. Modify the option to fit your own style.
• Print Out the Page. Use the mouse to click on the File menu and then Print option.
• View the Source Code of HTML File. Use the mouse to click on the View menu and then Source option.
• Save the HTML File to Your Own Computer. Use the mouse to click on the File menu and then Save As File option and file name to save.
• Copy Image File from other Sources. Use the right-side button of the mouse to click over on the image, select the Save Picture menu to save the image file in your computer.
• Add as a Favorite for Use Later. Use the mouse to click on the Favorites menu and then Add Favorites option.

Please locate a PC with an IE browser and learn how to use the browser. For instance, learn how to log into this user guide at: "http://its.ist.psu.edu/chu/course/guide.htm", view the source code, save the guide in your floppy disk, save an image (for instance, the blue dot), mark it as a bookmark, etc.

Procedure to Initiate the WWW Page

1. Obtain your own Access account.
2. Register your Access account with the PSU public WWW server.
3. Organize the contents of your page.
4. Enter your thought via the Microsoft World. Save the file in a Word format.
5. Save your file into a "HTML" format.
6. Use an ASCII editor (e. g. Notepad or WordPad under Windows's Accessories directory or EDIT under MS-DOS Prompt) to modify your HTML file. Save the file with extension of "html".
7. Use a WWW browser (e.g. Netscape or Microsoft's Internet Explorer) to preview your page.
8. Add additional flavors (e.g., Hyperlinks, images, fonts, etc.) to your HTML file.
9. Uploaded the file to your WWW directory.

Please locate a PC which was inked to the Internet, learn how to register your Access account with the PSU public WWW server.

Please locate a PC with "Word" in campus, type your resume, learn how to save your vita in a "HTML" format. Hint: Select "Save As HTML Format" from the "File" menu.

Please locate a PC in campus, learn how to activate an ASCII editor such as Notepad, WordPad, or Edit, how to edit and save files (for instance, edit your resume file and save it as "homepage.html"), and how to use "Find" and "Replace With" functions.

Please locate a PC with a FTP utility (e.g., WS_FTP) in campus, learn how to upload a file (for instance, homepage.html) to the web server. In this case, your resume will be displayed as your default page. If your machine don't have "FTP" software installed, Click Here to download a free copy and install it.

Structure of the HTML File

A HTML file must start with <HTML> and end with </HTML>. Inside the file, it contains two main portions, Head and Body. Where the "/" symbol means "termination". The structure should look as follows:

<HTML>

    <HEAD>
        <TITLE>

          ( ** Title of your page goes here ** )

        </TITLE>
              
    </HEAD>

    <BODY>

      ( ** Main contents of your page goes here ** )
               
    </BODY>

</HTML>

The title of your page should contain key words which reflects the nature of your page. These words will serve as the key for search engine to locate your page around the world (if you make your Web page know to the public).

Exercise #7: Understand the Structure of a Web Page.

Use your Web browser to locate this Web page, view the source code to review the above "Commands" and "structure".

Common Keywords (Commands)

The following commands are frequently used in a Web page. Most of them need to go with a pair. The command started with a "/"symbol means to terminate that command.

• Center the Texts: <CENTER> … </CENTR>
  
• Add a Horizontal Line: <HR>
  
• Insert a Line Break: <BR>
  
• Insert a Paragraph Break: <P>
  
• Level of Headings. There are six levels: <H1> … </H1>, <H2> … </H2>, … <H6> … </H6>, with one being the highest level.
  
• Format Texts in Bold Face: <B> … </B>
  
• Format Texts in Italicized Face: <I> … </I>
  
• Format Texts in Underline Face: <U> … </U>
  
• Format Texts in Strong Emphasized Face: <STRONG> … </STRONG>
  
• Define the Texts as Pre-Formatted: <PRE> … </PRE>
  
• Format in the specific Font Size: <FONT SIZE = value> … </FONT>
  
• Format the Texts as Bullet Item: <UL> … <LI> … <LI> … </UL>
  
• Format the Texts as Ordered List: <OL> … <LI> … <LI> … </OL>
  

More detailed description and other commands can be found in:

• A Beginner's Guide to HTML.
  
• World Wide Web Frequently Ask Questions.
  
• Bare Bones Guide to HTML.
  

Please locate a PC with a web browser in campus, load this page and examine where have the above "HTML" commands been used in this user guide.

Back to Top of the Page

How to Make Hyperlinks

• Link to another HTML file (xxx.html) at different server:
  <A href = "http://www.xxx.xxx/xxx.html"> … </A>

• Link to another HTML file (xxx.html) at same server same directory:
  <A href = "xxx.html"> … </A>

• Link to another HTML file (xxx.html) at same server, but different directory (up one level):
  <A href = "../xxx.html"> … </A>

• Link to another HTML file (xxx.html) at same server, but subdirectory (yyy):
  <A href = "yyy/xxx.html"> … </A>

• Link to other place in the same file:
  <A href = "#zzz"> … </A>
  The place where it links to must start with <A NAME = "zzz"> … </A>

Please locate a PC with a web browser in campus, load this page and examine which types of "hyperlinks" listed above have been used in this user guide.

Back to Top of the Page

How to Include Images in Your Page

Use the command <IMG SRC = "xxx.gif" Align = yyy> to include the image file "xxx.gif" in your page. Where, the image file is in the "gif" format. You can convert most image file to this format using a popular Graphic Package (such as Photoshop, Corel Paint, Freelance, etc.). "yyy" can be either "top", "middle", "bottom" or many other options.

Many interesting icons and backgrounds can be found at:

• Microsoft Images Gallery
• Randy's Icons and Image Bazaar
• Icon Library in France
  

Please locate a PC with a web browser in campus, load this page and examine where and how "images" were included in this user guide.

Back to Top of the Page

How to Build Direct Mail Links

You can use the following statement to build a direct mail link so that other people can e-mail you their comments by clicking on the statement.

<A href="mailto:xxx@iastate.du">

where "xxx" is your E-mail user ID.

Please locate a PC with a web browser in campus, load this page and study the example of "mailto" link used at the beginning of this user guide.

Back to Top of the Page

Principles for a Good Web Design

The following principles may be helpful toward designing a good web page:

1. Don't tweak your web page for a particular browser.
2. Keep you web page compact so that it can be loaded quickly.
3. Always include a descriptive title.
4. Keep heading levels small, logical, and consistent.
5. Provide text alternatives to images.
6. Use a universal format that works on all browsers.
7. Sign and date your web page.
8. Test your web page before putting it over the server.

Back to Top of the Page

Where to Download Free Internet Software

Many Internet software can be freely downloaded. Items below are few selected lists:

• Netscape.
• Microsoft Internet Explorer.
• Mapedit - a image map program from Boutell.com, Inc.
• WS_FTP Limited Edition by Ipswitch Inc.

Back to Top of the Page
Back to EC Resources Page