In-line Styles in Canvas

HTML is very good at putting text in a web document. It is also effective for creating links from one document to another. However, HTML is not the best tool for formatting text or creating a look or style in a document. Currently we use Cascading Style Sheets (CSS) in order to style our documents and facilitate their ease of reading. CSS is a markup language that allows us to modify the look of various HTML tags as well as creating our own tags, classes, and other style elements.

As we know, HTML tags are in the form of a word or phrase surrounded by angle brackets. The following, for example, is an example of the paragraph tag.

<p>

This tag, and its corresponding closing tag allow us to separate text into paragraphs surrounded by blank lines.

</p>

This tag formats text into paragraphs but does not control the appearance of the text itself. If we simply use the paragraph tags and a line of text, for example, we get the sentence in whatever default font our browser has been assigned.

<p>This is a paragraph. It is separated from the preceding and following text by blank space. The font used is whatever default the browser chooses.</p>

If we want to designate a font style, color, size, or face we need a new technique to modify the paragraph. It is good to be able to apply the formatting to individual paragraphs rather than a blanket style to the entire page. If we chose, for example, to change the color of the text to red we could modify the paragraph tag with the following information.

<p style="color: RED;">This is a paragraph. It is separated from the preceding and following text by blank space. The font used in whatever default the browser chooses. </p>

The effect of adding the style element to the paragraph tag would result in the entire text of the paragraph being red.

This is a paragraph. It is separated from the preceding and following text by blank space. The font used is whatever default the browser chooses.

In order to add a style to a particular tag we place the style statement inside the angle brackets but after the text tag itself. Notice in the example above we follow the “p” in the paragraph tag with the word style and then the styling information surrounded by double quotes. We begin the style phrase with the property that we want to modify, in this case, color, followed by the modification we wish to make, in this case, changing the font color to red. The various properties and possibilities for any tag can be found at the W3 Schools web site. We do not have to modify the closing tag in any way.

Lets create another example. Suppose we wish to present the preceding paragraph above with the Times New Roman font face. We would modify our code fragment to the following:

<p style="color: RED; font-face: Times New Roman;">This is a paragraph. It is separated from the preceding and following text by blank space. The font used in whatever default the browser chooses. </p>

We would see the following results in a browser:

This is a paragraph. It is separated from the preceding and following text by blank space. The font used in whatever default the browser chooses.

Notice that block above is displayed in red font color and also is in Times New Roman font.

We can modify any existing HTML tag. It is often easier to use class and ID designators in CSS but, when in Canvas, we are limited to inline styles. Even with inline styles we can control the look of our page down the the single letter.

This is a paragraph.

Notice how we can change a single letter to a different color as well as a different size. We have the ability to control our page’s look to a very granular level. It is not usually necessary to modify to this level, however, it is nice to know we can.

So to summarize, we can use inline styles in order to modify the look of our page. We can change the size, face, weight, or color of the font. We can modify the alignment of the text or the way the text flows around an image. There is little we can not do with inline styles.

iFrames in Canvas. Embedding outside Content

In this edition of Technology in Education we will look at one of the more complex tags commonly used in Canvas, the In-Line Frame (iframe). The iframe tag allows us to embed content from other webpages into our own page. This is particularly useful when adding video content to Canvas pages. We can find a video on YouTube, or some other host that allows embedded sharing, and then display that content on our own page as though it were ours. Most hosting pages that allow cross linking like this will also create the iframe embed code for you. Look around and you will likely find a link called “sharing” and then an option called “embed”.

The iframe has several properties that we can set to modify the look of the content we are embedding. We can set the height and width of the frame to accommodate the content area that we want to display. We can tell the frame to have a border, we can control the appearance of the videos we embed (i.e. we can add or remove controls, modify the size of the video, or set other special features like captions or transcripts). We will look at a sample of the iframe tag and examine the various properties and what they control.

sample iframe

In the image above, notice that we first place the iframe into paragraph tags. This separates the video from content preceding and following the video. Also notice that like all HTML tags, we need an opening and closing tag. We have <iframe> and </iframe> There is no content between the tags but both need to be there to evaluate as proper HTML.

