Team:Evry/wiki-guidelines
From 2014.igem.org
(Difference between revisions)
Line 38: | Line 38: | ||
</nav> | </nav> | ||
</header> | </header> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</section> | </section> | ||
</html> | </html> |
Revision as of 13:14, 14 August 2014
In order to keep our wiki clean please follow these guidelines when writing HTML code
https://2014.igem.org/Team:Evry/Notebook/project_name/weekN
For project_name and week number see below.
DO NOT FORGET TO:
Project's names are:
Week numbering is the following (from monday to sunday):
You should end up with a page like: this page
line2
Left is default value
coucou <- bold
coucou <- underlined
How create a new NOTEBOOK page
Open a new page with the name of url choosen, URL are as follows:https://2014.igem.org/Team:Evry/Notebook/project_name/weekN
For project_name and week number see below.
HTML tag and template
First of all, specify the template and put the html tag around your document:<html> <head> </head> <body> <div class="week"> <h4>Week 1 <div class="project_Name"> <p> HERE HERE </p> </div> </div> </body> </html>
DO NOT FORGET TO:
- Change the week number
- Change the project name
Project's names are:
- RNAseq
- Transformation
- Sensing
Week numbering is the following (from monday to sunday):
- week1 -> 01/07 - 06/07
- week2 -> 07/07 - 13/07
- week3 -> 14/07 - 20/07
- week4 -> 21/07 - 27/07
- week5 -> 28/07 - 03/08
- week6 -> 04/08 - 10/08
- week7 -> 11/08 - 17/08
- week8 -> 18/08 - 24/08
- week9 -> 25/08 - 31/08
- week10 -> 01/09 - 07/09
- week11 -> 08/09 - 14/09
- week12 -> 15/09 - 21/09
- week13 -> 22/09 - 28/09
- week14 -> 29/09 - 05/10
- week15 -> 06/10 - 12/10
- week16 -> 13/10 - 19/10 17/10 WIKI-FREEZE
You should end up with a page like: this page
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
line1line2
Alignment
To left, center or right alignmentLeft 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 <- italiccoucou <- 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
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
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