Sections • Inside • ZipArchive • Samples • Tutorials • Banner Factory • Forum

Indents

Introduction to Indents A web page should consist of both text and images evenly balanced. Ideally there should be a bit more text than there is images. A common mistake when putting text on web pages is that it is allowed to run from one side of the screen to the other and in line after line. The result is large blocks of text in very long lines. This makes the text difficult and tiring to read, and it looks rather discurraging. The ideal length of a line of text is fifteen words (give or take a few depending on the length of the words). You should be able to read the text without moving your eyes, or even worse: your head. Moving your eyes (or head) from side to side is tiring, and seeing large blocks of text in long lines makes at least me skip reading the text. In some cases even skip the intire site! So do you deal with this problem? The answer is to use indents which this page is all about. You can of course use tables also.

Menu • Fonts • Colours • Background • Images • Tables • Linking

How to use indents (The <BLOCKQUOTE> tag) There are many ways to make your page look better and more professional. The changes needed are often small and simple to implement. To separate my comments from the text I am working with I have marked the text in the colour dark green and the HTML tags dark blue and red (closing tags) I am going to use two different tags here <BLOCKQUOTE> </BLOCKQUOTE> and <P> </P> The first tag, the <BLOCKQUOTE>, is a so called container tag. This means it has some text between the starting tag and the closing one (i.e. </BLOCKQUOTE> ). The tag is used to make indents to the text. I will show you how it works. The other tag is one I have presented before: The <P> paragraph break tag (the effect is similar to hitting Enter twice when using a word processor). Don't forget to close each tag with </P>

Now, in order to have something to work with I will have to write down some text here. As you can see it goes from the left hand side of the page to the right hand side before the line breaks. This is of course when you write your text with an HTML editor. If you write the code yourself you will have to use the <BR> (linebreak) tag whenever you want the line to break. Also, as I am sure you can see, I am using the font Times New Roman here. Normally I wouldn't use that font. The reason why I am using it know will be explained later. As I continue to write the block of text grows longer and longer, an for every new line it gets harder and harder to read. The sentences are long and without any real breaks. The length of the sentence forces you to move your eyes slightly from side to side in order to read the whole sentence, and the lack of breaks gives you hardly any chance to relax a little since you are bound to lose track of how far you have got. The reason is that you can't see the whole sentence in just one look. You will have to move your eyes (or head) in order to do that. When you look at the end of one sentence you can't the beginning of the next one. To do that you will have move your eyes slightly to the left, and when you do you will no longer see the end of the previous sentence. These constant losses of contact makes your eyes (and you) tired and you will have to concentrate hard not to lose track. Just look at this block of text now. Is it easy to read? No, I wouldn't think so. We have to do something about it.

b

The first thing we are going to do is to divide the large block of text into some smaller paragraphs. I think a good place is between the words "...later. As...". Why there? Well, if you reed the text you will find there is a change of content which makes a break come natural. Since I think we should have to paragraph breaks in the block of text we will have to find another place for one. Hmm, not so easy, it seems. The best place is, I think, between "...that. When...." even if the break isn't quite as clear as the first one. This is the same text with two <P> inserted.

<P> Now, in order to have something to work with I will have to write down some text here. As you can see it goes from the left hand side of the page to the right hand side before the line breaks. This is of course when you write your text with an HTML editor. If you write the code yourself you will have to use the <BR> (linebreak) tag whenever you want the line to break. Also, as I am sure you can see, I am using the font Times New Roman here. Normally I wouldn't use that font. The reason why I am using it know will be explained later. </P> <P> As I continue to write the block of text grows longer and longer, an for every new line it gets harder and harder to read. The sentences are long and without any real breaks. The length of the sentence forces you to move your eyes slightly from side to side in order to read the whole sentence, and the lack of breaks gives you hardly any chance to relax a little since you are bound to lose track of how far you have got. The reason is that you can't see the whole sentence in just one look. You will have to move your eyes (or head) in order to do that. </P> <P> When you look at the end of one sentence you can't the beginning of the next one. To do that you will have move your eyes slightly to the left, and when you do you will no longer see the end of the previous sentence. These constant losses of contact makes your eyes (and you) tired and you will have to concentrate hard not to lose track. Just look at this block of text now. Is it easy to read? No, I wouldn't think so. We have to do something about it. </P>

