HTML provides a rich set of tools that help you organize content into formatted lists.

HTML defines three kinds of lists:

1. B U L L E T E D , or unordered lists, typically labeled with bullets or some other
symbol.

2. N U M B E R E D , or ordered lists, typically labeled with numbers.

3. D E F I N I T I O N lists without any number or symbol in front of each item.

 UNORDERED LISTS
• An unordered list in HTML is a collection of related items that have no special order or
sequence.
• The most common unordered list you'll find on the Web is a collection of hyperlinks to
other documents.
• The bulleted list is called an unordered list.
• It opens with the <UL> tag and closes with the </UL> tag.
• It looks just like an ordered list, except that bullets appear at each <LI> tag instead of
numbers.
Example
<P> The Top Three Reasons to Write HTML Programs:
<UL>
<LI> I want to pass
<LI> I want to graduate
<LI> I want a job when I graduate
</UL>
 H O W T O C R E AT E A N U N O R D E R E D L I S T ?

1. Locate the part of your HTML document where you want to insert a list.
Begin the unordered list by typing <UL>.
2. Create a heading for your list. This is an optional brief description of what
your list contains.
3. To create a list header, type <LH>, followed by a brief summary of the list
contents. Then type </LH> to close the list heading tag.

For example, to create a list heading for a subject list, you would type:

<UL>
<LH>My Subjects List</LH>
 H O W T O C R E AT E A N U N O R D E R E D L I S T ?
4. To create the first item in your list, type <LI> then type the text of the item itself.

<UL>
<LH> My Subjects List </LH>
<LI> Algebra
<LI> Web Programming
<LI> Data Structure

5. Continue typing <LI> followed by text for each item in your list. Press <ENTER> after each
item.
6. Finish the unordered list by typing </UL>.
<UL>
<LH> My Subjects List </LH>
<LI> Algebra
<LI> Web Programming
<LI> Data Structure
</UL>
 UNORDERED LISTS

• There are browsers that allows you to explicitly choose which type of bullet to
use for any level by using the TYPE attribute.
• You have the choice of three bullet types: Disc
• (default), Circle, Square, like:
<UL TYPE="disc">,
<UL TYPE="circle">, or
<UL TYPE="square"> instead of <UL>.
Example
<UL TYPE=“square”>
<LH>My Subjects List</LH>
<LI>Algebra
<LI>Web Programming
<LI TYPE=“disc”>Data Structure
</UL>
 ORDERED LISTS

• It is used when the sequence of the list items is important.

• Items in this list are numbered automatically by the browser.
• Ordered lists also called as numbered lists are surrounded by the
<OL>...</OL> tags (OL stands for Ordered List)
• Each item within the list begins with the <LI> (List Item) tag.

Example

<P>The Top Three Reasons to Write HTML Programs:

<OL>
<LI> I want to pass
<LI> I want to graduate
<LI> I want a job when I graduate
</OL>
 H O W T O C R E AT E A N O R D E R E D L I S T ?

1. Locate the place in your document where you'd like to begin the list and type
<OL>.
2. For an optional heading of an ordered list, type <LH> followed by the
heading and then close the heading tag by typing </LH>.

For example, to create a list heading for a subjects list, you would type:
<OL>
<LH> My Subjects List </LH>
 H O W T O C R E AT E A N O R D E R E D L I S T ?
3. To create the first item in your list, type <LI> then type the text of the item
itself.
<OL>
<LH> My Subjects List </LH>
<LI> Algebra
<LI> Web Programming
<LI> Data Structure

4. Continue typing <LI> followed by text for each item in your list.
5. Finish the ordered list by typing </OL>.
<OL>
<LH> My Subjects List </LH>
<LI> Algebra
<LI> Web Programming
<LI> Data Structure
</OL>
 ORDERED LISTS

START Attribute
This attribute uses the <OL> tag to let you change a beginning value.

<OL start=5>
<LI> This is item number 5.
<LI> This is number six!
<LI> And so forth... </OL>
 ORDERED LISTS

The TYPE attribute can also be used with the <OL> tag to change the numbering
style itself.

Below are the different numbering style to choose from.

<OL type=“A” start=5>

<LI> This is item number 5.
<LI> This is number six!
<LI> And so forth... </OL>
 DEFINITION LISTS
• A list that is indented without any number or symbol in front of each item.
• The list of terms and their meanings is called a definition list.
• It starts with the <DL> tag and ends with </DL>.
• The <DT> tag goes in front of each term to be defined, with a <DD> tag in
front of each definition.
• Line breaks and indentation appear automatically.

<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> Cat </DT>
<DD> A dog's best friend! </DD>
</DL>
 H O W T O C R E AT E A D E F I N I T I O N L I S T ?
1. Type <DL> at the point where you'd like the list to begin.
2. For a definition term, type <DT> followed by text describing the element being defined.
<DL>
<DT> Internet
3. For the definition, type <DD>, followed by the text of the definition.
<DL>
<DT>Internet
<DD>It is a worldwide collection of interconnected computers whose users can
communicate with each other and share information.

Internet
It is a worldwide collection of interconnected computers whose
users can communicate with each other and
share information.
 H O W T O C R E AT E A D E F I N I T I O N L I S T ?

4. Create a new definition term, if necessary. As with ordered and unordered lists,
there are no closing tags for list items.
5. Type </DL> to close your definition list.

The final code looks like this:

<DL>
<DT> Internet
<DD> It is a worldwide collection of
interconnected computers whose users
can communicate with each other and
share information.
<DT> World Wide Web
<DD> It is the part of the Internet
where computers communicate with each
other using a computer-network
protocol called HTTP.
</DL>
 NESTING LIST
