Want to have a list or a horizontal rule? Here's how...

Again, it would be good to have your text editor open, then you can play with all these examples, save the file, and see what they look like in your browser and learn as you go along!

You can see from this page alone, that I tend to make extensive use of horizontal rules like the one above and below the heading above. They just help make things look a little easier to read! All you do is use the <HR> element, (no end tag is needed). You also need to remember to use the <DIV> element that we introduced on the previous page to align these horizontal rules which can have a number of different attributes, as in the example below

<div align="left"><HR SIZE="2" WIDTH="40%" NOSHADE></div>

...and the code above simply produces a horizontal rule that looks like the below:

...that is, a horizontal rule of thickness 2 pixels, color red, width that goes 40% of the screen and use of the <div> tag makes it aligned to the left. The attributes:

• "SIZE" defines the thickness in pixels, so can be whatever pixel size you want.
• "WIDTH" tells the browser what length of the screen the horizontal rule should extend to, so is obviously 100% if you want the line to extend the whole width.
• NOSHADE: forces the line to be solid instead of bevelled.

The best way to check all this out is just to experiment! Just using <HR> with no attributes, will give you a inset 3D looking bar going 100% across the page.

COLOUR: In fact, current versions of HTML do not support the colour attribute of the HR element. So how to make the line a different colour? However, it still works and for the basis of learning HTML it is plenty good enough for most people! I will talk more later about HTML standards, especially the current one.

NOTE: You can also use a graphics file as a horizontal rule (really called a border). This is how I have done the ones with the blinking eyes that I have used above the copyright information text at the bottom of this page. To do this, you need to learn about "inlining images" which I will show you in the next section! This is exactly the same situation if you want to include more unusual types of text - you have to use an image.

HTML supports 3 types of list and again we use the <div> element to align them:

1) Unordered List: uses the tags: <UL> and </UL>, and will give you a bulleted list of a type you can specify. For instance, the code:

Will give you a list that looks like:

And the variable for the attribute TYPE="....", can be used to specify the type of bullets you want. This can either be TYPE="square" for square-looking bullets; TYPE="sphere" which are the black blob ones that are mostly used on this page (and is default anyway, so don't bother to code for it unless you have to!) and TYPE="circle", which gives you outline circles like those shown in the example above.

2) Ordered List: uses the tags: <OL> and </OL>, and will give you a numbered list. For instance, the code:

Will give you:

And again, you can use the TYPE="...." attribute to specify the type of numbering system. You can set this to TYPE="1" (the default), TYPE="i" (for i, ii, iii, iv, etc), TYPE="a" (for a, b, c, etc) and TYPE="i" for roman numerals.

3) Definition List: uses the tags <DL> and </DL>, and gives you a list like the below:

Will give you:

4) Nested Lists: are lists within lists, the example I use below is of an unordered list nested within an ordered list (obviously you can use the attributes I have detailed earlier, relevant to the type of lists you are nesting:

Will give you:

NEXT: So how do you get images on your page?