Saturday, October 05, 2013

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!


    No comments:

    Post a Comment