Basic Guide to HTML

There are several places on the site where you can enter an unlimited amount of text. This text is not formatted and carriage returns will not make your text to go to another line. To make your text appear on a new line, you must use the <BR> or <P> HTML tags. Below is a basic overview of HTML tags that you can use to format your text.

Headings:
In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.

Example:

John's Bricks

and here is a smaller heading:

John's Bricks

HTML Code:

<H1>John's Bricks</H1>

and here is a smaller heading:

<H2>John's Bricks</H2>

Line Break:
To make your text appear on a new line, hitting the carriage return will not work. You need to use the <BR> tag.

Example:

Line 1
Line 2

HTML Code:

Line 1<BR>
Line 2

Paragraph:
Each paragraph you write should start with a <P> tag. The </P> is optional, unlike the end tags for elements like headings.

Example:

This is the first paragraph.

This is the second paragraph.

HTML Code:

This is the first paragraph.
<P>This is the second paragraph.

Bold Text:
You can emphasize one or more words with the <B> tag.

Example:

BrickLink is a great place!

HTML Code:

BrickLink is a <B>great</B> place!

Italics Text:
You can make one or more words in italics with the <I> tag.

Example:

BrickLink is a fun place!

HTML Code:

BrickLink is a <I>fun</I> place!

Horizontal Line:
You can add horizontal line(s) to separate sections of your document with the <HR> tag.

Example:

Section #1


Section #2
HTML Code:

Section #1
<HR>Section #2

Images:
The way to add an image is using the <IMG> tag. It's a good practice to specify the width and height of the image. You do this using the WIDTH and HEIGHT attributes of the IMG tag. If you do not specify the width and height tags then some browsers require the whole image to load before it displays the page which results in a big amount of wait time. You can also use the ALT attribute of the IMG tag to which shows an alternate text when you mouse over the image.

Example:

Buy and Sell LEGO on BrickLink

HTML Code:

<IMG SRC="/images/logos/logo8831_1.gif" WIDTH="88" HEIGHT="31" ALT="Buy and Sell LEGO on BrickLink">

Links:
The internet has the ability to define links from one page to another, and to follow links at the click of a button. Links are defined with the <A> tag. In this example we will define a link to our discussion forum at "messageList.asp". The text between the <A> and the </A> is used as the caption for the link. It is common for the caption to be in blue underlined text.

Example:

This is a link to our Discussion Forum.

HTML Code:

This is a link to our <A HREF="messageList.asp">Discussion Forum</A>.

To link to a page on another Web site, you need to give the full Web address (commonly called a URL). For instance to link to www.bricklink.com you need to write:

Example:

This is a link to BrickLink.com.

HTML Code:

This is a link to <A HREF="http://www.bricklink.com">BrickLink.com</A>.

You can turn an image into a link. When you do that, the image shows a blue border. To turn this off, use the BORDER=0 parameter of the image tag. The following allows you to click on the BrickLink logo to get to the home page:

Example:

Buy and Sell LEGO on BrickLink

HTML Code:

<A HREF="http://www.bricklink.com"><IMG BORDER="0" SRC="/images/logo8831_1.gif" WIDTH="88" HEIGHT="31" ALT="Buy and Sell LEGO on BrickLink"></A>

Lists:
The most commonly used lists are the ordered list and the unordered list. Here is an example of an unordered list. It puts a bullet next to every item in the list:

Example:

I accept the following methods of payment:

  • Personal Checks
  • Money Orders
  • Cash
HTML Code:

I accept the following methods of payment:

<UL>
<LI>Personal Checks
<LI>Money Orders
<LI>Cash
</UL>

Here is an example of an ordered list. It puts a number starting from 1 next to every item in the list:

Example:

I accept the following methods of payment:

  1. Personal Checks
  2. Money Orders
  3. Cash
HTML Code:

I accept the following methods of payment:

<OL>
<LI>Personal Checks
<LI>Money Orders
<LI>Cash
</OL>

Tables:
Tables are used for information as well as for layout. Tables consist of one or more rows of table cells. The TABLE element acts as the container for the table. The BORDER attribute specifies the border width in pixels. The TR element acts as a container for each table row. The TH and TD elements act as containers for heading and data cells respectively. Here is a simple example:

Example:

LocationShipping Charge
Europe$10.00
America$5.00
Australia$15.00
HTML Code:

<TABLE BORDER="1">
<TR><TH>Location</TH><TH>Shipping Charge</TH></TR>
<TR><TD>Europe</TD><TD>$10.00</TD></TR>
<TR><TD>America</TD><TD>$5.00</TD></TR>
<TR><TD>Australia</TD><TD>$15.00</TD></TR>
</TABLE>