1
00:00:05,260 --> 00:00:06,100
Welcome back.

2
00:00:06,310 --> 00:00:10,000
We've already seen a few basic m l tags such as headings.

3
00:00:10,000 --> 00:00:16,160
Now discuss how to create lists in each team L. often you're going to want to display a list of information

4
00:00:16,160 --> 00:00:22,250
on a web page such as the list of your friends on Facebook or the list of results from the Google search.

5
00:00:22,250 --> 00:00:24,810
Each day mail has two types of tax for this.

6
00:00:24,870 --> 00:00:30,220
A L which stands for in an ordered list and an O L which stands for an ordered list.

7
00:00:30,330 --> 00:00:34,060
You else are just bulleted points and else are numbered.

8
00:00:34,070 --> 00:00:37,870
Let's go ahead and check out how they work by hopping over to our text editor.

9
00:00:37,920 --> 00:00:38,410
All right.

10
00:00:38,480 --> 00:00:43,180
I've just created a basic thought each time I'll file in so I will fill it in the skeleton code.

11
00:00:43,330 --> 00:00:44,430
H t m l.

12
00:00:44,600 --> 00:00:46,730
We have our head and we have our body.

13
00:00:46,730 --> 00:00:50,290
Let's create an ordered list inside of her body.

14
00:00:50,570 --> 00:00:56,660
The way we do this is to start with an o l tan which stands for ordered list and will autocomplete and

15
00:00:56,660 --> 00:01:01,170
then inside and in between these two L tags you can have list items.

16
00:01:01,310 --> 00:01:02,930
So you do as you type.

17
00:01:03,170 --> 00:01:08,540
I wish stands for a list item and then in-between the tags you just put in whatever your list item is

18
00:01:08,540 --> 00:01:09,390
going to be.

19
00:01:09,410 --> 00:01:17,420
For instance let's put in first item save this and I already have my browser opened over here on the

20
00:01:17,420 --> 00:01:17,780
right.

21
00:01:17,780 --> 00:01:19,870
I'm going to refresh it links right now.

22
00:01:19,910 --> 00:01:27,800
The path to this h tim l file I refresh and I get to see one and then first item and as I add in more

23
00:01:27,800 --> 00:01:34,910
items in between these live tags such as a second item save that refresh.

24
00:01:34,910 --> 00:01:38,340
I now see automatically umber numbered 1 and 2.

25
00:01:38,490 --> 00:01:45,520
And if you keep adding these in-between those old tags in the string can be anything you just refresh

26
00:01:45,850 --> 00:01:48,080
and you'll see that automatically numbered for you.

27
00:01:48,280 --> 00:01:50,800
So that is how ordered lists work.

28
00:01:50,800 --> 00:01:53,880
Important if you want to keep numbering automatically there.

29
00:01:53,950 --> 00:02:00,190
Keep in mind this number can actually change or CSSA later on the last capitalist's we're going to discuss.

30
00:02:00,220 --> 00:02:06,730
Isn't an ordered list which is really similar structure to an ordered list except that UL in the tag

31
00:02:06,730 --> 00:02:11,120
name and an in-between your list items that is the tags.

32
00:02:11,410 --> 00:02:16,570
If you type in an item here what's going to happen when I save this and refreshed my page is I see a

33
00:02:16,570 --> 00:02:17,150
new list.

34
00:02:17,170 --> 00:02:19,060
However the item is bulleted.

35
00:02:19,060 --> 00:02:27,490
That means even if I put in more lists here or more list items such as a second item save that refresh

36
00:02:27,850 --> 00:02:29,740
I'll still get a bullet.

37
00:02:29,770 --> 00:02:33,290
The last thing I want to mention is you can actually have nested lists.

38
00:02:33,520 --> 00:02:39,550
So let's create a third list here or create an ordered list inside an ordered list.

39
00:02:39,550 --> 00:02:45,410
I will have item 1 and item 2.

40
00:02:45,600 --> 00:02:50,370
So if we save this and check out what our file looks like I have item 1 and item 2.

41
00:02:50,490 --> 00:02:57,600
Now let's go ahead and remove these two first list the UN ordered and the ordered one save that refresh

42
00:02:57,780 --> 00:03:06,240
and I only see item 1 in item 2 for the ferde list item 1 and going to do is put in an ordered list

43
00:03:06,810 --> 00:03:09,120
and then add in another list item.

44
00:03:09,120 --> 00:03:18,060
So I will say I am nested save that and when I refresh this notice what happens ASML is going to be

45
00:03:18,060 --> 00:03:22,550
smart to have to automatically perform an indentation upon a nested list.

46
00:03:22,560 --> 00:03:27,810
So here we have I am nested and notice how the bullet point has also changed automatically to indicate

47
00:03:27,810 --> 00:03:29,120
that it's nested.

48
00:03:29,130 --> 00:03:36,190
Now we can keep adding more items here so I'll say second nested item.

49
00:03:36,540 --> 00:03:40,800
We can save that and will see the changes in.

50
00:03:40,820 --> 00:03:44,010
If you really want you can even have a nest on top of this.

51
00:03:44,040 --> 00:03:49,170
So inside the unordered list we could add in another ordered list and then put something like.

52
00:03:49,470 --> 00:03:50,350
Whoa.

53
00:03:50,570 --> 00:03:53,500
Very nested exclamation point.

54
00:03:53,570 --> 00:03:59,630
Save that refresh and then you'll have another nested list inside of this list which is inside of this

55
00:03:59,630 --> 00:04:00,560
list.

56
00:04:00,560 --> 00:04:06,490
Now it's not too common to have this level of nested lists but keep in mind that it is possible.

57
00:04:06,650 --> 00:04:11,210
Often for our projects we're only going to need just one list with no nesting.

58
00:04:11,520 --> 00:04:15,050
OK so this is the very basics of creating lists in each T.M..

59
00:04:15,110 --> 00:04:20,420
Again you have two main types an ordered list for numbers and an unordered list for just bullet points

60
00:04:20,670 --> 00:04:25,330
and in between these two tags you'll put in your list items in between the slide tags.

61
00:04:25,670 --> 00:04:27,510
OK we'll see you in the next lecture.