Difference between revisions of "Resources/Using HTML CSS and Javascript"

 
(14 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
<div class="column full_size">
 
<div class="column full_size">
 
<h1>Using HTML, CSS, and Javascript on Your Team Wiki</h1>
 
<h1>Using HTML, CSS, and Javascript on Your Team Wiki</h1>
−
<p>All the iGEM web sites are built on top of MediaWiki, which allows groups of people to create and edit pages easily. In this page you will find the <a href="#HTML_versus_MediaWiki">differences between HTML and MediaWiki markup</a>, </p>
+
<p><span class="on_page"></span> <b>On this page</b> you will find: <a href="#HTML_versus_MediaWiki">HTML versus MediaWiki markup</a>, <a href="#templates_CSS_JS"> how to use CSS and Javascript in templates</a>, <a href="#link_and_script"> how to use link and script tags to load CSS and Javascript</a>, <a href="#inline_CSS_and_JS"> how to use inline CSS and Javascript </a>. </p>
 +
 
 +
<p>All the iGEM web sites are built on top of MediaWiki, which allows groups of people to create and edit pages easily. <br>
 +
 
 
</div>
 
</div>
  
Line 10: Line 13:
 
<!-------------------------------------------------------------------------------------------------------------------->
 
<!-------------------------------------------------------------------------------------------------------------------->
 
<div class="clear extra_space" id="HTML_versus_MediaWiki"></div>
 
<div class="clear extra_space" id="HTML_versus_MediaWiki"></div>
 +
<div class="line_divider"></div>
 +
<div class="clear extra_space"></div>
 
 
 
<div class="column half_size">
 
<div class="column half_size">
Line 23: Line 28:
  
 
<div class="column half_size">
 
<div class="column half_size">
−
<p>Example:</p>
+
<h4>Example:</h4>
−
<pre>
+
<p>This example uses makes text bold and italic, first using html and then wiki markup.</p>
−
== A page including both wiki markup and HTML ==
+
<div class="highlight gray">
 +
<p>
 +
&#60;html><br>
 +
&#60;p> &#60;b> &#60;i> Example text &#60;/i> &#60;/b> &#60;/p> <br>
 +
&#60;/html><br><br>
  
−
This page uses ''wiki markup'' for part of the text, and ''HTML'' for another part.
+
''''' Example text '''''
−
 
+
</p>
−
&lt;html&gt;
+
</div>
−
&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>
+
 
</div>
 
</div>
  
Line 50: Line 53:
 
  </div>
 
  </div>
 
</div>
 
</div>
 +
 +
 
<!-------------------------------------------------------------------------------------------------------------------->
 
<!-------------------------------------------------------------------------------------------------------------------->
 +
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="line_divider"></div>
 
<div class="line_divider"></div>
−
<div class="clear extra_space"></div>
+
<div class="clear extra_space" id="templates_CSS_JS"></div>
−
+
−
+
−
+
−
<div class="clear" id="link-and-script"></div>
+
  
 
<div class="column full_size">
 
<div class="column full_size">
−
<h2>How to use &lt;link&gt; and &lt;script&gt; tags to include CSS and Javascript</h2>
+
<h3>How to use templates including CSS and Javascript</h3>
−
<p>To use this method, create a page whose name starts with "Template:YourTeamName" and enter your CSS or Javascript code <b>without any surrounding <code>&lt;html&gt;</code> tags:</b></p>
+
<p>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.</p>
−
</div>
+
  
−
<div class="clear"></div>
+
<p>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.</p>
  
−
<div class="column half_size">
+
<p>If you edit a page, there will be a list of <b>which templates are used on that page</b>, below the Save/Preview buttons. You can also <b>see which pages use your template</b>. Go to the template, and then look in the top menu for "Wiki Tools" &rarr; "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.</p>
  
−
<b>2019.igem.org/Template:YourTeamName/CSS</b>
+
<p>First, create a page whose name starts with "Template:TeamName". Inside <code>&lt;html&gt;</code> tags, put the material you want to include. Here are two examples:</p>
−
<pre>
+
−
div.classname {
+
</div>
−
border: 1px solid green;
+
−
}
+
  
−
#id {
+
<div class="clear"></div>
−
color: red;
+
−
}</pre>
+
<div class="column half_size">
 +
