Create a new html document with name chapter2.html, here we will be creating ordered lists, special characters, ordered lists, horizontal rulers with styling, heading tags.
Put following code in html document and save then view in browser, remember to read the comments they are explaining the code in real.
[code lang=”xhtml”]
<html>
<head>
<title>Lists chapter 2</title>
</head>
<body>
<h1><font color="blue">How lists work in HTML</font></h1>
<hr width="50%" align="left" size="5px" color="blue" />
<p>We have two types of lists in html. <br />
1st type is ordered lists which we define by <ol>
</p>
<strong>Ordered Lists</strong>
<ol>
Web development languages we will learn.
<li>HTML Hyper Text Markup Language</li>
<li>CSS Cascading Stylesheets</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>Ajax</li>
<li>PHP
<ol>
<li>PHP 4.0</li>
<li>PHP 5.0</li>
</ol>
</li>
<li>MySQL Database</li>
<li>XML</li>
</ol>
<strong>UnOrdered Lists</strong>
<hr />
<ul>
<li>Ateeq</li>
<li>somia</li>
<li>Saira</li>
</ul>
<hr />
<h1>LISTS</h1>
<h2>Ordered Lists</h2>
<ol type="A">
<li>Pakistan</li>
<li>India</li>
<li>United States</li>
<li>Saudi Arabia</li>
</ol>
<hr width="100%" size="10px" color="#FF00FF" />
<h2>Definition Lists</h2>
<dt>
Web languages
<dd>HTML</dd>
<dd>PHP</dd>
<dd>JavaScript</dd>
<dd>Ajsp.Net</dd>
</dt>
<hr width="100%" size="10px" color="#FF00FF" />
<dt>
Programming Languages
<dd>C++</dd>
<dd>JAVA</dd>
<dd>Python</dd>
<dd>C#</dd>
</dt>
<hr width="100%" size="10px" color="#FF00FF" />
<br />
<br />
<h1 align="center">This is the world of XHTML</h1>
<hr />
<p>This is <em>really!</em>easy to learn!</p>
<p>you will soon ♥ Using XHTMLL</p>
<foo>this is also context foo</foo>
<U>This is <i> underline</u></i>
<br />
<br />
<p> this is the fact of 2sub3 and other all categories</p>
<hr width="100%" size="10px" color="green" />
2<sub>3</sub>
2<sup>4</sup>
<br />
<<br />
><br />
"<br />
©<br />
®<br />
<<br />
><br />
</body>
</html>
[/code]
See live view of above code chapter 2 then i will describe code below.
xhtml Ordered lists.
Ordered list comes with default type of numbers starts from 1, 2 , 3 , 4 so on . To change type we define <ol type=”A” by doing this our ordered list will start with A, B, C, D so on, there are many types as well like, i, ii, iii, a, A, 1.1 so on.
ordered list with numberic default values when we dont define any type.
Ordered lists default view code.
[code lang=”xhtml”]
<ol>
Web development languages we will learn.
<li>HTML Hyper Text Markup Language</li>
<li>CSS Cascading Stylesheets</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>Ajax</li>
<li>PHP
<ol>
<li>PHP 4.0</li>
<li>PHP 5.0</li>
</ol>
</li>
<li>MySQL Database</li>
<li>XML</li>
</ol>
[/code]
Ordered list with type “A”
Ordered list with type A will start li with A , B , C so on here is a display for this type of list.
Code for ordered list type A , <ol type=”A”> other all things are same in it, li , etc.
[code lang=”xhtml”]
<ol type="A">
<li>Pakistan</li>
<li>India</li>
<li>United States</li>
<li>Saudi Arabia</li>
</ol>
[/code]
Definition Lists
Definition lists are lists in which we can give definition about list, elements of definition lists are <dd></dd> and this list start with <dt> see code sample below.
[code lang=”xhtml”]
<dt>
Web languages
<dd>HTML</dd>
<dd>PHP</dd>
<dd>JavaScript</dd>
<dd>Ajsp.Net</dd>
</dt>
[/code]
Horizontal Ruler styling xhtml
As we give line break with <br /> in xhtml document, we give a horizontal ruler with <hr /> in xhtml document, this is the html tag which ends within itself. So we have different properties attributes in xhtml for <hr two important of them are size, and color. See code below and test your self here is how we can change <hr /> color and size.
[code lang=”xhtml”]
<hr width="100%" size="10px" color="#FF00FF" />
[/code]
Special characters in xhtml.
There are many special characters code in xhtml few of them are,
<<br /> This is lower than , displays <
><br /> This is greater than displays >
"<br /> This code is for double quotes ”
©<br /> This code is for copyright sign ©
®<br /> This code is for registered sign ®
Sub and Sup tags in xhtml
2<sub>3</sub> 23
2<sup>4</sup> 24
These lines of code will display something like this, sub is used when we want to display little word as sub of big word, sup is used when we wanna use supplement small of big word.
foo tag in XHTML
<foo>this is also context foo</foo><foo> tag actually do not occupy 100% width in document, this works like span and leave space where it finishes.
u, em and i tags in xhtml
<u>is used to Underline text</u>
<em>used to Italic the font</em>
<i>This also used to italic the font</i>
