How to set up your own website

Creating The Website

To create your website, we recommend the online website builders weebly.com or froont.com. These are point-and-click website builders that require no HTML/CSS/JavaScript knowledge. Moreover these same sites may be used to update your website. If you do use weebly.com, follow these instructions and contact cst.it@temple.edu to set up a temple name for your website such as XXXlab.cst.temple.edu.

HTML/CSS/JavaScript are the standards that drive websites. Websites created with weebly.com or froont.com are 100% standards-compliant. As background, to get a feel for how things work, it's best to look at CSS Zen Garden and to read about responsive web design. We recommend against PHP (and systems based on PHP), due to structural and security flaws.

Setting Up The Website

Hand-Coding The Website

If you prefer to code your website by hand, the instructions below will get you started. One consequence of these instructions is the ease of setting up web pages with a layout identical to that of your department, using the index_header.html file. A template for the file index.html is


<!--#include virtual='/includes/html/index_header.html' -->

<h1>Enter content here.</h1>
<h2>Enter content here.</h2>
<p>
Enter content here.
<p>
<ul>
<li> Enter content here. </li>
<li> Enter content here. </li>
</ul>

<!--#include virtual='/includes/html/index_footer.html' -->
and should be made executable ("chmod +x index.html").

As far as HTML coding is concerned, please do not insert your own styles/sizes/etc, the department header determines this. There are several advantages in using the department header, for example mathjax is included so Latex code can be inserted directly. Use the minimal HTML tags in their stripped-down versions:

headings: <h1>...</h1>, <h2>...</h2>, ...
paragraph: <p>...</p>
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>
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.