Lists, Formatting, and Lists, Formatting, and ImagesImages

Lists, Formatting, and Lists, Formatting, and ImagesImages

Robert BenardRobert BenardMott Community CollegeMott Community College

Lists• Are a way for us to display information

and get things done.• We use checklists when we go to the

grocery store.• The index of your text• Menus, definitions, outlines• A list is a very important part of our

daily lives, as well a very important to web weaving

On the WEBMany sites that we visit on the web have

a list of options.– Left hand edge– Both left and right edges– Can be placed at the top or bottom

If these lists are considered site navigation tools.

Can we make a list without tags?

We can try:• What about the white space we can

create with the space bar?• Will the alignment be the same on

– Explorer?– Netscape?– AOL?

• OK …. So how do we create lists with tags?

There remain only three types of lists

<OL> <UL> and <DL><OL> </OL>

Ordered lists provide us the opportunity to create numbered lists

<UL> </UL>Unordered lists generate bulleted lists

<DL> </DL>Descriptive lists for all practical purposes

provides us with a list without numbers or bullets!

Taking a closer look at <OL>The structure for <OL> and <UL> are quite similar

<UL><LI>Asia</LI><LI>Europe</LI><LI>Australia</LI><LI>Africa</LI></UL>

•Asia•Europe•Australia•Africa

Inserting Sub ListsYou can nest lists:<OL><LI>Midwest</LI><OL><LI>Michigan</LI><LI>Ohio</LI></OL><LI>East</LI><OL><LI>New York</LI><LI>Delaware</LI></OL></OL>

Results with:1. Midwest

1. Michigan2. Ohio

2. East1. New York2. Delaware

AtributesAn ordered list with letters or numerals

can be created:

<OL type=“A”><OL type=“a”><OL type=“I”><OL type=“i”><OL type=“1”>

Shapes

<UL type=“DISK”><UL type=“CIRLCE”><UL type=“SQUARE”>

The Font Property

Font-styleFont-weightFont-sizeFont-family

Things we can do to the body

<FONT color=“blue”> or <FONT color=“red”>

The CORRECT methodology is to use actual 6 digit hexadecimal numbers to represent colors. <FONT color=“#0000FF”>

You can use a development tool to get these or there are many resources on the web.

Images

Adding images to web pages is very simple.

<img src=“imagename.jpg”>

This points to an image in the same folder as your page.