Creating Lists

Quick reference

• 00:05 In this video, I wanna talk about lists.
• 00:07 With HTML,
• 00:08 there are basically two types of lists, ordered lists and unordered lists.
• 00:12 Kinda hard to say.
• 00:13 To create them, it's pretty simple.
• 00:14 Let's head on down here, let's give this a couple of line spaces.
• 00:20 And let's give this a strong and say to do list.
• 00:27 So let's create first, an unordered list.
• 00:29 And to do that, we use the ul tag, ul stands for unordered lists.
• 00:35 Now to create that actual bullet item in a list, you just use the li tag and
• 00:40 the li tag opens and closes.
• 00:42 So let's create, let's say, three things and let's go,
• 00:47 Buy Groceries,
• 00:50 Return Library Books,
• 00:56 and Feed The Dog, I don't actually own a dog, but if I did.
• 01:02 So, here's our to do list and we just see these nice bullet items, very,
• 01:06 very easy, very nice.
• 01:08 We can also, Give us another line break here.
• 01:15 Create a checklist with ordered list, ordered items.
• 01:19 And that's ol.
• 01:21 And ol has an opening and a closing tag.
• 01:24 And to create a list item, we do the same thing, li.
• 01:30 And to this, let's go, Open Hood.
• 01:37 Remove Oil Cap.
• 01:42 Pull Out Dipstick, I don't know, it's oil changing procedure.
• 01:48 And here we see these are ordered in numbers, 1, 2, and 3.
• 01:51 So you'll notice you don't have to actually type in 1, 2, and 3.
• 01:55 The li does it automatically because it knows it's an ordered list.
• 01:59 So that's pretty cool.
• 02:01 Lists are important.
• 02:01 You're gonna use them a lot in HTML.
• 02:04 Get in the habit of remembering these.
• 02:06 Now we can also change these around.
• 02:08 We have numbers here and we have these little bullet points.
• 02:10 We can change those pretty easily.
• 02:12 And we're gonna use a little bit of inline CSS, and there's basically three or
• 02:16 four ways you can change unordered lists.
• 02:18 You can do disc, circle, square, or none.
• 02:21 So to do that, we just come back here and in our opening ul tag,
• 02:25 we just pop in the style thing and then list type colon, and let's go, disc.
• 02:30 And if we hit reload, nothing happens because these are already discs.
• 02:34 Well, we can change this to circle.
• 02:38 Save this, hit reload and we get these other circles.
• 02:42 We can change it to square.
• 02:45 Get little squares.
• 02:47 And we can change it to none, if you don't want any.
• 02:51 And you might think, that's kind of weird, but
• 02:52 there are a lot of times when you actually need none.
• 02:57 So we can do the same thing down here with our ordered lists.
• 03:01 And we do that with the type tag.
• 03:03 It's just T-Y-P-E equals quotation marks.
• 03:06 And think back to like an outline, back when you were a kid in school.
• 03:10 If you had to outline things in English class, you could do Roman numerals,
• 03:13 you could do letters, you could do numbers.
• 03:15 So let's do letters.
• 03:16 So you just type a capital A.
• 03:18 If we save this and come back, these changed to A, B, and C.
• 03:21 If you want lower case letters, you just type in a lower case a.
• 03:24 Then we get lower case.
• 03:27 Likewise, with Roman numerals, we just put a capital I for Roman numeral one.
• 03:32 And we get these cool Roman numerals.
• 03:34 And if you want lower case Roman numerals, you just do lower case i.
• 03:39 So that's kinda cool.
• 03:41 So those are lists, very useful, you're gonna use them a lot, forever,
• 03:45 it's one of the things you're always gonna use, cuz websites always have lists,
• 03:49 they always have list of links.
• 03:51 And a lot of times, when you create a nav bar, up at the top of the screen,
• 03:54 you'll actually use these guys to make the links in the nav bar,
• 03:58 because then you can style them easier with CSS.
• 04:00 But that's something for another lesson.
• 04:02 And in the next video we're gonna talk about nested lists.

Lesson notes are only available for subscribers.