Make Your Course Beautiful (and More Effective) with Simple HTML Basics new

00:21 - Today we’re going to talk about how to make your course beautiful and I think more effective with simple HTML basics.

00:30 - If you are a learn by doing kind of person, you may want to open up a page in one of your Sandbox shells.

00:39 - You’ll have the opportunity for a little bit of hands-on practice in a bit.

00:44 - Keep in mind, there won’t be time for me to do a whole lot of troubleshooting if you aren’t able to do exactly what I’m doing, so you may prefer to just watch, listen, and absorb, and save the hands-on part for later; it’s totally up to you.

01:00 - Also, I will be showing things in the new Rich Content Editor.

01:05 - So if you don’t have that enabled in your sandbox yet, what you’re seeing in your shell is going to look a little different than what I’m showing in the Rich Content Editor in my shell.

01:18 - Last bit of detail. I have created a cheat sheet for you with all of the code snippets that we’re going to be talking about today, and I will share that in a little bit.

01:31 - Okay. Let’s go back to our regular programming.

01:34 - We all know developing an effective online course takes more than just slapping some content up in Canvas.

01:41 - Grabbing and keeping students attention is paramount to creating an engaging learning environment.

01:49 - And you may have heard me say it before and you will certainly hear me say it again.

01:54 - People– and that includes our students– don’t pay attention to boring things.

02:00 - Instructors need to be intentional about making course content and course design engaging.

02:06 - One of the ways to do that, to be intentional, is with the visual design of your content.

02:13 - Element 88 of the CVC OEI Course Design rubric is about using a variety of media to present your content and facilitate student learning.

02:24 - And this means using images, graphics, video, and audio to augment written text.

02:32 - Here’s an example of a page from my colleague, Sean Velcarsells [phonetic], History of Rock and Roll course; let me show you that.

02:42 - Where he is incorporating a variety of multimedia.

02:46 - He’s got the banner. He’s got a module header.

02:51 - He’s got an image nicely padded with the text floating next to it.

02:56 - He’s got a video embedded. He’s using these little decorative order bars.

03:01 - So he’s just laying it out visually– in a very visually appealing way.

03:08 - And another example from one of our @one courses, called Introduction to Live Online Teaching and Learning.

03:15 - Which I’m showing you an example again of the borders, and then of a callout box where you can really draw attention to a particular piece of content or text that you want students to notice.

03:28 - And here in our Digital Citizenship course, is an example of using tabs.

03:35 - So you’ve got lots of content on a page. You don’t want to have them scroll forever and ever and ever, so one idea is to set it up in tabs.

03:44 - I have heard from many of you that you feel out of your depth when it comes to page design.

03:51 - How do you add those nifty banners and horizontal lines and callout boxes, and white space around images? So all of those things can be done with HTML.

04:07 - The idea of going into HTML code editor sometimes sends people screaming for the hills.

04:12 - But I am assuming since the webinar description used the word HTML, and you still chose to come, that you’re at least willing to give it a shot.

04:20 - So we’re going to dive in right now because with a little explanation, HTML really isn’t as mysterious as it may seem.

04:29 - So we’ll start with some foundational details.

04:34 - Code is very logical and very orderly. Once you know how a piece of code is structured, it’s pretty easy to use it with confidence.

04:43 - It’s important to remember that each line of code is always– always has an opening and a closing tag enclosed within the greater than/less than symbols.

04:56 - So everything within the opening and closing tag is referred to as a line of text.

05:04 - And I’m going to go into the Canvas Page Editor and show you what I’m talking about.

05:09 - This on the screen right now is an example of the opening and closing tags for a paragraph.

05:16 - It’s got the P. And then the only thing different with the closed tag is the forward slash is added.

05:22 - So let’s go look at that in HTML. I’ve got a page set up here, and we’re seeing the image, the text, a header with a background color and then more image and text.

05:41 - So I’m going to go into the editor– and remember, I’m in the new Ridge Content Editor.

05:47 - The old one has the same functions that we’ll be talking about but they’re in a little bit of a different location.

05:53 - So now I’m going to toggle into the HTML editor, and I’ll show you what I’ve got.

05:59 - Let me make it a little bigger so you can see it better.

06:04 - Okay. So we’ve got here the heading. it opens with an H2; closes with the forward slash H2, and the text is in between the opening and closing tack.

06:15 - They’re identical except for that forward slash at the closing tack.

06:19 - Here we’ve got a paragraph. Opens with the P tag; closes with the forward slash P tag.

06:27 - And then everything in between is considered that line of text even though it’s actually longer than a single line, it’s still fine.

06:37 - Then you’ve got– oh, where’s one I want to find? Okay. Here we’ve got that colored heading.

06:45 - And when you want to alter the default setup of something– so in this case, instead of just the black text with no background, we’ve added a background and made the text of the heading white.

07:00 - So you can add parameters to it. For example, this right here in the H2 is talking about the background color.

07:09 - And all colors are indicated with a six-digit hexadecimal code.

07:17 - It starts with the pound sign and then it’s followed immediately by this six-digit hexadecimal code, the way it’s shown here.

07:24 - And then this part that says “padding” and has a bunch of stuff after it, that’s indicating how much space is to the left of the heading text; and let me show you again so you can see visually.

07:40 - We’ve got the edge of the heading right here, and then there’s a little bit of space between that and the first letter, A. So that’s the result of the padding code.

07:50 - In this case, we’ve got the– padding is indicated in all four directional.

08:00 - So you can have padding for top– and I may be going the wrong way because I’m on screen– but top, right, bottom, left.

08:10 - So you could have different padding for each of those four directionals, or you can have the same padding on all four.

