Team:Evry/wiki-guidelines

From 2014.igem.org

(Difference between revisions)
(Created page with "{{:Team:Evry/template_hide}} <html> <div id="mainTextcontainer"> <b>In order to keep our wiki clean please follow these guidelines when writing HTML code</b> <h1> How create ...")
(Replaced content with " <html> <head> </head> <body> <div class="week"> <h4>Week 1</h4> <div class="project_Name"> <p>Week 1 </p> <p > HERE HERE </p> </div> </body...")
Line 1: Line 1:
-
{{:Team:Evry/template_hide}}
 
<html>
<html>
 +
<head>
-
<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>
+
</head>
 +
<body>
-
Open a new page with the name of url choosen, then click on onglet <i>create</i> in the top
+
<div class="week">
 +
    <h4>Week 1</h4>
 +
    <div class="project_Name">
 +
    <p>Week 1 </p>
 +
<p >
-
<h1> HTML tag and template </h1>
 
-
First of all, specify the template and put the html tag around your document:
 
-
<pre>
+
HERE HERE
-
{{:Team:Evry/template_classic}}
+
-
&lt;html>
 
-
&lt;div id="mainTextcontainer">
 
-
your page goes here
 
-
&lt;/div>
 
-
&lt;/div>
 
-
&lt;/html>
 
-
{{:Team:Evry/foot}}
+
</p>
-
 
+
-
</pre>
+
-
 
+
-
<h1> Titles </h1>
+
-
 
+
-
To put a title use the h1,h2,h3 tags:
+
-
 
+
-
<pre>&lt;h1> put your title here &lt;/h1></pre>
+
-
 
+
-
<h2> Examples </h2>
+
-
 
+
-
<h1> h1 title </h1>
+
-
<h2> h2 title </h2>
+
-
<h3> h3 title </h3>
+
-
 
+
-
<h1> New line </h1>
+
-
 
+
-
If you want to end the current line use the br tag:
+
-
 
+
-
<pre>&lt;br/></pre>
+
-
 
+
-
<h2> Example </h2>
+
-
 
+
-
line1<br/>
+
-
line2
+
-
 
+
-
<h1>Alignment</h1>
+
-
To left, center or right alignment<br/><br/>
+
-
<b>Left is default value</b>
+
-
<h2>Center</h2>
+
-
<pre>&lt;div align="center">Here the text&lt;/div></pre>
+
-
<h2>Right</h2>
+
-
<pre>&lt;div align="right">Here the text&lt;/div></pre>
+
-
<h2>Justify</h2>
+
-
<pre>&lt;div align="justify">Here the text&lt;/div></pre>
+
-
 