<h4>2019.igem.org/Template:TeamName/CSS</h4>
 +
 +
<div class="highlight gray">
 +
<p>&#60;style><br>
 +
/*Make text red and bold*/ <br>
 +
.red_text { <br>
 +
color: #f42434; <br>
 +
font-weight:bold; <br>
 +
}<br>
 +
&#60;/style>
 +
</p>
 +
</div>
 +
</div>
 +
 +
<div class="column half_size">
 +
<h4>2019.igem.org/Template:TeamName/JS</h4>
 +
 +
<div class="highlight gray">
 +
<p> &#60;script><br>
 +
$(document).ready(function() { <br><br>
 +
$("#alert").addClass("red_text"); <br><br>
 +
});<br>
 +
&#60;/script>
 +
</p>
 +
</div>
 +
 +
</div>
 +
 +
<div class="column full_size">
 +
<p>Then, use MediaWiki's syntax to <b>include</b> the template on another page, outside the <code>&lt;html&gt;</code> tags:</p>
  
−
</div>
 
  
−
<div class="column half_size">
 
−
<b>2019.igem.org/Template:YourTeamName/Javascript</b>
 
−
<pre>
 
−
function f(x) {
 
−
alert(x);
 
−
}</pre>
 
  
−
</div>
+
<h4>2019.igem.org/Team:TeamName/Project</h4>
 +
 +
<div class="highlight gray">
 +
<p>{{TeamName/CSS}} <br>
 +
&#60;html&gt;<br>
 +
&#60;h2> Our Project &#60;/h2&gt;<br>
 +
&#60;p> Beginning of the page about our project.&#60;/p&gt;<br>
  
−
<div class="clear"></div>
+
&#60;/html&gt;<br>
 +
{{TeamName/JS}}
 +
</p>
  
−
<div class="column full_size">
+
</div>
  
−
<p>Then, include these pages using <code>&lt;link&gt;</code> tags for CSS, and <code>&lt;script&gt;</code> tags for Javascript:</p>
+
 +
<div class="clear extra_space"></div>
  
−
<b>2019.igem.org/Team:YourTeamName/Project</b>
+
  <div class="highlight gray post_item">
−
<pre>
+
    <div class="details">
−
&lt;html&gt;
+
        <span class="icon note"></span>
−
&lt;link rel="stylesheet" type="text/css" <br>href="https://2019.igem.org/wiki/index.php?title=<b>Your page</b>&action=raw&ctype=text/css" /&gt;
+
        <div class="title"> Note </div>
 +
</div>
 +
     
 +
<p>If you make a template containing Javascript, <b>you cannot use the &amp;&amp; operator</b>. When the page is included via the {{ ... }} syntax, any &amp; will be encoded to &amp;amp;. For short scripts, you can get around this problem by using nested <code>if</code> statements instead of &amp;&amp;. However, you should <a href="#link_and_script">use &lt;script&gt; tags to include any substantial scripts</a>.</p>
  
−
&lt;h2&gt;Our Project&lt;/h2&gt;
+
</div>
−
&lt;p&gt;Here is the beginning of the page about our project.&lt;/p&gt;
+
</div>
 +
 +
<!-------------------------------------------------------------------------------------------------------------------->
 +
<div class="clear extra_space"></div>
 +
<div class="line_divider"></div>
 +
<div class="clear extra_space" id="link_and_script"></div>
 +
 +
 +
<div class="column full_size">
 +
<h3> Using &#60;link> and &#60;script> tags to include CSS and Javascript</h3>
 +
 +
<p>To use this method, first, create a page in your team name space. In this example we will use: "Template:TeamName/CSS" for style and "Template:TeamName/JS" for code. Below are examples of css styling and javascript code.</p>
 +