08:17 - In this case, we’ve got zero top pixels– meaning the unit of measurement.

08:24 - Zero, right, zero, bottom, and 10 pixels on the left.

08:31 - So that’s what that part is. Margin– well, let me go back.

08:36 - Padding indicates the space between around the text within an element.

08:45 - So in this case, within our heading– from the edge of the heading– we’ve got the 10-pixel padding between the heading edge and the text.

08:53 - Margin is similar, but margins generate space around content that is outside of the border.

09:01 - So watch what happens if I add a margin parameter to this, and I’m going to– after– well no, Canvas makes it jump, which drives me crazy.

09:14 - So I’m going to, at the end of the padding designator, I’m going to put a space because there’s always a space between each of the designators, and I’m going to add in margin indicator and say 25 pixels, just because I want you to see it.

09:31 - And then if we go back here, you can see now my border doesn’t go to the edge anymore because I have a margin of 25 pixels to the– on the side of it.

09:42 - So, I’m showing you that just so you can see the distinction between padding, which is inside the edge of whatever piece of content you’re working with, and margin, which is outside.

09:58 - Pretty straightforward once you know what you’re looking at.

10:01 - The other thing to be aware of is that code is very strict in its syntax.

10:08 - Things like space-its and punctuation are very critical.

10:13 - Without them the code isn’t going to render properly on the page.

10:17 - But the good news is, if a piece of code isn’t working the way you think it’s supposed to, it can be as simple as checking.

10:26 - Am I missing a space? Or a semicolon? Or a forward slash where on is supposed to be? Then when you add it, voila.

10:34 - The element displays properly on the page. Okay, let’s dive into a little bit of code.

10:42 - First thing I want to do– and I’m going to make this a tiny bit smaller, because it’s just a– there we go– is I want to show you block quote.

10:52 - So you can follow along, you’re just– in your Sandbox if you’d like to.

10:56 - I’m going to make this first paragraph with a block quote.

11:00 - So I’m going to find the paragraph text right here where it says the P tag.

11:06 - And I’m going to substitute the word blockquote all one word.

11:12 - And then, because I have to have an opening and a closing, I’m going to go to the end of that paragraph and also substitute the word blockquote.

11:22 - When I go back to the page, you can see it has this sort of vertical bar.

11:28 - It’s just a very simple visual element that can draw attention to a section of text.

11:34 - And of course it’s nice for long quotes to separate it from the rest of the page text.

11:40 - So that’s as simple as putting blockquote, opening; blockquote closing.

11:45 - Now, let’s get a little fancier and try a horizontal line or rule.

11:51 - And bless Canvas’s little heart, they have added the ability to insert horizontal rules into the new Rich Content Editor.

12:00 - And the way to do that, I’m going to put my cursor in front of the second paragraph.

12:04 - I’m going to come up to the insert menu. And at the bottom, has a– horizonal line.

12:11 - When I click it, boom, there’s my line. But there are times when that unobtrusive light gray line just isn’t good enough for me; I want something a little bolder.

12:21 - So I’m goin going to go into the code and alter it a little bit.

12:25 - And I’ll show you what that looks like. A little– well, I’ll come to that later.

12:31 - So, a horizontal rule is a little different than the code we’ve been talking about because there’s no text involved.

12:38 - So it follows a slightly different pattern than other tags.

12:43 - It’s got the identifier, HR, which stands for horizontal rule.

12:48 - And then if there are any parameters, and then the closing slash.

12:53 - So because there is no text involved, you don’t have the opening and closing with text in the middle.

13:00 - Hopefully, that makes sense. So I’m going to make this horizontal rule fancier by adding in a style parameter.

13:07 - And I will put this in chat for those of you who are following along.

13:15 - So in my HR, and it’s going to jump– there we go.

13:19 - I’m going to put in that style parameter. Border top, one pixel wide, solid color.

13:27 - Now I told you a moment ago that hexadecimal codes are six digits.

13:32 - And it’s true. However, there is an exception for colors where all six of the digits are identical.

13:41 - And in this case, six zeros equals black. When all six zeros– when all six digits are the same, you can abbreviate it with just three of them.

13:52 - Don’t worry about remembering that; I just wanted to explain to you why this only had three zeros, and it’s still going to work.

13:59 - So now I’m going to go back and look. We’ve got a darker line; you can see that.

14:05 - But that’s still not good enough for me. I want it a little bit thicker, so I’m going to change the pixel numbers to be three, and I’m going to put in a pretty color.

14:15 - And I’ll put this color in chat as well in case you want to follow along.

14:21 - It’s going to jump. Oh, it didn’t jump; good.

14:24 - So I’m using a different color, this time it does have all six, because they aren’t identical.

14:31 - And when I go back to the line you can see we’ve got a thicker turquoise or teal colored line.

14:38 - Isn’t that cool? Okay. I’m going to stop for a moment and ask if there’s a question about this.

14:45 - And feel free to unmute or put it in chat, although I may miss it in chat.

14:53 - >> [Inaudible] I love what you’re doing [inaudible] with all this trigger stuff [laughs].

14:59 - >> Oh great. Okay, good. I got more to show you.

15:03 - All right, and Maria is saying if you jump to the raw– well, excuse me– if you go into the raw HTML it won’t jump.

15:11 - I’ll show you the raw HTML. You can still go in there.

15:15 - You see here we’ve got colors and stuff like that.

15:17 - Raw is just strictly black and white, so it can be a little bit harder to work in and I’m hoping Canvas will fix that jumping issue.

15:26 - They did previously, so I’m hoping they will and for right now I’m just learning to live with it.

