Copyright Michael Karbo, Denmark, Europe.


  • Next chapter.
  • Previous chapter.


    Chapter 5. Text and line length

    We keep concentrating on the text, as it is shown on the home page. I presume you have typed in a long line of nonsense similar to what you saw in Figure 15. Now let us check the browser and see how it shows text in lines.

    As you read it, the following review may appear quite ”dry.” But the subject is central to present the text neatly on the page. And that requires an understanding about the relationship between line and paragraph!

    Line breaks in paragraphs

    As you can see Figure 15, the window is quite small. I chose that to force a couple of line breaks. I succeeded, now the first paragraph is ”broken up” in three lines.

    In the following figure I reduced the window even more, which forces the browser to break up the paragraph into four lines. Remember still that the <P> code concludes the paragraph

    Try for yourself

    You still have the windows with NoteTab Light and the browser open.

    1.   Try to scale your browser window up and down in size. You can ”drag” in the window corner to change the size:

    2.   If you can not drag the window size, it is because you work with a window in full screen size. You change that easily by clicking on the center of the three small buttons that are in the upper right corner of the window:

    3.   Now you can change the window size. You will surely see that the line length in the large text paragraph changes.

    4.   In NoteTab the same holds true, only it is of less importance. If you reduce the NoteTab further, you get more line breaks in the text:

    5.   Finally maximize both program windows.

    Generally you should organize your test in paragraphs, each of which may be multiple lines. The problem with line breaks is that not all monitors have the same ”size”; some use a resolution of 800x600, others 1024x768 etc., and that can make the breaks quite different from pc to pc.

    The line length can be reduced by placing the text in a table, as you will see later. Certainly do not make manual shifts.

    The line can be broken

    You can ”break” lines two ways:

    ·        With the <BR> code

    ·        With the <P> code

    BR stands for break. That forces a new line within the same paragraph. That means that there will not come ”extra space” above the line. Contrary, the P code set an amount of space between the paragraphs, as we have seen.

    1.   Try to insert some BR codes here and there in the long text string. For now the easiest is to use the HTML function library, so if you have not done that already click on this button:

    2.   You see that all the codes can be inserted from the clips in the library that is seen in the tall left panel. Try to thumb your way to the bottom, then you find the so-called Quick Tags:

    3.   Place the cursor where you want the line break. Select the clip br, as seen in the above figure, then insert it either with a double click or by pressing Control+Space.

    4.   Move the cursor somewhere else and insert another line break. Repeat that a couple of times.

    5.   Then look at your ”work” in the browser window. Try to figure out, how many <BR> codes I have inserted in my version below:

    Figure 16. The long text string is broken up in five single lines. This happens in the browser!

    Another attempt

    I want to dig in a little deeper in the subjects line and paragraph break. Do this exercise in NoteTab Light:

    1.   Save the test.htm document as it appears on the screen now.

    2.   Then save it again, but this time under the new name test2.htm (menu selection File à Save As).

    3.   Now delete all text between the two BODY codes, so all text is removed from the home page:

    4.   Save the file and test it in the browser. The page needs to be blank.

    5.   Then enter the following between the two BODY codes, using the panel with Quick Tags to insert the codes:

    Line 1 <BR>
    Line 2 <P>
    Line 3 <BR>
    Line 4 <BR><BR>
    Line 5 <BR>
    Line 6

    6.   Save the document and check the result in the browser.

    The explanation

    If you look in the code, then you see that the lines 1, 3 and 5 end with BR codes. That does not cause use of extra space since those codes do not cause paragraph breaks.

    After line two there is ”extra space”, which is then followed by the paragraph code <P>.

    After line four you inserted two <BR> codes, and that results in the same space as one <P> code:

    1.   Now try to experiment with two <P> codes at the end of line two. What kind of spacing does that give?

    2.   Then try to put three <BR> codes in line four – what happens then?

    3.   Save the document.

    4.   Close NoteTab Light with Alt+F4.

    If you look in the browser window, you will see that line two has not changed. No additional spacing was added, even though you added another <P> code. So this does not work; you can add <P> codes until you are blue in the face, You only get ONE new paragraph.

    But the <BR> code can be repeated, as you certainly have seen. Each repeat moves the following text down one line.

     


  • Next chapter.
  • Previous chapter.


  • HTML Tutorial Overview.

  • Get the files for this tutorial (opens in a new window)