-- Click to visit --
Home Page
Site Map,
Bones of a Web Site
Lesson 5   Lesson 6   Lesson 7

Lists and Separators

Open your page1.html file in Notepad. Save it as page6.html. Now open it in your Browser, to watch the changes as you change your code during the lesson.

Now we are going to look at a couple formatting tools availble to you. First one is <BLOCKQUOTE>. I've been using it throughout this whole tutorial. Basically it pulls your margins in from both sides. (I don't know if that's the proper terminology but if you understand what I mean I guess it's close enough).

<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
</BLOCKQUOTE>
</BODY>

WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

I'm sure when <BLOCKQUOTE> was first devised it had a loftier purpose, such as quoting profound bits of prose from authors I've never even heard of. But here in the trenches it serves a more mundane purpose... easy indenting.

Another very useful little tool is a LIST. There are ORDERED lists and UNORDERED lists.

This is an ordered list
  1. something big
  2. something small
  3. something short
  4. something tall
This is an unordered list
  • something red
  • something blue
  • something old
  • something new
First, we will build an UNORDERED list. It's mind-numbingly simple-    really.

Start with this...

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
</BODY>

What I want for Christmas

Note- technically we have not started to build the list yet. This is just a sort of heading.

Add a pair of unordered list tags.

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
</UL>
</BODY>

What I want for Christmas

Add a list item.

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
<LI>a big red truck
</UL>
</BODY>

What I want for Christmas
  • a big red truck

Add a few more...

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</UL>
</BODY>

What I want for Christmas
  • a big red truck
  • a real fast speedboat
  • a drum set
  • a BB gun
  • a Melanie Griffith

Bingo! You made a list!

How to make an ordered list? Easy! Change the <UL> tag to <OL>.

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<OL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</OL>
</BODY>

What I want for Christmas
  1. a big red truck
  2. a real fast speedboat
  3. a drum set
  4. a BB gun
  5. a Melanie Griffith

Another type of list is a definition list.

aardvark
A burrowing, ant-eating African mammal. And, as everyone knows, the first word in every self respecting dictionary. Did you know there's such a thing as an aardwolf?

Start with this...

<BODY BGCOLOR="#FFFFFF">
<DL>
</DL>
</BODY>

Then add a definition title...

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>10th Amendment
</DL>
</BODY>

10th Amendment

And a definition item.

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>10th Amendment
<DD>The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.
</DL>
</BODY>

10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

As a finishing touch I like to make the definition title bold. It's not required, but I think it looks much better that way.

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT><B>10th Amendment</B>
<DD>The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.
</DL>
</BODY>

10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

Another little widget that you will find yourself using alot is the Horizontal Rule.

<BODY BGCOLOR="#FFFFFF">
<HR>
</BODY>


We have a few options available to us...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>


This one is pretty self explanatory.

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>


We can control the thickness...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>


And we can make it a solid line.

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>


Lists

  • <HL Attributes>text</HL> List Header
  • <DIR>list</DIR> Directory List
  • <MENU Attributes>list</MENU> Menu List
  • <UL Attributes>list</UL> Unordered List
  • <OL TYPE="type" Attributes>list</OL> Ordered List
    • "type" =
    • A - capital letters
    • a - small letters
    • I - large roman numerals
    • i - small roman numerals
    • 1 - default numbers
  • <LI Attributes>text An item in a directory, menu, unordered or ordered list.
  • <DL Attributes> list</DL> definition List.
  • <DT>text</DT> definition term
  • <DD>text</DD> definition data
    <DT> and <DD> must be used as pairs
    within the <DL> tags
Attributes for all lists:
  • CLEAR=["left"|"right"|"all"] Clear around floating images

Separators

<BR

CLEAR=["left"l "right"l"all"]>
Forces a line break. The CLEAR attribute stops text from flowing around an image

<DIV

CLEAR=["left"|"right"|"all"]>
ALIGN=["left"|"right"|"center"]>
NOWRAP>text</DIV>
- division within the page

<P

ALIGN=["left"|"right"|"center"|"justify"]
NOWRAP>paragraph</P>
- a new paragraph

<HR