15:32 - Yes Paul, I’m going to show you where to find hexadecimal codes later.

15:38 - I’ve got some resources for you at the end.

15:41 - Okay. Next thing I want to show you is how to wrap text around images because I’ve got my image and it’s pretty much what is referred to as in-line.

15:52 - So we’ve got the image and then below it is the text.

15:56 - And to me, that is a waste of space. I don’t want that.

15:59 - I want the text to be next to the image. So the way to do that is I will select the image.

16:06 - I’ll come up to the Align Tool in the Rich Content Editor and select left align [gasps].

16:13 - Isn’t that wonderful? All of a sudden it jumps next to it.

16:18 - But I don’t like that the text is right up against the image.

16:22 - I want there to be a little bit of space between the image and the text.

16:27 - If you may recall it’s called padding. So I’m going to toggle into the HTML code.

16:33 - I’m going to find my image and it is not surprisingly the thing that’s– the tag is IMG, standing for image.

16:43 - So in this case, the image already has a style parameter called Float Left, because we just told the image to float to the left of the text.

16:55 - So that’s where I’m going to put my padding.

16:58 - And I’m going to do space– because again, I separate my parameters, my commands if you will.

17:05 - And I’m going to say padding-right. This is a shortcut instead of doing 00right, you know, etcetera.

17:15 - I’m just going to tell it I only want padding on the right.

17:18 - So I’m going to say padding-right; let’s do 10 pixels– px.

17:26 - And then you always end the command with a semicolon.

17:30 - So I’ve told it I want padding to the right of the image, 10 pixels worth.

17:36 - And when we go back and look, you can see now there is a little bit of space between the image and the text.

17:44 - If I had floated my image right, which you can do; same way we did it with left, we would do it right.

17:52 - Oops. I did my heading instead of my image.

17:54 - So if I do this right, then I would go in and instead of saying padding-left I would say padding– excuse me.

18:06 - Instead of saying padding-right, I would say padding to the left of the image.

18:11 - So you can have the image be wherever you want it to be.

18:15 - Note– what else do I want to say about that? Is there anything? Not really, except to remind you that code can be very persnickety.

18:27 - So you want to make sure if I’m doing my padding command that I add the hyphen and the colon and then the space, and then the number of pixels and followed with the semicolon.

18:42 - All of this is going to be in that cheat sheet I give you.

18:44 - I just want to make sure you really get that it– you have to be a detail-oriented person when you’re working in code, because it’s not going to work if you accidently forget a space or something like that.

18:56 - And then all of it is enclosed inside the, what do we call them? Quotation marks.

19:04 - Now, suppose I want a border around this image? In this style parameter we’re going to add a border command.

19:13 - If there were no style parameter yet. If we hadn’t said, float-left, or padding or anything like that, it just had the image and then the destination and URL.

19:23 - We would add the entire style equals. But I don’t need that part; I’m just going to add in the border.

19:30 - And I’ll put it– oh shoot, I didn’t give you the pretty little teal color before; I keep doing that.

19:39 - So there’s that teal color. Here is the HTML for border.

19:44 - I’m going to add it in right here. Border 1 pixel, border black.

19:53 - That’s another little shortcut, that colors can– if it’s a straightforward color name, it can be designated with the actual word.

20:02 - So black, white, blue, red. Sometimes even things like turquoise.

20:08 - So you can try, you know, a word like silver and see if it works.

20:12 - So that’s a shortcut sometimes. When I do that– and I’m actually going to make it thicker so we can really see it– 3 pixels.

20:21 - When I go back to the image, you can now see I have a black border around it.

20:24 - But wait a minute, there’s this weird space there.

20:28 - Some of you may know why that happens. If you recall, padding puts space between the outside of the element and whatever content is inside it.

20:38 - And so we said we wanted padding for our image.

20:42 - Actually, what I would want to do in this case, if I were using a border, I would want to say margin.

20:50 - That would then put the space outside the border.

20:53 - Hopefully, I said that in a way that made sense.

20:56 - I don’t normally put borders around my images, so I don’t worry about the whole padding margin distinction.

21:03 - But if you end up with something that looks like this and it has this funky space, ask yourself, oh, should I use margin or padding? What do I want going on here? And let’s make this a different color.

21:18 - I’m going to use that same color that I did before.

21:24 - Instead of saying solid black and cross your fingers this is going to work, I’m going to do this number, 89D– is that it? Yeah, 5D2.

21:39 - And then when we go back we’ve got our turquoise or aquamarine color.

21:44 - And I see a question. Yes, you–. 5– I don’t know; let’s look and see.

21:50 - Someone is asking if we can do a half a pixel? You probably– well, we’ll see what it does, but you’re not going to see it very well.

21:59 - No, it didn’t seem to register; or did I put– oh, I put pixels in the wrong place.

22:06 - Let me put pixels in the right place. Border,. 5.

22:16 - Let’s see what that looks like. Yeah. Looks like you can do half a pixel.

22:20 - Great question. So, okay. You can change the color and you can see it because I have the padding in there.

22:33 - But if I didn’t have the padding in there– let’s do zero.

22:39 - If I have a really thin border it’s not going to be very visible even though I’ve chosen a pretty color.

22:47 - So if you want the border to be visible you’re going to want to play with the width pixels to determine just how thick you want it to be.

22:56 - Okay, let’s go on to the next thing. I’m going to cancel all that.

23:01 - >> Can I ask a quick question? I’m sorry– >> Absolutely.

23:06 - >> Okay, I might phrase this wrong, but– so, I’m wondering if the order of the command that you write it out, does it always have to be the same order? Meaning does the color always come at the end before the semicolon, or does it matter? >> Great question.

