Preview
Video Player
00:00
00:00
Creating Lists
5:31Lists are an important component of web design and front end web development. Just about every website or application on the web uses lists to display navigation menus, shopping cart items, movie listings and more.
We've all created lists before.
0:00
Grocery list, a list of our
favorite restaurants and movies, or
0:02
a list of guest we want
to invite to a party.
0:05
Lists are an important component of web
design and front end web development.
0:07
Just about every website or
application on the web uses lists
0:11
to display navigation menus, shopping cart
items, movie listings and so much more.
0:14
HTML provides three elements for
creating list, <ul> for unordered list,
0:20
<ol> for ordered list, and
<dl> for description list.
0:25
The DL element is used to create groups of
terms in descriptions, like in a glossary.
0:30
It's not as common as the other two lists,
so
0:35
I'm not gonna cover it in this course,
but I've posted resources and
0:37
examples of description lists in
the teacher's notes of this video.
0:40
Now let's create a list of the different
sections that will make up our website,
0:44
Home, About, Articles, and Contact.
0:48
We'll mark up the list
using the UL element.
0:50
UL stands for unordered list.
0:53
So, back in our index.html file,
below the main heading and paragraph,
0:55
add a set of opening and
closing <ul> tags, and
1:01
inside the ul write Home,
then below that About,
1:05
Articles, and Contact.
1:10
When you think of a list, you imagine each
item in the list placed on its own line.
1:14
Well, the UL tag, by itself,
will not display a typical list.
1:19
As you can see here in the browser,
all items are placed on the same line.
1:23
So, to specify the individual
items of a list,
1:26
you place them inside LI tags,
which stands for list item.
1:29
So, back in our list,
let's add opening and
1:34
closing <li> tags around each menu item.
1:36
Each LI now represents an item in
the list, and LI tags, when placed or
1:54
nested inside a UL tag,
are displayed using bullet points.
1:59
Again <ul> stands for unordered list,
2:06
meaning the order in which the items
are displayed is of no significance.
2:08
So for example, if you're creating
a shopping list, the order in which
2:13
the items appear doesn't matter,
you just need to buy every item listed.
2:16
But if you need to list
items in a specific order,
2:20
like step by step instructions of a recipe
or a list of your top 10 favorite movies,
2:23
then you can use an ordered
list using the <ol> element.
2:28
So we'll change the opening
<ul> tag to an <ol> tag, and
2:32
we'll do the same for the closing tag.
2:37
We'll give it a save, and
as you can see in the browser,
2:38
the <ol> element uses numbers instead of
bullet points in order from one to four.
2:41
Ordered and
2:47
unordered list can also be nested inside
other lists to create multi-level lists.
2:48
So back on our list, I'll change
the <ol> tags back to <ul> tags.
2:53
Then I'll expand the contact list item,
and below the word contact
2:59
let's nest an unordered list by typing
a set of opening and closing <ul> tags,
3:05
and in this list I'll create three list
items but you can add as many as you like.
3:10
So, I'll start with Email.
3:16
Below that I'll create a list item for
Phone, and a list item for Address.
3:21
I'll give the file a save, and over in the
browser, notice how when you nest a list,
3:31
the browser adds indentation
to give the list structure.
3:37
So notice how now our list
resembles an outline.
3:42
So to recap, unordered lists display
bullets, ordered lists display numbers,
3:44
and you're able to nest
lists inside list items and
3:50
use a combination of <ul> and
<ol> tags to create a list.
3:53
Now I'm going to delete
the nested UL inside the main UL.
3:57
But to let you experiment with lists on
your own I've posted a tech snippet in
4:02
the teacher's notes about
the top VR resources.
4:06
So go ahead and add that text
below the blog entries here, and
4:10
turn it into an ordered list and
4:14
feel free to pause this video while
you grab the text and create the list.
4:16
So first, I'll paste the text into
the page just above the closing body tag.
4:20
So this new Top VR Resources
content is indirectly related
4:30
to the Latest VR Articles section.
4:34
So its heading shouldn't hold equal or
4:37
a more importance than
the Latest VR Articles h2.
4:39
So we'll mark up the resources heading
as a sub-heading of the H2 using an H3.
4:43
Then, we'll place the list inside
an ordered list by wrapping it
4:53
inside a set of <ol> tags, And
4:59
we'll place the items inside a <li> tags.
5:04
All right, let's save our file, refresh
the browser, and there you have it,
5:20
our top VR resources list.
5:25
So in the next video,
I'll teach you about links,
5:26
the most important feature of the web.
5:29