CLEAR=["left"|"right"|all"]
SRC= "URL"
SIZE=value
WIDTH=pixels|percent>
ALIGN=["left"|"right"|"center"]
NOSHADE> - a horizontal rule




Extra stuff you may like to know

Adding the colours to lines and Discs.

The code for the red bar is
<HR width=80% SIZE=8 NOSHADE COLOR=red>

I don't like round bullets, I want squares!!!

Easy there chum, you can have your list and squares too. Simply add the command TYPE="square" into your UL command. Like so:

Basic Version     Try a little colour, play with text too.
<UL TYPE="square">
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
</UL>

This is what you get...

  • List Item 1
  • List Item 2
  • List Item 3

      <ul type="square"> <!-- try disc, circle, square -->
<li style="color: forestgreen"><font color="navy">Sprite</FONT>
<li style="color: red"><font color="green">Wedding</FONT>
<li style="color: blue"><font color="maroon">Plans.</FONT>
</UL>

This is what you get...

  • Sprite
  • Wedding
  • Plans.

Nested Unordered List
  • This is the first item
  • This is the second item
    • This is the first subitem of the second item
      • And this is a subitem of a subitem
      • Getting lost yet?
    • This is the second subitem of the second item
    • This is the third subitem of the second item
  • This is the third item
Note how the bullet marks change for different levels of the list.

And this is the HTML format for producing this format: 


  <B>Nested Unordered List</B>
  <ul>
     <li>This is the first item
     <li>This is the second item
     <ul>
     <li> This is the first subitem of the second item
     <ul>
     <li> And this is a subitem of a subitem
     <li> Getting lost yet?
     </ul>
     <li> This is the second subitem of the second item
     <li> This is the third subitem of the second item
     </ul>
     <li>This is the third item
  </ul>

Bullets for Un-Ordered Lists

With some web browsers, you can specify in your HTML any of three bullet characters by adding an attribute to the <ul> tag: 
 <ul type=xxxx>
where xxxx can be:
  • type=circle
  • type=square
  • type=disc [default bullet for top level list]
And even more! You can change the type within a list by putting the type attribute in the <li> tag:
HTML How it Looks 
<ul type=square>
<li>this is item 1
<li>this is item 2
<li>this is item 3
<li type=circle>
     Hey! how about these bullets?
<li>this is another item
<li>and one more
<li type=disc>
     Hey! how about these bullets?
</ul>
  • this is item 1
  • this is item 2
  • this is item 3
  • Hey! how about these bullets?
  • this is another item
  • and one more
  • Hey! how about these bullets?

Note that the type specified in the <li type=xxxx> tag is used by all succeeding <li> tags until another bullet type is selected.

Styles and Values for Ordered Lists

When we first created an ordered list <ol>...</ol> in lesson 6, we saw how the web browser automatically numbers the items, one for each <li> tag. What if we do not always want to use arabic numerals (1,2,3...)? Well, here is the answers, a type=x attribute for the <ol> and <li> tags inside:

Arabic Capital Letters Small Letters Large Roman Small Roman
<ol type=1> <ol type=A> <ol type=a> <ol type=I> <ol type=i>
  1. I am first!
  2. I am second!
  3. I am third!
  4. I am fourth!
  5. I am fifth!
  1. I am first!
  2. I am second!
  3. I am third!
  4. I am fourth!
  5. I am fifth!
  1. I am first!
  2. I am second!
  3. I am third!
  4. I am fourth!
  5. I am fifth!
  1. I am first!
  2. I am second!
  3. I am third!
  4. I am fourth!
  5. I am fifth!
  1. I am first!
  2. I am second!
  3. I am third!
  4. I am fourth!
  5. I am fifth!

We presented an example of using ordered lists within ordered lists to create outlines -- with the type attribute we can have pages with standard format:

  1. Cheese in Pre-Historic time
    1. Africa
      1. Afar Triangle
      2. East Coast
    2. Asia
    3. Europe
      1. France
        1. Cave paintings depicting cheese harvesting
        2. Burial rituals inferred from dried cheese remnants
      2. British Isles
    4. North America
  2. Cheese in the Middle Ages
    1. King Arthur's Longhorn
    2. Sharp Cheddar for the Crusades
  3. Cheese in the Space Age
Another thing we can do with ordered lists is to have them start counting from some other value than 1. to do this, we add the start=y attribute to the <ol> tag. Note that even if we have some other type=x attribute, we still specify the starting value y as "2,3,10,100, etc". Look at some of these examples:
Arabic Capital Letters Small Letters Large Roman Small Roman
<ol type=1
start=11>		 <ol type=A
start=11>		 <ol type=a
start=11>		 <ol type=I
start=11>		 <ol type=i
start=11>
  1. I am eleventh!
  2. I am twelfth!
  3. I am thirteenth!
  4. I am fourteenth!
  5. I am fifteenth!
  1. I am eleventh!
  2. I am twelfth!
  3. I am thirteenth!
  4. I am fourteenth!
  5. I am fifteenth!
  1. I am eleventh!
  2. I am twelfth!
  3. I am thirteenth!
  4. I am fourteenth!
  5. I am fifteenth!
  1. I am eleventh!
  2. I am twelfth!
  3. I am thirteenth!
  4. I am fourteenth!
  5. I am fifteenth!
  1. I am eleventh!
  2. I am twelfth!
  3. I am thirteenth!
  4. I am fourteenth!
  5. I am fifteenth!

And finally you can change the numbering sequence within a list by adding a value=z attribute to the <li> tag. Look at this example:

HTML How it Looks 
<ol type=A start=5><i>
Important Cheese Laws</i>
<li>Cheese Curing Act of 1905
<li>Milk Content Ruling of 1923
<p>
<li value=12>Cheese Import Tariff of 1942
<li>Cheese Freshness Codes of 1942
<p>
<li value=1>Cheese Values Act of 1789
    Important Cheese Laws
  1. Cheese Curing Act of 1905
  2. Milk Content Ruling of 1923

  3. Cheese Import Tarif of 1942
  4. Cheese Freshness Codes of 1942

  5. Cheese Values Act of 1789

It may not be exactly clear (especially from this silly example!) when you might use these tags -- just keep them in your mind as potential tools in your web writing.


Home, Site pages,   Lesson 7


Back to Introduction, 2 Body text, 3 Body attributes, 4 Text Formatting,
5 Adding images, 6 Lists and lines, 7 Links, 8 Other comments.
the 140 Colour the page, using hex numbers,
HEXbcr, HEX test, Complex about colour,
My Web Address is           http://www.geocities.com/mallee2007

This website is developed and maintained by
, Elizabeth Janson

1
Hosted by www.Geocities.ws