Following the iframe tag itself, we have a style property. We can add almost any inline CSS style to the iframe. In this case we have style=”border: none;” This means that we don’t want any border surrounding the video we are embedding. If we chose to have a border we could modify the style like this: style=”5px solid red;” Code like this will result in a solid red border 5 pixels wide surrounding the video.

red border style iframe

Notice the presence of the red border surrounding the video. We can add various other style properties to modify the video’s appearance on the page and to control how it interacts with other elements in the page.

Next we have the source property; src=”https://web.microsoftstream.com/…&#8221; This is simply the location or URL on the Internet that marks the location of the video we are embedding. It is important that the domain we are embedding from, allows this type of linking or the iframe will not work.

The showinfo=”true” property allows us to display likes, views, titles, and other information in the video. This information would ordinarily be viewable only on the video’s Stream page itself. The width and height properties are self-explanatory. They control the height and width of the iframe in pixels.

Finally, the allowfullscreen=”allowfullscreen” property will allow the viewer to set the video to full screen within the page. There are many other properties that can be added. The CSS tutorial on W3 Schools list most of these properties.

As you begin to use the iframe tag you will find other uses for it beside embedding video. I frequently use it to embed Quizlets into my Canvas pages. Also there are many other content pages and practice pages that will allow iframes. Hope this is a helpful tag and that you can use it in your own lesson design.

Allowable HTML Tags in the Canvas LMS

Canvas will allow most common HTML tags to be used in the raw HTML editor. However, because some tags will cause the page to behave in an unexpected manner, a few tags are deprecated or filtered out. I have received a PDF file of the allowed HTML tags as well as what properties and styles can be added or modified, from the Canvas Support Community. I am posting a link here in case someone is having difficulty getting a tag to work. Most often, if the tag you are attempting to use is not allowed, Canvas will simply filter it out when you save the page. You will notice when you return to normal view that the tag did not take effect. If you go back into the HTML view, you will see that the tag you entered is gone. This indicates that either the tag is not allowed or that you made an error in configuring the tag.

Allowed HTML Tags

Click the link above and you should be able to view or download the PDF file containing the list of allowable tags. I make no guarantees about the link’s validity after the day it was posted. It is stored on the Canvas Support Server and I can not control their activities. If the link does not work, comment or contact me and I will see if I can find an updated link.

The one element I wish that Canvas would allow is the use of external style sheets for CSS. I understand that it might cause problems with the theme or template for the particular institution’s site but it would be lots easier to control the look of pages if more involved and in-depth CSS were allowed. Oh well. That’s it for this week. I have been really busy getting ready for the end of the semester here at Grayson. Hope your terms are all ending well this year. Have a great day.

Canvas Tips and Tricks Continued

The next tag we will investigate is the <img> or image tag. This tag allows us to insert pictures into an HTML document. We will look at the basic parts of the tag, the properties that control what image we are inserting, and some style considerations that we can apply. With this tag it is easier to use the Page View editor to add the image and then use the HTML View to edit the styles. Lets add an image to a page.

We can browse to the image of our choice and then insert it into a page.

Lets add the logo for the Python programming language. Once we browse to the image we can select it and embed it into the page.

Now that the image is inserted into the page we can use the HTML View editor to inspect the link and examine the various parts of the link.

Click the HTML View editor button and look at the link code. The main part of the link is the “src” property. This section of code provides the URL for the picture wherever it is located on the Internet. It is also possible to link pictures from other sites without downloading them. However, the other site must be configured to permit hot links. Otherwise the link will not work and the picture will not be visible.

Now we are going to modify the code to resize the picture. This only changes the view of the picture on the page. It does not modify the picture file in any way. If the picture is a large file, the load time of the page will be affected if the client’s Internet speed is slow. We are going to change the height of the file to 300px or 300 pixels. The height and width of the image are linked so if we change one the other will change automatically to maintain the proper ratio.

When we return to Page View to inspect our work we find that the picture appears to have been resized. Remember, however, that the actual file has not been modified, only the view of the image.

