Wikieducator rich text editor tutorials/Basic text formatting/Bold italics and headings

From WikiEducator
Jump to: navigation, search




In this subsection we cover rich text editing approaches to formatting text. Many new members prefer using the rich editor toolbar approach because you don't need to remember the wiki markup (syntax). However, experimenting with the wikitext method will help you understand how the wiki works. As you become more familiar with wiki editing you will develop your own preferences and shortcuts for regular tasks.

Icon present.gif
Tip: Once you have mastered the basics of formatting text, a good way to learn new formatting features is to find a page with a layout feature you like, and to click on the "edit" tab to view the wikitext that was used for that particular text feature.


Using the rich editor toolbar

When you were editing your User page in the "first edit" activity, you may have noticed that the toolbar contains a series of graphic buttons like this:

Rich text editor toolbar


This toolbar is used to add simple formatting to your content. After enabling the Rich Editor, move your mouse pointer over the graphic buttons to highlight each feature. Note that when you hold your pointer over a button, text will appear describing the function of each graphic button.


Basic formatting is a two step process:

  1. Highlighting the text you want to format, and
  2. Clicking the corresponding graphic button in the toolbar for the format you want to apply.


Icon present.gif
Tip: To use the toolbar you will need to use your mouse to highlight and select the text upon which you wish to apply the formatting. To highlight and select a piece of text, click and hold with your left mouse button while moving your mouse across the text you wish to select. The highlighted text will turn into a different colour; release the button when you have highlighted the selection of text to which you would like to apply formatting.


Bold, italics and underline

Once you have your text selected you can click on:

  • the "Bold" button, Rich text editor bold text.png, to bold the selection;
  • the "Italics" button, Rich text editor italics text.png, to italicize the selection;
  • the "Underline" button, Rich text editor underline text.png, to underline the selection (however, try to avoid using underline as it usually means hyperlink);

Your formatting will automatically appear when you are in the rich editing mode, but it is not automatically saved. To save your work you need to click on the "Save page" button at the bottom of the screen.



Icon activity.jpg

Bold and Italics text activity

In this activity we'll use the rich editor toolbar.

  • Go to the sandbox page you created under your User page. (Complete the activity on the previous page if you have not created your sandbox.)
  • Click on the edit tab.
  • Click the blue Rich Editor link to enable the rich editor (if it is disabled).
  • In the edit window, type or copy the following sentence or something similar:
This word is bold and this word is italics.
  • Highlight the word you want to appear in bold and click on the Bold button, Rich text editor bold text.png.
  • Highlight the word you want to appear in italics and click on the Italics button, Rich text editor italics text.png
  • Click on the Show preview button at the bottom of the screen.

Notice how the edit view (shown in the edit window) and preview (shown above the edit window) look the same. You should not need to preview bold or italics text in the future.

  • Click on the Save page button to save your work.



Congratulations you have formatted your first text in WikiEducator. You can also view the short screen movie instructions on how to do this.

Headings and subheadings

The headline pulldown menu
Creating headings and subheadings is as simple as italicising text. The headline pulldown menu (shown to right) displays the format for the available headings and subheadings for use with selected text. First you highlight the text you want to display as a heading. Once you have the headline menu options visible, click on the option of your choice to select it.
  • Select Heading 1 for a Level 1 heading
  • Select Heading 2 for a Level 2 subheading
  • Select Heading 3 for a Level 3 subheading, etc.
  • Normal will revert back to normal paragraph text display.


Icon present.gif
Tip: Note that the Heading format is applied to a line of text. It cannot be used for displaying individual words within a line of text at the desired heading level.


Let's try making a heading in your sandbox.



Icon activity.jpg

Creating a heading (or section)

  • Go to the sandbox you created under your User page.
  • Click on the edit tab.
  • Click the blue Rich Editor link to enable the rich editor (if it is disabled).
  • Type (or copy) the following into the edit area: "My first header".
  • Highlight the text you just typed.
  • Click dropdown arrow on the headline menu (see figure above) and select the "Heading 2" option to change the typed text to a level 2 heading.
  • Click the Show preview button.

Notice how the edit view and preview look the same. You should not need to preview new headings in the future.

  • On a new line, type: "My second subheading".
  • Highlight the text you just typed.
  • Click the dropdown arrow on the headline menu and select the "Heading 3" option to change the typed text to a level 3 subheading.
  • Click on the Save page button to save your work.



Congratulations, you have created your first heading and subheading. Hopefully, you are becoming comfortable with using the rich text editor. You can also view a short screen movie on how to create a heading in your sandbox.

A sneak peek at the wikitext

If you are interested in formatting some text using wikitext you will find instructions in the Wikieducator tutorial for standard wiki markup. Once you are familiar with some of the basic formatting syntax, you may find it quicker and easier to just type this syntax into the edit mode text area rather than highlighting, selecting and clicking on the buttons. To take a sneak peak at the wikitext that creates the formatting and headings you just made, click on the "Wikitext" button in the rich editor toolbar on your sandbox page.