Team:Bielefeld-Germany/Example

From 2012.igem.org

(Difference between revisions)
 
(14 intermediate revisions not shown)
Line 1: Line 1:
{{Team:Bielefeld/Head}}
{{Team:Bielefeld/Head}}
 +
__NOTOC__
 +
<!-- Write comments like this:
 +
    * The first line when editing a page always has to include our wiki header.
 +
    * The second line in this example "__NOTOC__" hides the automatically generated table of content at the top of the page.
 +
    * Use comments to leave notes for your team members or e.g. to remind yorself to edit a paragraph another time.
 +
    * If you start something <blabla>, then close it again </blabla>!
 +
    * It's easier to edit a page if the code is indented evenly.
 +
    * Wiki code allows you to include a word wrap in your text directly by pressing enter. If you want to force a word wrap just type
 +
      in <br/>
 +
    -->
 +
<center>
 +
=I am a centered header (Getting started)=
 +
</center>
 +
<!-- This is how to insert a heading. There's no easier way to organize your text and there are only a few things you have to consider:
 +
    * The first header of each page should be centered.
 +
    * There are different levels of headings:
 +
      - =level 1= (this is the level of the first header of a page)
 +
      - ==level 2== (this is how you start subtopics on the page)
 +
      - ===level 3=== (I guess by now you get it)
 +
    -->
 +
<div style="text-align:justify;">
 +
<!-- Before you start being busy writing a text make sure you have written this line. It will display your text justified.
 +
    -->
-
<html>
+
See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification!<br/><br/>
-
<body>
+
<!-- This is how <br> looks like when used.
 +
    -->
 +
See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification!
-
<!-- Kommentare hier rein:
+
==Creating a table and other useful hints==
-
* <html> und <body> erlauben dir die HTML-Seite erstmal zu starten
+
-
* "" sind das A und O
+
-
* Wenn du etwas anfängst <blabla>, dann beende es auch: </blabla>
+
-
* für andere ist es angenehmer, wenn der Code schön gleichmäßig eingerückt ist
+
-
* <br> macht einen Zeilenumbruch
+
-
-->
+
 +
===Tables===
-
  <h1 align=center>Ich bin eine zentrierte Überschrift</h1>
+
Let´s create a table. Because tables are pretty.
-
<p align=justify>
+
{| class="wikitable"
 +
|-
 +
! column header 1 !! column header 2 !! column header 3
 +
|-
 +
| the first row || a column || another column
 +
|-
 +
| the second row || a column || another column
 +
|-
 +
| the third row || a column || another column
 +
|-
 +
|}
-
<!-- * Überschriften kann man unterschiedlich groß gestalten. Die Hierarchie geht hierbei von h1-h6 (h1 ist die              Überüberschrift). Überschriften kommen nicht in den Block, der bereits euren Block (<p>)
+
<!-- And now some hard facts about tables:
-
    * "align=justify" erlaubt dir die Seite mit Blocksatz zu gestalten
+
    * this is what starts a table: {|
 +
    * this is what ends a table: |}
 +
    * you can separate the rows with: |-
 +
    * columns are separated with: ||
 +
    * if you insert "class="wikitable"" your table is going to be framed,
 +
      but you can also leave this out depending which style you prefer
 +
    * if you like, you can insert header for each column with "!"
