Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 6. Headings and basefont

    The next real central subject will look at is the so-called headings and font selection.

    Re-enter the document

    You will continue working with some small exercises that both show how the NoteTab program works and then continue with different HTML codes.

    1.   Open the NoteTab Light program again.

    2.   Notice that those documents you worked with last (here test2.htm) are entered automatically.

    3.   But it is always easy to re-open documents in NoteTab; try for you. Select menu items File à Reopen:


    4.   That gives a list of the latest files that you have used. There are some other methods to quick re-opening of HTML documen­ts, but we will return to that later.

    5.   You have the test2.htm document on your screen. Delete the 6 lines of text that you worked with in the preceding exercise. In stead insert some blank lines between <BODY> and </BODY>, and place the cursor there.

    6.   Save the document as test3.htm.

    7.   Now we are going to look at the headings concept. Look in the left frame (the HTML library). There you need to return to the section with quick tags. Find the clip h1 and double click on that:

    8.   The result is that two codes (<H1> and </H1>) are inserted, and the cursor is placed between them:


    9.   Now enter the text This is heading 1.

    10. Press End and Enter to go to the next line. Enter the following sentence here:
    And this is an ordinary paragraph

    11. Save the document and test the product in the browser (press F8). Explanation follows…

    Figure 17. The first text line is formatted with Heading 1.

    An explanation

    In the previous exercise you formatted a line with the HTML codes <H1> and </H1>. Headings are formatted as such and that is some of the oldest and most basic in the HTML standard. The system is quite simple:

    ·        The codes <H1>, <H2>, <H3> and <H4> give the heading levels 1, 2, 3 and 4.

    ·        Each level has its own font formatting. H1 gives the largest font, H2 a little smaller and so on.

    ·        The end codes (fx </H1>) result in a paragraph break.

    I am sure this sounds quite simple, and it is. Try for yourself all four heading levels:

    1.   You need to copy the two lines of text. Select them, and make a copy with Control+c.

    2.   Insert the copy three times with Control+v. Adjust the three new blocks, so you are using H2, H3 and H4 in those:

    3.   It is nice to be able to copy and reuse/adjust code lines across the documents. That is a lightning fast technique one you get used to it!

    4.   Save the document, and test it in the browser. The result should look like Figure 18.

    Figure 18. The result of the exercise using head­ings.

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

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