+
-
<h2>Example</h2>
+
-
Left text (it's a marxist text)
+
-
<div align="center">I'm a center text</div>
+
-
<div align="right">Right, i'm a right text</div>
+
-
<div align="justify">I'm justify my work with this justify text</div>
+
-
<h1> Bold/Italic/Underline </h1>
+
-
 
+
-
Use the i tag to put your text in italic:
+
-
 
+
-
<pre>&lt;i>text in italic&lt;/i></pre>
+
-
 
+
-
Use the b tag to put your text in bold:
+
-
 
+
-
<pre>&lt;b>text in bold&lt;/b></pre>
+
-
 
+
-
Use the u tag to underline your text :
+
-
 
+
-
<pre>&lt;u>text undelined&lt;/u></pre>
+
-
 
+
-
<h2> Example </h2>
+
-
 
+
-
<i> coucou </i> <- italic<br/>
+
-
<b> coucou </b> <- bold<br/>
+
-
<u> coucou </u> <- underlined
+
-
 
+
-
<h1> Lists </h1>
+
-
 
+
-
<h2> Dotted </h2>
+
-
 
+
-
Use the ul to create a list and the li tag to add an item:
+
-
 
+
-
<pre>
+
-
&lt;ul>
+
-
&lt;li> item 1 </li>
+
-
&lt;li> item 2 </li>
+
-
..
+
-
&lt;/ul>
+
-
</pre>
+
-
 
+
-
<h3> Example </h3>
+
-
 
+
-
<ul>
+
-
<li> item 1 </li>
+
-
<li> item 2 </li>
+
-
<li> .. </li>
+
-
</ul>
+
-
 
+
-
<h2> Numbered </h2>
+
-
 
+
-
Use the ol to create a list and the li tag to add an item:
+
-
 
+
-
<pre>
+
-
&lt;ol>
+
-
&lt;li> item 1 </li>
+
-
&lt;li> item 2 </li>
+
-
..
+
-
&lt;/ol>
+
-
</pre>
+
-
 
+
-
<h3> Example </h3>
+
-
 
+
-
<ol>
+
-
<li> item 1 </li>
+
-
<li> item 2 </li>
+
-
<li> .. </li>
+
-
</ol>
+
-
 
+
-
<h1> Arrays </h1>
+
-
 
+
-
<ol>
+
-
<li> Use the table tag to create an array;</li>
+
-
<li>Inside the table tag use the tr tag to create a line;</li>
+
-
<li>Inside the tr tag use the td tag to create a new cell.</li>
+
-
</ol>
+
-
 
+
-
<pre>
+
-
&lt;table>
+
-
&lt;tr>
+
-
  &lt;td>cell1&lt;/td>
+
-
  &lt;td>cell2&lt;/td>
+
-
  ...
+
-
&lt;/tr>
+
-
&lt;tr>
+
-
...
+
-
&lt;/tr>
+
-
...
+
-
&lt;/table>
+
-
</pre>
+
-
 
+
-
<h2> Example </h2>
+
-
 
+
-
<table>
+
-
<tr>
+
-
<td> tata </td>
+
-
<td> toto </td>
+
-
</tr>
+
-
<tr>
+
-
<td> titi </td>
+
-
<td> tutu </td>
+
-
</tr>
+
-
</table>
+
-
 
+
-
<h2> Borders </h2>
+
-
 
+
-
To add border to an array use the attribute border="1":
+
-
 
+
-
<pre>
+
-
&lt;table border="1">
+
-
...
+
-
&lt;/table>
+
-
</pre>
+
-
 
+
-
<h3> Example </h3>
+
-
 
+
-
<table border="1">
+
-
<tr>
+
-
<td> tata </td>
+
-
<td> toto </td>
+
-
</tr>
+
-
<tr>
+
-
<td> titi </td>
+
-
<td> tutu </td>
+
-
</tr>
+
-
</table>
+
-
 
+
-
<h1> Links </h1>
+
-
 
+
-
To add a link use the a tag:
+
-
 
+
-
<pre>&lt;a href="url to link">link name&lt;/a></pre>
+
-
 
+
-
<h2> Example </h2>
+
-
 
+
-
Go checkout <a href="https://2014.igem.org/Team:Evry">our wiki</a>.
+
-
 
+
-
<h1> Images </h1>
+
-
 
+
-
The two steps to add an image are:
+
-
 
+
-
<ol>
+
-
<li>Upload the image file using this page:<a href="https://2013.igem.org/Special:Upload">here</a></li>
+
-
<li>Use the img tag
+
-
</ol>
+
-
 
+
-
<pre>&lt;img src="<em>localisation of the image</em>" alt="<em>text to print if image not found</em>" /></pre>
+
-
 
+
-
<h2> Examples </h2>
+
-
 
+
-
<ul>
+
-
<li>Url of the image: https://static.igem.org/mediawiki/2013/c/c9/IronMinion.jpg </li>
+
-
<li> The image:</li>
+
-
</ul>
+
-
 
+
-
<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>
     </div>
-
    <center>Figure 1: Iron Minion.</center>
 
-
  </div>
 
-
  </div>
 
-
</div>
 
-
</div>
 
-
<h1> Image avec légende et texte aligné (code plus propre)</h1>
+
-
 
+
</body>
-
<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>
</html>
-
 
-
{{:Team:Evry/foot}}
 

Revision as of 17:56, 13 August 2014

Week 1

Week 1

HERE HERE

Retrieved from "http://2014.igem.org/Team:Evry/wiki-guidelines"