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 <B>...</B> 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">
<!--#geoguide-->
This is my homework page for <B>BHS HTML
Class</B>. 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<B> Kathy</B>.
Should be: Hi, my name is <B>Kathy</B>.
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 <I>...</I>.
<BODY BGCOLOR="#FFFFCC" TEXT="color">
<!--#geoguide-->
This is my homework page for <B>BHS HTML Class</B>. This is a lot
<I>easier</I> 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
<FONT SIZE="+1" FACE="font name">....</FONT>
We use the <FONT>....</FONT> tag set. (See,
I told you this was easy). SIZE and FACE are attributes (adjectives) of the <FONT> 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">
<!--#geoguide-->
<FONT SIZE="+1" FACE=" your font">This
is my homework page for <B>BHS HTML Class</B>. This is a lot
<I>easier</I> than I thought.</FONT>
</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 <P>
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">
<!--#geoguide-->
<P>
<FONT SIZE="+1" FACE="your
font">This
is my homework page for <B>BHS HTML Class</B>. This is a lot
<I>easier</I> than I thought.</FONT>
<P><FONT
SIZE="+1" FACE="your font"> 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.</FONT>
</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.