Team:Aachen/HTMLprimer

From 2014.igem.org

(Difference between revisions)
m
 
(21 intermediate revisions not shown)
Line 16: Line 16:
<tr>
<tr>
<td></td>
<td></td>
-
<td width="975px" align="center">
+
<td class="contentWidth" align="center">
-
<table class="transbg" width="975px"  cellspacing="0">
+
<table class="transbg" width="100%"  cellspacing="0">
<tr>
<tr>
-
<td class="contentcell" width="95%" height="400px" align="center">  
+
<td class="contentcell" width="95%" align="center">  
<!-- TEXT STARTS HERE -->
<!-- TEXT STARTS HERE -->
 +
 +
<h1>iGEM 2014 HTML Primer</h1>
<h1>iGEM 2014 HTML Primer</h1>
Line 32: Line 34:
<p>
<p>
-
Also for our all convenience, please restrict yourself to only edit text inbetween the following tags. If you happen to edit something other this is at your own risk, and most likely you will have to repair it on your own.
+
Also for our all convenience, please restrict yourself to only edit text inbetween the following tags. If you happen to edit something other this is at your own risk, and most likely you will have to repair it on your own.<br>
-
<textarea rows="5" cols="20" disabled>
+
<textarea rows="8" cols="20" disabled>
-
<!-- TEXT STARTS HERE -->
+
<!--====================================================================-->
 +
<!--====================================================================-->
 +
<!--==================== TEXT STARTS HERE ==============================-->
-
<!-- TEXT ENDS HERE -->
+
 
 +
<!--===================== TEXT ENDS HERE ===============================-->
 +
<!--====================================================================-->
 +
<!--====================================================================-->
</textarea>
</textarea>
Line 44: Line 51:
<p>
<p>
-
As a general side note. In HTML you <b>must</b> have (requirement!) a closing tag (starting &lt;/ <it>something</it>&gt) for each opened tag (&lt;<it>something</it>&gt)!
+
As a general side note. In HTML you <b>must</b> have (requirement!) a closing tag (&lt;/<i>something</i>&gt;) for each opened tag (&lt;<i>something</i>&gt;)! I highly recommend to write the closing tag directly when you open a tag. That way you don't forget to add the closing tag ;). Also write the closing tags in the reverse order of the opening tags (just like the order of DNA): &lt;a&gt; &lt;b&gt;  &lt;/b&gt; &lt;/a&gt;
 +
</p>
 +
 
 +
<p>
 +
There is the possibility to use MediaWiki syntax within the text area. Therefore simply change the above code to<br>
 +
 
 +
<textarea rows="11" cols="20" disabled>
 +
<!--====================================================================-->
 +
<!--====================================================================-->
 +
&lt;/html&gt;
 +
<!--==================== TEXT STARTS HERE ==============================-->
 +
 
 +
 
 +
<!--===================== TEXT ENDS HERE ===============================-->
 +
&lt;html&gt;
 +
<!--====================================================================-->
 +
<!--====================================================================-->
 +
</textarea>
 +
<br>
 +
but please keep in mind you shouldn't ask Markus to repair anything that's broken by using MediaWiki-Syntax. Known volunteers are so far: Michael.</br>
 +
Reverse argument: If you break <i>anything</i> in the opened HTML-scope, feel free to ask Markus.
</p>
</p>
</td>   
</td>   
</tr>
</tr>
-
<tr><td></td></tr>
+
<tr><td></html>{{Team:Aachen/JumpUp}}<html></td></tr>
-
<tr  class="topbt" align="center">
+
 
-
<td class="topbt">
+
-
<a></a>
+
-
</td>
+
-
</tr>
+
</table>
</table>
Line 67: Line 90:
<tr>
<tr>
<td></td>
<td></td>
-
<td width="975px" align="center">
+
<td class="contentWidth" align="center">
-
<table class="transbg" width="975px"  cellspacing="0">
+
<table class="transbg" width="100%"  cellspacing="0">
<tr>
<tr>
-
<td class="contentcell" width="95%" height="400px" align="center">  
+
<td class="contentcell" width="95%" align="center">  
<!-- TEXT STARTS HERE -->
<!-- TEXT STARTS HERE -->
Line 78: Line 101:
<p>
<p>
HTML knows some structuring elements. This section will tell you something about headings and paragraphs.
HTML knows some structuring elements. This section will tell you something about headings and paragraphs.
-
</br>
+
<br>
-
</br>
+
<br>
-
In HTML it is fairly easy to create a header. You can use the &lt;h1&gt; tags, where &lt;h1&gt creates the biggest header, and &lt;h6&gt is the smallest.
+
In HTML it is fairly easy to create a header. You can use the &lt;h1&gt; tags, where &lt;h1&gt; creates the biggest header, and &lt;h6&gt; is the smallest.<br><br>
 +
