Adding lists to blog pages

So after learning about ordered and unordered list, now let us quickly add them to the blog page that we are building. So this is what we have till now and this is what we want to achieve. So there is a ordered list, right, and within one of the list items of the ordered list, we have an unordered list, right? So in this case I will directly not start copy pasting, first what we want is, we want to first write down the structure. So let us quickly write down the structure of the list items.

< ! --List -->

So after the paragraphs that you have, these two paragraphs are already there. Next we need is a list. And this list will be ordered list.

< ! --List -->

      <ol>

So I will create a ordered list element here. Opening and closing ordered list.

< ! --List -->

      <ol>

      </ol>

Now within this ordered list element there will be five list items, right? So list item 1, right?

< ! --List -->

      <ol>

       <li> <li/>

       <li> <li/>

       <li> <li/>

       <li> <li/>

       <li> <li/>

      </ol>

And similarly this is one list item so just copy paste because we want to add 5 list items in total. I will just save this and refresh, so if you see this 1, 2, 3, 4, 5. Obviously all item lists are empty for now we have not yet added any content. But yes, we have the structure ready. So we have a ordered list and we have the list items within it.

Now let us focus on list item number 1. Now in order to add list item no. 1like this what do I have to add? So if you see this list item has two things. Now what are those two things? This has the heading of the list item and then a paragraph corresponding to that heading. So heading is Commenting. So within the list item no.1, let us just focus on list item no. 1, I need to add two things, the first thing is the heading, let’s say h4, I am using h4 for the heading Commenting.

 <h4> Commenting </h4>

 <li/>

And after the heading there is a paragraph so I would need a p tag for the paragraph.

 <h4> Commenting </h4>

 <p>

 </p>

 <li/>

Now let us do the copy-paste part. Just copy-paste the paragraph here and save it. Now run it. So once you have saved it, refresh. So 2, 3, 4, 5 are still missing but yes, we have added list item no.1 here. So Commenting, this is the heading and then there is the paragraph corresponding to that heading, right?

So we have to do similar task for other list items as well. So let us just quickly do it. I am just copy pasting this structure because this is the same for the second list item as well so I am just pasting it here. Obviously the title of the heading will be different, so just replace it. Paragraph will be different as well so replace it as well. Save, refresh. So point no. 2 is ready as well.

And point no. 3 now. So point no. 3 is interesting. So under point no. 3, now it is not just the heading and the paragraph, there is a list as well and a unordered list as well. That means now we will have to add a list within a list so we call it nesting of list. We will have to do nesting of list and we can do that, that’s perfectly okay. But for now let me just write down the copy-paste portion. So you need a h4 heading, and the heading is this, so add the heading, right? The paragraph portion, we already wrote actually a part of it in the list file that we had. So this is the paragraph, right. So copy-paste it, post the paragraph you want to add list. So adding the list, we actually already created the list code we did in the previous session and paste it here.

<! --List-->

<ul.type=”square”>

   <li>.Fronted.Focus.</li>

   <li>.CSS.Weekly.</li>

   <li>.Javascript.Weekly.</li>

   <li>.Web.Design.Weekly.</li>

  </ul>

So this is unordered list. So ul for the same obviously these are unordered list items. So proper indentation actually helps us in understanding better. So I prefer indenting things and this is the closing of the list item. Other two list items here as well.

So this is what we have. Save and here we have paragraph and list items. So here obviously the bullet shape is square. If you want that it shouldn’t be square and circle as we have in our blog we can just write circle and then refresh.

So in blog these list items are blue in colour because they are links actually. But right now they are not links they are just normal text so they are in black. But we have learned adding links and then we will be able to achieve that as well. But for now this is what we have.

So we were able to add the heading, paragraph. So we were able to add lists I should say and nest the list further. So list within a list is something like this. So ordered list in the top and then unordered list within the list. So two more bullet points are yet to be added, I am leaving it up to you to add the bullet points and complete the content part of the blog page. Two more bullet point and then a paragraph at the end. So this is what we have to end, this is what you have to fill now and then we will have at least the content part of the blog page ready. In next session we will learn how to add images so that it at least it becomes visually more appealing and then we will be able to add images to the blog page. Thank you.