Back to Online View

Some simple html-rules for beginners

Feel free to learn from these rules, yet be aware that some of the are tailored to be used in the contect of this webpage!

A normal paragraph (<p>)

If you just want to write some text, start with <p>, which opens the paragraph (hence the p) and end with </p>. Once on our server, normal paragraphs are automatically displayed in the right font, size etc.

A heading (<h1>, <h2>, <h3>)

Big headings are opened with <h1> and closed with </1>. If they shall be lower level headings, use <h2> or even <h3>.

Just a linebreak (<br/>)

If you close your current paragraph with </p> then you start a new line. Depending on the formatting, there will also be some vertical space. If you just want to start a new line, use <br/> (break). Use this also in tables (they are explained further down): If you have some text in a cell of your table and you would like to separate it into two parts, do it with <br/>. If you use <p> and </p> in a table cell, the result may look a little bit different than what you expected.

A horizontal line (<hr/>)

To insert a horizontal line, use <hr/> (horizontal rule). The result looks like this:


It has this terrible 3D-shading by default. Therefore better use <hr noshade="noshade" />


Much better!

A list of things (<ul>, <ol>, <li>)

What kind of list? With bullets? Then open it with <ul> (unordered list). With numbers? Then use <ol> (ordered list). Be sure to close the list appropriately. Every item in the list is goes in between <ul> and </ul>. Items start with <li> and end with </li>.

A list in a list

More lists? If you want to start a new list within a list, do it like that: open the list item in which the new list starts with <li> and the begin your new list with <ul> or <ol>. Once your finished, close the list, close the preceding list item and go on.

A table

Oh-oh. That's a little bit more complicated. Tables are openend with <table> and closed with </table>. Any row in this table is opened with <tr> (table row) and closed with </tr>. Within every row, you have your cells which are inserted with <td> and </td> (table data). Thats it. BE SURE to use the same number of cells in every row!

Another thing: in the opening <table> tag, you have to place some specifiers: <table cellpadding="0" cellspacing="0" width="100%">. They set the distances between the table cells correctly and tell the webbrowser, how wide the table is going to be. In the above case its just as wide as the screen allows. If you want to have a fixed width, give it in pixels: width="567".

A picture

Even more complicated. The code looks like that:

<div class="floatright" width="">
<img src="filename.jpg" height="height in pixels" width="width in pixels" alt="short description of the picture for no-picture browsers" />
<p>Caption to the picture</p>
</div>

First question: Shall the picture float on the left or on the right side of the page? Depending on this, you use the class floatleft or floatright. If you want the picture to behave like a block, witout any text around it, then use the classes blockleft, blockright or blockcenter.

Italics? Bold?

This is done with <em> </em> (emphasis) or <b> </b> (bold)

Colors?

Wrap an empty tag around the words to be coloured: <span>hello world</span> Then give the <span> tag a style: <span style="color:red;">. For common colors you can use names like blue, green or yellow. For others you have to get the hex-number.

If you want to color a whole paragraph, you don't use <span> but give the style directly to <p>: <p style="color:#00FF00;">, which would be Lime.

Special characters

Like ä or è or & or €, you have to use special coding. If you are lucky and have a nice editor like Dreamweaver (advertisement!), then the program will help you. Otherwise you have to look for a list on the net. There are many helpful sites out there, just google your question and you will be helped.