Web Page Readings

Lesson 7

Working with text

7.1 Text on a page

Text typed directly onto the KompoZer page defaults to appearing in the format for the ‘Body’ element. HTML defines a small number of elements specifically for text and it is usually preferable to use these.

To format text in a standard element format select the text (it is actually necessary simply to click anywhere within the block of text) and click the first drop-down box on the format toolbar. This offers a selection of standard text formats. Paragraph is the most appropriate for general text.

Once formatted as a paragraph, when typing in a text area, use of the 'enter' key starts a new block of text i.e. a paragraph. To start a new line within the current paragraph press Shift+Enter; this generates a line break.

Note This is the default action and can be altered.

Other standard text formats are Heading formats from Heading 1, the largest (for the main heading), to Heading 6, the smallest (for the least significant). Browsers generally render headings in bold type.

Text can be edited in any of the viewing modes and KompoZer responds to all the normal windows shortcut commands. 

7.2 Block or Inline

The elements just described mark out ‘blocks’ of text.

·        Blocks usually begin on a new line.

·        Blocks have gaps above and below controlled by margins.

·        Vertical margins ‘collapse’ i.e.  The larger margin is applied the smaller is ignored.

·        Within blocks it is possible to mark out sections of ‘inline’ text.

·        Inline text does not usually start a new line. 

Tip: The outline of each block of text can be revealed by selecting View > Block outline. The dimensions of each block in pixels are shown on the rulers at the top and side of the page 

Tip: Text to be formatted may be selected in one of several ways. Simply place the cursor anywhere in a block. Where the formatting desired can only apply to a complete block this is sufficient.Double-click within a block to select a word.Triple click within a block to select a line of text.Drag across a section of text to highlight and select that section only.In HTML Tags view press the Control key while clicking on the tag for the block to select the complete block.Using the status bar.   

7.3 Formatting text

Text can be formatted in a number of ways using a format toolbar. The changes listed in the table can be applied (hover over a tool to discover what it does). 

Choose a font *

Choose text colour                                               *Choose background colour

*Choose highlight colour

*Make text smaller                                              *Make text larger

*Embolden                                                          *Italicise                                           *Underline

*Format as a numbered list                                   *Format as a bulleted list

Align left                                     Align Centre                                Align right                                 Justify

Indent text                                                            *Outdent text

Emphasise                                                            *Strongly emphasise

Note 1 For the options marked with an asterisk select an inline section of text. This allows you to have a few words in a paragraph of a different size etc. (When you do this, if you use the ‘HTML Tags’ view, you will see the start of the change marked with a ‘Span’ marker.) 

Note 2 ‘Choose background color’ sets the colour for the background of the current block. If ‘Use CSS Styles …’ is not checked it has no effect. 

Note 3 The emphasis button will result in italicized text with most browsers and the strong emphasis button in bold text. 

Warning. When using Strict Doctype check 'Use CSS styles instead of HTML elements and attributes' in Tools > Options > General to ensure availability of all options.  

7.4 Positioning text

Generally the position of text is determined by the fact that one block flows on after the previous one etc.

The space between blocks is determined by the browser. Through the use of styles these settings can be altered.

Paragraph and heading blocks stretch from one side of the screen to the other. This a very elegant way of operating. Try resizing the KompoZer window. Until it becomes so narrow that nothing can fit, the text reformats so that it still fits – though narrower it becomes longer. It is fundamental to the way the web operates that it is designed for information transmission and not presentation. Web design tools allow us to refine presentation but, if we over constrain it, we may run into problems of getting it to fit on the screen. We really should allow the browser as much freedom as possible. 

7.5 Fixed width text

KompoZer allows you to constrain the width of paragraphs. (The same applies to headings.) Try this. Set the window size so that it is somewhat narrower than the full screen width i.e. so that you have space either to narrow it more or to widen it.

Take two longish but similar paragraphs which fill about half of the window. Click in one, you will see the rulers both across the top and down the side. Grab the left edge of the ruler and draw it half way across the window. Do the same for the other paragraph but take the right edge of the ruler and drag it half way to the centre but in the opposite direction.

You probably think that you've achieved a rather elegant layout and discovered a flexible tool. Drag the window to be wider then narrower. Do you still think so? What you have done is to set the text to be in a fixed position and of fixed width. It no longer re-flows. Consider that visitors who view your pages may have smallish or very large screens. Will they all see what you want them to?

Supposing that you don't like what you have just done – you can just Undo it – press the Undo button or click Ctrl+Z. However if you leave it to later you would first have to undo all later work. You can re-or-de-format a paragraph directly and individually. This allows you precise control rather than relying on dragging the ruler. Go to ‘HTML Tags’ view, click on the yellow ‘p’ marker for a paragraph, on the status bar right-click on the highlighted ‘p’ area and select ‘Inline styles’. In the general tab that appears just delete the text and click ‘OK’. Alternatively select ‘Box Properties’. This allows precise editing of the paragraph within the ‘box’ in which it is contained. 

Tip: Instead of using HTML Tags view it is quicker just to click in the paragraph and click the corresponding

marker on the status bar. This will highlight the paragraph. After that just right click as described.