1 00:00:05,150 --> 00:00:09,800 Welcome back, everyone, to this lecture, we're going to briefly discuss divs and spans. 2 00:00:10,940 --> 00:00:14,870 Divisions in our HTML can be created with the div tags. 3 00:00:15,290 --> 00:00:20,900 These will allow us to separate out our HTML into different sections, which in turn will become useful 4 00:00:20,900 --> 00:00:21,290 later. 5 00:00:21,530 --> 00:00:25,670 We'll want to apply certain styles to certain sections of our HTML code. 6 00:00:26,970 --> 00:00:33,060 Spans are very similar to Dibbs, except they're used to create inline containers, so spans use the 7 00:00:33,060 --> 00:00:33,990 span tags. 8 00:00:34,560 --> 00:00:39,960 Now it's not going to be entirely clear what the effect of these tags are beyond just simple organization, 9 00:00:40,110 --> 00:00:46,290 because once we know CIUSSS, then we're really going to see why divs and spans are useful, because 10 00:00:46,290 --> 00:00:53,820 then we can actually use those tags to apply styles to only the content contained within a div or spam. 11 00:00:54,240 --> 00:00:57,930 So let's quickly explore these tags in our code editor. 12 00:00:58,500 --> 00:00:58,740 All right. 13 00:00:58,770 --> 00:01:01,170 Here I am back inside Visual Studio code. 14 00:01:01,440 --> 00:01:08,280 Now what I'm going to do is just create a simple paragraph here, and let's call this sentence one, 15 00:01:09,060 --> 00:01:13,230 and I'm going to create yet another paragraph or call this sentence, too. 16 00:01:14,070 --> 00:01:18,420 And a couple of spaces create another paragraph and call this sentence. 17 00:01:18,570 --> 00:01:19,020 Three. 18 00:01:19,920 --> 00:01:25,890 Now what if I wanted to actually organize sentence one and sentenced to three within their own container 19 00:01:25,890 --> 00:01:29,490 or division that we later on when I actually can apply effects to them? 20 00:01:29,760 --> 00:01:34,530 I could only apply it to sentence one and sentence two and not apply sentence three. 21 00:01:35,130 --> 00:01:40,650 Often you may just want to say something like apply an effect like a text color to everything of a paragraph 22 00:01:40,650 --> 00:01:40,980 tag. 23 00:01:41,310 --> 00:01:46,680 But if you only wanted to apply it to certain paragraph tags, it's better to start separating them. 24 00:01:47,010 --> 00:01:49,380 That's where the div or division comes into the. 25 00:01:50,070 --> 00:01:56,430 So I'm going to create a division or div, and then I'm going to stick sentence one and sentence to. 26 00:01:58,200 --> 00:02:04,530 Inside of that div, and let's create another division here and then stick sentence three. 27 00:02:06,330 --> 00:02:07,290 Inside of that. 28 00:02:07,710 --> 00:02:13,530 OK, so since we technically only know each HTML so far, you may be thinking, well, I don't really 29 00:02:13,530 --> 00:02:19,590 see a difference in the sexual page between what you had before and then separating out into the visions 30 00:02:19,980 --> 00:02:21,280 to really see this change. 31 00:02:21,300 --> 00:02:23,400 I'd have to style one of these divisions. 32 00:02:23,730 --> 00:02:29,190 So I'm going to add some CSS styling here, but don't worry too much about understanding the actual 33 00:02:29,190 --> 00:02:29,550 code. 34 00:02:29,610 --> 00:02:31,650 This is just for demonstration purposes only. 35 00:02:31,860 --> 00:02:34,260 We'll learn about CSS in the next section. 36 00:02:34,830 --> 00:02:37,050 So what I'll do here is inside my div tag. 37 00:02:37,860 --> 00:02:42,300 I'll say style is equal to and then in double quotes. 38 00:02:43,480 --> 00:02:50,110 Say color, colon, red, OK, and then don't worry about this little square here, it actually allows 39 00:02:50,110 --> 00:02:53,800 you to change the color on the spot visually, but I'm just going to ignore that for right now. 40 00:02:54,280 --> 00:02:55,840 So what's actually happening? 41 00:02:55,870 --> 00:03:00,800 Well, I've been able to apply a style to an entire division. 42 00:03:01,240 --> 00:03:05,320 That way, everything inside that division ends up getting that style. 43 00:03:05,740 --> 00:03:11,950 This then allows me to separate out different chunks of my web page into having different styles, which 44 00:03:11,950 --> 00:03:13,030 is quite useful. 45 00:03:13,360 --> 00:03:19,210 Instead of having to rely on having to apply styles across maybe an entire paragraph tag for every item 46 00:03:19,210 --> 00:03:19,720 on the page. 47 00:03:20,020 --> 00:03:25,740 I can begin to organize my HTML code using divisions now spans. 48 00:03:25,750 --> 00:03:31,090 You can think of them as an even smaller container that only applies to things inline. 49 00:03:31,450 --> 00:03:36,940 Let's imagine I only wanted to color something like three or only apply something to three. 50 00:03:37,090 --> 00:03:38,230 That is the word three. 51 00:03:38,710 --> 00:03:43,180 I can use the tag spam and then put. 52 00:03:44,650 --> 00:03:50,260 Three inside of that spin now to actually show you the style change. 53 00:03:50,590 --> 00:03:52,450 I'm going to inside of that span. 54 00:03:53,380 --> 00:03:54,070 Copy this. 55 00:03:55,090 --> 00:03:58,360 And let's place it inside that span. 56 00:03:59,460 --> 00:04:05,460 And again, don't worry too much about understanding the CIUSSS code, but you can see here that I'm 57 00:04:05,460 --> 00:04:11,040 applying that style only to what's inside this tab, which is the spam. 58 00:04:11,580 --> 00:04:13,890 So what's the main takeaway here? 59 00:04:14,130 --> 00:04:20,970 The visions allow you to organize your code into the vision sections span, allow you to basically make 60 00:04:20,970 --> 00:04:23,160 these little containers in line. 61 00:04:23,490 --> 00:04:26,940 So the use of a division is for a kind of large containers of your website. 62 00:04:27,300 --> 00:04:33,180 Span is for affecting something just a little portion in line of something, so maybe part of a heading 63 00:04:33,390 --> 00:04:36,280 or part of an actual list item. 64 00:04:36,300 --> 00:04:37,230 You get the idea. 65 00:04:37,830 --> 00:04:41,000 Don't worry again too much about the code for the CSIS. 66 00:04:41,310 --> 00:04:47,700 As long as you were able to understand this portion of organized divisions and then tagging something 67 00:04:47,700 --> 00:04:49,980 within another set of tags for a span. 68 00:04:50,190 --> 00:04:51,180 You should be good to go. 69 00:04:51,570 --> 00:04:54,660 We're going to revisit this later on when we talk about CSIS. 70 00:04:55,020 --> 00:04:55,290 OK. 71 00:04:55,320 --> 00:04:56,520 That's it for Divs and Spann's. 72 00:04:56,790 --> 00:04:57,750 I'll see you at the next lecture.