2.4 Lists & Extras

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!



Escape Characters

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 &amp; 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.



Horizontal Rules

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

<div align="left"> <HR SIZE="2" COLOR="#0000ff" WIDTH="40%" NOSHADE> </div>



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



Lists

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:

<div align="left">
<UL TYPE="circle">
<LI> First item
<LI> Second item
<LI> Third item
</UL>
</div>

Will give you a list that looks like:

  • First item
  • Second item
  • Third item

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:

<div align="left">
<OL TYPE="i">
<LI> First item
<LI> Second item
<LI> Third item
</OL>
</div>

Will give you:

  1. First item
  2. Second item
  3. Third item

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:

<div align="left">
<DL>
<DT> First thing
<DD> Its definition
<DT> Second thing
<DT> Its definition
</DL>
</div>

Will give you:

First thing
Its definition
Second thing
Its definition

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:

<div align="left">
<OL>
<LI> First thing
<LI> Second thing
<UL>
<LI> First bulleted nested thing
<LI> Second bulleted nested thing
<UL>
<LI> Third thing
<LI> Fourth thing
</UL>
</div>

Will give you:

  1. First thing
  2. Second thing
    • First bulleted nested thing
    • Second bulleted nested thing
  3. Third thing
  4. Fourth thing


Exclusion Tags

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:

<!--piece of text you don't want to appear on the web-page -->

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?


Back To Noframes Version Next
 

Didi Barnes is a member of:
The International Webmasters Association The HTML Writers Guild
web site design
© 1998-2008 Didi Barnes - All Rights Reserved.
No part of this HTML tutorial may be reproduced, stored in a retrieval system, or transmitted,
in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise,
without the prior permission of the copyright owner who may be contacted using the link above.

Passed HTML 4.01