1
00:00:00,080 --> 00:00:00,880
Well come back.

2
00:00:01,050 --> 00:00:02,870
So this video is going to be pretty short.

3
00:00:02,880 --> 00:00:06,000
We're just going to discuss how we make lists in HCM out.

4
00:00:06,210 --> 00:00:09,040
So how do we make numbered lists or bullet point analysts.

5
00:00:09,090 --> 00:00:10,530
How do we have nested busts.

6
00:00:10,530 --> 00:00:12,710
This is something that we do a lot on our Web sites.

7
00:00:12,780 --> 00:00:16,200
It's all sorts of thing you know academic papers did a lot and they still do.

8
00:00:16,200 --> 00:00:18,900
Which is why it was originally incorporated in each team.

9
00:00:19,320 --> 00:00:22,050
So there are two types of lists that we can define.

10
00:00:22,050 --> 00:00:26,690
One is an ordered list which would look something like this.

11
00:00:28,530 --> 00:00:34,730
And another is an unordered list which works the same way except we have bullet points here.

12
00:00:34,830 --> 00:00:38,450
So we'll start by talking about an ordered list and the tag for that.

13
00:00:38,460 --> 00:00:42,120
It's called an AOL stands for ordered list.

14
00:00:42,690 --> 00:00:46,170
And if we just do that and refresh this page nothing changes.

15
00:00:46,170 --> 00:00:49,460
And that's because an ordered list on its own doesn't mean anything.

16
00:00:49,530 --> 00:00:56,880
We have to provide it with list elements or list items which is what Ally stands for every numbered

17
00:00:56,880 --> 00:01:00,540
point that we want every item in the list needs to be an ally tag.

18
00:01:00,750 --> 00:01:01,860
So we're going to make a list.

19
00:01:01,890 --> 00:01:10,770
Let's do something short let's say a list of colors so red she can copy this line.

20
00:01:11,880 --> 00:01:15,660
Orange yellow.

21
00:01:15,660 --> 00:01:18,620
So this list is ordered.

22
00:01:18,750 --> 00:01:23,860
I refresh the page and you can see I get a list with numbers there.

23
00:01:24,060 --> 00:01:27,360
And you can change this with CSSA you can change it to be Roman numerals.

24
00:01:27,360 --> 00:01:28,440
We'll talk about that.

25
00:01:28,510 --> 00:01:32,600
And another lesson what's important though is that it has an order.

26
00:01:33,210 --> 00:01:45,270
So if we copy this we do the exact same thing but we change it to be a u l and I refresh the page you'll

27
00:01:45,270 --> 00:01:50,570
see that I have a numbered list which is ordered and an unordered list with bullet points.

28
00:01:50,940 --> 00:01:52,740
So just by changing Oh well.

29
00:01:52,920 --> 00:02:00,900
Well I go from ordered to an ordered both of them require list items inside what we can do just to show

30
00:02:00,900 --> 00:02:05,710
you we can nest any of the other tags that we've seen like strong or emphasized.

31
00:02:05,730 --> 00:02:14,090
So let's make it red folded just like that.

32
00:02:14,580 --> 00:02:17,690
And you can see red is bolded.

33
00:02:17,730 --> 00:02:22,510
Likewise we can also nest other lists inside of a list.

34
00:02:22,590 --> 00:02:30,660
So let's say I wanted to have a list under yellow I wanted it to list a few shades of yellow inside

35
00:02:30,660 --> 00:02:32,310
this ally.

36
00:02:32,370 --> 00:02:39,870
I can actually add in another a much do and an ordered list and you'll see there.

37
00:02:39,900 --> 00:02:45,290
This is the first time I've certainly this can type the tag name and hit tab in autocomplete.

38
00:02:45,720 --> 00:02:52,440
So I have another well an unordered list inside of that I'm going to name my first shade of yellow which

39
00:02:52,440 --> 00:03:03,350
is sunflower and then another ally and another shade of yellow which will be banana.

40
00:03:03,360 --> 00:03:04,210
Let's take a look.

41
00:03:04,230 --> 00:03:08,720
You've got an ordered list with numbers one two three.

42
00:03:08,800 --> 00:03:16,410
And then inside of that third list item I have another bullet point first with two types of yellow and

43
00:03:16,410 --> 00:03:19,950
you'll see I end up at this nested list structure.

44
00:03:20,460 --> 00:03:27,420
So then of course under banana I could do another list something like let's do another.

45
00:03:27,420 --> 00:03:30,260
This time let's go back to an ordered list.

46
00:03:30,420 --> 00:03:31,330
Another lie.

47
00:03:31,350 --> 00:03:33,560
I'm really running out of ideas for bananas.

48
00:03:33,570 --> 00:03:36,450
Let's just do a frozen banana

49
00:03:39,720 --> 00:03:48,300
and non frozen banana and you can see we get a numbered list inside of a bullet point of least inside

50
00:03:48,300 --> 00:03:49,720
of a numbered list.

51
00:03:50,190 --> 00:03:50,610
OK.

52
00:03:50,670 --> 00:03:52,360
So that's what I want to show about lists.

53
00:03:52,380 --> 00:03:57,540
We can combine all of these together to make some interesting things we can build things I italicised

54
00:03:57,540 --> 00:04:01,110
them we can put a heading before a list so I could do something like

55
00:04:06,510 --> 00:04:09,960
my color list.

56
00:04:10,080 --> 00:04:10,710
Very exciting.

57
00:04:10,710 --> 00:04:12,330
I know we're getting there though.

58
00:04:12,390 --> 00:04:17,910
This is underlying everything that we do every Web site uses these types of elements behind the scenes

59
00:04:17,920 --> 00:04:18,070
.

60
00:04:18,210 --> 00:04:21,430
So even though these are not beautiful sites yet they're not very useful.

61
00:04:21,450 --> 00:04:22,710
It's really really important.

62
00:04:22,710 --> 00:04:26,880
So next we're going to do a quick little exercise I mean if you build something we're going to give

63
00:04:26,880 --> 00:04:31,280
you a little image how we construct it and then we'll meet back up afterwards.