Building Your Bridge to the WWW

TASK 1
Setting Up Your HTML Directory on Mason

TASK 2
Creating Your Homepage File

TASK 3
Setting UpYour Homepage so that It Can Viewed It on the Web

CHECK IT OUT!
You're all done...check out your page on the Web

ADDED BONUS How to make changes to an existing page

ESSENTIAL UNIX COMMANDS Here's a small chart to help you with the basic UNIX commands you'll need for webpage management

There are two basic steps that you must do to set up your first webpage, or homepage.

These two steps are, one, to prepare your mason.gmu.edu account space for html files and, two, to make your homepage file.

The first step can only be done one way...while you are logged onto your mason account and by using UNIX commands (UNIX is the operating system of mason--it is the "language" mason.gmu.edu "speaks.").

The second step can be done many different ways, but since you will be making a very basic page, I think it's easiest to do it the "old-fashioned" way, by "coding" a basic html file using the on-line editor called pico available on mason.

Use the directions on this webpage to both prepare your mason.gmu.edu account space for web files and to make your basic homepage file using pico.

TASK ONE -- Setting Up an HTML Directory on MASON The first step in setting up your homepage is to create a directory for it in your mason/osf1 account. Not only do you need to create this directory, but you also need to change your account itself so that other people can read your homepage file but not other files in your account (like your e-mail files). Follow the directions below to do both these things.

A. Log onto your mason account (use Telnet)

B. Type the following commands EXACTLY. (You only do this part once...you only have to create this directory once. Once you have this directory created, you store all your html files and subdirectories here.)

* Words that are italicized and underlined are prompts: instead of the italicized and underlined words, you need to type in the specific information you are asked for, for example, if you see username, you should type in your username that you use to login to osf1--the part of your e-mail address before @gmu.edu).

** The yellow marks mean "type an empty space."

chmod 711 .

The yellow marks mean "type an empty space."

Sets permissions to allows visitors (the world) to move through your home other files.

mkdir public_html

Makes a directory to put your WWW pages in.

chmod 755 public_html

Sets permissions allowing visitors to go into your WWW directory

cd public_html

Moves you into your WWW directory.

TASK TWO -- Creating Your First HTML File (Homepage)

A. Now you must put an HTML file (a webpage file) into the directory you created above. Your homepage file will be called index.html and Pico is the editing program that allows you to create and make changes to this file. To make this file, after the osf1 prompt type:

pico index.html

"pico" starts the pico program and index.html" tells pico what to name the new file you are creating.

B. Type the following exactly (expect for the items in italics...include your specific information in place of the bolded and italicized words). The information in the <> marks is html mark-up. This makes this file a WWW file.

<html>

<head>

<title> Your Name </title>

</head>

<body bgcolor="#00FF00" text="#FFFFFF">

<body>

<h3> George Mason University </h3>

<h1> Your Name </h1>

<hr>

<p>This is my first webpage. It is under construction. Come back and visit later...it will be a whole new page! <p>

<hr>

<p>Here are three interesting links with information to help you build a webpage:

<ul>

<li><a href="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">

Beginner's Guide to HTML</a>

<li><a href="http://www.learnthenet.com/"> Learn the Net</a>

<li><a href ="http://www.maran.com/colorchart/index.html">

Maran Graphics Colorchart </a>

</ul>

<p>Here are three interesting links:

<ul>

<li><a href="http://www.cnn.com/">CNN</a>

<li><a href="http://www.washingtonpost.com/"><i>The Washington

Post</i></a>

<li><a href="http://mason.gmu.edu/~eli">The English Language

Institute at GMU</a>

</ul>

<hr>

<a href ="mailto: your e-mail address">your e-mail address</a>

</body>

</html>

C. When you are done typing, press the control key and the X key at the same time (the exit command at the bottom of your screen--^X). When you are prompted, answer y for yes to exit pico and to save the file. When the computer asks you if you want to save the file as index.html press the return key (that means you are answering yes).

TASK THREE -- Making Your Homepage Accessible At the osf1 prompt, type the following :

chmod 755 index.html

Sets permissions allowing visitors to view your homepage.

Check It Out!

A. Your new homepage is complete! Your file called index.html is used as the default page when visitors look at your account. Your page's address (URL) is:

http://mason.gmu.edu/~username/

Your homepage is a single file that can be infinitely long. When you make a sub-page, it is best to create a subdirectory within your public_html directory and put the sub-page in this new subdirectory so that in the following example, directoryX = the name of the subdirectoy you create, and filename.html = the name of the new subpage, making the address (or URL) for the new page as follows:

http://mason.gmu.edu/~username/directoryX/filename.html

B. Test out your page. Start Netscape and use the Open command. Type in your URL:

http://mason.gmu.edu/~username/

ADDED BONUS -- Making Changes to a Homepage

You can make changes to any homepage you have in your public_html directory. To do this, type the following after the osf1(mason) prompt:

osf1.gmu.edu> pico public_html/index.html

Typing pico tells the computer to start the program called Pico; typing public_html/ tells Pico to open that directory; typing index.html tells Pico to open the file with in the public_html direc tory called index.html.

Make any changes you want to make and use either the exit (^X) or the writeout (^O) commands to save the changes you have made. Be sure to use the full file name (public_html/index.html) when you save the file and to answer yes when the computer asks you if you want to overwrite the file.

EXTRA DOUBLE BONUS -- Essential Unix Commands

Mason uses the Unix operating system (that's its language, and unfortunately it hasn't taken any ELI classes, so it doesn't know any English). So, to communicate effectively with mason, you need to know the following vocabulary. Be sure to type an empty space between the command and any file or directory name you want the command to "take place on." For example, to change the persmissions on a file named bridge.html, you would type: chmod 755 bridge.html

pwd	Print Working Directory	Shows you the current directory you are in within your account's directory system
cd	Change Directory	Moves you deeper into your account's directory system. NOTE: You must type the name of the directory you want to go into afterward, e.g. cd public_html
cd ..	Move Up One Directory	Moves you up one directory (opposite of cd).
ls	List	Shows files and directories in current directory
ls -l	List Showing Permissions	...r , x, and w are "permissions" r = read, x = execute, w = write
chmod	Change Mode	changes the r,w,x permissions on a file, or the search permissions of a directory NOTE: You must type the proper "setting" for the new mode and the name of the file or directory you want to have affected e.g.chmod 755 index.html
mv	Move	Moves a specific file to a new location or "moves" it to a new file name, e.g. mv index.html oldindex.html
mkdir	Make Directory	...it should be obvious...
rmdir	Remove Directory	...you could also call this erase a directory, but you can only erase an empty directory
rm	Remove	Use to delete,or erase, files.