Lauren Burlison | Education Consultant
canvasqueen2020@gmail.com | @canvaslmsqueen
TABLE OF CONTENT
TABLE OF CONTENT
HTML CODE KEYS:
HTML HELP:
USING THE HTML EDITOR
USING THE HTML EDITOR
HTML Editor Title
Pretty HTML Editor
HTML Editor/Rich Content Editor Access Button
Raw HTML Editor Access Button
HTML EDITOR TIPS!
HTML EDITOR TIPS!
TIP#1:
After pasting the code, switch to the Rich Content Editor to view the result of your code before saving.
TIP#2:
It is much easier to modify some elements of your code in the Rich Content Editor such as: font size, font color, alignment, and adding text.
TIP#3:
Once your page is completed, copy the HTML code and paste it into another HTML Editor to create a quickly made copy.
NEED MORE ASSISTANCE?
Check out Canvas tutorial videos on YouTube Channel - Canvas Queen
Click HERE to view HTML Editor videos!
HTML - BASIC TAGS
HTML - BASIC TAGS
Tags: | Description: |
<p></p> | paragraph |
<h1></h1> to <h6></h6> | titles/headers |
<div></div> | divisions of information |
<hr> | content dividing line |
<iframe></iframe> | inserting web page within the page |
FONT
FONT
HTML Code:
<p style="color: red;">This is a paragraph.</p>
<p style="color: blue;">This is another paragraph.</p>
<p style="font-family: Arial Black;">This is a paragraph.</p>
<p style="font-family: 'Courier New';">This is another paragraph.</p>
Appearance:
BACKGROUND COLOR
BACKGROUND COLOR
HTML Code:
<div style="background-color: #a3daa1;">
<h1 style="text-align: center;">Assessment Name Here</h1>
<p style="text-align: center;">Directions and information here!</p>
</div>
Appearance:
PILL TITLE
PILL TITLE
HTML Code:
<ul class="pill" style="background-color: #c2e0f4;">
<li style="font-size: 16pt;">Estimated Reading Time</li>
<li style="font-size: 16pt;">30 mins</li>
</ul>
Appearance:
PAGE LINE DIVIDER
PAGE LINE DIVIDER
HTML Code:
<h3>Title</h3>
<hr style="height: 6px; border-color: blue; background-color: blue;" />
<p>Information</p>
Appearance:
DROPDOWN MENU 1
DROPDOWN MENU 1
HTML Code:
<p><span id="index3" class="element_toggler" style="font-size: 1.5em; font-weight: bold; color: #0058a0;" role="button" aria-controls="index3pt1" aria-expanded="false" aria-label="Toggler toggle list visibility"> <i class="icon-arrow-open-right"></i> Content Title (click to expand)</span></p>
<div id="index3pt1" style="background-color: #ffd93d; margin-left: 2em; padding: 2em 1em 2em; display: none;">
<p style="color: black;">Information 1</p>
<p style="color: black;">Information 2</p>
<p style="color: black;">Information 3</p>
</div>
Appearance:
DROPDOWN MENU 2
DROPDOWN MENU 2
HTML Code:
<p><span class="element_toggler" role="button" aria-controls="group_1" aria-label="Toggler toggle list visibility" aria-expanded="false"><i class="icon-mini-arrow-down"></i> <strong>Toggler</strong></span></p>
<ul id="group_1" style="display: none;">Text to show when expanded goes here.</ul>
Appearance:
DROPDOWN MENU 3
DROPDOWN MENU 3
HTML Code:
<h4><span class="element_toggler btn btn-primary" role="button" aria-controls="instructions" aria-label="Toggler toggle list visibility" aria-expanded="false">Click here for additional information.</span></h4>
<ul id="instructions" style="list-style: none; display: none;">
<li><p>MORE INFO-TEXT</p></li>
</ul>
Appearance:
DROPDOWN COLUMNS
DROPDOWN COLUMNS
HTML Code:
<p><span id="index3" class="element_toggler" <div style="display: flex; margin: auto;">
<div style="flex-basis: 50%;">
<p><span id="index1" class="element_toggler" style="font-size: 1.5em; color: #0058a0;" role="button" aria-controls="index1pt1" aria-expanded="false" aria-label="Toggler toggle list visibility"> <i class="icon-arrow-open-right"></i> Content Title (click to expand)</span></p>
<div id="index1pt1" style="background-color: #ffd93d; margin-left: 2em; padding: 2em 1em 2em; display: none;">
<p style="color: black;">Information 1</p>
<p style="color: black;">Information 2</p>
<p style="color: black;">Information 3</p>
</div>
</div>
<div style="flex-basis: 50%;">
<p><span id="index2" class="element_toggler" style="font-size: 1.5em; color: #0058a0;" role="button" aria-controls="index2pt1" aria-expanded="false" aria-label="Toggler toggle list visibility"> <i class="icon-arrow-open-right"></i> Content Title (click to expand)</span></p>
<div id="index2pt1" style="background-color: #ffd93d; margin-left: 2em; padding: 2em 1em 2em; display: none;">
<p style="color: black;">Information 1</p>
<p style="color: black;">Information 2</p>
<p style="color: black;">Information 3</p>
</div>
</div>
</div>
Appearance:
INFORMATION BOX
INFORMATION BOX
HTML Code:
<div class="img-rounded" style="float: left; background-color: #66c6ed; width: 315px; height: 250px; border: 1px solid black; margin: 10px;">
<h3 style="color: #ffffff; background-color: #9cd64e; text-align: center; margin: 0px; padding: 0px;">TITLE HERE</h3>
<div id=" padding: 6px; text-align: left;"><br />
<ul style="color: #ffffff;">
<li>(1) INFORMATION HERE;</li>
<li>(2) INFORMATION HERE</li>
<li>(3) INFORMATION HERE</li>
<li>(4) INFORMATION HERE</li>
<li>(5) INFORMATION HERE</li>
</ul>
</div>
</div>
Appearance:
INTERACTIVE BUTTONS
INTERACTIVE BUTTONS
HTML Code
<h1>Put these events in order</h1>
<div class="enhanceable_content sortable" style="display: none;">
<div style="text-align: center; background-color: #ff6e77; color: #ffffff; width: 350px; height: 75px;">
<p style="padding: 20px;">The ring is cast into the fires of Mount Doom</p>
</div>
<div style="text-align: center; background-color: #ffb347; color: #ffffff; width: 350px; height: 75px;">
<p style="padding: 20px;">The Fellowship is formed</p>
</div>
<div style="text-align: center; background-color: #c3d85f; color: #ffffff; width: 350px; height: 75px;">
<p style="padding: 20px;">Saruman captures Gandalf</p>
</div>
</div>
Appearance:
TABS
TABS
HTML Code:
<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1">PUT TITLE FOR TAB 1 HERE</a></li>
<li><a href="#fragment-2">PUT TITLE FOR TAB 2 HERE</a></li>
<li><a href="#fragment-3">PUT TITLE FOR TAB 3 HERE</a></li>
</ul>
<div id="fragment-1">
<p>PUT THE CONTENT FOR THE 1ST TAB HERE</p>
</div>
<div id="fragment-2">
<p>PUT THE CONTENT FOR THE 2ND TAB HERE</p>
</div>
<div id="fragment-3">
<p>PUT THE CONTENT FOR THE 3RD TAB HERE </p>
</div>
</div>
Appearance:
TABS WITH COLOR
TABS WITH COLOR
HTML Code:
<div class="enhanceable_content tabs">
<ul>
<li style="background-color: #f05353;"><a href="#fragment-1">PUT TITLE FOR TAB HERE</a></li>
<li style="background-color: #e1e14e;"><a href="#fragment-2">PUT TITLE FOR TAB HERE</a></li>
<li style="background-color: #66c6ed;"><a href="#fragment-3">PUT TITLE FOR TAB HERE</a></li>
</ul>
<div id="fragment-1">PUT THE CONTENT FOR THE FIRST TAB HERE</div>
<div id="fragment-2">PUT THE CONTENT FOR THE SECOND TAB HERE.</div>
<div id="fragment-3">PUT THE CONTENT FOR THE THIRD TAB HERE</div>
</div>
Appearance:
GOOGLE SLIDESHOW EDITS
GOOGLE SLIDESHOW EDITS
HTML Code:
Add highlighted section:
<frame src=
"GoogledocURLhere=3000&rm=minimal" width="700" height="400" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe></p>
Appearance:
BEFORE
AFTER
EMBED WEBSITES
EMBED WEBSITES
HTML Code:
Insert website in highlighted section:
<p><iframe src="https://wow.boomlearning.com/" width="90%" height="600" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></p>
Appearance:
ELEMENTARY LONG DIVISION SYMBOL
ELEMENTARY LONG DIVISION SYMBOL
HTML Code:
<span class='numbers' style="border-right: 1px black solid; border-radius: 0px 0px 10px 0px">
4
</span>
<span class='numbers' style="border-top: 1px black solid; ">
84
</span>
Appearance:
EMOJIS
EMOJIS
HTML Code:
<p style="font-size:100px">🦁</p>
<p>I will display 🦁</p>
<p>I will display 🦁</p>
Appearance:
Link to List of Emojis in Code: https://www.w3schools.com/charsets/ref_emoji.asp
DEFINITIONS LIST
DEFINITIONS LIST
HTML Code:
<dl class="dl-horizontal">
<dt>Acid</dt>
<dd>A substance that produces H+(aq) ions in aqueous solution</dd>
<dt>Acid Anhydride</dt>
<dd>The oxide of a nonmetal that reacts with water to form an acid</dd>
<dt>Acid Anhydride</dt>
<dd>Compound produced by dehydration of a carbonic acid</dd>
</dl>
Appearance:
STYLED BORDERS
STYLED BORDERS
HTML Code:
<div style="width: 95%; margin: auto; background-color: #e2f1f7; padding: 15px; border: 5px; border-style: solid; border-color: #1a6a8b; border-radius: 25px;">
<p>Insert Information Here! </p>
<p>1. Important information (placeholder)</p>
<p>2. Important information (placeholder)</p>
<p>3. Important information (placeholder)</p>
</div>
Appearance:
DIV COLUMNS
DIV COLUMNS
HTML Code:
<div style="display: flex; margin: auto; padding: 10px;">
<div style="flex-basis: 25%; margin: auto;">
<p>cell 1</p>
</div>
<div style="flex-basis: 25%; margin: auto;">
<p>cell 2</p>
</div>
<div style="flex-basis: 25%; margin: auto;">
<p>cell 3</p>
</div>
<div style="flex-basis: 25%; margin: auto;">
<p>cell 4</p>
</div>
</div>
Appearance:
HTML BUTTON
HTML BUTTON
HTML Code:
<p><span style="font-size: 14pt; border-radius: 10px; border-bottom: solid 2px #143d50; border-right: solid 2px #143d50; padding: 15px; background-color: #f8b81a; color: #143d50;"><em>Button Title</em></span></p>
Appearance:
AUDIO MINIMIZED PLAYER
AUDIO MINIMIZED PLAYER
Appearance:
HTML Code:
Insert audio course link in highlighted section:
<p>
<audio controls="controls">
<source src="URL" type="audio/ogg" />
<source src="URL" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</p>
BEFORE
AFTER
MICROSOFT PAINT
MICROSOFT PAINT
Appearance:
HTML Code:
<p><iframe src="https://jspaint.app/#local:99b29783114ec" width="100%" height="600" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></p>
Lauren Burlison | EdTech Coach
canvasqueen2020@gmail.com | @canvaslmsqueen
https://www.w3schools.com/tags/tag_code.asp