Resources
HOWTO Documents > Personal Web Pages
Overview
This document is intended for users in the CCIS community to describe how they can create their own personal world wide web pages.
We have our http server here at CCIS setup so that you can publish documents via the Web from your home directory. These pages will be served out to anyone on the Internet. It is likely that they will be found by web crawlers for search engines like Google, so be sure to only include information on these pages that you would like to be made public.
Steps: As simple as 1, 2, 3
| 1. | You need to create the directory "~/.www". You need to be sure that this directory has world read and search permissions, and that your home directory has least world search perms. (run: 'chmod 755 ~/.www' -- if you are uncertain). |
| 2. | Next you need to create a file in that directory called "index.html". This file should be a hypertext document written in the Hypertext Markup Language (HTML). This document will be the first page remote users would normally access to enter your personal web tree. |
| 3. | Poof: This document should now be available to you via the Web at the URL: http://www.ccs.neu.edu/home/login_name/index.html where login_name is, of course, replaced with your login name (also referred to as your unix account). |
| Please notice: These URLs do not contain the ".www" that is part of the real filename (such as "~/.www/index.html"). It is a common mistake to confuse the real location of these html documents and the virtual URL that is used to access them. The http server maps the 'top' of your tree into your "~/.www" directory of your home directory automatically, so you should never include the ".www" in your URLs. Primarily, this is intended a security measure -- only files you specifically place into your physical "~/.www"" are available via the web, not the entire contents of your home directory as "http:/home/login_name" might indicate. |
Now the Possibilities are Endless
If you've gotten this far, then now your creativity is almost boundless (quota and time allowing of course... :)
Now you can place any other html documents and certain other types of files, including fun things like images and sound files, into your ~/.www directory to make them available on the Web. One thing you should be aware of is how filenames are used to determine the file types. They are primarily recognized by the file suffixes.
Other files in your personal page can be referenced with URLs similar to the following:
http://www.ccs.neu.edu/home/login_name/someother.html
http://www.ccs.neu.edu/home/login_name/subdirectory/index.html
Uh, oh, now were getting tricky
To try and clarify some of the issues involved in serving documents to the Web through our server, perhaps an example would be useful. This example should help clear up some of the issues already discussed and introduce some new concepts as well:
<HTML><HEAD>
<TITLE>Welcome to Joe Random's Personal Web Page</TITLE>
</HEAD>
<BODY>
<H1>Welcome web walker...</H1>
This is Joe: <img align=top alt="Sorry you couldn't see me :)" src="MyPicture.gif">
<hr> What a funny looking picture of me ey?
<P>
<H2>Here's a little info about me</H2>
<ul>
<li><a href="General.html">General Information</a>
<li>What's my <a href="MyMajor.html">major?</a>
<li>Here's <a href="resume/index.html">my resume</a> </ul>
<hr>
<H2>Here are some of my favorite links:</H2>
<ul>
<li><a href="http://www.neu.edu/">Northeastern University</a>
<li><a href="http://www.ncsa.uiuc.edu/">NCSA</a>
<li><a href="http://www.w3.org/">W3</a>
</ul>
Thanks for checking out my personal Web Pages, come back again soon!<p> <hr> <address> jrandom@<a href="/">ccs.neu.edu</a>
</address>
</BODY>
</HTML>
Let's take a closer look at that
For the sake of this example, the login_name is 'jrandom'. Joe's web directory would look something like the following:
| ~/.www/index.html | |
| Contains the above document. | |
| ~/.www/MyPicture.gif | |
| This is a GIF format picture of the Joe. | |
| ~/.www/General.html | |
| Some general information about Joe. | |
| ~/.www/MyMajor.html | |
| Perhaps information about Joe's major. | |
| ~/.www/resume/index.html | |
| Joe wanted to put his resume online, since it contained a number of separate but related documents, he created a separate directory for them. As a general convention, Joe called the "first" file "index.html" -- this document would have links pointing to other documents that are part of his resume in the same directory. | |
| Other References | |
| The other links point to other servers, and thus are specified with Full URLs. | |
A note on the URLs presented in this example
The above document made extensive use of the concept of relative URLs.
Relative URLs are references that describe how to find another
document relative to the current document. This concept is
analogous to the concept of relative pathnames and full pathnames
in a UNIX environment. For example, when at a shell prompt in your
home directory, you could do either:
cd .www
or
cd /home/login_name/.www
Both of those would change your present working directory to your ".www" directory, however one is much shorter and easier.
A similar function is available in HTML documents. When a client is looking at the top to your web tree (The URL http://www.ccs.neu.edu/home/login_name/index.html), the client's present working directory (in shell terminology) is: "http://www.ccs.neu.edu/home/login_name", so, as in the above example, to retrieve the document 'http://www.ccs.neu.edu/home/login_name/General.html', all the client needs to know is the relative path from where he currently is -- just simply "General.html" as was shown in the example.
Another method in which URLs can be relative is to a particular
server. In this case, the initial slash is included in the URL, but
the server name is not. For example, in the personal web page example
above, the partial URL at the bottom is simply a '/'. Since the
client is already at our Web Server, referring them to '/' will cause
them to return to the Top of our Web Server. As another example, to
refer to friend's web page from your own, you could include an
anchor like:
<a href="/home/my_friend/index.html">My friend's Personal
Page</a>
where my_friend is your friend's login name.
Another benefit of using relative URLs is that they allow for flexibility when it becomes necessary to rename or reorganize things. For example, if a 'tree' of a 1000 documents needed to be moved, and they all reference each other with full URLs a couple hundred times, it would be necessary to edit a couple hundred anchors.
However, with the wise use of relative URLs a lot of this effort can be saved. In our example, say the original URL was: http://www.ccs.neu.edu/Hundreds_of_Documents/index.html, and we decided we needed to rename "Hundreds_of_Documents" to "docs" because it was too long and too many people misspelled it. Well, if all of the documents in the "Hundreds_of_Documents" used relative URLs, the change of the directory name would not affect the anchors internal to those documents, because they would reference each other 'relative' to where they are first located.
A word of caution, however, is in order. One gripe many people have
with relative URLs often is just a simple '/'. Yes, a forward-slash.
This slash is so important that if you have an extra one, or are
missing one, then relative URLs can be broken. For example, say in
our personal web page example from above. If a client was to request
the document:
http://www.ccs.neu.edu/home/login_name/index.html/
(note the trailing '/') That client would think the 'present working
directory' would be '/home/login_name/index.html' -- when in fact,
index.html is a File, not a Directory. But the client has no way of
knowing that, everything up to the last '/' in the URL is considered
the 'present working directory'. So be careful with those slashes.
As somewhat of a a side note, 'index.html' is often not required as
part of a URL. Our server, and many others are trained to look for a
number of 'index' files, 'index.html' being one of the most common.
However, the trailing slash again becomes an annoyance. In this case,
since the URL without 'index.html' is referring to a Directory, and
not a File, the trailing slash NEEDS to be included, otherwise the
client will not know the correct 'present working directory'. One
feature of a server is that it has the ability to redirect
the client the correct URL containing the trailing-slash, thus
correcting the clients' mistake and curing one of the problems with
relative URLs. However,
since I notice how often this is a problem, I tend to always include
the 'index.html' on the end now, at least as anchors in html
documents. The presence of the 'index.html' perhaps makes it more
apparent that I am referring to a file. (
http://www.ccs.neu.edu/home/login_name/
vs.
http://www.ccs.neu.edu/home/login_name/index.html
is an example of this some users have experienced.)
As a final lesson that can be learned from the presented example; the use of Full URLs. When we are referencing a document with a full URL, we used Fully Qualified Domain Names (FQDNs). (Hostnames have no relative quality as pathnames do.) Although the URL http://www/ may work while you are sitting on a machine inside the domain ccs.neu.edu (and be nice and short), it would not have the expected results if the President was to select it. The President, of course, is located in the domain whitehouse.gov, instead of getting www.ccs.neu.edu, he would probably get www.whitehouse.gov. So be sure you use the fully qualified names to reference a different host, we don't want the President to be upset at broken links on our site.