Wiki Requirements/Using HTML, CSS, and Javascript
1. HTML versus MediaWiki markup
All the iGEM web sites are built on top of MediaWiki, which allows groups of people to create and edit pages easily.
MediaWiki has its own markup for formatting pages, creating links, etc. However, using HTML allows more creativity and flexibility. iGEM's websites allow any HTML tags. Simply enclose your HTML inside <html> tags within the page text.
You can mix wiki markup and HTML on the same page. Just make sure all the HTML is inside <html> tags, and all the wiki markup is outside <html> tags.
Example:
== A page including both wiki markup and HTML == This page uses ''wiki markup'' for part of the text, and ''HTML'' for another part. <html> <p>Here is an HTML paragraph with <i>italic text</i> in it.</p> </html> And there's more '''wiki markup''' at the bottom of the page!
Note: Using HTML in MediaWiki pages will cause the final page (as fully rendered by MediaWiki) to be noncompliant with strict HTML formatting specifications. This is basically inevitable, and is an acceptable trade-off for the added flexibility in wiki design that you get by using HTML. Most modern web browsers will interpret pages in "quirks" mode, which tries to "do the right thing" with HTML that is not strictly compliant.
2. How to use <link> and <script> tags to include CSS and Javascript
To use this method, create a page whose name starts with "Template:YourTeamName" and enter your CSS or Javascript code without any surrounding <html> tags:
div.classname {
border: 1px solid green;
}
#id {
color: red;
}
2015.igem.org/Template:YourTeamName/Javascript
function f(x) {
alert(x);
}
Then, include these pages using <link> tags for CSS, and <script> tags for Javascript:
<html> <link rel="stylesheet" type="text/css"
href="https://2015.igem.org/Template:YourTeamName/CSS?action=raw&ctype=text/css" /> <h2>Our Project</h2> <p>Here is the beginning of the page about our project.</p> <p>Here is the end of the page about our project.</p> <script type="text/javascript" src="https://2015.igem.org/Template:YourTeamName/Javascript?
action=raw&ctype=text/javascript"></script> </html>
Strictly speaking, this is an incorrect use of the <link> tag. But as stated previously, using HTML on MediaWiki will already result in not-quite-compliant pages that still render correctly in most browsers. It is not really worthwhile to worry about this.
Using jQuery
jQuery 1.11.1 is already installed across all iGEM webpages. It adds many useful abilities to JavaScript. You do not need to include any extra source to use jQuery.
Using MathJax
MathJax is a JavaScript library for displaying mathematical equations. A copy of MathJax 2.5 is installed on 2015.igem.org. To use it, add the following line to your HTML:
<script src="https://2015.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
For more information, visit the MathJax documentation.
3. How to make "inline" CSS and Javascript
You can include CSS or Javascript within <style> or <script> tags in your HTML. It is customary to put CSS styling at the beginning of your page (before the main content), and Javascript code at the beginning or the end.
Example:
<html>
<style type="text/css">
h2 {
color: red;
}
/* ... more CSS here ... */
</style>
<script type="text/javascript">
var foo = 3;
// ... more Javascript here ...
</script>
<!-- Main content of the page starts here -->
<h2>This text will be red</h2>
<p>This text will be the normal text color</p>
<!-- Main content of the page ends here -->
<script type="text/javascript">
var a = 1;
var b = "apple";
/// ... more Javascript here ...
</script>
NOTE: If you use inline Javascript, you cannot use the && operator. When the page is rendered, any & will be encoded to &. For short scripts, you can get around this problem by using nested if statements instead of &&. However, you should use <script> tags to include any substantial scripts.
4. How to use templates include CSS and Javascript
If you want to use the same styles or scripts on several different pages, it is useful to write them in one place and then "include" them on your individual pages. One way you can do this is to use MediaWiki's Template function.
Create a page whose name starts with "Template:YourTeamName". Inside <html> tags, put the material you want to include:
<html>
<style type="text/css">
h2 {
color: red;
}
</style>
</html>
Then, use MediaWiki's syntax to include the template on another page, outside the <html> tags:
{{YourTeamName/CSS}}
<html>
<h2>Our Project</h2>
<p>Here is the beginning of the page about our project.</p>
</html>
{{YourTeamName/A_template_that_goes_in_the_middle_of_the_page}}
<html>
<p>Here is the end of the page about our project.</p>
</html>
{{YourTeamName/Javascript}}
You can include any HTML content this way, not just CSS and Javascript. This is useful for creating things like a common header, menu bar, and footer for the pages on your wiki.
If you edit a page, there will be a list of which templates are used on that page, below the Save/Preview buttons.
You can also see which pages use your template. Go to the template, and then look in the top menu for "Wiki Tools" → "What Links Here". This is useful if you want to change or delete a template -- you can check if any important pages are using it.
NOTE: If you make a template containing Javascript, you cannot use the && operator. When the page is included via the {{ ... }} syntax, any & will be encoded to &. For short scripts, you can get around this problem by using nested if statements instead of &&. However, you should use <script> tags to include any substantial scripts.
5. Why are we required to host all content on *.igem.org?
Because content tends to disappear if it is hosted elsewhere
It seems very easy to create a stylesheet or host an image on your personal server or your university server, and then link to it from your wiki. That link will work for a while. But two years later, the link is likely to be broken. This is what happens to externally hosted content after time has passed.
If some future iGEM team wants to learn about your project and use the wonderful parts you created, they will want to read your wiki. And if your wiki is full of broken links, missing images, and broken styling, they will have a lot of difficulty understanding what your project was about!
Because it would allow you to change content after the wiki freeze
The vast majority of teams have honest intentions when they use externally hosted content, and they do not change anything after the wiki freeze. But you could edit your externally hosted content after the wiki freeze. The iGEM wikis have an editing history for each page, but external links have no history. Someone could easily think you did edit after the wiki freeze.
Editing content after the wiki freeze is considered a form of cheating, and cases would be handled by the Responsible Conduct Committee.