The Computer Society allows its members to keep their own sets of personal web pages, which can be accessed from anywhere on the Internet. Setting up your web pages is quite straightforward - this guide will show you how to do it.
Setting up a directory
Your web pages should be stored in a directory called public_html, within your home directory. To create this directory, SSH to silver, then type the following command from the command-line prompt:
mkdir ~/public_html
The ~ (or "tilde") character is usually obtained by pressing SHIFT and the key to the left of the enter key on the third row of the keyboard. On a Mac keyboard, you will find this key immediately to the left of Z.
The above command will make the directory called public_html, the ~/ denoting that it is within your home directory. To change to this directory, type:
cd ~/public_html
or just cd public_html if you are in your home directory already.
Creating a file
Web pages are written in HTML format - HTML stands for HyperText Markup Language. To enable the computer to distinguish them from other files, each HTML filename must end with the characters .html (note the full stop).It's wise to call your main page index.html. This is because unless a web browser is told which page within your directory to look at, it usually shows your index.html page. Also, you must have an index.html page for your website to be listed on your Member page.
You should create your file in a text editor. Many different editors are available on our system, the most popular ones, in increasing order of friendliness, being vi, joe and nano. Nano is probably the best editor for beginners to use, as all the commands are listed at the bottom of the screen at all times.
To edit a file called index.html in Nano, just type
nano index.html
The convention ^C at the bottom of the screen in Pico indicates that you should hold the Control (Ctrl) key down and press the character noted. For example, Control-X will exit Pico, and Control-O (the letter 'oh') will save your current file (Nano calls this 'WriteOut').
Writing your web page
A HTML document is a text file, with special formatting, links and the like marked by tags. The vast majority of tags come in pairs. The initial tag, <tag> turns on an effect, the final tag, </tag> turns it off. With the exception of the "DOCTYPE", tags should be written in lower case.
With that in mind, let's look at a simple example of HTML. You can view this page (press Back on your browser to return here when you're done).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Homepage</title>
</head>
<body>
<h1>Hello, this is my page</h1>
<p>I'm a student at <strong>Swansea University.</strong></p>
<p>I'm also a member of <a href="http://www.sucs.swan.ac.uk/">SUCS</a></p>
</body>
</html>
The tag that starts <!DOCTYPE tells the web browser which of the HTML standards to follow. In this case, we are using HTML 4.01. The tag <html> then starts the HTML document. All HTML files are divided into two sections - a head and a body.
The head of the file always starts with the tag <head>, and finishes with the tag </head>. The head can contain general information about the file: its author, subject matter, copyright status and so on. In this case, all we've put in the head is the title of the page (between the beginning and closing tags <title> and </title>). The title of the page will normally be displayed at the top of the browser window, next to the browser name.
The body of the file now follows. The first line of the body shows an example of a heading. Heading size 1, denoted by the tags <h1>...</h1> is the largest size of heading available in the browser. Text marked with <h1> will normally be written in bold type, significantly larger than normal text.
A normal line of text then follows, starting with a <p> tag, indicating that this is a paragraph. If you've viewed the example file, you'll have noticed that the text "Swansea University" appears in bold. This is accomplished by the tags <strong>...</strong> at the beginning and end of the phrase. Other text effects are also available - we'll return to these.
This line of text finishes with the tag </p>, indicating that the paragraph has finished. The browser prints a blank line between this and the next line of text. Note that the web browser will not move on to the next line of text unless it finds a specific tag telling it to do so - it ignores the position of new lines in your HTML file.
The next line shows the main feature of HTML: the ability to create links between one document and another. The code for this is
<a href="location of other page">...</a>
The location of the page to be linked is given in the quotes following href=. This should normally be of the format http://... that Firefox and other browsers show just below the menu bar. However, if you're linking a page on the same directory, you can just give the filename within the quotes (or a path to a subdirectory if the file is within the subdirectory).
Locating your files and letting others see them
Before anyone can read your page using a browser (this includes you too, generally) you must make sure that everybody is given permission to read the files in your public_html directory. To do this, type the following four commands from the command line, pressing Enter after each:
cd
chmod a+x .
cd public_html
chmod -R a+rx .
(For the curious, these commands change to your home directory, give all users execute permission on your home directory, change to your public_html directory, and recursively give all users read and execute permission on all files and subdirectories within this directory).
Your web address will be of the form:
http://sucs.org/~username/
where username should be replaced by the username you chose for your SUCS account. This assumes that you have a file called index.html in your public_html directory: if not, you'll have to add the filename of your index page to the end of the location above.
So if your username is spod, and you wish to access the file called bobbins.html in your public_html directory, you would use:
http://sucs.org/~spod/bobbins.html
Summary
Having followed this guide, you should now have a folder called public_html in your SUCS account home directory, in which you have created a text file called index.html containing a valid HTML document. They should have been given the correct permissions so that when visiting http://sucs.org/~username/ you are able to see the web page you created.
If it hasn't worked, don't worry - help is at hand! Log on to Milliways and ask for help. There's nearly always someone there ready to offer assistance. Alternatively, post a message on the Forum.
Credits
Current version by Dez, based on the guide written by Rhys which was inspired by a guide to HTML on the Merton College, Oxford website, written by Robin Stevens.