This document discusses various HTML tags for images, links, and lists. It explains how to use the <img> tag to insert images, the <a> tag to create hyperlinks, and list tags like <ul>, <ol>, and <dl> to create unordered, ordered, and description lists. It provides examples and details the attributes of each tag for images, links, and different types of lists. The document concludes by noting the next topic will cover HTML tables.

1. COMPUTER APPLICATIONS
CLASS X (Code 165)
TOPIC:
UNIT 2: Link & List Tags
By
HIMANSHU PATHAK

2. Contents
• Introduction
• Image Tag
• Link Tag
• List Tags
– Ordered List
– Unordered List
– Description List

3. Image Tag: <img>
• HTML <img> tag is used to display image on the
web page.
• Images are not technically inserted into a web
page. images are linked to web pages.
• The <img> tag creates a holding space for the
referenced image.
• Syntax:
– <img src="" alt="" width="" height="">

4. Attributes of <img> Tag
• src: It is used to specify the path to the image.
• alt: The alt attribute defines an alternate text for
the image, if it can't be displayed.
• height: It is used to specify the height of the
image.
• width: It is used to specify the width of the
image.
• Note: To link an image to another document,
simply nest the <img> tag inside an <a> tag

5. HTML Link: Anchor tag <a>
• HTML links are hyperlinks.
• We can click on a link and jump to another
document/page.
• When we move the mouse over a link, the
mouse arrow will turn into a little hand.
• Note: A link does not have to be text. A link can
be an image or any other HTML element.
• An anchor <a> tag defines a hyperlink that links
one page to another page.

6. Cont…
• The most important attribute of the <a> element
is the href attribute, which indicates the link's
destination.
• Syntax:
– <a href="url"> link text </a>
• 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

7. Cont…
• The target attribute specifies where to open the
linked document.
• The target attribute can have one of the following
values:
• _self - Default. Opens the document in the same
window/tab as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window

8. Cont…
• Use mailto: inside the href attribute to create a
link that opens the user's email program (to let
them send a new email):
– <a href="mailto:him.786@gmail.com">Send email</a>
• Significance of Links:
– The basic function of a link is to make a reference,
from an HTML document to a resource, which can be
itself another document.
– In other words, a link defines a relationship between
two resources on the web.

9. HTML Lists
• Lists are used to group together related pieces of
information so they are clearly associated with
each other and easy to read.
• There are three list types in HTML:
– unordered list — used to group a set of related items
in no particular order
– ordered list — used to group a set of related items in
a specific order
– description list — used to display name/value pairs
such as terms and definitions

10. Unordered list: <ul> </ul>
• An unordered list starts with the “ul” tag.
• Each list item starts with the “li” tag.
• By default, Each item in the list is marked with a
bullet.
• Example:
<ul>
<li>Tea</li>
<li>Milk</li>
<li>Coffee</li>
</ul>

11. Cont…
• We can use type attribute for <ul> tag to specify
the type of bullet we like.
• By default, it is a disc. Following are the possible
options −
– <ul type = "square">
– <ul type = "disc">
– <ul type = "circle">

12. Ordered Lists: <ol> </ol>
• Ordered (numbered) lists are used to display a
list of items that should be in a specific order.
• The ordered list starts with <ol> tag and the list
items start with <li> tag.
• Example:
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>

13. Cont…
• You can use type attribute for <ol> tag to specify
the type of numbering you like.
• By default, it is a number. Following are the
possible options:
– <ol type = "1"> - Default-Case Numerals.
– <ol type = "I"> - Upper-Case Numerals.
– <ol type = "i"> - Lower-Case Numerals.
– ol type = "A"> - Upper-Case Letters.
– <ol type = "a"> - Lower-Case Letters.

14. Cont…
• Other than “type” attribute, there are 2 more
important attributes in ordered list:
• reversed: It defines that the order will be
descending.
– Syntax: <ol reversed>
• start: It defines that from which number or
alphabet the order will start.
– Syntax: <ol start="5">

15. Description Lists
• Description lists (previously called definition lists, but renamed in
HTML5) associate specific names and values within a list.
• Examples might be items in an ingredient list and their
descriptions, article authors and brief bios.
• Description lists use one set of <dl></dl> tags wrapped around
one or more groups of <dt> </dt> (name) and <dd> </dd> (value)
tags.
• Example:
<dl>
<dt>Coffee</dt>
<dd>- 500 ml</dd>
<dt>Milk</dt>
<dd>- 1 ltr </dd>
</dl>

16. Cont…
• Define a Definition List - <dl> </dl>
– Set the start and end of a definition list. All entries go
within the dl tags.
• Definition Title - <dt> </dt>
– The title of a term being defined or multiple terms
with the same definition.
• Definition Description - <dd> </dd>
– The definition of a term.

17. Summary
• Image tags
• Link and List Tags
• In the next class, we will start Unit II – HTML
Tables in detail.
•Thanks