Team:Aachen/HTMLprimer
From 2014.igem.org
Line 112: | Line 112: | ||
<tr class="topbt" align="center"> | <tr class="topbt" align="center"> | ||
<td class="topbt"> | <td class="topbt"> | ||
- | <a href="#top | + | <a href="#top">▲</a> |
</td> | </td> | ||
</tr> | </tr> | ||
Line 163: | Line 163: | ||
<a href="https://2014.igem.org/Team:Aachen/" target="[_self|_target]">link</a> | <a href="https://2014.igem.org/Team:Aachen/" target="[_self|_target]">link</a> | ||
</textarea> | </textarea> | ||
- | |||
</p> | </p> | ||
<h5>Tables</h5> | <h5>Tables</h5> | ||
- | <a href="http://truben.no/latex/table/"> | + | <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. | ||
+ | If you don't want the first row to be header-row, simply replace the <i><th></th></i> with <i><tr></tr></i>. | ||
+ | </br></br> | ||
+ | Please also change the start <i><table></i> to <i><class="contenttable"></i> such that the table gets represented as per our design. | ||
+ | Consequently a table should look like: | ||
+ | |||
+ | <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: | ||
+ | <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: | ||
+ | |||
+ | <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 --> | ||
Line 175: | Line 251: | ||
<tr class="topbt" align="center"> | <tr class="topbt" align="center"> | ||
<td class="topbt"> | <td class="topbt"> | ||
- | <a href="#top | + | <a href="#top">▲</a></td> |
- | </td> | + | |
</tr> | </tr> | ||
</table> | </table> | ||
Line 186: | Line 261: | ||
<!-- 3RD BLOCK ENDS HERE --> | <!-- 3RD BLOCK ENDS HERE --> | ||
- | <!-- | + | <!-- 3RD BLOCK STARTS HERE --> |
- | <table class="transbg | + | <table class="transbg" width="100%" cellspacing="0"> |
<tr> | <tr> | ||
<td></td> | <td></td> | ||
- | |||
- | |||
+ | <td align="center"> | ||
+ | <table class="transbg" width="975px" cellspacing="0"> | ||
+ | <tr> | ||
+ | <td width="95%" height="400px" align="center"> | ||
+ | <!-- TEXT STARTS HERE --> | ||
<!-- TEXT ENDS HERE --> | <!-- TEXT ENDS HERE --> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr><td></td></tr> | ||
+ | <tr class="topbt" align="center"> | ||
+ | <td class="topbt"> | ||
+ | <a href="#top">▲</a></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | |||
</td> | </td> | ||
<td></td> | <td></td> | ||
</tr> | </tr> | ||
</table> | </table> | ||
- | <!-- | + | <!-- 3RD BLOCK ENDS HERE --> |
+ | <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> | <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> |
Revision as of 23:25, 3 May 2014
|