"Help" Header Image
 
Link to "Home" Page Link to "Communicate" Page Link to "Help" Page Link to "Contact" Page Link to "The Challenges" Page
 

Basic HTML and BBCode

In this article, I will tell you some basic HTML commands, what they do, and their BBCode counter-part. HTML stands for Hyper Text Tranfser Protocol. BBCode stands for Bulletin Board Code. HTML (along with a few programming languages like PHP, ASP, JavaScript, etc.) are used to build all websites. BBCode is used to enhance posts on forums, guestbooks, and even chat rooms. Note that BBCode can only be used on specially programmed applications, such as phpBB2, ViPER Guestbook, etc. HTML can be interpreted by and web browser.

Function
HTML Syntax
BBCode Syntax
Result
Bold Text <b>Bold</b> [b]Bold[/b] Bold
Italic Text <i>Italic</i> [i]Italic[/i] Italic
Underlined Text <u>Underline</u> [u]Underline[/u] Underline
Text Color <font color="red">Color</font> [color=red]Color[/color] Color
Text Size <font size=3>Size</font> [size=9]Size[/size] Size
Un-Ordered List <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

[list]
[*]Item 1
[*]Item 2
[*}Item 3
[/list]
  • Item 1
  • Item 2
  • Item 3
Ordered List <ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

[list=1]
[*]Item 1
[*]Item 2
[*}Item 3
[/list]
  1. Item 1
  2. Item 2
  3. Item 3
Links <a href="http://www.w3.org">Link</a> [url=http://www.w3.org]Link[/url] Link
Email Link <a href="mailto:kryptix@wintallo.com">Email</a> [email]kryptix@wintallo.com[/email] Email
Images <img src="http://wintallo.com/bit.gif" /> [img]http://wintallo.com/bit.gif[/img]
Center <center>Center</center> (no BBCode equivilent)
Center
Line Break Text<br />More Text (no BBCode equivilent) Text
More Text
Paragraph Break First Paragraph<p></p>Second Paragraph (no BBCode equivilent) First Paragraph

Second Paragraph

To create a HTML page, open a simple text editor (Notepad for Windows users). To start a HTMl page, you must use the following frame work plus the tags above. Note that the <!-- text --> tag is a comment. It will not be displayed in the actual page.

<html> <!-- This is used to tell the computer that an HTML file is starting -->

<title>
Title
</title> <!-- This is where you put the title of you page, like this page's is "Kryptix - Article - Basic HTML and BBCode" -->

<body> <!-- This is where the actual content of a page is put -->

<b>Bold</b>
<br />
<i>Italic</i>
<br />
<u>Underline</u>
<br />
<font color="red">Color</font>
<br />
<font size=3>Size</font>
<br />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<br />
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<br />
<a href="http://www.w3.org">Link</a>
<br />
<a href="mailto:kryptix@wintallo.com">Email</a>
<br />
<img src="http://wintallo.com/bit.gif" />
<br />
<center>Center</center>
<br />
Text<br />More Text
<br />
First Paragraph<p></p>Second Paragraph

</body> <!-- This is where the body tage closes -->

</html> <!-- This is where the HTML file ends -->

Once you type this all into your text editor save it as "anything.html." Open anything.html and you will see something similar to this. If you view the source to this page, you should notice this is exactly what you entered into your text editor. Right-click here and press "Save Target As.." to download the code above in the form of an HTML file.

Preview
(click to enlarge)

Now that you know how to do this, explore you capabilities. Try making a set of pages that link to each other. If you want to know more tags, go to W3Schools' HTML Tutorial. Have fun!

 
 
Copyright © 2008 Joel Verhagen. All Rights Reserved.