Canvas Accessible Course Page HTML

Home Page Template HTML:

<h2 style=”text-align: left;”><img id=”32691729″ src=”https://canvas.wisc.edu/courses/376608/files/32691729/preview” alt=”HSLC Images” data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/files/32691729″ data-api-returntype=”File” /><br /><strong>Welcome to Course Name Here!</strong></h2>
<p>Course welcome and text here.&nbsp;</p>
<p>Use the buttons below to access course information and materials.</p>
<hr />
<div class=”grid-row”>
<div class=”col-xs-12 col-md-6″>
<div class=”content-box pad-box-mini border border-trbl border-round” style=”border-color: #fff;”>
<h3 style=”text-align: left;”><strong>Important Course Links</strong></h3>
<div class=”col-xs-12″ style=”text-align: center;”><a class=”Button Button–large” style=”margin-bottom: 5px; background-color: #0479a8; color: white; border: none; text-align: center;” title=”Important Link 1″ href=”https://canvas.wisc.edu/courses/376608/pages/sub-page-template” data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/sub-page-template” data-api-returntype=”Page”><strong>Important Link 1</strong></a> <a class=”Button Button–large” style=”margin-bottom: 5px; background-color: #0479a8; color: white; border: none; text-align: center;” title=”Important Link 2″ href=”https://canvas.wisc.edu/courses/376608/pages/sub-page-template-2″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/sub-page-template-2″ data-api-returntype=”Page”><strong>Important Link 2</strong></a> <a class=”Button Button–large” style=”margin-bottom: 5px; background-color: #0479a8; color: white; border: none; text-align: center;” title=”Important Link 3″ href=”https://canvas.wisc.edu/courses/376608/pages/sub-page-template-3″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/sub-page-template-3″ data-api-returntype=”Page”><strong>Important Link 3</strong></a> <a class=”Button Button–large” style=”margin-bottom: 5px; background-color: #0479a8; color: white; border: none; text-align: center;” title=”Important Link 4″ href=”https://canvas.wisc.edu/courses/376608/pages/sub-page-template-4″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/sub-page-template-4″ data-api-returntype=”Page”><strong>Important Link 4</strong></a> <a class=”Button Button–large” style=”margin-bottom: 5px; background-color: #0479a8; color: white; border: none; text-align: center;” title=”Important Link 5″ href=”https://canvas.wisc.edu/courses/376608/pages/sub-page-template-5″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/sub-page-template-5″ data-api-returntype=”Page”><strong>Important Link 5</strong></a></div>
</div>
</div>
<div class=”col-xs-12 col-md-6″>
<div class=”content-box pad-box-mini border border-trbl border-round” style=”border-color: #fff;”>
<p style=”text-align: center;”>&nbsp;</p>
<p style=”text-align: center;”><strong><img id=”39026059″ style=”display: block; margin-left: auto; margin-right: auto;” src=”https://canvas.wisc.edu/courses/376608/files/39026059/preview” alt=”Bucky.webp” width=”228″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/files/39026059″ data-api-returntype=”File” /></strong></p>
</div>
</div>
</div>
<hr />
<h3 style=”text-align: center;”><strong>Weekly Course Links</strong></h3>
<div class=”content-box”>
<div class=”grid-row”>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″ style=”padding: 5;”>
<div class=”btn” style=”background: #9b0000; border: none; height: 75px; margin: 5px; text-align: center;”><strong><span style=”color: #ffffff; font-size: 18pt;”><a style=”position: relative; padding: 30px 0px; height: 70px; display: block; text-decoration: none; color: #ffffff;” title=”Week 1″ href=”https://canvas.wisc.edu/courses/376608/pages/weekly-template-page-1″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/weekly-template-page-1″ data-api-returntype=”Page”>Week 1</a></span></strong></div>
</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″ style=”padding: 5;”>
<div class=”btn” style=”background: #9b0000; border: none; height: 75px; margin: 5px; text-align: center;”><strong><span style=”font-size: 18pt;”><a style=”position: relative; padding: 30px 0; height: 70px; display: block; text-decoration: none; color: #f5f7f8;” title=”…” href=”https://canvas.wisc.edu/courses/376608/pages/weekly-template-page-2″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/weekly-template-page-2″ data-api-returntype=”Page”> Week 2 </a></span></strong></div>
</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″ style=”padding: 5;”>
<div class=”btn” style=”background: #9b0000; border: none; height: 75px; margin: 5px; text-align: center;”><strong><span style=”font-size: 18pt;”><a style=”position: relative; padding: 30px 0; height: 70px; display: block; text-decoration: none; color: #f2f5f6;” title=”…” href=”https://canvas.wisc.edu/courses/376608/pages/weekly-template-page-3″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/weekly-template-page-3″ data-api-returntype=”Page”> Week 3 </a></span></strong></div>
</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″ style=”padding: 5;”>
<div class=”btn” style=”background: #9b0000; border: none; height: 75px; margin: 5px; text-align: center;”><strong><span style=”color: #ffffff; font-size: 18pt;”><a style=”position: relative; padding: 30px 0px; height: 70px; display: block; text-decoration: none; color: #ffffff;” title=”…” href=”https://canvas.wisc.edu/courses/376608/pages/weekly-template-page-4″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/weekly-template-page-4″ data-api-returntype=”Page”> Week 4 </a></span></strong></div>
</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″ style=”padding: 5;”>
<div class=”btn” style=”background: #9b0000; border: none; height: 75px; margin: 5px; text-align: center;”><span style=”font-size: 18pt;”><strong><span style=”color: #ffffff;”><a style=”position: relative; padding: 30px 0px; height: 70px; display: block; text-decoration: none; color: #ffffff;” title=”…” href=”https://canvas.wisc.edu/courses/376608/pages/weekly-template-page-5″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/weekly-template-page-5″ data-api-returntype=”Page”> Week 5 </a></span></strong></span></div>
</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″ style=”padding: 5;”>
<div class=”btn” style=”background: #9b0000; border: none; height: 75px; margin: 5px; text-align: center;”><span style=”color: #ffffff;”><strong><span style=”font-size: 18pt;”><a style=”position: relative; padding: 30px 0px; height: 70px; display: block; text-decoration: none; color: #ffffff;” title=”…” href=”https://canvas.wisc.edu/courses/376608/pages/weekly-template-page-6″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/weekly-template-page-6″ data-api-returntype=”Page”> Week 6 </a></span></strong></span></div>
</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″ style=”padding: 5;”>
<div class=”btn” style=”background: #9b0000; border: none; height: 75px; margin: 5px; text-align: center;”><span style=”font-size: 18pt;”><strong><span style=”color: #ffffff;”><a style=”position: relative; padding: 30px 0px; height: 70px; display: block; text-decoration: none; color: #ffffff;” title=”…” href=”https://canvas.wisc.edu/courses/376608/pages/weekly-template-page-7″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/weekly-template-page-7″ data-api-returntype=”Page”> Week 7 </a></span></strong></span></div>
</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″ style=”padding: 5;”>
<div class=”btn” style=”background: #9b0000; border: none; height: 75px; margin: 5px; text-align: center;”><span style=”font-size: 18pt;”><strong><span style=”color: #ffffff;”><a style=”position: relative; padding: 30px 0px; height: 70px; display: block; text-decoration: none; color: #ffffff;” title=”…” href=”https://canvas.wisc.edu/courses/376608/pages/weekly-template-page-8″ data-api-endpoint=”https://canvas.wisc.edu/api/v1/courses/376608/pages/weekly-template-page-8″ data-api-returntype=”Page”> Week 8 </a></span></strong></span></div>
</div>
</div>
<hr />
</div>

 