This creates a list within a list - done by inserting a UL, OL, etc., inside a list item (LI).

<UL TYPE="SQUARE">
<LI> List item... </LI>
<LI> List item... </LI>
<OL TYPE="i" START="3">
<LI> List item 1... </LI>
<LI> List item 2... </LI>
</OL>
</LI>
<LI> List item... </LI>
</UL>
 W E B PA G E I M A G E F O R M AT S

• Images can be inserted as inline images or external images.

• Inline images appear on a Web page along with text and links, and are
automatically loaded when the page itself is retrieved.

• External images are stored separate from the Web page and are loaded only on
demand, for example, as the result of a link.

• HTML standard does not prescribe an official format for images.

• Popular browsers specifically accommodate two most common image file

formats in use on the World Wide Web - .GIF and .JPG files.
 G R A P H I C S I N T E R C H A N G E F O R M AT

• GIF uses a maximum of 256 colors, and uses combinations of these to create
colors beyond that number.
• Encoding is cross platform
• Uses special compression technology
• GIF images come in two different versions and have some extra functionality
that JPEGs do not.
• GIF images in GIF 87 or GIF 89a format.
• GIF 89a is newer and has the following features that GIF 87 and JPEG
files do not.
• Interlacing: an interlaced GIF will allow the browser to display the image as it loads,
getting gradually crisper and clearer until it is finished.
• Interlaced GIFs have slightly larger file sizes than non-interlaced GIFs.
 G R A P H I C S I N T E R C H A N G E F O R M AT

• Transparency: with GIF 89a format images, it allows the background color or
image to show through it by setting one color to be transparent.
• Transparency is most commonly used to make the rectangular background
canvas of an image invisible.
• Animated GIFs: GIF 89a images can also be animated using special software.
• Animated GIF images are simply a number of GIF images saved into a single
file and looped.
• The .gif extension is used for GIF files.
• GIF-encoded image is not always appropriate, particularly for photorealistic
pictures since it supports only limited number of colors.
 JOINT PHOTOGRAPHIC
E X P E RT S G R O U P F O R M AT

• JPEG is a standards body that developed what is now known as the JPEG image-
encoding format.
• Like GIFs, JPEG images are platform independent and specially compressed for
high-speed transfer via digital communication technologies.
• JPEG is a good format for photographs because JPEG files can contain millions
of colors.
• JPEG images does not support transparency or interlacing images, but it allows
you to specify the degree of file compression to create a balance between image
quality and file size.
 LIMITED SUPPORT OR
N O N - S U P P O RT E D I M A G E F O R M AT S

• PNG: Portable Network Graphics, is good for combinations of text and graphics
within one image.
• PNG permits true color images, variable transparency, platform-independent
display, and a fast 2D interlacing scheme.
• Currently only supported by Internet Explorer.

• BMP: MS Windows BitMaP

• TIFF: Tagged Image File Format
• PCX: Originally developed by ZSOFT for its PC Paintbrush program, PCX is a
graphics file format for graphics programs running on PCs.
 LIMITED SUPPORT OR
N O N - S U P P O RT E D I M A G E F O R M AT S
• Inline images are indicated in HTML using the <IMG> tag and has no closing
tag required.
• It has different attributes that allow different ways of presenting and handling
inline images.
• The most important attribute of the <IMG> tag is SRC, which indicates the
filename or URL of the image you want to include, in quotes.

Example:
• For a GIF file named image.gif in the same directory as this file, use
<IMG SRC="image.gif">
• For an image file one directory up from the current directory, use
<IMG SRC="../image.gif">
 < I M G > AT T R I B U T E S

• Alternate Text (ALT): a text field that describes an image or acts as a label.
• It is displayed when people turn the graphics off in their browsers, or when they position the
cursor over a graphic image.

Example:
<IMG SRC="myimage.gif" ALT="[a picture of a cat]">

• Alignment (ALIGN): allows you to align the image on your page.

• Options include Bottom, Middle, Top, Left, Right, TextTop, ABSMiddle, Baseline, and
ABSBottom.
Example:
<IMG src="myimage.gif“ align=“left”>
<IMG src="myimage.gif“ align=“right”>
<IMG src="myimage.gif“ align=“top”>
<IMG src="myimage.gif“ align=“bottom”>
<IMG src="myimage.gif“ align=“center”>
 < I M G > AT T R I B U T E S

• WIDTH: the width of the image in pixels.

• HEIGHT: the height of the image in pixels.
• BORDER: for a border around the image, specified in pixels.
• HSPACE: for Horizontal Space on both sides of the image specified in pixels.
• A setting of 5 will put five pixels of invisible space on both sides of the
image.
• VSPACE: for Vertical Space on the top and bottom of the image specified in
pixels.
• A setting of 5 will put five pixels of invisible space above and below the
image.
 ADDING AN IMAGE TO HTML DOCUMENT

1. Start with <IMG>, note that there is no closing </IMG> tag.

2. Now you need to specify the URL of the image to load by placing the SRC
(source) attribute within the <IMG> tag.

3. To link to images that are not in the same directory as the HTML document, use
relative URLs to locate them.

4. To specify the alternate text, type ALT=, followed by the text in quotes.

Example:
<IMG src=“images/logo.gif”alt=“Company logo here!”>
 EXERCISE

Write the HTML code of the

sample output of an HTML
document below. The images are
located in the same location as
the HTML
document and are named as
follows, “img01.jpg”,
“img02.jpg” and “img03.jpg.”
Provide alternative text for each
image.