Chapter 2: Formatting Text
From NvuTutoriaWiki
Nvu being a WYSIWYG text editor for web documents, you can just type in the text you want to display when users view the page while browsing your website. The process of designing a web page with Nvu is similar to writing and formatting a letter/article in your favourite text editor. Just plain text does not appeal that much to the eye as it lacks design and presentation. With Nvu you can easily format the text you want to write so as to have an attractively styled text (using all the HTML formatting features) which will be pleasing to read. In this chapter, we will discuss different ways to format text in a web document using the Formatting Toolbar. Another way to make better styled pages is to use style sheets. An introduction to style sheet will be added to this tutorial at a later stage.
Don't forget to click "Save" button every few minutes.
Browsers use mainly two types of boxes to render a part of text in your web document. Text can be enclosed in a block-level element, e.g. <h1>...</h1>, <h2>...</h2>, <p>...</p>, etc, or in an inline element, e.g. <b>...</b>, <em>...<em>, etc.
Generally, block-level elements my contain other block-level elements and/or inline elements. Block-level elements, by default, begin with a new line unlike inline elements.
By default, inline elements can contain data and other inline elements but not block level elements. Inline formatting options on the formatting toolbar consists of setting font color and background, highlighting text, changing font size, bold, italic or underlined text.
Having a general picture a block-level and inline HTML elements lets study how to use them in a web document.
Contents |
Heading Levels
Heading in a document can be used the same way they are used in books, newspaper articles, etc. As you might have noticed, a heading is generally a few words formatted to stand out from the normal text following it. It is advisable to keep heading text short i.e. just a few words. HTML allows 6 different levels of headings, h1, h2, ..., h6. Heading level h1 being the top most and h6 being the smallest.
You can also change the default rendering style of an HTML element by using CSS.
To format a part of text as a heading, select the desired text (click-and-highlight) and then choose the heading level you want (Heading 1, Heading 2, etc.) from the Body Text drop down menu from the formatting toolbar. The selected text will be formatted according the heading level you selected. The heading of this section is a Heading Level-3 heading, and the name of this chapter is formatted as a Heading Level-1 heading (although text-color has been changed for the chapter title). It is interesting to note the fact that the headings in the sample text are black in color whereas in the tutorial headings are of a navy blue color with a barcode-like background. This has been accomplished using cascading style sheets. CSS can be used to change the default style of an element as displayed by the browser. Using CSS is an elegant way to separate the content from the design part of a webpage. However, an introduction on how to use CSS would be out of scope at this point of the tutorial. It will be dealt at an advanced stage of the article.
You can see the Heading Level-1 in action as applied to section headings by clicking [sampleText-h2.xhtml here]. The Heading Level formatting has been integrated with all other formatting done in this chapter at the end of this page.
Paragraph
Just as there are paragraphs in written text, HTML also allows grouping sentences into a paragraph. Text enclosed in <p> and </p> is treated as a paragraph in HTML. Text marked-up as a paragraph is a block-level element and hence each paragraph starts with a new line.
To mark a bunch of sentences as a paragraph in your web document, select all those sentences with the mouse (click-and-highlight) and choose the "Paragraph" option in the Body Text drop down menu from the formatting toolbar. Even this paragraph of text has been enclosed by <p> and </p> HTML tags. Our sample text has the first two groups of multilined text marked as paragraph styled text.
Bold, Italic and Underline text
Use I, U and B sparingly. Too much of their use distracts the eye.
Text can be marked bold, italic and/or underlined by using the corresponding buttons on the formatting toolbar. You can select any part of text from your document to mark it as bold, italic or underlined. The selected text can also be a part of block as inline elements can be nested in block-level elements. To format selected text as bold, just click on the "Bold" button in the format toolbar after selecting the text. The selected text will change to bold-faced text as this line. For italic, and underlined text following same procedure using corresponding buttons (I, U) from the format toolbar.
To increase the font size of a section of text, select the text, and click on the "Larger font size" button on the formatting toolbar. Follow similar procedure for decreasing font size using the "Smaller font size" button. Our sample text has been formatted with larger font sized first word for each paragraph.
Choosing a Font Face
You can choose the font face you like for the text you type in your document. The font face can be changed for any element in your document. To change the font face of a part of text, select the text (click-and-highlight), and choose the font face you like from the "Choose a font" drop down menu (by default it is on the right of Body Text drop down menu) in the formatting toolbar. This line has been formatted to be shown using the "Arial" font face.
While choosing the font face of a section of text, you should keep in mind that when a users visit your web page, the text shown in their web page will be rendered using the fonts they have on their machine. If they don't have a font that you specified in your web document, their browser will use the default font for that particular system to render that particular part of text which may result in a very different design than you see on your machine. So, the best practice is to use a generic font-family as the last option. A generic font-family tells to use the default font for that particular family in case the machine does not have the font you specified.
Our sample text has the last line of each paragraph formatted to have courier font face, and if is not available the monospaced font face is used.
Font Color
Changing the color of the whole or a part of text in your document can be easily accomplished by using the "Choose color for text" button. To locate the Choose color for text button, see Formatting Toolbar section in Chapter 1.
Image:ColorPicker.pngFig 2.1 Color Picker dialog box
To change the color of all or a part of text in your document, select the text (click-and-highlight) for which you want to change the color. Then click on the Choose color for text button. This will open the Text color picker (Fig2.1). Select the color you want for the text either by clicking on the color in the shade-box or typing in the Hexadecimal value of color code e.g. Red = #FF000. Click OK to confirm the changes. A similar procedure was followed to make the text for the first paragraph of our sample text brown in color. While selecting colors for text users are advised to use colors which are easy to read i.e. text color is contrasting enough as compared to its background color.
Background Color and Highlighting Text
To add some style to your document you can also change the background color for a block of text or even the whole document. Select the block of text for which you want to change the background color. Then click on the Choose Color for Background button on the format toolbar (behind the Choose color for text button). This will open the Color Picker where you can select the color for the background. After selecting the color click , and save the changes.
As an example, the second paragraph of our Chapter_2:_Formatting_Text#sampleText sample text has been given colored background. To see just the background formatting effect on the raw sample text (in your default browser), click [sampleText-bg.xhtml here].
The above procedure will change the background color for the selected background, i.e. if you selected a block of text in between a paragraph, it will change the background color of the whole paragraph. In other words, the background color change is applicable to block level elements. To change the background color of just the selected text, i.e. highlight the selected text, click on the Choose Highlight Color for Text (pen icon Fig1.3). This will open the color picker and after selecting the color you want for the highlighting, click on and save the document.
A nice example of text highlighting has been presented in our sample text, where the text "numbered list" has been highlighted in a shade of aqua color. To just see the highlighting in action (in your default browser) click [sampleText-hl.xhtml here].
Creating Lists
Several times we need to gather some data or things into a list. Nvu gives us two simple types of lists, viz. ordered list and unordered list. Creating either ordered or unordered list involves the same procedure except the button used to initiate the process. To create the ordered list, click on the Numbered List button on the formatting toolbar (Fig1.2) and to create an unordered list click on the Bulleted List button.
For lists with an item and description, use definition lists.
After clicking one of the list buttons, Nvu will put the caret in front of a numeric 1, or a bullet depending on which list button you pressed (Numbered for list with 1, 2, 3,... and Bulleted for dark disc shaped bullets). After you type in the text for the current list item, pressing "Enter" (CR), will create a second list item with the caret in front of it. Every pressing of "Enter" will create a new list item. To return to normal text, press Enter once after writing the last list item, and then click the Numbered List or Bulleted List (the button which you clicked to start the list) button again. This will close the list environment and take you back to normal text.
Our sample text has an example of a numbered list in the "Numbered List" section. To see just the numbered list formatting applied to our sample text, click [sampleText-list.xhtml here].
Justifying Text
Several times while writing an article or similar text, we want to justify text, either left, right, middle or both sides. With Nvu justifying text is accomplished easily. It is advisable to justify your text paragraph by paragraph, rather than by select the whole document text. This is so because by selecting the whole document text, you are affecting non-paragraph blocks, e.g. lists, tables, etc too.
To justify a paragraph, select the paragraph text and click on the justify button which best suits your needs. There are 4 buttons for each type of justification, viz. left, middle, right and both sides. You will find the justify buttons on the right side of the list buttons in the formatting toolbar. The sample text has its first paragraph justified both sides as an example. To see the effects of justification explicitly applied to the raw sample text (1st paragraph justified both sides, 2nd paragraph right justified), click [sampleText-just.xhtml here].
Note: By default any text you type is left justified.
Emphasizing Text
Emphasizing text in a paragraph or an article is one of the ways to make some words or phrases stand out. Nvu can emphasize text in two ways. The first one generates Emphasized (normal) text and the second Strong Emphasized text. Users can find buttons for both of the emphasis formatting in the second row of the formatting toolbar. The normal emphasize format button is represented with a single quotation mark, whereas the strong emphasize format button is represented with a double quotation mark.
Too much emphasizing beats its own purpose.
To emphasize or strong emphasize a word or a phrase, select the text with the mouse (click-and-highlight), and then click on the corresponding emphasis button on the format toolbar. You can see the emphasis formatting in action in the sample text, where in the first paragraph each sentence's first word is emphasized, and the second paragraph's first sentence is strong emphasized. To see just the effect of emphasis formatting on our sample text, click [sampleText-em.xhtml here].
Sample Text
Below is the sample text. The text which was formatted with the rules studied above appears black in color.
UNIQ4ea878a23ae087fe-HTMLCommentStrip555950257e9a4fe00000001
Sample Text
''Lorem'' ipsum dolor sit amet, consectetuer adipiscing elit. ''Nunc'' ac massa non enim dictum vulputate. ''Vestibulum'' iaculis. ''Maecenas'' nisl magna, suscipit quis, vulputate nec, egestas vel, enim. ''Ut'' venenatis blandit elit. ''Aliquam'' erat volutpat. ''Nam'' eros. ''Morbi'' imperdiet, diam at lacinia luctus, diam lacus porttitor quam, a posuere nulla sem vel diam. ''Suspendisse'' quam felis, scelerisque vel, fringilla sit amet, commodo quis, orci. ''Etiam'' at eros. ''Aenean'' facilisis adipiscing libero. ''Phasellus'' malesuada sem ornare nulla. ''Sed'' sit amet elit.
'''Aenean vel turpis'''. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rhoncus posuere turpis. Phasellus id ante ac wisi hendrerit bibendum. Etiam a mi. Vestibulum malesuada nisl. Vestibulum eget nulla non quam aliquet mattis. Aliquam molestie lacus sit amet metus. Maecenas sit amet turpis posuere purus cursus cursus. Morbi at sem. Quisque malesuada hendrerit mauris. Cras tincidunt dignissim orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque magna urna, auctor consectetuer, tristique sit amet, porta sit amet, dui.
Stats
Paragraphs 2
Words 168
Bytes 1149
A Numbered List
Below we have an ordered i.e. numbered list. Unordered lists can also be made by following similar procedure as that of making ordered lists after clicking the unordered list button on the format toolbar.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Sed nec velit sit amet dui malesuada porttitor.
- Fusce auctor turpis ac dui ornare feugiat.
- Ut et elit ut ante mattis ullamcorper.
- Maecenas sed tortor at tellus pulvinar commodo.
Interesting Links
Nvu.com Mozilla.org Firefox Thunderbird NvuHelp Debian/GNU Linux
Next
In the next chapter, we will learn how to make hyper links. Hyper links are used to navigate either within the document or to another documents. Hyper links can be considered as pointers from one web document to another or from one document position to another position within the same document. By creating hyper links in a document you can connect the pages on your website or external pages on the WWW.
©2004-2006 KDS Sahambi