23:19 - It often doesn’t matter what– for example, if you’re in the style parameter inside the quotation marks.

23:29 - With almost complete certainty I can say the order of the commands won’t matter.

23:35 - However, having said that, and I want you to keep in mind I am not an officially trained HTML person, I’ve just learned it by the seat of my pants, so I don’t always know everything– although I pretend I do.

23:50 - So if you do something and it doesn’t work, try switching the order.

23:55 - Maybe for some magical reason, that will make a difference.

23:58 - But generally speaking when you’re within though quotation marks the order won’t matter.

24:04 - And Kelly is asking, “How does it look on a mobile app?” Different things do different– display differently– when we get to– if we get to tabs, those show up differently on a mobile than they do on a desktop, so it’s always a good idea when you are beautifying things that you check it out in both platforms to make sure it’s rendering the way you want it to look.

24:33 - And different aspects of it will be accessible.

24:39 - When you need to worry about accessibility, things like color contrast and stuff is when you’re dealing with text.

24:45 - So if you were dealing with a border around an image, it wouldn’t matter the color contrast because it’s not content-driven if that makes sense.

24:55 - When color contrast makes a difference for accessibility is if the text is not contrasted sufficiently against the background.

25:03 - Okay. Next thing I want to show you is columns.

25:10 - Because a lot of times people use a table when they want to format two pieces of content that are next to each other, like your photo next to your contact info.

25:20 - It’s actually not appropriate from an accessibility standpoint to use tables for layout purposes like that.

25:27 - It adds an unnecessary level of complexity to the page that isn’t good for people that are using screen reader devices.

25:36 - Tables really should be reserved for data that benefits from being displayed in a grid format.

25:42 - So instead of a table, you’ve already learned one way to accomplish the same outcome by using the float-left or float-right so that your image and your text are next to each other.

25:54 - Another way to do that, especially if you’re only dealing with text, is to use columns as you see here.

26:02 - I’ve got George in one column, Andy in another.

26:05 - And here’s what the code looks like. We have a new identifier called div.

26:15 - And that represents a division within a section of code.

26:19 - So the formatting within the div tags is going to apply to just whatever is within the div tag, not to within the whole page or the whole paragraph or whatever.

26:30 - In this case we need two div tags. One for each column.

26:35 - So I’ve got my opening div here, and I scroll down, and I’ve got my closing div there.

26:42 - And then right below it I have my second opening div, and then my closing div.

26:50 - So that’s how I ended up with two columns. As I said before, I have trained myself how to do this stuff, so I’m not always doing it the most sophisticated way, because I don’t know.

27:02 - So sometimes I make things up. In this case, I’ve got my columns, but again, they’re right up against each other and I don’t like that.

27:13 - I want there to be a little bit of space between them.

27:15 - I experimented with paddings and margins and I couldn’t make it work.

27:21 - So what I ended up doing was creating a third column in the center, very narrow, that’s empty.

27:30 - And one thing I forgot to mention is columns are going to need to add up to a 100-percent.

27:36 - So in this case I have two 50-percent columns.

27:39 - I could have a 35 and a 65-percent. I could have four columns that are 10– well, that– for ease of talking, that are all 25-percent.

27:51 - So you can have more than two columns, and they can be different sizes, you just need to make sure everything totals 100-percent.

28:01 - So in this case, I’m going to create a column in between them.

28:05 - And so I’m going to change my 50-percent to 47 in both places.

28:12 - And then I’m going to add another column in between those two.

28:21 - So I’m going to– and I’m going to– if you know me at all, you know I’m lazy.

28:26 - So I like to not have to type a bunch. So I’m going to copy that, but then change it to be six I believe.

28:35 - And then I need to have my closing tag. So I’m going to close my div.

28:43 - And in this case, there needs to be something in the column, otherwise it won’t stick.

28:52 - So I’m going to put an empty space in my column.

28:55 - And the way you identify space in the HTML code is with  .

29:00 - And then when I go here, you can now see I have a little bit of space between the text of my two columns.

29:08 - Again, I want to make sure my columns equal 100-percent.

29:13 - Also, there are times when I have text below, as I did in this case, but I don’t want the text to be in the columns.

29:29 - My two guys were in the columns and then the text below it I wanted to be across the whole page.

29:35 - But my text for Andy was shorter than my first column with George.

29:40 - And so this other text is sort of floating up into the column, and I don’t want that to happen.

29:46 - Some of you are already figuring out what we’re going to do.

29:50 - At the bottom of my second column, or– whichever one is shorter, and I want them to be equalized, I’m going to add a little bit of margin space.

29:59 - And I will do that with this code. I’ll put it in chat; hopefully, I’ll remember.

30:09 - There we go. So I find my second Andy Garcia, which is right here, and then I’m going to go to the end of it– there’s my closed div tag, so above the closed div tag I’m going to add an empty paragraph that simply says marginbottom– and we don’t really need 140– well, I’ll do that just so you can see it.

30:36 - So basically it’s saying, below this paragraph text, we want a margin of 140 pixels.

30:45 - So when I go back to the page, you can see there is now a lot of space and my text below it is no longer creeping up into the columns.

30:57 - I can adjust the amount of space, so it doesn’t have to be 140, it could be 40, or 75, or whatever amount of space is going to equalize it and make it look the way I want it to look.

31:09 - Okay, take a breath and let it out; that’s been a lot.

31:15 - Any questions about columns before we go on to the next thing? I’ll take a sip while you are pondering.