We are going to add some text next to the picture in order to demonstrate how we might use styles to make our page look better. When we simply begin typing next to the image, the text is actually in line with the image. It results in a large gap between the first and second line of the text we added.

We need to modify the code and add a style element to allow the text to wrap properly around the image. We want the image to float to the left side of the screen and the text to float to the right. We will add the “float” element to the <img> tag. We will also add a bit of space between the image and the text.

When we go back into Page View and look at our results we see that the text position has been adjusted. It wraps and floats next to the image on the right side. The image floats left. There is also a 15 pixel buffer between the image and the text.

Using this style property will allow you to create a page that looks much more professional and easy to read. Various other styles and parameters are available at the World-wide Web Consortium (W3C) web site. Canvas requires the use of “in-line” styles. Further information about what we are doing is available there.

I hope that this simple tutorial will give you some ideas about how you can use in-line styles to make your Canvas and other HTML pages look more professional and easier to read. Stay tuned for the next update when we will look at another common HTML tag that is frequently used in Canvas.

Canvas Tips and Tricks: The HTML Editor and the Most Common HTML Tags

The recent upsurge in online and blended learning in both K-12 and secondary education stemming from the current COVID crisis has brought about a surge in the numbers of teachers and educators who are being exposed to online Learning Management Systems (LMS). One of the fastest growing LMS providers is Instructure.com, makers of the Canvas LMS. While this tutorial will focus on Canvas, most of the tips and tricks listed will be applicable to any LMS that uses and allows HTML editing.

Most LMS have an editing interface based on a “What You See Is What You Get” (WYSIWYG or Wizzy Wig) model. Canvas is no exception. Course designers are able to drag and drop various elements into pages, assignments, and quizzes, and can then format and place them to create lessons and modules. For the most part, this is an acceptable way to build pages and place content. However, sometimes it becomes necessary to integrate find adjustments that can only be done via the HTML editing interface.

In order to edit HTML in Canvas you will need to access the HTML page code. this can be done by clicking the </> icon below the content block of the lesson or page you are editing.

Click the </> icon to edit the page HTML

Once the HTML Editor is open you will see the code from the page. It may not appear to make sense at first but once you become familiar with some common HTML tags, editing should be simple.

Once you are familiar with a few tags, editing HTML is not so difficult.

The first tag we will look at is the paragraph tag. It is a simple division container for text and other elements. The basic structure of HTML is to surround content with various tags that tell the content how to behave. The paragraph tags are <p> and </p>. These are the opening and closing tags of a paragraph. Any text surrounded by these tags will behave essentially like a paragraph. There will be a space between any previous elements and also any following elements. The pictures below show both the code view as well as the page view.

The <p> and </p> tags open and close the paragraph.

HTML Tags are invisible in the page view.

As is demonstrated in the picture above, HTML tags are invisible in the page view. Their effect, on the other hand, is very visible. Notice in the picture above, there are two lines of text with a space between. We have two paragraphs on this page.

It is possible to use the paragraph tags to surround things like pictures, videos, lists, or other elements. The only rule that is absolute is that you must have a closing tag for every opening tag. Paragraph tags can be nested. You can paragraphs inside of paragraphs. You just need to keep up with your closing tags.

Another commonly used tag, often found in lessons or projects, is the UnOrdered List tag, <ul> and </ul>. This tag allows the creation of bulleted lists using icons as bullet comments. Closely related is the Ordered List tag (<ol> and </ol>) that allows the use of numbers or letters to designate each item. The following is an example of an unordered list both in code view as well as page view.

<li> and </li> are also required to designate each bullet point in the list.

We can apply a style to the unordered list tag in order to change the icons. In this case, we add a square style so that the icons change to small squares.

The following is another style that can be used with the unordered list.

These are two of the most common tags used in educational HTML design. They are necessary for the creation of content pages and while they can be created with the Page view editor, it is necessary to edit the HTML of the page to add styles to the tags. In the next post we will look at some other common tags and the styles we can use with them.