Team:INSA-Lyon/notice

From 2014.igem.org

(Difference between revisions)
 
(37 intermediate revisions not shown)
Line 2: Line 2:
<html>
<html>
<head>
<head>
-
<link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:INSA-Lyon/css_contenu?action=raw&ctype=text/css" />
+
<link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:INSA-Lyon/css_soustitre?action=raw&ctype=text/css" />
</head>
</head>
Line 12: Line 12:
</div>
</div>
-
<div id="presentation">
+
<div id="presentation">
-
<p>Voici un petit guide pour vous permettre de remplir le wiki de manière la plus sereine possible :</p>
+
<p>Voici un petit guide pour vous permettre de remplir le wiki de manière la plus sereine possible :</p><br/>
 +
<p>1/ Vous devez tout d'abord vous logger en cliquant en haut à droite sur <b>log-in</b><br/>
 +
2/ Allez sur la page du wiki que vous souhaitez éditer<br/>
 +
3/ Ensuite placez vous en haut de la page et chercher à faire apparaitre la barre cachée tout en haut du wiki afin de trouver l'onglet <b>edit</b><br/>
 +
4/ Vous êtes alors ready to enter dans le fabuleux world du code html !!</p><br/><br/>
<h1>Comment est constituée une page ?</h1>
<h1>Comment est constituée une page ?</h1>
<pre>{{:Team:INSA-Lyon/template_head}} // Permet d'appeler le code pour le menu
<pre>{{:Team:INSA-Lyon/template_head}} // Permet d'appeler le code pour le menu
Line 30: Line 34:
</pre>
</pre>
-
 
+
<h6>Ne mettre le contenu qu'entre les balises &lt;div id="presentation"> et &lt;/div> </h6>
<h1>Les types de titres</h1>
<h1>Les types de titres</h1>
Line 61: Line 65:
ligne1&lt;br/>
ligne1&lt;br/>
ligne2</pre>
ligne2</pre>
 +
 +
<h1>Tirer un trait</h1>
 +
<pre>
 +
ligne1
 +
&lt;hr/>
 +
ligne2</pre>
 +
<h6> Exemple </h6>
 +
<p>ligne1<hr/>ligne2</p>
<h1>Positionnement du texte</h1>
<h1>Positionnement du texte</h1>
<p>Le texte est à gauche par défaut</p>
<p>Le texte est à gauche par défaut</p>
-
<b>Centrer</b>
+
<h5>Centrer</h5>
<pre>&lt;div align="center">Le texte&lt;/div></pre>
<pre>&lt;div align="center">Le texte&lt;/div></pre>
-
<b>Droite</b>
+
<h5>Droite</h5>
<pre>&lt;div align="right">Le texte&lt;/div></pre>
<pre>&lt;div align="right">Le texte&lt;/div></pre>
-
<b>Justifié</b>
+
<h5>Justifié</h5>
<pre>&lt;div align="justify">Le texte&lt;/div></pre>
<pre>&lt;div align="justify">Le texte&lt;/div></pre>
-
 
<h1>Les colones</h1>
<h1>Les colones</h1>
Line 83: Line 94:
<pre>&lt;u>texte souligné&lt;/u></pre>
<pre>&lt;u>texte souligné&lt;/u></pre>
-
<h1>Le listes</h1>
+
<h1>Les liens</h1>
 +
<pre>&lt;a href="url du lien">Clique ici&lt;/a></pre>
 +
<h6> Exemple </h6>
 +
Le lien de notre wiki c'est <a href="https://2014.igem.org/Team:INSA-Lyon">ici</a>
-
<b> Dotted </b>
+
<h1>Contenu déroulants</h1>
 +
<p>On ajoute "onclick="$('#id de la div que je veux ouvrir').slideToggle('slow')" à la balise voulue<br/>
 +
Attention, il faut bien penser à ranger son texte dans des ul et li</p>
-
Use the ul to create a list and the li tag to add an item:
+
<pre>
 +
