Bill Rosener: Hello! This is Dr. Bill. Welcome back in this video you learn how to insert various types of lists into a web page using HTML, let's start by taking a look at what you learn how to create, and then we'll walk through it step by step. The very top. Here we'll create either. Header, 2 header, one tag this HTML list. Then we're gonna insert an unordered list.
Bill Rosener: We can see we've got some squares. We'll put some bullets, etc. There. Then we're gonna insert an ordered list. And then finally a definition list. Now that we won't know what we're gonna do, let's get started. So the 1st thing I'm gonna do is I'm gonna open up a visual studio code. Other editors worked. I think you'll find this one's probably a little bit more powerful.
Bill Rosener: And I'm gonna I've already got my folder. I'm gonna put in an a temp. I'm just gonna come right up here and I'm gonna choose new file.
Bill Rosener: and I'm gonna go ahead and call this one assignment
Bill Rosener: 2 dot. HTML, make sure it ends with that dot. HTML extension there.
Bill Rosener: answer nothing. I'm going to create the file.
Bill Rosener: Okay, at the very top. We're just gonna need a header, one header, 2 tag there. I'm gonna type in h 1.
Bill Rosener: And you can see as soon as I do that automatically. Close that. And I'm going to type in HTML, and this
Bill Rosener: and I'm just gonna go ahead and save this, and we'll open it right away. So I'm gonna come to file. I'm gonna hit save.
Bill Rosener: And then again up. If I came over here to my extensions. I've got open and Browser installed. So I can just simply right click here and open in default, Browser. And that's gonna open this
Bill Rosener: and H, and actually Firefox here.
Bill Rosener: Okay, moving on. The next thing we'll do is insert an unordered list. So I'm gonna come right back over here
Bill Rosener: and I'm gonna 1st of all, I'm gonna break this up into a few steps here. Ul is an unordered list.
Bill Rosener: And then I'm going to type in Li for list item.
Bill Rosener: and the 1st one there was a Google Chrome.
Bill Rosener: And then we're type in Mozilla
Bill Rosener: Firefox.
Bill Rosener: and you put safari here if you wanted to. And I'm gonna go ahead and
Bill Rosener: put one more here, Microsoft Edge.
Bill Rosener: okay, and let me go ahead and save that
Bill Rosener: I'm back to my browser.
Bill Rosener: refresh, reload.
Bill Rosener: And there it is. Let me get a look. Just zoom in a little bit here, so we can see right here we've got some disk.
Bill Rosener: and if you ever wanted to. You come right up here and you could go. Type
Bill Rosener: equals circle.
Bill Rosener: I could save that.
Bill Rosener: Come back to my browser refresh, and it gets a little bit
Bill Rosener: little bit more subtle circles there. Another one is a square.
Bill Rosener: so you could type the the 3 options. There would be a disk
Bill Rosener: circle and square.
Bill Rosener: and let me just put a square there, save that control. S. If you want, and then come back to my browser and refresh there.
Bill Rosener: Okay, if we take a look here, I've also got
Bill Rosener: browsers and ordered lists there.
Bill Rosener: So what I could do is come right up here, and I could type in Boldface.
Bill Rosener: and I could type in browsers
Bill Rosener: unordered
Bill Rosener: and list.
Bill Rosener: and I'll save. But actually up I'm good. I've got both face turn off both face unordered list, and I can save that
Bill Rosener: and come back here, take a look at that and refresh. And all the thing is, I'm gonna point out, is, there's several ways we can get rid of that space. Reduce cascading style sheets. And I'm also gonna tell you that moment you start uploading this to a web page. If that
Bill Rosener: particular theme has cascaded style sheets, there's a chance that this may look different anyway. Here.
Bill Rosener: So let's take a look here. Let's say I wanted to reduce the gap here. One way to do this actually combine. And I could use a Dl. Which will begin going to a little bit more detail here a little bit.
Bill Rosener: So d, how's the definition list?
Bill Rosener: I can type DT.
Bill Rosener: And then I'm going to put browsers here.
Bill Rosener: and I want to close
Bill Rosener: the D team.
Bill Rosener: and then I'm going to go ahead and start another D team.
Bill Rosener: And I'm going to put all of this code inside there.
Bill Rosener: And then I'm gonna close the dl.
Bill Rosener: okay, so I'm going to start my definition list.
Bill Rosener: I'm gonna close the definition list. I'm gonna start a
Bill Rosener: DT.
Bill Rosener: Close it, start another dt, and close it, and let's go ahead and save that.
Bill Rosener: Come back to my browser
Bill Rosener: refresh. And sure enough, that is one way kind of combining 2 different lists to achieve the outcome there.
Bill Rosener: And if you happen to have a space, that's okay.
Bill Rosener: Okay. Next one is, that was an unordered list. Now we'll do a ordered list.
Bill Rosener: And so, taking a look here, I wanted it to
Bill Rosener: say, Search engines.
Bill Rosener: I'll tell you about this one. I'm just gonna go ahead and
Bill Rosener: type in a
Bill Rosener: search engines.
Bill Rosener: And I'm going to type this one's going to be an order list
Bill Rosener: like, so
Bill Rosener: okay, now let's go ahead and begin the order list. And I'm just gonna simply type ol
Bill Rosener: list. Item.
Bill Rosener: Hugo.
Bill Rosener: and we'll type that bing.
Bill Rosener: and I'll just put a Yahoo here. Oops. Not all. I.
Bill Rosener: Okay, and there we go. So we're going to start our boldface. Close the Boldface, start an ol and ordered list.
Bill Rosener: Close the ordered list. Li is list. Item, start the list. Item, close it started. Close it, etc, there, and let me go ahead and save that.
Bill Rosener: and come to the browser
Bill Rosener: and refresh and listen. This don't. I'm just gonna ignore that gap here. That's fine here.
Bill Rosener: So now let me show you a couple of the options that right now the default is 1, 2, 3, and a few other things I can do is I could come right in here, and I could put type equals.
Bill Rosener: And I could put in, for example, lowercase A,
Bill Rosener: I could save that.
Bill Rosener: Come back and refresh. And you can see, it's going to go. ABC,
Bill Rosener: you can also even specify a start value.
Bill Rosener: And I could put
Bill Rosener: say 3.
Bill Rosener: So we're going to be using lowercase a starting with 3,
Bill Rosener: save that
Bill Rosener: refresh.
Bill Rosener: So it's gonna go A, BC being the 3rd one. And so it's gonna put CD, and E,
Bill Rosener: and maybe I could done.
Bill Rosener: probably that at 1 1 other couple other options would be a lowercase. I
Bill Rosener: so I could save that
Bill Rosener: refresh. And now you can see the lowercase. I'm
Bill Rosener: sometimes what you also may want to do is the default is a number one. And then I could start say with, 5.
Bill Rosener: So it's going to use regular numbers.
Bill Rosener: The type equals one start equals 5. Go ahead and save that
Bill Rosener: and refresh. So it's gonna go 5, 6, and 7.
Bill Rosener: Okay. The last one we wanted to look at was a definition list.
Bill Rosener: And we'll put some Internet terms.
Bill Rosener: So I'm gonna come on down here.
Bill Rosener: And I'm going to type a Dl.
Bill Rosener: and what we did earlier.
Bill Rosener: DT.
Bill Rosener: And I'm gonna put this in both hands.
Bill Rosener: Okay, make it this little bit higher on the screen here. So I've got mole face
Bill Rosener: Internet terms. I'm going to start my Dls definition list close. The definition list. Dt is kind of the term being defined. And I want to put some Dds in here
Bill Rosener: and these in
Bill Rosener: electronic magazine. And we'll put a couple more in here
Bill Rosener: and one more.
Bill Rosener: And that was URL,
Bill Rosener: uniform
Bill Rosener: resource
Bill Rosener: locator.
Bill Rosener: Okay, I think it's looking good. Here. Dl, start the definition list close. It dt close it. Dd, except with that. So Dt is the term being defined. So let's come ahead and file and save.
Bill Rosener: Come back to my browser and refresh there.
Bill Rosener: Okay, and that's gonna pretty well sum up as far as at this point. We now have literally recreated this. But again, let me just go ahead and show you
Bill Rosener: Come on down here and I'm gonna go ahead and
Bill Rosener: use a little. AI. So I've got. I came here to the extension I've got code. And so again, it may vary slightly from one
Bill Rosener: AI generate to the next, and this one is simply hit control. I tell you, let me actually spell that out here.
Bill Rosener: Okay?
Bill Rosener: Well,
Bill Rosener: see if I can get down here. Okay, that's what I'm gonna press is control. I on the keyboard. So Mac is probably Cmd. I.
Bill Rosener: And as soon as I do that.
Bill Rosener: here pops up the codeum command, and it's like, I could instead, rather manually doing all this, I could go
Bill Rosener: create and
Bill Rosener: unordered
Bill Rosener: list with
Bill Rosener: 5 items. Okay? And I could even probably be a little bit more detail. But let's go ahead and see what it does create an unordered list with 5 items. I'm gonna hit the submit
Bill Rosener: and looks like it actually even threw some
Bill Rosener: and went a little bit further and threw some text in there. But let me just go ahead and hit. Accept.
Bill Rosener: So here is the list. My favorite TV shows unordered list breaking bad, the wire. Mad men, sopranos, game of thrones. So let me go ahead and save that.
Bill Rosener: and
Bill Rosener: come back to my browser and refresh there
Bill Rosener: and ignore the control plus the control plus on that was just to get my
Bill Rosener: codium interface prompt there, anyway. Hopefully, in this video, you learned how to create lists.
Bill Rosener: Unordered list.
Bill Rosener: ordered lists that are numbered, a definition list, and then finally used a little AI, just to show you that it can also be done using the technology there. Well, hopefully, in this video, learned a little bit more. And I'll catch the next video. Thanks a lot. Bye.