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.

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.

H1 H2 H3 H4 P UL OL LI UL OL PRE Red Green Big Small B I U S Sup Sub Center Right Blockquote BR HR < > <!/ FullscreenToggleImg Link Anchor MailLink KbLink ToTop FormLinkTopic LinkDoc IncludeDocIntSite ExtSite OwnerSite OwnerInstitution ImportHtml ImportXml HtmlEntity ValidateHtml

  1. H1

    The H1 button inserts a heading tag of size 1. With the KB's standard stylesheet, the font size is 20px and bolded.

    Usage: <h1>Solution</h1>

    Example:

    Heading 1


  2. H2

    The H2 button inserts a heading tag of size 2. With the KB's standard stylesheet, the font size is 18px and bolded.

    Usage: <h2>Solution</h2>

    Example:

    Heading 2


  3. H3

    The H3 button inserts a heading tag of size 3. With the KB's standard stylesheet, the font size is 16px and bolded.

    Usage: <h3>Solution</h3>

    Example:

    Heading 3


  4. H4

    The H4 button inserts a heading tag of size 4. With the KB's standard stylesheet, the font size is 14px and bolded.

    Usage: <h4>Solution</h4>

    Example:

    Heading 4


  5.  P 

    The P button wraps the selected text in the <p> tag which is used to mark paragraphs. Space will automatically be inserted before and after a paragraph to separate one paragraph from another.

    Usage: <p>This is a paragraph. </p>

    Example:

    This is a paragraph. It can be long or short. If it's a long paragraph the text will wrap to the next line.

  6. PRE

    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.

    Usage: <pre>This is preformatted text. </pre>

    Example:
    This is preformatted text.
  7. Red

    The Red button wraps the selected text (or inserts at the current cursor position) in a <span style="color: red;"> tag with CSS to color the text red.

    Usage: <span style="color: red;">Roses are red.</span>

    Example:
    Roses are red.
  8. Green

    The Green button wraps the selected text (or inserts at the current cursor position) in a <span style="color: green;"> tag with CSS to color the text green.

    Usage: <span style="color: green;">It's not easy being green.</span>

    Example:
    It's not easy being green.
  9. Big

    The Big button wraps the selected text (or inserts at the current cursor position) in the <big> tag which slightly increases the size of text compared to the standard <p> text.

    Usage: <big>Bigger Text</big>

    Example:
    Bigger Text
    Regular <p> Text
  10. Small

    The Small button wraps the selected text (or inserts at the current cursor position) in the <small> tag which slightly decreases the size of text compared to the standard <p> text.

    Usage: <small>Smaller Text</small>

    Example:
    Smaller Text
    Regular <p> Text
  11. B

    The B button wraps the selected text (or inserts at the current cursor position) the <strong> tag for bolding the text.

    Usage: <strong>Bolded Text</strong>

    Example:
    Bolded Text
  12. I

    The I button wraps the selected text (or inserts at the current cursor position the <em> tag to italicize the text.

    Usage: <em>Italicized Text</em>

    Example:
    Italicized Text
  13. U

    The U button wraps the selected text (or inserts at the current cursor position) the <u> tag to underline the text.

    Usage: <u>Underlined Text</u>

    Example:
    Underlined Text
  14. S

    The S button wraps the selected text in the <s> tag to draw a line through the text.

    Usage: <s>Strikethrough Text</s>

    Example:
    Strikethrough Text
  15. Sup

    The Sup button wraps the selected text in the <sup> tag which causes the text to appear in superscript.

    Usage: X<sup>2</sup>

    Example:

    X2

  16. Sub

    The Sub button wraps the selected text in the <sub> tag which causes the text to appear in subscript.

    Usage: X<sub>2</sub>

    Example:

    X2

  17. Center

    The Center button wraps the selected text in the <div style="text-align: center;"> tag with CSS to center the text.

    Usage: <div style="text-align: center;">Centered Text</u>

    Example:
    Default Alignment
    Centered Text
  18. Right

    The Right button wraps the selected text in the <div style="text-align: right;"> tag with CSS to right align the text (align text to right margin of the page).

    Usage: <div style="text-align: right;">Right Aligned Text</u>

    Example:
    Default Alignment
    Right Aligned Text
          1. Blockquote

            The Blockquote button inserts the <blockquote> tag which indents text. This is useful for setting off long passages of quoted text.

            Usage: <blockquote>Indented Text</blockquote>

            Example:
            Default Alignment
            Indented Text
  19. BR

    The BR button inserts a <br /> tag at the current cursor location. This will insert a linebreak. The <br /> tag can be used to place text on a new line without fully spacing it as with the <p> tag.

    Usage: Line 1<br />Line 2

    Note: no end tag is required.

    Example:

    Line 1
    Line 2

  20. HR

    The HR button inserts an <HR /> tag at the current cursor location. This will insert a horizontal line or rule extending across the page.

    Usage: Section One<hr />Section Two

    Note: no end tag is required.

    Example:

    Section One


    Section Two

  21. Img

    The Img button inserts the <img> tag at the current cursor location. Clicking the Img button opens a popup box. Enter the path and alt-tag/title for the image you are linking to in the popup box.

    Usage: <img src=" /images/group41/14927/test.png" alt="description" title="description" />

    Note: no end tag is required. The Img tag is rarely used. Images are more commonly inserted by using the Attachment section of the Doc Editor. For more info see 5722 and KB User's Guide - Documents Tab - Embedding Web Images .

    Example:
    test alt
  22. < >

    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.

    Usage:
    5 &lt; 7
    10 &gt; 3

    Example:
    5 < 7
    10 > 3

    For more info on HTML Entities see HTML Entities Reference

  23. <!/

    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.

    Usage:

    <!-- This is a comment. Comments are 
    not displayed in the browser -->
  24. FullscreenToggle

    The FullscreenToggle button allows you to expand the body field to the full screen. Click the FullscreenToggle button again to return to the standard view of the document editor.



  25. UL

    The UL button inserts the basic framework for a bulleted or unordered list. The following tags are inserted:
    <ul>
    <li></li>
    </ul>

    Usage: <ul><li>List item 1</li><li>List item 2</li></ul>

    Example:
    • List item 1
    • List item 2
  26. OL

    The OL button inserts the basic framework for a numbered or ordered list. The following tags are inserted:
    <ol>
    <li></li>
    </ol>

    Usage: <ol><li>List item 1</li><li>List item 2</li></ol>

    Example:
    1. List item 1
    2. List item 2
  27. LI

    The LI button wraps the selected text in the <li> tag.

    Usage: <li>List item</li>

  28. Link

    The Link button inserts a standard hyperlink. The button will cause a popup to open. Enter the URL and click OK.

    Usage: <a href="http://kb.wisc.edu">KnowledgeBase</a>

    Example:
  29. Anchor

    The Anchor button inserts a named anchor. This allows linking to specific sections within a document.

    Usage: <a name="anchor_name">This is an anchor</a>
    <a href="#anchor_name">Link to an anchor of the same name</a>

  30. MailLink

    The Maillink button inserts an email address as a link. Clicking the Maillink button opens a popup box. Enter the email address you are linking to in the popup box.

    Usage: <href="mailto:bbadger@wisc.edu">Bucky Badger</a>

  31. KbLink

    The KbLink button inserts a relative link to a KB document.

    Usage: <a href="page.php?id=5238">KB Sample Doc</a>

  32. ToTop

    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

    <div class="to-kb-doc-top-anchor"><a href="#">To the top</a></div>


    Example:

  33. Form

    The Form button allows you to embed a Generic Comment/Feedback form into your KB document--to easily collect data from and have it emailed to the address of your choice. 

    Use Case: Example Document with Embedded Form: Update your Biography for the Upcoming Annual Conference

    More information: KB User's Guide - Documents Tab - Embed a Generic Comment/Feedback Form into a KB Document

  34. LinkTopic

    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.

    Usage: <a class="linktopic" name="topic-name-only"></a>

    More information: KB User's Guide - Documents Tab - LinkTopic
  35. LinkDoc

    The LinkDoc button inserts a custom tag which allows linking to other KB documents via document number. Care must be taken if doc is to be shared. 

    Usage: <a class="linkdoc">5247</a>

    Example:
  36. IncludeDoc

    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.

    Usage: <a class="includedoc">5247</a>

  37. ImportHtml

    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.

  38. IntSite

    The IntSite button wraps the selected text in a span tag where class="internal". Text wrapped in this custom class will only be visible on internal KB sites.

    Usage: <span class="internal">Super secret stuff only visible on interal sites.</span>

  39. ExtSite

    The ExtSite button wraps the selected text in a span tag where class="external". Text wrapped in this custom class will only be visible on external KB sites.

    Usage: <span class="external">Public information only visible on external sites.</span>

  40. OwnerSite

    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.

    Usage: <span class="ownersite">Site specific information goes here.</span>

  41. OwnerInstitution

    The OwnerInstitution button wraps the selected text in a span tag where class="ownerinstitution". This tag allows authors to embed institution specific content anywhere within a KB document (or news item). Institution specific content is visible to owner institution sites only, even when a document is shared across multiple campuses / schools.

    Usage: <span class="ownerinstitution">Institution specific information goes here.</span>

  42. HtmlEntity

    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.

    Usage: <htlmentity>html code goes here. For example here's the paragraph tag

    </htmlentity>

    For more info on HTML Entities see HTML Entities Reference

  43. ValidateHtml

    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.


Exercise

  1. If you are not already logged in, log into the KB Admin Tools: Shibboleth Login (most institutions) or Active Directory Login (CVTC, Parkland, SIUE, UMMC)

  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 Save Changes. 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:2016-10-31 10:59 CST
Sites:KB Demo, KB Demo - Child Demo, KB User's Guide
Feedback:  0   0