&lt;ul style="list-style-type: none !important;">
 +
    &lt;li>&lt;a href="#contenu1" onclick="$('#contenu1').slideToggle('slow')">&lt;h1>TITRE 1&lt;/h1>&lt;/a>&lt;hr/>&lt;/li>
 +
          &lt;ul id="contenu1" style="list-style-type: none !important;display:none;">
 +
              &lt;li>ici votre contenu dans des &lt;p>&lt;/p> ou &lt;div>&lt;/div>&lt;/li>
 +
              &lt;li>blabla&lt;/li>
 +
          &lt;/ul>
 +
    &lt;li>&lt;a href="#contenu2" onclick="$('#contenu2').slideToggle('slow')">&lt;h1>TITRE 2&lt;/h1>&lt;/a>&lt;hr/>&lt;/li>
 +
          &lt;ul id="contenu2" style="list-style-type: none !important;display:none;">
 +
              &lt;li>blabla&lt;/li>
 +
              &lt;li>blabla&lt;/li>
 +
          &lt;/ul>
 +
    &lt;li>&lt;a href="#contenu3" onclick="$('#contenu3').slideToggle('slow')">&lt;h1>TITRE 3&lt;/h1>&lt;/a>&lt;hr/>&lt;/li>
 +
          &lt;ul id="contenu3" style="list-style-type: none !important;display:none;">
 +
              &lt;li>blabla&lt;/li>
 +
              &lt;li>blabla&lt;/li>
 +
          &lt;/ul>
 +
&lt;/ul>
 +
</pre>
 +
<h6>Exemples</h6>
 +
 +
<ul style="list-style-type: none !important;">
 +
<li><a href="#student" onclick="$('#student').slideToggle('slow')"><h1>TITRE 1</h1></a><hr/></br></br></li>
 +
<ul id="student" style="list-style-type: none !important;display:none;">
 +
<li>contenu</li>
 +
<li>contenu</li>
 +
</ul>
 +
<li><a href="#advisors" onclick="$('#advisors').slideToggle('slow')"><h1>TITRE 2</h1></a><hr/></br></br></li>
 +
<ul id="advisors" style="list-style-type: none !important;display:none;">
 +
<li>contenu</li>
 +
<li>contenu</li>
 +
</ul>
 +
<li><a href="#instructors" onclick="$('#instructors').slideToggle('slow')"><h1>TITRE 3</h1></a><hr/></br></br></li>
 +
<ul id="instructors" style="list-style-type: none !important;display:none;">
 +
<li>contenu</li>
 +
<li>contenu</li>
 +
</ul>
 +
</ul>
 +
 +
 +
<h1>Les vidéos (sans iframe)</h1>
 +
<pre>&lt;video controls poster="URL de l'image qu'on verra en premier" width="700">
 +
    &lt;source src="URL de la vidéo en .mp4" />
 +
    &lt;source src="URL de la vidéo en .webm" />
 +
&lt;/video>
 +
</pre>
 +
<h1>Les images</h1>
 +
<p>Pour ajouter une image :<br/>
 +
1. Ajouter l'image voulue à partir de cette page:<a href="https://2013.igem.org/Special:Upload">Upload file</a><br/>
 +
