HTML: Lists | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy

HTML: Lists | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy


– [Voiceover] You know what I love? Lists. Have you ever made a
to-do, or shopping list? Have you ever read a
list on a webpage like, top ten most rediculous dog faces? I bet you have, because
the world is full of lists. HTML, gives us a few tags to make lists. We’re going to practice them
by making a list of reasons why rabbits make great pets. Now, to begin a bulleted list, we must start with the ul tag. What does ul stand for? Well, I bet you can guess
what the l stands for, list. The u is a little trickier. It stands for unordered. It means that the browser
won’t number the list items. It will just add little bullets. see what I mean? Let’s add the first item. They’re furry. See the little circle on the side? That’s a bullet. Now, what do you suppose li stands for? The l is list, and the i is item. List item. Everytime we want to add a new item, we need to add a new li under the ul. Every ul should have at
least one li under it, because a list with no
items is pretty boring. Let’s add some more, so great listeners, and eat all your leftover carrots. This should be a pretty convincing list. I don’t know who wouldn’t want
a rabbit after reading this. I didn’t number this list,
because I don’t think that one reason is more important than the other, but there are a lot of time
when we do want numbered lists. Like, if we wanted to make a top three most famous rabbits list. To start our numbered list,
we’re going to use an ol, instead of a ul. Have you figured out what ol stands for? Here’s a hint, just chop the
first two letters off of what ul stood for. That’s right, it stands for ordered list. It tells the browser to
automatically number each new item. We still use li for adding new items inside the list however. So, we have Bugs Bunny,
and we’ve got Thumper, and of course, can’t
forget the Easter Bunny. Okay, the neat thing about
a numbered list is that the browser takes care of
the numbering for us. So, if we rearrange items,
delete, add new ones, it always updates the numbers correctly. Like, if all of you tell me
you don’t know who Thumper is, then, first, I’ll tell you all that you should really go watch Bambi. Then, I will begrudgingly move
Thumper down to the bottom. Now, poor Thumper is number three. Now, you have everything
you need to make lists. Go forth, and list everything.

One thought to “HTML: Lists | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy”

Leave a Reply

Your email address will not be published. Required fields are marked *