Creating Your Own Web Page

This page describes how to create a web page located at the URL /dir1/dir2/index.html. If you are working under your personal folder, remember the folder public_html/dir1/dir2/ translates to the URL /~username/dir1/dir2/.

For any web site, the back-end files are composed of a combination of HTML, Javascript, and CSS. This web site hides the Javascript and CSS, so all you need to consider is the HTML code. Moreover, this web site's files each consist of three parts, the header, the CONTENT, and the footer. To make your own web page, you insert only the CONTENT. The details of the header and the footer are hidden, and are accounted for by entering single lines at the beginning and end of your HTML file.

Thus your HTML file will look like

<!--#include virtual='/cgi-bin/get_header' -->


<!--#include virtual='/cgi-bin/get_footer' -->

where CONTENT is HTML content. For example if you enter these three lines into a file and call the file sample.html, then the corresponding web page will look like this.

If you have several inter-related web pages in addition to /dir1/dir2/index.html, place them in separate folders such as /dir1/dir2/a/index.html, /dir1/dir2/b/index.html, etc and create title files a/.title containing the folder title eg "Page A", b/.title containing "Page B", etc. then insert in the files /dir1/dir2/index.html, /dir1/dir2/a/index.html, /dir1/dir2/b/index.html the code

<!--#include virtual='/cgi-bin/get_dir_heading?uri=/dir1/dir2/' -->

to produce the link header

Home | Page A | Page B

The order of entries is determined by listing the folders a, b, etc in the file /dir1/dir2/.order, click here for more info. If you want to display a link header for another directory, rather than /dir1/dir2/, use get_dir_heading?uri=/otherdir/. If you prefer not to have the link Home tacked on, use get_dir_heading?uri=/otherdir/&headless=1.

You may insert arbitrary \(\LaTeX\) in the CONTENT (see the link under Toolbox). Do not insert CSS in the CONTENT, use the minimal HTML tags in their stripped-down versions:

headings: <h1>...</h1>, <h2>...</h2>, ...
paragraph: <p>...</p>
strong,em: <strong>...</strong>, <em>...</em>
ordered list: <ol> <li>...</li> <li>...</li> <li>...</li> </ol>
unordered list: <ul> <li>...</li> <li>...</li> <li>...</li> </ul>
table: <table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> ... </table>
anchor: <a href='...'> ...  </a>
center: <center> ... </center>

Avoid using <br>, using this tag breaks the context-independent nature of HTML, i.e. a line will be broken whatever the window dimensions, leading to badly-formed pages. Also do not use the tags <html>, <title>, <body>, <div> as they are already in the included header. See Wikipedia for more information on HTML tags.