LESSON FIVE - INDENTING and CREATING SPACES WITH   and CREATING LISTS


You may read the following sections in their entirety
or use these choices to go directly to a section.

Return to Home Page | | Indenting a line and creating spaces with   | | Creating a list | | Creating an Unordered List | | Creating an Ordered List | | Creating a Definition  List | | Changing appearance of bullets and numbers |


INDENTING A LINE and CREATING SPACES with  

        Notice that I indented the beginning of this paragraph. Remember that your browser normally prints text left justified and only leaves one space between words and sentences. To force extra spaces or simply to indent a line, use the following command. It works.

 

        These six characters will create a space as if you pressed the space bar. I used 8 of them to indent this paragraph as in:

        These six characters will ...

In &nbsp;, the nbsp stands for non-breaking space character. &nbsp; is simply known as the space character. How many of these non-breaking space characters you use in a row is up to you. Use whatever number suits your purpose. Note that the "nbsp" must be in lower case letters. &NBSP; will not work. The character "&" is pronounced "ampersand" and these 6 characters form an ampersand command. We know that browsers read commands inside angle brackets (<    >). Well, browsers also read commands between the "&" and ";" (that is, between the ampersand and semicolon). Ampersand commands are used to create special characters not found on the keyboard such as the copyright symbol, the trademark symbol, the symbol for degrees, etc. All you need to know is that special code that goes between the "&" and the ";".

Here are some popular symbols and their ampersand commands that work in all browsers (commands for subscripts and superscripts are covered in Lesson 17):

Non-breaking space &nbsp;
Copyright©&copy;
Trademark&#153;
Registered®&reg; or &#174;
Less Than<&lt;
Greater Than>&gt;
Ampersand&&amp;
Quote"&quot;
Apostrophe'&#39;
Cent¢&#162;
Euro&euro; or &#8364;
One quarter¼&#188;
One half½&#189;
Three quarters¾&#190;
Degrees°&#176;
Larger middle dot&#149;


If all you want to do is indent a line or paragraph, using the ampersand command is quite simple. But the ampersand command can also be cumbersome to work with. For example, try the following first problem for this lesson.

Problem 1:SWITCH to NOTEPAD and make up an HTML document that gives the following output in your browser. Indent my address 10 spaces (10 &nbsp; commands) from the left side of the screen, and use 30 spaces between the "n" in Gilson and the "W" in William. Do the best you can to line everything up. The answer is given in the answer section at the end of this lesson

           John Gilson                                 William Somebody
           Pauline Johnson Collegiate          120 Somestreet
           627 Colborne St. East                Someplace, Somestate
           Brantford, Ontario                      U.S.A. 45061
           Canada, N3S 3M8

Click here  to go to the answer section |


top | | bottom |

CREATING A LIST

Lists are often used to present information in an easy to read fashion. Lists can also be used to indent information. Lists can be bulleted, numbered or printed without bullets and numbers. It should also be noted that in any type of list, you can still use the line break and paragraph tags and the normal text markup tags to emphasize text, etc.

There are three types of lists:


top | | bottom |

CREATING AN UNORDERED LIST

Unordered Lists are bulleted lists. You use the opening tag <UL> to indicate the beginning of an Unordered List. To indicate the end of the Unordered List, you use the ending tag </UL>. Furthermore, each item in your bulleted list must begin with the tag <LI>. <LI> stands for List Item. This is how you do it then:

<UL>
<LI>item
<LI>item
<LI>item
</UL>

To see an unordered list in action, SWITCH to NOTEPAD and type in the following HTML document. When finished, save the document, SWITCH back to your browser and LOAD the document file so you can see it in action and also to experiment with the document by trying different things. NOTE: Once a document has been loaded into the browser, it is not necessary to choose FILE and then LOAD FILE each time you want to check how your document looks. If your document is already in the browser, then just click on the RELOAD button on the menu bar (assuming you have that option). This will reload your document so you can examine your updates. Now back to the task at hand. Type in the following HTML document which we will call document #1 as it will also be used later for ordered and definition lists.