2. Copier l'URL de l'image (soit clique droit dessus, soit en clique gauche et copier l'URL dans le navigateur</p>
 +
 +
<pre>&lt;img src="<em>URL de l'image</em>" alt="<em>texte remplaçant l'image si jamais elle ne charge pas</em>"
 +
width="taille de l'image en pixels(facultatif)" />
 +
</pre>
 +
 +
<h6>Exemples</h6>
 +
 +
<pre>&lt;img src="https://static.igem.org/mediawiki/2014/4/4f/Insa_labo.jpg" alt="les filles au labo"
 +
width="500px"/>
 +
</pre>
 +
 +
<ul>
 +
<li>URL de l'image: https://static.igem.org/mediawiki/2014/4/4f/Insa_labo.jpg </li>
 +
<li>L'image:</li>
 +
</ul>
 +
<img src="https://static.igem.org/mediawiki/2014/4/4f/Insa_labo.jpg" alt="les filles au labo" width="500px"/>
 +
 +
 +
<p>Quelques propriétés pour vos images :</p>
 +
<ul>
 +
<li>Largeur de l'image : <pre>width="taille en px"</pre></li>
 +
<li>Hauteur de l'image : <pre>height="taille en px"</pre></li>
 +
<li>Bordure : <pre>style="border: 2px solid black;"</pre>Ici la bordure fera 2px de large, sera continue et noire</li>
 +
<pre>&lt;img src="https://static.igem.org/mediawiki/2014/4/4f/Insa_labo.jpg" alt="les filles au labo"
 +
width="500px"/></pre>
 +
<h1>Les listes</h1>
<pre>
<pre>
&lt;ul>
&lt;ul>
Line 97: Line 188:
</pre>
</pre>
-
<h3> Example </h3>
+
<h6> Exemple </h6>
<ul>
<ul>
Line 105: Line 196:
</ul>
</ul>
-
<h2> Numbered </h2>
+
<h5> Numérotée</h5>
-
 
+
-
Use the ol to create a list and the li tag to add an item:
+
-
 
+
<pre>
<pre>
&lt;ol>
&lt;ol>
Line 117: Line 205:
</pre>
</pre>
-
<h3> Example </h3>
+
<h6> Exemple </h6>
<ol>
<ol>
Line 125: Line 213:
</ol>
</ol>
-
<h1> Arrays </h1>
+
<h1>Les tableaux</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>
<pre>
&lt;table>
&lt;table>
&lt;tr>
&lt;tr>
-
   &lt;td>cell1&lt;/td>
+
   &lt;td>tata&lt;/td>
-
   &lt;td>cell2&lt;/td>
+
   &lt;td>toto&lt;/td>
   ...
   ...
&lt;/tr>
&lt;/tr>
&lt;tr>
&lt;tr>
-
...
+
  &lt;td>titi&lt;/td>
 +
  &lt;td>tutu&lt;/td>
&lt;/tr>
&lt;/tr>
...
...
Line 147: Line 230:
</pre>
</pre>
-
<h2> Example </h2>
+
<h6>Exemple</h6>
<table>
<table>
Line 160: Line 243:
</table>
</table>
-
<h2> Borders </h2>
+
<h5>Avec bordures</h5>
-
 
+
-
To add border to an array use the attribute border="1":
+
<pre>
<pre>
Line 170: Line 251:
</pre>
</pre>
-
<h3> Example </h3>
+
<h6>Exemple</h6>
<table border="1">
<table border="1">
Line 182: Line 263:
</tr>
</tr>
</table>
</table>
 +
</div>
-
<h1> Links </h1>
 
-
To add a link use the a tag:
+
<div id="presentation">
-
<pre>&lt;a href="url to link">link name&lt;/a></pre>
 
-
<h2> Example </h2>
 
-
Go checkout <a href="https://2013.igem.org/Team:Evry">our wiki</a>.
+
<ul style="list-style-type: none !important;">
-
<h1> Images </h1>
 
-
The two steps to add an image are:
+
 +
    <li><a href="#contenu1" onclick="$('#contenu1').slideToggle('slow')"><h1><img src="https://static.igem.org/mediawiki/2014/d/d5/Insa_fleche_titre.png" width="20px" />TITLE 1</h1></a><hr/></li>
 +
          <ul id="contenu1" style="list-style-type: none !important;display:none;">
 +
              <li>
 +
<p>
 +
TEXT
 +
</p></li>
 +
          </ul>
-
<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>
+
    <li><a href="#contenu2" onclick="$('#contenu2').slideToggle('slow')"><h1><img src="https://static.igem.org/mediawiki/2014/d/d5/Insa_fleche_titre.png" width="20px" />TITLE 2</h1></a><hr/></li>
 +
          <ul id="contenu2" style="list-style-type: none !important;display:none;">
 +
              <li>
 +
<p>
 +
TEXT
 +
</p></li>
 +
          </ul>
-
<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"/>
+
    <li><a href="#contenu3" onclick="$('#contenu3').slideToggle('slow')"><h1><img src="https://static.igem.org/mediawiki/2014/d/d5/Insa_fleche_titre.png" width="20px" />TITLE 3</h1></a><hr/></li>
 +
          <ul id="contenu3" style="list-style-type: none !important;display:none;">
 +
              <li>
 +
<p>
 +
TEXT
 +
</p></li>
 +
          </ul>
 +
</div>
-
 
-
 
-
</div>
 

Latest revision as of 23:09, 17 October 2014

Curly'on - IGEM 2014 INSA-LYON

IGEM

Je comprends riiiiiiennnnnn

Voici un petit guide pour vous permettre de remplir le wiki de manière la plus sereine possible :


1/ Vous devez tout d'abord vous logger en cliquant en haut à droite sur log-in
2/ Allez sur la page du wiki que vous souhaitez éditer
3/ Ensuite placez vous en haut de la page et chercher à faire apparaitre la barre cachée tout en haut du wiki afin de trouver l'onglet edit
4/ Vous êtes alors ready to enter dans le fabuleux world du code html !!



Comment est constituée une page ?

{{:Team:INSA-Lyon/template_head}} // Permet d'appeler le code pour le menu
<html>
<head>
<link rel="stylesheet" type="text/css" 
href="https://2014.igem.org/Team:INSA-Lyon/css_contenu?action=raw&ctype=text/css" /> 
// ça c'est pour appeler le CSS
</head> 

// Là, le contenu du site

</html>
{{:Team:INSA-Lyon/template_footer}} // Permet d'appeler le code du footer
Ne mettre le contenu qu'entre les balises <div id="presentation"> et </div>

Les types de titres

Pour les titres importants de vos pages

<h1>Ici, un titre</h1>

Exemple



Pour le titre de la page d'accueil (curly'on)
C'est normal si l'exemple n’apparaît pas car la typo est blanche.

