Web Development 1

Lists

Ø HTML provides a rich set of tools that help

you organize content into formatted lists.

Ø HTML defines three kinds of lists:

v Bulleted, or unordered lists, typically
labeled with bullets or some other
symbol.

v Numbered, or ordered lists, typically

labeled with numbers.

v Definition lists are indented lists

without any number or symbol in front
of each item.

Lists and Graphical Elements

Page 1 of 24
 Web Development 1

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
</UL>. 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 graduate
</UL>

Lists and Graphical Elements

Page 2 of 24
 Web Development 1

How to Create an
Unordered Lists

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. 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

subjects list, you would type

<UL>
<LH>My Subjects List</LH>.

Lists and Graphical Elements

Page 3 of 24
 Web Development 1

How to Create an
Unordered Lists
3. 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 1
<LI>Data Structure

4. Continue typing <LI> followed by text for

each item in your list. Press Enter after
each item.

5. Finish the unordered list by typing </UL>.

<UL>
<LH>My Subjects List</LH>
<LI>Algebra
<LI>Web Programming 1
<LI>Data Structure
</UL>
Lists and Graphical Elements
Page 4 of 24
 Web Development 1

Changing Item Bullets in

an Unordered Lists

Ø There are browsers like Netscape and

Internet Explorer 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 1
<LI>Data Structure
</UL>

Lists and Graphical Elements

Page 5 of 24
 Web Development 1

Ordered Lists

Ø Ordered lists are used when the sequence

of the list items is important. Items in this
list are numbered automatically by the
browser.

Ø Ordered lists also called numbered lists are

surrounded by the <OL>...</OL> tags (OL
stands for Ordered List), and 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 graduate
</OL>

Lists and Graphical Elements

Page 6 of 24
 Web Development 1

How to Create an
Ordered Lists

1. To create an ordered list, locate the place

in your document where you'd like to begin
the list and type <OL>.

2. To create an optional heading for the

ordered list, type <LH> followed by the
heading. 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>.

Lists and Graphical Elements

Page 7 of 24
 Web Development 1

How to Create an
Ordered Lists
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 1
<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 1
<LI>Data Structure
</OL>

Lists and Graphical Elements

Page 8 of 24
 Web Development 1

The Start Attribute

START Attribute
Ø The start attribute is used by Netscape
and Internet Explorer with the <OL> tag
to let you change that beginning value.
To start numbering a list at 5, for
example:

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

Lists and Graphical Elements

Page 9 of 24
 Web Development 1

Changing the Numbering

Style in Ordered Lists
Ø Some browsers like Netscape and Internet
Explorer, also let you use a type attribute with
the <OL> tag to change the numbering style
itself.

Ø You have the choice of setting the TYPE

Attribute to one of five numbering styles.

TYPE Numbering Style

1 Arabic numbers 1, 2, 3,..
a Lower alpha a, b, c,..
A Upper alpha A, B, C,..
i Lower roman i, ii, iii,.
I Upper roman I, II, III,..

Example:

<OL type=“A” start=5 >

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

Lists and Graphical Elements

Page 10 of 24
 Web Development 1

Definition Lists

Ø Definition lists are indented lists 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.

Example:
<DL>
<DT>HTML</DT>
<DD>Hyper Text Markup
Language</DD>
<DT>Cat</DT>
<DD>A dog's best friend!</DD>
</DL>

Lists and Graphical Elements

Page 11 of 24
 Web Development 1

How to Create
Definition Lists
1. To create a definition list in your HTML
document, type <DL> at the point where
you'd like the list to begin.
2. To create a definition term, type <DT>
followed by text describing the element
being defined. For example:

<DL>
<DT>Internet

3. To create the definition, type <DD>,

followed by the text of the definition. For
example, to create a definition for the term
in the previous step, you would type

<DL>
<DT>Internet
<DD>It is a worldwide
collection of interconnected
computers whose users can
communicate with each other
and share information.
Lists and Graphical Elements
Page 12 of 24
 Web Development 1

How to Create
Definition Lists
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>

Lists and Graphical Elements

Page 13 of 24
 Web Development 1

Nesting List

Ø What happens if you put a list inside

another list?

Ø Creating a list within a list is done by

inserting a UL, OL, etc., inside a list item
(LI).

For example:

<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>

Lists and Graphical Elements

Page 14 of 24
 Web Development 1

Understanding Image
Formats

Ø Images for Web pages fall into two general

classes: inline images and external images.

v Inline images appear on a Web page along

with text and links, and are automatically
loaded when the page itself is retrieved.

v 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. However, the
popular browsers specifically accommodate
two most common image file formats in use
on the World Wide Web are GIF (.GIF) and
JPEG (.JPG) files.

Lists and Graphical Elements

Page 15 of 24
 Web Development 1

Understanding GIF Format

Ø The Graphics Interchange Format (GIF)

uses a maximum of 256 colors, and uses
combinations of these to create colors
beyond that number.

v Encoding is cross platform

v Uses special compression technology

Ø GIF images come in two different versions

and have some extra functionality that
JPEGs do not. You can save 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:

v 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.

Lists and Graphical Elements

Page 16 of 24
 Web Development 1

Understanding GIF Format

v 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.

v 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.

Lists and Graphical Elements

Page 17 of 24
 Web Development 1

Understanding JPEG
Format

Ø The Joint Photographic Experts Group

(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.

Lists and Graphical Elements

Page 18 of 24
 Web Development 1

Limited Support or Non-

Supported Image Formats

Ø 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.

Lists and Graphical Elements

Page 19 of 24
 Web Development 1

Inserting Images

Ø Inline images are indicated in HTML using

the <IMG> tag. The <IMG> tag, like the
<HR> and <BR> tags, has no closing tag.
It does, however, have many different
attributes that allow different ways of
presenting and handling inline images.

Ø The most important attribute to the <IMG>

tag is SRC. The SRC attribute indicates the
filename or URL of the image you want to
include, in quotes. For example:

v For a GIF file named image.gif in the

same directory as this file, you can use
the following tag:
<IMG SRC="image.gif">

v For an image file one directory up from

the current directory, use
<IMG SRC="../image.gif">

Lists and Graphical Elements

Page 20 of 24
 Web Development 1

<IMG> Attributes

Ø Alternate Text (ALT): This is 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): This allows you to

align the image on your page. The options
include Bottom, Middle, Top, Left, Right,
TextTop, ABSMiddle, Baseline, and
ABSBottom.
Examples:
<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”>

Lists and Graphical Elements

Page 21 of 24
 Web Development 1

Other <IMG> Attributes

Ø Width (WIDTH): is the width of the image

in pixels.

Ø Height (HEIGHT): is the height of the

image in pixels.

Ø Border (BORDER): is for a border around

the image, specified in pixels.

Ø HSPACE: is 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: is 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.

Lists and Graphical Elements

Page 22 of 24
 Web Development 1

How to Add an Image to

HTML Document
1. Locate the place in your document where
you'd like to insert the image. To insert an
image into your HTML document, type
<IMG>. 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.

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

Lists and Graphical Elements

Page 23 of 24
 Web Development 1

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.

My Picture Gallery

img01

img02

img03

Lists and Graphical Elements

Page 24 of 24