-->
-->
-
Ich zeige dir wie schön Blocksatz ist. Und Schriftgröße 12 ist auch ganz toll! Ich zeige dir wie schön Blocksatz ist. Und Schriftgröße 12 ist auch ganz toll! Ich zeige dir wie schön Blocksatz ist. Und Schriftgröße 12 ist auch ganz toll! Ich zeige dir wie schön Blocksatz ist. Und Schriftgröße 12 ist auch ganz toll! Ich zeige dir wie schön Blocksatz ist. Und Schriftgröße 12 ist auch ganz toll! Ich zeige dir wie schön Blocksatz ist. Und Schriftgröße 4 ist auch ganz toll! Ich zeige dir wie schön Blocksatz ist. Und Schriftgröße 12 ist auch ganz toll! Ich zeige dir wie schön Blocksatz ist. Und Schriftgröße 12 ist auch ganz toll!
+
===Enumerations and Lists===
-
Ich zeige dir wie schön Blocksatz ist. Und Schriftgröße 12 ist auch ganz toll!<br><br>
+
-
<!-- *so sieht <br> angewandt aus
+
And we can do more. Enumerations!
-
-->
+
-
Und jetzt machen wir eine Tabelle hier rein, weil wir es können!<br><br>
+
* enumeration yeah
 +
* enumeration yeah
 +
** enumeration yeah yeah
 +
** enumeration yeah yeah
 +
* enumeration yeah
 +
* enumeration yeah
-
<table border="1">
 
-
<tr>
 
-
<td> tr macht eine Zeile </td>
 
-
<td> und td macht eine Spalte </td>
 
-
<td> Noch eine Spalte </td>
 
-
                                </tr>
 
-
                                <tr>
 
-
                                        <td> Zeile Zeile Zeile </td>
 
-
<td> Zeile2/Spalte2 </td>
 
-
<td> me gusta! </td>
 
-
                                </tr>
 
-
</table>
+
Or do you prefer lists like this one?
-
<!-- *mit <table> leitest du eine Tabelle ein
+
# one
-
    *"border" sagt, ob du Rahmenlinien in der Tabelle haben möchtest: "border=0" ist eine Tabelle ohne Rahmenlinien, "border=1" macht Linien"
+
# two
-
-->
+
## and one two three four
 +
# let's rock!
-
<br><br><br>
 
-
 
-
Wir können noch mehr! Aufzählungen müssen her!
 
-
<ul>
 
-
<li>Ich bin eine Aufzählung.</li>
 
-
<li>Ich auch.</li>
 
-
<li>Ich auch.</li>
 
-
<li>Ich auch.</li>
 
-
</ul>
 
-
                                <br><br><br>
 
-
        <a href="http://https://2012.igem.org/Team:Bielefeld-Germany">Ich bin ein Link!</a><br><br><br>
+
===Links===
-
                             
+
There are two important possibilities to include a link in your text. The first one is to refer to a wiki page, for example our [[Team:Bielefeld-Germany | home]] page. You can also refer to an external page. And there wouldn't be a better example than our [http://2012.igem-bielefeld.de/ german homepage]. :)
-
                        Außerdem kann man auch <i>kursiv</i>, <b>dick</b> oder <u>unterstrichen</u> schreiben.<br><br>
+
-
  Zudem kann man <p align="center">zentriert,</p><br>
+
-
  <p align="left">linksbündig</p><br>
+
-
  <p align="right">oder rechtsbündig schreiben.</p>
+
-
 
+
-
+
-
</p>
+
-
<!-- *weil jetzt eine untergeordnete Überschrift kommt, schließen wir den <p>-Block
 
-
-->
 
 +
===Did we talk about pictures yet?===
-
  <h2 align=left>Ich mache eine Unter-Überschrift auf!</h2>
+
One of the most important things is to include pictures or diagrams. The first step is to uplade your picture. Use the "Upload" button at the bottom of each iGEM-page (remember: Uploading a picture is only possible if you are logged in). When uploading you have to make sure to have the appropriate rigths and to start the file name with Bielefeld2012_(and here comes the actual name). And now you decide how to arrange the picture and include it in the webpage:<br/>
-
+
-
      <p align=justify>  
