HTML Listing Itmes

DAV MODEL SCHOOL, DURGAPUR
J.M. SENGUPTA ROAD, B-ZONE, DURGAPUR,

PASCHIM BARDHAMAN, WEST BENGAL - 713205
WEB APPLICATIONS
HTML TAGS WITH EXAMPLE

CLASS XI(HUM)
HTML(Hypertext Mark-up
Language)

Online Classes
❑TODAY’S TOPIC
❑PRACTICAL DEMONSTRATION
❑HANDS ON
❑ ASSIGNMENT OR HOME WORK

HTML LISTS
HTML lists allow web developers to group a set of related items in
lists.
Example
Ordered List Unordered List

1. Mr. A o CLOUD
2. Mr. B o BIG DATA
3. Mr. C o AI
4. Mr. D o IOT

Unordered List
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.
The list items will be marked with bullets (small black circles) by
default:
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>AI</li>
<li>IT</li>
<li>IOT</li>
</ul>
</body>
</html>

ORDERED LIST
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
The list items will be marked with numbers by default:
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>AI</li>
<li>IT</li>
<li>IOT</li>
</ol>
</body>
</html>

HTML Description List
HTML Description Lists -HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>AI</dt>
<dd>- Branch of Computer Science to train a machine to do task in real
time</dd>
<dt>IT</dt>
<dd>- Branch of Computer Science to get the ideas how a computer do
the task in the field of Information Technology</dd>
</dl>
</body>
</html>

Description List Output

Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the
list item marker. It can have one of the following values:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Example - Disc
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;">
<li>AI</li>
<li>IT</li>
<li>IOT</li>
</ul>
</body>
</html>
OUTPUT

HOW TO RUN HTML FILE
Example – Circle
<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle;">
<li>AI</li>
<li>IT</li>
<li>IOT</li>
</ul>
</body>
</html>

Example - Square
<html>
<body>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square;">
<li>AI</li>
<li>IT</li>
<li>IOT</li>
</ul>
</body>
</html>

Nested Lists
Nested HTML Lists-- Lists can be nested (list inside list):
<html><body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul> <li>Computer</li>
<li>AI
<ul> <li>Pure Science</li>
<li>Math</li>
</ul>
</li>
<li>Bio Science</li>
</ul>
</body>
</html>

Nested List Output

HTML Ordered Lists
The HTML <ol> tag defines an ordered list. An ordered list can be numerical
or alphabetical.
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>AI</li>
<li>IT</li>
<li>IOT</li>
</ol>
</body>
</html>

OL List Output
Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman

numbers
type="i" The list items will be numbered with lowercase roman
numbers
HTML Ordered Lists
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>AI</li>
<li>IT</li>
<li>IOT</li>
</ol>
</body>
</html>
OUTPUT

ASSIGNMENT
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman

numbers
type="i" The list items will be numbered with lowercase roman
numbers
Using HTML Implement all the above and display list of items
accordingly

HTML Linking (Use of anchor tag)
The <a> tag defines a hyperlink, which is used to link from one page to
another.
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

CODE:
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.davmodeldurgapur.com">OUR SCHOOL</a>
</body>
</html>

OUTPUT

HTML Linking (Image Tag)
CODE:
<!DOCTYPE html>
<html>
<body>
<p>
An image as a link: <a href="https://www.davmodeldurgapur.com">
<img border="0" alt=“davschool" src=“sujit.jpg" width="100"
height="100">
</a>
</p>
</body>
</html>

HTML Linking (Image Tag)
OUTPUT:

HTML Linking (New Window)
CODE:
<!DOCTYPE html>
<html>
<body>
<h1>The a target attribute</h1>
<a href="https://www.davmodeldurgapur.com" target="_blank">Visit DAV
SCHOOL!</a>
<p>By settung the target attribute to "_blank", the link will open in a new
browser window or a new tab.</p>
</body>
</html>

OUTPUT:

CODE:
<!DOCTYPE html>
<html>
<body>
<h1>The a target attribute</h1>
<a href="https://www.davmodeldurgapur.com" target="_blank">Visit DAV
SCHOOL!</a>
<p>By settung the target attribute to "_blank", the link will open in a new
browser window or a new tab.</p>
</body>
</html>

HTML Linking (Link with Mail)
CODE:
<!DOCTYPE html>
<html>
<body>
<p>To create a link to opens in the user's email program (to let them send a
new email),
use mailto: inside the href attribute:</p>
<p><a href="mailto:skrsingh1@gmail.com">Send email</a></p>
</body>
</html>

HTML Linking (Link with Mail)
OUTPUT:

HTML Linking (Link with Phone)
CODE:
<!DOCTYPE html>
<html>
<body>
<p>To create a link to a Mobile number, use tel: inside the href attribute:</p>
<p><a href="tel:+919813769955">+91 9813769955</a></p>
</body>
</html>

OUTPUT:

CODE:
<!DOCTYPE html>
<html>
<body>
<p>To create a link to a Mobile number, use tel: inside the href attribute:</p>
<p><a href="tel:+919813769955">+91 9813769955</a></p>
</body>
</html>

HTML Listing Itmes

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Listing Itmes

Uploaded by

Copyright:

Available Formats

DAV MODEL SCHOOL, DURGAPUR

J.M. SENGUPTA ROAD, B-ZONE, DURGAPUR,

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

Ordered List Unordered List

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

The list items will be marked with numbers by default:

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

Ordered HTML List - The Type Attribute

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman

DAV MODEL SCHOOL, DURGAPUR

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman

DAV MODEL SCHOOL, DURGAPUR

By default, links will appear as follows in all browsers:

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

DAV MODEL SCHOOL, DURGAPUR

You might also like