Kent-Drury
English 348
Creating a Personal Webpage on www.nku.edu

During this class period, you will create a simple webpage that will reside on NKU's Unix web server, which is called "www.nku.edu."  If you have an NKU e-mail acccount, you also have an account on the web server.  First, you will create the page in Microsoft Word.  Then you will copy the page into a file on your NKU web account.

Creating your page
When you create a Web page, you add hypertext Markup Language (HTML) "tags" to the file.  These tags tell your browser (e.g., Netscapes Navigator or Internet Explorer) how to display your page.  The sequence below shows you how to create a very simple page using some basic HTML tags.  Later, we will be creating more complex pages using a page makeup program (Netscapes Composer). If you plan to create your more complex pages using another page makeup program, please consult with your instructor, as each has idiosyncrasies.

Procedure

  1. Open a new document file in Microsoft Word.
  2. Type the following on this page, excluding the items entered in the right hand column (the right hand column explains why you are typing the items on the left).  You can vary any of the wording, but the tags must be exactly as shown:
     
    <html>  All html web documents begin with this tag
    <title>Bob's Home Page</title> Subsitute your name for Bob's; this identi-
    fies the document to browsers and search 
    engines, but is not displayed 
    <body> This tag identifies to the webpage browser 
    the portion of your webpage that will be 
    displayed. 
    <h1><center>Bob's Home Page</center></h1> This is the first part of your page that will 
    be displayed on the screen. The first head-
    ing is often the same as the title. Six levels 
    of headings are available to you: <H1> 
    through <H6>. The "CENTER" tag centers 
    this line of text
    <hr> This tag adds a horizontal rule to your page
    <p>Welcome to my Home Page! </p>
    <p>I will be adding more information to this page soon....</p>
    The "<p>" tells the browser to start a new 
    line and to add an extra line space.  If you 
    don't want an extra line space, use <BR> for 
    "break" instead.
    <p>Here is my first hypertext link:

    <a href="http://www.nku.edu/index.html">Northern Kentucky University</a>
    The "a href" and "/a" tags define linked text.
    <hr> This tag adds another horizonal rule to your 
    page.
    <table>
    <tr>
    <td>row1, cell 1in my table</td><td>row 1, cell 2 in my table</td>
    </tr>
    </table>
    These tags create a simple one row table.
    <table> begins the table.
    <tr> identifies the beginning of the 1st row; </tr> identifies the end of the 1st row.
    <td> identifies the beginning of a cell; </td> identifies the end of a cell.
    </table> ends the table
    <ul>
    <li> item 1 in my bulleted list
    <li> item 2 in my bulleted list
    </ul

    <ol>
    <li> item 1 in my numbered list
    <li> item 2 in my numbered list
    </ol>
    These tags create lists. The first is an unnumbered (bulleted) list
    The second is an ordered (numbered) list
    <p>Created by: Your name</p> Always identify yourself as the author. 
    <p><a href="mailto:youremailaddress">your e-mail address</a>
    These tags create an e-mail link. Substitute your e-mail address whereever these words appear.
    <p>Last updated: Add a date</p> Always indicate when your page was last 
    updated.
    </body> This tag tells the browser you are finished 
    with the body of the webpage (that is, the 
    part that should be displayed)
    </html> This tag tells the browser your html docu-
    ment is complete

    Save your file text to the clipboard (from the MSWord toolbar, choose "Edit" and "Select All," then "Edit" and  "copy").  Or use a "CTRL A" to highlight the text, then a "CTRL C" to copy it to the clipboard.


Transferring your file to your NKU Account/Making it readable on the Web

  1. Open and log onto your NKU account using TeraTermPro.  You will see several servers listed, but you will need to type in the server you need. Type "www.nku.edu" and click on "OK."  After you are logged on, you will see a "$" prompt. You are now in the main directory.
  2. Your world wide web directory has already been created by the NKU webmaster.  Move to your world-wide web directory by typing
  3. Next create the basic file upon which your main webpage will reside by using the Unix editor "pico".  To do this and to name your page "homepage", type
  4. A new screen will appear.  You are now in this open file. Now paste in the document you created and saved to the clipboard earlier in Microsoft Word.  Do this by going to the Edit menu and selecting "Paste."  The document you created should appear on the screen.
  5. Now save the file on your NKU account by simultaneously pressing the Ctrl key and the X key. You will be asked if you want to save the file.  Type Y for "yes." Push the "Enter" key to write your file.
  6. Type exit to leave your NKU account.
  7. Now open Netscapes and attempt to view your home page at the following address:
  8.  (Replace "~username with your own username.)
  9. If you have time at the end of class, open you page in Netscapes Composer and familiarize yourself with the webauthoring tools available there.  Or look at the links to webauthoring tools listed on the webpage at  <http://www.nku.edu/~rkdrury/technology.html> to try out colors, backgrounds, etc. for your webpage.  Look under the category entitled "Website Design Tools."
To integrate graphics or background images into your webpage, click here.