31:27 - >> I have a like– not so much as a question, but maybe something that I want to be able to do.

31:35 - >> Okay. >> I want to put four images, I guess, in four columns.

31:39 - How will I– I mean I know that you already told us how to do this, but can you demonstrate that? I mean maybe not now, maybe later on how to put four– >> Yes. >> Because I’m doing buttons– >> Yes.

31:49 - >> But I don’t want to use tables, as you mentioned.

31:53 - >> Right. Images are a little easier than buttons because buttons have more complex code.

31:59 - And if we have time at the end remind me that you want me to demonstrate it for you, but basically you’re going to– you know how with the image I highlighted it and then I did a line? So you will make all of them be a line left so that they’re all floating next to each other.

32:18 - And then you’ll put a little bit of padding between them so that there’s a little space, but they’re all floating next to each other.

32:25 - But if we get time, I– remind me that I said I’d show that to you, okay? >> All right; thank you.

32:32 - >> Yep. Absolutely. Any other question about columns? >> I just have a general question.

32:41 - Will this be recorded? Because it’s fast [laughs].

32:43 - >> It is recorded. Yes. >> Okay. >> And yes, it’s a lot of information, and when you’re first getting used to it, it’s all like, “Oh my goodness, this is Greek to me. ” So yeah, we’ll have the recording.

32:54 - I’m not sure where it’s going to live [huffs], but we’ll– I’ll figure that out.

33:02 - Okay. So now you can see we’ve got the two columns.

33:05 - We have that empty middle column, so it gives a nice space, and then we have the padding here so that my generic text doesn’t creep up into the columns.

33:14 - Next thing I want to show you is about a responsive banner.

33:20 - So I’ve got a banner on this page but watch what happens when I move the size of the page, because I don’t know how big my students are going to be looking at it, and my banner’s getting covered up and I don’t like that.

33:34 - So what you can do, go into the code and your banner is going to be that top image.

33:43 - Remember, IMG is image. So here it’s saying the width is a set number of pixels and the height is a set number of pixels.

33:53 - That’s fine, but it’s not responsive. So watch what happens if I just have width, and I’m keeping it, notice, inside the quotation marks.

34:04 - So I’m going to say, “width equals 100-percent. ” I could say 50-percent, 69– you know, whatever.

34:11 - But I’m going to do 100. Still looks the same.

34:15 - When I save the page and now move it, you can see that my banner is now responsive and isn’t getting covered up.

34:23 - At a certain point it probably will because it’s so small, but for the most part it stays responsive.

34:32 - So that’s kind of cool and it’s as simple as just making the width be a percentage instead of a static amount of pixels.

34:43 - The other thing I want to show you is text box.

34:46 - Well let me– question about responsive banners.

34:54 - Rebecca, it was in Canva– I use Canva for almost all of my graphics, so yeah.

35:05 - Okay, let’s go on. Text boxes. These are one of my favorite ways of making pages look good.

35:12 - I’ve got five different kinds here. One that I’ll be calling solid.

35:17 - The double border. A shadowbox. A sidebar.

35:22 - And a title bar. And there could be different ways to use them all; they all look kind of nice.

35:28 - So when I show you the code for our shadow box, you’re going to see it has two div features because actually it’s two different boxes.

35:38 - There’s the top one with the text in it that has the little blue border around it, and then the bottom box offset that’s actually creating a shadow.

35:48 - And so I just want you to know all you’re still going to worry about is padding, and width, and the hexadecimal color code.

35:56 - You don’t need to worry about all the other stuff, but I wanted you to know there’s going to be two divs to create that text box.

36:04 - And actually, there’s two divs for the– all three of these bottom ones, I just didn’t want you to get thrown off by seeing that.

36:11 - So we’ve got the green background. A purple double border.

36:15 - The blue shadow. An orange side bar.

36:18 - And then the brown and tan title bar. I’m going to go into the code and I’m going to make some changes just so you can see what happens.

36:27 - So I’m going to go up here and change the solid color instead of the green background color, I’m going to change it to this.

36:41 - On the next one– nope let’s do this one. I’m going to– sorry, I’m getting– Let me rephrase what– give you a little context.

36:57 - I’ve got the title of it up here so you can tell which box I’m working on, but you kind of have to have sharp eyes.

37:05 - So I– on the solid box is where I changed the background color.

37:09 - Now I’m going down to the double border box.

37:12 - Here’s the div code for it. I’m going to change the width.

37:16 - Instead of being 65, I’m going to make it be 35.

37:21 - And I’m just doing this so you can see how you can manipulate things to get different looks.

37:28 - On the shadowbox, which is my div code right here, you’ll see I’ve got two divs, one div there, one div there.

37:37 - This one, the top one– I believe I’m correct in saying this– is the outside border with the text in it, and I’m going to change that to gray.

37:49 - And gray is DDDD. So I’m just going to do three D’s, because they’re all the same, so I can shortcut with just three of them.

38:00 - The sidebar one– right here– it also has the two divs– excuse me, no it doesn’t; it has a single div.

38:11 - The width says 75, I’m going to make that be 50 so we can see.

38:19 - The border color, I’m going to make that be 5.

38:25 - And I’m going to make the color be– well, we’ll just leave the color there.

38:34 - And then on the title bar I’m going to change the background color.

38:43 - And this one. Where did it go? Okay. So it’s– I think I’m doing this– woop– it makes me crazy.

38:56 - Okay. So now when we go back, you can see instead of green I’ve got pink.

39:02 - All I did on that one was change the background color.

39:04 - Here I changed the width, so it’s much narrower.

39:07 - If I got a lot of text, I might want a wider box.

