A Quick Guide to Creating Your First World-Wide-Web Home Page at Pitt

The first step in developing your first simple home page is to become oriented to your current environment. We will focus on getting started quickly.

What you need: You need to have two simultaneous system sessions: one on your Unix account and one on Netscape or Internet Explorer so that you can see it work. Without Windows, you'll need to start with your Unix account and hope that everything works before you get around to test it using Netscape or Internet Explorer.

Getting Started: Find your icons

• Start your computer and Windows
• Look for one or two Windows groups that appear to be Internet or LAN related. Some words you might want to look for:
  • Internet
  • Communications
  • LAN Workplace
  • TCP/IP
  • Mosaic (on a very old computer)
  • Netscape
  • Internet Explorer
  • Trumpet or Trumptel
  • Telnet
  • Web Browsers/Tools
• Open each group, and search for these groups or items. If you have trouble, ask a lab assistant.
• The assumption from here will be that both icons are visible at the same time on the screen while you work. From here on, both NETSCAPE and INTERNET EXPLORER will be referred to as the BROWSER.
• Make sure you have in front of you your Network Authorization Account and password before starting.
• What we will do is create a file called INDEX.HTML (your "home page") in your account under your /public/html subdirectory. Web browsers look for a file by that name in that subdirectory.

Start the programs

• Double-click the browser icon. Although the initial Netscape screen is shown below, Internet Explorer looks very similar.
• We will focus on only a few key aspects of the browser pertaining to your own home page, but there are several features you can explore on your own.
• For Windows 3.1, press ALT-TAB and then you will return to the Windows Program Manager. If it doesn't work for you, make sure you press Alt first, then press and release TAB while continuing to hold ALT. It might take a few moments, but the words Program Manager will soon appear in a grey rectangle in the middle of the screen. After those words appear, let go of the ALT key and you'll be back to the Program Manager.
• For Windows 95, click the start button, then click RUN then in the dialog box type

  telnet

  and press enter or click ok.
• Telnet or HOST PRESENTER will give you access to a text-based interface. When you see the following dialog box, type

  unixs

  in the text area (labeled Hostname) and click the OPEN button.
• If that doesn't work, then you might to type out

  unixs.cis.pitt.edu
  

• The login screen will look like this: Here we will use as an example ABCST123 as the network authorization account number. Whenever you see ABCST123, replace it with your own account number.

  ---

  Trying UNIXS.CIS.PITT.EDU (136.142.185.12)... Open
  
  SunOS UNIX (unixs3.cis.pitt.edu)
  login: abcst123
  ais password:XXXXXX
  Authenticated via AFS Kerberos.
  Checking system rights for ... remote login permitted.
  Last login: Thu Jan  5 23:54:05 from ehdup-g-8.slip.n
  Computing and Information Services                    UNIX Services
  ***********************************************************************
  CIS news and schedules available in "help cisnews.nws" and "help
  schedule.nws"
  
  CIS Dialup Numbers to Require Account Name, Password   help cisnews.nws
  VMS Cluster Software Upgrades and Changes              help cisnews.nws
  VAXVM2 Upgrade Rescheduled                             help cisnews.nws
  
  ***********************************************************************
                       ANNOUNCEMENTS FOR WEEK OF JANUARY 9
  
  Computers in Academia Lecture on January 18            help cisnews.nws
  *SMTP.PITT.EDU Has New IP Addresses                    help cisnews.nws
  ***********************************************************************
        ALL SYSTEMS DOWN MONDAYS 02:00 to 07:00 FOR MAINTENANCE
          To re-read login announcements type: more /etc/motd
          For help on UNIX software and commands type: man man
  (1) unixs3 $
  

• After you log in, you'll be at the $ prompt. That prompt is like the C> prompt on a PC; it's where you can issue commands.
• At the $ prompt, type the following commands and press ENTER at the end of each:

  $ cd public                    (note: later you won't need to type
  $ mkdir html                    mkdir html; you can simply type
  $ cd html                       cd public/html at this point)
  
  The easiest way to begin is to use a text editor called PICO.  to 
  start PICO, simply type the word pico followed by a space, then the name 
  of your home page, which must be called index.html, then press ENTER.  
  Here's what it will look like to do this:
  $ pico index.html
  The blank PICO screen will appear as follows:
    UW PICO(tm) 2.3                  File: index.html
  
  
  
  
  
  
  
                          [ New file ]
  ^G Get Help ^O WriteOut ^R Read File ^Y Prev Pg ^K Cut Text  ^C Cur Pos
  ^X Exit     ^J Justify  ^W Where is ^V Next Pg ^U UnCut Text ^T To Spell
  
  You can then type the contents of your home page.  We will do 
  something simple.  Type all of what you see in the PICO window below, 
  including the less than and greater than signs.  Where it says "Your 
  Name" type your actual name.  These delineate "tokens" that signal the 
  system to follow HTML (HyperText Markup Language) commands.  Note that
  you must press ENTER after pressing ctrl-O in the example below.
  
  
  
  We will use the following basic HTML commands:
  
  
  Now go back to your Browser.  Click on FILE-OPEN LOCATION, and then 
  type your home page address and click OPEN.  If your account name is 
  ABCST123, then your home page address would be 
  http://www.pitt.edu/~abcst123.  Here is the result:
  
  You should see an image similar to that above.  Notice 
  that there is a graphic image that states "under construction."  If you
  have or know of a GIF 
  (graphics image file) that you would prefer to use, feel free to use it.  
  You can even FTP (or RAPID FILE) your own GIF file (ie., of yourself) to 
  your account and refer to that instead.
  If you need to make changes to your page, ALT-TAB back to your Unix 
  account, make the changes in the PICO editor, and then press CTRL-O to 
  save and continue.  Then ALT-TAB back to your browser and click on the 
  icon called "RELOAD" to see if the changes made an improvement.

A second page

• The next step is to insert a second page to which the first will eventually refer. As an example, we will place a page that evaluates the Internet as a tool for commerce.
• ALT-TAB back to your Unix account.
• Press CTRL-X to exit the PICO editor. You will return to the $ prompt at the bottom of the screen. Don't worry about remaining PICO text at the top of the screen (the system doesn't clean it up).
• Now edit a second document, called "commerce.html"
  To do this, at the $ prompt, type pico commerce.html
• Type a few impressions that you have of the Internet as a tool for commerce in bulleted list form. Use your own impressions; the ones below are only a sample.

It should appear as follows:

Hypertext reference

• Our final task is to link your home page to this document using a "hypertext reference"
• First, ALT-TAB back to your Unix window and press CTRL-X to quit editing your commerce page.
• Once again, edit your INDEX.HTML page (type pico index.html at the $ prompt)
• In the following model of what INDEX.HTML can look like, note the sample additional sentence. Type the portion before and after the word here exactly as it is shown:
• The "a href="http://www.pitt.edu/~abcst123/commerce.html" tells the system to begin highlighting text from that point on as an underlined blue item. The /a tells the system to end the highlighting. In between the two tokens (the a and /a tokens is the word here.Notice the new sentence:
  
• The word here appears in blue when you next view your home page. If you click on it, you will be sent directly to the page that the reference points to. In this case, you will be taken to commerce.html.

If you get this far

• Try to insert a hyperlink from the commerce.html page back to your home page, so that the reader can go back easily.
• Find the home page for Pitt (http://www.pitt.edu) and browse around to find the Pitt Web Publisher's Guide. You'll see several helpful items for additional Web page development.
• When you're finished, exit whatever pico document that is active (ctrl-X), logout from Unix, and click CANCEL on the dialog box that got you into Unix. Exit Windows.