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!
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
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
...A horizontal rule of thickness 2 pixels, color red, width that goes 40% of the screen
and use of the
The best way to check all this out is just to experiment! Just using
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
HTML supports 3 types of list and again we use the
1) Unordered List: uses the tags:
Will give you a list that looks like:
And the variable for the attribute
2) Ordered List: uses
Will give you:
And again, you can use the
3) Definition List:
uses the tags
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?