Easy HTML in Canvas for beginners

May 18

What in the world is HTML?

HTML is HyperText Markup Language, and is the foundation of all web pages. It helps our computers interpret what is on a webpage: images, tables, paragraphs, headings, etc. When we create content in Canvas using the Rich Content Editor (RCE), then Canvas converts our content into code (HTML). When students access our pages and assignments on their computers - specifically their web browsers - convert that HTML code into the images, text, and other elements that we can created.

Why learn HTML?

Have you ever been working on a document or Canvas page and you click a button and all of a sudden everything has shifted and you can’t figure out why that table looks weird and why in the world is everything broken all of a sudden? These episodes of frustration can often be obviated by knowing basic HTML.

10 essential HTML tags to get started

HTML elements start with tags. Most elements have an opening tag, information, and a closing tag. The tags are those things found within angled brackets, such as:

There are more than one hundred different tags, but today we will discuss 10 tags to get you started creating your own content.

<h2> … <h3> <h4> <h5> <h6>

Heading tags allow you to create titles and subtitles on your Canvas pages. By default, the title of the page/assignment/announcement/etc. will be your heading 1, or <h1>. Your main heading will be <h2>. You can nest headings as well, so <h2> could be your main sections and <h3> could be your subsections. In

So I strongly suggest learning some fundamentals of HTML. It’s a lot more fun/frustrating then you’ll realize, and you’ll be better for it. Web pages can read <h1> to <h2> tags, though in Canvas you will utilize <h2> to <h6>. Make sure you use headings only as headings and titles, not to emphasize text. My example of a heading is:

<h2>Unit Overview</h2>

<p>

Paragraphs are defined in HTML with a <p> tag. Place the <p> at the beginning of your paragraph text, and make sure that at the end of the paragraph you close the tag </p>. It is important to remember that line breaks in the HTML editor will not render as line breaks on the Canvas page. The line will extend to the edge of the screen (or element) and the lines will adjust to accommodate the screen size. If I manually put line breaks in specific places, as such:

<p>Portland intelligentsia activated charcoal
sustainable typewriter humblebrag sriracha leggings snackwave.
Art party freegan ramps next level twee succulents glossier polaroid
single-origin coffee green juice. Gentrify celiac skateboard listicle
butcher locavore. Etsy kickstarter post-ironic,
yuccie thundercats banjo blog deep.</p>

…then the browser will simply render it thus:

Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave. Art party freegan ramps next level twee succulents glossier polaroid single-origin coffee green juice. Gentrify celiac skateboard listicle butcher locavore. Etsy kickstarter post-ironic, yuccie thundercats banjo blog deep.

<br>

If you do want to insert a line break in your paragraph, then you can do that using the <br> tag. Unlike the <h2> and <p> tags, the line break tag doesn’t need a closing tag. There doesn’t exist: </br>. The <br> tag allows me to break up my paragraph, so:

<p>Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave. <br>Art party freegan ramps next level twee succulents glossier polaroid single-origin coffee green juice. <br>Gentrify celiac skateboard listicle butcher locavore. Etsy kickstarter post-ironic, yuccie thundercats banjo blog deep.</p>

…becomes:

Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave.
Art party freegan ramps next level twee succulents glossier polaroid single-origin coffee green juice.
Gentrify celiac skateboard listicle butcher locavore. Etsy kickstarter post-ironic, yuccie thundercats banjo blog deep.

It is all still one paragraph of text, but I can force some of the sentences onto new lines.

<img>

Another great tag is the <img>, which allows us to place images from the internet onto the Canvas page. If you want to upload an image from your computer, then you can do that in the RCE, but if you’d like to put a picture from the internet then you can pull that in with HTML. Here is an example of what that code would look like:

The src="URL" is referring to the website where the image is located. src mean source, so the <img> tag is essentially telling the browser “I want to put an image here” and the src= is saying “this is the image I want to put there”. You can also define a specific width for the image (either using HTML or CSS, but we’ll discuss the former here). If the image is small then you might not want to make it larger because it will distort it and the image will be blurry. But sometimes images are quite large, so you’ll want to specify a smaller size. A picture with a width of 1,100 pixels will be quite large, so perhaps you just want it 300 pixels wide. In this case, you can define that in the line of HTML code:

<a>

An anchor tag allows you to hyperlink text or images on your Canvas page. You’ll want to define precisely what should be hyperlinked, and when the student clicks on the hyperlink where should they go. You specify the destination by writing in the <a> tag: href="URL". Suppose I wanted to hyperlinked the words “sustainable typewriter” in my paragraph example above, and I want to take the student to my YouTube channel. I would code that as such:

<p>Portland intelligentsia activated charcoal <a href="https://www.youtube.com/howtocanvas" target="_blank">sustainable typewriter</a> humblebrag sriracha leggings snackwave.</p>

I included the code: target="_blank" because this will open the link in a new tab instead of navigating away from the Canvas page. I think it’s a good practice to open content in new tabs so that students stay in the Canvas course.

<strong> and <em>

If you want to bold or italicize your text, then you can do that with the <strong> and <em> tags, respectively. In previous years we would use <b> and <i>, and those still work, but with more people using web-assistive devices such as screen readers, the use of the <strong> and <em> tags help us put emphasis on key words or phrases. Using the paragraph example above, I will add a little emphasis:

<p>Portland intelligentsia activated charcoal sustainable typewriter humblebrag <strong>sriracha leggings snackwave</strong>. Art party freegan ramps next level twee succulents glossier polaroid single-origin coffee green juice. Gentrify celiac <em>skateboard listicle butcher</em> locavore. Etsy kickstarter post-ironic, yuccie thundercats banjo blog deep.</p>

This paragraph would render on my Canvas page as such:

Portland intelligentsia activated charcoal sustainable typewriter humblebrag sriracha leggings snackwave. Art party freegan ramps next level twee succulents glossier polaroid single-origin coffee green juice. Gentrify celiac skateboard listicle butcher locavore. Etsy kickstarter post-ironic, yuccie thundercats banjo blog deep.

<hr>

Horizontal rules are useful elements in order to create lines to separate content on the Canvas page. A simple <hr> will create a single pixel line that will span the width of the page. It is possible to stylize your <hr> using CSS in order to make it more fancy or interesting. For more information, refer to the HowToCanvas video:

<ol> and <ul> (and <li>)

There are two types of lists that you can create in the HTML editor. Ordered lists begin with the <ol> tag, and unordered lists start with the <ul> tag. Both types of lists will list individual items with the <li> tag. An unordered list is simply bullet points, whereas an ordered list will list the items numerically.

Unordered list:

An item
Another item
Another item
Another item

Ordered list:

First item
Second item
Third item
Fourth item

The <li> tag stands for “list item” and is the same for both ordered and unordered lists. The list above in HTML code would be written as such:

<ul>Unordered list:

<li>Another item</li>

</ul>

<ol>Ordered list:

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

<li>Fourth item</li>

</ol>

Wrapping up

HTML is a very useful skill and it is actually incredibly easy to learn. A fantastic place to start learning HTML is w3schools. Their mini “try-it now” windows are great practice arenas to start learning code or to develop to the next level.

So I strongly suggest learning some fundamentals of HTML. It’s a lot more fun/frustrating then you’ll realize, and you’ll be better for it.

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas

Sean Nufer