KB User's Guide - Documents Tab - Guide to HTML Editor Buttons (Classic Editor)

This document is specific to the native HTML editor, which is only available on docs set to "HTML only mode". If you are using the standard editor (TinyMCE), please browse our other documentation for help.

Description of HTML editor buttons in KB Admin Tools

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 < > <!/ FullscreenToggle Img Link Anchor MailLink KbLink ToTop Form LinkTopic LinkDoc IncludeDoc IntSite 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. The KB system CSS will assign an H1 heading tag to the title of your KB Space. The KB System will also assign the title of your document an H1 heading tag. 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
  19. 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
  20. 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

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

  22. 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 KB User's Guide - Documents Tab - Uploading Images and Other Attachments[Link for document 5544 is unavailable at this time] .

    Example:
    test alt
  23. < >

    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

  24. <!/

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



  26. 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
  27. 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
  28. LI

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

    Usage: <li>List item</li>

  29. 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:
  30. 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>

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

  32. KbLink

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

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

  33. 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:

  34. 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: [Link for document 18364 is unavailable at this time] 


    More information: KB User's Guide - Documents Tab - Embed a Basic Form into a KB Document 

  35. 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 
  36. 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:
  37. 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, or a specific section 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>

  38. ImportHtml

    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.

  39. IntSite

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

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

  40. ExtSite

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

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

  41. OwnerSite

    The OwnerSite button wraps the selected text in a span tag where class="kb-class-owner-group-site". 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="kb-class-owner-group-site">Site specific information goes here.</span>

  42. OwnerInstitution

    The OwnerInstitution button wraps the selected text in a span tag where class="kb-class-owner-inst-site". 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="kb-class-owner-inst-site">Institution specific information goes here.</span>

  43. 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 and will also be rendered in monotype font.

    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.</htmlentity>

    Example:
    The paragraph tag below is wrapped inside the <htlmentity> tag.

    You can see the opening and closing paragraph tags.


    For more info on HTML Entities see HTML Entities Reference

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




KeywordsGuide to HTML Editor Buttons H1 H2 H3 H4 P PRE Red Green Big Small Bold Italic Underline Strike through Superscript Totop to top Subscript Center Right Blockquote BR line break HR horizontal Rule Img brackets comments Full screen Toggle Unordered List Ordered List List comment Item link Anchor Maillink LinkDoc IncludeDoc ImportHTML HTML Internal site IntSite External site ExtSite owner Site ownersite ownerinstitution owner institution HTML Entity HtmlEntity Validate HTML ValidateHTML UL OL LI Link Anchor MailLink KbLink LinkDoc IncludeDoc ImportHtml IntSite ExtSite OwnerSite OwnerInstitution HtmlEntity HTML entity entities ValidateHtml   Doc ID14927
OwnerLeah S.GroupKB User's Guide
Created2010-08-24 19:00:00Updated2022-07-20 14:07:17
SitesKB Demo, KB Demo - Child Demo KB, KB User's Guide, Social Science Computing Cooperative
Feedback  0   0