Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

How to use basic Hyper Text Markup Language (HTML)

On this page:

 

How to open the source to see the HTML code

  1. Open a New draft.

  2. In the toolbar, select Source.

  3. The source with the HTML code will replace the What You See Is What You Get (WYSIWYG) editor.

Formatting text

Bold

Place a <b> tag before the text that is to be bolded, and a </b> tag after the text.

Example:

This is my <b>favourite</b> song.

This is my favourite song.

Italics

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

Example:

I am reading <i>Animal Farm</i> for an essay.

I am reading Animal Farm for an essay.

Lists

There are 3 types of lists: unordered lists, ordered lists and description lists.

Unordered list

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

  1. Begin an unordered list with the <ul> tag.

  2. Start each new point with <li>, then close the line with </li>.

  3. Continue doing this until the list is finished.

  4. When the unordered list is done, end with </ul>.  

Example:

<p>Favourite musicians</p>

<ul>

<li>Taylor Swift</li>

<li>Ed Sheeran</li>

<li>First Aid Kit</li>

</ul>

Favourite musicians

  • Taylor Swift

  • Ed Sheeran

  • First Aid Kit

Ordered list

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

  1. Begin the list with <ol>.

  2. Start each new point with <li>, then close the point with </li>.

  3. Continue doing this until the list is finished.

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

Cha cha slide

  1. Slide to the left.

  2. Slide to the right.

  3. Take it back now y'all.

  4. One hop this time.

  5. Right foot let's stomp.

  6. Left foot let's stomp.

  7. Cha cha real smooth.

Description list

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

  1. Begin the description list with <dl>.

  2. Insert <dt> to have a term, and close it with </dt>.

  3. Insert <dd> to define the term, and close it with </dd>.

  4. Continue doing this until your description list is done.

  5. End the description list with </dl>.

Example:

<p>Favourite beverages</p>

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

Favourite beverages

Water

Transparent liquid.

Tea

Prepared by pouring hot or boiling water over cured leaves.

Coffee

Prepared from roasted coffee beans.

Nested HTML List

Lists can also be nested within each other.

  1. Begin whatever type of list is desired.

  2. Insert the opening and closing tags for each line.

  3. When the nested list starts, begin the desired list with the appropriate tag.

  4. When the nested list is finished, end the list with the closing tag.

  5. Continue the list.

  6. End the list with the appropriate closing tag.

Example:

<p>Favourite 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>

Favourite books

  • To Kill a Mockingbird

  • The Hunger Games Series

    1. The Hunger Games

    2. Catching Fire

    3. Mockingjay

  • Pride & Prejudice

Fixing problems with HTML

Paragraph tags

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

Adding a paragraph tag to insert a space

Sometimes in expandable/collapsible content (marked up as <div class="expandable">) it is difficult to insert a space in order to add new content between areas. To insert a space:

  1. Open Source.

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

  3. Press enter and insert <p>.

  4. By clicking source again, the WYSIWYG will turn back on, and there will be a space to insert content.
    Example, before:


    Example, after:

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:

  1. Open Source.

  2. Locate the HTML code with strange spacing.

  3. Remove any unwanted <p> and </p> tags.

  4. Save.
    Example, before:


    Example, after:

Removing non-breaking spaces

Non-breaking spaces (&nbsp;) 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 &nbsp; in the HTML code.

  1. Open Source.

  2. Locate the strange spacing and check for &nbsp;.

  3. Remove any &nbsp;.

  4. Save.
    Example, before:


    Example, after:

Alternatively, if there is a lot of strange spacing:

  1. Open Source.

  2. Place cursor anywhere and select all (Ctrl+A).

  3. Copy (Ctrl+C) the HTML code.

  4. Open a word processing document.

  5. Paste HTML code (Ctrl+V).

  6. Use Find (Ctrl+F) to locate all instances of &nbsp;.

  7. Open Replace menu.

  8. Insert &nbsp; in "Find what" and leave "Replace with" blank. Select Replace all.

  9. All instances of &nbsp; will be deleted.

  10. Select all (Ctrl+A) of the updated HTML code.

  11. Paste (Ctrl+V) the updated HTML code back into the site source.
    Example, before:


    Example, after:

  • No labels