Weekly Page Template HTML:

<div class=”content-box”>
<div class=”grid-row”>
<div class=”col-xs”>
<div style=”background-color: #9b0000; padding-top: 10px; padding-right: 10px; padding-bottom: 10px;”>
<h2 style=”text-align: center;”><span style=”color: #ffffff;”>Dates</span></h2>
</div>
<h2>Table of Contents</h2>
<p style=”text-align: center;”><span style=”font-size: 14pt;”><strong><a class=”Button Button–primary” style=”background: #0479a8; border-color: #0479a8; color: #fff; line-height: 1.5;” href=”#section_1″>Section 1</a> </strong></span><span style=”font-size: 14pt;”><strong><a class=”Button Button–primary” style=”background: #0479a8; border-color: #0479a8; color: #fff; line-height: 1.5;” href=”#section_2″>Section 2</a> </strong></span><span style=”font-size: 14pt;”><strong><a class=”Button Button–primary” style=”background: #0479a8; border-color: #0479a8; color: #fff; line-height: 1.5;” href=”#section_3″>Section 3</a> </strong></span><span style=”font-size: 14pt;”><strong><a class=”Button Button–primary” style=”background: #0479a8; border-color: #0479a8; color: #fff; line-height: 1.5;” href=”#section_4″>Section 4</a></strong></span> <span style=”font-size: 14pt;”><strong><a class=”Button Button–primary” style=”background: #0479a8; border-color: #0479a8; color: #fff; line-height: 1.5;” href=”#section_5″>Section 5</a> </strong></span><span style=”font-size: 14pt;”><strong><a class=”Button Button–primary” style=”background: #0479a8; border-color: #0479a8; color: #fff; line-height: 1.5;” href=”#section_6″>Section 6</a> </strong></span> <span style=”font-size: 14pt;”><strong><a class=”Button Button–primary” style=”background: #0479a8; border-color: #0479a8; color: #fff; line-height: 1.5;” href=”#section_7″>Section 7</a> </strong></span></p>
<hr />
<h2 id=”section_1″>Section 1</h2>
<p><a href=”#top”>Jump to top of page</a></p>
<h2 id=”section_2″>Section 2</h2>
<p><a href=”#top”>Jump to top of page</a></p>
<h2 id=”section_3″>Section 3</h2>
<p><a href=”#top”>Jump to top of page</a></p>
<h2 id=”section_4″>Section 4</h2>
<p><a href=”#top”>Jump to top of page</a></p>
<h2 id=”section_5″>Section 5</h2>
<p><a href=”#top”>Jump to top of page</a></p>
<h2 id=”section_6″>Section 6</h2>
<p><a href=”#top”>Jump to top of page</a></p>
<h2 id=”section_7″>Section 7</h2>
<p><a href=”#top”>Jump to top of page</a></p>
</div>
</div>
</div>