For creating line breaks simply use &lt;/br&gt; - <b>no opening</b> tag is needed!<br>
 +
As in every scientific publiction you should not use too many line breaks. If you start a new paragraph, open a new paragraph instead.
 +
</p>
 +
 
 +
<p>
 +
Paragraphs, as in continuous text, should be within the &lt;p&gt; ... &lt;/p&gt; tag. <br><br>
 +
Therefore a section in HTML could look like:<br>
 +
 
 +
<textarea rows="13" cols="20" disabled>
 +
<h1>Big Header</h1>
 +
<h4>Small header (subcaption)</h4>
 +
 
 +
<p>
 +
Introduction text ...
 +
</p>
 +
 
 +
<p>
 +
Some other, unrelated text.
 +
</p>
 +
 
 +
<!-- TEXT ENDS HERE -->
 +
</textarea>
</p>
</p>
Line 88: Line 133:
</tr>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
-
<tr class="topbt" align="center">
+
<tr><td></html>{{Team:Aachen/JumpUp}}<html></td></tr>
-
<td class="topbt">  
+
 
-
<a href="#top" style="style="font-size:20px;">▲</a>
+
-
</td>
+
-
</tr>
+
</table>
</table>
Line 105: Line 147:
<tr>
<tr>
<td></td>
<td></td>
 +
<td class="contentWidth" align="center">
-
<td align="center">
+
<table class="transbg" width="100%"  cellspacing="0">
-
 
+
-
<table class="transbg" width="975px"  cellspacing="0">
+
<tr>
<tr>
-
<td width="95%" height="400px" align="center">  
+
<td class="contentcell" width="95%" align="center">  
<!-- TEXT STARTS HERE -->
<!-- TEXT STARTS HERE -->
 +
<h4>Including Floats into your text</h4>
 +
<p>
 +
Including floats (figures, tables, etc.) into HTML unfortunately is not as straight forward as, for instance, in \LaTeX.
 +
Let's start with the least complicated stuff, and then get more involved.
 +
Therefore first we're linking websites, then including images, then tables and figures.
 +
</p>
 +
 +
<h5>Linking (other) websites</h5>
 +
<p>
 +
In HTML there's no distinction between linking to some place on your own website, or to a foreign website. Everything uses the same construct (thank god!) which starts with &lt;a ...&gt;&lt;/a&gt;.<br>
 +
<textarea rows="5" cols="20" disabled>
 +
<a href="address">text</a>
 +
</textarea>
 +
 +
The address is either the <i>name</i> of an object (header, paragraph, block, ...) or the <i>URL</i> of a website, for instance <i>https://2014.igem.org/Team:Aachen/</i>.
 +
If you link to any of our sub-pages, please use the full URL.
 +
The text within the tag is the clickable link. You should keep that as short as possible, but as long as necessary!<br>
 +
Therefore a link to our start page would look like:<br>
 +
<textarea rows="2" cols="20" disabled>
 +
<a href="https://2014.igem.org/Team:Aachen/">link</a>
 +
</textarea>
 +
 +
If you would like to specify the destination of the link, eg. loading in the same frame/windows/tab or in a new tab/window, you can choose between <i>_blank</i> for a new tab/window or <i>_self</i> for the current frame/window/tab.<br>
 +
 +
<textarea rows="2" cols="20" disabled>
 +
<a href="https://2014.igem.org/Team:Aachen/" target="[_self|_target]">link</a>
 +
</textarea>
 +
</p>
 +
 +
<h5>Tables</h5>
 +
<p>
 +
Creating tables in HTML is a tedious task.
 +
Unfortunately you will most likely have quite a few tables.
 +
Therefore please use the following ( \LaTeX ) <a href="http://truben.no/latex/table/">table generator</a>, which also supports exporting the table as HTML. Use this for Excel-to-wiki conversion: <a href="http://excel2wiki.net">here</a>
 +
If you don't want the first row to be header-row, simply replace the <i>&lt;th&gt;&lt;/th&gt;</i> with <i>&lt;tr&gt;&lt;/tr&gt;</i>.
 +
<br><br>
 +
Please also change the start <i>&lt;table&gt;</i> to <i>&lt;class="contenttable"&gt;</i> such that the table gets represented as per our design.
 +
Consequently a table should look like:<br>
 +
 +
<textarea rows="14" cols="20" disabled>
 +
 +
