Create orderd unordered definition List in HTML5 ~ Online Quiz in IT

List in HTML5 (Ordered or Numbered/Unordered List/Definition List)

Introduction to Ordered List

Attributes of <ol> tag

1.type attribute with example

2.start attribute with example

3.reversed attribute with example

Introduction to Unordered List

1.type attribute

Introduction to Definition List

Nested List

Ordered list or numbered list

When a text matter contains a list in a sequence, tag for ordered list is used. Ordered and Unordered are the two types of lists.

The ordered list is numbered. The ordered or numbered lists are required when a sequence is important. An ordered list can be NUMERICAL or ALPHABETICAL.

The <ol> tag defines an ordered list. The tag for the ordered list is <ol>..</ol>.

The list item within a list enclosed in <li>..</li> tag.

Attributes of <ol> tag-

1.type-

Using the type attribute the list items can be numbered as 1,2,3,A,B,C,i,ii,iii,I,II,III.

The type attribute is specified as follows-

<ol type=”1”> which results the list in 1,2,3 sequence.In this case type attribute is 1.Which is also default value.

The effect of different values as follows-

1.<ol type=”1”> - list form is 1,2,3….

2.<ol type=”A”>- list form is A,B,C uppercase letters.

3.<ol type=”a”> - list from is a,b,c lowercase letters.

4.<ol type=”I”> -list from is I,II,III uppercase roman numerals.

5.<ol type=”i”>- list from is i,ii,iii lowercase roman numerals.

Example-1.

<!DOCTYPE html>

<h3>List of Subjects</h3>

<ol>

<li>Marathi</li>

<li>Hindi</li>

</ol>

</body></html>

Output-

List of Subjects

1.IT

2.Marathi

3.Hindi

Example 2.

<!DOCTYPE html>

<h3>List of Subjects</h3>

<ol>

<li>Marathi</li>

<li>Hindi</li>

</ol>

<h3>List of Subjects In Uppercase</h3>

<li>Marathi</li>

<li>Hindi</li>

</ol>

<h3>List of Subjects In Lowercase</h3>

<li>Marathi</li>

<li>Hindi</li>

</ol></body></html>

Output-

List of Subjects

1.IT

2.Marathi

3.Hindi

List of Subjects In Uppercase

A.IT

B.Marathi

C.Hindi

List of Subjects In Lowercase

a.IT

b.Marathi

c.Hindi

2.start attribute-

It is used to specify from which number the list should begin. It also has default value as 1.

The tag <ol start=11> will start the list to begin from 11. In case of <ol type=”A” start=7> the list begins from G. Example.1.

<!DOCTYPE html>

<h3>List of Subjects</h3>

<ol>

<li>Marathi</li>

<li>Hindi</li>

</ol>

<h3>List of Subjects Starts form 3</h3>

<li>Marathi</li>

<li>Hindi</li>

</ol>

<h3>List of Subjects Starts from G</h3>

<li>Marathi</li>

<li>Hindi</li>

</ol>

</body></html>

Output-

List of Subjects

1.IT

2.Marathi

3.Hindi

List of Subjects In Uppercase

3.IT

4.Marathi

5.Hindi

List of Subjects In Lowercase

G.IT

H.Marathi

I.Hindi

3. reversed attribute-

This attribute specifies that the items of the list are specified in reverse order.

Example 2

<!DOCTYPE html>

<html>

<body>

<h3>List of Topics in reverse sequence</h3>

<li>BASICS of IT</li>

<li>PostgreSQL</li>

</ol>

</body></html>

Output-

List of Topics in reverse sequence

BASICS of IT
HTML 5
PostgreSQL

Unordered list or bulleted list

The unordered list is similar to the ordered list. The difference between them is that instead of the number or alphabet sequence is used in ordered list, bullets and symbols are used.

An unordered list created using the <ul> tag and each list item starts with the <li> tag.

The list items in unordered lists are marked with bullets (small black circles),by default.

