Pages

Thursday 26 December 2013

Html Chapter -3


Lists:We can represent information in list format. There are three type of lists.
                     (1) Ordered list              (2) Unordered List                (3) Definition list

(1) Ordered list:
In this list items are represented in a particular order like (a,b,c… or i, ii, iii, ….). To create a ordered list we use <ol></ol> tag and list items are represented by <li> </li> tag.

Attributes of <ol> tag:
(1.1) type:-
This attribute specifies pattern for ordering list items and values for this attribute are : a, A, 1, i, I
(1.2) start:-
With this attribute we can specify starting point for ordering.

Example1:
<html><body>
<h1> Here is the ordered list.</h1>
<ol  type="A">
                  <li > list Item1 </li>
                  <li> list Item2 </li>
                  <li> list Item3 </li>
                  <li> list Item4 </li>
</ol>
</body></html>
Example2:
<ol  type="1" start="10">
                  <li> list Item1 </li>
                  <li> list Item2 </li>
                  <li> list Item3 </li>
                  <li> list Item4 </li>
</ol>

Attributes of <li> tag:
(1.1) value:
This attribute specify new pattern value for this list item. Further list items are ordered according to this value.
(1.2 type: This attribute is used to change the ordering type for current list item. Other list items will not be affected.
Example:
<ol type="1">
                  <li> list Item1 </li>
                  <li> list Item2 </li>
                  <li type="a"> list Item3 </li>
                  <li> list Item4 </li>
                  <li> list Item5 </li>
                  <li value="21"> list Item6 </li>
                  <li> list Item7 </li>
                  <li> list Item8 </li>
</ol>

(2) Unordered Lists:-
In this list information is specified in bulleted format. To create an unordered list we use <ul> </ul> tag and list items are represented by <li> </li> tag.

Attributes of <ul> </ul> tag:

(2.1) type: This attribute specifies bulleting style. Type values for this attribute are circle, disc, square.
Example:
<html>      <body>
<h1> Here is the un-ordered list.</h1>
<ul type="square">
                  <li > list Item1 </li>
                  <li> list Item2 </li>
                  <li> list Item3 </li>
                  <li> list Item4 </li>
</ul>         </body>     </html>

(3) Definition Lists: These list is used to provide description about something. To create an definition list we use <dl> </dl> tag. Definition title is specified by <dt> </dt> tag and description about the title is specified by <dd> </dd> tag.
Example:
<html>        <body>              <h1> Here is the Definition list.</h1>
<dl>
              <dt> Html </dt>
                  <dd>
                                    Html stands for Hyper Text Markup Language <br />
                                    It is very useful in web dovelopment.
                  </dd>
</dl>              
 </body>            </html>


Horizontal Rule <hr />: Using <hr /> tag we can specify a horizontal rule.
Ex-  <html> <body> <hr /> </body> </html>
Attributes:
(a) width:- This attribute specify width of the line. Its default value is 100%.
Example:
<body>
<hr width="20%" />
<hr width="50%" />
<hr width="60" />
<hr width="100%" />
</body>
(b) align:- This attribute specifies alignment of the line. Values for this attribute are center, left, right.
Example:
<body>
                  <hr  width="60%" align="left" />
                  <hr  width="60%" align="center" />
                  <hr  width="60%" align="right" />
</body>
(c) size:- With this attribute we can specify size (thickness) of line.
Example:
<body>
                  <hr  width="60%" size="1"/>
                  <hr  width="60%" size="3" />
                  <hr  width="60%" size="5" />
</body>
(d) color :- with this property we can specify color of the line.
Example:
<body>
<hr  width="60%" size="5" color="#ff0000" />
<hr  width="60%" size="8" color="#ffccff" />
<hr  width="60%" size="12" color="#22ff22" />
</body>

Previous Chapter                                                                                                                                            Next Chapter

No comments:

Post a Comment