b	As you can see it is already easier to read. However the sentences are still far too long. Time to use the <BLOCKQUOTE> tag. Of course you won't see the tag in you editor (if you are using one), but if you view you page in Notepad you can see the tags in position:

<BLOCKQUOTE>   <BLOCKQUOTE>   <P> Now, in order to have something to work with I will have to write down some text here. As you can see it goes from the left hand side of the page to the right hand side before the line breaks. This is of course when you write your text with an HTML editor. If you write the code yourself you will have to use the <BR> (linebreak) tag whenever you want the line to break. Also, as I am sure you can see, I am using the font Times New Roman here. Normally I wouldn't use that font. The reason why I am using it know will be explained later. </P> <P> As I continue to write the block of text grows longer and longer, an for every new line it gets harder and harder to read. The sentences are long and without any real breaks. The length of the sentence forces you to move your eyes slightly from side to side in order to read the whole sentence, and the lack of breaks gives you hardly any chance to relax a little since you are bound to lose track of how far you have got. The reason is that you can't see the whole sentence in just one look. You will have to move your eyes (or head) in order to do that. </P> <P> When you look at the end of one sentence you can't the beginning of the next one. To do that you will have move your eyes slightly to the left, and when you do you will no longer see the end of the previous sentence. These constant losses of contact makes your eyes (and you) tired and you will have to concentrate hard not to lose track. Just look at this block of text now. Is it easy to read? No, I wouldn't think so. We have to do something about it. </P>   </BLOCKQUOTE>   </BLOCKQUOTE>

b

Now it is definitely easier to read! You can also see how and where the <BLOCKQUOTE> tags are inserted. To that with an editor all you have to do is select the text and click twice on the Indent button. You will find it in the toolbar (I can't say exactly where since it may vary between different editors) Remember I mention the font before? I also said I would explain it later. Well, now that time has come. Times New Roman is a beautiful font but it is much more suitable for documents than web pages. The small serifs (that's the tiny hooks on the letters) makes the font somewhat hard to read, especially in larger portions of text. So let's change font and see how it looks:

<BLOCKQUOTE>   <BLOCKQUOTE>   <P> Now, in order to have something to work with I will have to write down some text here. As you can see it goes from the left hand side of the page to the right hand side before the line breaks. This is of course when you write your text with an HTML editor. If you write the code yourself you will have to use the <BR> (linebreak) tag whenever you want the line to break. Also, as I am sure you can see, I am using the font Times New Roman here. Normally I wouldn't use that font. The reason why I am using it know will be explained later. </P> <P> As I continue to write the block of text grows longer and longer, an for every new line it gets harder and harder to read. The sentences are long and without any real breaks. The length of the sentence forces you to move your eyes slightly from side to side in order to read the whole sentence, and the lack of breaks gives you hardly any chance to relax a little since you are bound to lose track of how far you have got. The reason is that you can't see the whole sentence in just one look. You will have to move your eyes (or head) in order to do that. </P> <P> When you look at the end of one sentence you can't the beginning of the next one. To do that you will have move your eyes slightly to the left, and when you do you will no longer see the end of the previous sentence. These constant losses of contact makes your eyes (and you) tired and you will have to concentrate hard not to lose track. Just look at this block of text now. Is it easy to read? No, I wouldn't think so. We have to do something about it. </P>   </BLOCKQUOTE>   </BLOCKQUOTE>

b	Not bad, if I may say so myself. The font I used is Verdana. I had to reduce the size from 10 points (size 2 in the HTML code) to 8 points (size 1) in order to make it about the same size as i t was before. Now, using Verdana is my personal choice and you don't have to follow it if you don't want to.
b	-- Close this window to return to the main page menu --