HTML Page Banners

There are many benefits to using html to style your course and your page banners. 

  • HTML banners are accessible for assistive devices like screen readers
  • Easily copy from course to course, institution to institution
  • Doesn't require extra files
  • Takes up less space than files/pictures

Sample Code

<p style="background: #273994; padding: 10px; text-align: center;"></p>

 

Now that you have the sample code, you can easily adjust it.

background: #273994  <--- This part of the code is what made the background in the sample blue. You can google "html color codes" or "html color schemes" to find codes and color combinations. Change the number and you will have a different color.

Accessibility Note: Be sure to check the contrast when adding text to these bars of color. Choose colors that are a high contrast between your text color.

Here is B407D9

<p style="background: #B407D9; padding: 10px; text-align: center;"></p>

 

padding: 10px <--- Padding controls the width of the banner. Both of the samples above use 10px. The 10px is in addition to the space used by your text. You can adjust the padding to get the look you want.

Adding Text

The sample code below includes text. You can adjust the font size and color as needed using Rich Content Editor. Highlight the text and adjust using the buttons at the top of the edit box. You can also manually adjust them in the html code if you are comfortable with that. 

<p style="background: #273994; padding: 10px; text-align: center;">
    <span style="color: #ffffff; font-size: 36pt;">Assignment</span>
</p>

Sample Usage Ideas

Assignment

Discussion

Week 1 Overview