NEELDEEP ACADEMY JAUNPUR
Class 10 (PDF Notes)
Chapter-4 (Using Lists and Images in HTML)
Lists in HTML-
A list is a record of short pieces of related information or used to display the data or any
information on web pages in the ordered or unordered form.
For example, to purchase the items, we need to prepare a list that can either be ordered
or unordered list which helps us to organize the data & easy to find the item.
Types of Lists in HTML
HTML support three types of lists basically. They are:
Ordered (Numbered) Lists – A list using numbering to display listing in a specific
order.
Unordered (Bulleted) Lists – A list with symbols or bullets with no any special orders
or sequence.
Description (Definition) Lists – A list to write definitions or terminologies in multiple
terms.
1. Ordered (Numbered) Lists
To generate order lists in HTML following tags are used:
<OL> tag- The ordered lists always starts with <ol> and ends with </ol>.
<LI> tag- LI tag specifies list items and written between <ol> and </ol>. For a
number of the list items, also starts with <li> and closed with </li>.
Example:
<html>
<head>
</head>
<body>
<h1>Subjects we offer:</h1>
<ol>
<li>Computer Science</li>
<li>Informatics Practices</li>
<li>Information Technology</li>
<li>Computer Application</li>
<li>Artificial Intelligence</li>
</ol>
</body>
</html>
Output-
Subjects we offer:
1. Computer Science
2. Informatics Practices
3. Information Technology
4. Computer Application
5. Artificial Intelligence
2. Unordered (Unnumbered) List
To generate unorder lists in HTML following tags are used:
<UL> tag- The unordered lists always starts with <ul> and ends with </ul>.
<LI> tag- LI tag specifies list items and written between <ul> and </ul>. For a
unnumbered of the list items, also starts with <li> and closed with </li>.
Example:
<html>
<head>
</head>
<body>
<h1>Subjects we offer:</h1>
<ul type="circle">
<li>Computer Science</li>
<li>Informatics Practices</li>
<li>Information Technology</li>
<li>Computer Applications</li>
<li>Artificial Intelligence</li>
</ul>
</body>
</html>
Output-
Subjects we offer:
o Computer Science
o Informatics Practices
o Information Technology
o Computer Applications
o Artificial Intelligence
Attributes are used in <OL> & <UL> tags:
TAGS ATTRIBUTES DESCRIPTION SYNTAX
You can change the number
Type style for ordered list using Type <OL type="value”>
<OL> attribute.
(Ordered
It is the value of starting point
List)
Start for the list. <OL start=”iii”>
<UL> You can change the style for
(Unordered Type unordered list using Type <UL type=”value”>
List) attribute.
There are different types of values are used in ‘Type’ attribute by using OL and
UL tags-
Types Values
A,B,C Uppercase letters
a,b,c Lowercase letters
<OL type=”values”> I,II,III Uppercase Roman numerals
i,ii,iii Lowercase Roman numerals
1,2,3 Sequence of numbers (default)
Disc ● A solid circle (default)
<UL type=“values”> Circle ○ A non-solid circle
Square ■ A solid square
3. Description Lists
This list is used to write definitions or terminologies by using multiple terms on HTML web
page. To use this type of list, the following tags are used:
<DL> tag (Description List)- It is used to start and end the description list.
<DT> tag (Defining the terms)- It is used to write the term or word for the definition.
<DD> tag (Describing in details)- It is used to write the data or descriptive
text in details for the term.
Example:
<html> <dt>JavaScript</dt>
<body> <dd>is a scripting language</dd>
<dl> <dt>SQL</dt>
<dt>HTML</dt> <dd>is a query language</dd>
<dd>is a markup language</dd> </dl>
<dt>Java</dt> </body>
<dd>is a programming language and </html>
Platform</dd>
Output:
HTML
is a markup language
Java
is a programming language and Platform
JavaScript
is a scripting language
SQL
is a query language
Nested list-
A nested list is a list inside another list, used to display the data or any information in web
pages in the ordered or unordered form.
These tags are used in Nested listing.
<ul> Tag
<ol> Tag
<li> Tag
Example:
<html>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<ol>
<li>Cold Coffee</li>
<li>Hot Coffee</li>
</ol>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<ul>
<li>Milk</li>
</ul>
</body>
</html>
Output:
A Nested List
Lists can be nested (list inside list):
Coffee
1. Cold Coffee
2. Hot Coffee
Tea
1. Black tea
2. Green tea
Milk
Inserting Images in Html-
The <img> tag is used to insert an image in a Web page. With the help of image tag you
can display graphics, drawings, paintings, charts, maps or any photograph on a web page.
HTML can be used to insert images in the following formats:
GIF (Graphic Interchange Format)
JPG or JPEG 0oint Photographic Experts Group)
PNG (Portable Network Graphics)
Example:
<html>
<body>
<img src="pic_trulli.jpg" width="500" height="333">
</body>
</html>
Output:
Syntax-
<img src = "image URL" [various attributes]>
Tags Attributes Description Syntax
It takes URL of an image
file as value, which points to
SRC <img src=”URL”>
the direct location of an
image to be displayed.
This attribute is used to
provide alternate text when
ALT <img src=”URL” alt=”xyz”>
an image on a Web page
cannot be displayed.
Top
This attribute is used to set
Middle
the position of an image in <img src=”URL”
ALIGN Bottom
a Web page according to align=”left/center/right”>
Left
the user’s requirements.
Right
<IMG>
The width and height
<img src=”URL”
attributes tell the dimension
Height & Width height=”value in pixel”
of an image to the browser
width=”value in pixel”>
in pixels.
The border attribute
specifies the width of the
<img src=”URL”
Border border around an image. By
border=”value in pixel”>
default, an image has no
border in HTML.
horizontal white space (the
Horizontally
left and right sides) <img src="example.jpg"
Space
vertical white space (the top vspace="5" hspace="5">
Vertically
and bottom sides)
Created by
Prakhar Srivastava
