HTML Code for Beginners
Get Crafty with canvas code
OBJECTIVES
HTML Code for Beginners
CO1
Differentiate between the RCE and the HTML Editor.
TRAINING OBJECTIVES
CO2
Define HTML.
CO3
Identify HTML code that can be used in Canvas.
CO1
RCE VS. HTML EDITOR
The content editor is available anytime for creating new content. The Rich Content Editor is used in features that support the editor (Announcements, Assignments, Discussions, Pages, Quizzes, or Syllabus). Within the RCE Iurks the HTML Editor. The HTML Editor allows users to enhance Canvas pages in ways that the RCE will not allow.
Rich Content Editor
HTML Editior
CO2
HTML stands for HyperText Markup Language. Developed by scientist Tim Berners-Lee in 1990, HTML is the "hidden" code that helps us communicate with others on the World Wide Web (WWW).
WHAT IS HTML
CO2
HTML TAGS
CANVAS HTML EDITOR
This layout in the Canvas HTML Editor would look like the following: Tags are highlighted in pink.
When writing HTML, you add "tags" to the text in order to create the structure. These tags tell Canvas how to display the text or graphics in the document.
VS
<h2>Why I like to go swimming in the summer.</h2>
<p>Swimming is my most favorite activity in the summer. When the sun is shining and the air is warm, you will find me dipping into my backyard pool. It's not an impressive pool, only three feet deep, but it's mine.</p>
<p>There are three reasons I like to swim:</p>
<ul>
<li>I get lots of exercise</li>
<li>I enjoy the freedom</li>
<li>I have an opportunity to be in the sun.</li>
</ul>
+ RCE
Note: Canvas automatically adds the HTML tags so we do not have to.
HTML Code for Beginners
LET'S CODE!
snippets
HTML Code for Beginners
01 - HEX Codes
05 - Background Color
06 - iframe
02 - Horizontal Line
07 - Fonts
03 - Shadow Box
08 - Icon Maker
04 - Video Embed
CO3
HEX CODES
A hex code (think six, like a hexagon) is a code that corresponds to a color. Every hex code is made up of the number symbol (#) and six numbers or letters. For example, the hex code for the color black is #000000.
Luckily, you also don't need to know how to write hex codes! W3 Schools, Color Groups page is full of hex codes ready for you to use in every shade and variety you can think of! As a bonus, you'll also be able to see how text looks on that color to make sure you have enough contrast. There are a lot of useful side tabs there, too, so play around! To use a hex code, you'll replace the hex code value in your code snippet with the color you want! So let's learn how.
CO3
HORIZONTAL LINE
It is an online pedagogical best practice to break up large pages of text into more easily digested chunks and to clearly delineate these chunks with white spaces, line-separators, and other tools. The Rich Content Editor in Canvas now allows you to add a horizontal line but the width and color cannot be edited. However, with this line of code, you can make edits.
CO3
SHADOW BOX
You'll notice this code snippet is a little longer than the previous one, but don't panic. Essentially, we've got one element that creates the text box with a border and another element that creates the shadow, but that doesn't really change your job: copy and paste.
CO3
YOUTUBE video embed
Imagine that you've found the perfect video, perfect for the concept you're trying to teach- there's only one hiccup: it's too long. You don't want students to watch the entire thing; they've got better things to spend their brain space on. What do you do? Well, with this exercise, you can embed exactly the segment of video you want them to watch! Note: This tutorial is designed for YouTube videos. If you've got a specific video elsewhere you'd like to embed a segment of, ask your friendly, neighborhood eLearning & CTL design team if it's possible!
CO3
BACKGROUND COLOR
This code shows you how to create a background color for part or all of your page without relying on the text background color option alone (who needs all those white spaces between lines, right?)!
CO3
iframe
An iFrame, also known as Inline Frame, is an element that loads another HTML element inside a web page. They are commonly used to embed specific content like external pages and other interactive elements into the page.
CO3
FONTS
Canvas has updated so that you no longer have to code font. To change the font in Canvas, select Format in the RCE, and click the Fonts option [5].
CO3
ICON MAKER
You can choose Canvas images or upload your own custom images to make icons within the Rich Content Editor. Canvas allows us to do this on the RCE side but codes the content into the HTML Editor.
CO3
HTML Code for Beginners
We highly recommend that you play with these tricks in a playground course! Let us know if you need one made.
References
HTML Code for Beginners
Canvas Instructure
Canva 101 by Kelley L. Meeusen
How to Use iFrame by Luqmanul M.
HTML Code for Beginners
THANKS
Get Crafty w/ Canvas Code
CTL
Created on February 14, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Corporate Christmas Presentation
View
Snow Presentation
View
Nature Presentation
View
Halloween Presentation
View
Tarot Presentation
View
Winter Presentation
View
Vaporwave presentation
Explore all templates
Transcript
HTML Code for Beginners
Get Crafty with canvas code
OBJECTIVES
HTML Code for Beginners
CO1
Differentiate between the RCE and the HTML Editor.
TRAINING OBJECTIVES
CO2
Define HTML.
CO3
Identify HTML code that can be used in Canvas.
CO1
RCE VS. HTML EDITOR
The content editor is available anytime for creating new content. The Rich Content Editor is used in features that support the editor (Announcements, Assignments, Discussions, Pages, Quizzes, or Syllabus). Within the RCE Iurks the HTML Editor. The HTML Editor allows users to enhance Canvas pages in ways that the RCE will not allow.
Rich Content Editor
HTML Editior
CO2
HTML stands for HyperText Markup Language. Developed by scientist Tim Berners-Lee in 1990, HTML is the "hidden" code that helps us communicate with others on the World Wide Web (WWW).
WHAT IS HTML
CO2
HTML TAGS
CANVAS HTML EDITOR
This layout in the Canvas HTML Editor would look like the following: Tags are highlighted in pink.
When writing HTML, you add "tags" to the text in order to create the structure. These tags tell Canvas how to display the text or graphics in the document.
VS
<h2>Why I like to go swimming in the summer.</h2> <p>Swimming is my most favorite activity in the summer. When the sun is shining and the air is warm, you will find me dipping into my backyard pool. It's not an impressive pool, only three feet deep, but it's mine.</p> <p>There are three reasons I like to swim:</p> <ul> <li>I get lots of exercise</li> <li>I enjoy the freedom</li> <li>I have an opportunity to be in the sun.</li> </ul>
+ RCE
Note: Canvas automatically adds the HTML tags so we do not have to.
HTML Code for Beginners
LET'S CODE!
snippets
HTML Code for Beginners
01 - HEX Codes
05 - Background Color
06 - iframe
02 - Horizontal Line
07 - Fonts
03 - Shadow Box
08 - Icon Maker
04 - Video Embed
CO3
HEX CODES
A hex code (think six, like a hexagon) is a code that corresponds to a color. Every hex code is made up of the number symbol (#) and six numbers or letters. For example, the hex code for the color black is #000000. Luckily, you also don't need to know how to write hex codes! W3 Schools, Color Groups page is full of hex codes ready for you to use in every shade and variety you can think of! As a bonus, you'll also be able to see how text looks on that color to make sure you have enough contrast. There are a lot of useful side tabs there, too, so play around! To use a hex code, you'll replace the hex code value in your code snippet with the color you want! So let's learn how.
CO3
HORIZONTAL LINE
It is an online pedagogical best practice to break up large pages of text into more easily digested chunks and to clearly delineate these chunks with white spaces, line-separators, and other tools. The Rich Content Editor in Canvas now allows you to add a horizontal line but the width and color cannot be edited. However, with this line of code, you can make edits.
CO3
SHADOW BOX
You'll notice this code snippet is a little longer than the previous one, but don't panic. Essentially, we've got one element that creates the text box with a border and another element that creates the shadow, but that doesn't really change your job: copy and paste.
CO3
YOUTUBE video embed
Imagine that you've found the perfect video, perfect for the concept you're trying to teach- there's only one hiccup: it's too long. You don't want students to watch the entire thing; they've got better things to spend their brain space on. What do you do? Well, with this exercise, you can embed exactly the segment of video you want them to watch! Note: This tutorial is designed for YouTube videos. If you've got a specific video elsewhere you'd like to embed a segment of, ask your friendly, neighborhood eLearning & CTL design team if it's possible!
CO3
BACKGROUND COLOR
This code shows you how to create a background color for part or all of your page without relying on the text background color option alone (who needs all those white spaces between lines, right?)!
CO3
iframe
An iFrame, also known as Inline Frame, is an element that loads another HTML element inside a web page. They are commonly used to embed specific content like external pages and other interactive elements into the page.
CO3
FONTS
Canvas has updated so that you no longer have to code font. To change the font in Canvas, select Format in the RCE, and click the Fonts option [5].
CO3
ICON MAKER
You can choose Canvas images or upload your own custom images to make icons within the Rich Content Editor. Canvas allows us to do this on the RCE side but codes the content into the HTML Editor.
CO3
HTML Code for Beginners
We highly recommend that you play with these tricks in a playground course! Let us know if you need one made.
References
HTML Code for Beginners
Canvas Instructure
Canva 101 by Kelley L. Meeusen
How to Use iFrame by Luqmanul M.
HTML Code for Beginners
THANKS