Basic Text Formatting
The "<TAG>"
Welcome to Formating 101!
Here we will examine a few simple Plug-Ins. In XHTML simple Plug-Ins like these are called tags! (Actually, you may also use all XHTML tags in the Gamot.Net web pages!)
More advanced Plug-Ins are created for you by our programmers. For you, it is a simple cut and paste from our example pages!
You can use these Plug-Ins to make your page look better!
Simple Plug-Ins
Here we will just look at three kinds of Plug-Ins (even I can remember that! Just remember that Plug-Ins, you simply Cut & Paste them from our example pages to your Gamot.Net web page!).
Simple Plug-Ins usually come in pairs with an opening and closing Plug-In.
It is important to make sure these are in pairs! For example, for me to make the above word "important" in bold letters I uses the opening and closing Plug-In for bold, which is simply a "b"! Like this:
<b>important</b>
Cool Right? Just always remember that Plug-In usually come in pairs like <b> and </b>, and your text goes in between them!
Try the bold Plug-In for a while and when you are comfortable with it, you can add a few more like this:
This is <b>bold!</b>
This is <i>italics!</i>
This is <u>underlined!</u>
You can even use Plug-Ins together, just remember to close them in the reverse order that you opened them. In other words, the First simple Plug-In you open should be the Last Plug-In you close!
CORRECT! ~ This is <u><i>underlined italics</i></u> text!
CORRECT! ~ This is <i><u>italicized underlined</u></i> text!
WRONG! ~ Here <i><u> the italics were closed before the underlined </i></u> Not good!
WRONG! ~ Here <u><i> the underlined was closed before the italics </u></i> Very Bad!
Paragraphs and headers!
Ready for something a little more exciting? Let's try making paragraphs and headers! It is really easy, just remember to always be sure to use your closing Plug-Ins!
Paragraphs and headers are just as easy as the Plug-Ins you learned above. You can even use some of the above Plug-Ins within the paragraph and header tags!
Let's try a few, shall we...
<p>This is a paragraph!</p>
<h6>This is a header 6!</h6>
It's like magic! Headers are already Bold!
<h5>This is a header 5!</h5>
<h4>This is a header 4!</h4>
<h3>This is a header 3!</h3>
<h2>This is a header 2!</h2>
<h1>This is a header 1!</h1>
Amazing!
So Simple!
Here is how to center them...
<p align="center">This is a paragraph!</p>
<h6 align="center">This is a header 6!</h6>
<h5 align="center">This is a header 5!</h5>
<h4 align="center">This is a header 4!</h4>
<h3 align="center">This is a header 3!</h3>
<h2 align="center">This is a header 2!</h2>
<h1 align="center">
This is a header 1!
</h1>
Notice how we wrapped the text around on that last one, but it still ended up centered!
Here is how we put them on the right side...
<p align="right">This is a paragraph!</p>
<h6 align="right">This is a header 6!</h6>
<h5 align="right">This is a header 5!</h5>
<h4 align="right">This is a header 4!</h4>
<h3 align="right">This is a header 3!</h3>
<h2 align="right">This is a header 2!</h2>
<h1 align="right">
This is a header 1!
</h1>
Well, I think that is enough for now, try these Plug-Ins out, master them and in the next example we will add some Plug-Ins for some fancy layout!