The simple HTML Design Guide

Html is ASCII text that contains some formatting instructions for the web browser. These formatting instructions are called tags. There are two types of tags: start and end tags. <starttag> </endtag>. The end tag looks like the start tag but contains a "/". A start tag can e.g. "start italic printing form here" and then you need of course later in the text a "stop italic printing", the end tag. However not all tags have and end tag. An example of such a tag is the line break (<br>) tag.

In the following you will learn the most important tags:

Heading

Inside LinuxFocus articles you should only use heading level 2 and level 3 tags.

<h2>heading level 2</h2>
will look like this:

heading level 2

<h3>heading level 3</h3>
will look like this:

heading level 3

Line breaks and paragraphs

<p>This is a paragraph. You can use <br>
inside the paragraph to cause a line break. Often you do not need paragraphs and you can just use two <br><br>

for a paragraph</p>

<p>This is a new paragraph. It's up to you if you prefer "p" or two line breaks <br><br>

Html is very easy to use</p>

Lists

<ul>
<li>I am a list item in an un-ordered list</li>
<li>I am second list item in an un-ordered list</li>
</ul>

This un-ordered list will look as follows:

I am a list item in an un-ordered list
I am second list item in an un-ordered list

<ol>
<li>I am a list item in an ordered list</li>
<li>I am second list item in an ordered list</li>
</ol>

This ordered list look as follows:

I am a list item in an ordered list
I am second list item in an ordered list

Bold and italic

<b>bold text</b>
bold text
<i>italic text</i>
italic text

Pre-formatted text

<pre>
This is pre-formatted text. All line breaks are preserved here.
You can use this for code examples. Watch however out that the
lines do not become too long (max 70 char) otherwise there
will be problems when people try to print this text.
</pre>

In LinuxFocus articles you can also use a tag called <pre class="code"> which will show pre-formatted text with a blue background. Like this:

<pre class="code">
This is pre-formatted text using the special 
LinuxFocus style with blue background.
</pre>

Tables

<table border="1">
<tr>
   <td>The "tr" starts a new table row.</td>
   <td>Each table row must contain a "td" (=table data) cell with
   the actual text</td>
</tr>
<tr>
   <td>second row.</td>
   <td> second table data in second row</td>
</tr>
</table>

The "tr" starts a new table row.	Each table row must contain a "td" (=table data) cell with the actual text
second row.	second table data in second row

Images

To include images you use the "img src..." tag. You can align them left or right:

<img src="../../common/images/lflogo_sbutton.gif" alt="LinuxFocus logo" width="143" height="45" align="left">

Links

An important feature of html is that you can create links to other pages. This is done with the "a href..." tag:
<a href="authguide.shtml">link to authguide.shtml</a>
It will look like this:
link to authguide.shtml