University of Wisconsin KnowledgeBase

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.

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.

Click the buttons below for a description of what the button does. Click the browser BACK button to return to the top of the list.

The PRE button wraps the selected text in the <pre> tag which defines preformatted text. Text in a pre element is displayed in a fixed-width font (usually Courier), and it presereves both spaces and line breaks. Useful tag for displaying computer code.

The < > button inserts &lt; &gt; which are HTML Entities that will be interpreted by your browser as a pair of less than and greater than signs. Less than and greater than signs are just some of the characters that are reserved in HTML. It is not possible to use the less than (<) or greater than (>) signs in your text because the browser will mix them with HTML tags. To actually display reserved characters (like less than and greater than), character entities must be used in the HTML source code.

The <!/ button inserts an HTML comment tag at the current cursor location. The comment tag is used to add informational text in the HTML source code. Comments can be read by developers reading the code but comments are ignored by browsers and are not displayed.

The ToTop button inserts a link that allows the reader to jump to the top. A permanent anchor placed at the top of all KB documents. The custom tag allows you to insert a link pointing to this anchor. When inserted, the link will read "To the top". You can, however, edit this as desired. Additionally, there is a custom div tag inserted around the link, which allows you to style the link as desired.

Usage: Place cursor in the desired place and click on the button ToTop. In HTML, the following code will be entered

The LinkTopic button allows you to embed a topic link into your KB document. When you click on this link, all the documents in that topic will appear on another screen. You may decorate the Topic Name using CSS.

The IncludeDoc button wraps the selected number (a valid KB doc id) in an anchor tag where class="includedoc". This custom class will then embed the contents of that doc into the host doc. Care must be taken if the doc is to be shared. Allows up to five layers of inclusion. See KB User's Guide - Documents Tab - IncludeDoc and Dynamic Web Page Content for more information.

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.

The OwnerSite button wraps the selected text in a span tag where class="ownersite". This tag allows authors to embed site specific content anywhere within a KB document (or news item). Site specific content is visible to owner site only even when the document is shared across multiple sites / groups / institutions.

The HtmlEntity button wraps the selected text in a custom <htmlentity> tag. This custom tag preserves HTML markup in KB docs. This allows HTML type markup langueages to be embedded and displayed in KB documents more conveniently. Typically markup tags need to be manually escaped in order to display them in a client browser. Any text wrapped in the "htmlentity" tag will be displayed "as is" without browser interpretation.This can be helpful for those who use the KB to document code changes (e.g., javascripts), or publish instructions with HTML type markups.

The ValidateHtml button checks your document to make sure it follows current HTML standards. Valid HTML code is more likely to display correctly in all browsers so this is a worthwile step to take in the document authoring process. A popup will display either letting you know that your code is valid or it will display any errors found on the page.

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).

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.

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>

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>

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

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>

Click Preview to see your XHTML rendered in the browser. If it looks OK, click Save Changes. If not, go back and ensure that what you entered matches the above XHTML.