Ultra fast cheap  linux and windows hosting
html tutorial HTML Tutorial:

  • Html - Introduction
  • Html - A basic html file
  • Html - Meta tags
  • Html - Text Control
  • Html - Color
  • Html - Lists
  • Html - Links
  • Html - Tables
  • Html - Forms
  • Html - frames
  • Html - Background music
  • HTML tag list
  • HTML Character Entities
  • Browse
    html tutorial
    Home >> Tutorials >> HTML Tutorials

    Html Lists:
     
    Ordered list Unordered list List within list Definition List Menu

    Html - Creating ordered lists

    An ordered list is a list of items that are marked with numbers.Ordered  lists start and end with <ol>and </ol>tag respectively. The <li>tag  defines the list items with a number or a dot. This is no end tag for <li>. To put a title on your list, use the <lh> tag. This is no end tag for <lh> as well. It is better to add a <br> tag afterwards otherwise older versions of Internet Explorer will have the first list item on the same line as the heading.

    A Simple example:

    1. Pizza
    2. Burger

    The code:
    <OL>
    <li>Pizza</li>
    <li>Burger</li>
    </Ol>

    What is TYPE and START attributes:

    TYPE attribute defines what type of ordered list you want. We can use three types of bullets for the <OL> lists - Alphabet, Roman numerals and numbers/digits.

    Format:
    TYPE="A/a/I/i" for upper or lower case and Roman numerals. (customize  ordered lists)

    Examples:
    Type=1 Result=1, 2, 3, 4, 5 (this is the default)

    Type=i Result=i, ii, iii, iv, v

    Type=I Result=I, II, III, IV, V

    Type=a Result=a, b, c, d, e

    Type=A Result=A, B, C, D, E

    Eg:
    <ol type=1>

    <lh><i>Example1</i>

    <li>Physics

    <li>Chemistry

    <li>Mathematics

    <li>Science

    </ol>

    Another attribute of list is START. The value of this is a number and this specifies the number (or alphabet) with which the list would start. That means it is possible to interrupt your list with text and return to it later by using the <ol start> tag.Simply set its value to the value you want the list to start at. If you are not using the default type setting then you must specify the type in the <ol> tag too.

    START="x"

    The following is an example for interrupting a list using  START tag :

    <html>
    <head>

    <title> Ordered lists example</title><Br>

    </head>

    <body>

    <ol>

    <lh><i>Example1</i>

    <li>Physics

    <li>Chemistry

    <li>Mathematics

    <li>Science

    </ol>

    Interrupting the list with text and returning to it later by using the start tag.

    <ol start=5>

    <li>Computer

    </ol>

    <ol type=A>

    <lh><i>Example2</i>

    <li>Cat

    <li>Dog>

    </ol>

    </body>

    </html>

    Top



    Html - Unordered Lists

    An unordered list is a list of items. The list items are marked with bullets (typically small black circles).Unordered lists start and end  with the <ul>  and  </UL> tags. Once again the <lh> and <li> tags are used to enter data. Type is the only attribute of the <UL> tag and there are three options for this. They are square, circle and disc.

    <html>
    <head>

    <title> Unordered lists example</title><Br>

    </head>

    <body>

    <UL>

    <lh><i>Example1</i>

    <li>Physics

    <li>Chemistry

    <li>Mathematics

    <li>Science

    </UL>

    <UL type=circle>
    <lh><i>Example2</i>

    <li>Cat

    <li>Dog>

    </UL>

    </body>

    </html>

    Top




    List Within List

    Also you can create a list within a list. See the following example:

    <html>
    <body>

    <ol type=I>

    <lh><i>Food Items</i>

    <li>Meat

    <UL>

    <li> Chicken

    <li> mutton

    <li> pork

    <li>beef

    </UL>

    <li>Fish

    <UL>

    <li>salmon

    <li>shrimp

    <li> crab

    <li> shark

    </UL>

    <li>Non-veg

    <UL>

    <li> mashed potato

    </UL>

    </ol>

    </body>

    </html>


    Top




    Html - Definition lists

    A definition list is not a list of items. This is a list of terms and explanation of the terms.Definition lists start with the <dl> and end with </dl> tag. Each entry has two parts, <dt> and <dd>. The <DT> tag is used to enter the definition term and <DD> tag used to enter the definition description. See the following example.

     <html>
      <body>

     <dl>

     <DT><b>HTML</b>

     <DD> HTML is the primary language for formatting web pages.

     <DT><b>DHTML</b>
     <DD>DHTML is a browser technology that describes HTML pages with dynamic content. It is not a programming language,  rather a set of features that is accessed through a programming language, such as JavaScript.

     <DT><b>JAVA SCRIPT</b>

     <DD> JavaScript is an object-oriented scripting language developed by Netscape that allows you to create web pages.

     </dl>

     </body>

     </html>


    Top




    Creating menus

    Menus are enclosed within the <menu> and </menu> tags and use the <lh> and <li> tags for data input. Menus are identical to unordered lists except that there is only one type and that is disc.

    Example for <menu> Tag:
    <menu>

    <li>list1

    <li>list2

    </menu>

    Top



     
    Page contents: itechies.net - Learn How to create an ordered list in an HTML document
    htmltutorials
    tutorial home