Scribd
Upload
21 views

03 Lists, Links and Graphical Elements

This document discusses different types of lists, images, and hyperlinks in HTML. It describes unordered lists, ordered lists, and definition lists, and provides examples of how to code each using HTML tags like <ul>, <ol>, <li>, <dt>, and <dd>. Images can be added using the <img> tag along with a source attribute, and hyperlinks allow linking to other pages or files using <a> tags.

Uploaded by

han lazanas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

03 Lists, Links and Graphical Elements

This document discusses different types of lists, images, and hyperlinks in HTML. It describes unordered lists, ordered lists, and definition lists, and provides examples of how to code each using HTML tags like <ul>, <ol>, <li>, <dt>, and <dd>. Images can be added using the <img> tag along with a source attribute, and hyperlinks allow linking to other pages or files using <a> tags.

Uploaded by

han lazanas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

LISTS, LINKS AND

GRAPHICAL ELEMENTS
VINJEL C. LIBRADILLA
LISTS, LINKS AND
GRAPHICAL ELEMENTS
• Lists
• Images in HTML
• Hyperlinks
• Using Images on links
LISTS
• One of the tools in HTML that help
organize content
• Used within paragraphs and body
sections of the document
• Uses the <LI> tag for the list’s items.
Three (3) defined list types in
HTML
• Bulleted/Unordered Lists <UL>
• Numbered/Ordered Lists <OL>
• Definition Lists <DL>
Bulleted/Unordered Lists
• A collection of related items that have
no special order or sequence
• Opens with the <UL> tag and closes
with the </UL> tags.
Bulleted/Unordered Lists
Example 1:
<UL>
<LH> The Top Two Reasons To Write
HTML Programs: </LH>
<LI> I want to graduate </LI>
<LI> I want a job when I graduate </LI>
</UL>
Bulleted/Unordered Lists

Type Attributes of the UL


• Disc
• Square
• Circle
Bulleted/Unordered Lists
Example 2:
<UL type=“square”>
<LH> My subject lists </LH>
<LI> Algebra</LI>
<LI> Web Programming</LI>
<LI type=“circle”> Data Structure </LI>
</UL>
Bulleted/Unordered Lists
Numbered/Ordered Lists
• A type of list that gives importance to
the order or sequence of the list’s
items.
• Opens with the <OL> tag and closes
with the </OL> tags.
Numbered/Ordered Lists
Example 1:
<OL>
<LH> The Top Two Reasons To Write
HTML Programs: </LH>
<LI> I want to graduate </LI>
<LI> I want a job when I graduate </LI>
</OL>
Numbered/Ordered Lists
Bulleted/Unordered Lists
Type Attributes of the UL
Ordered Lists
Example 2:
<OL type=“A” start=5>
<LI> This is item number 5</LI>
<LI> This is number six</LI>
<LI> And so forth</LI>
</oL>
Numbered/Ordered Lists
Definition List
• A list that does not use any number, bullet
or symbol on its items.
• Uses the <DL > and </DL> tags as list
designation.
• Instead of the <LI> tag, the list uses the
<DT> and tags to denote a term, while
<DD> tags are used for term definitions.
Definition List
Example:
<DL>
<DT> HTML </DT>
<DD> Hypertext Mark-up Language</DD>
<DT> Cat </DT>
<DD> A dog’s best friend </DD>
</DL>
Definition List
Nested List
A list within a list.
Images in HTML
Images Links

Examples:
<img src=“image.gif”>
<img src=“…/image.gif”>
Hyperlinks

You might also like