HTML Guide

[Dinoguy1000]

You may discuss this guide here: HTML Guide Discussion

HTML Guide

If you know much about the Internet, you know a little about HTML (HyperText Markup Language). This allows you to do many things that you can't do with BBCode, the simplified cousin of HTML that you use on boards like this one. If the Admin has it enabled, you can use certain HTML tags. It just so happens that JPT is one of the boards that you can use them. These are the tags that you can currently use (listed alphabetically):

• <a href="http://www.jurassicparkterror.com/forum/viewtopic.php?p=11910#11910">a</a>
• <a href="http://www.jurassicparkterror.com/forum/viewtopic.php?p=32753#32753">b</a>
• <a href="http://www.jurassicparkterror.com/forum/viewtopic.php?p=32755#32755">i</a>
• <a href="http://www.jurassicparkterror.com/forum/viewtopic.php?p=32756#32756">img</a>
• <a href="http://www.jurassicparkterror.com/forum/viewtopic.php?p=32757#32757">marquee</a>
• <a href="http://www.jurassicparkterror.com/forum/viewtopic.php?p=32758#32758">p</a>
• <a href="http://www.jurassicparkterror.com/forum/viewtopic.php?p=32759#32759">pre</a>
• <a href="http://www.jurassicparkterror.com/forum/viewtopic.php?p=32760#32760">u</a>

The main difference between BBCode and HTML is the brackets that enclose the tag. BBCode uses square brackets ([ and ]), whereas HTML uses carots (<and>). See the difference? Anyways, using the allowed HTML tags is very similar to using BBCode. When using either, remember that you must close tags in the opposite order they were opened. Therefore, this is wrong:

Code: Select all

[b][i]This is wrong![/b][/i]
<b><i>And so is this!</b></i>

but this is right:

Code: Select all

[b][i]This is right![/i][/b]
<b><i>And so is this!</i></b>

Also, you should not open with one type of tag and close with another, so this is wrong:

Code: Select all

[b]This is wrong!</b>
<b>And so is this![/b]

but this is right:

Code: Select all

[b]This is right![/b]
<b>And so is this!</b>

Now that we're done with that, let's move on to the next difference: BBCode consists of simple, one word codes (depending on the forum), but HTML uses something called 'attributes' offering much greater control. An attribute is essentially some characteristic followed by a specific descriptor. For instance, with the img tag, in order to link to the image so it can be displayed, you would add the 'src' attribute, as follows:

Code: Select all

<img src="http://www.yourwebsite.com/thenameofyourimage.jpg">

Here, 'src' is the characteristic, and 'http://www.yourwebsite.com/thenameofyourimage.jpg' is the descriptor.

Each HTML tag has its own set of attributes, and there is a handful of 'universal' attributes that can be used with any tag, for instance, the 'class' attribute. Also, if you start digging deeper into HTML, you will notice that some coders enclose their descriptors in quotation marks (""), while others leave them out. In the present, either method is fine, but once you start doing it one way, it's best not to go back and forth between the two ways. And if you use the quotes, you must be very careful to include both the beginning and ending mark, or your results could be quite bad. Leaving the second mark off of the 'href' attribute, for example, will result in the entire page from that point down being considered part of the URL! Therefore, this is bad:

Code: Select all

<a href="http://www.yoursite.com/yourpage.html>Click here!</a>

but this is good:

Code: Select all

<a>Click here!</a>
-OR-
<a href="http://www.yoursite.com/yourpage.html">Click here!</a>

One more thing: this guide is by no means a comprehensive guide to HTML use. If you're looking for more information, the first place you should start is probably a <a href="http://www.google.com/" target="_blank">Google</a> search.
Now, on to the tag descriptions!

[Dinoguy1000]

<a name="HTMLa">a</a>

The 'a' tag is used for links. In order to designate the target page/picture/whatever, you use the 'href' attribute, as follows:

Code: Select all

<a href="http://www.yoursite.com/yourpage.html">Click here!</a>

That line will produce <a href="http://www.yoursite.com/yourpage.html">Click here!</a>.
Another commonly used attribute is the 'name' attribute. If you have ever been on a web page that had links letting you go down to a specific section on that or another page, the 'name' attribute is being used. It is very useful when you have a long page that you want to break up into sections. Designating a section is very simple:

