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.
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 , the nbsp stands for
non-breaking
space character. 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.   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 | |
|
| Copyright | © | ©
|
| Trademark | ™ | ™
|
| Registered | ® | ® or ®
|
| Less Than | < | <
|
| Greater Than | > | >
|
| Ampersand | & | &
|
| Quote | " | "
|
| Apostrophe | ' | '
|
| Cent | ¢ | ¢
|
| Euro | € | € or €
|
| One quarter | ¼ | ¼
|
| One half | ½ | ½
|
| Three quarters | ¾ | ¾
|
| Degrees | ° | °
|
| Larger middle dot | • | •
|
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
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
| 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:
- UNORDERED LISTS (uses bullets)
- ORDERED LISTS (uses numbers)
- DEFINITION LISTS (no numbers or bullets).
| 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
- Be able to swim
- Wear a life jacket at all times
- Don't stand up or move around
- Don't overexert yourself
- Use a bow light at night
Notice from the above results that:
- <UL> denotes the beginning of an
Unordered List
- </UL> denotes the end
of the Unordered List
- each <LI> denotes the next item in the list to
receive a bullet
- the bullets are round and solid
- each item in the list has been indented 3 or 4 spaces from
the left side of the screen
- 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.
- 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
- Be able to swim
- Wear a life jacket at all times
- Don't stand up or move around. If canoe tips,
- Hang on to the canoe
- Use the canoe for support and
- Swim to shore
- Don't overexert yourself
- Use a bow light at night
Notice that:
- the second list was indented more than the first list
- 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.
- 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
- Be able to swim
- Wear a life jacket at all times
- Don't stand up or move around
- Don't overexert yourself
- Use a bow light at night
Notice the similarities here to that of the Unordered List in that:
- <OL> denotes the beginning of an ordered or numbered list
- </OL> denotes the end of the ordered list
- each <LI> denotes the next item in the list to receive
a number
- the numbers are in sequence (in order) - hence the name
Ordered List)
- each item in the list has been indented 4 or 5 spaces from
the left side of the screen
- no </LI> tag is required to end a list item.
- no <BR> tag is needed to force a line break at the end
of a list item.
- 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).
- 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
- Be able to swim
- Wear a life jacket at all times
- Don't stand up or move around. If canoe tips,
- Hang on to the canoe
- Use the canoe for support and
- Swim to shore
- Don't overexert yourself
- 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:
- 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.
- </DL> denotes the end of a Definition List
- 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.
- The DT tag may only contain text-level elements (definition of text-level
elements given below).
- The DT tag has an optional end tag
(</DT>), as it is always
clear from the context where the tag's contents end.
- 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.
- The DD end tag (</DD>) is also optional, as it is clear from the
context where the tag's contents end.
- 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
- Seek expert advice about the area
- Get the best maps. On the map select
- landmarks
- mountains
- lakes
- Get a good compass and
- check slope of land
- check direction of flowing streams
- If there is snow on the ground, stay close to:
- roads
- trails and
- waterways
- 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:
- three shouts
- three small fires
- three blasts of a whistle
- three rifle shots
- It may be wise to sit tight and wait for searchers
| 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:
- item 1
- item 2
- 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:
- item 3
- item 4
- 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?
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:
- This is List Item 1
- This is List Item 2
- This is List Item 3
- This is List Item 7
- 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
-
- <HTML>
- <HEAD>
- <TITLE>Names and Addresses</TITLE>
- </HEAD>
<BODY>
John Gilson
William Somebody<BR>
Pauline Johnson Collegiate
120 Somestreet<BR>
627 Colborne St. East
Someplace, Somestate<BR>
Brantford, Ontario
U.S.A. 45061<BR>
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.
- 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>
- The list will begin with the letter "D" (as in D, E, F, etc.).
- The list will begin with the letter "e" (as in e, f, g, etc.).
The information contained in these free 21 lessons is Copyright ©, Brantford
Educational Services, 1997 - 2008 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 htmltutorials@bfree.on.ca