Home

Filtered HTML Basics


You may have used BB code at other sites. BB code is a very limited type of HTML (HyperText Markup Language). Desert Hunter doesn't use BB code. It runs on HTML.

At the bottom of every content creation page there's a link to a basic description of the filtered HTML input format. Here are a few more examples of filtered HTML at work. Lines and paragraphs will break automatically. Web pages and email addresses will turn into links automatically. Tags are enclosed with the "greater than" and "less than" symbols. <tag> Allowed tags include <a>, <em>, <strong>, <cite>, <code>, <ul> <ol>, <li>, <dl>, <dt>, and <dd>. Tags are used in pairs and the closing tag contains a forward slash. <tag>input</tag>

Tags are used only when inputting content. They disappear in the published page. Once they're saved the reader only sees the tag's results and the modified text, not any of the tags themselves. The only reason you see the tags on this page is because I made them visible for display in these examples.

The <a> tag is used for anchors and links.

Anchors are used in long pages to send you to another part of the page.

An anchor could be written to send you to the bottom of the page like this:
<a href="#anchor1">Bottom</a>
Once saved, only this displays: Bottom

Clicking it will send you to a reference point called "#anchor1" at the bottom of the page.

The <a>tag is also used for links to other pages, both internal and external. This an external absolute link in HTML to today's precious metal prices:
<a href="http://www.kitco.com/charts/livegold.html">Today's Gold Quotes</a>
(one of the site's automatic features kicked in and made the link inside the example active)
It looks like: Today's Gold Quote

An internal link to a page within the site can be written as absolute, like the gold link above, or relative to the page's location. This internal relative link will send you to Dan's Blog: <a href=../blog/dan-carey>Dan's Blog</a>
It looks like this: Dan's Blog
Drupal knows where it's installed. So all links are relative to both deserthunter/dhp/ and the page they're written on.

The <em> tag is used for italics
<em>Example 1</em>
gives the following: Example 1

The <strong> tag is used for bold text.
<strong>Example 2</strong>
gives the following: Example 2

The <cite> tag is used to indicate a citation. It displays the authors' names in italics and the book's title appears when you mouseover the authors' names.

According to <cite title="HTML & XHTML: The Definitive Guide. Published by O'Reilly Media, Inc.; fifth edition (August 1, 2002)">Chuck Musciano and Bill Kennedy</cite>, the HTML cite tag actually exists!

gives the following:

According to Chuck Musciano and Bill Kennedy, the HTML cite tag actually exists!

The <code> tag is used to display computer code in monospace type.
<code>
function showMsg(txtMsg)
{
 alert(txtMsg);
}
</code>

gives the following:

function showMsg(txtMsg)
{
 alert(txtMsg);
}
This tag is used on computing websites a lot, but doesn't do much on a hunting site.

The <ul>, <ol>, and <li> tags are used to make bullet point lists and numbered lists. The "u" stands for un-ordered and results in bullet points. The "o" stands for an ordered or numbered list. Adding a new list item to the middle of an ordered list automatically renumbers the list for you. It can be really handy. I use lists a lot. The whole list has to enclosed in either the ul or ol tags and then each list element is enclosed in li tags.
Here's an example of an ordered list.
<ol>
<li>Henway</li>
<li>Duckway</li>
<li>Horseway</li>
</ol>

gives the following:

  1. Henway
  2. Duckway
  3. Horseway

or using the <ul> the only thing that's different is "ul" has been substituted for "ol" tags and it gives bullet points.
<ul>
<li>Henway</li>
<li>Duckway</li>
<li>Horseway</li>
</ul>

gives the following:

  • Henway
  • Duckway
  • Horseway

Using "full" HTML, one can change the style of the bullets or the way a list is ordered using small or upper case letters, and small or upper case roman numerals. The examples above were written to make them easier to see, but HTML doesn't require that either. The whole list can be placed on one line.

<ol type="i"><li>Henway</li><li>Duckway</li><li>Horseway</li></ol>

gives this result:

  1. Henway
  2. Duckway
  3. Horseway

The last kind of list used by filtered HTML on this site is the "definition list." The whole "list" is surrounded by the <dl> tags. The "terms" to be defined are surrounded with the <dt> tags. And the "definitions" are surrounded by the <dd> tags. On just one line this time:

<dl><dt>Henway</dt><dd>About four pounds</dd><dt>Duckway</dt><dd>About six pounds</dd><dt>Horseway<dd<About a ton</dd></dl>

gives the following:

Henway
About four pounds
Duckway
About six pounds
Horseway
About a ton

The basic user here can use those tags. HTML has many many more options, which are available to trusted bloggers and authors. More information about HTML is widely available including this basic primer and this extensive tutorial for those who would like to know more.

When you clicked on the anchor tag at the top of the page labeled "Bottom" you arrived here because there is an anchor hidden in the HTML that looks like: <a name="anchor1"></a>.

Here's another anchor leading you back to the top of the page. Top