This is document #1:

<HTML>
<HEAD>
<TITLE>SAFETY TIPS </TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
<UL>
<LI>Be able to swim
<LI>Wear a life jacket at all times
<LI>Don't stand up or move around
<LI>Don't overexert yourself
<LI>Use a bow light at night
</UL>
</BODY></HTML>

All my examples are for illustration purposes only. They should not be considered complete lists. This is the way your document should look:

SAFETY TIPS FOR CANOEISTS

Notice from the above results that:
  1. <UL> denotes the beginning of an Unordered List
  2. </UL> denotes the end of the Unordered List
  3. each <LI> denotes the next item in the list to receive a bullet
  4. the bullets are round and solid
  5. each item in the list has been indented 3 or 4 spaces from the left side of the screen
  6. no </LI> tag is required - although you can use it to signal the end of each List Item. However, each new <LI> implies that the previous List Item is finished.
  7. no <BR> tag is needed as each new LI command forces a line break before printing the next item. Try experimenting with <BR> after a list item or a <P> tag before a list item.
You can also have lists within lists (nested lists). For example, the following HTML web page (which we will call document #2) is the same as the last one, except that for the third item in the list, I have added some statements on what to do if the canoe tips. What to do if the canoe tips will form a second list of items within the first list. SWITCH to NOTEPAD and make the necessary changes so that the web page now looks like the following.
Document #2 is:

<HTML>
<HEAD>
<TITLE>SAFETY TIPS</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
<UL>
<LI>Be able to swim
<LI>Wear a life jacket at all times
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe
<LI>Use the canoe for support and
<LI>Swim to shore
</UL>
<LI>Don't overexert yourself
<LI>Use a bow light at night
</UL>
</BODY></HTML>

I indented the second list for emphasis. You don't have to do that. Here is the browser output for this web page.

SAFETY TIPS FOR CANOEISTS

Notice that:
  1. the second list was indented more than the first list
  2. the second list also has bullets. In many browsers, they will be round, hollow bullets and not solid as in the first list, or they may be square bullets. For these browsers, if you have a third list, you will find the bullet changing to something else. Each time you move in a tier, the bullet style changes. Try it. In some low level and older browsers, the bullets will all be round no matter what tier you move to. This also illustrates the point that you must design your web pages on the basis of content and not solely on the basis of appearance. For example, if you want bullets, have them, and then let each browser handle how it will print them. If you still want square bullets for those browsers that can handle them, that's fine too. Just remember that browsers that can't handle them will simply print them their way.
  3. for each <UL>tag, you need a </UL> tag. If you want lists within lists within lists, just remember to follow the LIFO principle (Last In, First Out principle or in this case the last <UL> tag activated must be the first tag terminated).
If you want to have your list line up more in the center of the page, the ALIGN="CENTER" command won't work as it would center each list item. Thus your list will not look very good. To move your bulleted list more to the center of the screen, simply use more <UL> tags as in:

<UL><UL><UL>
<LI>List Items
</UL></UL></UL>


top | | bottom |

CREATING AN ORDERED LIST (A NUMBERED LIST)

An Ordered List is a numbered list where the numbers are in order beginning with the number 1. In other words, instead of using bullets, numbers are used to number each item in the list. You treat an Ordered List in the same way as an Unordered List, except that you use <OL> instead of <UL>. OL stands for Ordered List.

To see an ordered list, let's use document #1 and simply change the <UL> tag to <OL> and the closing </UL> tag to </OL>. So SWITCH to NOTEPAD, load in document #1 and make the two changes so that the web page now looks like:

<HTML>
<HEAD>
<TITLE>SAFETY TIPS</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
<OL>
<LI>Be able to swim
<LI>Wear a life jacket at all times
<LI>Don't stand up or move around
<LI>Don't overexert yourself
<LI>Use a bow light at night
</OL>
</BODY></HTML>

This is the way your web page should now look:

SAFETY TIPS FOR CANOEISTS

  1. Be able to swim
  2. Wear a life jacket at all times
  3. Don't stand up or move around
  4. Don't overexert yourself
  5. Use a bow light at night
Notice the similarities here to that of the Unordered List in that:
  1. <OL> denotes the beginning of an ordered or numbered list
  2. </OL> denotes the end of the ordered list
  3. each <LI> denotes the next item in the list to receive a number
  4. the numbers are in sequence (in order) - hence the name Ordered List)
  5. each item in the list has been indented 4 or 5 spaces from the left side of the screen
  6. no </LI> tag is required to end a list item.
  7. no <BR> tag is needed to force a line break at the end of a list item.
  8. With ordered lists, if you insert another item into the list, or if you delete an item from the list, the list will automatically be renumbered (try it).
  9. A list item can take up more than one line. These nine items are an Ordered List and note that list items 8 and 9 take up more than one line and everything still nicely lines up. This is also true for Unordered and Definition Lists (studied below)

