Changing Text with HTML
As stated previously, a valid HTML document can
consist of only the html tag. You may type any text
between the html start and end tag without any other
tags and it will display in the browser as typed.
The browser uses it's default text color and font to
display your text. But that isn't very exciting.
HTML contains a rich set of text formatting tags
that you can use to manipulate the text in whatever
format you can dream up. We'll cover the common ones
here.
- Headline tags (
<h1> ...
<h6>
)
- These tags are typically used to quickly
format headers. For instance, <h3>Chapter 1</h3>.
The headline tags range from 1 to 6 in decreasing
size and boldness. These tags are what's called
line-breaking tags. That is, whatever follows the
headline appears on the next line in the browser.
- Paragraph tag (<p>)
- Starts a new paragraph or line. This tag does
not require an end tag unless you're specifying a
style (covered in the next section) for the entire
paragraph. Then, you should use it to tell the
browser when to end the paragraph.
- Boldface tag (<b>
or <strong>)
- The <b> tag is used to make text bold. The
<strong> tag is used to give emphasis to text. In
almost every case, that means bold. This tag does
not produce a line break.
-
- Italic tag (<i>)
- Makes text italic. This tag does not produce a
line break.
- Font tag (<font>)
Note: This tag is deprecated in favor of
<STYLE> tag
- Although this tag may be deprecated, it is
still widely used in html documents across the web
and therefore worth noting here. The tag is used
to specify size, color, and font style of text.
For example
<font size="2" color="red"
face="Courier">font example</font> would look
like this
font
example
This tag does not produce a line break.
- Block of text tag (<blockquote>)
- Creates an indented block of text. I used it
in the font tag example above. Notice how the
example is indented. This is a line-breaking tag.
- Underline tag (<u>)
Note: This tag is deprecated in favor of
<STYLE> tag
- Underlines text. This is not a line-breaking
tag.
As an exercise, try duplicating the following
paragraph using the tags just discussed. Put it in a
file called texttags.html. No cheating.
Text Formatting Tags
Example
This is a very
simple exercise to test your comprehension of
these common text
formatting tags. I'm showing uses of
every
tag discussed in this
section to produce this exercise.
I'm being a little
Sneaky
though, because I'm
actually using tags that you haven't
learned yet, to achieve this look. I'm not trying
to confuse you
though. I'm just hoping you get this on your own.
Color and Style
Color
In the last section you learned how to use the FONT
tag to add color to your text. But what if you don't
want the plain old white background color on your page
but something more inviting like teal? The "BGCOLOR"
attribute of the body tag will achieve that. But let's
talk first about tag attributes.
- Attributes
- Every html tag has attributes associated with
them. For instance, in the last section you saw the
"color", "size", and "face" attributes of the <FONT>
tag. These attributes further define the elements.
Attributes are not required. Each tag has a different
set of attributes however, ALL tags have these
attributes...
- ID - identifies the element by
name
- CLASS - style class
- STYLE - style specification
(I'll talk about this later on in this topic.)
Attributes are specified in the tag in this format
attribute="value" The value may be single quoted,
double quoted, or not quoted at all. If the value
contains spaces it must be quoted, so it's a good idea
to get into the habit of quoting all attributes.
Here's an example...
<p id="myparagraph">Stuff in the paragraph</p>
Now let's get back to changing the background color.
The bgcolor attribute of the body tag allows you to
change the background color of the entire page. Try
this... create an html document with the following
code...
<html>
<body bgcolor="teal"><font color="yellow">
Yellow text on teal background</font></body>
</html>
It should look something like this
Yellow text on teal background
Experiment with different text and background colors.
- The color
pallette
- As you've probably noticed, you can specify quite
a number of colors by name. But suppose you want a
different shade of blue not covered by "blue", "lightblue",
or "darkblue"? The answer is use the RGB color
pallette. You may specify an RGB (Red-Green-Blue)
index in place of a color name. For instance, to get
the shade of blue used in many places throughout this
tutorial use 336699. An in-depth discussion on what
this means is out of the scope of this tutorial.
However, the quick and simple meaning is, each of the
3 colors range from 00 hex (no color) to ff hex (full
color). So in my example the amount of red is 33,
green is 66, and blue is 99. There are only 255 colors
available for use on the web so your index should fall
within those colors. If you want to know more go to
the
HTML links section. The following is an example of
how to specify an rgb index in an html tag
<font color="#336699">This should be blue</font>
Now you're ready to really experiment with colors.
Style
Style is an attribute of nearly every html tag. It is
used to provide just about any kind of style you can
think of, to the text or tag element (could be something
other than text, like an image). This is why some of the
specific style tags like <font> were deprecated, and
from now on in this tutorial, we will use <STYLE> in
place of those tags. The syntax of the style attribute
is as follows:
style="property1:value; property2:value;"
So now, instead of using <p><font color=
"#ffcc66">Some text</font> to colorize text
we use this...<p style="color:#ffcc66">Some text</p> (we
may not want this style beyond this paragraph so we use
the end paragraph tag).
But suppose we want only one word in the paragraph to
be a different color? In that case, we need a general
tag which does no formatting of it's own, to apply the
style attribute. Of course, there is such a tag. Read
on...
- <SPAN> and
<DIV>
- These tags are used as containers for blocks of
html code. There's not much difference between them,
except the <DIV> tag causes a line break and it can do
alignment formatting with the ALIGN
attribute. However, the <SPAN> tag is an inline tag
and does no formatting on it's own.
-
With that, let's use <SPAN> to make one word in a
paragraph, a different color:
<p style="color:#336699;font-weight:bold">We only
want the word <span style="color:red">red</span> to be
a different color</p>
It looks like this:
We only
want the word red to
be a different color
Notice how the word "red" maintains the bold style
property of the paragraph tag. Which brings me to a
point about style hierarchies...When styles are nested,
elements take on the style property most recently
specifed. So in the case of this example, the word 'red'
gets the red property specified by SPAN but maintains
the bold property of P since font-weight was last
specified in the P tag. This is the essence of cascading
styles which is covered in the Dynamic HTML tutorial.
We can even replace many of the tag attributes with
style properties. Take for instance the bgcolor property
of the <BODY> tag. We can get that same yellow on teal
affect with the following...
<body style="background-color:teal; color:yellow;>Yellow
text on teal background</body>
Try this out and you'll get the same results as with
the BGCOLOR attribute. Furthermore, you can specify the
background on just about any element with the background
style properties. Check this out...
Look ma, I can change the <span style="background-color:orange">
background color</span> of my text!
Look ma, I can change the
background
color of my text!
There are many style properties available, far too
many to mention and explain in this tutorial. For a
complete list, consult the
W3C. There is also a more advanced discussion of
style that includes Cascading Style Sheets (CSS) which I
will discuss in the Dynamic HTML tutorial.
Time for another exercise. Try the exercise in the
previous section without using the <FONT> and <U> tags.
And for a twist, make the background color of the
document a light gray (#CCCCCC). Here is a list of
some STYLE properties that you may wish to use:
- font-weight (values: normal, bold, bolder,
100...900)
- text-decoration (values: none, underline,
line-through, ...)
- color (values: named color or #rgb index)
- font-size (values: a number in pixels, large,
medium, small, ...)
- font-family (values: Arial, Courier, Verdana,
...)
- background-color (values: named color or #rgb
index)
I hope this came in useful!
Ask in the forum
if you have any suggestions or comments.
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
