IMAGES AND

LISTS
By: Sir Eugene N. Bayona
 images
- A picture can say a thousand words, and great images help make
the difference between an average-looking site and a really
engaging one

Adding Images
To add an image into the page you need to use <img> element. this is
an empty element(which means there is no closing tag). it must
carry the following two attributes:

Src alt title

IMAGES AND
LISTS
Src
-tHIS TELLS THE BROWSER WHERE IT CAN FIND IMAGE FILE.

alt
-THIS PROVIDES A TEXT DESCRIPTION OF THE IMAGE WHICH
DESCRIBES THE IMAGE IF YOU CANNOT SEE IT.

title
- MOST BROWSER WILL DISPLAY THE CONTENT OF THIS ATTRIBUTE
IN A TOOLTIP.

IMAGES AND
LISTS
Introduction of
HTML
 height & width of images
- images often take longer to load than html code that makes
up the rest of page.

height width

IMAGES AND
LISTS
ORDERED
ORDERED LISTS
LISTS

-
- Are
Are lists
lists where
where each
each item
item in
in the
the list
list is
is numbered.
numbered. The
The ordered
ordered list
list is
is created
created

with
with <ol>
<ol> element.
element. Each
Each item
item in
in the
the list
list is
is placed
placed between
between an
an opening
opening <li>
<li>

tag
tag and
and a
a closing
closing </li>
</li> tag.
tag.
UNORDERED
UNORDERED LISTS
LISTS

-
- Are
Are lists
lists that
that begin
begin with
with a
a bullet
bullet point.
point. The
The unordered
unordered list
list created
created with
with

<ul>
<ul> element.
element. Each
Each item
item in
in the
the list
list is
is placed
placed between
between an
an opening
opening <li>
<li> tag
tag

and
and a
a closing
closing </li>
</li> tag.
tag.
DEFINITION
DEFINITION LISTS
LISTS

-
- Are
Are made
made up
up of
of a
a set
set of
of terms
terms along
along with
with definitions
definitions for
for each
each of
of those
those terms.
terms.

The
The definition
definition list
list created
created with
with <dl>
<dl> element
element and
and usually
usually consists
consists of
of a
a series
series

of
of terms
terms and
and their
their definitions.
definitions. Inside
Inside the
the <dl>
<dl> element
element you
you will
will usually
usually see
see

pairs
pairs of
of <dt>
<dt> and
and <dd>
<dd> elements.
elements.

<dt>
<dt> is
is used
used to
to contain
contain the
the term
term being
being defined
defined (The
(The definition
definition term)
term)

<dd>
<dd> is
is used
used to
to contain
contain the
the definition.
definition.
NESTED
NESTED LISTS
LISTS

-
- You
You can
can put
put a
a second
second list
list inside
inside an
an </li>
</li> element
element to
to create
create a
a sublist
sublist or
or

nested
nested list.
list.
 ASYNCHRONOUS TIME
PETA #2