Lesson 5

Placing Spaces on Web Pages

You may have already noticed this, but HTML seems to sometimes "ignore" spaces that you place on Web pages. For example, look at this line of code:

<P>Hello there!

For this line of code, you would expect to see the word "Hello" followed by a lot of spaces and then "there!", right? Isn't that strange? In the HTML language, if you place successive spaces on Web pages, the browser will read only one of the spaces. It does help Web pages to look a little cleaner in case you accidentally place extra spaces on your pages, but it can also present some problems. For example, what if you want to indent a paragraph? Luckily, there is a way to create spaces on your Web pages. Let's learn how.

To create a space, you will want to use an ampersand command that creates a space (by the way, the "&" symbol is called an ampersand). The ampersand command for a space is  . Everytime you place   on your Web page, you will create a space. So to indent a paragraph, I would simply place five of these next to each other, like this:      . This is what an indented paragraph looks like:

It looks like this. See the extra spaces at the beginning of this paragraph? Now you know how to indent paragraphs and create spaces on your Web pages.

Special Characters in HTML

Now that you know how to create a space, we should talk about special characters in HTML. Look at the list of these characters:

& < > ¢ § © ® ¶ ½ × ÷ ñ ò ˜ €

You may create a page sometime in which you would like to use one of these characters, or maybe even a different character that is not on this list. Well, I have good news and bad news. First the bad news. You can't create these characters the way that you are used to creating them. For example, if you press <SHIFT> and the <7> keys, that is not how we produce the ampersand (&) in HTML. The good news is that there is a simple list of codes that we can use to produce keyboard symbols.

You'll notice that there are 4 columns in this list. The first column contains the symbol and the second column contains a description of each symbol. The third column contains the Entity Name while the last column contains the Entity Number. These contain the codes that you will use to place these symbols on your pages. For example, look near the top of the page, and you will see that to create an ampersand (&), you can either type & or &. You can use either one. I have a much easier time remembering the entity names than the entity numbers, but you can use either one.

One important note: You do not have to memorize this list! (You're relieved, aren't you.) I have been a Web designer for several years and I only have some of these entity names memorized. I refer to this list often, and I expect you to do the same when you have a need to place symbols on your pages.

Bullet Lists

You may have seen "bullet lists" on Web pages before. I use them a lot. Here's why I like them...

They present information in an organized way.
They are simple to create using HTML
The bullets look cool.

Would you like to know how I did that? Here is the HTML code.

<UL>
<LI>They present information in an organized way.
<LI>They are simple to create using HTML.
<LI> The bullets look cool.
</UL>

Please don't be scared by these new tags. It's actually only two being used again and again. Here's what's happening.

UL stands for Unordered List. It means bullets will be used rather than numbers. Numbers will be explained later.
LI stands for List Item. It identifies the next thing that will receive a bullet. Please note that no </LI> is required. Neither is a Break or Paragraph command. The LI does everything for you. Pretty cool, huh?
/UL ends the entire list.

But I don't want round bullets. I want squares!

Relax, there's a simple way to do that. You can create a list with square markers for bullets. Simply add the attribute TYPE="square" into your UL command, like this:

This is what you get...

List Item 1
List Item 2
List Item 3

If you want, you can even use the TYPE="circle" attribute to create "hollow circles" as bullets.

This is what you get...

List Item 1
List Item 2
List Item 3

Ordered Lists

If you would like to create a list that numbers the items rather than just putting a bullet in front, HTML can do that for you too. Sure, you could just number the things yourself, but that's not very much fun. Besides, it can be very time consuming. Look at this list.

List Item 1
List Item 2
List Item 3

Here's how I did it:

Notice that it's the same format as the bullet list above, except I have <OL> where <UL> used to be. That's it! The browser will continue to count up as long as you keep putting <LI> items after the <OL>. By the way, OL stands for Ordered List.

But I don't want numbers on my list. I want something else!

Aren't you picky today! The good news is that HTML allows you to use different attributes to change the type of ordered lists that you create. Some examples are below. Notice that the examples are identical, except that the attribute within the OL command changes.

Capital Letters

List Item 1
List Item 2
List Item 3

Here's how I did it:

Lowercase Letters

List Item 1
List Item 2
List Item 3

Here's how I did it:

Roman Numerals

List Item 1
List Item 2
List Item 3

Here's how I did it:

Lowercase Roman Numerals

List Item 1
List Item 2
List Item 3

Here's how I did it:

Can I create an ordered list that doesn't start at 1?

You sure can, and it's actually easy to create. Here's an ordered list that starts at four.

List Item 1
List Item 2
List Item 3

Here's how I did it:

Page 2