University of Southern Mississippi
Web Page Tutorial


If you are a student, staff, or faculty member you can have a free Email account with Web-mail and space for your own personal Web page. To activate your email and ocean Web accounts, either visit the Itech Help Desk Help Desk on campus or call 601-266-HELP.

After activating the accounts, you must download the WinSCP program so that you can create a public account on the USM ocean server and upload files into it that can be viewed on the Web. Just follow the steps below, and if you have questions, e-mail me at drtwelsh@yahoo.com. Your questions will help clarify and develop this tutorial.


Install and Use WinSCP Program

  1. Go to WinSCP
  2. Click 'Run' to install the software and follow prompts to install.
  3. After installation, you should see an icon for WinSCP on the desktop (if you do not, then re-start the computer).
Back to Top of Page


How to Set Up a Public Directory for Web Pages

  1. Click on WinSCP icon or WinSCP in program files
  2. For Host Name, type: ocean.otr.usm.edu
  3. Enter User Name (student ID) and Password; click Save button, then Login button (once the ocean account has been successfully accessed, you will only need to open WinSCP and click on the Login button)
  4. Screen will pop up with left and right windows (left are local computer files; right are files on your space of the ocean server)
  5. Check to see if there is a folder called "public_html"; if not, you may create one with the following directions
    • On right screen, at the bottom, click on "F7 Create Directory"
    • Type in: public_html
    • Then click on "OK" This will create a public directory or folder called "public_html"
Your URL or Internet address for your homepage will be: http://ocean.otr.usm.edu/~userid

For example, my homepage address is: http://ocean.otr.usm.edu/~w146169
Back to Top of Page


How to Create a Web Page

Instructions (For Windows)

  1. Go to simple Web page template
  2. First save a copy of the library graphic by placing the cursor over the image; right click on the mouse
  3. A menu will pop-up; left-click on the option "Save picture as"
  4. Save the image to your Desktop or to a flash drive or any other location that you can access easily
  5. Click on "Tools on the menu bar at top of screen, then "Web Developer", then "Page Source" This will show you the HTML code used to construct the page.
  6. Highlight all the lines using the left mouse button or choose "Select All"
  7. Copy the highlighted lines by pressing the "Control" button and "C" (or use Edit/Copy)
  8. Paste the file into a new "Notepad" or "Wordpad" file (Start/Programs/Accessories/Notepad or Wordpad) (or you can use Arachnophilia)
  9. Click on "Edit" then "Paste"
    Edit the Web page by replacing the phrases "Your Name" and "Your E-mail" with your name (in two places) and e-mail address (in two places). Or you may copy and modify the code from any of my Web pages.
  10. When finished, click on "File" then "Save As" index.html (Notepad will save files in either .txt default format or will save as a .html file) to the same place that the library image is saved.
  11. Click on the "Save As" button to save it to your Desktop or flash drive (this default file will be your homepage). Close Notepad.
  12. Check how the Web page looks by clicking on "File" then "Open File in Browser"
    A menu box will pop up. Find the homepage file (index.html) in the disk or desktop and "Open".
  13. Your homepage should appear in the browser and you can check it for errors and see what changes you want to make. Repeat the above steps to construct and check the page until it suits you.
  14. To make any changes to the homepage, save the changes, then open WinSCP and drag and copy the file into the public_html folder. You will be asked whether or not to overwrite or replace the old file with the new, so click on "Copy" then "Yes".
  15. USM requires that you put a date at the bottom, as well as a link to your e-mail
    (replace "Your E-mail" with your email address in 2 places in the template).



How to Upload Your Files to the Web

  1. Click on WinSCP icon or WinSCP in program files
  2. For Host Name, type: ocean.otr.usm.edu
  3. Enter User Name (student ID) and Password, then click Login button
  4. Screen will pop up with left and right windows (left are local computer files; right are files on your space of the ocean server)
  5. On the right side, double-click on the public_html folder to open
  6. On the left side, double-click on the A disk that holds your html and image files
  7. Left click on your "index.html" file and drag it to the right side
  8. Left click on the "Cook.gif" file and drag it to the right side
  9. When the menu box pops up, choose: Copy
  10. Check it by opening a browser and typing in your homepage address (http://ocean.otr.usm.edu/~yourID).
Back to Top of Page


HTML Tutorial

Material below excerpted and adapted from Starting Your Own Home Page, by USM Cook Library.

Web pages are written with a code called HTML. Without HTML code, your Web page would not exist or would appear as a jumbled mess. To make changes to your sample Web page, all you need to do is change the text that appears inside these codes to create new headings, text, instructions, etc.

The codes are easy to spot because they are always enclosed inside these symbols: < > All Web pages are divided into two sections, a header, and a body (similar to the heading and message section of your e-mail messages).

When you use a code to start a function, you must also remember to "turn it off" by ending the function. This is accomplished by repeating the command but adding a backslash. (For example, <b> the bold command </b>). A few, such as <hr> for a line or <br> for a carriage return, do not require "turn off" signals. Below is an example of a Web page with the codes showing. Messages in italics explain the commands.

<html> (This begins your coding)
<head> (This begins your heading)
<title>Choose a relevant title</title>
</head> (This ends your heading)
<body> (This begins your actual page. )
<blockquote> (This command will create a margin on both sides of the page. )

<h1>This is the largest heading</h1>

<h2>This is the next largest </h2>

<h3>and so on </h3>

<h4>until you </h4>

<h5>get to the</h5>
<h6>smallest heading </h6>

<hr> (creates a horizontal line across your page)

<ul>(This command begins an indented list. The <li> indicates a bullet.) </ul>This command closes the list.

If you want to put a photo on your page use the following commands (Remember to enclose your file locations or URL addresses with quotation marks):


</blockquote> (This ends the margin format)
</body> (This ends your text)
</html> (This ends your document)

Back to Top of Page

To install a small, older HTML program that is easy to use, go to: www.arachnoid.com/arachnophilia/index_old.html. Click on the link: arach_full.exe (1.6 MB). Click on "Run" to install the program to your computer.


HTML Online Tutorials

HTML Tutorial


Back to Top of Page



Web Page Design
Teresa Smith Welsh
Updated 2/07/14