So, moving on from the previous page, at some point you will want to have lists and other more complex text formatting. This page will show you 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 by now that in your code you use symbols like /, =, ", < and >. Well, because these symbols are used in HTML, you can't use them in your text otherwise your browser will think they are codes. In fact, browsers often do allow some of these in your texts - but other browsers do not! So how do you get those characters to display if you can't actually type them in your text? You use what are called HTML escape characters, also known as escape sequences.

How do you type an escape sequence? Well, they always start with an & and end with a ; - you can see that the latter two symbols are also characters that if you want them in your text, you have also to use the escape sequence! For example, to put an & in your text, say in the example "apples & pears", you simply type the text with an escape sequence, thus typing Apples & Pears will sort out the problem - see the escape sequence? It is the bit starting with an "&". Here is a list of the escape sequences for the symbols we have mentioned above:

See the appendix (menu on the left) for a full list of HTML escape sequences.

You can see from this page alone, that I tend to make extensive use of horizontal rules: they just help make things look a little easier to read! All you do is use the command <HR>, (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

...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:

• "SIZE" attribute defines the thickness in pixels, so can be whatever pixel size you want.
• "WIDTH" attribute 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.
• Colour: there is no attribute for this, but you will learn later how to change a line's colour...

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.

NOTE 1: 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 the same situation if you want to include more unusual types of text.

NOTE 2: In fact, current versions of HTML do not support the colour attribute of the HR element (which is why this page is actually not compliant with current standards if anyone who is an HTML coder reads this!). 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.

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:

You use these where you want something to appear on your source pages but not be seen in the browser window. I use this extensively to break-up the sections of my code into chunks (as you can see if you look at my source files), just so it is easier for me to locate bits of it I may need to edit! All you do is enclose the text in a tag with an exclamation mark and a certain amount of dashes, as below:

Do remember though, that just coz it don't appear in a browser window it don't mean others can't see it! If you are able to view source, then so is everyone else! You would be surprised at some of the funny stories I have heard where people have received email from others, commenting on the nature of things they had written in their view source pages, simply because they had forgotten that other people can view this!

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