Creating Ordered and unordered lists
In this video we learn how to create lists. There are two types of lists ordered lists and unordered lists. They work in a very similar way.
The ordered list : lists out elements breaking them down and numbering them - same as you would find in a word processor. while the unordered list would list out elements without numbering them.
Video Transcript
00:00Alright, welcome back, by the way... -how is it going so far?
00:05-it seems pretty clear. -excellent
00:08So far we learnt quite a lot of attributes and in our next one, we're going to learn about
00:13unordered lists and basically unordered list, we're going to learn about ordered list
00:17Ordered and undered lists are very simple to follow
00:23For example, we have all this stuff which are basically attributes of our course,
00:27we just want to say something like 1, 2, 3, 4, 5
00:29these are the stuff inside, we don't care about their actual importance,
00:36it's not a 1 2 3 relationship.
00:39We first going to bound it in an ordered list
00:42'OL' which is basically ordered list, and we're going to close that ordered list as well
00:48and then all we have to do is just to go line by line, and just call it 'LI' - list item,
00:56and make sure we open and close all the tags,
00:58I'm going to do a little bit of copy/pasting
01:01so basically we're going to open and close every single line with a list item, okay
01:10and we want to make sure that we close every single item as well
01:13I'm going to go line by line and make sure that we close it
01:25That's all you have to do, we just created an ordered list
01:29It's OL - ordered list
01:32If we go into our application, and click on refresh, we're going to see that now we have ordered list
01:37from one through ten, automatically set and configured for us
01:40Now if we want it to be unordered list, all we have to do is
01:43to go into our code here and change it from 'OL' to be 'UL'
01:49and UL will be unordered list, if I save that and go into the browser we're going to see that now
01:54we have unordered list, alright ?
01:58-yeah, no numbers
02:00-yeah, because it's unordered, there's no importance to order
02:04While we do OL, there is importance to the order
02:06and literally we just learnt that LI it was always the same,
02:10it's a List Item, it doesn't care if it's ordered or not,
02:13and really the wrapper that UL or OL defines if it's going to be ordered list or not,
02:18So just for the sake of our training right now,
02:20I'm going to keep that as a UL and we'll create here an ordered list that way you could grab our code in HTML
02:28and see both versions so you don't have to memorize it
02:31beyond the fact that we'll have that in our HTML a pendent document,
02:36so now you'll see that some of them are ordered and some of them are unordered,
02:41-and how come you don't need a paragraph?
02:44-it's instead of paragraph.
02:46If we had a very long text inside we could if we wanted to put a paragraph,
02:50but this isn't a paragraph,
02:52you know, this is a paragraph because it's a paragraph
02:54this is just a small little blurb, so it doesn't need a paragraph
03:00it's really just a clip notes so they're not a paragraph,
03:04not everything has to be inside of a paragraph, really not everything,
03:08and paragraphs are not mandatory,
03:10the only reason we're putting things inside of the paragraph is because
03:12HTML automatically gives paragraphs some sort of features such as,
03:18whenever we close a paragraph it breaks the line,
03:20and to make sure there's some spacing between the lines,
03:23so by adding paragraphs we're basically building up the visual structure of the page
03:27but it doesn't mean it has to be inside of the paragraph, there are many other things
03:31that we could put inside but if we wanted to stand out
03:33as on its own paragraph then we have to wrap it around to give it that features
03:38that are default, okay ? -okay