Skip to main content

HTML Tutorial 7: Creating HTML List


Sticky Note with Ordered and Unordered List


Hello Guys! This is my tutorial number 7 on HTML. If you would like to read the previous 6 tutorials then please use the search box above, type HTML and get the HTML tutorials list. 

Today I will discuss about a simple topic of HTML. Really this is as simple as I say! :) Okay let's start.


Practice Rules

Practice rules are as usual. Use notepad and a web browser. Save the file with .htm or .html extension. 


HTML List: Ordered and Unordered

There are mainly two types of lists can be created by HTML code. The first one is ordered list and the other is unordered list. 


Ordered List:

In an ordered list, the list items are marked by numbers. This exactly looks like a numbered list created by Microsoft Word or other text editing programs. 

An ordered list starts with <ol> tag and ends with </ol> tag. Each item of the list starts with <li> tag and ends with </li> tag. Look at the code below:

<ol>
<li>Apple</li>

<li>Google</li>

<li>Microsoft</li>
</ol>

    Remember, o indicates unordered (o) and l indicates list. Thus it is written as <ol>. 

     After enter this code, you will get the following output in your browser: 
    1. Apple
    2. Google
    3. Microsoft

    Unordered List:

    In an unordered list, the list items are marked with bullets. Normally small black circles (·) 

     Code for unordered list is very similar. Instead of typing <ol>, you need to use <ul>. u for unordered and l for list. Follow the code below:
    <ul><li>Apple</li><li>Google</li><li>Microsoft</li></ul>
    Your browser will display:
    • Apple
    • Google
    • Microsoft

    Description List:

    There is another list in HTML which is known as description list. A description list contains a brief description of the list item. 

     But I think you can describe the list item simply typing some texts. This is not very important to create a different type of list to describe list items. That's why I'm not showing the code of description list. 
    Tip: You can use line breaks, text, links or images inside a list item. 


    Tags used in HTML List: 

     By this time you're familiar with the tags used in creating HTML list. Let's check them at once:
    • <ol> - Defines an ordered list
    • <ul> - Defines an unordered list
    • <li> - Defines a list item
    • <dl> - Defines a description list
    • <dt> - Defines a term/ name in description list
    • <dd> - Defines a description of a term/ name in description list. 

    Stay with Marks PC Solution to get more interesting IT topics!


    Labels:

    Comments

    Post a Comment

    Popular posts from this blog

    GTA San Andreas Cheat Code (PDF)

    After Vice City, San Andreas is the most popular game released by Grand Theft Auto (GTA). Usually GTA releases role playing game. San Andreas is such a game where you can act like a person. You can do everything. You have to take part in missions and complete them.  To make your missions easier, there are lots of cheat codes. If you can properly apply these codes, the tough parts of the game will be easier. Cheat codes are somewhat like keyboard shortcuts of computer programs.  I've shared 63 cheat codes below. There were more cheat codes in my collection, but I've omitted the less important cheats. Effects or result of the cheats are on the left side, and the codes are on the right side.  You can copy the following codes in your PC. And for your convenience, I've also uploaded a PDF file of these codes. You will find the download link at the bottom.  Effect Cheat Code Adrenaline Mode MUNASEF All Cars Explode ALL...
    8 comments
    Read more

    Joining Texts from Multiple Cells in Excel

      Programs like MS Excel is full of functions. There are many useful functions that we don't use or we don't know about. One of them is CONCATENATE. It means joining or linking. With this function you can join texts from multiple cells. Let's see how . . . Suppose you're working in an Excel Worksheet where you need to combine texts from different cells. I'm gonna show you an example. Let's consider the image below -    What do you see ? I've imputed First Name and Last Name. In Full Name column I've used the formula i.e. CONCATENATE. And in the last column I've added Mr. with the full name.    So how do you use this formula ? Here it is -  =CONCATENATE(A2," ",B2) Observe it carefully. You can add more than 02 cells with this functions. Here I've just used 02 cells. You may think what is this " " for ? You may notice that there is a space between the two i.e. " & ".  If you don't use " " then you...
    Post a Comment
    Read more

    Running Total/ Cumulative Sum in Excel

      Hey Guys! You should have noticed that I'm writing on MS Excel for last few days! To be honest I'm trying to learn some simple and useful tricks of Excel. And I'm also trying to share my knowledge with you. In this post I've come with such a little trick which maybe very useful if you face such situation. Let's begin . . .    Running Total/ Cumulative Sum It means the summation of numbers in a list and it will be updated each time when a number is added or changes. Look at the image below -    Look at the image. There are two columns with numbers. The first one is simply the number list. But the 2nd one is the summation of the list. Each time a new number is added to the first column the second one shows the summation. How to do this?  It's not a magic. Very simple sum formula is used to perform this task. But there is a little trick. You just need to lock the first cell and then every time it will update the running total list.  Here is my list. Sim...
    Post a Comment
    Read more