Team:Aachen/HTMLprimer

From 2014.igem.org

(Difference between revisions)
Line 44: Line 44:
<p>
<p>
-
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;)!
+
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>
Line 89: Line 89:
Therefore a section in HTML could look like:
Therefore a section in HTML could look like:
-
<textarea rows="5" cols="20" disabled>
+
<textarea rows="13" cols="20" disabled>
<h1>Big Header</h1>
<h1>Big Header</h1>
<h4>Small header (subcaption)</h4>
<h4>Small header (subcaption)</h4>
Line 135: Line 135:
<!-- 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;.
 +
<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>http://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:
 +
<textarea rows="2" cols="20" disabled>
 +
<a href="http://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.
 +
 +
<textarea rows="2" cols="20" disabled>
 +
<a href="http://2014.igem.org/Team:Aachen/" target="[_self|_target]">link</a>
 +
</textarea>
 +
 +
</p>
 +
<h5>Tables</h5>
 +
<a href="http://truben.no/latex/table/">truben</a>
<!-- TEXT ENDS HERE -->
<!-- TEXT ENDS HERE -->

Revision as of 23:03, 3 May 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>

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 http://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
truben
1. [In this sense, any biology related study program is meant.]