COMBINING UNORDERED AND ORDERED LISTS

We can combine unordered and ordered lists. To see this, let's use HTML document #2 where we had a list within a list. We will make some changes so that we will have a numbered list for the main items and a bulleted list for the items on "what to do if the canoe tips". Here is the revised document #2.

<HTML>
<HEAD>
<TITLE>SAFETY TIPS</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
<OL>
<LI>Be able to swim
<LI>Wear a life jacket at all times
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe
<LI>Use the canoe for support and
<LI>Swim to shore
</UL>
<LI>Don't overexert yourself
<LI>Use a bow light at night
</OL>
</BODY></HTML>

Here is the browser output for this web page.

SAFETY TIPS FOR CANOEISTS

  1. Be able to swim
  2. Wear a life jacket at all times
  3. Don't stand up or move around. If canoe tips,
  4. Don't overexert yourself
  5. Use a bow light at night
Notice in the output that the main list is numbered and the secondary list is bulleted.


top | | bottom |

CREATING A DEFINITION LIST (NO BULLETS OR NUMBERS)

A Definition List also manipulates text for you. Unordered Lists and Ordered lists are "single item" or "one tier" lists because each <LI> creates one list item. A Definition List is a "two item" or a "two tier" list as you will see in the next example.

The following example illustrates a DEFINITION LIST and we will not use one of our previous examples for this. SWITCH to NOTEPAD and type in the following new document.

<HTML>
<HEAD>
<TITLE>TRIP PLANNING</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SUMMER CAMPING TRIP PLANNING</H2><HR>
<DL>
<DT>Winter
     <DD>Write for maps and travel brochures
     <DD>Read camping books
     <DD>Prepare budget and equipment list
<DT>Spring
     <DD>Visit camping shows
     <DD>Buy essential items
     <DD>Make reservations
<DT>Week Before Trip
     <DD>Have vehicle serviced
     <DD>Vaccinate pets
     <DD>Buy traveler's cheques
     <DD>Cancel newspaper and other deliveries
<DT>Day before trip
     <DD>Load vehicle
</DL>
</BODY></HTML>

When you execute this HTML document, it should look like the following:

SUMMER CAMPING TRIP PLANNING


