HTML Fundamentals 2: Lists | SDTL3 A3.1 |


HTML Fundamentals 2: Lists

Building on the previous video tutorial, this demonstration covers lists within HTML including how to number the lists. Your work here will be the starting point for the next exercise.


- [Instructor] Hi, welcome back. Okay, we've had a good look into all of the key tags we should be aware of. Let's get some more substance to show here. I'm going to change H1 to welcome to QA. The text underneath this, I'm going to add QA is a national learning company which offers solutions for apprenticeships, higher education, learning and consultancy. Check out more detail below. I'm going to change H2 to apprenticeships. As you can see, I'm taking upon myself to create a new QA webpage. Under the H2 tag I'm going to type, using a P tag of course, apprenticeships come in all shapes and sizes. At QA we deliver apprenticeships in break, software, break, IT, break, cyber, break, business, break, leadership, break, we have loads of vacancies up and down the country. Be sure to check if there are any local to you. I'll end with this forward slash P tag, and quickly save and show you how it now looks. So I've listed the different apprenticeships, but it isn't very clear it is a list and is quite messy. This is where we bring in the UL tag. This stands for unordered list, which basically tells computer not to number the list. After the UL tag, we use the li tag. This tells the computer what text needs to be in the list. I'll add both li tags to software, IT, cyber, business, and leadership. Now save and there, that looks better already. Now there are times when you'll want a numbered list. To do this, you simply change the UL tag to an ol tag. I'm sure you can guess what this means. But to confirm, ol means ordered list. Which will number all the items we have. Now save and done. An ordered number list for our apprenticeships. It may not look not much, but you're well on your way to mastering these skills. Everyone starts from the same point and getting to grips the basics really sets you on the right path. By using a few simple tags, we can quite easily build a basic web page with information. You may have noticed our bottom paragraph is in the list but isn't numbered. To fix this, we need to end the ol tag with a forward slash ol tag. Once changed, we can now save and refresh to see how it should look, that's much better. In this video, we've covered lists within HTML, including how to number those lists. In the next video, we'll look at adding images. See you there.

About the Author