Lists and Tables and Images

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

Definition lists deserve a special mention as they are very useul for alist that links words or pharses 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) :

<TABLE>
    <TR>
                <TD>cell1</TD><TD>cell2</TD><TD>cell3</TD>
    </TR>
</TABLE>

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.gif with a size of 300*200 and a border 1 pixel thick.

Continue to next---->part5

part3<------Previous

Starting HTML  sections

• Starting Html -Intro
• Part1-An Introduction to HTML-Your first  Web Page
• Part2-HTML TAGS Explained
• part3-Formatting Text - Fonts
• part4-Lists and Tables and Images
• part5-Anchors and Linking

Web www.build-your-website.co.uk