39:10 - If I don’t have much text, I might want a narrower box.

39:13 - Here I thought it was the outside one– or the upper one I was changing, but I changed the gray color on the shadow.

39:20 - So you can have two different colors with the shadow box.

39:24 - Your little border outline, and then the actual shadow itself can be two different colors.

39:29 - And then the side bar, you saw I made the border bigger pixels, and I also made the little left bar bigger so you can play around with those.

39:43 - And then here I changed the background color, so instead of that sort of block tan, it’s now more of a vanilla where the text is.

39:52 - I could also change the color of the title bar if I wanted to.

39:56 - And then I may or may not need to change the color of the text, so that I have good contrast.

40:04 - So just wanted you to know you can play around with the different parameters to get the look you want.

40:11 - Some tips. Canvas updated the code editor, as I mentioned– I think I mentioned.

40:18 - So now we’ve got these colors and things. So it’s a little bit easier to use than if you’re in the raw editor.

40:26 - You can do it, the same thing in both of them; I just prefer the colors myself.

40:31 - The other thing is when you’re in the code itself, it can kind of be hard to find where you’re at.

40:40 - Like here I’ve got five different text boxes, and I was getting a little confused as to which one I was in.

40:45 - So what I often do, is I will put a number of empty line spaces when I’m in the rich content editor so that then when I go into the code editor I can quickly see right here are all my line spaces, so now I know the code below it is where I want to start working.

41:06 - The other thing to keep in mind. You will make mistakes.

41:12 - And there are times when your mistake will be so horrific, the entire page is irredeemably ruined.

41:18 - I speak from experience. So it’s always best to make a copy of something before you start messing with the HTML.

41:26 - You’re going to save yourself a lot of heartache.

41:29 - There is a saving grace in that Canvas has– if you’re not familiar with it– in the three little options menu, view page history.

41:40 - And when I do that, it will give me the 25 most recent versions of the page.

41:48 - So if I irredeemably ruined my page with some coding experiment, I can go back to an earlier version and restore it and start again.

41:59 - I haven’t totally ruined or lost whatever I had before.

42:03 - The thing to know about page history is it’s only good for pages.

42:09 - Discussions, assignments, and quizzes don’t have that capability.

42:14 - So you’ll want to make a duplicate of any of those three things before you start messing with the code, and then once you’ve got it the way you want it, then you can make that be the actual discussion, or quiz, or assignment in your course.

42:28 - Hopefully, I said that in a way that made sense.

42:32 - Okay. I want to show you some resources and then I’ll open it up for questions.

42:37 - So here– and I’ll give you the– oh, actually– yeah.

42:41 - I’ll show you on a slide and I’ll also put it in chat.

42:45 - Here’s– there are many hexadecimal websites; here’s one that I just like.

42:50 - So it’s easy to use. You can find a color value that you want, you know, let’s say I want a red and then I can move the little circle to get the exact shade of red that I want.

43:04 - And then I have my six-digit hexadecimal code right there.

43:08 - As I said, there are lots of other websites that do the same thing; I just like this one.

43:13 - I’m putting it in chat for you. The other thing, we’ve talked about contrast being important for accessibility if you’re doing something with text.

43:24 - So some of our headers, or if I’m using this green background I have to make sure it has enough contrast against the black text.

43:33 - So the web aim contrast checker is a great website to bookmark.

43:39 - You can use it to put in your text color and your background color.

43:46 - And then if it tells you it passed, great. If, let’s say for example I go– come here.

43:54 - I’m– you know, these are the colors that I put in and it’s telling me I failed, I can just take the slider bar until I get the green pass, and then I know this hexadecimal code up here is a background color that would work for this blue text color.

44:12 - And you can put whatever codes in there you want, and then play around with the sliders.

44:17 - And the last thing I’m going to give you the HTML for is the cheat sheet that I created.

44:22 - It’s a Google doc. It is public, so you shouldn’t have to request permission or anything to get into it.

44:29 - I believe I have it set to view only, because I don’t want you messing with what I’ve got here.

44:36 - But if you are finding your own coding snippets that you want to use, you could create a copy of this– make a copy and have that in your Google area and edit it till your heart’s content.

44:53 - I just don’t want people to be editing this one because there’s so many of us that have access to it, it would– could possibly create consternation and confusion.

45:03 - Okay. Questions? I’m going to find– while you’re thinking of your questions, I’m going to find a page with– where did I go? Here we go– pictures on it, and why? Oh, I know why.

45:26 - That’s why. See if I can get the three or four pictures in a row.

45:36 - Okay. So I’m here. I’m just going to use– well, no I’ll put one in– so I’m here in the editor.

45:44 - I’m going to go to the right of my picture.

45:47 - I’m going to add another picture– no, I don’t want to upload.

45:51 - Helen, what are you doing? Just grab a picture.

45:58 - Let’s do this one. Why are you not– oh, it’s– okay.

46:05 - There we go. So now I’ve got the two pictures there.

46:08 - I want them side-by– oh, I have it in there twice.

46:11 - I want them side-by-side, so I’m going to make it smaller so that they’ll fit.

46:22 - And they’re side-by-side, but I’m going to ensure that by making sure I’ve done– left a line for all of them.

46:34 - And then I can go in and do padding. So I have my three images in a row.

46:41 - They all say float-left. And I can add padding-right; 10px.

46:50 - And I’ll do that with this one. And it should now show a little bit of space between my images.

47:08 - In this case you can see my text is kind of floating up there, and I’m not sure why that’s happening.

47:16 - Oh, because they’re floating left. So what I would then need to do, if I don’t want the text next; I just want the row of images, I would do that margin trick where I put in an empty paragraph that has a margin space on it, so it forced my text down below the images.

