The HTML Survival Kit - How to Set Up Your Personal Homepage in CEE Unix Network

W elcome to the wonderful, yet enigmatic world of web authoring. I presume you're quite excited about the idea of creating your very first personal homepage, however have been having difficulties figuring out where and how to start in the CEE Unix Network. Here's a "how to" guide foryou to make it all possible, indeed. Keep in mind that instructions given below are originally designed for the CEE Unix Network, however you may find the same procedures working quite well in other systems.

You need to login to one of Unix workstaions in the CEE Unix network first. (It doesn't matter which workstation you're logging in) For example, I'll use 'sparky' workstation for following instruction.

Preparing a Directory for your personal homepage

First, change to your login root directory. (this is another way of saying 'the directory you're in when you login to your Unix account. Usually it is '/home/Your_login_ID') No matter which directory you are in now, easist way to change to your login root directory is by typing 'cd' command at the system prompt without any flag.
sparky:/home/Your_login_ID] cd <Enter>
```
	
```
O.K. Now you're in your login root directory. Next, you need to create a subdirectory where you'll put all your homepage and other personal webpages.
The name of the subdirectory will be 'public_html' (all in lowercase). You may wonder where this 'public_html' directory name came from. Here's why; The CEE web server was configured in such a way that
1. if you type your login ID after CEE website address in the web browser (i.e., http://www.cee.odu.edu/~Your_login_ID/ - don't forget to put a trailing slash '/' at the end), this particular 'public_html' directory under your Unix account will be searched automatically by the CEE web server,
2. if there is a file named 'index.html,' the file will be loaded automatically into the browser.
3. You can also can give a specific filename in the browser such as http://www.cee.odu.edu/~Your_login_ID/test.html.
(of course, assuming that you followed all instructions given in this page correctly). Thus, this 'public_html' directory is in a sense your own 'web' directory, and without this directory, you'll not be able to put your stuffs on the web.
To create 'public_html,' use 'mkdir' command at the system prompt.
sparky:/home/Your_login_ID] mkdir public_html <Enter>
```
	
```
Very well. Let's make it sure 'public_html' subdirectory was created. We'll do it by changing to 'public_html' subdirectory and list files using 'ls -al' command.
sparky:/home/Your_login_ID] cd public_html <Enter> sparky:/home/Your_login_ID/public_html] ls -al <Enter>
If you don't see any file listed, then everything is in order. (you shouldn't, since you just created a brand new, empty directory!)

Creating your personal homepage under 'public_html' directory

Let's recap. When someone tries to access your homepage by typing an URI http://www.cee.odu.edu/~Your_login_ID/, the CEE web server will look under your 'public_html' subdirectory, and will try to load a file called 'index.html.' (You can also can give a specific filename in the browser such as http://www.cee.odu.edu/~Your_login_ID/test.html)
That means that you need to create a HTML file using a text editor, and save it as 'index.html' under '/home/Your_login_ID/public_html' directory. In other word, this 'index.html' is your personal homepage that contains all your web stuffs.
At this point, if you're not quite for sure about how to write a HTML file (=webpage) or the general format of the homepage, you can always take a look at HTML syntax and its tags information in HTML Survival Kit or use an existing personal homepage template for experimenting and prototyping of your homepage.
Well, I'll give you a start. The simplestic HTML file can be as short as five lines of code. For example, following HTML code will display a webpage saying 'Hello World!' (of course, you need to type the code and save into a file with a '.html' extention first before loading it in your browser.
```
		<HTML>
		<BODY>
			Hello World!
		</BODY>
		</HTML>
	
```
Not bad, isn't it?
I admit that 'index.html' might not be the most 'personal' filename for your homepage. If you prefer to use different filename, i.e., such as 'my_homepage.html' or 'Your_login_ID.html' would be loaded instead of 'index.html', you can do that by creating a symbolic link for 'index.html'.
The word 'symbolic link' means that you're symbolically referring the 'original (=real thing)' by pointing to a 'link' or 'shadow'. In other word, it is an 'alias' or a 'shortcut' to the 'original.'
Confused? For example, let's say I have a file/directory called 'Florida_Orange_Juice'. Since I have to accee the file/directory frequently, at the same time I'm not certainly the fastest/most accurate/diligent typist in the world, I prefer to refer 'Florida_Orange_Juice' as 'oj'. To do that, I need to create a a symbolic link for 'Florida_Orange_Juice' using an alias of 'oj.' (yes, without renameing 'Florida_Orange_Juice' to 'oj') In this case, 'Florida_Orange_Juice' is the 'original' and 'oj' is the 'link' or 'shadow'. Even though this 'link' is not a real file, you can see the 'link' listed when you do directory listing using 'ls -al.'
The same principle is applicable to 'index.html.' Let's say you would like to set your homepage to more personal 'Your_login_ID.html' so that each time someone requests your personal homepage, the CEE web server will automatically load 'Your_login_ID.html' instead of loading 'index.html'. To create a symbolic link of 'index.html'(shadow) to 'Your_login_ID.html' (real thing), please do following in 'public_html' subdirectory;
sparky:/home/Your_login_ID] ln -s Your_login_ID.html index.html <Enter>
As you can see, the syntax of symbolic link command is
$ ln -s [real thing] [shadow] <Enter>
(where $ denotes system prompt, i.e., sparky:/home/Your_login_ID])
Keep in mind that to create a symbolic link, you must have an actual 'Your_login_ID.html' file physically exist in 'public_html' subdirectory first. From now on, you'll work/edit/save 'Your_login_ID.html' for creating your personal homepage.

