Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 23. Using the search/replace function

    See Figure 54. The two texts are not lined up right. The text ”The nature” is formatted with the H3 heading, which the text ”To top” is not.

    If you want both texts to appear alike, you need to format the text links also with H3. Fortunately that is quite easy, and I will show how to do that. Now follow my instructions very precisely:

    1.   Press Control+Home to move the cursor to start of the document.

    2.   Press Control+r, to open the dialog box Find and Replace. That can be used for both search and replace, as we do now.

    3.   Enter the search string To the top in the first field, without entering a replacement text in the second field.

    4.   The click on the Find Next button:

    5.   Then the program finds the first appearance of the text, which will be selected.

    6.   Leave the dialog box Find and Replace open. Double click on the h3 clip:

    7.   Then the text in the document will be surrounded by H3 codes, and both codes and text are selected simultaneously:

    8.   Make a copy now with Control+c.

    9.   Click with the mouse in the dialog box in field number two (Replace with:). Insert the copy with Control+v:

    10. Now both fields are ok. All other appearances of the text should be replaced, but be careful here:

    11. Click twice on the button Find Next to go to the next instance of the search text.

    12. Then please hit Replace All:


    13. The other five occurrences of the search text are replaces with the new text string including the H3 codes:

    14. Now the two texts in the beginning of every paragraph are formatted the same way.

    Find/Replace is an extremely powerful tool. You can use for almost any type of re-format­ting. You search for a specific string (text and/or code) and replace it with something a little different.

    NoteTab executes the replacements in no time. You just have to get used to cutting and pasting between the two fields in the box. You can also replace across many open documents.

    Square bullets

    Here is a little detail I like my self:

    1.   You need to add a line in the CSS declaration to LI (list item). It should read List-style-type: square like here:

    2.   Save the change, and test the page. Now we use a square as bullet:

    The last move

    Now the small layout details are beginning to fall in place. The only thing I am still not satisfied with is the horizontal line and the pictures. Both ”reach beyond” the right margin, where all text otherwise stays within:

    We need to correct that, and we go again to the respective codes HR and IMG.

    Enter the following two CSS statements. You could copy them from existing lines; that is up to you. They need to read:

    HR {      width: 620;
    text-align: left;
    color: navy;}

    IMG {    width: 620;}

    Save the document and test page in the browser. Can you see now that everything on the page is confined to one specified width? The right margin is straight down through the page, which was the objective!

    Notice the HR definition. The line is specified to a width of 620 pixels, but it also needs to be left oriented. That is done with the code text-align: left. That is necessary, since the browser by default centers horizontal lines.

    Now we are finished with this layout. I hope that you learned something from the review. CSS is probably the most powerful tool for HTML layout! Later in the book, on pages 63 and 69, you can read more about the use of CSS.

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

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