Minute Six

Lesson Plan:

Part 1: Lists, indentation and that sort of stuff

You may remember that in minute one I said that the browser ignores carriage returns. If you want to make a line break you use <P> or <BR> .

But the news is worse than that -- the browser ignores leading spaces too! How can you indent anything? Not to worry -- you'll use lists.

There are two kinds of commands used in building lists -- a command to mark the start and end of the list as a whole and a command to mark the start of each separate item on the list.

OK -- lets build lists!

Part 2: Bullet lists

When the browser displays it each item in a bullet list starts with a bullet (the technical term for this is a "big dot.") When we write the html, the entire list begins with <UL> and ends with </UL> and each item starts with <LI> and ends with </LI>.

Here's an example:

<UL>
<LI> This is one of the things on this list.</LI>
<LI> This is another one of the things on this list but I wanted you to see what it would look like if the item was more than one line long.</LI>
<LI> Here is the last thing on the list and again I'm going to make it a very long one. Not only will it be long, it will have a second paragraph.
<P> Such as this second paragraph which is also meant to be sort of on the long side. Which is to say it will go on and on, but you shouldn't be reading this nonsense when you should be learning html.</LI>
</UL>

When your browser formats this it will look like:



Part 3: Numbered lists

Numbered lists are almost the same as bullet lists except that they start with <OL> and end with </OL >. Remember -- the browser provides the numbers -- not you.

<OL>
<LI> The first item </LI>
<LI> The second item </LI>
<LI> The third item </LI>
</OL>

Which will look like:

  1. The first item
  2. The second item
  3. The third item


Part 4: Definition lists

Definition lists begin with <DL> and end with </DL> . There are two kinds of items on a definition list: <DT> and </DT> mark the term being defined and <DD> and </DD> mark the definition.

BUT -- don't think in terns of definitions. Think of this is a kind of main point, sub point formatting.
<DL>
<DT> If you think about this.</DT>
<DD> Then you will see possibilities in this kind of format. </DD>
<DT> If you look at web pages.</DT>
<DD> Then you will find uses for a definition list that have nothing to do with definitions. </DD>
<DT> If you think only of definitions.</DT>
<DD> Then you are going to lose html power. </DD>
</DL>


This will look like:

If you think about this.
Then you will see possibilities in this kind of format.
If you look at web pages.
Then you will find uses for a definition list that have nothing to do with definitions.
If you think only of definitions.
Then you are going to lose html power.


Part 5: A Shortcut

When you want to control where spaces go in a line of text there usually is some fairly elegant way of doing it -- just like in the four parts of this lesson above. But lets suppose that just want to throw a number of spaces in front of a line
   Like the three spaces in front of this line.

Ok -- for every space that you want, you insert the following unlikely set of symbols
&nbsp;
So in the line above where I wanted three leading spaces, I started with &nbsp; &nbsp; &nbsp;
Both the ampersand at the front and the semicolon at the end are part of the command and, unlike most HTML commands, there are no pointy brackets.
Just in case you want to know, nbsp stands for non-breaking space. A non-breaking space is just like any other space except a browser always puts it in.






Prev. Lesson Next Lesson




This page is at: http://testbed.cis.drexel.edu/MinuteSix.html
8 Minute Html by M. Carl Drott