Difference between revisions of "Wiki Requirements/Using HTML, CSS, and Javascript"

Revision as of 14:41, 16 March 2015

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!

How to make "inline" CSS and Javascript

How to use templates include CSS and Javascript

How to use <link> and <script> tags to include CSS and Javascript

To use this method, create a page in your team's namespace and enter your CSS or Javascript code without any surrounding HTML tags:

2015.igem.org/Team:YourTeamName/Template:CSS/NameOfTemplate

div.classname
{
border: 1px solid green;
}

Why are we required to host all content on *.igem.org?

1. 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!

2. Because someone might think you cheated 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, and it doesn't have MediaWiki's editing history, so 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.

@@ Line 18: / Line 18: @@
 <h2>HTML versus MediaWiki markup</h2>
+<p>All the iGEM web sites are built on top of <a href="http://www.mediawiki.org/wiki/MediaWiki">MediaWiki</a>, which allows groups of people to create and edit pages easily.</p>
+<p><a href="http://www.mediawiki.org/wiki/Help:Formatting">MediaWiki has its own markup</a> 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 <code>&lt;html&gt;</code> tags within the page text.</p>
+<p>You can mix wiki markup and HTML on the same page. Just make sure all the HTML is <b>inside</b> <code>&lt;html&gt;</code> tags, and all the wiki markup is <b>outside</b> <code>&lt;html&gt;</code> tags.</p>
+<p>Example:</p>
+<pre>
+== A page including both wiki markup and HTML ==
+This page uses ''wiki markup'' for part of the text, and ''HTML'' for another part.
+&lt;html&gt;
+&lt;p&gt;Here is an HTML paragraph with &lt;i&gt;italic text&lt;/i&gt; in it.&lt;/p&gt;
+&lt;/html&gt;
+And there's more '''wiki markup''' at the bottom of the page!
+</pre>
 <h2>How to make "inline" CSS and Javascript</h2>