Manipulating Fonts Using HTML

If you read the first Tutorial you know that it is possible to build a web site in HTML without changing any aspects of the font (the text type that appears on your screen). You probably wouldn't want to go that route, however. For one thing, much as many a webmaster would like to say that the web is all about content, it's also still a very visual medium. All things considered, if two people presented the same information on their web sites, the webmaster with the snazzier looking site would probably get the traffic. That's where fonts can come in handy. Fonts are an easy to manipulate, quick, effective way for a site to be eyecatching.

HTML provides a basic tag, the "Font Tag" that allows us to control many aspects of how our font will appear. Lets take a look at a few lines of code that use the "font tag" and then I'll go through and explain each tag individually.

An Explanation of Font Manipulative HTML

Placement: Font commands are place between the Body and /Body commands in a document. They may appear at the beginning of the document, or anywhere throughout the body area, but will affect only the textual items that follow the command, but do not appear after the command is ended.

The Format: As with all other HTML commands, the font commands are also enclosed in <>. The commands must always start with the word font, followed by a space, followed by an equals sign, quotation mark, and then a value which is a command telling the computer to change the font and make it equal to the value you enter in quotation marks. Font tags must be ended with a /font tag after you've finished typing the text you wish to be changed.

The Font Face Tag: The majority of this document appears using my chosen set font, Arial. The code in the above text area would change the font face to Times New Roman Font

The Font Color Tag: This table is shown in my default font color of black. I've now changed the color to Blue using the font color code from above.

The Font Size Tag: From time to time during the course of a document you may want to change the size of your font. Larger Font This sentance was written with the font size code from above preceeding it, notice the size increase.

There are commands independent of the font tag that change a font's appearance as well. Lets take a look at a few of them now.

An Explanation of Non-Font Tag Font Manipulative HTML

Placement and Format : Like the font tag related font commands, these commands can be placed anywhere within the body of an HTML document and must preceed the text they are to affect. They are closed with their respective / tag following the affected text.

The H1 Tag : The H1 tag signals to your visitors' computers that what follows is a headline. The computer than bolds the text and increases it in size.

This is a Headline With an H1 Tag Before It

The /h1 tag entered, this sentence has returned to normal. As you can see, h1 elements are also automatically placed on their own line with the preceeding and following text above and below them respectively.

The H2 Tag : The H2 tag signals to your visitors' computers that what follows is a sub-headline. The computer than bolds the text and increases it in size, but the headline will still be smaller than any h1 headlines.

This is a Headline With an H2 Tag Before It

The /h2 tag entered, this sentence has returned to normal. As you can see, h2 elements, like h1 elements, are also automatically placed on their own line with the preceeding and following text above and below them respectively.

The Bold Tag : This line of text is written in a regular "weight" font - in other words, it is not in bold. This line has had the bold tag placed before it. The bold tag closed, this line of text is normal again. Place the bold tag immediately before any text to make it bold, closing with the /b tag after the text is finished.

The Italic Tag : Italic text is "slanty" text. This line is Italic, with the i tag placed before it. Notice how the text slants. Using the /i tag returns the text to its normal, non-slanty look. The i tag should be placed immediately before the text you'd like to slant and be closed with the /i tag following the text to be effected.

The Underline Tag : Underlined text is very popular on the web. You can achieve this by applying the u tag as I did with this span of text before turning the underline off with the /u tag. As with bold and italic, the u tag is placed within the body immediately before the text to be affected and closed immediately following the text using the /u tag.

The Emphasis Tag : Emphasis means that text will appear to be stressed to your visitors as it appears here thanks to my use of the em tag which I've now turned off using the /em tag, returning the text to normal. Placed within the body directly before the text to be manipulated, the em tag should be turned off using the /em tag immediately following the text to be changed.