:: crazy8 #web_resources ::


Modifying Text
Tutorial by
Mr. Baldy

Are you finished with the BODY tag? Too easy for you? Try this. It's another key feature of a good page, yet is not always used, making a page quite dull. Are you tired of using Times New Roman on your page? Getting pretty boring...fast?! Then use these commands to help spice up a page. I guess you've noticed I use NO Times New Roman font. I an't stand it personally, and when I need something new, I resort to using 'other' fonts and styles which include Verdana, Arial, etc.

Ready to change the font? Start here. There's a simple tag, and I bet you could guess what it is...

<font></font>

This itself does nothing. You have to add the attributes to make the font change. The attributes you can change effect font, font color, and font size. Here's how...

<font face="font name">

FACE is the exact name of the font as shown on your computer. There can be spaces, such as "Comic Sans MS", and it always needs to be in quotes. Also, remember not to use obscure fonts that are hard to read and no one has on their computer, because if it isn't on their computer, it shows up as Times New Roman.

Say now you choose the font, "verdana", and you use that:

<font face="verdana">

It will show up like this:

The plain verdana font looks like this.

A little big for some people. If you want to change the size of the font, just use this:

<font size="-1">

To make the font a little more appealing to some, like this:

The smaller verdana font looks like this.

You can write any number 1-7 in the space where it says "-1" with 3 being the default, or you can use "-1", "-2", "+1", "+2", or "+3" to get the same effect. Choose the way you do it. I like to use the "+" and "-" signs. Now you've figured that out...want some color??? "Sure, we all do", and it's easy, almost like in the BODY tag, but you add:

<font color="X">

X can be replaced with either an RGB number (#000000) or a named color (blue, black, etc.)...Let's say if you want blue text that says, "I am an HTML master", do this:

<font color="blue">I am an HTML master<font>

and it should show up like this:

I am an HTML master

Now you got that down pat, let's go on to headers...There is a simple set of 6 tags, which will make certain headers on your page, which just enlarges the font and makes it bold. They are pretty handy though...here they are:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Here's how they show up...

Header 1


Header 2


Header 3


Header 4


Header 5

Header 6

Now remember these show up differently with Netscape than with Internet Explorer, so keep that in mind when using these. These can be used effectively, but please refrain from typing with a hard to read font with a HEADER6, or there will be no telling what you are trying to say.

Next, there are some properties you can easily use in Word or WordPerfect, which are almost as easy to implement in HTML, such as bolding text, underlining, italicizing, etc. Let's get started. Making text bold. It's this simple:

<b>Text Here</b>

Simple, eh? and here's the effect, if you couldn't have already guessed:

This is some bold text

Well, now on to underlining, the same idea, yet a slightly different tag:

<u>Text Here</u>

And the effect:

This is some underlined text

And I bet you couldn't have guessed...italic text:

<i>Text Here</i>

With this effect:

This is some italicized text

Now that you've got that, you will notice, making an ENTER on the keyboard in your HTML document won't do anything. This is because you need to take it to the next line...There are two options...First, the paragraph break, which skips a space and then starts writing again:

<p>

Which appears like this:

1st line

2nd line

Now the /P is optional, but I don't use it, and I don't recommend you use it. The other type of break is the forced line break. It will go to the next line...

<br>

This will go to the next line, like this:

1st line
2nd line

All right, now you are almost set...All you need is to learn about aligning text and other things on the page...Centering is the easiest...

<center></center>

If centers the text, like so:

Centered text

Now aligning to the left and right are harder. There are two ways to do it...using the P tag (paragraph), or the D (division) tag. They both produce the same effect, but I like using the DIV tag better. It can be used in these two ways:

<div align="left"></div>
<div align="right"></div>

These each produce a paragraph break, and appear like this:

Left aligned text
Right aligned text

You can also align images and other things with this tag, such as the logo at the top of this page. Now there is one more thing I want to teach you, but I don't really want to. It is te text-blink tag. USE THIS SPARINGLY. It will cause people's computers to crash, and is very annoying when seen on the web.

<blink></blink>

YES IT WILL make text blink, but I don't want to show you...you can figure it out for yourself.

I guess now you're done. Pretty easy, huh? heh heh. Good luck with that, and make sure you are ready before you go to the next section.

<< back  |  top  |  next >>










. . . . . . . . . . . . . . . . . . . . . . .
All html, graphics, and javascript is © 1999 crazy8 #web_resources
All quake, quake 2, and quake arena content is © id software
All unreal content is © epic megagames, and half-life © valve software
Page designed by mr. baldy ( webmaster )
home tutorials free gfx design tips templates reviews consultation contact