Setting Out Your Page...continued

OK, let's add some text now. Normally, any text will be part of a paragraph. You use the <P> tag to start a new paragraph and the </P> tag to finish one. Here's a couple of paragraphs describing "Alice's".
 

• type them in so that your code looks like this:
   

• view the document in your browser
   

It's worth pointing out at this early stage that, in the example code above, blank lines - as, for example, between the two paragraphs - have absolutely no bearing on the way that the browser displays the paragraphs. They do, however, make the code much more readable to us, and that's why you should try to use them. The following code will produce exactly the same result in your browser window:
 

There is a lot of misunderstanding here and many fall into the trap. The only things that control how the text is laid out are the tags themselves and your browser will cheerfully ignore both RETURN and TAB characters. You should also note that pressing the SPACE bar more than once to try to add extra spaces is futile since the browser will only treat it as a single space anyway!

So, the <P> and </P> tags open and close a paragraph. Many browsers don't care whether you put in the </P> closing tag or not but we suggest that you should do it as a matter of course.

One way to make your page more readable is to break it into sections using horizontal rules.

Add the tag <HR> your cafe.htm document to look like this:
 

• view your document in the browser and you should see a horizontal rule at the bottom of your page
   

Note that there is no closing <HR> tag. There are different ways to use the <HR> tag - some of them are listed here:
 

• try each of these in turn to see what they look like
   

Whether you use upper case or lower case letters for these tags is a matter for your own taste - the browser really doesn't care, but you should try to be consistent and produce code which is set out clearly.

So what do the various bits of code do? We'll come to that in a minute, but first...

The resolution of your screen is measured in pixels. Typically this would be 640x480, 800x600 or 1280x1024. The more pixels, the higher the resolution and the more detailed the display. The trade-off is that high resolution displays require more memory and more computing power...

...and why are we telling you this?

Well here goes: the single biggest mistake that web designers make is to assume that other people will see their pages just as they see them.

It simply isn't so, and it just doesn't work like that.

How your pages are seen will depend on several things: the resolution of the user's screen, the type and version of browser - they don't all work in the same way, the number of colours available, the type of machine - PC, Mac, Unix and so on, to mention just a few. Consider also, that partially sighted people may use larger font sizes to make it easier to read - you have no control over that, and nor should you have. And don't forget that many people have several programs open at the same time and don't necessarily maximise the window of their browser!

Did we say it was going to be easy?

Anyway, back to the question...

The '200' in the line <HR WIDTH=200> means that the ruler will be 200 pixels wide, so if their screen resolution is 800x600, then it will take up a quarter of the screen width.

The code <HR WIDTH="50%"> produces a ruler which is always 50%, or half, the screen width, no matter what the resolution is set to - note that you must include quotes.

The other two examples show that you can alter the thickness of the ruler - as measured in pixels again - and that you can also align the ruler left (which is the default), center (note the spelling!) or right.

You now have the ability to set up a simple page with headings, text and rulers. Maybe it doesn't look much yet, but we've got to start somewhere....coming up next: hypertext links!