Adding formatting Colors, font size and font type to html text. Easy way to create your first html website with simple notepad

All set with simple text formatting? If not, return to the html tutorial chapters previously discussed. From here on, some new things will be discussed on and it's important that you are good at what is taught in previous html tutorial with notepad chapters.

Let's begin with adding font size, specifying font type and using different colors with html

The html tag which is used to hold font information is:

<font>

</font>

Note:

---

This tag put alone is of no use, it has Attributes. It is these attributes that actually bring the desired effects.

What is an attribute?
If I have to be very simple, think of these as commands within commands. Don't worry, this is equally easy.

Attributes of <font> html tag</2]

[3] SIZE attribute[/3]
As the name suggests, this is used to specify a different font size in html. Example:

<font size="4">Text here</font>

Put that piece of html in your html file and see how the font size of the text inside the tag will change.

With the SIZE attribute, you can specify values between 1 to 7 . So if you do:

<font size="50"> text here </font>

The maximum value of SIZE, which is 7 will take affect, and that's a huge size...

Note:

---

Later on when using style sheets, you will be able to specify values in pixels and points which is what is used by "Microsoft windows", and provides you with more control on how the page will look, but that's a totally different subject.


[3] Specifying different font type in html[/3]

Using the same <font> tag, you can also specify a different font. The attribute to specify a font type is FACE. See this example:

<font face="arial">Text here</font>

Try that in your html page.

What other values can you use is the question now.

Truly speaking you can use any available font type here. If that font type is available on the computer where the website is being opened, it will work. If not, the closest match will be used instead. However for best results, here are some of the most commonly used and more importantly fonts that look good, neat and clearly readable on websites.

[[]]
Arial
verdana
Times new roman
[[]]

The above mentioned fonts are all available on all Microsoft windows systems, so you don't have to worry about people seeing your website differently.
If you have not been downloading new fonts and installing them, you can see what fonts are available on windows by simply choosing the FoNT option under format menu in your notepad. The list is right there...

Changing the color of the text.

Before you begin using all sorts of rainbow coloring on your html page, let me first tell you that it only takes 1 second for people to leave your website.
Don't be a child who just got their first pair of crayons...
Remember all the good websites are designed on white backgrounds with black text.

Enough preaching, here comes your crayons...

You can use the same <font> tag to specify colors for any text on the website. The attribute for colors is COLOR. see this example:

<font color="black"> text here </font>

Although the above will work perfectly, but that's not the right way of doing this.

HTML uses a hexadecimal color format. Don't panic...

Think of this as a numerical format for the color names. So if I have to specify a black color, this is what I will do:

<font color="#000000"> text here </font>

The hexa for Black is 000000.
The hexa for White is FFFFFF.

A list of hexadecimal colors is here

Note:

---

Did you notice the # sign in the above font tag?

That sign is required, otherwise some browsers might not do the coloring.
So black is #000000
White is #FFFFFF

Mixing attributes in <font> html tag

What if you want to change the color of a text and also want it to be larger? Here's how to do this...

<font size="5" color="000000"> Text here </font>

You can specify the attributes inside 1 <font> tag itself, instead of making multiple <font> tags.

Note:

---

The <font> tag is not a recommended tag. Although this is a widely used tag, and was a proper html tag, but was excluded from later versions of html.

Browsers still render the correct effect, but just for records, it's not a proper html tag anymore.

The recommended way of doing font coloring, sizing, and specifying font types is by the use of Style sheets. It's a different set of commands used by html. Did I mention, equally easy?

For practice purposes, you can stick with this tag for now, but once you have finished the html tutorial, do take a peep in the cascading style sheets tutorial (CSS). It'll make your life a lot easier!

By now you have been learning about manipulating single lines of text, and if you are still with me, proceed to manipulating blocks of text called paragraphs.

HTML paragraphs details