<table class="contenttable">
 +
    <tr>
 +
        <th>header1</th>
 +
        <th>header2</th>
 +
        <th>header3</th>
 +
    </tr>
 +
    <tr>
 +
        <td>content1</td>
 +
        <td>content2</td>
 +
        <td>content3</td>
 +
    </tr>
 +
</table>
 +
 +
</textarea>
 +
 +
<table class="contenttable">
 +
    <tr>
 +
        <th>header1</th>
 +
        <th>header2</th>
 +
        <th>header3</th>
 +
    </tr>
 +
    <tr>
 +
        <td>content1</td>
 +
        <td>content2</td>
 +
        <td>content3</td>
 +
    </tr>
 +
</table>
 +
 +
</p>
 +
 +
<h5>Including Images</h5>
 +
 +
<p>
 +
You can include images simply by using the following code:<br>
 +
<textarea rows="3" cols="20" disabled>
 +
 +
<img src="https://static.igem.org/mediawiki/2014/b/b5/Dnastrand3.png">
 +
 +
</textarea>
 +
 +
Please upload images with fileformat <i>Aachen_descr(_date).ext</i> on <a href="https://2014.igem.org/Special:Upload" target="_blank">the iGEM Server</a>.
 +
<i>descr</i> stands for a short description together with an optional date in any of the allowed <i>ext</i>ensions.
 +
</p>
 +
 +
<p>
 +
Position your images adequatly. In most cases you will either need to align them left, right or as center. Please try to avoid having floating images as they usually get too small to see something. Please serve yourself with the example code:
 +
<br>
 +
<textarea rows="16" cols="20" disabled>
 +
left align:
 +
<div style="text-align: left"><img src="https://static.igem.org/mediawiki/2014/6/68/Aachen_Team_Logo_01.png" width="100" /></div>
 +
 +
center align:
 +
<div style="text-align: center"><img src="https://static.igem.org/mediawiki/2014/6/68/Aachen_Team_Logo_01.png" width="100" /></div>
 +
 +
right align:
 +
<div style="text-align: right"><img src="https://static.igem.org/mediawiki/2014/6/68/Aachen_Team_Logo_01.png" width="100" /></div>
 +
 +
left float:
 +
<img style="float: left; margin: 0px 15px 15px 0px;" src="https://static.igem.org/mediawiki/2014/6/68/Aachen_Team_Logo_01.png" width="100" />
 +
 +
right float:
 +
<img style="float: right; margin: 0px 0px 15px 15px;" src="https://static.igem.org/mediawiki/2014/6/68/Aachen_Team_Logo_01.png" width="100" />
 +
</textarea>
 +
 +
If you want something special, <a href="http://google.de">google</a> is your friend.
 +
 +
</p>
<!-- TEXT ENDS HERE -->
<!-- TEXT ENDS HERE -->
</td>   
</td>   
</tr>
</tr>
-
<tr><td></td></tr>
+
<tr><td></html>{{Team:Aachen/JumpUp}}<html></td></tr>
-
<tr class="topbt" align="center">
+
 
-
<td class="topbt">
+
-
<a href="#top" style="style="font-size:20px;">▲</a>
+
-
</td>
+
-
</tr>
+
</table>
</table>
Line 132: Line 277:
<!-- 3RD BLOCK ENDS HERE -->
<!-- 3RD BLOCK ENDS HERE -->
-
<!-- FINAL BLOCK STARTS HERE -->
+
<!-- 3RD BLOCK STARTS HERE -->
-
<table class="transbg"  id="firstblock" width="100%"  cellspacing="0" height="200px">
+
<table class="transbg" width="100%"  cellspacing="0">
<tr>
<tr>
<td></td>
<td></td>
-
<td width="975px" align="center">
+
<td class="contentWidth" align="center">
 +
 
 +
<table class="transbg" width="100%"  cellspacing="0">
 +
<tr>
 +
<td class="contentcell" width="95%" align="center">  
<!-- TEXT STARTS HERE -->
<!-- TEXT STARTS HERE -->
 +
<p><b>UPDATE:</b> Some things changed and the template got a lot easier. Now you can simply use:</br>
 +
<textarea rows="11" cols="20" disabled>
 +
__NOTOC__
 +
{{Team:Aachen/Header}}
 +
= Headline =
 +
This page is awaiting synthesis.
 +
 +
{{Team:Aachen/Footer}}
 +
</textarea>
 +
to create a page in our wiki.</br>
 +
If you want to use HTML do it like this:</br>
 +
<textarea rows="11" cols="20" disabled>
 +
__NOTOC__
 +
{{Team:Aachen/Header}}
 +
 +
&lt;html&gt;
 +
 +
<h1>Headline</h1>
 +
<p>This page is awaiting synthesis.</p>
 +
 +
&lt;/html&gt;
 +
 +
{{Team:Aachen/Footer}}
 +
</textarea>
 +
</p>
<!-- TEXT ENDS HERE -->
<!-- TEXT ENDS HERE -->
 +
</td> 
 +
</tr>
 +
<tr><td></td></tr>
 +
<tr><td></html>{{Team:Aachen/JumpUp}}<html></td></tr>
 +
 +
</table>
 +
</td>
</td>
<td></td>
<td></td>
</tr>
</tr>
</table>
</table>
-
<!-- FINAL BLOCK ENDS HERE -->
+
<!-- 3RD BLOCK ENDS HERE -->
-
<sup id="fn1">1. [In this sense, any biology related study program is meant.]<a href="#ref1" title="Jump back to footnote 1 in the text."></a></sup>
+
<center>
 +
<sup id="fn1">1. [In this sense, any biology related study program is meant.]<a href="#ref1" title="Jump back to footnote 1 in the text.">?</a></sup>
 +
</center>
</html>
</html>

Latest revision as of 09:42, 25 July 2014

iGEM 2014 HTML Primer

everything a biologist1 needs to know

You will find an empty template of our website always here. Please do not alter that version. You can see who altered a file the last. So ^_^ beware!

Also for our all convenience, please restrict yourself to only edit text inbetween the following tags. If you happen to edit something other this is at your own risk, and most likely you will have to repair it on your own.
Please do not alter any of the include files like footer or header!

As a general side note. In HTML you must have (requirement!) a closing tag (</something>) for each opened tag (<something>)! I highly recommend to write the closing tag directly when you open a tag. That way you don't forget to add the closing tag ;). Also write the closing tags in the reverse order of the opening tags (just like the order of DNA): <a> <b> </b> </a>

There is the possibility to use MediaWiki syntax within the text area. Therefore simply change the above code to

but please keep in mind you shouldn't ask Markus to repair anything that's broken by using MediaWiki-Syntax. Known volunteers are so far: Michael.
Reverse argument: If you break anything in the opened HTML-scope, feel free to ask Markus.

Structuring your text

HTML knows some structuring elements. This section will tell you something about headings and paragraphs.

In HTML it is fairly easy to create a header. You can use the <h1> tags, where <h1> creates the biggest header, and <h6> is the smallest.

For creating line breaks simply use </br> - no opening tag is needed!
As in every scientific publiction you should not use too many line breaks. If you start a new paragraph, open a new paragraph instead.

Paragraphs, as in continuous text, should be within the <p> ... </p> tag.

Therefore a section in HTML could look like:

Including Floats into your text

Including floats (figures, tables, etc.) into HTML unfortunately is not as straight forward as, for instance, in \LaTeX. Let's start with the least complicated stuff, and then get more involved. Therefore first we're linking websites, then including images, then tables and figures.

Linking (other) websites

In HTML there's no distinction between linking to some place on your own website, or to a foreign website. Everything uses the same construct (thank god!) which starts with <a ...></a>.
The address is either the name of an object (header, paragraph, block, ...) or the URL of a website, for instance https://2014.igem.org/Team:Aachen/. If you link to any of our sub-pages, please use the full URL. The text within the tag is the clickable link. You should keep that as short as possible, but as long as necessary!
Therefore a link to our start page would look like:
If you would like to specify the destination of the link, eg. loading in the same frame/windows/tab or in a new tab/window, you can choose between _blank for a new tab/window or _self for the current frame/window/tab.

Tables

Creating tables in HTML is a tedious task. Unfortunately you will most likely have quite a few tables. Therefore please use the following ( \LaTeX ) table generator, which also supports exporting the table as HTML. Use this for Excel-to-wiki conversion: here If you don't want the first row to be header-row, simply replace the <th></th> with <tr></tr>.

Please also change the start <table> to <class="contenttable"> such that the table gets represented as per our design. Consequently a table should look like:

header1 header2 header3
content1 content2 content3

Including Images

You can include images simply by using the following code:
Please upload images with fileformat Aachen_descr(_date).ext on the iGEM Server. descr stands for a short description together with an optional date in any of the allowed extensions.

Position your images adequatly. In most cases you will either need to align them left, right or as center. Please try to avoid having floating images as they usually get too small to see something. Please serve yourself with the example code:
If you want something special, google is your friend.

UPDATE: Some things changed and the template got a lot easier. Now you can simply use:
to create a page in our wiki.
If you want to use HTML do it like this:

1. [In this sense, any biology related study program is meant.]?