KB Author Training - Body Field - HTML Editor Quick Code Buttons

This training document provides detailed information about the HTML editor's Quick Code buttons. It also includes a training exercise that demonstrates how to use the buttons. For detailed information about other aspects of the document editor, please continue with this training series or return to the KB Author Training - Overview.

Background

Quick Code Buttons

Quick Code buttons are the HTML editor's primary feature. The buttons allow document authors to insert pre-written snippets of XHTML code into their documents. Most of the functionality available through WYSIWYG controls is also available through the HTML Quick Code buttons, except things like controls for tables, special characters, and detailed formatting options. Using the buttons is straightforward: click the button for the code you want to insert and the corresponding code snippet appears in the Body field.

The full set of Quick Code buttons is pictured below. As with the WYSIWYG editor, if you are in the document editor and you are unsure what a button is for, you can hover over it with your mouse to display a tooltip containing its name.

Open the document editor in HTML Source mode view. The ImportHTML button is located above the Body text input box.

The ImportHTML button imports HTML from any accessible external URL. When we say accessible, we mean external URLs that are not employing restrictions on their web pages.

This button allows document owners to import HTML from an existing URL into a KB document. By default, this function extracts the html text within the <body> </body> tag of an external web page and places it anywhere in the body field of a KB document. For security, any javascript functions are stripped during this import process.

Exercise

  1. If you are not already logged in, log into the KB Admin Tools. If your institution does not use Shibboleth, please use the Active Directory Login.

  2. Click on the Documents tab.

  3. Locate the document you edited in the previous exercises and open it for editing. If you are unsure how to locate the document, return to KB Author Training - Editing an Existing Document and review the instructions there.

  4. Once you're in the document editor with your document loaded for editing, locate the button labeled HTML below the lower left corner of the Body field. Click this button to switch to the HTML editor (if the HTML editor is set as the default for your profile, you do not need to switch modes).

  5. You will see the document formatting rendered in HTML code. The top line of the 'Body' field should read:

    <h3>Background:</h3>
    For the sake of simplicity we'll insert our XHTML code above the existing content. Place your cursor at the top of the Body field, before the existing header tags.

  6. Click the H3 button. A new set of 'header 3' tags should appear. Place the following text:

    Pre-reading
    between the tags, so you end up with code that looks like the following:
    <h3>Pre-reading:</h3>
  7. Place your cursor after the header 3 we just created. Use the correct quick code button to place a set of paragraph tags and type (or copy/paste) the following text:

    Before beginning this primer on Giraffe Handling, you should be familiar with the following texts:

    The entirety of the code should now appear as:

    <h3>Pre-reading:</h3>
    <p>Before beginning this primer on Giraffe Handling, you should be familiar with the following texts:</p>
  8. Now we will insert a list. Place your cursor after the paragraph tags we just completed. Click the UL button, which should insert the following code:

    <ul>
    <li></li>
    </ul>

    Our list will contain two items, so we'll need to add another set of LI (list item) tags. Copy the first set and paste them to the line below so you end up with something that looks like the following:

    <ul>
    <li></li>
    <li></li>
    </ul>

    Enter the text below between the two sets of List Item tags.:

    Giraffes - Tall Zebras, or Monsters of the Savannah?
    Long Necks, Short Tempers
  9. In the end your code should look like the following:

    <h3>Pre-reading:</h3>
    <p>Before beginning this primer on Giraffe Handling, you should be familiar with the following texts:</p>
    <ul>
    <li>Giraffes - Tall Zebras, or Monsters of the Savannah?</li>
    <li>Long Necks, Short Tempers</li>
    </ul>
  10. Click Preview to see your XHTML rendered in the browser. If it looks OK, click on the Save change button. If not, go back and ensure that what you entered matches the above XHTML.




Keywords:kb knowledge base knowledge base KB training train title fields summary there design HTML XHTML WYSIWYG totop to top what you see is what you get you get see get you see   Doc ID:23534
Owner:Teresa A.Group:KB User's Guide
Created:2012-03-30 07:49 CSTUpdated:2019-08-28 09:51 CST
Sites:KB Demo, KB Demo - Child Demo KB, KB User's Guide
Feedback:  6   1