MaraHTML

¤ Tisha Look's HTML Tutorial ¤

How To Add, Change and Format Text

By default, web pages use a black Times New Roman font on a white background. Personally, I got tired of that font about 5 seconds after seeing it, so I started to get creative with my fonts. In this section, I'll explain how to do all kinds of fun things with text.

Fonts:
Text on a website is presented in different typefaces, also known as Fonts. Here are some examples of commonly used web fonts:

The possibilities for fonts are as endless as the people who create them and there are numerous sites on the internet that offer free and shareware fonts. I'm a font junkie and currently have close to 400 fonts installed on my computer. The thing to remember when using fonts on your website is this: In order for the font to show up properly on anyone else's computer, they must have the same font installed on their computer, so pick your fonts WISELY. For example, let's say I want to use the Parkplace font on my website. In order for it to show up properly on YOUR computer, you would also have to have the Parkplace font installed on your computer. Since most people don't have that font installed, all my Parkplace text would show up as Times New Roman on your computer. And I've already explained how bored I am with that font, so all my work will have been in vain. On some of my personal websites, I've used some pretty fonts and then added a link for people to go download the font so they can see my site the way I intended. However, to tell people what to do with their own computers is pretty selfish so, for the most part, I stick with the fonts I listed above. In fact, my entire Marasite is done in Tahoma.

Basic Formatting:
Once you've decided what font you'd like to use, you'll have to decide what size you'd like the text to be. In HTML, there are 7 sizes and they are conveniently named 1-7. The default font size is 3 but I'll show you all 7 so you can get an idea of what works best for you. Beneath the list is the code you'll need to change the size and font of your text as well as some other basic formatting codes.

Size 1
Size 2
Size 3
Size 4
Size 5
Size 6
Size 7

Code:	Looks like:
<font face="Arial" size="2">Your text here</font>	Arial Font, size 2
<b>Your text here</b>	Bold Text
<i>Your text here</i>	Italicized Text
<u>Your text here</u>	Underlined Text
<center>Your text here</center>	Centered Text
<marquee>Your text here</marquee>	Marquee Text
<sup>Your text here</sup>	Text with ^Superscr1pt
<sub>Your text here</sub>	Text with _Subscr1pt

Bulleted Text:
If you've ever had to do any kind of presentation or report, I'm sure you're familiar with how bullets can help get your point across. It's especially handy when you want to make a list of some kind. Perhaps your site is for a club and you want to list the rules. Or maybe your site offers graphics and you want to list the instructions to use them. Regardless of your reasons, bulleted text is a great way for making your lists stand out.

This is an example of bullets.
The little black dot to the left of this text is called a bullet.
See how each item in the list stands out? Another nice feature of bulleted text is how it handles longer sentences or paragraphs. See what happens when the text goes to a new line? It keeps the text indented and in line with all the previous lines. Pretty neat, huh?

Here's the code to make bulleted text:

<ul>
<li>Number One</li>
<li>Number Two</li>
<li>Number Three</li>
</ul>

Numbered Bulleted Text:
Another form of bulleted text is the numbered type. The only difference here is that the bullets are numbers:

This is the first point.
This is the second point.
This is the third point.

Here's the code to make numbered bulleted text:

<ol>
<li>Number One</li>
<li>Number Two</li>
<li>Number Three</li>
</ol>

Aligning Text Using <DIV> Tags:
As the <CENTER> tag is slowly being phased out of HTML, the new and better way to align your text is to use a <DIV> tag. Let's say you want some text right-aligned but you don't want to go through the hassle of creating a table to do it. If you were to use the following code: