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' -->
CONTENT
<!--#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, lay them out as follows (.title and .order are further discussed in "Menu Items in the Navigation Bar")
|-- dir1
|-- dir2
|-- index.html
|-- img
|-- .order
|-- .title
|-- a
| |-- index.html
| |-- .title
|-- b
| |-- index.html
| |-- .title
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 all the index.html files the code
<!--#include virtual='/cgi-bin/get_dir_heading?uri=/dir1/dir2/' -->
to produce the link header
To insert an image, use
<img src='/dir1/dir2/img/image.jpeg'/>
To insert a gallery of images, create a folder /www/math/dir1/dir2/img and upload the images there, and insert the code
<!--#include virtual='/cgi-bin/get_image_gallery?dir=/dir1/dir2/img&width=10' -->here width=10 indicates that the images are resized so their width is 10% of the page width. Images are sorted by various methods, click on
Toolbox > Include Functions for more info.
This code may be used in news and event items as well.
To insert a slideshow of images, create a folder /www/math/dir1/dir2/img and upload the images there, and insert the code
<!--#include virtual='/cgi-bin/get_image_slideshow?dir=/dir1/dir2/img&height=300' -->here height=300 indicates that the images are resized so their height is 300px. Images are sorted by their aspect ratio (=width/height). This code may be used in news and event items as well.
See "Include Functions" for more information.
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.