Unix Notes: Building a Web Page




Step 0: Some Preliminaries You Need to Understand 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 or index.html or index.php in a special directory called public_html; this is the "index 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 the index file and many of its sibling files. If you edit a file with an .html or .php 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 style = "background-color:green;">; this makes the background color of the body of your page green. The body tag has the attribute style, 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" alt = "describe 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.

<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>
My first Page
</title>
</head>
<body>
Hello
</body>
</html>

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

http:cs.ncssm.edu/~yourLogInName

Step 4: Learn More Refer to Chapter 2 of the Python book to learn how to use HTML5 to structure pages and CSS to style them. Here is a useful resource for getting started with HTML5. W3Schools.