How to Write a Simple Web Page

Some Simple Code

First off, don't be intimated by HTML. It's really simple, and within two hours anyone can create a simple web page. And it's really easy to learn stuff from other web pages. You can always look at, or even download, someone else's code and experiment with it to see what the code will do.

You can create a web page using any text editor. If you use a text editor on your desktop computer, be sure to save it as a text-only document, before sending it to the server. Or, if you wish to write your homepage on-line, on the MTSU UNIX server, you can use the Pico editor. Once the document is on the server, it is standard practice to end the document with ".html". So, for example, the name of this document is "HTML.html". If your homepage were entitled "homepage", it would have the ".html" extension, and would be: "homepage.html". It is also necessary for the ".html" document to be saved in a special directory called "public_html". On a UNIX server, like the one at MTSU, to create such a directory, type "cd", which will ensure you are in your root directory. Then type "mkdir public_html". You will now need to make this directory accessible to visitors. To do this, again while still in your root directory, type "chmod 755 public_html". The "chmod 755" command sets the permission for anyone to read your web document. It is also necessary, once you have created a webpage, to change the permissions on that document and on any image or document to which it refers. If you simply want to change the permissions on every document in your public_html directory, then once you're in the public_html directory, you can just type "chmod 755 *" where the "*" is a wild card indicating that you want to change the permission on every document in that directory. If you wish only to change the permission on specific documents, you can just type "chmod 755" followed by the name of the document for which you want to change the permission. To change to the new public_html directory, type "cd public_html". You are now in your public_html directory, i.e. the directory in which you will want to place your homepage. All of the commands in HTML (HyperText Markup Language) begin and end with the < > marks.

For example, each html document should begin with the command:

<html>

and end with the command </html>

Most, though not all, html commands will end with </>

Here is a list of fairly simple commands, and a brief description of what they do:

<p> inserts a paragraph break (and requires no closing)

<head> begins each document, for example the beginning of this document looks like this:

<html>

<head>

<title>Simple HTML</title>

</head>

So you would place the title, which appears at the top of the document window, wedged between the "head" and "title" commands.

Once you've created the title, head, etc. you can place the command that indicates to the web browser (which is any program that allows you to access a web document) the body of the text. The command for this is:

<body>

At the end of the body of the text you must close off this command with:

</body>

Other useful commands include the font size. (i.e. the size of the text) and centering. To specify the size of text, you must enter

<font size=4>

where the "4" indicates the size of the text. You can experiment with different numbers to get the effect you want. You can also use header commands. The header command allows for a number of different sized headers. For example,

<h1>

indicates a header 1, where the number "1" indicates the first header. You can substitute numbers up to 8 (if I remember correctly). At any rate, you can experiment with different numbers and note their effect.

Now both the font size command and the header commands must be closed. That is, after the text that you want in that specific size is done, you must close off the commands. The closing command for the font size is:

</font>

while for the header command it is:

</h1>

making sure that you've included the same number in the closing as in the opening command.

The center command is:

<center>

and must be closed off, after the text to be centered. The command is:

</center>

Links

To add a link to another site there is another html command. Links to other web pages always look like:

<a href="frank.mtsu.edu/~jpurcell/diner4.html">The Eclectic Diner</a>

The information following the "a href=" is the URL (uniform resource locator) or the address of the web site. The address will hence be specific to that site. In the above example, we have the address or URL for my homepage. After the address is given, you will need to write in the name of the document for which you've given the URL. In the above example it is "The Eclectic Diner". The address must be ended with ">" and the name of the document must be closed with:

</a>

Note that, in citing the address, you never indicate the public_html directory. The Web browser automatically knows to look in that directory.

If you wish to add images (or pictures), the simplest way to do this is with the image command:

<img src="http://frank.mtsu.edu/~jpurcell/Images/brtaichi.gif">

This command adds an image called "brtaichi.gif" to the web document. In this case, the image cited is the little tai chi character that ends all of my web pages.

If you wish to enable people to send you e-mail from your homepage, you can include the "mailto" command. Here is an example (which you'll find at the bottom of this page):

<a href="mailto:jpurcell@frank.mtsu.edu">jpurcell@frank.mtsu.edu </a>

Where you see "jpurcell@frank.mtsu.edu" in both places, you will need to substitute your own e-mail address. At MTSU, the address will be your login name followed by "@frank.mtsu.edu".

Finally, the last two items of the html document will be:

</body>

and

</html>

For more HTML information, and software for both PC's and Mac's, see My HoTMeaLs Page

Return to the Course Syllabus

Good Luck

For questions, e-mail me at jpurcell@frank.mtsu.edu