Placeholder Image

Subtitles section Play video

  • Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

  • Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

  • So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

  • Welcome back.

  • As you know, I mean, like the computer guy in today's class, I'm going to be showing you how to create lists within your HTML document.

  • So basically a list is a normal list that you're used to, you know, a bullet point list or a by the numbers list.

  • That's what I'm going to show you how to dio in html.

  • So whenever you're going to be creating one of these lists, the first thing that you have to do is you have to decide whether you want it to be an ordered list or on a northern list.

  • So when I say ordered list, I mean that there's actually going to be numbers 123456789 10 or on a Nordeste where essentially you're just going to have bullet points again.

  • What you decide is up to you when you're going to be creating these lists.

  • What you d'oh is First you open up the overall tag for the entire list.

  • So when you open up the overall tag, you'll use either Oh, l or you.

  • L so ordered a list or a kn ordered lists.

  • You're going to say what this list is going to be.

  • And then within that tag, everything.

  • What used the l i tag to say what the specific list items are, So L I item one close l i l I am too close Ally L I don't three close ally.

  • So it is important.

  • Understand, with these tags that the only time you're using a different tag is for the entire list itself, either Oh, L or UL for the entire list the items within the list whether it is a kn ordered or whether it's ordered, you're always going to be using Ally, so this could be useful for you.

  • So if you decide to make an order list, you use O l for the tag you created order list.

  • You're looking at it like and that's not really what I want.

  • I want that to be in a Northern list.

  • All you have to do is change the opening tag and closing tag for the entire list.

  • Two different, different list, and then that will modify the entire list for you.

  • The other thing to be thinking about with these lists is you can actually do tears within list.

  • So basically, like when you're looking at, like, subcategories, that type of thing.

  • So I'll also show you how to do that today, and that's what we're going to be talking about.

  • Today is how to add a list to your HTML document, so there's no real warning warning in today's particular class.

  • Again, creating list is relatively easy.

  • You open the tag list.

  • Well, rul.

  • Then you have all the items on the list.

  • Those are encapsulated with within the ally tags on.

  • Then you close the list, and that's it.

  • The only place where you might get into a little bit of the trouble is when you're doing a tier list.

  • So basically, when you're doing essentially multiple lists within a list at that point, you do have to keep track of when you open things and when you've closed things and where you at where you're at.

  • But this should be rather relatively simple again.

  • Basically, just open the page in a Web browser.

  • If it looks how you want it to look great.

  • If not, go back and tweet the tags with that.

  • Let's go over the computer and I can show you how to create these lists in HTML.

  • So here we are at my demonstration computer again, I am using a Mac s.

  • So therefore, I'm using text at it.

  • But whenever you're creating these HTML documents, all you need is a text enter and asking text editor.

  • So if you're on the Windows world, you can use no pad.

  • If you're in the Mac world, he can use text at it.

  • If you're in Lenox World, you can use G edit or vim or nano or whatever.

  • You are basically just just something that's an ask you text editor.

  • The big thing is, when you go to save the document, you save it with the extension of dot a T.

  • M or dot html.

  • This means that whenever your computer deals with that file, it'll no, it's supposed to be open with a Web browser again.

  • When I'm showing you these demonstrations, I'm not creating a full web page like you quote unquote.

  • Should I'm not encapsulated everything within HTML tags.

  • I'm not using head tags.

  • I'm not using body tags.

  • I'm not I'm not doing this specifically how your HTML document should look, if you're presenting this to your boss or to a client, But again, in the camel world, the cool thing is I can simply write out basic HTML code on it will show up in a Web browser.

  • Even if I haven't formatted everything properly, I do this guest so we can focus on the specific a lesson that I'm trying to teach for today.

  • Eso here I have three different lists that I've created.

  • The first list is an unordinary list.

  • Now again for the title of the list, you have You ever understand the title of a list is going to be separate than the list itself.

  • Eso With this, I'm using a basic P tag just to say this is an unordinary list and then I'm closing the P tag under this, we're going to be using the U.

  • N.

  • L tag.

  • So this is a kn ordered a list tag on, then within the in order less tag.

  • We're then going to write out all the items.

  • So we opened the ally tag.

  • We say what the first item is, and then we close the ally tag.

  • So each one of these basically this is one bullet point or this is one point in the last.

  • So we opened the ally tag.

  • We say item to close the L I tag be open the calyx tag.

  • We say item three and then we close the l I tag.

  • And then with this, then we close three u l tag.

  • And so this is going to be our full on order list.

  • So we're gonna look, we're gonna look when this opens up on a Web browser, it's gonna say on order list there were icy item 12 and three and there's going to be bullet points in front of this particular list.

  • They were gonna go down.

  • We take a look at the orderto list example.

  • Again, I just simply type ordered list out using the P tags because again, the title of the list will be separate from the list itself.

  • and then for the order list.

  • We open the order list with e O.

  • L tag.

  • Really Simple UL tag or ol tag.

  • Pick one.

  • And then with this again, the exact same as we had before.

  • Or you can simply copy and paste this, so l I we open up the L I tag the first item.

  • We close the ally Tag, open up the L I.

  • Tag for the second item.

  • Closed the ally tag.

  • Open up.

  • The ally attacked with third item.

  • Close the ally tag.

  • And then we're going to close the order list tag, And so this will be a ordered list.

  • So it'll say ordered list and I'll say one item one to item two three, Item three.

  • Now we go down here to a tiered list and this is where Oh, this is This is this work and give you a bit of a headache.

  • So where this I'll show this to you in a second in the Web browser, But basically, this is where there's multiple.

  • So, like their sub sections within a list.

  • So think about like one.

  • You know, there's there's item one, and then item 1.1 and I don't 2.1, that type of thing.

  • It's a tearing.

  • And so basically, with this, what you're going to be doing is you're going be creating lists within the list, right?

  • So we have the tier list and we're going to open up the tier list with the UL for a kn ordered, lest we're then going to have the first item.

  • And then under that, we're going to create another list.

  • We're gonna use you, l And then we're gonna have the second item that under that we're going to create 1/3 list.

  • That's a UL.

  • So that's gonna be the sub sub item.

  • They were going to use you out, open up another list.

  • That item is gonna be the sub cept sub item, and then we get done with that.

  • We have to close all of those lists that we just created.

  • And then we go down to item two and item three.

  • Then we close the U L.

  • So this this is one of those that could give you a bit of a headache s.

  • You may just have to play with us a little bit, then to see what we're actually gonna get with this by double.

  • Click on the list dot html We can see what this document looks like.

  • So we have the a northerly list, as we had up here again.

  • We up.

  • Open up the on order list.

  • We have item one, Item two, item three and again in front of those items, you simply have the basic bullet point then down here for the order list again.

  • Oh, Ellas, A tag.

  • Exact same thing with items.

  • Ally, Item one, Item two.

  • Item three.

  • We close the ol tag.

  • And so now we have item one item to an item three, but in seven bullet points in front of them.

  • We now have numbers.

  • So this is item one.

  • Item two on obviously item three, and that's all there is to it.

  • Then we come down here to the tiered list.

  • And this is where, like I say, it could give you a bit of a headache.

  • Thistles.

  • One of those things where you know, you take a look at it and you play around and you experiment and then you'll get it after a bit's like basic math.

  • Like when you first, when your first dealing with it.

  • It seems complicated, but after you've done in a couple of times, it actually gets to be simple.

  • So this is where I'm saying it's a tiered list.

  • So we have item one, item one, right, That's the first at the bullet point.

  • And then we have the sub item.

  • So when I do a sub item, it just comes up.

  • It's kind of like that bullet point, like a donut bullet point.

  • And the way the sub sub item, the sub sub item, then has a little square and then a sub sub sub item that still has a square.

  • Right?

  • So again, think about this.

  • If you were creating some kind of like index for, like, a book or if you're trying to, you know, create like a table of contents or something, maybe for a manual or for a book or that type of thing you might be, you might create this kind of tiered less again.

  • Also, remember, with this with tags, I could be creating ah, hyperlinks within this too.

  • So this could be a hyperlink to a section, and this could be a hyperlink to a section, and this could be a hyperlink to a section.

  • This could be a hyperlink to a section.

  • So when you're looking at this, think about how you can build it out using using all of your available tags.

  • So maybe again, maybe sometimes it's for lists.

  • Maybe.

  • Sometimes it's for, like, a table of contents, that type of thing, you know, so on and so forth.

  • But this is basically all there is to creating the list.

  • You either use the UL tag or the ol tag on order list or order list.

  • You then have your items.

  • They're all encapsulated within the ally tags on.

  • Then it spits it out.

  • The only complicated thing at all is again when you go to come down this tiered list, and this is basically is literally one of those things where you just sit there and yet you type it out, how you think it's supposed to go, and then you open up with Web browser, and then you try to figure out why what's in the Web browser doesn't look like what you thought you were a typing on.

  • You go from there.

  • So there you go.

  • Now you know how to create lists in your HTML document you have on order the lists and you have ordered lists.

  • Where this can start to get interesting is again.

  • As I say, you can use multiple tags when you're creating an HTML document or something in HTML so you can have a list and then the items in the list can be hyperlinks to different things.