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.Color and StyleI'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
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
Experiment with different text and background colors.
The color palletteAs 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.
StyleStyle 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...
<font> 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 <font> tag is an inline tag and does no formatting on it's own.With that, let's use <font> to make one word in a paragraph, a different color:
<p style="color:#336699;font-weight:bold">We only want the word <font style="color:red">red</font> 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 font 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 man, I can change the <font style="background-color:orange">
background color</font> of my text!Look man, 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)
