Example : How to create Un-ordered List/Bullet menu (ul) in html page.

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ul>
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ul>
	</body>
</html>

Output :

.Apple
.Mango
.Guava
.Orange
.Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ul type="disc">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ul>
	</body>
</html>

Output :

.Apple
.Mango
.Guava
.Orange
.Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ul type="circle">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ul>
	</body>
</html>

Output :

o Apple
o Mango
o Guava
o Orange
o Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ul type="square">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ul>
	</body>
</html>

Output :

 squaresymbol Apple
 squaresymbol Mango
 squaresymbol Guava
 squaresymbol Orange
 squaresymbol Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ul type="none">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ul>
	</body>
</html>

Output :

 Apple
 Mango
 Guava
 Orange
 Grapes

Example : How to create Ordered List/menu (ol) in html page.

<!DOCTYPE html>

<html>
	<body>
		<h2>List of Fruits</h2>

		<ol>
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

1.Apple
2.Mango
3.Guava
4.Orange
5.Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="1">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

1.Apple
2.Mango
3.Guava
4.Orange
5.Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="Decimal">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

1.Apple
2.Mango
3.Guava
4.Orange
5.Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="xyz">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

1.Apple
2.Mango
3.Guava
4.Orange
5.Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="1" reversed>
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

5.Apple
4.Mango
3.Guava
2.Orange
1.Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="A">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

A.Apple
B.Mango
C.Guava
D.Orange
E.Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="a">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

a.Apple
b.Mango
c.Guava
d.Orange
e.Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="I">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

I.Apple
II.Mango
III.Guava
IV.Orange
V.Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="i">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

i.Apple
ii.Mango
iii.Guava
iv.Orange
v.Grapes

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="1" start="5">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

5.Apple
6.Mango
7.Guava
8.Orange
9.Grapes

Example : How to create both Unordered List/Bullet menu (ul) and Ordered List/menu (ol) in html page.

<!DOCTYPE html>

<html>
	<body>
		<h2>List of Books</h2>

		<ul type="Circle">
		  <li>Physics</li>
		  <li>Chemistry</li>
		  <li>Computer Science
		  	<ul>Computer Fundamentals</ul>
		  	<ul>C Prog. Lang.</ul>
		  	<ul>DBMS</ul>
		  	<ul>Computer Network</ul>		  
		  </li>
		  <li>Biology</li>
		  <li>Math</li>
		</ul>
	</body>
</html>

Output :

o Physics
o Chemistry
o Computer Science
   Computer Fundamentals
   C Prog. Lang.
   DBMS
   Computer Network
o Biology
o Math

-----------  OR  -----------
<!DOCTYPE html>

<html>
	<body>

		<h2>List of Books</h2>

		<ol type="A">
		  <li>Physics</li>
		  <li>Chemistry</li>
		  <li>Computer Science
		  	<ul>Computer Fundamentals</ul>
		  	<ul>C Prog. Lang.</ul>
		  	<ul>DBMS</ul>
		  	<ul>Computer Network</ul>		  
		  </li>
		  <li>Biology</li>
		  <li>Math</li>
		</ol>
	</body>
</html>

Output :

A.Physics
B.Chemistry
C.Computer Science
   Computer Fundamentals
   C Prog. Lang.
   DBMS
   Computer Network
D.Biology
E.Math

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Books</h2>
		<ol type="A">
		  <li>Physics</li>
		  <li>Chemistry</li>
		  <li>Computer Science
	  		  <ol>
		  		<li>Computer Fundamentals</li>
		  		<li>C Prog. Lang.</li>
		  		<li>DBMS</li>
		  		<li>Computer Network</li>
			  </ol>		  
		  </li>
		  <li>Biology</li>
		  <li>Math</li>
		</ol>
	</body>
</html>

Output :

A.Physics
B.Chemistry
C.Computer Science
   1.Computer Fundamentals
   2.C Prog. Lang.
   3.DBMS
   4.Computer Network
D.Biology
E.Math

-----------  OR  -----------
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Books</h2>
		<ol type="A">
		  <li>Physics</li>
		  <li>Chemistry</li>
		  <li>Computer Science
	  		  <ul type="circle">
		  		<li>Computer Fundamentals</li>
		  		<li>C Prog. Lang.</li>
		  		<li>DBMS</li>
		  		<li>Computer Network</li>
			  </ul>		  
		  </li>
		  <li>Biology</li>
		  <li>Math</li>
		</ol>
	</body>
</html>

Output :

A.Physics
B.Chemistry
C.Computer Science
   o Computer Fundamentals
   o C Prog. Lang.
   o DBMS
   o Computer Network
D.Biology
E.Math

-----------  OR  -----------
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>  
         <dt><b>HTML</b></dt>
         <dd>HTML stands for Hyper Text Markup Language</dd>
         <dt><b>HTTPS</b></dt>
         <dd>HTTPS stands for Secured Hyper Text Transfer   
             Protocol</dd>
      </dl>
   </body>
	
</html>

Output :

HTML
  HTML stands for Hyper Text Markup Language
HTTP
  HTTPS stands for Secured Hyper Text Transfer Protocol

NB : dl= definition list

 2,325 total views,  2 views today

Categories: HTML

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.