Winter
Write for maps and travel brochures
Read camping books
Prepare budget and equipment list
Spring
Visit camping shows
Buy essential items
Make reservations
Week Before Trip
Have vehicle serviced
Vaccinate pets
Buy traveler's cheques
Cancel newspaper and other deliveries
Day before trip
Load vehicle
Note the following points:
  1. DL stands for Definition List and <DL> denotes the beginning of a Definition List. It also tells the browser that a two item list or a two tier list is coming up.
  2. </DL> denotes the end of a Definition List
  3. DT stands for Definiton Term. It represents the set of first items in the list or the first tier. Each <DT> defines a new term in the list. Note that these terms are not indented.
  4. The DT tag may only contain text-level elements (definition of text-level elements given below).
  5. The DT tag has an optional end tag (</DT>), as it is always clear from the context where the tag's contents end.
  6. DD stands for Definition Description. It gives the set of second items in the list or the second tier. Note that the second tier is indented from the first tier (although this is not a guarantee in all browsers) and that the second tier describes the items in the first tier. That is, the second tier is a description of the first tier.
  7. The DD end tag (</DD>) is also optional, as it is clear from the context where the tag's contents end.
  8. DD may contain block-level elements as well as text-level elements. There are two types of elements in the BODY section of a web page and they are block-level elements and text-level elements. Elements that generate a new paragraph such as a header tag (for example <H1>) or a paragraph tag (<P>), are called block-level elements. Text-level elements are elements that do not generate a new paragraph (examples are <EM> and <STRONG>).

A DL is used to provide a list of items with associated definitions. Each item should be placed in a DT and its definition goes into a DD directly following it. If you are still confused, consider this brief explanation of the Definition List. Each <DT> gives a term and each <DD> describes or supports that term.

While it is legal to have a DL with only DT tags or with only DD tags, you are not encouraged to do this. It really doesn't make sense, for example, to have a definition without a term. Also, do not use the Definition List to indent a block of text. It is not good HTML form and indenting a section of text this way is not guaranteed to work. It is considered invalid HTML.

Here is a problem that will keep you busy for awhile. Be sure to try it though. There's nothing like learning by doing.

Problem 2: This problem involves all three types of lists (Unordered, Ordered and Definition Lists). Make up a document that will give the following web page in your browser. It looks rather long, but just start at the beginning and work your way slowly through it. The answer is given in the answer section.

FINDING YOUR WAY IN THE WILDERNESS

  1. Seek expert advice about the area
  2. If there is snow on the ground, stay close to:
If you are inexperienced
do not travel alone
do not travel at night
If you do get lost
Don't panic
Don't wander in the dark
Give distress signals at regular intervals such as:
It may be wise to sit tight and wait for searchers

Click here  to go to the answer  |


top | | bottom |

CHANGING THE STYLE OF YOUR BULLETS AND NUMBERS

The TYPE attribute

You can use the TYPE attribute to control the "appearance" of the bullets and also to control a numbered list. The TYPE attribute was originally a Netscape extension and new to HTML 3.2. It is now supported by all browsers.

CHANGING THE APPEARANCE OF BULLETS

Here is the way to change your bullets to SQUARE bullets:

<UL TYPE="square">
<LI>item 1
<LI>item 2
<LI>item 3
</UL>

If your browser supports the TYPE attribute, you should see the following square bullets. If your bullets are not square, then your browser does not support the TYPE attribute. Note that the value "square" is written in lowercase letters. The TYPE attribute will not work if it is written in uppercase letters.

You can also change the appearance of your bullets to hollow or open bullets with:

<UL TYPE="circle">

To get the round solid bullets back again (which is the default value), use:

<UL TYPE="disc">

CHANGING THE APPEARANCE OF AN ORDERED LIST

We can also change the ordered list to something other than Arabic numbers (1, 2, 3, etc.). For example, to change to a capitalized Roman Numeral numbered list, it is:

<OL TYPE="I">
<LI>item 1
<LI>item 2
<LI>item 3
</OL>

Note that the "I" is a capital or upper case "I" and not the number 1. The above example will give the following output in the browser:

  1. item 1
  2. item 2
  3. item 3
The following replacements for the numbered list can also be made:

<OL TYPE="i"> for lower case Roman Numerals (i, ii, iii, iv, and so on).
<OL TYPE="A"> for capital letters (A, B, C, and so on).
<OL TYPE="a"> for lower case letters (a, b, c, and so on).

