Welcome Back!

Is This a TEXT?

Now we will look at some tags that will make our text stand out. We will cover color, bold, italics, fonts, headings, and spacing.

Color

We covered color in the last section, so this is easy. We still use the <BODY> tag, we just add the attribute TEXT to the tag. We already have:

<BODY BGCOLOR="#FFFFCC">

So we just add color to our text like this:

<BODY BGCOLOR="#FFFFCC" TEXT="color">

I will let you pick out a color this time: Color Chart. Replace the word color with your color code.

Click here to go to the File Manager utility, then enter you name and password, find the file named homework.html and check the box next to it . Don't forget to save your work and view it.

Bold

To make a particular word stand out as a bold word, we use the tag ... tag set. We already have the line:

<BODY BGCOLOR="#FFFFCC" TEXT="color">
This is my homework page for BHS HMTL Class. This is a lot easier than I thought.
</BODY>

Let's make the words "BHS HTML Class" bold.

<BODY BGCOLOR="#FFFFCC" TEXT="color">

This is my homework page for BHS HTML Class. This is a lot easier than I thought.
</BODY>

Special Note: It is a good time to get in the habit of putting the space before your codes. Always put a space after the bold, italics and underline tags. I know it doesn't show after bold and italics, but it does underline the blank space within the underline tags. These would be the spaces normally found between words.
Wrong: Hi, my name is Kathy.
Should be: Hi, my name is Kathy.

Click here to go to the File Manager utility, then enter you name and password, find the file named homework.html and check the box next to it . Don't forget to save your work and view it.

It should look like this in whatever color you chose:

This is my homework page for BHS HTML Class. This is a lot easier than I thought.

Italics

Let's take that same line and add the tag set ....

<BODY BGCOLOR="#FFFFCC" TEXT="color">

This is my homework page for BHS HTML Class. This is a lot easier than I thought.
</BODY>

Click here to go to the File Manager utility, then enter you name and password, find the file named homework.html and check the box next to it . Don't forget to save your work and view it.

Looks like this?
This is my homework page for BHS HTML Class. This is a lot easier than I thought.

Fonts

....

We use the .... tag set. (See, I told you this was easy). SIZE and FACE are attributes (adjectives) of the tag set. SIZE determines the size of the letters, starting with "1" as the smallest and "7" as the largest. FACE determines the style of the letters. A word of caution here, the font you choose must be installed on the computer of the person viewing your web site. If you have a wild font that you love, but your visitor doesn't have the same font, their browser will use the default font, whatever they have set as default, usually Times New Roman. If you stick to the most popular fonts, the ones that come with Windows or are installed with your browser, you should be alright. Let's try Comic Sans MS, Courier, or Arial. You may choose any one you can see here. Replace your font with the name of the font you want to use.

Font sizes can be either a fixed size from 1 to 7, or a relative size such as -1 or +2. The default size is normally 3, so a size value of +1 would make the font equal to size 4. Using a relative size is considered the best way as this keeps your font sizes in relation to each other if your visitor has set their browser for a larger or smaller font size depending on their screen resolution or sight ability. Use a fixed size only when really needed.

<BODY BGCOLOR="#FFFFCC" TEXT="color">


This is my homework page for BHS HTML Class. This is a lot easier than I thought.

</BODY>

Looks like a mess, doesn't it? Behind the scenes it looks messy, but when viewed through the browser it all turns out okay.

Click here to go to the File Manager utility, then enter you name and password, find the file named homework.html and check the box next to it . Don't forget to save your work and view it.

Should look like one of these:
Comic Sans MS: This is my homework page for BHS HTML Class. This is a lot easier than I thought.

Courier: This is my homework page for BHS HTML Class. This is a lot easier than I thought.

Arial: This is my homework page for BHS HTML Class. This is a lot easier than I thought.

Spacing Out?

In HTML, pushing the "Enter" key or "Return", as it used to be called when we had typewriters, does nothing. You have to use, let's say it together, HTML tags. If you want double spacing, like the old typewriters, you have to use the tag. This is called a Paragraph Tag. Let's take our work so far and make a paragraph out of it and start a new one.

<BODY BGCOLOR="#FFFFCC" TEXT="color">



 This is my homework page for BHS HTML Class. This is a lot easier than I thought.

 I have learned how to add color, make text bold, make it small, and make it large. I know how to make paragraphs and soon I will know how to add a break to a line where ever I want one.

</BODY>

Notice that we closed the FONT tag at the end of the first paragraph and opened it again in the second paragraph. This is the correct way to use the font tag with the paragraph tag.

You may wonder why we don't just open the font tag at the start and then close it again at the end so everything we write in between is in that font style and size. Well, we could, and as far as I know most browsers will show the text as you expect, but we are teaching you the correct use of the font tag, and keeping to the rules will avoid unnecessary problems.

More Spaces

You may have noticed that you cannot put extra spaces into the text on your web page. In your word processor it's easy, just hit the space bar as many times as you want.

This doesn't work on a web page because browsers collapse all spaces down to only one space. There is a special code that you can put in to create spaces that will not collapse. You can then space things out as much & nbsp; as you like.

This is the  , otherwise known as a non-breaking space. Just type these 5 characters everytime you want a space that is not going to go away. You can use them to indent a paragraph like this one, or to add extra spaces between graphics.

NOTE: In the Advanced Editor after you have saved the file and open it again to edit it, these characters will have disappeared and become spaces. Don't worry, they are still there, you just can't see them as visible characters anymore.