Dr. Morrison's UNIX Survival Guide: Building a Simple Web Page

Step 0: Some Preliminaries How do web pages work?

Two machines are involved: the client (you) the server (other machine that holds the web page you are browsing). Almost all websites have a file called index.html in a special directory called public_html; this is the "master file" for the site's home directory. You will see how to set up this directory in Step 1.

Web pages are driven by the Hypertext Markup Language, HTML; HTML code forms the contents of index.html and many of its sibling files. Files bearing the .html extension contain .html code. If you edit a file with an html extension, vi will color that file in a helpful manner that makes it easier to avoid errors.

Another example of a markup language is the TeX typesetting system. It displays mathematics, and typesets beautiful documents. You can learn about it by searching the web.

HTML is driven by tags. Tags are objects that live inside these <....> . Tags have attributes that control the properties of objects formatted by them. The general form of a tag is < tagname attribute1 = "blah" attribute2= "ugh"...>stuff</tag>

Opening tags have a string in them, e.g., <title> All atributes are placed in open tags.

Closing tags have a slash before the string </title>. Closing tags never have attributes in them.

An example of this is <body bgcolor = "green">; this makes the background color of the body of your html document green. The body tag has the attribute bgcolor, which is set to green. Colors can be specified by a hex-code or by a name.

Still other tags are self-closing; the tag <img src = "somepic.jpg" /> displays an image to the screen and <hr /> draws a horizontal rule across the page. All self-closing tags have a space, then a slash before the closing >

To do HTML properly, every open tag needs to be matched with a closing tag of the same type. The exception to this is, of course any self-closing tag. You should close tags in the reverse order that they were opened. Tags should consist solely of lower-case letters or numbers. Following these simple rules will make your page load faster and work better.

Here we will tell you all you need to get onto the web with the aid of Neverland.

Step 1: Set up your directory structure.

Step 2: Create the file index.html Here is what goes in the file.

<html>
<head>
<title>
My first Page
</title>
</head>
<body>
Hello
</body>
</html>

Step 3: See your page To to this open your browser and enter

http:neverland.ncssm.edu/~yourLogInName

Step 4: Learn More Click here to learn more about building a web page and to learn about other HTML tags. This page will refer you to more resources on he web. We would strongly encourage you to learn about and use style sheets (CSS) and to make your pages XHTML compliant. You can learn about these things at W3Schools.

Back to the index page