Note that <OL TYPE="1"> (the number 1) is the default for listing the items as 1, 2, 3, and so on.

The START attribute

The START attribute like the TYPE attribute is new to HTML 3.2 and so do not assume it will work for your website visitor.

The START attribute is used to begin an Ordered List with any number or letter. For example,

<OL START="3">

as in:

<OL START="3">
<LI>item 3
<LI>item 4
<LI>item 5
</OL>

will begin numbering the list with the number 3 as in:

  1. item 3
  2. item 4
  3. item 5
Also, try the following if your browser supports these attributes:

<OL TYPE="I" START="3">
will begin numbering with Roman Numeral III.

<OL TYPE="i" START="3">
will begin numbering with Roman Numeral iii.

Problem 3: What do you think <OL TYPE="A" START="4"> will do to the list?

Problem 4: What will <OL TYPE="a" START="5"> do to the list?

Click here to go to the answer  |

The VALUE attribute

The VALUE attribute is used to change the number WITHIN A LIST and is used as part of the LI command. The following example numbers the statements in the list as 1, 2, 3, 7, 8 as shown below the document.

<OL>
<LI>This is List Item 1
<LI>This is List Item 2
<LI>This is List Item 3
<LI VALUE="7">This is List Item 7
<LI>This is List Item 8
</OL>

which gives the following results:

  1. This is List Item 1
  2. This is List Item 2
  3. This is List Item 3
  4. This is List Item 7
  5. This is List Item 8

The COMPACT attribute

The COMPACT attribute basically tells the browser that the list items are short so that it can make the list more compact. For example, the browser could put more than one list item on a line. The COMPACT attribute is not widely implemented.
top | | bottom |

ANSWERS

  1.  
    <HTML>
    <HEAD>
    <TITLE>Names and Addresses</TITLE>
    </HEAD>
    <BODY>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; John Gilson &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;William Somebody<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pauline Johnson Collegiate &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 120 Somestreet<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 627 Colborne St. East &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;Someplace, Somestate<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Brantford, Ontario &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;U.S.A. 45061<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Canada, N3S 3M8<BR>
    </BODY></HTML>

    You can see from the above document why many people will use an alternate method such as tables (Lesson Twelve) to display information in columns.

  2. This is how I did it. You may have found another way that yields the same results.
    <HTML>
    <HEAD>
    <TITLE>Wilderness Adventures</TITLE>
    </HEAD>
    <BODY>
    <H2 ALIGN="CENTER">FINDING YOUR WAY IN THE WILDERNESS</H2>
    <OL>
    <LI>Seek expert advice about the area
         <UL>
         <LI>Get the best maps. On the map select
              <UL>
              <LI>landmarks
              <LI>mountains
              <LI>lakes
              </UL>
         <LI>Get a good compass and
              <UL>
              <LI>check slope of land
              <LI>check direction of flowing streams
              </UL>
         </UL>
    <LI>If there is snow on the ground, stay close to:
         <UL>
         <LI>roads
         <LI>trails and
         <LI>waterways
         </UL>
    </OL>
    <DL>
    <DT>If you are inexperienced
         <DD>do not travel alone
         <DD>do not travel at night
    <DT>If you do get lost
         <DD>Don't panic
         <DD>Don't wander in the dark
         <DD>Give distress signals at regular intervals such as:
              <UL>
                   <LI>three shouts
                   <LI>three small fires
                   <LI>three blasts of a whistle
                   <LI>three rifle shots
              </UL>
         <DD>It may be wise to sit tight and wait for searchers
    </DL>
    </BODY></HTML>

  3. The list will begin with the letter "D" (as in D, E, F, etc.).
  4. The list will begin with the letter "e" (as in e, f, g, etc.).

| Back to the top of the page |

Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Six |


The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2012 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to webmaster@htmltutorials.ca