About HTML and Styles

Web pages are constructed from HTML code and use Styles to change the appearance.  Here are some basic principles.   You don't need to memorize this but it might help when you copy and paste examples. 

If you mess up, just use View Page History Links to an external site. to revert back to a working page. 

 

HTML Editor in Canvas

When you are editing a Canvas page, access the HTML code in Canvas by clicking the HTML Editor button in the bottom right.

The HTML Editor then displays the HTML code with line numbers and color-coding.

HTML Structure

HTML structure is pretty simple.  Most HTML elements have an opening and closing tag:

<p>This is a paragraph.</p>
<h2>This is a 2nd level heading.</h2>

The browser reads the code and displays the items inside the tags based on default styles or styles that are already coded. 

Styles

You can add styles to tags.

Here are a few examples:

<p style="color:green;">This is a GREEN paragraph.</p>
<h2 style="background-color:navy; color:white; border: 2px solid orange; padding:6px; width:50%;">This is a 2nd level heading.</h2>

This is a GREEN paragraph.

This is a 2nd level heading.

 

Note that the styles all have to go within double quotes and each style rule ends with a semi-colon.

 

Styling Areas with div and span

When you want to add styles to a whole area, put a div tag around everything you want styled:

<div style="background-color: #fff3b0; color: #335c67; border: 2px dashed #9e2a2b; width: 50%; margin: auto; padding:20px;">
    <p>This is a paragraph in a styled div.  <p>
   <p>Congue libero hac metus ...</p>
</div>

 

   

This is a paragraph in a styled div. 

  

Congue libero hac metus class dis rutrum lobortis ante nec donec ullamcorper nisl quam, himenaeos cum pharetra hendrerit orci maecenas duis inceptos pretium primis vivamus. Facilisis phasellus dui cursus pretium eu elementum potenti imperdiet ultrices placerat vitae, maecenas molestie sagittis magnis sed nascetur egestas ridiculus augue integer. Orci conubia condimentum magna tristique nunc etiam, volutpat viverra justo ultricies ullamcorper urna fames, nullam torquent luctus dis egestas.

Use <span> when you want to style text within a paragraph.

 

Colors

Colors can be codes Links to an external site. (e.g. #5d291e) or names Links to an external site. (e.g. DarkOrange).  Make sure there's enough contrast to easily read text.