"Perhaps our natural gifts elude us because they are so obvious."
- Sue Bender

Fonts, Text, and Backgrounds

For Starters...

Fonts, text and backgrounds are important when you are looking for the right feel or mood to your page.

Fonts

Fonts and font tags are very simple, as is most everything in HTML coding. To get this font I used on this webpage, I simply used this tag in the head area of the page, so that it would affect the entire page:

<font face="Apple Garamond BT" size="1">

So, to get a Verdana, size 1 text style on your page, which seems to be very common on many aites like this one, you would simply need to insert a tag like this:

<font face="Verdana" size=1>
This is an example of what that tag would do to your font.

Now you can also adjust the color by adding a little phrase into your code like this:

<font face="Verdana" size=1 color="#FFFFFF">
This is an example of what that little addition would do to your text.

And don't forget to end your font tags by typing at the end of your document, or at the end of where you want your text to be that type:
</font>
If you don't do this, the entire document after that font face tag will be in the font face or type that you entered for that little section.

Text

There are a couple of little tricks you can use for text on your page. For example, if you wanted a title in a semi-large header style, and then below it a paragraph of indented text, you would need to use a combination of a blockquote tag and a header tag. To do this, simply type this in your document where you want to have this item of your page:

<h3>Title for the Section</h3><p><blockquote>The paragraph is indented. You would now type your indented text here. At the end you would need to put a closing tag: </blockquote>

Result:

Title for the Section

The paragraph is indented. You would now type your indented text here. At the end you would need to put a closing tag.
Now, what we did was simple, here's the breakdown:
<h3> and </h3> are the header tags. You can also use h1, h2, h3, h4, h5, and h6, in order of size - h1 being the largest and h6 being the smallest. Each h# tag is in bold, though in h6 and sometimes h5 you can't tell because they are so small. </h3> is just the closing tag for that.
<p> is just a tag that means you want a new paragraph. It's somewhat like the <br> tag, but you can usually only use one of them at a time to make any difference, I have found.
<blockquote> and </blockquote> are the tags that indent the paragraph, and the closing tag (</blockquote>)for that section.

Backgrounds

Backgrounds are cool, most of the time. Sometimes when people do them wrong, or with the wrong colors, then it isn't so cool, in fact it might not even be cool at all. So I am writing this section to try and help with that. First of all, there are things called hex's, these have to do with colors. It is the code version of the word for a color. For example, #FFFFFF is white, #000000 is black, and #989898 is a kind of dark gray color. All of these hex's start with a number symbol (#) ALL the time. There are six letters or numbers in a sequence, no more, no less, and you can get any color with them. The background of this site where the text is, is #456789 and the part where there is no text is #123456. You can include these things in your body tags, in your table tags (see the table tutorial for more on tables), and in font tags, as you have already seen. The reason for there being six numbers is because there is a code: RRGGBB, where R stands for red, G stands for green, and B stands for blue. If you have Photoshop, which I highly reccomend for webpage creation, then whenever you go to change your foreground or background colors, that's what you are doing. You are telling the program that you want a certain hex color for that moment. For popular and well-known colors, you can just use the name of the color like white, black, gray, blue, green, silver, red, and others.

Now, for the backgrounds. This is very simple. In you HTML document, go into the body tag, and, say you want a red background for your page, but not too bright. So in your body tag, change it to this:

<body bgcolor="#B40000">

Now preview your page in your browser, and you should have a background for your webpage that is like a dark red color. You can also do this for fonts and links and everything in your body tag. (See next tutorial for more on links.) Just as an example, my body tag for this site looks like this:

<body bgcolor="#123456" text="#123456" link="#000000" vlink="#000000" alink="#900000">

alink means an active link, in other words when you click on it, and vlink means a visited link, in other words after you've clicked on it.

So, thanks for reading this tutorial, I know it was long and it was probably intimidating at first, but I tried to put a lot of useful and helpful tips and information in it so that it could help you with your webpage and website creation. Look forward to the next tutorial on links.
Hosted by www.Geocities.ws

1