</div>
 +
 +
<div class="column half_size">
 +
<h4>2019.igem.org/Template:TeamName/CSS</h4>
 +
 +
<div class="highlight gray">
 +
<p>/*Make text red and bold*/ <br>
 +
.red_text { <br>
 +
color: #f42434; <br>
 +
font-weight:bold; <br>
 +
}
 +
</p>
 +
</div>
 +
</div>
 +
 +
<div class="column half_size">
 +
<h4>2019.igem.org/Template:TeamName/JS</h4>
 +
 +
<div class="highlight gray">
 +
<p> $(document).ready(function() { <br><br>
 +
$("#alert").addClass("red_text"); <br><br>
 +
});
 +
</p>
 +
</div>
 +
 +
</div>
 +
 +
<div class="clear"></div>
  
−
&lt;p&gt;Here is the end of the page about our project.&lt;/p&gt;
+
<div class="column full_size">
 +
<p> Make sure to enter your enter your CSS or Javascript code <b>without any surrounding <code>&lt;html&gt;</code> tags.</b></p>
 +
 +
<p> This method for calling code is also used on the iGEM websites, for example in: <a href="https://2019.igem.org/Sitemap">2019.igem.org/Sitemap</a>. The style can be found in: <a href="https://igem.org/HQ:Sitemap.css"> HQ:Sitemap.css</a> and the javascript is in: <a href="https://igem.org/HQ:Sitemap.js">HQ:Sitemap.js</a></p>
  
−
&lt;script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=<b>Your page</b>&action=raw&ctype=text/javascript"&gt;&lt;/script&gt;
+
<p>Once the pages are ready, include these pages using <code>&lt;link&gt;</code> tags for CSS, and <code>&lt;script&gt;</code> tags for Javascript:</p>
−
&lt;/html&gt;
+
−
</pre>
+
  
−
<p>Strictly speaking, this is an incorrect use of the <code>&lt;link&gt;</code> 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.</p>
+
<div class="clear extra_space"></div>
 +
 +
<div class="highlight gray">
 +
<p>&#60;html> <br><br>
 +
&#60;link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=<b>Template:TeamName/CSS</b>&action=raw&ctype=text/css" /><br><br>
  
−
</div>
 
  
−
<div class="clear"></div>
 
  
−
<div class="column half_size">
 
−
<pre>
 
−
&lt;html&gt;
 
−
&lt;style type="text/css"&gt;
 
−
h2 {
 
−
color: red;
 
−
}
 
  
−
/* ... more CSS here ... */
+
&#60;script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=<b>Template:TeamName/JS</b>&action=raw&ctype=text/javascript"&#60;/script><br><br>
−
&lt;/style&gt;
+
&#60;/html>
 +
</p>
 +
</div>
 +
 +
<div class="clear extra_space"></div>
  
−
&lt;script type="text/javascript"&gt;
+
<p>Strictly speaking, this is an incorrect use of the <code>&lt;link&gt;</code> 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.</p>
−
var foo = 3;
+
−
// ... more Javascript here ...
+
−
&lt;/script&gt;
+
  
−
&lt;!-- Main content of the page starts here --&gt;
+
</div>
 +
  
−
&lt;h2&gt;This text will be red&lt;/h2&gt;
+
<!-------------------------------------------------------------------------------------------------------------------->
  
−
&lt;p&gt;This text will be the normal text color&lt;/p&gt;
+
<div class="clear extra_space"></div>
 +
<div class="line_divider"></div>
 +
<div class="clear extra_space" id="inline_CSS_and_JS"></div>
  
−
&lt;!-- Main content of the page ends here --&gt;
 
  
−
&lt;script type="text/javascript"&gt;
+
<div class="column half_size">
−
var a = 1;
+
<h3>How to make "inline" CSS and Javascript</h3>
−
var b = "apple";
+
−
/// ... more Javascript here ...
+
−
&lt;/script&gt;
+
−
</pre>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
<h3>How to make "inline" CSS and Javascript</h3>
+
−
 
