Dressing Up Your Page


Table of
Contents


Introduction


Starting
Template


Basic
HTML Tags


Dressing Up
Your Text


Images and
Backgrounds


Hyper Text
Links


Publishing
Your Pages


Dressing Up Your Text

You already know how to put a header on your page so now lets look at a couple of other ways to spice up your text.

The FONT tag that we discussed on the last page is very useful, although as stated earlier, is not recommended by the HTML standard.

Among other things, you can use FONT tag to change the size of your text. Let's try this exercise. After the heading, start a new paragraph like this:

<P><FONT size="5" Color="red"><em>Name:</em></FONT> Your Name Here</P>

<P><FONT size="5" Color="red"><em>AGE:</em></FONT> Your Age Here</P>

<P><FONT size="5" Color="red"><em>Location:</em></FONT> Your State Here</P>

<P><FONT size="5" Color="red"><em>Sex:</em></FONT> Male or Female</P>

Name: Bruce

AGE: 107

Location: Alaska

Sex: Male

Notice the FONT tag has two attributes. Each set to a value. The Size attribute is set to a value of 5 and the Color attribute is set to the value of red. The EM tag emphasizes the text usually displayed by the browser in itallics. You may also use the STRONG to make your text bold.

If you would like to delete the blank lines between the sections of text, remove all of the P tags exept for the first one and replace all of the /P tags with the BR tag, exept for the last instance. This will cause all of the text to be one paragraph with a line break at the end of each item. Remember a line break does not insert a blank line, but will left align the text directly below the break.

Lists

Another tool that may be used to format your page is a list. If you have surfed the web at all I am sure you have seen lists of many kinds.

There are three main kinds of lists: ordered, unordered and definition. As you might think, ordered lists are numbered, unordered lists are not numbered, but are usually preceeded by a bullet. A definition list is just like it sounds, it creates a list like may be found in a dictionay.

ORDERED LISTS are automatically numbered or lettered for you. They are often used for outline style text. Try this example.

<H3 align="center">INTERESTS</H3>
<OL>
<LI>hiking
<LI>biking
<LI>weight lifting
<LI>antiqueing
</OL>

And your results should be something like this:

INTERESTS

  1. hiking
  2. biking
  3. weight lifting
  4. antiqueing

The list must be contained inside the OL tags, the LI or list item tag, however, is a stand alone tag. Lists may be nested inside eachother to create an outline style and you may also use the TYPE command to create either roman numeral or lettered lists. Once again, here is an example for you. Play around with it and see what you can do.

<OL TYPE="I">
	<LI>Hiking
			<OL TYPE="A">
				<LI>mountains
				<LI>hills
			</OL>
	<LI>Biking
			<OL TYPE="A">
				<LI>mountains
				<LI>hills
			</OL>
</OL>

Here is the result of the example:

  1. Hiking
    1. mountains
    2. hills
  2. Biking
    1. mountains
    2. hills

Unordered lists are much the same except, instead of a number or letter, most browsers will insert a bullet preceeding the list item. Example:

<H3>Interests</H3>
<UL>
<LI>Hiking
<LI>Biking
<LI>etc,etc...
<LI>You get the picture
</UL>

And the result:

Interests

  • Hiking
  • Biking
  • etc,etc...
  • You get the picture

One more way to format blocks of text is by using the BLOCKQUTE tag. This will indent a block of text that may be used to include a large direct quote. The BLOCKQUOTE tag is a container. Example:

<BLOCKQUOTE>
To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd.
</BLOCKQUOTE>

Now maybe you are wondering how to make those cool lists with the 3-D bullets. They are not actually lists but text with the 3-D bullet image inserted infront of the list item. Which brings us to our next topic: inserting images.

continue toutorial
Continue Tutorial