<h2>Ici, un titre</h2>

Exemple



Pour les titres du footer
C'est normal si l'exemple n’apparaît pas car la typo est blanche.

<h3>Ici, un titre</h3>

Exemple



Pour les titres des pages contenu (Project/results/...)
C'est normal si l'exemple n’apparaît pas car la typo est blanche.

<h4>Ici, un titre</h4>

Exemple



Pour les sous-titres importants de vos pages

<h5>Ici, un titre</h5>
Exemple


Pour les petits sous-titres importants de vos pages

<h6>Ici, un titre</h6>
Exemple


Saut de ligne

ligne1<br/>
ligne2

Tirer un trait

ligne1
<hr/>
ligne2
Exemple

ligne1


ligne2

Positionnement du texte

Le texte est à gauche par défaut

Centrer
<div align="center">Le texte</div>
Droite
<div align="right">Le texte</div>
Justifié
<div align="justify">Le texte</div>

Les colones

Pour les pages contenu, créer deux colones de texte permet d'améliorer la lecture

<p class="colone1">Ici le texte de la colone de gauche</p>
<p class="colone2">Ici, le texte de la colone de droite</p>

Pour un texte sans colones, placer le texte entre les balises <p>le texte</p>

Formatage du texte

<i>texte en italique</i>
<b>texte en gras</b>
<u>texte souligné</u>

Les liens

<a href="url du lien">Clique ici</a>
Exemple
Le lien de notre wiki c'est ici

Contenu déroulants

On ajoute "onclick="$('#id de la div que je veux ouvrir').slideToggle('slow')" à la balise voulue
Attention, il faut bien penser à ranger son texte dans des ul et li

<ul style="list-style-type: none !important;">		
     <li><a href="#contenu1" onclick="$('#contenu1').slideToggle('slow')"><h1>TITRE 1</h1></a><hr/></li>
          <ul id="contenu1" style="list-style-type: none !important;display:none;">
               <li>ici votre contenu dans des <p></p> ou <div></div></li>
               <li>blabla</li>
          </ul>
     <li><a href="#contenu2" onclick="$('#contenu2').slideToggle('slow')"><h1>TITRE 2</h1></a><hr/></li>
          <ul id="contenu2" style="list-style-type: none !important;display:none;">
               <li>blabla</li>
               <li>blabla</li>
          </ul>
     <li><a href="#contenu3" onclick="$('#contenu3').slideToggle('slow')"><h1>TITRE 3</h1></a><hr/></li>
          <ul id="contenu3" style="list-style-type: none !important;display:none;">
               <li>blabla</li>
               <li>blabla</li>
          </ul>
</ul>
Exemples

Les vidéos (sans iframe)

<video controls poster="URL de l'image qu'on verra en premier" width="700">
    <source src="URL de la vidéo en .mp4" />
    <source src="URL de la vidéo en .webm" />
</video>

Les images

Pour ajouter une image :
1. Ajouter l'image voulue à partir de cette page:Upload file
2. Copier l'URL de l'image (soit clique droit dessus, soit en clique gauche et copier l'URL dans le navigateur

<img src="URL de l'image" alt="texte remplaçant l'image si jamais elle ne charge pas" 
width="taille de l'image en pixels(facultatif)" />
Exemples
<img src="https://static.igem.org/mediawiki/2014/4/4f/Insa_labo.jpg" alt="les filles au labo" 
width="500px"/>
  • URL de l'image: https://static.igem.org/mediawiki/2014/4/4f/Insa_labo.jpg
  • L'image:
les filles au labo

Quelques propriétés pour vos images :

  • Largeur de l'image :
    width="taille en px"
  • Hauteur de l'image :
    height="taille en px"
  • Bordure :
    style="border: 2px solid black;"
    Ici la bordure fera 2px de large, sera continue et noire
  • <img src="https://static.igem.org/mediawiki/2014/4/4f/Insa_labo.jpg" alt="les filles au labo" 
    width="500px"/>

    Les listes

    <ul>
    <li> item 1 
    <li> item 2 
    ..
    </ul>
    
    Exemple
    • item 1
    • item 2
    • ..
    Numérotée
    <ol>
    <li> item 1 
    <li> item 2 
    ..
    </ol>
    
    Exemple
    1. item 1
    2. item 2
    3. ..

    Les tableaux

    <table>
    <tr>
      <td>tata</td>
      <td>toto</td>
      ...
    </tr>
    <tr>
      <td>titi</td>
      <td>tutu</td>
    </tr>
    ...
    </table>
    
    Exemple
    tata toto
    titi tutu
    Avec bordures
    <table border="1">
    ...
    </table>
    
    Exemple
    tata toto
    titi tutu