+
−
<p>You can include CSS or Javascript within <code>&lt;style&gt;</code> or <code>&lt;script&gt;</code> 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.</p>
+
−
</div>
+
−
 
+
−
<div class="column half_size">
+
−
<h5>NOTE </h5>
+
−
<p>If you use inline Javascript, <b>you cannot use the &amp;&amp; operator</b>. When the page is rendered, any &amp; will be encoded to &amp;amp;. For short scripts, you can get around this problem by using nested <code>if</code> statements instead of &amp;&amp;. However, you should use &lt;script&gt; tags to include any substantial scripts.</p>
+
−
</div>
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
<div class="column half_size">
+
−
<h3>How to use templates including CSS and Javascript</h3>
+
−
<p>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.</p>
+
−
 
+
−
<p>Create a page whose name starts with "Template:YourTeamName". Inside <code>&lt;html&gt;</code> tags, put the material you want to include:</p>
+
−
<br>
+
−
<br>
+
−
<b>2019.igem.org/Template:YourTeamName/CSS</b>
+
−
<pre>
+
−
&lt;html&gt;
+
−
&lt;style type="text/css"&gt;
+
−
h2 {
+
−
color: red;
+
−
}
+
−
&lt;/style&gt;
+
−
&lt;/html&gt;
+
−
</pre>
+
−
 
+
−
<p>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.</p>
+
  
−
<p>If you edit a page, there will be a list of <b>which templates are used on that page</b>, below the Save/Preview buttons.</p>
+
<p>You can include CSS or Javascript within <code>&lt;style&gt;</code> or <code>&lt;script&gt;</code> 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.</p>
−
 
+
−
</div>
+
<div class="clear extra_space"></div>
−
 
+
−
<div class="column half_size">
+
−
 
+
−
<br><br>
+
−
<p>You can also <b>see which pages use your template</b>. Go to the template, and then look in the top menu for "Wiki Tools" &rarr; "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.</p>
+
−
 
+
−
 
+
−
<p>Then, use MediaWiki's syntax to <b>include</b> the template on another page, outside the <code>&lt;html&gt;</code> tags:</p>
+
−
 
+
−
<br>
+
−
<br>
+
−
<b>2019.igem.org/Team:YourTeamName/Project</b>
+
−
 
+
−
<pre>
+
−
{{YourTeamName/CSS}}
+
−
&lt;html&gt;
+
−
 
+
−
&lt;h2&gt;Our Project&lt;/h2&gt;
+
−
&lt;p&gt;Beginning of the page about our project.&lt;/p&gt;
+
−
 
+
−
&lt;/html&gt;
+
−
{{YourTeamName/Templae_in_the_middle}}
+
−
&lt;html&gt;
+
−
 
+
−
&lt;p&gt;End of the page about our project.&lt;/p&gt;
+
−
 
+
−
&lt;/html&gt;
+
−
{{YourTeamName/Javascript}}
+
−
</pre>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
 
+
−
<div class="column full_size">
+
 
<div class="highlight gray post_item">
 
<div class="highlight gray post_item">
 
     <div class="details">  
 
     <div class="details">  
Line 226: Line 223:
 
         <div class="title"> Note </div>  
 
         <div class="title"> Note </div>  
 
</div>
 
</div>
−
     
+
<p>If you use inline Javascript, <b>you cannot use the &amp;&amp; operator</b>. When the page is rendered, any &amp; will be encoded to &amp;amp;. For short scripts, you can get around this problem by using nested <code>if</code> statements instead of &amp;&amp;. However, you should use &lt;script&gt; tags to include any substantial scripts.</p>
−
<p>If you make a template containing Javascript, <b>you cannot use the &amp;&amp; operator</b>. When the page is included via the {{ ... }} syntax, any &amp; will be encoded to &amp;amp;. For short scripts, you can get around this problem by using nested <code>if</code> statements instead of &amp;&amp;. However, you should <a href="#link-and-script">use &lt;script&gt; tags to include any substantial scripts</a>.</p>
+
</div>
 +
 +