+
-
Jetzt kommt noch ein bißchen sinnloser Text. Wurst. Käse. Tomate. Gurke. Döner. Döner. Döner. Döner. Beenden wir das mit einem verlinkten Bild:
+
[[File:Bielefeld2012_Discodopsis.jpg|200px|thumb|center|Discodopsis likes the dance floor!]]
-
+
-
+
-
+
-
<center>
+
-
<a href="http://www.uni-bielefeld.de" target="_blank">
+
-
<img src="https://static.igem.org/mediawiki/2011/6/68/IgemBielefeld_2011_Logo_uni.jpg" alt="University"/>
+
-
</a>
+
-
</center>
+
-
<!-- *Lade das Bild deiner Wahl auf der iGEM-Seite hoch, kopiere den erstellten Link und füge ihn einfach in das Template ein.
+
<!-- This is how you include a picture. There are also a few things you need to know:
-
    *mit <a href=""> verlinkst du das Bild direkt; kann natürlich auch weg bleiben
+
    * After the uploaded file you can decide which sixe in pixles your picture should have.
-
    *<center sorgt hier daür, dass wir es auch mittig sehen>
+
    * "thumb" makes a frame.
-
-->
+
    * You can also choose the adjustment (center, left, right).
 +
    * At the end you can insert the caption if necessary.
 +
    * Seperate these options with a "|".
 +
    * There are a lot more options you can adjust, like links and more (check out the media wiki page).
 +
    -->                
-
        </p>
+
===Some more facts to make your text even more prettier===
-
</body>
+
Your text can be written in ''italics'', '''bold''' (or '''''both of it'''''), <span style="text-decoration: underline;">underlined</span> or <strike> striked</strike>. Also you can arrange your text
-
</html>
+
<center> centered </center>
 +
<p align="left"> left </p>
 +
<p align="right"> or right. </p>
-
<!-- Und zum Schluss machen wir alles zu :)
+
 
-
-->
+
----
 +
 
 +
 
 +
There are a lot more stylistic goodies to arrange your text like this horizontal line above. If there is anything missing in this example page have a look at the [http://www.mediawiki.org/wiki/Help:Formatting/ MediaWiki help page] or the german analog at [http://de.wikipedia.org/wiki/Hilfe:Textgestaltung/ Wikipedia]. Have fun with creating and editing your own text :)

Latest revision as of 09:12, 12 August 2012

I am a centered header (Getting started)

See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification!

See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification! See how awesome justification is: Awesome justification! Awesome justification! Awesome justification!

Creating a table and other useful hints

Tables

Let´s create a table. Because tables are pretty.

column header 1 column header 2 column header 3
the first row a column another column
the second row a column another column
the third row a column another column


Enumerations and Lists

And we can do more. Enumerations!

  • enumeration yeah
  • enumeration yeah
    • enumeration yeah yeah
    • enumeration yeah yeah
  • enumeration yeah
  • enumeration yeah


Or do you prefer lists like this one?

  1. one
  2. two
    1. and one two three four
  3. let's rock!


Links

There are two important possibilities to include a link in your text. The first one is to refer to a wiki page, for example our home page. You can also refer to an external page. And there wouldn't be a better example than our [http://2012.igem-bielefeld.de/ german homepage]. :)


Did we talk about pictures yet?

One of the most important things is to include pictures or diagrams. The first step is to uplade your picture. Use the "Upload" button at the bottom of each iGEM-page (remember: Uploading a picture is only possible if you are logged in). When uploading you have to make sure to have the appropriate rigths and to start the file name with Bielefeld2012_(and here comes the actual name). And now you decide how to arrange the picture and include it in the webpage:

Discodopsis likes the dance floor!


Some more facts to make your text even more prettier

Your text can be written in italics, bold (or both of it), underlined or striked. Also you can arrange your text

centered

left

or right.



There are a lot more stylistic goodies to arrange your text like this horizontal line above. If there is anything missing in this example page have a look at the [http://www.mediawiki.org/wiki/Help:Formatting/ MediaWiki help page] or the german analog at [http://de.wikipedia.org/wiki/Hilfe:Textgestaltung/ Wikipedia]. Have fun with creating and editing your own text :)
Retrieved from "http://2012.igem.org/Team:Bielefeld-Germany/Example"