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.