Code: Select all

<a name="section1">Welcome to Section 1</a>

And linking to it is just as simple:

Code: Select all

If it is on the same page:
<a href="#section1">Go to Section 1</a>

If it is on a different page:
<a href="http://www.yoursite.com/anotherpage.html#section1">Go to Section 1</a>

See? Easy as pie.
Another thing you may notice is that when you click on some links, a new window will pop up loading that page (or else your popup blocker will complain about it). To achieve this, you use the 'target' attribute, as follows:

Code: Select all

<a href="http://www.yoursite.com/yourpage.html" target="_blank">Click here!</a>

That will produce this (click to see): <a href="http://www.yoursite.com/yourpage.html" target="_blank">Click here!</a>
These are the descriptors that you can use with the 'target' attribute:

• _blank - loads the page in a new window
• _parent - loads the page in the same window, using the entire window

NOTE: I know this guide isn't done, but I don't have the time to finish it now. It will be completed in the near future, though!

[Dinoguy1000]

b

This is a very straightforward tag, perhaps one of the most used in HTML. It makes the selected text bold, and is very simple to use. As follows...

Code: Select all

<b>This text is bold.</b>

results in this: <b>This text is bold.</b>

There aren't really any attributes that are of interest for the casual forum user for this tag.

[Dinoguy1000]

i

This is a very straightforward tag, also one of the most used in HTML. It makes the selected text italic, and is very simple to use. As follows...

Code: Select all

<i>This text is italicized.</i>

results in this: <i>This text is italicized.</i>

There aren't really any attributes that are of interest for the casual forum user for this tag.

[Dinoguy1000]

img

This is a very important tag in HTML, as it is how you place an image on a web page. Similar to the HREF attribute of the A tag, you must use the SRC attribute in order to make this tag work, as follows...

Code: Select all

<img src="http://www.yoursite.com/thenameofyourimage.jpg" />

This will result in a picture being displayed (or, in this case, a little box with a red 'x' in it).

There are several other useful attributes to go with this tag. The two most important are the WIDTH and HEIGHT attributes, which specify - you guessed it - the width and the height of the image, as follows:

Code: Select all

<img src="http://www.yoursite.com/thenameofyourimage.jpg" width="100" height="100" />

Would result in an image exactly 100x100 pixels in size, regardless of the original dimensions of the image. These two attributes should always be included when using the IMG tag.
Another useful attribute is the ALT attribute, which allows you to specify some text to pop up when a visitor puts the cursor over the image, as follows:

Code: Select all

<img src="http://www.yoursite.com/thenameofyourimage.jpg" width="XXX" height="XXX" alt="A picture." />

results in an image XXX pixels wide, XXX pixels high, with the caption "A picture." that pops up when you pause the cursor over the image.
Normally, when you put an image on a page, it has an ugly blue border. To get rid of this border, you use the BORDER attribute, as follows:

Code: Select all

<img src="http://www.yoursite.com/thenameofyourimage.jpg" width="XXX" height="XXX" border="0" />

results in an image XXX pixels wide, XXX pixels high, and having no border.

[Dinoguy1000]

marquee

[Dinoguy1000]

p

This is a very straightforward tag, also one of the most used in HTML. It creates a paragraph (no indentation), and is very simple to use. As follows...

Code: Select all

<p>This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph.</p>This will be another paragraph. This will be another paragraph. This will be another paragraph. This will be another paragraph. This will be another paragraph. This will be another paragraph.

results in this: <p>This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph.</p>This will be another paragraph. This will be another paragraph. This will be another paragraph. This will be another paragraph. This will be another paragraph. This will be another paragraph.

There aren't really any attributes that are of interest for the casual forum user for this tag.

[Dinoguy1000]

pre

[Dinoguy1000]

u

This is a very straightforward tag, also one of the most used in HTML. It underlines the selected text, and is very simple to use. As follows...

Code: Select all

<u>This text is underlined.</u>

results in this: <u>This text is underlined.</u>

There aren't really any attributes that are of interest for the casual forum user for this tag.

[Dinoguy1000]

Unstickied; HTML is no longer allowed in favor of being able to create custom BBCodes.

[hypergame]

Shame.

[Dinoguy1000]

Any particular reason? Like, a particular HTML tag you're wanting?