47:37 - I cannot remember who asked me that question; hopefully, I explained that in a way that made sense.

47:44 - And someone is asking about tabs. Yes, I can go into tabs.

47:50 - But let me make sure– and I’m happy to stay over a little bit for anybody– because tabs is slightly advanced, so I don’t want to overwhelm people that aren’t ready for tabs.

48:00 - But others of us, you know, we like to go for it.

48:03 - So let me make sure there’s any other questions to get answered, and then I’ll stay on and talk about tabs.

48:08 - It will also be on the recording, so if you can’t stay but are interested in tabs, you will get the recording.

48:17 - And I’m trying to make sure– okay. So where these archives live has been moving, and so I don’t want to tell you the wrong page.

48:31 - So what I’m going to recommend you do is contact– and I’ll put it in chat– support– because I don’t have everybody’s email addresses, so I can’t push out a notification, but if you contact support@cvc. edu and say where is the archive for the webinar from this date– is today the 14th or 15th? It’s tax day; the 15th– some– they should be able to tell you the page.

48:59 - Because I don’t want to give you the wrong page and then find out later that’s not where it lives.

49:05 - Okay. Any other questions before we go into tabs? >> I have a question.

49:10 - So where– you mentioned in this example you have here that we would put in the margin? >> Yes.

49:16 - >> To keep the text moving? >> Yes. >> Where does it go? >> Okay. It could actually go– well, there’s two ways you could do it.

49:23 - Sometimes images– this image, if you can see, these three are actually set within a paragraph tag.

49:31 - They don’t have to be. So I could just have the three images floating left.

49:36 - But in this case, since they’re in a paragraph, I could go ahead and put that style margin equals 40pm or, you know whatever space, I could put it right there.

49:48 - If it weren’t in a paragraph tag; all it was the images, I would create below the final image that empty paragraph coding that created the margin space.

50:02 - Does that make sense? >> That does.

50:04 - Thank you. >> Okay. Any other questions? So my suggestion is play with easy things first.

50:16 - Maybe don’t dive right into text boxes and tabs and everything.

50:20 - Maybe just get the horizontal rule stuff. I have a bunch of different ones.

50:26 - Let me show you one of my favorite ones. I’m going to put this above Joe Cloe [phonetic].

50:37 - So you can do different kinds of horizontal rules.

50:40 - There’s dotted, there’s dashed, you can make them bigger and smaller in different colors.

50:45 - So maybe just start there until you get comfortable messing around with hexadecimal and width and things like that and then you can get into the more advanced things like fancy columns and text boxes and whatever, and then tabs.

51:01 - Okay. I’m going to dive into tabs. So if you’re feeling saturated, thank you for being here; it’s been a pleasure.

51:07 - [Inaudible background comment] And if you want to stay, great, and it’ll be on the recording.

51:11 - Did I hear someone asking another question? Yes, the docs are on the HTML.

51:15 - I have four or five different kinds of border styles, and the dotted is there.

51:22 - >> Oh, okay. >> And this is just my explanation.

51:26 - Obviously, that’s not going to be part of the code; hopefully, that makes sense.

51:30 - The little closed carrot is the end of the code.

51:33 - Maybe I should– well, yeah. Okay, let’s go into tabs.

51:39 - So my next page is tabs. I don’t want to save that.

51:46 - All right. One other resource I’m going to– you’re very welcome for the cheat sheet.

51:52 - And there’s lots of other stuff, but that’s kind of the basics really.

51:55 - You don’t want to get too fancy with things.

51:57 - One other thing I want to show you is another resource, and I’m telling you about it if you’re not already familiar with it.

52:05 - Because it has a page all about tabs. So I’m going to go over it now, but you may forget a month from now.

52:15 - It’s like, yeah, she told me something about tabs, but I have no idea what she said.

52:18 - This page will walk you through it. It is the course design resources shell.

52:24 - Let me put that in chat. Course design resources.

52:30 - And I’ll show you where to find the tabs page.

52:34 - When you go into the modules, you will see in Section A, where it’s talking about chunking, you’ll see a page that is devoted to tabs.

52:45 - So if you go to that page later, it shows you an example of how tabs look, and then it talks about how to set them up.

52:54 - And it even gives you some cheat sheet code right there.

53:00 - So let’s talk about it though, because you’ve kind of got to know– understand what’s going on with tabs before you try to play with them.

53:08 - And I went the wrong way. So now we are on tabs.

53:16 - Tabs are actually a list, and someone asked before how they– things showing up on a mobile? If somebody’s on a mobile, my understanding is tabs will not show up as tabs; they will show up as a list.

53:29 - So they’ll still render, they just won’t render in the same way as on a desktop.

53:35 - But basically, this is a horizontal list instead of a vertical list.

53:41 - And I like to put a little background against them, because people don’t always see them as– I mean here they’re pretty clear.

53:49 - But if you’ve got a big, long page, it’s easy for somebody who’s not used to the idea of tabbed content to just miss it.

53:58 - For whatever reason, their eye doesn’t catch it.

54:00 - So I figure I put low-colored background, it draws the attention.

54:05 - And I want to keep in mind sufficient contrast.

54:08 - Which is why I generally– I generally use this sort of very pale yellow, vanilla color because it’s fine against the blue and the black, and it still catches attention because it’s not plain white.

54:21 - I used to do different colored tabs because, you know, I got fancy.

54:25 - You can also do that as long as you make sure each of the colors you’re choosing has sufficient contrast against the blue– not against black.

