Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Getstartedhtmlcss
  • Overview
  • Transcript

3.1 Lists

In this lesson I will show you how to create both ordered and unordered lists using HTML. Lists are also a great way to build up navigation items.

3.1 Lists

Welcome back, in this lesson we're gonna discuss lists. There are two different kinds of lists you can use in HTML. There are unordered lists, which are pretty much a set of bullet points with each item having it's own bullet point. And numbered lists where each item is listed in sequential order, one, two, three, four, and so on. Let's go ahead and take a look at how we would mark those up now. To do this we'll incorporate lists into our site. Let's say this first widget comes in a variety of different colors, and I'd like to bullet point those options inside the first widget paragraph. Let's also say that I'd like to eventually add some navigation over here to the sidebar. It would be really nice to see the different links available right here. So the first thing I'm going to do is get rid of some of this fake text here in the first paragraph. So, let's go ahead and make some space here, clean that up. And the first thing that we'll do inside this paragraph is create an unordered list or a ul for short. Each list needs to have list items, so within the ul, I'm gonna create the first list item, and then the second, and finally the third. Let's go and save that. Come back to our web browser, refresh. And we see a pretty typical unordered list with the first, second and third item all with bullet points. Not too bad. But let's say that I'd rather have these options listed with numbers instead of bullet points next to them. Well, that's simply called an ordered list. So instead of a ul, let's change this to an ol for ordered list. I'll save that once again, come back and refresh. And the bullet points have changed from one, to two, to three. Lists are often used to create side or top level navigation. So let's go ahead and walk through that real quick. If you remember from previous videos, the sidebar is where we have the background of red. So inside this div, I'm going to create an h2 tag, and just give it a title of navigation. Underneath that, I'm gonna create an unordered list with a couple of different pages I'd like to introduce into the site navigation. So, the first one will be Home. Then, maybe we'll have an About Us page. And finally, a Contact Us page. Let's go ahead and save that. Come back to the site and refresh, and there's our side navigation. Now let's change this first paragraph to actually show different options in terms of color and widgets that we sell. So instead of the first item, second item, third item, let's change this to blue. Red. And green. Re-save that, and we refresh. We have blue, red and green. Now what would happen if we had different variations on the color red? Could we nest a list within a list the same way we listed div, or insert a div within a div. The answer is, we can absolutely do that. So let's say we have a couple of different shades of red that we'd like to list, as well. So, inside this red li, I'm going to create a little bit more space. And I'm gonna create an unordered list, cuz we don't really need to number off the different variants of red. And inside this, I'm going to add the different variants that we can have. So, once again, I'll have a list item, and maybe we'll have pink, and maybe a dark red, and finally, let's do more of a maroon. And we'll save that, come back to our site and refresh and we have a nested list. Now let's do the same thing for the About Us section. In fact, nested lists are often use to create drop down menus. So if you go to a site like tutsplus.com. You'll notice that under Free Tutorials there's several different categories or courses, several different categories. This top navigation bar is actually a list and all of these different sub navigations are nested lists. In fact, you'll see here, we have a nested list and then another nested list inside the nest list. And yes, I understand showing you this takes us a bit outside the scope of our tutorial. Because this type of beautiful menu requires JavaScript, CSS, and HTML. It's important for you to understand now how critical nested lists are when creating websites. But now that you understand that, we can at least make a very basic sub menu under the About Us. So let's toggle back to our text editor. And within this About Us list item let's go ahead and create some room and start a new unordered list. Within that unordered list let's have say a Company Timeline. Maybe a Bio on our CEO. And perhaps a Social Media page. We'll save that, and refresh. And now, we have our nested navigation over on the side. And finally, let's take a look at what we would do if we needed to get rid of these bullet points. Let's toggle back into our text. And anytime we see a list, say like this ul right here, we can do the same thing we did with the divs and add a little bit of style. So I'm gonna add style equals and this time I want to add an attribute of no style to this list. So I'm going to say list-style and I want the list style to be set to none and I'm going to put a semicolon after that. Come back to the site and refresh. And we see the bullet points next to Company Timeline, CEO Bio, and Social Media have gone away. Let's get rid of those other bullet points by Home, About Us, and Contact Us. So I'm gonna go to the top level list that has the Home, About Us, and Contact Us, and do the same thing. I'm just going to add a style equals list-style and then none. I come back, and I refresh, and those bullet points are gone, as well. For now I'll leave the one, two, three, and the circular bullets under the first widget paragraph. But we now know how to get rid of them if we want to. In the next video, I'll show you how to link these up to actually send the user to alternate pages on your site or even other websites all together. But for now, rest assured that you're comfortable making lists or even nested lists. Thanks for watching.

Back to the top