Intro to HTML and CSS in Canvas (Advanced page design in Canvas)
Know The Code! - A look behind the curtain
What is HTML and CSS
Behind everything that shows up on your web browser screen is a series of computer languages that tells the computer what to show you. We call these languages the source code. In Canvas the code we have access to uses two languages, HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). You can view and edit this code by clicking the "HTML Editor" link in the upper right corner of the Rich Content Editor in Canvas.
In this page we will look at some of the simpler edits we can make in the code to have more control over the design of your Canvas pages. This is just scratching the surface of what leaning to code can do for you. If you enjoy this let me know and we'll meet and learn some more.
Tags, Attributes, and Style Rules
Let's start by working through some syntax and vocabulary that we'll use throughout this portion of the training.
Tags
HTML code uses Tags that are surrounded by angled brackets like this <HTML>. Tags are like light switches, one turns a function on, and another turns it off again. For example, <p> designates the beginning of a paragraph - the on switch, and the </p> designates the end - the off switch.
Attributes
Within tags we can have attributes. The main attribute we use is the style attribute. Attributes are written with the name of the attribute, an equals sign, and the attribute information in quotation marks. An empty style attribute would look like this: style=" ".
Rules
CSS Rules are the specific information that will appear in the quotation marks in the style attribute. Rules consist of a property and a value separated by a colon, and closed by a semicolon. So, a rule telling a paragraph text to be blue might look like this:
That would appear as:
In a hole in the ground there lived a Hobbit.
Margin and Padding
Margin and Padding are CSS properties that control spacing. To understand spacing I use the metaphor of a vase in a box. When you're packing a vase in a box, you put padding between the vase and the box to keep it safe, so padding is the space between the box and the content itself. Margin then, is the space outside the box, or between one box and the next. The box itself is the border, and that width can be edited as well.
So, if I wanted to give a paragraph 30 pixels of padding above it I would write:
<p style="padding-top:30px;">In a hole in the ground there lived a Hobbit.</p>
Div Containers
Div tags create containers to move content around on the page or simply contain them in a box. Surround the content you want to contain with opening and closing Div tags <div> and </div>. Then give the opening tag a style attribute with the properties you want applied. I will frequently use a Div to limit text to a certain portion of the page, make it float to the right or left of other content, give additional padding or margin, or apply a border and/or background color to a block of text. Below is an example of using a div to put content in a box. This is a great technique for separating out a portion of text from the rest of the page, like I did with the interview video earlier in this training.
<div style="width: 80%; border: 2px dashed #333333; background: #999999; padding:40px;">
Hexidecimal Color Codes
The Canvas editor has 40 colors that you can choose from, but most of them are useless and will never look good on a Canvas page. Hexidecimal codes on the other hand, allow you to specifiy any color you want to use. Hexidecimal codes are six-digit codes that use alpha-numeric digits to specify color values and are preceded by the hash as shown above. As I mentioned before, I like to find an inspirational image to use, and make a banner graphic for the course. Then I can pull specific colors out of the image to use in the course.
Here are some tags and CSS properties that can make use of color codes:
In a paragraph <p>, header tag <h2>, <h3>, <h4>, Div <div> or span tag <span> you can use a style attribute to set colors.
| Property | Changes the color of the... |
|---|---|
| color | text within the tag. |
| background | background of a div, header, table, or table cell |
| border-color | border of a div, table, or table cell |
You can also use color codes and write additional CSS rules in the Cell Properties and Table Properties withing the Table tool in the Rich Content Editor.
Pulling Color Codes from a Photo
Here are some web based tools you can use to find color codes from a photograph.
| CSS Drive Color Palette Generator Links to an external site. | This is a cool tool where you can upload an image and the tool will extract the prominent colors and show you the Hex Codes for them. |
| Big Huge Labs Color Palette Generator Links to an external site. | Similar to the tool above this tool allows you to upload a photo and get color codes. This tool doesn't always choose the exact colors in the photo, but muted shades of them. (See an example of this tool below) |
| Image Color Picker Links to an external site. | This tool is a little different than the others, where it doesn't generate a full color palette, but rather is more like the Eyedropper tool in Powerpoint and allows you to select a specific color from the uploaded photo, giving the hex code of the specific selected color. |
You're doing great! Click Next to put these deisgn techniques to use cleaning up a Canvas page.