54:34 - But when it’s not the active tab, you can see the color is actually blue.

54:40 - So you have to make sure the contrast is sufficient against blue.

54:44 - And when I click it I’ve got the text, so you can do it different ways.

54:52 - Each one of– let me go into the code and talk about this.

54:55 - Each one of those tabs is a div. So you’re going to have to get comfortable dealing with a bunch of different divs, depending on how many tabs you have.

55:07 - The way its set up is it starts with the opening div for the entirety of your tab.

55:14 - So this class equals is telling Canvas I have tabs coming.

55:22 - And then it gives the list, and as I mentioned, the tabs are actually a list.

55:27 - So you’ve got UL, which stands for unordered list, and then the background color, which is that sort of pale yellow, vanilla color.

55:35 - And then I have my first tabbed item which is fragment 1, and then whatever the text is.

55:43 - Again, you’re going to have all this code on the– I think I have it on the cheat sheet and also in the course designed resources.

55:51 - I’m just explaining it to you so that you know how to work with it.

55:56 - And then I have my second tab title, Fragment Two.

55:59 - Third tab title, Fragment Three. And then I have the clothes of the list.

56:07 - So that’s just setting up the tabs at the top.

56:11 - And then the rest of it is the actual content of each tab.

56:15 - So here’s my content for the first tab, Fragment One.

56:20 - And it’s just a single paragraph, but it’s got the opening div and the closing div.

56:24 - And then I have content for the second tab, Fragment Two– Opening Div, Closing Div.

56:30 - And the same– woops– same for the third one; Opening Div; Closing Div.

56:35 - Then I have a final closing div. So that bottom one is actually two closing divs in a row.

56:43 - Because if you recall, at the very top we opened up that enhanceable tabs div thing so that my whole set of tabs are enclosed within a div.

56:54 - And the reason I’m telling you all this is when people have trouble with tabs displaying properly– so maybe the content for tab one and tab two gets collapsed together.

57:07 - Or the content for one of them is outside the tabbed area, invariably what’s happened is they have inadvertently deleted either a closing div tag or the opening fragment tab, and so things are not displaying properly.

57:25 - So if you’ve set up tabs, you just want to be very careful that you’ve got the proper amount of opening and closing divs, including that double-closing div at the bottom.

57:41 - Okay. When I’m in the page editor view, I can edit stuff.

57:49 - Sometimes that causes problems, so what a lot of people prefer to do is edit within the code’s editor.

57:57 - Because it’s much easier for me to see here.

58:01 - I haven’t deleted anything that needs to stay there; I’m only deleting the text I want to edit.

58:08 - So you can do it either place, just know that it’s a little less likely to create an inadvertent problem if you do the text editing in the code editor, and then you could go back there and make sure everything looks the way you want it to look.

58:29 - We don’t have time for me to really give you the code and everything that you’ve got on the cheat sheet, but I did want to make sure you understood how tabs work, so that when you go and play with them, you’ll understand some of the finer points and the things that you really have to be sure and be careful of.

58:47 - One last thing I’ll mention about tabs, in terms of accessibility, they’re not verboten.

58:57 - And my accessibility buddies have said sometimes screen readers don’t alert the user, because each tabbed thing is akin to a separate page of content.

59:10 - And so some screen readers are not set up to alert the student if they’re on this initial tab, that there’s other content that they need to go and click a button– do whatever they do with their screen reader to get to that content.

59:23 - So what our accessibility people told us to do, is above the next button put a little alert that says– and I like to– some people just say, “Check all tabbed content. ” I like to tell them how many tabs there are so that they know they’re not missing anything.

59:40 - And that’s actually good for both sighted students, and those using screen readers.

59:45 - Because surprisingly enough, sighted students don’t always notice.

59:50 - You know, with a green there probably will; but if you’re not using a background color, this is really good for both sighted and non-sighted.

59:58 - But definitely get in the habit of including this little alert so that if a student is using a screen reader, they don’t unknowingly miss some of the tabbed content on the page.

60:11 - The other thing I’ll mention about tabs [clears throat]– excuse me.

60:15 - Canvas has been saying for probably five or six years that they’re going to deprecate tabs.

60:23 - Meaning that at some point, they’re– the functionality won’t work anymore.

60:29 - But as I said, they’ve been saying that for five years and it’s never happened, and I like tabs, so I continue to use them and just have an optimistic perspective that all is well.

60:41 - But if you are somebody that is very concerned that tabs might go away, just be forewarned, they might go away someday so maybe you don’t want to spend a lot of time putting tabs on your pages.

60:54 - I like them; so I use them. You can, Carla, also apply headings to tab titles, however, you would have to make sure that you’re following the proper title sequencing.

61:08 - So you wouldn’t make these an H4 because these are all main sections, so they would all have to be H2.

61:18 - And if you had these be H2, if you then [clears throat]– excuse me– had a heading within each tab, those should be H3s because those are subheadings within your main tabbed headings.

61:31 - Hopefully, I’ve said that in a way that makes sense.

61:33 - So you absolutely can use headings for tabbed content, you just want to make sure you’re thinking about the structural organization of it so that you’re using the proper heading style for each of the headings.

61:46 - Yeah, that could help people using a screen reader if they’re looking at it using the heading’s feature.

61:56 - So yes, it would alert them that there are headings in that way.

62:02 - And did I miss any questions that anybody wants to get answered before we wrap up for today? Okay. Well, it has been my pleasure to talk with you today.

62:20 - I’ve enjoyed it. I hope you got some information and that you have fun playing around with coding, because it can be really fun to play around with.

62:29 - All right. I’ll talk to you next time; thanks so much for being here. .