University of Southern Mississippi
|
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 webpage. To activate your email and ocean web accounts, either visit the Itech Help Desk Help Desk on campus in the HUB, Room 104 from 8am to 4:30pm 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 Teresa.Welsh@usm.edu. Your questions will help clarify and develop this tutorial.
Install and Use WinSCP Program
- Go to WinSCP
- Click on one of the download sites for "WinSCP 3.6.1 beta installation package"
- Save to your desktop or a disk
- After the download is complete, close all windows
- Click on Start, then Run. Use Browse button to find the downloaded file in your disk, then click OK and follow prompts to install.
Back to Top of Page
How to Set Up a Public Directory for Webpages Your URL or Internet address for your homepage will be: http://ocean.otr.usm.edu/~userid
- Click on WinSCP icon or WinSCP in program files
- For Host Name, type: ocean.otr.usm.edu
- 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)
- Screen will pop up with left and right windows (left are local computer files; right are files on your space of the ocean server)
- 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"
For example, my homepage address is: http://ocean.otr.usm.edu/~w146169Back to Top of Page
How to Create a Webpage Instructions (For Windows)
- Insert a disk into drive A (or use any other computer drive or your computer Desktop)
- Go to simple webpage template
- First save a copy of the library graphic by placing the cursor over the image; right click on the mouse
- A menu will pop-up; left-click on the option "Save picture as"
- Save the image to your A disk
- Click on "View" on the menu bar at top of screen
- In the View menu, click on "Source" or "Page Source"
This will show you the HTML code used to construct the page.- Highlight all the lines using the left mouse button
- Copy the highlighted lines by pressing the "Control" button and "C" (or use Edit/Copy)
- Paste the file into a new "Notepad" or "Wordpad" file (Start/Programs/Accessories/Notepad or Wordpad)
- Click on "Edit" then "Paste"
Edit the webpage 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 webpages.- 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.
- Click on the "Save As" button to save it to the A disk (this default file will be your homepage). Close Notepad.
- Check how the webpage 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".- 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.
- 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".
- 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
- Click on WinSCP icon or WinSCP in program files
- For Host Name, type: ocean.otr.usm.edu
- Enter User Name (student ID) and Password, then click Login button
- Screen will pop up with left and right windows (left are local computer files; right are files on your space of the ocean server)
- On the right side, double-click on the public_html folder to open
- On the left side, double-click on the A disk that holds your html and image files
- Left click on your "index.html" file and drag it to the right side
- Left click on the "Cook.gif" file and drag it to the right side
- When the menu box pops up, choose: Copy
- 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.
- <li>You can write just text. <font size="+1">You can make the text bigger </font> or <font size="-1"> smaller </font>. You can even make the text <font color="#334BFF"> a certain color</font>
- <li> Or you can include links to other pages, including pages you will create. You do this by typing the following command. <a href="http://the address of the page"> And put in the name of the link here where the person will click </A> To link to the USM homepage you would type <a href="http://www.usm.edu">USM homepage</A>
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):
- img alt="Explain the graphic here for someone whose browser cannot see images, or for visually impaired users"
- align="this will align your photo to nearby text by using one of the following: top, bottom, left, center, or right"
- img src="this is the name of your graphic file, whether it be gif, jpg, or some other format"
</blockquote> (This ends the margin format)
</body> (This ends your text)
</html> (This ends your document)
HTML Online Tutorials
Back to Top of Page
Webpage Design
Teresa Smith Welsh
Updated 05/19/06