Make your personal homepage accessible by the world

You're doing great so far! You have created 'public_html' subdirectory under your login root directory, then created your personal homepage using an ASCII text editor, and saved it as 'index.html' or 'Your_login_ID.html'. You may already create a symbolic link for 'index.html'.

Now, there is one last thing you have to do make it all work. That is change file permission of either 'index.html' or ''Your_login_ID.html' so that the CEE web server can access your personal homepage. To change file permission, please type following 'chmod' (change permission mode of a file/directory) in 'public_html' subdirectory;

sparky:/home/Your_login_ID/public_html] chmod -R 644 * <Enter>

By changing permission level to '644', you're granting

Read/Write privileges to yourself [=Owner]
Read privilege to group [=Group]
Read privilege to all [=Public]

Ah, you security & privacy-conscious users, if you have already changed permission level for your root login directory read/write/execute-able only by yourself (I don't blame you), your homepage in 'public_html' subdirectory won't be accessible by the world. (since you are blocking access to your 'public_html' directory from your root login directoy) I'd suggest that make your root directory readable by all (i.e., chmod 755), and make any other sensative files/information/directories read/write/execute-able only by yourself (i.e., chmod 700).

If you're curious and learn more about this 'chmod' command, click 'man chmod' for further detail. Of course, you can alway check web-version of man pages for other Unix commands.

Then what? How can I access my wonderful personal homepage?

If you followed instructions up to here, AND you have either 'index.html' or 'Your_login_ID.html' under 'public_html' subdirectory, you're all set to go!

To see how nice your home page would look, type following URI in your browser, (i.e., Netscape or IE5, etc.);

http://www.cee.odu.edu/~Your_login_ID/

(don't forget to put a trailing slash '/' at the end)

Congratulation! Above URI (Universal Resources Identifier) is your own personal homepage 'web address.' When someone asks you 'Do you by any chance have your own personal homepage, and if you do, how can I access it?', then proudly tell one, 'My URI is 'http://www.cee.odu.edu/~Your_login_ID/. You can access it anytime, anywhere in the world, as many times as you want.' with a big grin in your face.

Where's the beef?

If you made it up to this point, you may start wondering what kind of HTML resources, especially graphic resources, are available for 'visually enhancing' or 'jazzing up' your homepage.

FYI, there're a lot of graphic files archived in CEE web server for you, and you can certainly link them in your personal homepage. There're several categories of graphic files including small icons, large icons, background, texture, etc. You're welcomed to browse these graphic files, and use them if you like them (i.e., link) in your homepage. (There is no reason to start accumulating your own duplicates in your 'public_html' directory. Recycle them! The very concept of the HTML is putting various elements/resources together to form a page.)

You can browse various graphic resouces by clicking one of following categories shown below. Each catalog contains an instruction on how to use/link a specific graphic file in your homepage. (if you'd like add/share your 'cool' graphics to following CEE icon catalog, please let me know)

3-D	arrow	ball	big ball
button	caps	fauna	line
m_button	sign	sq_button	square
stuff	texture	tiny	m_cube
animation	coastal	Counter

Small Index Icons (24x24pixels)

Once you find a grpahic file(s) you'd like to use in your homepage, all you have to do is insert a HTML image tag in your webpage.
<IMG SRC="/Directory_Name/Graphic_Filename"></A>
For example, if you'd like to use 'email.gif' graphic file located in '/sign' directory, do
<IMG SRC="/sign/email.gif"></A>
Above HTML tag will display
If you'd like to use graphic files located in your 'public_html' directory, use following format.
<IMG SRC=/~Your_login_ID/Graphic_Filename></A>
Keep in mind that most of web browsers only can handle *.gif (CompuServe Graphics Interchange Format) or *.jpeg (Joint Photographic Experts Group) graphic file formats. Of course, growing number of browsers start supporting other graphic file formats such as AOL's *.ART, *.png (Portable Network Graphics), and *,bmp, still I'd say *.gif and/or *.jpeg file formats are he minimum common denominator that will work in any kind of browser you can imagine. If your original graphic file is either in tiff, pcx, targa, bmp, xpm, etc. format, you'd better convert it to gif or jpg format first before uploading to your 'public_html' directory.

That's it! If you're have specific questions on the CEE web server settings, please e-mail to me for answers. Good luck and bon voyage!