Using Tabs in Your Canvas Course

Video Link - http://screencast.com/t/y8kKgBuGOWT8

Utilizing tabs in your course may be a good idea for a variety or reasons.

• Aesthetics – Tabs can improve your course design by making your course more visually appealing and look more organized.
• You may be looking for a way to avoid using multiple pages for chunked content
• Tabs can help keep similar content together without creating a longer page that looks overwhelming to students

The benefits of using headers within your tabs / fragments -

• Design – Using headers within your tabs helps to visually organize and separate your content, and can improve the overall look of your page, especially if you have a large number of tabs.
• Accessibility – visually impaired students who use screen readers can more easily select a desired section of the content, without having to wait for their reader to read through an entire page, which could be very long and inefficient.
• It is important to repeat the title/header of the tab with the <h2> html code and also use the <h3> html code for sub headers within the tabs / fragments

I’ve included some example HTLM code. You can simply copy and paste this code into your HTLM editor. To make editing it easier, I’ve bolded the areas you would want to replace with your own content. You can also add additional tabs by duplicating the relevant coding, or delete any extra tabs, or content by removing the corresponding code.

To show you exactly how I added these tabs, you can follow along in the video

Thank you for watching.

______________________________

Tabs - HTML Code

<div class="enhanceable_content tabs">

<ul>

<li><a href="#fragment-1"><span>TAB 1 NAME</span></a></li>

<li><a href="#fragment-2"><span>TAB 2 NAME</span></a></li>

<li><a href="#fragment-3"><span>TAB 3 NAME</span></a></li>

<li><a href="#fragment-4"><span>TAB 4 NAME</span></a></li>

<li><a href="#fragment-5"><span>TAB 5 NAME</span></a></li>

</ul>

<div id="fragment-1">

<p><em>

Intro to what is presented in the tabs:

</em><span style="font-weight: 400;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span style="font-weight: 400;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">Section Name in "Heading 3" for Accessibility</span></h3>

<ul>

<li><span style="font-weight: 400;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></li>

<li>

Embed YouTubes within Tabs:

</li>

<ul>

<li><a class="" href="

https://youtu.be/kOjOr1ionic">https://youtu.be/kOjOr1ionic

</a> </li>

</ul>

<li>

<p>

Resource:

<a id="" class="" title=""

href="http://oei.onefortraining.org/videos/

" target="_blank">Captions for Videos</a></p>

</li>

</ul>

<h2><span style="color: #800000;"><span lang="EN"></span></span></h2>

<p> </p>

 </div>

<div id="fragment-2">

<h2><span style="color: #800000;">TAB 2 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/DrqIm31TE40" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<hr />

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<br />

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<ul>

<li><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></li>

</ul>

<p><strong>

Links to Related Articles

</strong></p>

<ul>

<li><a title="

Formatting Text (On webpage/LMS)

" href="

http://oei.onefortraining.org/text/">Formatting Text (on webpage/LMS)

</a></li>

</ul>

<p class="">

Resource:

<a id="" class="" title="" href="

http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/

" target="_blank">

Formatting Text (Word and PowerPoint)

</a> </p>

</div>

<div id="fragment-3">

<h2><span style="color: #800000;">TAB 3 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/ZrbiqsqtStY" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<p><span>Resources:</span></p>

<ul>

<li><a id="" class="" title=""

href="http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/" target="_blank">Formatting Text (Word and PowerPoint)

</a></li>

<li><a id="" class="" title=""

href="http://oei.onefortraining.org/videos/

" target="_blank">

Captions for Videos

</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/formatting-images-webpage-lms/

" target="_blank">

Formatting Images </a>(Webpage/LMS)

</li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/color-contrast/

" target="_blank">Color Contrast</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/link-text-associated-with-a-universal-resource-locator-url/

" target="_blank">

URL Link Text

</a></li>

</ul>

<p class="p1"> </p>

</div>

<div id="fragment-4">

<h2><span style="color: #800000;">TAB 4 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/p9yszeopMZU" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></div>

<div></div>

<div></div>

<div id="fragment-5">

<h2><span style="color: #800000;">TAB 5 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/jTogzQ9bsTY" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<p>

Resources:

</p>

<ul>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/

" target="_blank">Formatting Text (Word and PowerPoint)</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/videos/

" target="_blank">

Captions for Videos

</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/formatting-images-webpage-lms/

" target="_blank">Formatting Images </a>(Webpage/LMS)</li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/color-contrast/

" target="_blank">Color Contrast</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/link-text-associated-with-a-universal-resource-locator-url/

" target="_blank">

URL Link Text

</a></li>

</ul>

<p class="p1"></p>

</div>

</div>