Text Coding and Formatting
Formatting your fonts is probably one of the most important features you need to keep your site looking nice and clean. Sure, it adds extra code and makes it look like a mess when you're editing it, but it's well worth it in the end. Your site needs to represent you and whatever your site is about.
You need to show important information, use paragraphs, use line-breaks, and full sentences with correct grammar and spelling. If you think you can do all of that, then let's continue.
There are three very basic codes you can use to show important information, or make a word or sentence noticeable more easily. That would be Bold, Italics, and Underline.
There are a few ways to accomplish this, but we'll show you the most basic ways.
Bold:
There are two ways to make bold font, you can use either. Neither of them are wrong:
<b>Bold Text</b>
<strong>Bold Text</strong>
This will translate into
Bold Text
Italic
There are two ways to make italic font, just like the bold, neither are wrong:
<i>Italic Text</i>
<em>Italic Text</em>
This will translate into
Italic Text
Underline
There's only one way to underline:
<u>Underlined Text</u>
This will translate into
Underlined Text
You may also need to increase the size of your font to catch attention, there are a few ways to do this.
<font size="x">Resized Font</font>
X can be any number you choose. For example:
Size 2 would be <font size="2">Size 2</font>
Size 1
Size 2
Size 3
Size 4
There's also use with Headers. What's even better with using headers is that you can change the color, size, font, etc with stylesheets.
You can from H1 to H6. H1 being the largest and H6 being the smallest.
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
(Even though these are forum formatted, they're actually the same size)
Formatting Text/Fonts
Now we'll get into formatting your font. This is important for making your site look nice and attractive.
The use of paragraphs are underused by just about everybody, but they're one of the most useful codes when formatting your pages.
An example of a paragraph would be:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
This translates directly into:
Paragraph 1
Paragraph 2
Paragraph tags are defaulted to left align, but can easily be centered or aligned to the right using div tags.
<p>Default Paragraph</p>
<div align="center"><p>Centered Paragraph</p></div>
<div align="right"><p>Right Aligned Paragraph</p></div>
These translate into:
Quote:
Default Paragraph
Centered Paragraph
Right Aligned Paragraph
|
You probably have a need to overwrite your default font/text. There are a few ways to do this, primarily by CSS StyleSheets, or by direct code.
Let's say your default text looks like this: Default Text
However, you want it to be bold, underlined, red, and slightly larger. Like this:
New Text
In order to do this, you could use this code:
<font color="#FF0000" size="3"><b><u>New Text</u></b></font>