From 2013.igem.org

(Difference between revisions)

Latest revision as of 10:28, 22 September 2013

Iron coli project

In order to keep our wiki clean please follow these guidelines when writing HTML code

How create a new page

Open a new page with the name of url choosen, then click on onglet create in the top

HTML tag and template

First of all, specify the template and put the html tag around your document:

{{:Team:Evry/template_classic}}

<html>

<div id="mainTextcontainer">

your page goes here

</div>
</div>
</html>

{{:Team:Evry/foot}}

Titles

To put a title use the h1,h2,h3 tags:

<h1> put your title here </h1>

Examples

h1 title

h2 title

h3 title

New line

If you want to end the current line use the br tag:

<br/>

Example

line1
line2

Alignment

To left, center or right alignment

Left is default value

Center

<div align="center">Here the text</div>

Right

<div align="right">Here the text</div>

Justify

<div align="justify">Here the text</div>

Example

Left text (it's a marxist text)

I'm a center text

Right, i'm a right text

I'm justify my work with this justify text

Bold/Italic/Underline

Use the i tag to put your text in italic:

<i>text in italic</i>

Use the b tag to put your text in bold:

<b>text in bold</b>

Use the u tag to underline your text :

<u>text undelined</u>

Example

coucou <- italic
coucou <- bold
coucou <- underlined

Lists

Dotted

Use the ul to create a list and the li tag to add an item:

<ul>
<li> item 1 
<li> item 2 
..
</ul>

Example

item 1
item 2
..

Numbered

Use the ol to create a list and the li tag to add an item:

<ol>
<li> item 1 
<li> item 2 
..
</ol>

Example

item 1
item 2
..

Arrays

Use the table tag to create an array;
Inside the table tag use the tr tag to create a line;
Inside the tr tag use the td tag to create a new cell.

<table>
<tr>
  <td>cell1</td>
  <td>cell2</td>
  ...
</tr>
<tr>
...
</tr>
...
</table>

Example

tata	toto
titi	tutu

Borders

To add border to an array use the attribute border="1":

<table border="1">
...
</table>

Example

tata	toto
titi	tutu

Links

To add a link use the a tag:

<a href="url to link">link name</a>

Example

Go checkout our wiki.

Images

The two steps to add an image are:

Upload the image file using this page:here
Use the img tag

<img src="localisation of the image" alt="text to print if image not found" />

Examples

Url of the image: https://static.igem.org/mediawiki/2013/c/c9/IronMinion.jpg
The image:

Image avec légende

Pour ajouter une image avec une légende, utilisez le code suivant :

<div class="center">
 <div class="thumb tnone">
  <div class="thumbinner" style="width:502px;">
   <a href="URL IMAGE" class="image">
    <img alt="IMAGE" src="URL IMAGE" width="500px;" class="thumbimage"/>
   </a>
   <div class="thumbcaption">
    <div class="magnify">
     <a href="URL IMAGE" class="internal" title="Enlarge">
      <img src="/wiki/skins/common/images/magnify-clip.png" width="15" height="11" alt="Symbol"/>
     </a>
    </div>
    <center>Figure X: LEGEND HERE</center>
   </div>
  </div>
 </div>
</div>

Remarques :

La première div peut être changée pour aligner l'image à l'endroit souhaité.
Ajouter +2 à la taille du cadre par rapport à celle de l'image (ici cadre=502px/image=500px)
Le lien "/wiki/skins..." correspond au symbole d'agrandissement à droite de la légende.

Examples

Figure 1: Iron Minion.

Image avec légende et texte aligné (code plus propre)

  <div class="captionedPicture" style="width:30%;float:left;">
   <a title="Nom Lien" href="URL image">
    <img alt="Nom Lien" src="URL image" class="Picture"/>
   </a>
   <div class="caption">
     <b>Figure 1:</b> Légende ici.
   </div>
  </div>
  <p style="padding-top:1%;">Texte aligné par rapport à l'image </p>
  <div style="clear: both;"></div>
  <p>Texte après l'image</p>

Détails du code

Ce qui est en gras doit absolument être modifié en fonction de votre lien.

Pour ce qui est en orange:

width: 30% : changer le pourcentage pour moduler la taille du cadre, l'image s'adapte toute seul à la nouvelle taille
float: left : modifier par right pour que l'image soit à droite
La dernière ligne permet d'éviter les débordements, le texte suivant sera sous l'image. Tant que vous n'avez pas mis cette ligne, toutes les balises p que vous utiliserez seront à droite de l'image jusqu'à la limite de place disponible.

Examples

Figure 1: Iron minion à la rescousse.

Les minions c'est trop trop trop trop mignon.

J'aime les licornes et leurs jolis cornes
Elles ont un pelage semblable aux nuages
Elles sont très gentils avec leurs amies
Même si elles pratiquent la sodomie

@@ Line 1: / Line 1: @@
-{{:Team:Evry/template_v1}}
+{{:Team:Evry/template_hide}}
 <html>
-In order to keep our wiki clean please follow these guidelines when writing HTML code:
+<div id="mainTextcontainer">
+<b>In order to keep our wiki clean please follow these guidelines when writing HTML code</b>
 <h1> How create a new page </h1>
@@ Line 13: / Line 16: @@
 <pre>
-{{:Team:Evry/template_v1}}
+{{:Team:Evry/template_classic}}
 &lt;html>
+&lt;div id="mainTextcontainer">
 your page goes here
-&lt;script type="text/javascript">writeFooter()&lt;/script>
+&lt;/div>
+&lt;/div>
 &lt;/html>
+{{:Team:Evry/foot}}
 </pre>
@@ Line 47: / Line 57: @@
 <h1>Alignment</h1>
 To left, center or right alignment<br/><br/>
-Left is default value
+<b>Left is default value</b>
 <h2>Center</h2>
-<pre>&lt;div style="text-align:center">Here the text&lt;/div></pre>
+<pre>&lt;div align="center">Here the text&lt;/div></pre>
 <h2>Right</h2>
-<pre>&lt;p style="text-align:right">Here the text</p></pre>
+<pre>&lt;div align="right">Here the text&lt;/div></pre>
-Justify
+<h2>Justify</h2>
-<pre>&lt;p style="text-align:justify">Here the text</p></pre>
+<pre>&lt;div align="justify">Here the text&lt;/div></pre>
 <h2>Example</h2>
 Left text (it's a marxist text)
-<p style="text-align:center">I'm a center text</p>
+<div align="center">I'm a center text</div>
-<p style="text-align:right">Right, i'm a right text</p>
+<div align="right">Right, i'm a right text</div>
-<p style="text-align:justify">I'm justify my work with this justify text</p>
+<div align="justify">I'm justify my work with this justify text</div>
 <h1> Bold/Italic/Underline </h1>
@@ Line 199: / Line 209: @@
 </ol>
-<pre>&lt;img src="localisation of the image" alt="text to print if image not found" /></pre>
+<pre>&lt;img src="<em>localisation of the image</em>" alt="<em>text to print if image not found</em>" /></pre>
 <h2> Examples </h2>
@@ Line 210: / Line 220: @@
 <img src="https://static.igem.org/mediawiki/2013/c/c9/IronMinion.jpg" alt="Iron minion"/>
+<h1> Image avec légende</h1>
+<p>
+Pour ajouter une image avec une légende, utilisez le code suivant :
+</p>
+<pre>
+&lt;div class="center">
+ &lt;div class="thumb tnone">
+  &lt;div class="thumbinner" <em>style="width:502px;"</em>>
+   &lt;a href="<b>URL IMAGE</b>" class="image">
+    &lt;img alt="IMAGE" src="<b>URL IMAGE</b>" <em>width="500px;"</em> class="thumbimage"/>
+   &lt;/a>
+   &lt;div class="thumbcaption">
+    &lt;div class="magnify">
+     &lt;a href="<b>URL IMAGE</b>" class="internal" title="Enlarge">
+      &lt;img src="/wiki/skins/common/images/magnify-clip.png" width="15" height="11" alt="Symbol"/>
+     &lt;/a>
+    &lt;/div>
+    &lt;center><b>Figure X: LEGEND HERE</b>&lt;/center>
+   &lt;/div>
+  &lt;/div>
+ &lt;/div>
+&lt;/div>
+</pre>
+<b>Remarques :</b><br/>
+<ul>
+<li>La première div peut être changée pour aligner l'image à l'endroit souhaité.
+<li>Ajouter +2 à la taille du cadre par rapport à celle de l'image (ici cadre=502px/image=500px)
+<li>Le lien "/wiki/skins..." correspond au symbole d'agrandissement à droite de la légende.
+</ul>
+<h2> Examples </h2>
+<div class="center">
+ <div class="thumb tnone">
+  <div class="thumbinner" style="width:202px;">
+   <a href="https://static.igem.org/mediawiki/2013/c/c9/IronMinion.jpg" class="image">
+    <img alt="" src="https://static.igem.org/mediawiki/2013/c/c9/IronMinion.jpg" width="200" class="thumbimage" />
+   </a>
+   <div class="thumbcaption">
+    <div class="magnify">
+     <a href="https://static.igem.org/mediawiki/2013/c/c9/IronMinion.jpg" class="internal" title="Enlarge">
+      <img src="/wiki/skins/common/images/magnify-clip.png" width="15" height="11" alt="" />
+     </a>
+    </div>
+    <center>Figure 1: Iron Minion.</center>
+   </div>
+  </div>
+ </div>
+</div>
+<h1> Image avec légende et texte aligné (code plus propre)</h1>
+<pre>
+  &lt;div class="captionedPicture" style="<em>width:30%;float:left;</em>">
+   &lt;a title="<b>Nom Lien</b>" href="<b>URL image</b>">
+    &lt;img alt="<b>Nom Lien</b>" src="<b>URL image</b>" class="Picture"/>
+   &lt;/a>
+   &lt;div class="caption">
+     <b>&lt;b>Figure 1:&lt;/b> Légende ici.</b>
+   &lt;/div>
+  &lt;/div>
+  &lt;p style="padding-top:1%;"><b>Texte aligné par rapport à l'image</b> &lt;/p>
+  <em>&lt;div style="clear: both;">&lt;/div></em>
+  &lt;p><b>Texte après l'image</b>&lt;/p>
+</pre>
+<h2> Détails du code</h2>
+Ce qui est en gras doit absolument être modifié en fonction de votre lien.</br>
+</br>Pour ce qui est en orange:
+<ol>
+  <li> width: <em>30%</em> : changer le pourcentage pour moduler la taille du cadre, l'image s'adapte toute seul à la nouvelle taille</li>
+  <li> float: <em>left</em> : modifier par right pour que l'image soit à droite</li>
+  <li> La dernière ligne permet d'éviter les débordements, le texte suivant sera sous l'image. Tant que vous n'avez pas mis cette ligne, toutes les balises p que vous utiliserez seront à droite de l'image jusqu'à la limite de place disponible.
+</ol>
+<h2> Examples </h2>
+  <div class="captionedPicture" style="width:30%;float:left">
+   <a title="Iron minion" href="https://static.igem.org/mediawiki/2013/c/c9/IronMinion.jpg">
+    <img alt="Iron minion" src="https://static.igem.org/mediawiki/2013/c/c9/IronMinion.jpg" class="Picture"/>
+   </a>
+   <div class="caption">
+     <b>Figure 1:</b> Iron minion à la rescousse.
+   </div>
+  </div>
+<p style="padding-top:1%;">
+Les minions c'est trop trop trop trop mignon.
+</p>
+<div style="clear: both;"></div>
+<p>
+J'aime les licornes et leurs jolis cornes</br>
+Elles ont un pelage semblable aux nuages</br>
+Elles sont très gentils avec leurs amies</br>
+Même si elles pratiquent la sodomie
+</p>
+</div>
+</div>
 </html>
+{{:Team:Evry/foot}}

Team:Evry/wiki-guidelines

From 2013.igem.org

Latest revision as of 10:28, 22 September 2013

How create a new page

HTML tag and template

Titles

Examples

h1 title

h2 title

h3 title

New line

Example

Alignment

Center

Right

Justify

Example

Bold/Italic/Underline

Example

Lists

Dotted

Example

Numbered

Example

Arrays

Example

Borders

Example

Links

Example

Images

Examples

Image avec légende

Examples

Image avec légende et texte aligné (code plus propre)

Détails du code

Examples