KB User's Guide - Documents Tab - Guide to HTML Editor Buttons
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.
-
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
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
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
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
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.
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.
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.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.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> TextThe 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> TextThe 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 TextThe 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 TextThe 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 TextThe
Sbutton wraps the selected text in the <s> tag to draw a line through the text.
Usage: <s>Strikethrough Text</s>Example:
Strikethrough TextThe 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
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
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 AlignmentCentered TextThe 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 AlignmentRight Aligned TextThe 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 AlignmentIndented Text
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 2The 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
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 - Insert an Image from another Website .Example:
The < > button inserts < > 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 < 7
10 > 3Example:
5 < 7
10 > 3For more info on HTML Entities see HTML Entities Reference
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 -->
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.
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
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:
- List item 1
- List item 2
The LI button wraps the selected text in the <li> tag.
Usage: <li>List item</li>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:
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>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>The KbLink button inserts a relative link to a KB document.
Usage: <a href="page.php?id=5238">KB Sample Doc</a>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:
- a
- b
- c
- d
- e
- f
- g
- h
- i
- j
- k
- l
- m
- n
- o
- p
- q
- r
- r
- t
- u
- v
- w
- x
- y
- z
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 ConferenceMore information: KB User's Guide - Documents Tab - Embed a Generic Comment/Feedback Form into a KB Document
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
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:
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>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 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>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>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>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>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
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.