Lists Images and Tables

Lists

If you have a number of items to place in a list then you can use either plain, numbered, or bulleted lists as well as lists of definitions. The lists are formed by a code to specify the list type -ordered or unordered and a secondary code to specify the lists items.

Primary code tags are:

<OL></OL>-- ordered list
<UL></UL>--unordered list i.e. bulleted
<DL></DL>---definition lists

Secondary Tags

<LI></LI>
<LI></LI>
<DD></DD>
<DT></DT>

Unordered list Example:

This is an unordered list-item 1
This is an unordered list-item 2
This is an unordered list-item 3

This is the HTML to produce the list above. My notes are in red

<UL> <---------- Primary Tag open

Secondary Tag open Secondary tag close

<LI>This is an unordered list-item 1</LI>
<LI>This is an unordered list-item 2</LI>
<LI>This is an unordered list-item 3</LI>

</UL><---------- Primary Tag close

Definition lists deserve a special mention as they are very useful for a list that links words or phrases with a much longer definition e.g. in a dictionary.

Tables

Tables like lists are used for structuring data. A Table is formed using 3 tags:

<<TABLE></TABLE>

Indicates start and end of table

<TR></TR>dd

Indicates start and end of row

<TD></TD>dd

Indicates start and end of a cell

A table with one row and three columns would look like this (with the text cell1, cell2, Cell3 in the cells) :

Tables on Web sites are used to present information in a particular way and are by far the most popular way of organising a web page.

Tables help designers layout text and graphics in the page so that they remain in specific places and relationships to other information on the page.

Tables also help determine what happens to the content of a web page when the browser window is re-sized. See laying out a web page using tables for more information.

I would also recommend you consult an HTML book for more information about tables.

Web page editors like FrontPage or Trellian make making tables very easy.

I wouldn't recommend you to try manually coding all but the most basic table.

Inserting Images

To inset an image on a page use the <IMG> tag as follows

<IMG SRC="my picture"> where my picture is the name and location of the image.

It is usual to offer alternative text for people who use non graphical browsers nut more importantly today for the search engines. the format is:

<IMG SRC="my picture" ALT= " if can't see my picture">

You can also specify the image size using

width= and height= attributes and even give the image a border using the border= attribute.

Here is an example of inserting an image called flowers.jpg with a size of 200*300 and a border 1 pixel thick.

<IMG SRC="flowers.gif" ALT= " picture of a flower" width=200 height=300 border=1>

pitcure of a flower

Exercise 4

1. Copy the above image (right click and save as-see below) into the courses/images/ folder (you will need to create the images folder).

2. Open Notepad with a blank file and copy and paste the following text.

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>

<h1>Lists and Images</h1>
<p>This is short opening paragraph followed by a bullet list of flowers.</p>
<ul>
<li>Rose</li>
<li>Tulip</li>
<li>Daffodil</li>
</ul>

<p>Here is a picture of some flowers</p>

</BODY>
</HTML>

3. Save the file as page2.html and view in a browser.

4. Change the image width to 400 save and view again in the browser. You should notice the distortion of the picture. This is because the original image is 200*300. The height and width attributes can only be used to roughly resize an image, to do it properly you need to use image editing software. (windows office picture manager on windows XP).

Continue to next---->Lesson5

Lesson3<------Previous

Articles| Privacy Policy| Contact Me| Other Resources
By Steve Cope