Main Page. VBA, ASP, Visual Basic 6.0, and VB.net. Visual C++, C#, C++, C. HTML and maybe javascript. Forum,Games and Jokes, other stuff. Submit a Tutorial Today!
Messing Around With Text.

Ok you have your text: "Hi, my name is Bob Saget, and I couldn't make a good TV show with my ass."

You want to make the text bold, italics and underline right? The first tag is the <B></B> set, which starts and stops bold in text. Next, you have the <I></I> set, which does italics. And finally, you have the <U></U> set, which starts and stops underline.

So, to make the text bold, italicized, and underlined change that line of text to the following:

<B><I><U>Hi, my name is Bob Saget, and I couldn't make a good TV show with my ass.</B></I></U>

On your screen it should appear Hi, my name is Bob Saget, and I couldn't make a good TV show with my ass

Pretty neat huh? Now that you have italics, underline, and bold under your belt, you need to learn how to use the <FONT> tag. The <FONT> tag controls which font you have and what color the text is. It also makes the text bigger and smaller, but two other tags can do that too, the <SMALL>, makes the text one size smaller, and <BIG>, what do you think it does?

To change the font, do this:

<FONT face="Arial">Hi, my name is Bob Saget, and I couldn't make a good TV show with my ass </FONT>

The face attribute handles what the name of the font is.

To change the color of the font:

<FONT color="#54FF66">Hi, my name is Bob Saget, and I couldn't make a good TV show with my ass </FONT>

Note that the number in the color attribute is a Hex Number. You can also use words in them most of the time like "White", "Red", "Brown" and a host of others. If you're going to use one the 16 crayon colors, it's ok to use a word instead of a Hex. Just in case you want to use just Hex codes, the Hex code is divided into the following:

#FFFFFF

The pound sign makes it hex in HTML, the first two letters are the amount of Red in the color, the second two are the green, and the third two are the amount of blue in the color. You can mix and match the colors to produce wacky results like b o o !.

And finally, to change the size of the text. Before I show you how to do this, let me explain sizing of text in HTML. HTML has 6 different text sizes 1, 2, 3, 4, 5, and 6 that go up in size as you go up in number. There are also three ways to make text bigger and smaller.

1. The Font Tag

<Font Size="6">Hi, my name is Bob Saget, and I couldn't make a good TV show with my ass </Font>

2. The <Small></Small> and <Big></Big> Tags

<BIG>Hi, my name is Bob Saget, and I couldn't make a good TV show with my ass </Big>

<SMALL>Hi, my name is Bob Saget, and I couldn't make a good TV show with my ass </SMALL>

3. The <H1> <H2> <H3> <H4> <H5> and <H6> tags (All those have a closing tag, but I'm not going to write them.)

<H3>Hi, my name is Bob Saget, and I couldn't make a good TV show with my ass </H3>

We need to do all that together now, so here's an example.

<HTML>

<BODY>

<Font size="4" color="red">Hi, my name is Bob Saget, and I couldn't make a good TV show with my ass.</Font>

<!--Note that I combined attributes in the Font tag-->

</BODY>

</HTML>

Aligning Text (Or Anything).

Now that you have grasped the basics of text color, size, and special features, it's time you learned how to orientate the text on the page. What if you wanted the text in the middle of the page? Or the right side of the page? That could pose a problem. HTML solved this problem for us by including the <P></P>, paragraph, tag. The <P> tag handles alignment in a web page. For those of you that have seen HTML before, there is also the <Center></Center> tag, which can only center text on the page. These tags can be used to align anything on a page. You can align tables, images, image maps, and most everything with these tags.

The <P> tag has one main attribute that I use alot, the align attribute. It is usually set to either Left, Center, or Right. It aligns the text accordingly.

An example could be:

<Center>Banana Pudding</Center>

<P Align="Center">Banana Pudding</P>

Tip: If you want to center something, use the <Center> tag. If you want to left align or right align something, use the <P> tag with the align attribute.

Let's go over what you learned so far, to make sure I didn't forget anything.

First, you learned about how to create a simple starter web site in wordpad/notepad. You then learned all the things about saving the file. Then, I taught you about how to mess around with text. That started with the <I>,<B>, and <U> tags. We then progressed to the <FONT> tag. After that, I showed you how to make text bigger or smaller three different ways. Last but not least, I showed you how to align anything (including text). Since we're at the end of this part of the lesson, it is time for a little activity to see how much you remembered of all my lecturing.

Activity: I want you to make a page that has three sentences on it. Make each sentence a different color, and make the 1st and 3rd sentences a different size than the 2nd. Align the first sentence to the left, the second sentence to the right, and the third sentence to the center. If you want to be special, you can make one sentence italics, one underlined, and one bold.

<-Previous Lesson Next Lesson ->
  

Binary Central by Anman: "http://www15.brinkster.com/anman/"