The text for unordered list is enclosed within <ul>..</ul> tags.

The list items are enclosed in <li>..</li> tags.

Attributes of <ul> TAG

1.type attribute-

To change the type of bullets in the list item in the browser window. The type attribute can take value circle,disc,square and none.

Values-

1.<ul style=”list-style-type:disc”> - Sets the list item marker to a bullet (by default).

2.<ul style="list-style-type:circle"> - Sets the list item marker to a circle.

3.<ul style="list-style-type:square"> - Sets the list item marker to a square.

4.<ul style="list-style-type:none"> - The list items will not be marked.

Example 1

<!DOCTYPE html>

<html>

<head>

<title>EXAMPLE of HTML Unordered List</title>

</head>

<body>

<h3>HTML Unordered List</h3>

<ul>

<li>BASICS of IT</li>

<li>PostgreSQL</li>

</ul></body></html>

Output-

HTML Unordered List

BASICS of IT
HTML 5
PostgreSQL

Example 2.

<!DOCTYPE html>

<html>

<head>

<title>EXAMPLE of HTML Unordered List</title>

</head>

<body>

<h3>HTML Unordered List with Circle</h3>

<li>BASICS of IT</li>

<li>PostgreSQL</li>

</ul>

<h3>HTML Unordered List with Square</h3>

<li>BASICS of IT</li>

<li>PostgreSQL</li>

</ul>

<h3>HTML Unordered List with None</h3>

<li>BASICS of IT</li>

<li>PostgreSQL</li>

</ul>

</body></html>

Output-

HTML Unordered List with Circle

BASICS of IT
HTML 5
PostgreSQL

HTML Unordered List with Square

BASICS of IT
HTML 5
PostgreSQL

HTML Unordered List with None

BASICS of IT
HTML 5
PostgreSQL

Definition list :

To define A definition list <dl> tag is used. You can create items in definition list with the <dt> and <dd> tags.

The <dt> tag is used to define the term.

where as the <dd> tag is used to define the term’s definition.

Example-

<!DOCTYPE html>

<html>

<head>

<title>definition List</title></head>

<body>

<h3>Example of HTML definition list</h3>

<dl>

<dd>The part of the internet that contains websites and web pages </dd>

<dd>A markup language for creating web pages</dd>

<dd>A technology to make HTML look better</dd>

</dl>

</body></html>

Output-

Example of HTML definition list

Web: The part of the internet that contains websites and web pages
HTML: A markup language for creating web pages
CSS: A technology to make HTML look better

Nested list :

List within another list either order list or unordered list is called nested list.

Example 1

<!DOCTYPE html>

<html >

<head>

<title>Example of HTML nested list</title>

</head>

<body>

<h3>HTML Nested List</h3>

<ol>

<li>Introduction to IT</li>

<li>Introduction to DBMS</li>

<li>Definition of DBMS</li>

<li>Applications of DBMS</li>

<li>Advantages of DBMS</li>

</ul>

<li>Postgresql</li>

</ol></body></html>

Output-

HTML Nested List

Introduction to IT
Introduction to DBMS

Definition of DBMS
Applications of DBMS
Advantages of DBMS

Postgresql

Example 2

<!DOCTYPE html>

<title>nested list</title></head>

<body>

<h3> Multi-level list Nested List</h3>

<ul>

<li>Daily Computing</li>

<li>Web design</li>

<ol>

<li>hyperlink</li>

<li>Inserting Images</li>

</ol>

<li>JavaScript</li>

<li>Conditional Structure</li>

<li>If Statement</li>

<li>If else Statement</li>

<li>Case Statement</li>

</ul>

<li>loop Statement</li>

</ul>

</body>

</html>

Output-

Multi-level list Nested List

Daily Computing
Web design

html 5
hyperlink
Inserting Images

JavaScript

Conditional Structure

If Statement
If else Statement
Case Statement

loop Statement

About itquizcontent.blogspot.com

Visit here and learn new trends and technologies everything.

Online Quiz in IT