Wednesday, March 11, 2020

HTML : Working with LIST - Oredered & UnOredered


Working with LIST in web pages:
=> A list is a collection of related data items with or without a sequence (order). There are two types of list: Ordered List and Unordered List.
=> If data items are in an order, the list is called Ordered List. Ordered list uses Numbers and Alphabets. This list is created by using <OL> tag.
=> If data items are arranged in random without any order, the list is called Unordered List. Unordered List uses Bullets (signs). This list is created by using <UL> tag.

TAGS => <OL>, <UL>, <LI>


Programming Languages:        (Ordered List)
  1 C Language
  2 C++
  3 JAVA
  4 HTML
  5 PHP


Computer Courses:                 (Unordered List)
  • PGDCA
  • PGDIT
  • DCA
  • BCA
  • MCA


<OL> Tag: This tag is used to create an Ordered List and contain list items. Start and end tags both are required and supported by all the browsers.

Attribute
Specification and Value
TYPE
1 – Default number system (One)
A – Upper case letter
a – Lower case letter
I – Upper Roman number
i – Small Roman number
START
We can specify first number in the sequence.
Example: START=3 (Start from 3)
STYLE
Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE
Title of the tag (like “ToolTipText” in VB)



<UL> Tag: This tag is used to create an Unordered List and contain list items. Start and end tags both are required and supported by all the browsers.

Attribute
Specification and Value
TYPE
DISC (default), CIRCLE, SQUARE
STYLE
Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE
Title of the tag (like “ToolTipText” in VB)



<LI> (List Item): This tag is used to create a list item for Ordered List and Unordered List. Only start tag is required and end tag is optional and supported by all the browsers.

Attribute
Specification and Value
TYPE
DISC, SQUARE, CIRCLE (For Unordered List)
1, A, a, I, i (For Ordered List)
STYLE
Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE
Title of the tag (like “ToolTipText” in VB)


~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~








Example of Ordered Lists:
<! LIST_OL.HTML >
<HTML>
          <HEAD>
                   <TITLE> Working with Lists</TITLE>
          </HEAD>

          <BODY TEXT="MAROON">
                   <H1> An example of Ordered List </H1>
                   Programming Languages: <BR>
                   <OL  TYPE=”A”>
                             <LI> JAVA
                             <LI> C++  
                             <LI> HTML
                             <LI> VB
                             <LI> JavaScript
                   </OL>
          </BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~


Example of Unordered Lists:
<! LIST_UL.HTML >

<HTML>
<HEAD>
<TITLE> Working with Lists</TITLE>
</HEAD>

<BODY TEXT="BLUE">
<H1> A example of UnOrdered List </H1>

Computer Courses: <BR>
<UL  TYPE=”CIRCLE”>
<LI> PGDCA
<LI> PGDIT
<LI> DCA
<LI> BCA
<LI> MCA
</UL>
</BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~





<DL> (Definition List): This tag is used to create a Definition List which contain Definition Term <DT> and Definition Detail <DD>. Start and end tags both are required and support by all the browsers. End tag is optional for <DT> and <DD>.

Attribute
Specification and Value
NAME
Name of the Definition List
STYLE
Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE
Title of the tag (like “ToolTipText” in VB)



Example:
<! DEF_LIST.HTML>
<HTML>
          <HEAD><TITLE> Working with Definition List </TITLE></HEAD>

          <BODY  TEXT=“PURPLE”>
                    <H1> Example of Definition List </H1>
                    Some Important computer components are:        <BR>
                    <DL>
                             <DT> CU <DD> It controls operations of all hardware devices.
                             <DT> ALU <DD> It performs all arithmetic and logical operations.
                             <DT> Monitor <DD> It is a basic Output Device to display data and
                                                         information.
<DT> LCD <DD> Liquid Crystal Display is a type of display unit.
                   </DL>
          </BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~





No comments:

Post a Comment