Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I will be explaining the process used to mark up ordered and unordered list in an HTML document.
Once you've opened up your HTML editor and have started a new HTML document, the next thing we need to do is get some content that we can mark up.
To do so, go to the HTML tutorial homepage, click the link that says "click this link to access the text used in the following tutorials," scroll down to where it says unordered and ordered lists.
Highlight that part of the content and copy it.
Once you've copied the content we're going to be using it today's tutorial, the next step in the process is to add it to our HTML document.
To do so, go ahead and find the open and close body tag, give yourself a little room, and then paste the content that we copied in that space you've created.
Next we're going to go ahead and give our document a title, we're gonna call this one fourth HTML document, and then we're gonna go ahead and save our work.
I'm gonna call this four and, as usual, I'm going to save it to my desktop for easy reference.
Before we preview our content, let's go ahead and add some block level elements.
So, first we're going to add an h1 tag to the part of the content that says unordered and ordered list.
We're then going to add a paragraph tag where it says the following information will be converted into an unordered list.
We're also gonna add a paragraph tag to the sentence that says "the following information will be converted into an order list."
We're going to save our work, we're going to go over to our Internet browser, we're going to open up our document, and, as you can see, we now have a little bit of structure to our document.
The next thing we need to do is we need to convert this information here into an unordered list and then we're going to convert this information into an ordered list.
To do so, we're going to go back to our HTML editor and we're going to add some new HTML tags to our content.
Creating a list in an HTML document is a two step process.
The first thing we need to do is add a definition tag letting the Internet browser know what type of list we're building and then we need to nest our list elements inside our definition tag.
So if we go into our content, the first thing we're going to do is we're going to define the type of list we're going to build.
In this case, we're building an unordered list, so we're gonna use the tag ul and then we're gonna make sure to close our tag so that our entire page doesn't turn into an unordered list.
Now, to add list items to our unordered list, we use what is called the li tag, which basically stands for list item, and then we add the number of list items that we want in our list each one using a separate list item tag.
So, once we've created our structure, once we've defined the type of list we're going to build, once we've added our list items, we then need to add content between our list item tags.
I'm gonna simply highlight, cut, and then paste "first bullet point" inside our first list item tag.
I'm gonna do the same to the second bullet point content and then I'm going to add the third bullet point content here.
I'm then gonna go ahead and clean up my empty space.
I'm gonna save my document.
And let's go back to our Internet browser to see what happens.
As you can see, we now have an unordered list, or a bullet list and each part of the content that we identified as a list item shows up as a separate bullet point.
So the next thing we need to do is add an ordered list.
So let's go back to our HTML editor and we're going to do this slightly different.
First, we're going to find the content that we want to convert into an ordered list.
We're going to define our list using the ol tag.
At the end of the content that we want to format into an ordered list we're going to close our ordered list tag.
Then we're simply going to surround all of our list items using the li tag, making sure that each item that we want to be formatted as part of our list is surrounded by an open and close li tag.
Alright, let's go ahead and save that.
Let's go back to our browser and let's take a look at what happened.
As you can see, we now have an ordered list, or a numbered list.
So the thing to remember when building lists, you first need to define the type of list you want to build, either an ordered or unordered list, then you need to surround each list item with an open and close li tag.
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.