Team:Aachen/HTMLprimer
From 2014.igem.org
Line 32: | Line 32: | ||
<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="8" cols="20" disabled> | <textarea rows="8" cols="20" disabled> | ||
Line 50: | Line 50: | ||
<p> | <p> | ||
As a general side note. In HTML you <b>must</b> have (requirement!) a closing tag (</<i>something</i>>) for each opened tag (<<i>something</i>>)! 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> | As a general side note. In HTML you <b>must</b> have (requirement!) a closing tag (</<i>something</i>>) for each opened tag (<<i>something</i>>)! 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> | ||
+ | </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> | ||
+ | <!--====================================================================--> | ||
+ | <!--====================================================================--> | ||
+ | </html> | ||
+ | <!--==================== TEXT STARTS HERE ==============================--> | ||
+ | |||
+ | |||
+ | <!--===================== TEXT ENDS HERE ===============================--> | ||
+ | <html> | ||
+ | <!--====================================================================--> | ||
+ | <!--====================================================================--> | ||
+ | </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. | ||
</p> | </p> | ||
Line 83: | Line 102: | ||
<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> |
- | 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.< | + | 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.<br><br> |
- | For creating line breaks simply use </br> - <b>no opening</b> tag is needed!< | + | For creating line breaks simply use </br> - <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. | 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> | ||
<p> | <p> | ||
- | Paragraphs, as in continuous text, should be within the <p> ... </p> tag. < | + | Paragraphs, as in continuous text, should be within the <p> ... </p> tag. <br><br> |
- | Therefore a section in HTML could look like: | + | Therefore a section in HTML could look like:<br> |
<textarea rows="13" cols="20" disabled> | <textarea rows="13" cols="20" disabled> | ||
Line 117: | Line 136: | ||
<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 150: | Line 169: | ||
<h5>Linking (other) websites</h5> | <h5>Linking (other) websites</h5> | ||
<p> | <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 <a ...></a>. | + | 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>.<br> |
<textarea rows="5" cols="20" disabled> | <textarea rows="5" cols="20" disabled> | ||
<a href="address">text</a> | <a href="address">text</a> | ||
Line 157: | Line 176: | ||
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>. | 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. | 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!< | + | 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: | + | Therefore a link to our start page would look like:<br> |
<textarea rows="2" cols="20" disabled> | <textarea rows="2" cols="20" disabled> | ||
<a href="https://2014.igem.org/Team:Aachen/">link</a> | <a href="https://2014.igem.org/Team:Aachen/">link</a> | ||
</textarea> | </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. | + | 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> | <textarea rows="2" cols="20" disabled> | ||
Line 176: | Line 195: | ||
Therefore please use the following ( $\LaTeX$ ) <a href="http://truben.no/latex/table/">table generator</a>, which also supports exporting the table as HTML. | 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>. | 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. | 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: | + | Consequently a table should look like:<br> |
<textarea rows="14" cols="20" disabled> | <textarea rows="14" cols="20" disabled> | ||
Line 215: | Line 234: | ||
<p> | <p> | ||
- | You can include images simply by using the following code: | + | You can include images simply by using the following code:<br> |
<textarea rows="3" cols="20" disabled> | <textarea rows="3" cols="20" disabled> | ||
Line 228: | Line 247: | ||
<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: | 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> | <textarea rows="16" cols="20" disabled> | ||
left align: | left align: | ||
Line 256: | Line 275: | ||
<tr class="topbt" align="center"> | <tr class="topbt" align="center"> | ||
<td class="topbt"> | <td class="topbt"> | ||
- | <a href="#top"> | + | <a href="#top">?</a></td> |
</tr> | </tr> | ||
</table> | </table> | ||
Line 284: | Line 303: | ||
<tr class="topbt" align="center"> | <tr class="topbt" align="center"> | ||
<td class="topbt"> | <td class="topbt"> | ||
- | <a href="#top"> | + | <a href="#top">?</a></td> |
</tr> | </tr> | ||
</table> | </table> | ||
Line 295: | Line 314: | ||
<center> | <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."> | + | <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> | </center> | ||
Revision as of 09:32, 4 May 2014
|