HTML Component

Help and advice on the use of the HTML Component in the Document Content page of the MKDoc 1.0 editor interface.

An MKDoc document can have as many HTML components as you want and you can use whatever HTML elements that have been allowed for your particular site within the HTML component.

This is what a MKDoc HTML Component looks like:

The Up and Down form elements can be used to move the component up and down the page. The Help link takes you to this page and the Delete form element deletes the component.

To amend the content of a HTML component simply edit it.

Javascript editor

If you are using Internet 5 or greater and you have Javascript enabled then you will get an additional HTML formatting menu. This can be used to do things like make blocks of text into paragraphs by selecting the text and activating the "p" hyperlink.

The editor links all have titles. If you hold your mouse over the link a tool tip window will appear explaining how to use the link and what it does.

HTML Help

Dont panic! If you don't know any HTML but want to add formatting to you page by using things like headings it's really not that hard.

This page contains the basic structural HTML that you need to know for marking up text, lists and tables.

All HTML added via a HTML component gets checked and amended, if necessary, by HTML Tidy. Minor errors like missing out a closing tag will automatically get corrected in order to ensure that the MKDoc database only contains valid XML.

Text Markup

The basic markup for formatting text includes headings, paragraphs, emphasis, abbreviations, quotes and preformatted text.

For more text markup tags see the full list of the W3C's XHTML text module tags. For a link to a description of the elements see the HTML element index.

Headings

Heading elements should be used for headlines that divide articles into different sections.

The default MKDoc template uses the level-one heading for the title of each document. A level-one this should only be used once in a document. The remaining five heading levels should be used in HTML components.

There is no limit on the number of level two to six headings that can be used, however each should only be used if a numerically lower heading has already been used. For example a level three heading should only be used after a level two heading.

Level Two Header

Level Three Header

Level Four Header

Level Five Header

Level Six Header

<h2>Level Two Header<h2> 
<h3>Level Three Header<h3> 
<h4>Level Four Header<h4> 
<h5>Level Five Header<h5> 
<h6>Level Six Header<h6>

Paragraphs

This is a paragraph, which is followed by another paragraph.

This is the second paragraph.

<p>This is a paragraph, which is followed by another
paragraph.</p>
<p>This is the second paragraph.</p>

Emphasis

There are two levels of emphasis that one can use in HTML, emphasis, and strong emphasis.

<p>There are two levels of emphasis that one can use in HTML,
<em>emphasis</em>, and <strong>strong emphasis</strong>.</p>

Abbreviations and Acronyms

Acronyms can be considered as abbreviations which are pronounced as words. For example, UNESCO is generally pronounced as you-nes-co (or something like that...).

Whereas abbreviations can be considered things that are pronounced as their component letters, for example HTML is generally pronounced as aitch-tee-em-el (or something like that...).

<p>Acronyms can be considered as abbreviations which are 
prenounced as words, for example <acronym title="United 
Nations Educational, Scientific and Cultural 
Organization">UNESCO</acronym> is generally pronounced as 
you-nes-co (or something like that...).</p> 
<p>Whereas abbreviations can beconsidered things that are  
prenounced as their component letters, for example <abbr 
title="Hyper Text Markup Language">HTML</abbr> is generally                                     
pronounced as aitch-tee-em-el (or something like that...).</p>

Quotes

There are two kinds of quotes, blockquotes and qs, the difference being that one is a block level element and the other is a inline element.

A blockquotes should contain at least one paragraph.

In addition, all blockquotes should have a citation which references the source of the quote.

This is a paragraph containing a inline quote and the source of the quote:

<p>There are two kinds of quotes, <em>blockquotes</em> and 
<em>qs</em>, the difference being that one is a block
level element and the other is a inline element.</p>
<blockquote>
<p>A blockquotes should contain at least one paragraph.</p>
<p>In addition all blockquotes should have a citation which
references the <cite>source of the quote.</cite></p>
</blockquote>
<p>This is a paragraph containing <q>a inline quote</q> and
the <cite>source of the quote</cite></p>

Preformatted Text

Preformatted text is white space sensitive and is  
generally rendered with a fixed-width font.

<pre>Preformatted text is white space sensitive and is 
generally rendered with a fixed-width font.</pre>

List Markup

There are three kinds of lists in HTML, an unordered list, an ordered list and a definition list.

For a more complete list of list elements see the W3C's XHTML list module. For more descriptive information see the lists section of the HTML 4 specification.

Unordered List

• This is an unordered list (ul) with two items.
• Each list item (li) is generally prefixed with a bullet.

<ul>
<li>This is an <em>unordered list</em> (ul) with two
items.</li>
<li>Each <em>list item</em> (li) is generally prefixed
with a bullet.</li>
</ul>

Ordered List

1. This is an ordered list (ol) with 3 items.
2. Ordered lists are given numbers by the web browser as it renders the web page.
3. This is the third ordered list item (li).

<ol>
<li>This is an <em>ordered list</em> (ol) with 3 items.</li>
<li>Ordered lists are given numbers by the web browser
as it renders the web page.</li>
<li>This is the third ordered <em>list item</em> (li).</li>
</ol>

Definition List

Definition lists (dl) have definition terms (dt).

And one or more optional definition description's (dd).

Definition lists are good for list that have elements with titles and descriptions.

Most web browsers render the definition description indented relative to the definition term.

<dl>
<dt><em>Definition lists</em> (dl) have <em>definition
terms</em> (dt).</dt>
<dd>And one or more optional <em>definition
description</em>'s (dd).</dd>
<dt>Definition lists are good for list that have elements
with titles and descriptions.</dt>
<dd>Most web browsers render the definition description
indented relative to the definition term.</dd>
</dl>

Basic Table Markup

Tables are, by far, the most complicate things to mark up and it's best to use a HTML editor to generate HTML tables (unless you are a HTML guru).

The markup used in the following example only uses elements taken from the basic table module. Further elements are available for the table module. A description of these and their attributes can be found in the table section of the HTML 4.01 specification.

<table>
<caption>A comparison of RSS versions</caption>
<tr>
<td></td>
<th>Title</th>
<th>Link</th>
<th>Description</th>
<th>Dublin Core Metadata</th>
</tr>
<tr>
<th>RSS 0.90</th>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<th>RSS 0.91</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<th>RSS 1.00</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</table>

Further Resources

The W3C's HyperText Markup Language Home Page is where to find the latest HTML specifications and a lot of technicial information.

HTML Help's Web Authoring Reference is more user-friendly than the W3C's specifications. Their HTML 4.0 guide describes all elements, their attributes and includes examples and notes on their usage.

The Open Directory Project's HTML Directory has links to a large number of web sites related to the HTML markup language, including tutorials, references, reosurces and validators. There is also a Open Directory Project's XHTML Directory with links to XHTML specific information. MKDoc has been designed to be used with XHTML to ensure that the databases are valid XML.