Wiki Tutorial
Welcome to our wiki coding tutorial. We know that many teams struggle to set up their wiki so we decided to write a guide to help you get started. Large parts of it are based on the w3schools HTML and CSS tutorials. If we left anything unclear you can probably find a solution in no time there, otherwise feel free to contact us.
HTML
Basics
A website might not look like it, but it is basically a text document with some additional styling. The following example shows the minimal website:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
The <!DOCTYPE html> declaration states the type of the document, in this case HTML5, just like a file extension. The <html> and </html> tags surround all the code that you can write. Inside the <head></head> tags you can import CSS stylesheets, set the display name of the website and other meta information. Inside the <body></body> element you write the actual visible page content. Since the doctype and page titles are handled by mediawiki it is not necessary to include them in your wiki page.
The <!DOCTYPE html> declaration states the type of the document, in this case HTML5, just like a file extension. The <html> and </html> tags surround all the code that you can write. Inside the <head></head> tags you can import CSS stylesheets, set the display name of the website and other meta information. Inside the <body></body> element you write the actual visible page content. Since the doctype and page titles are handled by mediawiki it is not necessary to include them in your wiki page.
Basic Layout
To understand how to set up your wiki you first have to grasp some basic html and CSS concepts. Modern websites are usually build with div-containers, which basically are rectangles. These containers can be stacked, next to each other or nested inside another. Html elements are constructed using opening angle brackets <> and are usualy closed with closing angle brackets </>. They can be styled using either the class attribute <div class=""> or using an id <div id="">, the difference between those two being , that each id tag should only be used once per page, while the class tag can be used as often as liked. You can also style the divs using the style inline method <div style="">, but this is not recommended, since you would have to do this for every single element over again. The following code snippet shows the nesting of containers, with a little styling added (not shown).
<div>
<div>
<div>
<p>Test</p>
</div>
</div>
</div>
Test
The Wiki Layout
Just alike the example above the wiki already provides several levels of layout that you can access: #globalWrapper, #content, #HQ_page, and #bodyContent. While you could just nullify the styling of these divs and build your page backbone with your own divs I highly recommend actually overwriting them, as this gives you the possibility to build your wiki page backbone in a way that your other team members cannot overwrite it by accident. We will cover how in the CSS section of this post.
HTML elements
Headings
Just like in your favorite text editor, html comes with multiple levels of headings.
<h1>Heading 1</h1>
Heading 1
<h2>Heading 2</h2>
Heading 2
<h3>Heading 3</h3>
Heading 3
<h4>Heading 4</h4>
Heading 4
<h5>Heading 5</h5>
Heading 5
<h6>Heading 6</h6>
Heading 6
Text
Paragraphs
Whenever you are writing vanilla text, you should use the paragraph element <p>. Note though, that newline characters of text that you copy inside this tag are omitted. If you want a linebreak between two chunks of text you can either insert the two texts in seperate paragraph elements or use the line break element <br>. Note that br does not need a closing tag. Dependeing on your styling the paragraphs might have some margin or padding, thus increasing the distance between the two paragraphs when using <p> instead of <br>.
<p>
Paragraph one
<br>
Paragraph two
</p>
Paragraph one
Paragraph two
<p>
Paragraph one
</p>
<p>
Paragraph two
</p>
Paragraph one
Paragraph two
Formatted text
If you want to emphasize certain elements of your paragraphs you can do it by using several inline elements, each of which you can style to your liking.
<em>Emphasized text</em>
<strong>Strong text</strong>
<code>A piece of computer code</code>
<samp>Sample output from a computer program</samp>
<kbd>Keyboard input</kbd>
<var>Variable</var>
<mark>Mark</mark>
<cite>Cite</cite>
<dfn>Definition</dfn>
<sup>Higher</sup>
<sub>Lower</sub>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<abbr title="abbrevation explanation">abbrevation</abbr>
Emphasized text
Strong text
A piece of computer code
Sample output from a computer program
Keyboard input
Variable
Mark
Cite
Definition
Normal, Higher
Normal, Lower
Normal, Small text
Deleted text
Inserted text
abbrevation
Links
<a href="https://2017.igem.org/Team:Cologne-Duesseldorf">
Link to our wiki home page
</a>
Images
Images can be embedded using the <img> tag. Note that there is no closing </img> tag.
<img src="https://static.igem.org/mediawiki/2017/0/0d/T--Cologne-Duesseldorf--artico-logo-cities.svg">
Lists
Unordered List
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
- Element 1
- Element 2
- Element 3
Ordered List
<ol>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ol>
- Element 1
- Element 2
- Element 3
Nested List
<ol>
<li>Element 1</li>
<ul>
<li>Element 2</li>
</ul>
<li>Element 3</li>
</ol>
- Element 1
- Element 2
- Element 3
