How to make lists in XHTML

Web programming topics
Post Reply
User avatar
Face
Major
Major
Posts: 727
Joined: Thu Feb 18, 2010 5:06 pm
Location: SRI LANKA.KANDY.

How to make lists in XHTML

Post by Face » Tue Feb 19, 2013 8:29 pm

I am going to show how to make lists in XHTML Documents.there are 3 types of list we can use in XHTML coding

1. Unodrdered lists
2. Ordered lists
3. Definition lists

I will show you some examples and not going to explain more because of less time :P think that you can understand by exploring the examples.

Unodrdered lists

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTML Listing</title>
</head>

<p>this is the normal way we use listing in XHTML</p>

<ul>
<li>this one</li>
<li>this two</li>
<li>this three</li>
</ul>

<p>I am showing something more about listing</p>

<ul type="disc">
<li>this one</li>
<li>this two</li>
<li>this three</li>
</ul>

<ul type="circle">
<li>this one</li>
<li>this two</li>
<li>this three</li>
</ul>

<ul type="square">
<li>this one</li>
<li>this two</li>
<li>this three</li>
</ul>


</html>
you can see how this Code shows in browser. try to test these things in Different browsers.
Listing.png
Listing.png (8.66 KiB) Viewed 6504 times
Ordered List

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTML Listing</title>
</head>

<p>this is the normal way we use odered listing in XHTML</p>

<ol>
<li>this one</li>
<li>this two</li>
<li>this three</li>
</ol>

<p>Test these things by your self</p>

<ol type="1">
<li>this one</li>
<li>this two</li>
<li>this three</li>
</ol>

<ol type="a">
<li>this one</li>
<li>this two</li>
<li>this three</li>
</ol>

<ol type="A">
<li>this one</li>
<li>this two</li>
<li>this three</li>
</ol>

<ol type="I">
<li>this one</li>
<li>this two</li>
<li>this three</li>
</ol>

<ol type="i">
<li>this one</li>
<li>this two</li>
<li>this three</li>
</ol>

</html>
Listing2.png
Listing2.png (13.39 KiB) Viewed 6504 times
Last way of listing is Definition list

Definition list

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTML Listing</title>
</head>

<p>this is the normal way we use odered listing in XHTML</p>

<dl>
<dt>this one</dt>
	<dd>defeinition of one</dd>
<dt>this two</dt>
	<dd>defeinition of two</dd> 
<dt>this three</dt>
	<dd>defeinition of three</dd>    
       
</dl>

<p>Test these things by your self</p>


</html>
Listing3.png
Listing3.png (6.26 KiB) Viewed 6504 times
At last SORRY about the post with out explanation Friends..I have tight schedule with my job friends :( .that is why,Just examples :) hope you can enjoy start studying XHTML.. this is a nice hobby-
User avatar
Nipuna
Moderator
Moderator
Posts: 2729
Joined: Mon Jan 04, 2010 8:02 pm
Location: Deraniyagala,SRI LANKA

Re: How to make lists in XHTML

Post by Nipuna » Tue Feb 19, 2013 10:32 pm

Hey Man

Great to see you are back into studies Man :clap:

By the way, You may already know this, XHTML is almost identical to HTML :)
Post Reply

Return to “Web programming”