Basic HTML

Hyper Text Markup Language (HTML) is the coding language used in many Content types. Editing the HTML of a Block is another way to alter the formatting of a page.

Open the source to see the HTML code

From the administration bar, select Workbench, then select My Dashboard.
In the Content list panel, select the content you would like to use basic hypertext markup on.
Select the Layout tab.
Select + Add section if applicable, then select + Add block.
Under Content, select Copy text.
To edit existing Copy text, select the pencil icon in the top right corner of the Copy text block, then select "Configure".
In the editing toolbar, select Source.
The source with the HTML code will replace the What You See Is What You Get (WYSIWYG) editor.

Format text

Place a  tag before the text that is to be bolded, and a  tag after the text.

Note:  is interchangeable with . After saving the text,  will be replaced with .

Example:

This is my favorite song.

Displays:

This is my favorite song.

Place an  tag before the text that is to be italicized, and a  tag after the text.

Note:  is interchangeable with . After saving the text,  will be replaced with .

Example:

I am reading Animal Farm for an essay.

Displays:

I am reading Animal Farm for an essay.

An unordered list is a bulleted list. Use this type of list when the order does not matter.

Begin an unordered list with the <ul> tag.
Start each new point with <li>, then close the line with </li>.
Continue doing this until the list is finished.
When the unordered list is done, end with </ul>.

Example:

<p>Favorite musicians</p>
<ul>
         <li>Taylor Swift</li>
         <li>J.Cole</li>
         <li>Earth, Wind, and Fire</li>
</ul>

Displays:

Favorite musicians

Taylor Swift
J.Cole
Earth, Wind, and Fire

An ordered list is a numbered list. Use this when the order matters, for example, steps in a process.

Begin the list with <ol>.
Start each new point with <li>, then close the point with </li>.
Continue doing this until the list is finished.
End the ordered list with </ol>.

Example:

<p>Cha-cha slide</p>
<ol>
         <li>Slide to the left.</li>
         <li>Slide to the right.</li>
         <li>Take it back now y'all.</li>
         <li>One hop this time.</li>
         <li>Right foot let's stomp.</li>
         <li>Left foot let's stomp.</li>
         <li>Cha cha real smooth.</li>
</ol>

Displays:

Cha-cha slide

Slide to the left.
Slide to the right.
Take it back now y'all.
One hop this time.
Right foot let's stomp.
Left foot let's stomp.
Cha cha real smooth.

A description list is a list of terms, with a description for each term.

Begin the description list with <dl>.
Insert <dt> to list a term, and close it with </dt>.
Insert <dd> to define the term, and close it with </dd>.
Continue doing this until your description list is done.
End the description list with </dl>.

Example:

<p>Favorite beverages</p>
<dl>
         <dt>Water</dt>
         <dd>Transparent liquid.</dd>
         <dt>Tea</dt>
         <dd>Prepared by pouring hot or boiling water over cured leaves.</dd>
         <dt>Coffee</dt>
         <dd>Prepared from roasted coffee beans.</dd>
</dl>

Displays:

Favorite beverages

Water

Transparent liquid.

Tea

Prepared by pouring hot or boiling water over cured leaves.

Coffee

Prepared from roasted coffee beans.

Lists can also be nested within each other.

Begin creating the desired list type. See Ordered list and/or Description list for in-depth instructions.
Insert the opening and closing tags for each line.
When the nested list starts, begin the desired list with the appropriate tag.
When the nested list is finished, end the list with the closing tag.
Continue the list.
End the list with the appropriate closing tag.

Example:

<p>Favorite books</p>
<ul>
         <li>To Kill a Mockingbird</li>
         <li>The Hunger Games Series
         <ol>
               <li>The Hunger Games</li>
               <li>Catching Fire</li>
               <li>Mockingjay</li>
         </ol>
         </li>
         <li>Pride & Prejudice</li>
</ul>

Displays:

Favorite books

To Kill a Mockingbird
The Hunger Games Series
1. The Hunger Games
2. Catching Fire
3. Mockingjay
Pride & Prejudice

Fix problems with HTML

A paragraph tag  defines a new paragraph, and  is the ending tag. Sometimes a paragraph tag needs to be added to insert a space or deleted to fix spacing.

Adding a paragraph tag to insert a space

When creating or editing Copy text it may be difficult to insert a space in order to add new content between areas. To insert a space:

Open Source in the Copy text Block.
Locate where the space is to be inserted (after the final closing tag for the content on top and before the first opening tag for the bottom content).
Place the cursor after the closing div tag.
Press enter and insert .
Insert the end paragraph tag, , two lines below the beginning tag.
By selecting Source again, the WYSIWYG editor will turn back on, and there will be a space to insert content.

Removing paragraph tags in a list

Sometimes the spacing can be strange in lists because of paragraph tags. To check to see if paragraph tags are the issue:

Open Source in the Copy text Block.
Locate the HTML code with strange spacing.
Remove any unwanted  and  tags.
Select Add Block or Update.

Non-breaking spaces ( ) can sometimes show up in the HTML code, usually the result of pasting text in from another program. If you have any strange spacing, check for   in the HTML code.

Open Source in the Copy text Block.
Locate the strange spacing and check for  .
Remove any  .
Select Add Block or Update.

Alternatively, if there is a lot of strange spacing:

Open Source in the Copy text Block.
Place cursor anywhere and select all (Ctrl+A).
Copy (Ctrl+C) the HTML code.
Open a word processing document (ex. Microsoft Word, Google Docs, etc.).
Paste HTML code (Ctrl+V) into the word processing document.
In the word processing document open the "Find and Replace" tool (Ctrl+H). Insert   in "Find what" and leave "Replace with" blank. Select Replace all. All instances of   will be deleted.
Select all (Ctrl+A) of the updated HTML code.
Copy (Ctrl+C) the updated HTML code.
Paste (Ctrl+V) the updated HTML code back into the site in the Source panel of the desired Copy text Block.
1. Note: When copying and pasting content from a Word document, a window stating “The text you want to paste seems to be copied from Word. Do you want to clean it before pasting?” will appear. Choose Ok so that the copied text is stripped of any formatting that may interfere with web content functionality.
Select Add Block or Update.