</div>
 +
 
 +
 
 +
<div class="column half_size">
 +
<div class="highlight gray ">
 +
 
 +
<p> &#60;html><br>
 +
&#60;style type="text/css"> <br>
 +
/*Make text red and bold*/ <br>
 +
.red_text { <br>
 +
color: #f42434; <br>
 +
font-weight:bold; <br>
 +
}<br>
 +
&#60;/style><br>
 +
 +
&#60;script type="text/javascript"><br>
 +
$(document).ready(function() { <br>
 +
$("#alert").addClass("red_text"); <br>
 +
});</br>
 +
&#60;/script><br>
 +
&#60;/html><br>
 +
 +
</p>
 +
 
 +
</div>
 +
</div>
 +
 
  
−
</div>
 
−
</div>
 
 
 
  

Latest revision as of 17:41, 30 July 2019

Loading...

Using HTML, CSS, and Javascript on Your Team Wiki

On this page you will find: HTML versus MediaWiki markup, how to use CSS and Javascript in templates, how to use link and script tags to load CSS and Javascript, how to use inline CSS and Javascript .

All the iGEM web sites are built on top of MediaWiki, which allows groups of people to create and edit pages easily.

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:

This example uses makes text bold and italic, first using html and then wiki markup.

<html>
<p> <b> <i> Example text </i> </b> </p>
</html>

''''' Example text '''''

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.

How to use templates including 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.

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.

First, create a page whose name starts with "Template:TeamName". Inside <html> tags, put the material you want to include. Here are two examples:

2019.igem.org/Template:TeamName/CSS

<style>
/*Make text red and bold*/
.red_text {
color: #f42434;
font-weight:bold;
}
</style>

2019.igem.org/Template:TeamName/JS

<script>
$(document).ready(function() {

$("#alert").addClass("red_text");

});
</script>

Then, use MediaWiki's syntax to include the template on another page, outside the <html> tags:

2019.igem.org/Team:TeamName/Project

{{TeamName/CSS}}
<html>
<h2> Our Project </h2>
<p> Beginning of the page about our project.</p>
</html>
{{TeamName/JS}}

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 &amp;. 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.

Using <link> and <script> tags to include CSS and Javascript

To use this method, first, create a page in your team name space. In this example we will use: "Template:TeamName/CSS" for style and "Template:TeamName/JS" for code. Below are examples of css styling and javascript code.

2019.igem.org/Template:TeamName/CSS

/*Make text red and bold*/
.red_text {
color: #f42434;
font-weight:bold;
}

2019.igem.org/Template:TeamName/JS

$(document).ready(function() {

$("#alert").addClass("red_text");

});

Make sure to enter your enter your CSS or Javascript code without any surrounding <html> tags.

This method for calling code is also used on the iGEM websites, for example in: 2019.igem.org/Sitemap. The style can be found in: HQ:Sitemap.css and the javascript is in: HQ:Sitemap.js

Once the pages are ready, include these pages using <link> tags for CSS, and <script> tags for Javascript:

<html>

<link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Template:TeamName/CSS&action=raw&ctype=text/css" />

<script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:TeamName/JS&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.

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.

Note

If you use inline Javascript, you cannot use the && operator. When the page is rendered, any & will be encoded to &amp;. 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.

<html>
<style type="text/css">
/*Make text red and bold*/
.red_text {
color: #f42434;
font-weight:bold;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#alert").addClass("red_text");
});
</script>
</html>

iGEM Foundation

The International Genetically Engineered Machine (iGEM) Foundation is an independent, non-profit organization dedicated to the advancement of synthetic biology, education and competition, and the development of an open community and collaboration. Visit us at igem.org


hq AT igem DOT org


27 Drydock Avenue
Suite 27E-230
Boston, MA 02210


+1.617.500.3106